@import '_content/Mohap.Web.Ui/Mohap.Web.Ui.u18fey4yei.bundle.scp.css';

/* /Components/Layout/ConsoleLayout.razor.rz.scp.css */
/* ConsoleLayout — authenticated console shell.
   A header band spans both columns over the white sidebar + the warm-paper
   workspace. Tokens from wwwroot/css/tokens.css. RTL-ready: the grid track order
   follows the writing direction so the rail mirrors under [dir=rtl] with no
   physical overrides. */
.console-app[b-pafd9sunu5] {
    display: grid;
    grid-template-columns: 248px 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas:
        "header header"
        "sidebar main";
    min-block-size: 100dvh;
    background: var(--canvas);
}

.console-app[b-pafd9sunu5]  .topbar {
    grid-area: header;
}

/* Topbar co-brand lockup — QB CLEAR product logo only.
   The MOHAP emblem image will be added via the MOHAP-LOGO-SLOT once the
   official SVG asset (img/mohap-logo.svg) lands. Until then the topbar
   shows only the QB CLEAR raster; no text wordmark clips in the topbar band. */
.console-brand[b-pafd9sunu5] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    text-decoration: none;
}

.console-brand-logo[b-pafd9sunu5] {
    display: block;
    block-size: 26px;
    inline-size: auto;
    filter: var(--ui-logo-filter);
}

/* Divider and MOHAP emblem image classes — ready for the MOHAP-LOGO-SLOT swap.
   These rules are inactive until the emblem asset is added and the slot is
   uncommented in ConsoleLayout.razor. */
.console-brand-divider[b-pafd9sunu5] {
    inline-size: 1px;
    block-size: 30px;
    background: var(--line-strong);
}

.console-brand-mohap-logo[b-pafd9sunu5] {
    display: block;
    block-size: 26px;
    inline-size: auto;
}

.console-app[b-pafd9sunu5]  .sidebar {
    grid-area: sidebar;
}

.console-main[b-pafd9sunu5] {
    grid-area: main;
    display: flex;
    flex-direction: column;
    min-inline-size: 0;
    min-block-size: 0;
    padding: var(--space-7) var(--space-8) var(--space-2);
    /* Safe here (unlike on .console-app): main has no sticky descendant whose
       positioning context this could disturb. Belt and braces beneath the
       per-component fixes above (grid/table/chart tracks) — contains any future
       page-content overflow to the main content column instead of the whole page. */
    overflow-x: hidden;
}

/* Phone: reclaim the fixed 40px desktop side gutters. They burned ~21% of a 375px
   screen and pushed fixed-min grids off-screen where overflow-x:hidden clipped them —
   this is the root-cause padding fix for the whole content column. */
@media (max-width: 640px) {
    .console-main[b-pafd9sunu5] {
        padding-inline: var(--space-4);
        padding-block-start: var(--space-5);
    }
}

/* Account menu trigger — name + chevron laid out inline. Capped + truncated (not
   just wrapped) so a long display name can't push the topbar's trailing grid
   track wider than the viewport on a narrow screen. */
.console-user-name[b-pafd9sunu5] {
    display: inline-block;
    max-inline-size: 12rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
    font-weight: 600;
    font-size: 13px;
    color: var(--ink);
}

.console-chevron[b-pafd9sunu5] {
    color: var(--muted);
    flex-shrink: 0;
}

/* Account menu panel items — shared base class for both <a> and <button>. */
.console-menu-item[b-pafd9sunu5] {
    display: block;
    width: 100%;
    padding: var(--space-2) var(--space-3);
    font: inherit;
    font-size: .8125rem;
    color: var(--ink-2);
    text-decoration: none;
    text-align: start;
    background: none;
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    white-space: nowrap;
}

.console-menu-item:hover[b-pafd9sunu5] {
    background: var(--surface-2);
    color: var(--ink);
}

.console-menu-form[b-pafd9sunu5] {
    margin: 0;
}

/* Account block — mockup treatment: avatar + stacked name/role. The meta column
   hides on narrow screens (the avatar + chevron remain a compact trigger). */
.console-user-meta[b-pafd9sunu5] {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.25;
}

.console-user-role[b-pafd9sunu5] {
    font-size: 11px;
    color: var(--muted);
    white-space: nowrap;
}

@media (max-width: 640px) {
    .console-user-meta[b-pafd9sunu5] {
        display: none;
    }
}

/* Panel section heading + divider (Preferences / account actions). */
.console-menu-heading[b-pafd9sunu5] {
    padding: var(--space-1) var(--space-3);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
}

.console-menu-divider[b-pafd9sunu5] {
    margin-block: var(--space-1);
    border-block-start: 1px solid var(--line, var(--ui-line));
}

/* Sidebar tag/foot content (the Sidebar primitive provides the containers). */
.st-dot[b-pafd9sunu5] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ui-accent-fill);
    flex-shrink: 0;
}

.sf-line[b-pafd9sunu5] {
    display: flex;
    align-items: center;
    gap: 7px;
}

.sf-dot[b-pafd9sunu5] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ui-good-fill);
    flex-shrink: 0;
}

.sf-version[b-pafd9sunu5] {
    margin-block-start: 4px;
    font-size: 10.5px;
    color: var(--ui-faint);
}

/* ── Responsive shell (Task 7.2 + 7.2a) ──────────────────────────────────────
   At lg+ (≥1024px) the layout above is unchanged: a 248px + 1fr grid with the
   sidebar in flow. Below lg the sidebar becomes an off-canvas drawer toggled by a
   CSS-only hidden checkbox (SSR-safe: no circuit needed on first paint).

   WCAG AA fix (7.2a): the checkbox is visually hidden rather than display:none so
   keyboard users can Tab to it and Space-toggle the drawer. At lg+ the checkbox is
   forced back to display:none (it controls nothing visible there) and the hamburger +
   backdrop remain hidden — desktop layout is pixel-identical to before. */
.console-nav-toggle[b-pafd9sunu5] {
    /* Visually-hidden but focusable (WCAG SC 2.1.1). Screen readers still see it;
       sighted keyboard users get feedback via the :focus-visible ring on the adjacent
       hamburger label (see the media block below). */
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    clip: rect(0 0 0 0); clip-path: inset(50%);
    overflow: hidden; white-space: nowrap;
}

/* At lg+ the checkbox controls nothing visible, so hide it from Tab order to avoid
   confusing keyboard users on desktop. */
@media (min-width: 1024px) {
    .console-nav-toggle[b-pafd9sunu5] {
        display: none;
    }
}

.console-nav-burger[b-pafd9sunu5],
.console-nav-backdrop[b-pafd9sunu5] {
    display: none;
}

/* ── Below lg: off-canvas drawer ───────────────────────────────────────────── */
@media (max-width: 1023.98px) {
    /* Single column: the header spans the row, the main fills the width, and the
       sidebar leaves the flow (it becomes a fixed overlay below). minmax(0, 1fr),
       not 1fr: a plain 1fr track still respects its content's intrinsic min-content
       size, so any oversized descendant (e.g. a chart that bakes in a JS-measured
       pixel width) blows this — the outermost layout grid — out past the viewport
       instead of letting main shrink to it and handle its own internal overflow. */
    .console-app[b-pafd9sunu5] {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "header"
            "main";
    }

    /* The hamburger — pinned to the inline-start of the 64px header band so it reads
       as the first control in the topbar without disturbing the Topbar RCL's own
       fixed grid (which we never touch, keeping desktop identical). */
    .console-nav-burger[b-pafd9sunu5] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        inset-block-start: 0;
        inset-inline-start: 4px;
        inline-size: 44px;
        block-size: 64px;
        z-index: 40; /* above the sticky topbar (z-index 30) so it stays tappable */
        color: var(--ink-2);
        background: transparent;
        border: none;
        border-radius: var(--radius-sm);
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .console-nav-burger:hover[b-pafd9sunu5] {
        color: var(--ink);
    }

    .console-nav-burger:focus-visible[b-pafd9sunu5] {
        outline: 2px solid var(--ui-accent);
        outline-offset: -4px;
    }

    /* Keyboard focus proxy: when the visually-hidden checkbox receives :focus-visible
       (Tab navigation), show a focus ring on the adjacent hamburger label so sighted
       keyboard users see where focus is. The checkbox is the first sibling; .console-nav-burger
       is the immediate next sibling, so the + combinator is exact. */
    .console-nav-toggle:focus-visible + .console-nav-burger[b-pafd9sunu5] {
        outline: 2px solid var(--ui-accent);
        outline-offset: 2px;
    }

    /* Nudge the topbar's leading content clear of the pinned hamburger. The Topbar
       RCL owns its grid; we only add inline-start padding via ::deep, the same
       ::deep seam the grid-area rules above already use. */
    .console-app[b-pafd9sunu5]  .topbar {
        padding-inline-start: 52px;
    }

    /* The sidebar → fixed off-canvas panel, slid out past the inline-start edge.
       Its own surface/border come from the Sidebar RCL; we only drive position +
       transform here. Logical translate keeps it correct under [dir=rtl]. */
    .console-app[b-pafd9sunu5]  .sidebar {
        position: fixed;
        inset-block-start: 64px;
        inset-inline-start: 0;
        z-index: 45;
        inline-size: 248px;
        max-inline-size: 86vw;
        block-size: calc(100dvh - 64px);
        transform: translateX(-100%);
        transition: transform .2s ease;
        will-change: transform;
    }

    [dir="rtl"] .console-app[b-pafd9sunu5]  .sidebar {
        transform: translateX(100%);
    }

    /* Checked → drawer slides in. :has() drives it off the hidden checkbox state, so
       it is order-independent and SSR-correct on first paint. */
    .console-app:has(.console-nav-toggle:checked)[b-pafd9sunu5]  .sidebar {
        transform: translateX(0);
    }

    /* Backdrop scrim — a warm dark wash (a scrim, not a status hue). Present in
       the DOM always; revealed only while the drawer is open so the click-to-close
       target exists exactly when needed. */
    .console-nav-backdrop[b-pafd9sunu5] {
        display: block;
        position: fixed;
        inset: 64px 0 0 0;
        z-index: 44; /* under the drawer (45), over the topbar (30) */
        background: var(--ui-scrim);
        opacity: 0;
        visibility: hidden;
        transition: opacity .2s ease;
        cursor: pointer;
    }

    .console-app:has(.console-nav-toggle:checked) .console-nav-backdrop[b-pafd9sunu5] {
        opacity: 1;
        visibility: visible;
    }
}

/* Honour reduced-motion: the drawer + scrim still open/close, just without the
   slide/fade transition. */
@media (max-width: 1023.98px) and (prefers-reduced-motion: reduce) {
    .console-app[b-pafd9sunu5]  .sidebar,
    .console-nav-backdrop[b-pafd9sunu5] {
        transition: none;
    }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.app-main[b-lfrmnikuv5] {
    min-block-size: 100vh;
    background: var(--bg);
    /* No padding: the auth pages this layout wraps (login / forgot / reset) are already
       full-height self-centering surfaces, so a wrapper gutter left the <=640px full-bleed
       login card floating with grey margins + square corners and added ~48px dead-scroll. */
}
/* /Components/Pages/Account/ChangePassword.razor.rz.scp.css */
/* /account/password — standalone change-password page header. The form itself is the shared
   <ChangePasswordCard />, styled in its own scoped stylesheet. Tokens from wwwroot/css/tokens.css. */

.account-pw-page[b-s31c10zq7x] {
    max-inline-size: 520px;
}

.account-pw-head[b-s31c10zq7x] {
    margin-block-end: 20px;
}

.account-pw-title[b-s31c10zq7x] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--ui-ink, var(--ui-ink));
}

.account-pw-lede[b-s31c10zq7x] {
    margin: 4px 0 0;
    color: var(--ui-muted, var(--ui-muted));
    font-size: .9rem;
}
/* /Components/Pages/Account/ChangePasswordCard.razor.rz.scp.css */
/* ChangePasswordCard — the shared change-password form. Scoped to this component so the styles
   apply wherever the card is hosted (/account/password and /account/preferences). Tokens from
   wwwroot/css/tokens.css. */

.account-pw[b-te3c8i4yxv] {
    display: grid;
    gap: 16px;
    max-inline-size: 520px;
}

.account-pw-ok[b-te3c8i4yxv] {
    margin: 0;
    padding: 10px 12px;
    border: 1px solid var(--ui-line, var(--ui-line));
    border-radius: 8px;
    background: var(--ui-surface, var(--ui-surface));
    color: var(--ui-ink, var(--ui-ink));
    font-size: .875rem;
    font-weight: 600;
}

.account-pw-errors[b-te3c8i4yxv] {
    margin: 0;
    padding-block: 10px;
    padding-inline: 28px 12px;
    border: 1px solid var(--ui-line, var(--ui-line));
    border-radius: 8px;
    background: var(--ui-surface, var(--ui-surface));
    color: var(--ui-danger, var(--ui-danger));
    font-size: .875rem;
}

.account-pw-actions[b-te3c8i4yxv] {
    margin-block-start: 8px;
}
/* /Components/Pages/Account/Preferences.razor.rz.scp.css */
/* /account/preferences — the officer preferences hub. Stacked section cards (language, default
   landing, change password) with a small segmented control. Tokens from wwwroot/css/tokens.css. */

.account-prefs[b-vtsej3dmyl] {
    display: grid;
    gap: 20px;
    max-inline-size: 720px;
}

.account-prefs-head[b-vtsej3dmyl] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.account-prefs-title[b-vtsej3dmyl] {
    margin: 0;
    font-size: 22px;
    font-weight: 600;
    color: var(--ui-ink, var(--ui-ink));
}

.account-prefs-lede[b-vtsej3dmyl] {
    margin: 0;
    font-size: 13px;
    color: var(--ui-muted, var(--ui-muted));
}

.account-prefs-desc[b-vtsej3dmyl] {
    margin: 0 0 14px;
    font-size: 13px;
    color: var(--ui-muted, var(--ui-muted));
}

/* Segmented control — a joined pill group of choices. Each language choice is its own <form>
   (a full POST re-renders the page in the chosen language); display:contents lets those buttons
   sit directly in the flex row. */
.prefs-segmented[b-vtsej3dmyl] {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 8px;
}

.prefs-seg-form[b-vtsej3dmyl] {
    display: contents;
}

.prefs-seg[b-vtsej3dmyl] {
    appearance: none;
    cursor: pointer;
    padding: 8px 18px;
    border: 1px solid var(--ui-line, var(--ui-line));
    border-radius: 8px;
    background: var(--ui-surface, var(--ui-surface));
    color: var(--ui-ink, var(--ui-ink));
    font: inherit;
    font-size: .875rem;
    font-weight: 500;
    transition: border-color .12s ease, background .12s ease, color .12s ease;
}

.prefs-seg:hover[b-vtsej3dmyl] {
    border-color: var(--ui-accent, var(--ui-accent));
}

.prefs-seg.is-active[b-vtsej3dmyl] {
    background: var(--ui-accent-fill);
    border-color: var(--ui-accent-fill);
    color: var(--ui-on-accent-fill);
}

.account-prefs-actions[b-vtsej3dmyl] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-block-start: 16px;
}

.account-prefs-ok[b-vtsej3dmyl] {
    font-size: .8125rem;
    font-weight: 600;
    color: var(--ui-ink, var(--ui-ink));
}

/* /Components/Pages/Admin/AssignedWork.razor.rz.scp.css */
/* Admin "Assigned work" board — a single full-width, paged table (mirrors the Applications list).
   The shared .page-shell owns the column + vertical rhythm; this file owns the toolbar, the table
   column sizing, the per-row assignee control, and the pager. Design-system tokens (--ui-*). */

/* ── Toolbar: officer filter on the start edge, summary on the end edge ─────────────── */
.toolbar[b-634l6ix0nh] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}

.filter-grp[b-634l6ix0nh] {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.filter-grp.end[b-634l6ix0nh] {
    margin-inline-start: auto;
}

.filter[b-634l6ix0nh] {
    display: inline-flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    color: var(--ui-muted);
}

.filter .ui-select[b-634l6ix0nh] {
    min-inline-size: 240px;
}

/* ── Table ──────────────────────────────────────────────────────────────────────────── */
/* A predictable allocation board: identity and title receive most of the line, while stage,
   age and the assignment control remain aligned. The shared Table owns horizontal overflow. */
[b-634l6ix0nh] .aw-table {
    table-layout: fixed;
}

[b-634l6ix0nh] .aw-table .td-applicant { inline-size: 34%; }
[b-634l6ix0nh] .aw-table .td-title     { inline-size: 22%; }
[b-634l6ix0nh] .aw-table .td-stage     { inline-size: 14%; }
[b-634l6ix0nh] .aw-table .td-days      { inline-size: 8%; white-space: nowrap; }
[b-634l6ix0nh] .aw-table .td-assignee  { inline-size: 22%; }

.num[b-634l6ix0nh] {
    text-align: end;
    font-variant-numeric: tabular-nums;
}

.days-unit[b-634l6ix0nh] {
    color: var(--ui-muted);
    font-size: 11px;
    margin-inline-start: 1px;
}

/* The "Assigned to" column IS the action control — keep it a comfortable, consistent width. */
.aw-assignee[b-634l6ix0nh] {
    inline-size: 100%;
    max-inline-size: 220px;
}

/* ApplicantCell renders a stretched-link whose ::after (inset:0) resolves to the nearest POSITIONED
   ancestor. Scope each cell to itself so the link covers ONLY its own cell and never intercepts clicks
   on the assignee select beside it. ::deep because <td> is emitted by the TableCell child component. */
.aw[b-634l6ix0nh]  td {
    position: relative;
}

/* ── Footer: range summary + pager ────────────────────────────────────────────────────── */
.aw-foot[b-634l6ix0nh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 14px 16px;
    border-block-start: 1px solid var(--ui-line);
}

.aw-pager[b-634l6ix0nh] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.aw-pager-btn[b-634l6ix0nh] {
    min-inline-size: 30px;
    block-size: 30px;
    padding: 0 8px;
    border: 1px solid var(--ui-line);
    border-radius: 6px;
    background: var(--ui-surface);
    color: var(--ui-ink-2);
    font-size: 13px;
    cursor: pointer;
    transition: background 0.1s, border-color 0.1s, color 0.1s;
}

.aw-pager-btn:hover:not(:disabled)[b-634l6ix0nh] {
    background: var(--ui-surface-page);
    color: var(--ui-ink);
}

.aw-pager-btn.active[b-634l6ix0nh] {
    background: var(--ui-accent-fill);
    border-color: var(--ui-accent-fill);
    color: var(--ui-on-accent-fill);
}

.aw-pager-btn:disabled[b-634l6ix0nh] {
    opacity: 0.45;
    cursor: not-allowed;
}

.aw-pager-btn:focus-visible[b-634l6ix0nh] {
    outline: 2px solid var(--ui-accent);
    outline-offset: 2px;
}

@media (max-width: 768px) {
    [b-634l6ix0nh] .aw-table {
        table-layout: auto;
    }

    [b-634l6ix0nh] .aw-table .td-applicant,
    [b-634l6ix0nh] .aw-table .td-title,
    [b-634l6ix0nh] .aw-table .td-stage,
    [b-634l6ix0nh] .aw-table .td-days,
    [b-634l6ix0nh] .aw-table .td-assignee {
        inline-size: auto;
    }

    .filter-grp.end[b-634l6ix0nh] {
        margin-inline-start: 0;
    }
}

@media (max-width: 560px) {
    .filter[b-634l6ix0nh],
    .filter .ui-select[b-634l6ix0nh] {
        inline-size: 100%;
        min-inline-size: 0;
    }
}
/* /Components/Pages/Admin/Organisations.razor.rz.scp.css */
/* Organisations — SuperAdmin platform-operator org directory (/admin/organisations).
   Monochrome slate design system (--ui-* tokens, theme.css). RTL-ready via logical
   properties. Form controls (.ui-input) and actions (<Button>) are system primitives;
   only layout + typography live here. */
.orgs-head[b-ivblonafsb] {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    /* Wrap on a narrow phone so the title + "New organisation" button stack. */
    flex-wrap: wrap;
}

.orgs-head-text[b-ivblonafsb] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.orgs-title[b-ivblonafsb] {
    font-size: 22px;
    font-weight: 600;
    color: var(--ui-ink);
    margin: 0;
}

.orgs-lede[b-ivblonafsb] {
    font-size: 13px;
    color: var(--ui-muted);
    margin: 0;
    max-inline-size: 72ch;
}

.orgs-name[b-ivblonafsb] {
    font-weight: 600;
    color: var(--ui-ink);
}


/* Row actions: Edit + Deactivate/Activate side-by-side with a small gap. */
.orgs-row-actions[b-ivblonafsb] {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Modal form body (create + edit): fields stacked vertically. */
.orgs-modal-form[b-ivblonafsb] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
/* /Components/Pages/Admin/Users.razor.rz.scp.css */
/* /admin/users — organisation user administration. Scoped styling for the thin admin
   page: a stacked card column with a "New user" button that opens a Dialog modal containing
   the create form, and the users table. Pure layout/visuals; no behaviour. Monochrome slate
   design system — form controls (.ui-input) and actions (<Button>) are system primitives;
   only layout + typography live here. */

.admin-users-head[b-z2if8kp8lj] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Row that places the heading/lede on the left and the "New user" button on the right. */
.admin-users-head-row[b-z2if8kp8lj] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    /* Wrap on a narrow phone so a long title + "New user" button stack instead of crushing. */
    flex-wrap: wrap;
}

.admin-users-head-actions[b-z2if8kp8lj] {
    /* Seat counter sits above the New user button, right-aligned with it, and stacks with the
       header row's own wrap on a narrow phone. */
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.admin-users-seats[b-z2if8kp8lj] {
    margin: 0;
    font-size: 13px;
    color: var(--ui-ink-muted, var(--ui-ink));
}

.admin-users-title[b-z2if8kp8lj] {
    margin: 0;
    font-size: 22px;
    font-weight: 600;
    color: var(--ui-ink);
}

.admin-users-lede[b-z2if8kp8lj] {
    margin: 0;
    font-size: 13px;
    color: var(--ui-muted);
}

.admin-card-title[b-z2if8kp8lj] {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--ui-ink);
}

.admin-empty[b-z2if8kp8lj] {
    margin: 0;
    font-size: 13px;
    color: var(--ui-muted);
}

/* Confirmation line after an email-sending action (send reset / resend invite). */
.admin-users-notice[b-z2if8kp8lj] {
    margin: 0;
    padding: 10px 14px;
    border: 1px solid var(--ui-line, var(--ui-line));
    border-radius: 8px;
    background: var(--ui-surface, var(--ui-surface));
    color: var(--ui-ink);
    font-size: 13px;
    font-weight: 600;
}

/* Per-row action cluster — keeps the two buttons on one line, wrapping on a narrow phone. */
.admin-users-actions[b-z2if8kp8lj] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Invite explainer inside the create-user modal (replaces the old initial-password field). */
.admin-users-invite-hint[b-z2if8kp8lj] {
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--ui-muted);
}
/* /Components/Pages/Console/ActiveLicences.razor.rz.scp.css */
/* Active Licences — issued-licence register screen, demo certificate card-grid.
   Ported from the demo Active Licences screen (mockup index.html t-certificates;
   styles.css .cert / .cert-grid). QB CLEAR tokens migrated to --ui-* (Task 5.8 re-skin).
   RTL-ready via logical properties. */
.licences[b-tgs1hcj8tn] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.licences-head[b-tgs1hcj8tn] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.licences-title[b-tgs1hcj8tn] {
    font-size: 22px;
    font-weight: 600;
    color: var(--ui-ink);
    margin: 0 0 4px;
}

.licences-lede[b-tgs1hcj8tn] {
    font-size: 13px;
    color: var(--ui-muted);
    margin: 0;
    max-inline-size: 64ch;
}

/* Page actions: renewal-queue + public-verification-portal. */
.licences-actions[b-tgs1hcj8tn] {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Authority filter toolbar. */
.licences-toolbar[b-tgs1hcj8tn] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.licences-filter-label[b-tgs1hcj8tn] {
    font-size: 12px;
    color: var(--ui-ink-2);
    font-weight: 500;
}

/* Compact-width override for authority filter select.
   ui-select sets width:100% — cap to auto for toolbar density while keeping
   all other ui-select tokens (border, bg, focus ring, font). */
.licences-filter.ui-select[b-tgs1hcj8tn] {
    width: auto;
    min-inline-size: 180px;
    height: 32px;
    padding-block: 0;
    padding-inline: 8px 28px;
    font-size: 13px;
}

/* Phone: wrap the label to its own line and let the authority select fill the row
   (also lifts the compact 32px select to a 44px touch target). */
@media (max-width: 640px) {
    .licences-toolbar[b-tgs1hcj8tn] {
        flex-wrap: wrap;
        align-items: stretch;
    }

    .licences-filter.ui-select[b-tgs1hcj8tn] {
        width: 100%;
        min-inline-size: 0;
        height: 44px;
    }
}

/* Certificate card-grid (mockup .cert-grid). */
.cert-grid[b-tgs1hcj8tn] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.cert[b-tgs1hcj8tn] {
    position: relative;
    background: var(--ui-surface);
    border: 1px solid var(--ui-line);
    border-radius: 12px;
}

.cert[b-tgs1hcj8tn]::before {
    content: '';
    position: absolute;
    inset: 5px;
    border: 1px dashed var(--ui-line-strong);
    border-radius: 8px;
    pointer-events: none;
}

.cert.mini[b-tgs1hcj8tn] {
    padding: 16px;
    display: flex;
    flex-direction: column;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

/* Whole-card drill-in: a transparent stretched link over the card opens the case.
   Interactive-hover affordance makes the clickability discoverable (feedback 2026-07-04). */
.cert.mini:has(.cert-stretch:hover)[b-tgs1hcj8tn],
.cert.mini:has(.cert-stretch:focus-visible)[b-tgs1hcj8tn] {
    border-color: var(--ui-accent);
    box-shadow: 0 1px 6px var(--ui-accent-ring);
}

.cert-stretch[b-tgs1hcj8tn] {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
    cursor: pointer;
}

.cert-stretch:focus-visible[b-tgs1hcj8tn] {
    outline: 2px solid var(--ui-accent);
    outline-offset: 2px;
}

.cert-band[b-tgs1hcj8tn] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-block-end: 12px;
}

.cert-crest.mini[b-tgs1hcj8tn] {
    flex: 0 0 28px;
    inline-size: 28px;
    block-size: 28px;
    display: grid;
    place-items: center;
    background: var(--ui-surface);
    border-radius: 6px;
    border: 1px solid var(--ui-line);
}

.cert-org.sm[b-tgs1hcj8tn] {
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 12px;
    color: var(--ui-ink-2);
}

.cert-title.sm[b-tgs1hcj8tn] {
    font-family: var(--font-ui);
    font-size: 14px;
    font-weight: 600;
    color: var(--ui-ink);
    letter-spacing: -0.01em;
    margin-block-start: 4px;
}

.cert-name.sm[b-tgs1hcj8tn] {
    font-family: var(--font-ui);
    font-style: italic;
    font-size: 18px;
    color: var(--ui-ink-2);
    border-block-end: 1px solid var(--ui-line);
    padding-block-end: 8px;
    margin-block-end: 8px;
}

.cert-meta.sm[b-tgs1hcj8tn] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    font-size: 11.5px;
    margin-block-start: auto;
}

.mono[b-tgs1hcj8tn] {
    font-family: var(--font-mono);
}

.muted[b-tgs1hcj8tn] {
    color: var(--ui-muted);
}

.small[b-tgs1hcj8tn] {
    font-size: 12px;
}

/* The status chip sits below the meta row. */
.cert[b-tgs1hcj8tn]  .chip {
    margin-block-start: 10px;
    align-self: flex-start;
}

/* Empty state + footer summary. */

.licences-foot[b-tgs1hcj8tn] {
    margin: 0;
    padding-inline: 4px;
}

@media (max-width: 1100px) {
    .cert-grid[b-tgs1hcj8tn] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .cert-grid[b-tgs1hcj8tn] {
        grid-template-columns: 1fr;
    }

    .licences-actions[b-tgs1hcj8tn] {
        inline-size: 100%;
        flex-wrap: wrap;
    }
}
/* /Components/Pages/Console/Admin/NewApplication.razor.rz.scp.css */
/* Intake-on-behalf — /applications/new.
   Warm palette (--ui-* tokens, theme.css).
   Form controls (.ui-input), Field wrappers (.ui-field*), Card, and Button are system
   primitives; this file owns the page layout, section headings, and the dropzone. */

/* ── Page head (shared page-shell provides the column + rhythm; B1 header recipe) ── */

.page-head[b-pd9uz3xgaz] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
}

.h1[b-pd9uz3xgaz] {
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 28px;
    letter-spacing: -0.015em;
    margin: 0 0 4px;
    color: var(--ui-ink);
}

.lede[b-pd9uz3xgaz] {
    font-size: 14px;
    color: var(--ui-muted);
    margin: 0;
    max-inline-size: 760px;
}

/* ── Form stack ───────────────────────────────────────────────────────────────────── */

/* The shared wizard shell owns the single surface; this scoped rule only establishes flow. */
.intake-form[b-pd9uz3xgaz] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* ── Five-step guided intake ───────────────────────────────────────────────────── */

.intake-stepper[b-pd9uz3xgaz] {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 12px;
    border: 0;
    border-block-end: 1px solid var(--ui-line);
    border-radius: 0;
    background: var(--ui-surface);
}

.intake-step-panel[b-pd9uz3xgaz] {
    min-inline-size: 0;
}

.intake-stepper__item[b-pd9uz3xgaz] {
    display: flex;
    align-items: center;
    gap: 9px;
    min-inline-size: 0;
    padding: 9px 10px;
    border-radius: 8px;
    color: var(--ui-muted);
    font-size: 12px;
    font-weight: 600;
}

.intake-stepper__item[data-state="current"][b-pd9uz3xgaz] {
    background: var(--ui-accent-tint);
    color: var(--ui-ink);
}

.intake-stepper__item[data-state="done"][b-pd9uz3xgaz] {
    color: var(--ui-ink-2);
}

.intake-stepper__number[b-pd9uz3xgaz] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 25px;
    block-size: 25px;
    flex: none;
    border: 1px solid var(--ui-line-strong);
    border-radius: 50%;
    background: var(--ui-surface);
    color: inherit;
}

.intake-stepper__item[data-state="current"] .intake-stepper__number[b-pd9uz3xgaz] {
    border-color: var(--ui-accent);
    color: var(--ui-accent);
}

.intake-stepper__item[data-state="done"] .intake-stepper__number[b-pd9uz3xgaz] {
    border-color: var(--ui-inverse);
    background: var(--ui-inverse);
    color: var(--ui-on-fill);
}

@media (max-width: 760px) {
    .intake-stepper[b-pd9uz3xgaz] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 440px) {
    .intake-stepper[b-pd9uz3xgaz] {
        grid-template-columns: minmax(0, 1fr);
    }

    .intake-stepper__item[data-state="pending"][b-pd9uz3xgaz] {
        display: none;
    }
}

/* ── Section headings ─────────────────────────────────────────────────────────────── */

.intake-section-heading[b-pd9uz3xgaz] {
    font-size: 19px;
    font-weight: 650;
    color: var(--ui-ink);
    margin: 2px 0 0;
}

.intake-section-kicker[b-pd9uz3xgaz] {
    color: var(--ui-accent);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.intake-section-lede[b-pd9uz3xgaz] {
    margin: 6px 0 22px;
    color: var(--ui-muted);
    font-size: 13px;
    line-height: 1.5;
}

.intake-field-hint[b-pd9uz3xgaz] {
    display: block;
    margin-block-start: 6px;
    color: var(--ui-muted);
    font-size: 12px;
}

/* ── 2-column responsive field grid ──────────────────────────────────────────────── */

/* Two equal columns within a Card; collapses to 1 column at ≤640px.
   minmax(0,…) so an input's intrinsic min-content width can never blow the track. */
.intake-row[b-pd9uz3xgaz] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 20px;
    margin-block-end: 20px;
}

.intake-row:last-child[b-pd9uz3xgaz] {
    margin-block-end: 0;
}

@media (max-width: 640px) {
    .intake-row[b-pd9uz3xgaz] {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Full-width field (e.g. Full name). */
.intake-field-full[b-pd9uz3xgaz] {
    margin-block-end: 20px;
}

/* Half-width field (e.g. Years of experience — max half the card width). */
.intake-field-half[b-pd9uz3xgaz] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px;
}

@media (max-width: 640px) {
    .intake-field-half[b-pd9uz3xgaz] {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ── Drag-and-drop dropzone ───────────────────────────────────────────────────────── */

/*
   The dropzone is a dashed-border container. The native InputFile is stretched to FILL
   the zone (transparent, on top), so a real file DROP anywhere on the zone lands on the
   input — Blazor's InputFile reads the dropped files natively (DragEventArgs cannot).
   Click-to-browse works because the transparent input is itself the click target; the
   "browse" word is a real <label for="Documents"> for keyboard/AT discoverability.
   Drag highlighting uses the pure Blazor ondragover/ondragleave C# events (border accent
   only) — no JS interop module needed.
*/

.intake-dropzone[b-pd9uz3xgaz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-block-size: 142px;
    padding: 22px 18px;
    border: 2px dashed var(--ui-line-strong);
    border-radius: 10px;
    background: var(--ui-surface);
    transition: border-color 0.15s ease, background 0.15s ease;
    position: relative;     /* contains the visually-hidden InputFile */
    text-align: center;
}

/* Hover invitation: page-tint fill (the B3 recipe — hover fill, accent only on dragover). */
.intake-dropzone:hover[b-pd9uz3xgaz] {
    background: var(--ui-surface-page);
}

/* Drag-active state: accent border + subtle tint. Pure CSS via Blazor-toggled class. */
.intake-dropzone.is-drag-over[b-pd9uz3xgaz],
.intake-dropzone.is-drag-over:hover[b-pd9uz3xgaz] {
    border-color: var(--ui-accent);
    background: var(--ui-accent-tint);
}

.intake-dropzone__icon[b-pd9uz3xgaz] {
    color: var(--ui-muted);
    width: 32px;
    height: 32px;
    margin-block-end: 4px;
}

.intake-dropzone__icon svg[b-pd9uz3xgaz] {
    width: 100%;
    height: 100%;
}

.intake-dropzone.is-drag-over .intake-dropzone__icon[b-pd9uz3xgaz] {
    color: var(--ui-accent);
}

.intake-dropzone__prompt[b-pd9uz3xgaz] {
    font-size: 14px;
    color: var(--ui-ink-2);
    margin: 0;
}

/* The "browse" label looks and feels like an inline text link (accent colour, pointer). */
.intake-dropzone__browse-label[b-pd9uz3xgaz] {
    color: var(--ui-accent);
    font-weight: 500;
    cursor: pointer;
    pointer-events: auto;
    text-decoration: underline;
    text-decoration-color: transparent;
    transition: text-decoration-color 0.1s;
}

.intake-dropzone__browse-label:hover[b-pd9uz3xgaz] {
    text-decoration-color: var(--ui-accent);
}

.intake-dropzone__hint[b-pd9uz3xgaz] {
    font-size: 12px;
    color: var(--ui-muted);
    margin: 0;
}

/*
   The InputFile FILLS the dropzone (transparent overlay, on top) so the native input
   receives both a click (browse) AND a real file drop anywhere on the zone — Blazor's
   InputFile.OnChange fires for drops natively, which a Blazor @ondrop handler cannot do
   (DragEventArgs exposes no file contents). It is transparent, not display:none, so it
   stays in the accessibility tree and the <label for="Documents"> still activates it.
   The decorative prompt/icon below sit behind it (pointer-events:none) so they don't
   intercept the drop; the real "browse" label keeps pointer-events for the click target.
*/
/* ::deep — the <input> is rendered by the InputFile child component, so a plain scoped
   selector never reaches it and the native "Choose Files" control showed inside the zone. */
.intake-dropzone[b-pd9uz3xgaz]  .intake-dropzone__file-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    pointer-events: auto;
}

/* The decorative contents sit below the transparent input so the drop always lands on the
   input — except the real <label>, which keeps pointer events as the explicit click target. */
.intake-dropzone__icon[b-pd9uz3xgaz],
.intake-dropzone__prompt[b-pd9uz3xgaz],
.intake-dropzone__hint[b-pd9uz3xgaz] {
    pointer-events: none;
}

/* ── Staged-files list ────────────────────────────────────────────────────────────── */

.intake-staged[b-pd9uz3xgaz] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    list-style: none;
    padding: 0;
    margin: 12px 0 0;
}

/* Each evidence type owns a dedicated multi-file slot. This removes the ambiguous type
   selector that previously appeared only after upload and matches the public wizard. */
.intake-document-grid[b-pd9uz3xgaz] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.intake-document-slot[b-pd9uz3xgaz] {
    min-inline-size: 0;
    padding: 14px;
    border: 1px solid var(--ui-line);
    border-radius: 10px;
    background: var(--ui-surface-page);
}

.intake-document-slot__head[b-pd9uz3xgaz] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    min-block-size: 34px;
    margin-block-end: 10px;
}

.intake-document-slot__head h3[b-pd9uz3xgaz] {
    margin: 0;
    color: var(--ui-ink-2);
    font-size: 13px;
    font-weight: 650;
    line-height: 1.35;
}

.intake-slot-tag[b-pd9uz3xgaz] {
    flex: none;
    padding: 3px 7px;
    border: 1px solid var(--ui-line);
    border-radius: 999px;
    background: var(--ui-surface);
    color: var(--ui-muted);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.intake-slot-tag--required[b-pd9uz3xgaz] {
    border-color: var(--ui-line-strong);
    color: var(--ui-ink);
}

@media (max-width: 860px) {
    .intake-document-grid[b-pd9uz3xgaz] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.intake-staged__item[b-pd9uz3xgaz] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 12px;
    border: 1px solid var(--ui-line);
    border-radius: 8px;
    background: var(--ui-surface);
}

.intake-staged__name[b-pd9uz3xgaz] {
    font-size: 13px;
    color: var(--ui-ink-2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

/* Remove (×) button — flat ghost, warm neutral, no red. */
.intake-staged__remove[b-pd9uz3xgaz] {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: var(--ui-muted);
    cursor: pointer;
    transition: color 0.1s, background 0.1s;
}

.intake-staged__remove:hover[b-pd9uz3xgaz] {
    color: var(--ui-ink);
    background: var(--ui-surface-page);
    border-color: var(--ui-line);
}

.intake-staged__remove:focus-visible[b-pd9uz3xgaz] {
    outline: 2px solid var(--ui-accent);
    outline-offset: 2px;
}

.intake-staged__remove svg[b-pd9uz3xgaz] {
    width: 14px;
    height: 14px;
}

/* ── Final review ───────────────────────────────────────────────────────────────── */

.intake-review[b-pd9uz3xgaz] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-block: 18px;
}

.intake-review section[b-pd9uz3xgaz] {
    padding: 16px;
    border: 1px solid var(--ui-line);
    border-radius: 10px;
    background: var(--ui-surface-page);
}

.intake-review h3[b-pd9uz3xgaz] {
    margin: 0 0 10px;
    font-size: 14px;
}

.intake-review dl[b-pd9uz3xgaz],
.intake-review ul[b-pd9uz3xgaz],
.intake-review p[b-pd9uz3xgaz] {
    margin: 0;
}

.intake-review dl > div[b-pd9uz3xgaz] {
    display: grid;
    grid-template-columns: minmax(120px, .8fr) minmax(0, 1.2fr);
    gap: 10px;
    padding-block: 5px;
}

.intake-review dt[b-pd9uz3xgaz] {
    color: var(--ui-muted);
}

.intake-review dd[b-pd9uz3xgaz] {
    margin: 0;
    overflow-wrap: anywhere;
}

.intake-review ul[b-pd9uz3xgaz] {
    padding-inline-start: 18px;
}

.intake-review-confirm[b-pd9uz3xgaz] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 16px;
    border: 1px solid var(--ui-line);
    border-radius: 10px;
    cursor: pointer;
}

.intake-review-confirm input[b-pd9uz3xgaz] {
    margin-block-start: 3px;
}

@media (max-width: 720px) {
    .intake-review[b-pd9uz3xgaz] {
        grid-template-columns: 1fr;
    }
}

/* ── Submit action row ────────────────────────────────────────────────────────────── */

.intake-actions[b-pd9uz3xgaz] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 24px;
}

@media (max-width: 560px) {
    .intake-actions[b-pd9uz3xgaz] {
        padding: 14px 16px;
    }
}

.intake-actions__spacer[b-pd9uz3xgaz] {
    flex: 1;
}

/* ── Success confirmation panel ───────────────────────────────────────────────────── */

.intake-confirm[b-pd9uz3xgaz] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 24px;
    border: 1px solid var(--ui-line);
    border-radius: 12px;
    background: var(--ui-surface);
}

/* Submitted badge — accent tint + accent tick (no green; no emoji icon). */
.intake-confirm-badge[b-pd9uz3xgaz] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--ui-accent-tint);
    color: var(--ui-accent);
}

.intake-confirm-badge svg[b-pd9uz3xgaz] {
    width: 22px;
    height: 22px;
}

.intake-trackingref[b-pd9uz3xgaz] {
    font-size: 14px;
    color: var(--ui-ink-2);
}

/* Server-error line — strong warm neutral, never red. */
.intake-error[b-pd9uz3xgaz] {
    margin: 8px 0;
    color: var(--ui-ink);
    font-weight: 600;
}
/* /Components/Pages/Console/Admin/ShortFormApplication.razor.rz.scp.css */
/* Short-form (document-first) intake — scoped styles. Mirrors the standard intake page's
   dropzone/panel look (those styles are component-scoped there, so the shared shapes are
   redeclared here) plus the live completeness view: per-document OCR status, the field
   checklist with its status chips, the conflict strip and the compact upload-more zone. */

.intake-step-panel[b-xin9iqf6n3] {
    background: var(--surface, var(--ui-surface));
    border: 1px solid var(--border, var(--ui-line));
    border-radius: 12px;
    padding: 1.5rem;
    margin-block-end: 1.25rem;
}

.intake-section-heading[b-xin9iqf6n3] {
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0 0 .25rem;
}

.intake-section-lede[b-xin9iqf6n3] {
    color: var(--text-muted, var(--ui-muted));
    font-size: .9rem;
    margin: 0 0 1rem;
}

.intake-row[b-xin9iqf6n3] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin-block-end: .75rem;
}

.intake-field-half[b-xin9iqf6n3] {
    max-width: 50%;
    margin-block-end: .75rem;
}

.intake-error[b-xin9iqf6n3] {
    color: var(--danger, var(--ui-bad));
    background: color-mix(in srgb, var(--danger, var(--ui-bad-fill)) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--danger, var(--ui-bad)) 30%, transparent);
    border-radius: 8px;
    padding: .6rem .9rem;
}

.sf-notice[b-xin9iqf6n3] {
    color: var(--success, var(--ui-good));
    background: color-mix(in srgb, var(--success, var(--ui-good-fill)) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--success, var(--ui-good)) 30%, transparent);
    border-radius: 8px;
    padding: .6rem .9rem;
}

/* ── Dropzone (shared shape with the standard intake) ─────────────────────── */

.intake-dropzone[b-xin9iqf6n3] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    padding: 1.75rem 1rem;
    border: 2px dashed var(--border, var(--ui-line-strong));
    border-radius: 10px;
    text-align: center;
    transition: border-color .15s ease, background-color .15s ease;
}

.intake-dropzone.is-drag-over[b-xin9iqf6n3] {
    border-color: var(--accent, var(--ui-attention));
    background: color-mix(in srgb, var(--accent, var(--ui-attention-fill)) 6%, transparent);
}

.intake-dropzone__icon svg[b-xin9iqf6n3] {
    inline-size: 32px;
    block-size: 32px;
    color: var(--text-muted, var(--ui-muted));
}

.intake-dropzone__prompt[b-xin9iqf6n3] {
    margin: 0;
    font-weight: 500;
}

.intake-dropzone__hint[b-xin9iqf6n3] {
    margin: 0;
    font-size: .8rem;
    color: var(--text-muted, var(--ui-muted));
}

.intake-dropzone__browse-label[b-xin9iqf6n3] {
    color: var(--accent, var(--ui-attention));
    text-decoration: underline;
    cursor: pointer;
}

/* The stretched native input receives the actual drop + click. ::deep because InputFile is a
   child component, so its rendered <input> does not carry this component's scope attribute. */
.intake-dropzone[b-xin9iqf6n3]  .intake-dropzone__file-input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.sf-dropzone--compact[b-xin9iqf6n3] {
    padding: .9rem 1rem;
}

.intake-staged[b-xin9iqf6n3] {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    padding: 0;
    margin: .9rem 0 0;
}

.intake-staged__item[b-xin9iqf6n3] {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    background: var(--surface-2, var(--ui-surface-sunken));
    border: 1px solid var(--border, var(--ui-line));
    border-radius: 999px;
    padding: .3rem .7rem;
    font-size: .85rem;
}

.intake-staged__remove[b-xin9iqf6n3] {
    display: inline-flex;
    border: 0;
    background: none;
    cursor: pointer;
    color: var(--text-muted, var(--ui-muted));
    padding: 0;
}

.intake-staged__remove svg[b-xin9iqf6n3] {
    inline-size: 14px;
    block-size: 14px;
}

.intake-actions[b-xin9iqf6n3] {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.intake-actions__spacer[b-xin9iqf6n3] {
    flex: 1;
}

.intake-trackingref[b-xin9iqf6n3] {
    margin: 0;
}

/* ── Processing (post-create): the document under the scanner → case record ──
   One signature element: a paper sheet whose skeleton text-lines light up as the
   beam passes — the machine visibly reading fields. Everything else stays quiet:
   console palette, generous rhythm, a truthful per-document segmented progress bar. */

.sf-processing-hero[b-xin9iqf6n3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 4rem 2rem 3rem;
    background: var(--surface, var(--ui-surface));
    border: 1px solid var(--border, var(--ui-line));
    border-radius: 16px;
    max-inline-size: 640px;
    margin-inline: auto;
}

/* The scanner stage: a soft platen the page sits on. */
.sf-scan-stage[b-xin9iqf6n3] {
    inline-size: 120px;
    block-size: 120px;
    display: grid;
    place-items: center;
    border-radius: 20px;
    background:
        radial-gradient(90px 60px at 50% 30%,
            color-mix(in srgb, var(--accent, var(--ui-attention-fill)) 10%, transparent), transparent);
    margin-block-end: 1.4rem;
}

.sf-scan-page[b-xin9iqf6n3] {
    position: relative;
    inline-size: 64px;
    block-size: 84px;
    background: var(--surface, var(--ui-surface));
    border: 1.5px solid color-mix(in srgb, var(--accent, var(--ui-attention)) 55%, var(--border, var(--ui-line)));
    border-radius: 6px 14px 6px 6px; /* folded corner */
    padding: 12px 9px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    overflow: hidden;
    box-shadow:
        0 1px 2px color-mix(in srgb, var(--accent, var(--ui-accent)) 12%, transparent),
        0 8px 24px -12px color-mix(in srgb, var(--accent, var(--ui-accent)) 35%, transparent);
}

/* Skeleton text-lines: what the OCR is reading, lighting up line by line. */
.sf-scan-line[b-xin9iqf6n3] {
    block-size: 5px;
    border-radius: 3px;
    background: color-mix(in srgb, var(--accent, var(--ui-attention-fill)) 14%, var(--surface-2, var(--ui-surface-sunken)));
    animation: sf-line-read-b-xin9iqf6n3 3.2s ease-in-out infinite;
}

.sf-scan-line--title[b-xin9iqf6n3] { inline-size: 70%; block-size: 7px; animation-delay: 0s; }
.sf-scan-line:nth-child(2)[b-xin9iqf6n3] { animation-delay: .45s; }
.sf-scan-line:nth-child(3)[b-xin9iqf6n3] { animation-delay: .9s; }
.sf-scan-line--short[b-xin9iqf6n3] { inline-size: 55%; }
.sf-scan-line:nth-child(4)[b-xin9iqf6n3] { animation-delay: 1.35s; }
.sf-scan-line:nth-child(5)[b-xin9iqf6n3] { animation-delay: 1.8s; }
.sf-scan-line:nth-child(6)[b-xin9iqf6n3] { animation-delay: 2.25s; }

@keyframes sf-line-read-b-xin9iqf6n3 {
    0%, 100% { background: color-mix(in srgb, var(--accent, var(--ui-attention-fill)) 14%, var(--surface-2, var(--ui-surface-sunken))); }
    18%, 42% { background: color-mix(in srgb, var(--accent, var(--ui-attention-fill)) 65%, transparent); }
}

/* The beam sweeping the sheet, synced to one read cycle. */
.sf-scan-beam[b-xin9iqf6n3] {
    position: absolute;
    inset-inline: 0;
    block-size: 10px;
    background: linear-gradient(180deg,
        transparent,
        color-mix(in srgb, var(--accent, var(--ui-attention-fill)) 22%, transparent) 45%,
        color-mix(in srgb, var(--accent, var(--ui-attention-fill)) 60%, white) 50%,
        color-mix(in srgb, var(--accent, var(--ui-attention-fill)) 22%, transparent) 55%,
        transparent);
    animation: sf-scan-b-xin9iqf6n3 3.2s ease-in-out infinite;
}

@keyframes sf-scan-b-xin9iqf6n3 {
    0% { inset-block-start: -12%; }
    55%, 100% { inset-block-start: 104%; }
}

.sf-scan-page--done[b-xin9iqf6n3] {
    display: grid;
    place-items: center;
    padding: 0;
    color: var(--success, var(--ui-good));
    border-color: color-mix(in srgb, var(--success, var(--ui-good)) 45%, var(--border, var(--ui-line)));
    box-shadow: 0 8px 24px -12px color-mix(in srgb, var(--success, var(--ui-good)) 35%, transparent);
    animation: sf-pop-b-xin9iqf6n3 .35s ease;
}

.sf-scan-page--done svg[b-xin9iqf6n3] {
    inline-size: 30px;
    block-size: 30px;
}

@keyframes sf-pop-b-xin9iqf6n3 {
    0% { transform: scale(.7); opacity: .4; }
    100% { transform: scale(1); opacity: 1; }
}

.sf-processing-hero__title[b-xin9iqf6n3] {
    font-size: 1.45rem;
    font-weight: 650;
    letter-spacing: -0.015em;
    margin: 0 0 .3rem;
}

.sf-processing-hero__ref[b-xin9iqf6n3] {
    color: var(--text-muted, var(--ui-muted));
    font-size: .9rem;
    margin: 0 0 1.4rem;
}

.sf-processing-hero__ref strong[b-xin9iqf6n3] {
    color: var(--text, var(--ui-ink));
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
}

/* Truthful progress: one segment per document. */
.sf-progress[b-xin9iqf6n3] {
    display: flex;
    align-items: center;
    gap: 6px;
    inline-size: min(380px, 100%);
    margin-block-end: 1.6rem;
}

.sf-progress__seg[b-xin9iqf6n3] {
    flex: 1;
    block-size: 6px;
    border-radius: 3px;
    background: var(--surface-2, var(--ui-surface-sunken));
    transition: background .4s ease;
}

.sf-progress__seg[data-done="True"][b-xin9iqf6n3] {
    background: var(--accent, var(--ui-attention-fill));
}

.sf-progress__count[b-xin9iqf6n3] {
    font-size: .8rem;
    color: var(--text-muted, var(--ui-muted));
    font-variant-numeric: tabular-nums;
    margin-inline-start: .5rem;
    white-space: nowrap;
}

.sf-doc-list--hero[b-xin9iqf6n3] {
    inline-size: min(480px, 100%);
    margin: 0;
    text-align: start;
}

.sf-doc-list--hero .sf-doc[b-xin9iqf6n3] {
    border: 0;
    border-block-end: 1px solid var(--border, var(--ui-surface-sunken));
    border-radius: 0;
    padding: .65rem .25rem;
}

.sf-doc-list--hero .sf-doc:last-child[b-xin9iqf6n3] {
    border-block-end: 0;
}

.sf-doc__glyph[b-xin9iqf6n3] {
    inline-size: 18px;
    block-size: 18px;
    color: var(--text-muted, var(--ui-faint));
    flex: none;
}

.sf-doc[data-status="busy"] .sf-doc__glyph[b-xin9iqf6n3] {
    color: var(--accent, var(--ui-attention));
}

.sf-doc__reading[b-xin9iqf6n3] {
    font-size: .8rem;
    color: var(--accent, var(--ui-attention));
    animation: sf-reading-b-xin9iqf6n3 1.4s ease-in-out infinite;
    white-space: nowrap;
}

@keyframes sf-reading-b-xin9iqf6n3 {
    0%, 100% { opacity: 1; }
    50% { opacity: .45; }
}

.sf-doc__kind[b-xin9iqf6n3] {
    font-size: .8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-muted, var(--ui-muted));
    background: color-mix(in srgb, var(--accent, var(--ui-attention-fill)) 9%, transparent);
    border-radius: 999px;
    padding: .18rem .6rem;
    white-space: nowrap;
}

.sf-doc__done[b-xin9iqf6n3] {
    display: inline-grid;
    place-items: center;
    inline-size: 20px;
    block-size: 20px;
    border-radius: 50%;
    color: var(--success, var(--ui-good));
    font-weight: 700;
    background: color-mix(in srgb, var(--success, var(--ui-good-fill)) 10%, transparent);
    margin-inline-start: .5rem;
}

.sf-doc__done svg[b-xin9iqf6n3] {
    inline-size: 12px;
    block-size: 12px;
}

/* Calm for users who ask for it: no sweep, no shimmer — state changes only. */
@media (prefers-reduced-motion: reduce) {
    .sf-scan-beam[b-xin9iqf6n3] { display: none; }
    .sf-scan-line[b-xin9iqf6n3],
    .sf-doc__reading[b-xin9iqf6n3],
    .sf-progress__seg--filing[data-active="True"][b-xin9iqf6n3] { animation: none; }
    .sf-scan-page--done[b-xin9iqf6n3] { animation: none; }
}

/* ── Created banner ───────────────────────────────────────────────────────── */

.sf-created[b-xin9iqf6n3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: var(--surface-2, var(--ui-good-tint));
    border: 1px solid var(--border, var(--ui-good-line));
    border-radius: 10px;
    padding: .8rem 1.1rem;
    margin-block-end: 1.25rem;
}

/* ── OCR progress ─────────────────────────────────────────────────────────── */

.sf-progress-head[b-xin9iqf6n3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.sf-progress-chip[b-xin9iqf6n3] {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .85rem;
    border-radius: 999px;
    padding: .25rem .75rem;
    background: var(--surface-2, var(--ui-surface-sunken));
    border: 1px solid var(--border, var(--ui-line));
}

.sf-progress-chip[data-state="busy"][b-xin9iqf6n3] {
    color: var(--accent, var(--ui-attention));
}

.sf-progress-chip[data-state="done"][b-xin9iqf6n3] {
    color: var(--success, var(--ui-good));
}

.sf-spinner[b-xin9iqf6n3] {
    inline-size: 12px;
    block-size: 12px;
    border: 2px solid color-mix(in srgb, currentColor 30%, transparent);
    border-block-start-color: currentColor;
    border-radius: 50%;
    animation: sf-spin-b-xin9iqf6n3 .8s linear infinite;
}

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

.sf-processing[b-xin9iqf6n3] {
    color: var(--text-muted, var(--ui-muted));
}

.sf-doc-list[b-xin9iqf6n3] {
    list-style: none;
    margin: .75rem 0 0;
    padding: 0;
    display: grid;
    /* minmax(0, 1fr), not the bare 1fr (= minmax(auto, 1fr)): a grid track never grows to a row's
       min-content width, so an unbroken file name cannot widen the rows past the card. */
    grid-template-columns: minmax(0, 1fr);
    gap: .4rem;
}

.sf-doc[b-xin9iqf6n3] {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-inline-size: 0;
    max-inline-size: 100%;
    border: 1px solid var(--border, var(--ui-line));
    border-radius: 8px;
    padding: .45rem .8rem;
    font-size: .9rem;
}

.sf-doc__name[b-xin9iqf6n3] {
    font-weight: 500;
    display: flex;
    flex-direction: column;
    /* The name column yields to the status column: it takes what is left and truncates the file
       name inside it, so a long upload name can never push the type chip out of the card. */
    flex: 1 1 auto;
    min-inline-size: 0;
    text-align: start;
}

.sf-doc__file[b-xin9iqf6n3] {
    display: block;
    font-weight: 400;
    font-size: .76rem;
    color: var(--text-muted, var(--ui-faint));
    min-inline-size: 0;
    max-inline-size: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sf-doc__status[b-xin9iqf6n3] {
    margin-inline-start: auto;
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    max-inline-size: 60%;
}

/* A detected-type chip longer than its share is cut with an ellipsis rather than growing the row. */
.sf-doc__status .sf-doc__kind[b-xin9iqf6n3] {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Filing step: every document is read; the case-level passes are running ─── */

.sf-filing[b-xin9iqf6n3] {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    inline-size: min(480px, 100%);
    margin-block-start: 1rem;
    padding: .75rem .9rem;
    text-align: start;
    border-radius: 10px;
    background: color-mix(in srgb, var(--accent, var(--ui-attention-fill)) 6%, transparent);
    color: var(--text, var(--ui-ink));
    font-size: .9rem;
}

.sf-filing .sf-spinner[b-xin9iqf6n3] {
    margin-block-start: .2rem;
    color: var(--accent, var(--ui-attention));
}

.sf-filing__text[b-xin9iqf6n3] {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    min-inline-size: 0;
}

.sf-filing__sub[b-xin9iqf6n3] {
    font-size: .8rem;
    color: var(--text-muted, var(--ui-muted));
}

/* The bar's final segment stands for the filing step and pulses while it runs. */
.sf-progress__seg--filing[data-active="True"][b-xin9iqf6n3] {
    background: color-mix(in srgb, var(--accent, var(--ui-attention-fill)) 45%, var(--surface-2, var(--ui-surface-sunken)));
    animation: sf-reading-b-xin9iqf6n3 1.4s ease-in-out infinite;
}

.sf-progress__seg--filing[data-done="True"][b-xin9iqf6n3] {
    background: var(--accent, var(--ui-attention-fill));
}

.sf-doc__failed[b-xin9iqf6n3] {
    color: var(--danger, var(--ui-bad));
    font-size: .8rem;
}

.sf-upload-more[b-xin9iqf6n3] {
    margin-block-start: 1.1rem;
}

.sf-upload-more h3[b-xin9iqf6n3] {
    margin: 0 0 .2rem;
    font-size: .95rem;
}

/* ── Conflicts ────────────────────────────────────────────────────────────── */

.sf-conflicts[b-xin9iqf6n3] {
    border: 1px solid color-mix(in srgb, var(--warning, var(--ui-warn)) 40%, transparent);
    background: color-mix(in srgb, var(--warning, var(--ui-warn-fill)) 7%, transparent);
    border-radius: 10px;
    padding: 1rem 1.25rem;
    margin-block-end: 1.25rem;
}

.sf-conflicts h3[b-xin9iqf6n3] {
    margin: 0 0 .25rem;
    color: var(--warning, var(--ui-warn));
}

.sf-conflicts ul[b-xin9iqf6n3] {
    margin: .5rem 0 0;
    padding-inline-start: 1.1rem;
}

/* ── Completeness checklist ───────────────────────────────────────────────── */

.sf-fields[b-xin9iqf6n3] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .4rem;
}

.sf-field[b-xin9iqf6n3] {
    display: grid;
    grid-template-columns: minmax(160px, 1fr) 2fr auto auto;
    align-items: center;
    gap: .75rem;
    border: 1px solid var(--border, var(--ui-line));
    border-radius: 8px;
    padding: .5rem .8rem;
    font-size: .9rem;
}

.sf-field[data-status="missing"][data-optional="False"][b-xin9iqf6n3] {
    border-color: color-mix(in srgb, var(--danger, var(--ui-bad)) 45%, transparent);
    background: color-mix(in srgb, var(--danger, var(--ui-bad-fill)) 4%, transparent);
}

.sf-field[data-status="conflict"][b-xin9iqf6n3] {
    border-color: color-mix(in srgb, var(--warning, var(--ui-warn)) 55%, transparent);
    background: color-mix(in srgb, var(--warning, var(--ui-warn-fill)) 6%, transparent);
}

.sf-field[data-status="suggested"][b-xin9iqf6n3] {
    border-color: color-mix(in srgb, var(--accent, var(--ui-attention)) 45%, transparent);
}

.sf-field__label[b-xin9iqf6n3] {
    font-weight: 500;
}

.sf-blockers[b-xin9iqf6n3] {
    color: var(--danger, var(--ui-bad));
    background: color-mix(in srgb, var(--danger, var(--ui-bad-fill)) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--danger, var(--ui-bad)) 35%, transparent);
    border-radius: 8px;
    padding: .6rem .9rem;
    font-weight: 500;
}

.sf-field[data-blocker="True"][b-xin9iqf6n3] {
    border-inline-start: 4px solid var(--danger, var(--ui-bad));
}

.sf-field__blocker[b-xin9iqf6n3] {
    margin-inline-start: .45rem;
    font-size: .7rem;
    font-weight: 600;
    color: var(--danger, var(--ui-bad));
    background: color-mix(in srgb, var(--danger, var(--ui-bad-fill)) 10%, transparent);
    border-radius: 999px;
    padding: .1rem .5rem;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.sf-field__recommended[b-xin9iqf6n3] {
    margin-inline-start: .45rem;
    font-size: .7rem;
    font-weight: 600;
    color: var(--text-muted, var(--ui-muted));
    background: var(--surface-2, var(--ui-surface-sunken));
    border: 1px solid var(--border, var(--ui-line));
    border-radius: 999px;
    padding: .1rem .5rem;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.sf-field__optional[b-xin9iqf6n3] {
    margin-inline-start: .4rem;
    font-size: .72rem;
    color: var(--text-muted, var(--ui-muted));
    text-transform: uppercase;
    letter-spacing: .04em;
}

.sf-field__value[b-xin9iqf6n3] {
    color: var(--text, var(--ui-ink));
    overflow-wrap: anywhere;
}

.sf-field[data-status="missing"] .sf-field__value[b-xin9iqf6n3] {
    color: var(--text-muted, var(--ui-faint));
    font-style: italic;
}

.sf-chip[b-xin9iqf6n3] {
    font-size: .75rem;
    border-radius: 999px;
    padding: .15rem .6rem;
    border: 1px solid var(--border, var(--ui-line));
    background: var(--surface-2, var(--ui-surface-sunken));
    white-space: nowrap;
}

.sf-chip[data-status="filled"][b-xin9iqf6n3] { color: var(--success, var(--ui-good)); }
.sf-chip[data-status="ai"][b-xin9iqf6n3] { color: var(--accent, var(--ui-attention)); }
.sf-chip[data-status="suggested"][b-xin9iqf6n3] { color: var(--accent, var(--ui-attention)); }
.sf-chip[data-status="missing"][b-xin9iqf6n3] { color: var(--danger, var(--ui-bad)); }
.sf-chip[data-status="conflict"][b-xin9iqf6n3] { color: var(--warning, var(--ui-warn)); }

@media (max-width: 720px) {
    .sf-field[b-xin9iqf6n3] {
        grid-template-columns: 1fr auto;
        grid-auto-rows: auto;
    }

    .intake-field-half[b-xin9iqf6n3] {
        max-width: 100%;
    }
}
/* /Components/Pages/Console/ApplicantDetail.razor.rz.scp.css */
/* Applicant detail — case-file screen.
   Warm palette (theme.css): warm greys + the gold accent.
   var(--primary) / var(--muted) / var(--ink) / var(--accent) replaced with
   --ui-* tokens throughout. Subnav uses the console's bordered control-surface language with
   equal-width destinations and a quiet accent-tinted selected state.
   RTL-ready via logical inline properties. */

.applicant[b-9xytkwcdpr] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.applicant-bar[b-9xytkwcdpr] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.applicant-back-link[b-9xytkwcdpr] {
    color: var(--ui-accent);
    font-size: 13px;
    text-decoration: none;
    font-weight: 500;
}

.applicant-back-link:hover[b-9xytkwcdpr] {
    color: var(--ui-accent-hover);
    text-decoration: underline;
}

.applicant-ref[b-9xytkwcdpr] {
    font-size: 12px;
    color: var(--ui-muted);
    flex: 1; /* push the Confirm button to the inline-end */
}

/* Inline notice shown when the Confirm case action fails (non-alarming; monochrome). */
.applicant-notice[b-9xytkwcdpr] {
    font-size: 13px;
    color: var(--ui-ink-2);
    padding: 10px 14px;
    background: var(--ui-surface-2, var(--ui-surface-page));
    border: 1px solid var(--ui-line);
    border-radius: 6px;
}

/* Header card. The <Card> around it already carries the console's 20px/22px padding, so the
   header adds none of its own — its edges line up with the Overview cards below. */
.applicant-head[b-9xytkwcdpr] {
    display: flex;
    gap: 22px;
    align-items: center;
    padding: 0;
}

/* Section tabs live on the header card's bottom edge so header + nav read as one block. */
[b-9xytkwcdpr] .applicant-subnav.ui-tabs {
    margin: 10px calc(-1 * 22px) calc(-1 * 20px);
    padding-inline: 22px;
    background: var(--paper, var(--ui-surface));
    border-block-start: 1px solid var(--line);
    border-block-end: 0;
    border-end-start-radius: var(--radius, 10px);
    border-end-end-radius: var(--radius, 10px);
}

.ah-meta[b-9xytkwcdpr] {
    flex: 1;
    min-inline-size: 0;
}

.ah-name[b-9xytkwcdpr] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-block-end: 10px;
}

.ah-name-title[b-9xytkwcdpr] {
    font-family: var(--font-ui);
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--ui-ink);
    margin: 0;
}

/* The three case facts (applying for / PQR title / sponsor) as one row: an eyebrow label beside
   each value and a wide, even gap between the facts, so they read as a set rather than three
   floating phrases. The eyebrows do the separating — a hairline divider left a stray rule at the
   end of a wrapped line. Below desktop widths they stack, one fact per line. */
.ah-sub[b-9xytkwcdpr] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 28px;
    font-size: 13px;
    color: var(--ui-ink);
    margin-block-end: 16px;
}

.ah-sub > span[b-9xytkwcdpr] {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 8px;
    min-inline-size: 0;
}

.ah-sub strong[b-9xytkwcdpr] {
    color: var(--ui-muted);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-inline-end: 0;
}

[b-9xytkwcdpr] .ah-facts {
    border-block-start: 1px solid var(--line);
    margin-block-start: 8px;
    padding-block-start: 8px;
}

/* Empty / loading state. */
.applicant-empty[b-9xytkwcdpr] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
    color: var(--ui-ink-2);
}

/* ── Responsive reflow (Task 7.3) ────────────────────────────────────────────
   Breakpoints (8px rhythm):
     ≤768px (md) — page-head stack; ah-stats wrap to single-column stack.
     ≤560px      — header avatar + meta stack vertically.
   Desktop (>768px) layout is unchanged. */

@media (max-width: 768px) {
    /* Page-head: title block + action button stack vertically. */
    .applicant-bar[b-9xytkwcdpr] {
        flex-wrap: wrap;
    }

    /* Facts: one per line below desktop widths, no dividers — a divided row that wraps leaves a
       stray hairline at the end of the first line. */
    .ah-sub[b-9xytkwcdpr] {
        flex-direction: column;
        gap: 6px;
    }

    .ah-sub > span[b-9xytkwcdpr] {
        padding-inline-end: 0;
        margin-inline-end: 0;
        border-inline-end: 0;
    }
}

@media (max-width: 560px) {
    /* Header card: avatar + meta stack vertically on small phones. */
    .applicant-head[b-9xytkwcdpr] {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
}

/* ── Reading strip: shown whenever this case's documents are mid-read ───────── */

.applicant-reading[b-9xytkwcdpr] {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--surface, var(--ui-surface));
    border: 1px solid color-mix(in srgb, var(--accent, var(--ui-attention)) 30%, var(--border, var(--ui-line)));
    border-inline-start: 4px solid var(--accent, var(--ui-attention));
    border-radius: 10px;
    padding: 10px 16px;
    margin-block-end: 14px;
}

.applicant-reading__page[b-9xytkwcdpr] {
    position: relative;
    inline-size: 22px;
    block-size: 28px;
    flex: none;
    border: 1.5px solid color-mix(in srgb, var(--accent, var(--ui-attention)) 55%, var(--border, var(--ui-line)));
    border-radius: 3px 6px 3px 3px;
    overflow: hidden;
    background: var(--surface, var(--ui-surface));
}

.applicant-reading__beam[b-9xytkwcdpr] {
    position: absolute;
    inset-inline: 0;
    block-size: 6px;
    background: linear-gradient(180deg, transparent,
        color-mix(in srgb, var(--accent, var(--ui-attention-fill)) 55%, white), transparent);
    animation: applicant-reading-scan-b-9xytkwcdpr 2s ease-in-out infinite;
}

@keyframes applicant-reading-scan-b-9xytkwcdpr {
    0% { inset-block-start: -20%; }
    60%, 100% { inset-block-start: 110%; }
}

.applicant-reading__text[b-9xytkwcdpr] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    min-inline-size: 0;
}

.applicant-reading__count[b-9xytkwcdpr] {
    font-size: .8rem;
    color: var(--text-muted, var(--ui-muted));
    font-variant-numeric: tabular-nums;
}

.applicant-reading__sub[b-9xytkwcdpr] {
    font-size: .8rem;
    color: var(--text-muted, var(--ui-muted));
}

.applicant-reading__bar[b-9xytkwcdpr] {
    display: flex;
    gap: 4px;
    margin-inline-start: auto;
    inline-size: 120px;
    flex: none;
}

.applicant-reading__seg[b-9xytkwcdpr] {
    flex: 1;
    block-size: 5px;
    border-radius: 3px;
    background: var(--surface-2, var(--ui-surface-sunken));
    transition: background .4s ease;
}

.applicant-reading__seg[data-done="True"][b-9xytkwcdpr] {
    background: var(--accent, var(--ui-attention-fill));
}

@media (prefers-reduced-motion: reduce) {
    .applicant-reading__beam[b-9xytkwcdpr] { animation: none; display: none; }
}

@media (max-width: 720px) {
    .applicant-reading__bar[b-9xytkwcdpr] { display: none; }
}
/* /Components/Pages/Console/Applications.razor.rz.scp.css */
/* Applications list — officer console list screen.
   Warm palette (theme.css): warm greys + the gold accent.
   All --primary / --accent / navy / teal / green removed; --ui-* tokens used.
   RTL-ready via logical properties. ::deep crosses into Table / Card / Avatar children.

   Stretched-link navigation: the .applicant-cell <a> is the real keyboard/AT link;
   its ::after overlay covers the entire row so a click anywhere on the row follows the
   link. The row (<tr>) must be position:relative. Other interactive cells (chips, etc.)
   sit at z-index:1 so they remain clickable above the overlay. */

/* .apps-page column layout now comes from the shared .page-shell class
   (w-full flex flex-col gap-4, Task A5) — kept here only as a scoping hook
   for the rest of this file's selectors. */

/* Page head — title on the left, the two intake actions on the right. */
.page-head[b-b29ps4vian] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.page-head-text[b-b29ps4vian] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.page-head-actions[b-b29ps4vian] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.h1[b-b29ps4vian] {
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: 19px;
    letter-spacing: -0.01em;
    margin: 0;
    color: var(--ui-ink);
}

.lede[b-b29ps4vian] {
    font-size: 12.5px;
    color: var(--ui-muted);
    margin: 0;
    max-inline-size: 760px;
}

/* Stage strip — the shared <Tabs> component; only the page-level spacing lives here. */
.apps-tabs[b-b29ps4vian] {
    margin-block-start: -2px;
}

/* One filter strip in the panel's header band: search plus the four facets, wrapping
   below 900px. Labels ride on aria-label / placeholder, so nothing stacks above a control. */
.apps-toolbar[b-b29ps4vian] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--ui-surface-page);
    border-block-end: 1px solid var(--ui-line);
}

.apps-search[b-b29ps4vian] {
    flex: 1 1 240px;
    min-inline-size: 200px;
    max-inline-size: 320px;
}

.apps-toolbar .ui-searchbox__input[b-b29ps4vian] {
    block-size: 30px;
    padding-block: 0;
    font-size: 12.5px;
}

.apps-toolbar select.ui-select[b-b29ps4vian] {
    inline-size: auto;
    flex: 0 1 auto;
    block-size: 30px;
    padding-block: 0;
    padding-inline: 8px 26px;
    font-size: 12px;
}

/* Quiet reset link — a link, not a button, so it never competes with the header actions. */
.apps-clear[b-b29ps4vian] {
    appearance: none;
    border: 0;
    background: none;
    margin-inline-start: auto;
    padding: 4px 2px;
    font: inherit;
    font-size: 12px;
    color: var(--ui-accent);
    text-decoration: underline;
    cursor: pointer;
}

.apps-clear:hover[b-b29ps4vian] {
    color: var(--ui-ink);
}

@media (max-width: 900px) {
    .apps-search[b-b29ps4vian] {
        flex-basis: 100%;
        max-inline-size: 100%;
    }

    .apps-clear[b-b29ps4vian] {
        margin-inline-start: 0;
    }
}

/* The list carries a hairline border and no drop shadow (§1). */
.apps-panel[b-b29ps4vian] {
    box-shadow: none;
}

/* Horizontal-scroll shell. The six columns fit a laptop, but a long applicant name
   or specialist can still push the intrinsic width past the page; the scroll box keeps
   that overflow local, so the list scrolls inside its own panel instead of being clipped
   or pushing the page sideways (§1). Below the Table component's stacked breakpoint the
   rows fold to compact stacks and there is nothing wide to scroll. */
.apps-table-scroll[b-b29ps4vian] {
    overflow-x: auto;
}

/* ── Table body rows ─────────────────────────────────────────────────────────
   Each data row is position:relative so the stretched-link ::after overlay is
   scoped to it. cursor:pointer confirms the whole row is clickable. */
[b-b29ps4vian] .apps tbody tr.apps-row {
    position: relative;
    cursor: pointer;
}

/* Hover highlight — distinct from the generic table hover so it can be tuned here. */
[b-b29ps4vian] .apps tbody tr.apps-row:hover {
    background: var(--ui-accent-tint); /* gold tint telegraphs clickability */
}

/* Cells sit in normal flow; padding/height come from the shared compact
   44px table grid (Table.razor.css, Task A5) — no page-local override. */
[b-b29ps4vian] .apps tbody td {
    vertical-align: middle;
}

/* ── Applicant cell → ApplicantCell component ────────────────────────────────
   The avatar + name + sub-line stretched-link cell now lives in the shared
   <ApplicantCell> component (Components/Shared/ApplicantCell.razor). Its ::after
   overlay resolves to the position:relative row set above. Interactive cells in the
   row still need z-index:1 to sit above that overlay so their clicks aren't swallowed;
   plain-text cells don't (the overlay forwards the click to row navigation). */

[b-b29ps4vian] .apps-title,
[b-b29ps4vian] .verif-cell,
[b-b29ps4vian] .apps-progress {
    position: relative;
    z-index: 1;
}

/* ── Title + tier column ─────────────────────────────────────────────────────*/

[b-b29ps4vian] .apps-title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

/* ── Progress column ─────────────────────────────────────────────────────────
   A 70px bar and the "met/total" tally of the case's criterion checks. The bar is
   aria-hidden (the tally beside it carries the value) and is dropped entirely when the
   case has no checks yet, so an empty case shows an em dash rather than an empty rail. */

[b-b29ps4vian] .apps-progress {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

[b-b29ps4vian] .apps-progress-bar {
    block-size: 4px;
    inline-size: 70px;
    flex: 0 0 70px;
    border-radius: 99px;
    background: var(--ui-line);
    overflow: hidden;
}

[b-b29ps4vian] .apps-progress-bar > span {
    display: block;
    block-size: 100%;
    inline-size: var(--w, 0%);
    border-radius: 99px;
    background: var(--ui-accent);
}

[b-b29ps4vian] .apps-progress-count {
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: var(--ui-ink-2);
    white-space: nowrap;
}

/* ── Verification cell ───────────────────────────────────────────────────────*/

[b-b29ps4vian] .verif-cell {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

/* ── Days column ─────────────────────────────────────────────────────────────*/

[b-b29ps4vian] .days-unit {
    font-size: 11px;
    color: var(--ui-muted);
    margin-inline-start: 1px;
}

/* ── Column widths (set on the th; td inherits the rendered column width) ───
   Explicit percentages instead of a min-inline-size floor, so the compact 44px grid
   lays out predictably. Applicant is the widest; days is narrow (numeric, .num).
   Sponsoring hospital and pathway are gone from the table — both remain as facets. */

[b-b29ps4vian] .apps thead .td-applicant { inline-size: 30%; }
[b-b29ps4vian] .apps thead .td-title     { inline-size: 18%; }
[b-b29ps4vian] .apps thead .td-progress  { inline-size: 14%; }
[b-b29ps4vian] .apps thead .td-verif     { inline-size: 16%; }
[b-b29ps4vian] .apps thead .td-days      { inline-size: 8%; white-space: nowrap; }
[b-b29ps4vian] .apps thead .td-specialist{ inline-size: 14%; }

/* The same class on td cells for text tone; .num (Table.razor.css) handles
   the days column's tabular-nums + end-alignment. */
[b-b29ps4vian] .apps tbody .td-days      { white-space: nowrap; font-variant-numeric: tabular-nums; }
[b-b29ps4vian] .apps tbody .td-specialist{ color: var(--ui-muted); font-size: 12.5px; }

/* Table foot + pager (rendered inside the flush Card, reach via ::deep). */
[b-b29ps4vian] .table-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: var(--ui-surface-page);
    border-block-start: 1px solid var(--ui-line);
    flex-wrap: wrap;
    gap: 10px;
}

[b-b29ps4vian] .pager {
    display: flex;
    gap: 4px;
}

[b-b29ps4vian] .pager-btn {
    background: var(--ui-surface, var(--ui-surface));
    border: 1px solid var(--ui-line);
    border-radius: 6px;
    padding: 4px 10px;
    font: inherit;
    font-size: 12px;
    color: var(--ui-ink-2);
    cursor: pointer;
    transition: background 0.1s, color 0.1s;
}

[b-b29ps4vian] .pager-btn:hover:not(:disabled):not(.active) {
    background: var(--ui-surface-sunken);
}

[b-b29ps4vian] .pager-btn:disabled {
    opacity: 0.4;
    cursor: default;
}

[b-b29ps4vian] .pager-btn.active {
    background: var(--ui-accent-fill);
    color: var(--ui-on-accent-fill);
    border-color: var(--ui-accent-fill);
}

.visually-hidden[b-b29ps4vian] {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ── Responsive reflow ───────────────────────────────────────────────────────
   ≤900px — the filter strip wraps (see .apps-toolbar above).
   ≤768px — the page head stacks; the Table component folds rows to compact stacks.
   The stage strip scrolls horizontally inside the shared Tabs component. */

@media (max-width: 768px) {
    /* Page-head: title block and the intake actions stack. */
    .page-head[b-b29ps4vian] {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
}
/* /Components/Pages/Console/AuthorityReports.razor.rz.scp.css */
/* Authority Reports — cross-authority reporting screen.
   Ported from the demo (mockup styles.css t-reports). UI design-system tokens (--ui-*).
   RTL-ready via logical inline properties. */

.page[b-o9864g0ktg] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.page-head[b-o9864g0ktg] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.page-actions[b-o9864g0ktg] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.h1[b-o9864g0ktg] {
    font-size: 24px;
    font-weight: 600;
    color: var(--ui-ink);
    margin: 0;
}

.h2[b-o9864g0ktg] {
    font-size: 15px;
    font-weight: 600;
    color: var(--ui-ink);
    margin: 0;
}

.lede[b-o9864g0ktg] {
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--ui-muted);
}

.muted[b-o9864g0ktg] {
    color: var(--ui-muted);
}

.small[b-o9864g0ktg] {
    font-size: 12px;
}

.grid-2[b-o9864g0ktg] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* The Card head slot lays its title + sub side by side. */
[b-o9864g0ktg] .card-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-block-end: 12px;
}

/* Eligibility-outcome distribution — the demo donut rendered as a labelled segment list. */
.report-dist[b-o9864g0ktg] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.report-dist-row[b-o9864g0ktg] {
    display: grid;
    grid-template-columns: 12px 1fr auto auto;
    align-items: center;
    gap: 10px;
    font-size: 12.5px;
    color: var(--ui-ink-2);
}

.report-dist-swatch[b-o9864g0ktg] {
    inline-size: 12px;
    block-size: 12px;
    border-radius: 3px;
    border: 1px solid var(--ui-line);
    background: var(--swatch, var(--ui-accent));
}

.report-dist-num[b-o9864g0ktg] {
    color: var(--ui-ink);
    justify-self: end;
}

.report-dist-pct[b-o9864g0ktg] {
    justify-self: end;
    min-inline-size: 38px;
    text-align: end;
}

/* UAE strategy-alignment metric grid (demo vision-grid). */
.vision-grid[b-o9864g0ktg] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.vision-cell[b-o9864g0ktg] {
    min-inline-size: 0;
}

.vision-value[b-o9864g0ktg] {
    font-family: var(--font-ui);
    font-size: 22px;
    font-weight: 600;
    color: var(--ui-ink);
    line-height: 1;
    margin-block: 4px;
}

/* Static Year-1 planning note under the pilot snapshot. */
.report-note[b-o9864g0ktg] {
    margin-block-start: 12px;
    line-height: 1.5;
}

/* Responsive: collapse the two-column grids on narrow viewports. */
@media (max-width: 960px) {
    .grid-2[b-o9864g0ktg],
    .vision-grid[b-o9864g0ktg] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Console/Dashboard.razor.rz.scp.css */
/* Officer console Dashboard — the review cockpit.
   Design system: the warm palette (theme.css) — gold accent, one colour per status. Flat 1px borders. 8px grid.
   RTL-ready via logical inline properties. */

.page[b-weu2ettocj] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.page-head[b-weu2ettocj] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.h1[b-weu2ettocj] {
    font-size: 24px;
    font-weight: 600;
    color: var(--ui-ink, var(--ui-ink));
    margin: 0;
}

.h2[b-weu2ettocj] {
    font-size: 15px;
    font-weight: 600;
    color: var(--ui-ink, var(--ui-ink));
    margin: 0;
}

.h3[b-weu2ettocj] {
    font-size: 16px;
    font-weight: 600;
    color: var(--ui-ink, var(--ui-ink));
    margin: 0 0 4px;
}

.lede[b-weu2ettocj] {
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--ui-muted, var(--ui-muted));
}

.muted[b-weu2ettocj] {
    color: var(--ui-muted, var(--ui-muted));
}

.small[b-weu2ettocj] {
    font-size: 12px;
}

/* Workflow KPI strip — auto-fitting so the six triage tiles flow on any width. */
.kpis[b-weu2ettocj] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    align-items: stretch;
}

/* Equal-height tiles: the grid row stretches each wrapper, the wrapper stretches the
   inner Kpi card, and the card is a flex column so the muted foot pins to the bottom —
   so a tile with a two-line foot is the same height as one with none. */
.kpi-tile[b-weu2ettocj] {
    display: flex;
}

.kpi-tile[b-weu2ettocj]  .kpi {
    flex: 1;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    border-radius: 12px;
    box-shadow: var(--ui-shadow-sm);
}

.kpi-tile[b-weu2ettocj]  .kpi-foot {
    margin-block-start: auto;
    padding-block-start: 6px;
}

/* Each tile carries an accent rail by TONE (action / good / alert) and rides the shared
   Card elevation recipe. The rail is the Kpi primitive's own inline-start stripe, retuned
   per tone from here: the old wrapper ::before rail sat UNDER the tile's white surface
   and never showed, while the primitive's built-in stripe lit every tile in the accent —
   tone now carries the only hierarchy, as the code-behind promises. */
.kpi-tile[b-weu2ettocj]  .kpi::before {
    background: transparent;
}

/* tone-action (awaiting confirmation): the gold accent rail. */
.kpi-tile.tone-action[b-weu2ettocj]  .kpi::before {
    background: var(--ui-accent-fill);
}

/* tone-good (eligible): green rail. */
.kpi-tile.tone-good[b-weu2ettocj]  .kpi::before {
    background: var(--ui-good-fill);
}

/* tone-alert: needs-attention — amber rail when non-zero. */
.kpi-tile.tone-alert[b-weu2ettocj]  .kpi::before {
    background: var(--ui-warn-fill);
}

/* ── Secondary "at a glance" analytics band ──────────────────────────────────
   Everything past the review queue is supporting context. The band sits below a
   generous labelled rule and carries a calmer visual weight. */
.analytics[b-weu2ettocj] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-block-start: 16px;
}

/* Labelled divider: a hairline rule with a centred, quiet section label riding it. */
.analytics-divider[b-weu2ettocj] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-block-end: 4px;
}

.analytics-divider[b-weu2ettocj]::before,
.analytics-divider[b-weu2ettocj]::after {
    content: '';
    flex: 1 1 auto;
    block-size: 1px;
    background: var(--ui-line, var(--ui-line));
}

.analytics-divider-label[b-weu2ettocj] {
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--ui-muted, var(--ui-muted));
}

/* Calmer headings inside the band. */
.analytics[b-weu2ettocj]  .card-head .h2 {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ui-muted, var(--ui-muted));
}

/* ── Review queue — the cockpit hero ─────────────────────────────────────── */
/* The queue row itself is now the shared ListRow (Mohap.Web.Ui) — only the age/overdue
   flag markup nested in its Flags slot is dashboard-specific. */
.rq-waited[b-weu2ettocj] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    color: var(--ui-muted, var(--ui-muted));
    white-space: nowrap;
}

.rq-waited-num[b-weu2ettocj] {
    font-weight: 600;
    color: var(--ui-ink-2, var(--ui-ink-2));
}

/* Overdue wait: the age is the one plain-text status signal on the row (not a chip) — it
   reads red so an officer scans the queue for it directly. */
.rq-waited.overdue .rq-waited-num[b-weu2ettocj] {
    color: var(--danger, var(--ui-bad));
}

.rq-overdue-tag[b-weu2ettocj] {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--danger, var(--ui-bad));
}

/* Queue empty state — an invitation, not a dead end. */
.rq-empty[b-weu2ettocj] {
    padding: 40px 24px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

/* "✓" glyph: accent tint background + accent icon (no green). */
.rq-empty-glyph[b-weu2ettocj] {
    inline-size: 44px;
    block-size: 44px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--ui-accent-tint);
    color: var(--ui-accent);
    font-size: 22px;
    font-weight: 700;
}

.rq-empty-title[b-weu2ettocj] {
    font-weight: 600;
    color: var(--ui-ink, var(--ui-ink));
    margin: 4px 0 0;
}

.rq-empty .ui-btn[b-weu2ettocj] {
    margin-block-start: 8px;
}

/* ── Load + error states ─────────────────────────────────────────────────── */
.dash-state[b-weu2ettocj] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 40px;
}

/* Spinner: warm-grey track, gold leading edge. */
.dash-spinner[b-weu2ettocj] {
    inline-size: 18px;
    block-size: 18px;
    border-radius: 50%;
    border: 2px solid var(--ui-line-strong, var(--ui-line-strong));
    border-block-start-color: var(--ui-accent);
    animation: dash-spin-b-weu2ettocj .8s linear infinite;
}

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

.dash-error[b-weu2ettocj] {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

/* Error glyph: flat warm-neutral fill — no red/danger. */
.dash-error-glyph[b-weu2ettocj] {
    inline-size: 36px;
    block-size: 36px;
    flex: 0 0 36px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--ui-line, var(--ui-line));
    color: var(--ui-ink, var(--ui-ink));
    font-weight: 800;
    font-size: 20px;
}

.dash-error-body[b-weu2ettocj] {
    flex: 1 1 240px;
    min-inline-size: 0;
}

.dash-error-body p[b-weu2ettocj] {
    margin: 4px 0 0;
}

/* Two-column section grid. */
.grid-2[b-weu2ettocj] {
    display: grid;
    /* minmax(0, 1fr), not 1fr: a plain 1fr track still respects its item's intrinsic
       min-content size, so a fixed-width child (e.g. the ApexCharts canvas, which bakes
       in a JS-measured pixel width) blows the whole grid — and the page — out past the
       viewport instead of shrinking. minmax(0, ...) removes that floor. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px;
}

/* The ApexCharts canvas measures its container once on mount and never shrinks below
   that on narrower viewports (its width lands as a hardcoded inline px style, not %).
   Contain the overflow within the chart's own card instead of letting it push the page
   wide — same pattern as the RCL Table's .ui-table-scroll wrapper. */
.apex-chart-wrap[b-weu2ettocj] {
    max-inline-size: 100%;
    overflow-x: auto;
    /* ApexCharts draws a pixel taller than its box; a vertical scrollbar would then narrow the box
       and force a horizontal one too. Only a genuinely narrow screen should scroll sideways. */
    overflow-y: hidden;
}

/* ApexCharts draws its grid, labels, legend and tooltip in colours set for a light page; these follow the theme. */
.apex-chart-wrap[b-weu2ettocj]  .apexcharts-gridline,
.apex-chart-wrap[b-weu2ettocj]  .apexcharts-grid-borders line,
.apex-chart-wrap[b-weu2ettocj]  .apexcharts-xaxis line,
.apex-chart-wrap[b-weu2ettocj]  .apexcharts-xaxis-tick {
    stroke: var(--ui-line);
}

.apex-chart-wrap[b-weu2ettocj]  .apexcharts-text,
.apex-chart-wrap[b-weu2ettocj]  .apexcharts-xaxis-label,
.apex-chart-wrap[b-weu2ettocj]  .apexcharts-yaxis-label {
    fill: var(--ui-muted);
}

.apex-chart-wrap[b-weu2ettocj]  .apexcharts-datalabel,
.apex-chart-wrap[b-weu2ettocj]  .apexcharts-datalabel-label,
.apex-chart-wrap[b-weu2ettocj]  .apexcharts-datalabel-value,
.apex-chart-wrap[b-weu2ettocj]  .apexcharts-datalabels text {
    fill: var(--ui-ink-2);
}

/* Bar and legend colours from the chart palette (theme.css), one meaning each: gold is a plain
   quantity, green is met, the warm grey is the total it is met out of. The Color in the markup is
   the light value; these follow the theme. */
.chart-funnel[b-weu2ettocj]  .apexcharts-series[rel="1"] path {
    fill: var(--ui-chart-gold);
}

.chart-criteria[b-weu2ettocj]  .apexcharts-series[rel="1"] path {
    fill: var(--ui-chart-good);
}

.chart-criteria[b-weu2ettocj]  .apexcharts-series[rel="2"] path {
    fill: var(--ui-chart-neutral);
}

.chart-criteria[b-weu2ettocj]  .apexcharts-legend-series[rel="1"] .apexcharts-legend-marker {
    color: var(--ui-chart-good) !important;
}

.chart-criteria[b-weu2ettocj]  .apexcharts-legend-series[rel="1"] .apexcharts-legend-marker path {
    fill: var(--ui-chart-good) !important;
}

.chart-criteria[b-weu2ettocj]  .apexcharts-legend-series[rel="2"] .apexcharts-legend-marker {
    color: var(--ui-chart-neutral) !important;
}

.chart-criteria[b-weu2ettocj]  .apexcharts-legend-series[rel="2"] .apexcharts-legend-marker path {
    fill: var(--ui-chart-neutral) !important;
}

.apex-chart-wrap[b-weu2ettocj]  .apexcharts-legend-text {
    color: var(--ui-ink-2) !important;
}

.apex-chart-wrap[b-weu2ettocj]  .apexcharts-tooltip {
    background: var(--ui-surface) !important;
    border-color: var(--ui-line) !important;
    color: var(--ui-ink);
}

.apex-chart-wrap[b-weu2ettocj]  .apexcharts-tooltip-title {
    background: var(--ui-surface-sunken) !important;
    border-color: var(--ui-line) !important;
}

/* The Card head slot lays its title + sub side by side; wrap so they stack instead of
   crushing into two cramped columns on a narrow card. */
[b-weu2ettocj] .card-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-block-end: 12px;
    flex-wrap: wrap;
}

/* Eligibility funnel — a distinct SVG taper + legend (NOT the horizontal criteria bars).
   Warm-grey ramp from ink through muted, then the gold accent for the final decided band. */
.elig-funnel[b-weu2ettocj] {
    /* Ink → ink-2 → muted → faint → line-strong → the gold accent */
    --funnel-0: var(--ui-ink);
    --funnel-1: var(--ui-ink-2);
    --funnel-2: var(--ui-muted);
    --funnel-3: var(--ui-faint);
    --funnel-4: var(--ui-line-strong);
    --funnel-5: var(--ui-accent);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.elig-funnel-chart[b-weu2ettocj] {
    inline-size: 100%;
    block-size: 132px;
    overflow: visible;
}

.elig-funnel-band[b-weu2ettocj] {
    fill: var(--fill, var(--ui-accent));
    stroke: var(--ui-surface); /* band separators match the card */
    stroke-width: 0.6;
}

.elig-funnel-legend[b-weu2ettocj] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 16px;
}

.elig-funnel-key[b-weu2ettocj] {
    display: grid;
    grid-template-columns: 12px 1fr auto;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--ui-ink-2, var(--ui-ink-2));
}

.elig-funnel-swatch[b-weu2ettocj] {
    inline-size: 12px;
    block-size: 12px;
    border-radius: 3px;
    background: var(--fill, var(--ui-accent-fill));
}

.elig-funnel-num[b-weu2ettocj] {
    color: var(--ui-muted, var(--ui-muted));
    justify-self: end;
}

/* Horizontal funnel / criteria bars. */
.funnel[b-weu2ettocj] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.funnel-row[b-weu2ettocj] {
    display: grid;
    grid-template-columns: 150px 1fr auto;
    align-items: center;
    gap: 12px;
    font-size: 12.5px;
    color: var(--ui-ink-2, var(--ui-ink-2));
}

/* Default bar: flat warm grey. */
.funnel-row .bar[b-weu2ettocj] {
    block-size: 10px;
    border-radius: 999px;
    background: var(--ui-line-strong, var(--ui-line-strong));
    inline-size: var(--w, 0%);
    min-inline-size: 2px;
    transition: inline-size .3s ease;
}

/* Accent bar: the flat gold fill (the ExamEquivalency criterion). */
.funnel-row .bar.accent[b-weu2ettocj] {
    background: var(--ui-accent-fill);
}

.funnel-row .num[b-weu2ettocj] {
    color: var(--ui-muted, var(--ui-muted));
    font-size: 12px;
    justify-self: end;
}

/* Specialty-certificate tier distribution — stacked stat rows on the compact data-grid
   rhythm: tier chip · caption · end-aligned serif numeral, 44px per row, hairline rules. */
.tier-rows[b-weu2ettocj] {
    list-style: none;
    margin: 4px 0 0;
    padding: 0;
}

.tier-row[b-weu2ettocj] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    min-block-size: 44px;
    padding-block: 4px;
    border-block-end: 1px solid var(--ui-line, var(--ui-line));
}

.tier-row:last-child[b-weu2ettocj] {
    border-block-end: 0;
}

.tier-row-caption[b-weu2ettocj] {
    min-inline-size: 0;
}

.tier-row-count[b-weu2ettocj] {
    font-family: var(--font-ui);
    font-size: 20px;
    font-weight: 600;
    color: var(--ui-ink, var(--ui-ink));
    line-height: 1;
    text-align: end;
    font-variant-numeric: tabular-nums;
}

.tier-note[b-weu2ettocj] {
    margin-block-start: 16px;
    line-height: 1.5;
}

/* Empty edge-case placeholder. */
.feed-empty[b-weu2ettocj] {
    list-style: none;
    padding: 8px 4px;
}

/* Edge-case rows carry no timestamp — collapse the feed's fixed 64px time column (the
   long unbroken profession-id previously sat in it and overflowed onto the name) and
   give the id its own eyebrow row above the name instead. */
.edge-feed[b-weu2ettocj]  .feed-item {
    grid-template-columns: 10px minmax(0, 1fr);
}

.edge-feed[b-weu2ettocj]  .feed-time {
    display: none;
}

.edge-eyebrow[b-weu2ettocj] {
    /* Human licensing-title display text (was a mono raw id) — a quiet uppercase label. */
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ui-muted, var(--ui-muted));
    overflow-wrap: anywhere;
    margin-block-end: 2px;
}

.edge-name[b-weu2ettocj] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.edge-trace[b-weu2ettocj] {
    margin-block-start: 4px;
    color: var(--ui-ink-2, var(--ui-ink-2));
    font-size: 12.5px;
}

/* PSV callout icon: flat accent circle (no gradient). */
.callout-icon[b-weu2ettocj] {
    inline-size: 40px;
    block-size: 40px;
    border-radius: 50%;
    background: var(--ui-accent-fill);
    flex: 0 0 auto;
}

/* ── Responsive reflow (Task 7.3) ────────────────────────────────────────────
   Breakpoints (8px rhythm):
     ≤900px  — KPI strip → 2-up; section grids collapse.
     ≤768px  — tier grid + funnel label col stack; page-head wraps.
     ≤560px  — KPI strip → 1-up.
   Desktop (>900px) layout is unchanged. */

@media (max-width: 900px) {
    /* KPI strip: 2 tiles per row at mid-tablet width. */
    .kpis[b-weu2ettocj] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Two-column section grids collapse to single column at ≤768px (md). */
@media (max-width: 768px) {
    .grid-2[b-weu2ettocj] {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Funnel legend: 2-col → 1-col stack. */
    .elig-funnel-legend[b-weu2ettocj] {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Funnel criteria rows: release the fixed 150px label column so it wraps. */
    .funnel-row[b-weu2ettocj] {
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto;
    }

    .funnel-row .bar[b-weu2ettocj] {
        grid-column: 1 / -1;
        grid-row: 2;
    }
}

@media (max-width: 560px) {
    /* KPI strip: 1 tile per row on small phones. */
    .kpis[b-weu2ettocj] {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Honour reduced-motion: drop the spinner rotation + row transitions. */
@media (prefers-reduced-motion: reduce) {
    .dash-spinner[b-weu2ettocj] {
        animation: none;
    }
}

/* Breadcrumb eyebrow above the page H1 (mockup "Operate / Dashboard"). */
.page-crumb[b-weu2ettocj] {
    font-size: 11.5px;
    color: var(--ui-muted);
    margin-block-end: 4px;
}

/* "View all" — now the PanelHeader's Right-slot link. */
.rq-viewall[b-weu2ettocj] {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ui-accent, var(--ui-accent));
    text-decoration: none;
}

.rq-viewall:hover[b-weu2ettocj] {
    text-decoration: underline;
}

/* Profession-table drill-through: the name reads as the table's own text, revealing the
   click affordance (underline + accent) on hover/focus. */
.dash-prof-link[b-weu2ettocj] {
    color: inherit;
    text-decoration: none;
}

.dash-prof-link:hover[b-weu2ettocj],
.dash-prof-link:focus-visible[b-weu2ettocj] {
    text-decoration: underline;
    color: var(--ui-accent, var(--ui-accent));
}
/* /Components/Pages/Console/Detail/Bilingual.razor.rz.scp.css */
/* English over the original: the value as printed sits beneath in small grey text, a right-to-left
   script in its own direction. */
.bi[b-yyr968lydl] {
    display: inline-flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    vertical-align: top;
}

.bi-en[b-yyr968lydl] {
    overflow-wrap: anywhere;
}

.bi-orig[b-yyr968lydl] {
    font-size: 11.5px;
    line-height: 1.35;
    font-weight: 400;
    color: var(--ui-muted);
    overflow-wrap: anywhere;
}
/* /Components/Pages/Console/Detail/ConfirmChecklist.razor.rz.scp.css */
/* Before you confirm — the officer's to-do band under the case header (the "before a decision"
   banner pattern): a tinted band with a strong inline-start edge, amber while items remain, green when
   the case is ready for the officer's decision. Tokens only, so both themes follow. */

.cc[b-0gdqaj4jyg] {
    border: 1px solid var(--ui-warn);
    border-inline-start-width: 4px;
    border-radius: 12px;
    background: var(--ui-warn-tint);
    padding: 12px 18px;
}

.cc.is-ready[b-0gdqaj4jyg] {
    border-color: var(--ui-good);
    background: var(--ui-good-tint);
}

.cc-head[b-0gdqaj4jyg] {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}

.cc-title[b-0gdqaj4jyg] {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--ui-ink);
}

.cc-count[b-0gdqaj4jyg] {
    font-size: 12px;
    font-weight: 600;
    color: var(--ui-ink-2);
}

.cc-ready[b-0gdqaj4jyg] {
    margin: 4px 0 0;
    font-size: 13.5px;
    color: var(--ui-ink);
}

.cc-list[b-0gdqaj4jyg] {
    margin: 8px 0 0;
    padding-inline-start: 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cc-item[b-0gdqaj4jyg] {
    font-size: 13.5px;
    color: var(--ui-ink);
}

.cc-item[b-0gdqaj4jyg]::marker {
    color: var(--ui-muted);
    font-weight: 600;
}

.cc-text[b-0gdqaj4jyg] {
    margin-inline-end: 8px;
}

.cc-go[b-0gdqaj4jyg] {
    appearance: none;
    background: var(--ui-surface);
    border: 1px solid var(--ui-line);
    border-radius: 6px;
    padding: 1px 9px;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    color: var(--ui-accent);
    cursor: pointer;
    white-space: nowrap;
}

.cc-go:hover[b-0gdqaj4jyg] {
    background: var(--ui-accent-tint);
    border-color: var(--ui-accent-line);
}

.cc-go:focus-visible[b-0gdqaj4jyg] {
    outline: none;
    box-shadow: 0 0 0 3px var(--ui-accent-ring);
}
/* /Components/Pages/Console/Detail/ConsistencyAlertStrip.razor.rz.scp.css */
/* Cross-document consistency alert strip (Phase 5) — officer guidance banner.
   Warm palette (theme.css): page-tint bg + hairline border, meaning via label + icon. */

.consistency-strip[b-phf6agfaqv] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
    padding: 16px;
    background: var(--ui-surface-page);
    border: 1px solid var(--ui-line);
    border-radius: 8px;
}

.consistency-strip-head[b-phf6agfaqv] {
    display: flex;
    align-items: baseline;
    gap: 12px;
}

.consistency-strip-title[b-phf6agfaqv] {
    font-weight: 700;
    color: var(--ui-ink);
}

.consistency-strip-sub[b-phf6agfaqv] {
    font-size: 0.82rem;
    color: var(--ui-muted);
}

.consistency-item[b-phf6agfaqv] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 12px;
    background: var(--ui-surface);
    border: 1px solid var(--ui-line);
    border-radius: 6px;
}

/* Phone: stack the value block over its acknowledge action so the Acknowledge button
   gets full width + a 44px tap target instead of clipping off the inline-end. */
@media (max-width: 640px) {
    .consistency-item[b-phf6agfaqv] {
        flex-direction: column;
        align-items: stretch;
    }

    .consistency-item-action[b-phf6agfaqv] {
        align-self: stretch;
    }

    .consistency-ack-btn[b-phf6agfaqv] {
        width: 100%;
        min-block-size: 44px;
    }
}

.consistency-item-main[b-phf6agfaqv] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.consistency-item-head[b-phf6agfaqv] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.consistency-item-field[b-phf6agfaqv] {
    font-weight: 600;
    color: var(--ui-ink);
}

.consistency-item-agree[b-phf6agfaqv] {
    font-size: 0.82rem;
    color: var(--ui-muted);
}

/* The odd one out reads as such: the rest of the list stays quiet. */
.consistency-item-values li.is-outlier .consistency-value-text[b-phf6agfaqv] {
    font-weight: 600;
}

.consistency-item-values li:not(.is-outlier) .consistency-value-text[b-phf6agfaqv] {
    color: var(--ui-ink-2);
}

.consistency-item-values[b-phf6agfaqv] {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.consistency-item-values li[b-phf6agfaqv] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    font-size: 0.88rem;
}

/* A row is one VALUE: who carries it, the value, and whether it differs. */
.consistency-value-line[b-phf6agfaqv] {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
}

/* Under a value several documents share: which documents, and the other ways it is printed. */
.consistency-value-sub[b-phf6agfaqv] {
    font-size: 0.8rem;
    color: var(--ui-muted);
    overflow-wrap: anywhere;
}

/* What to do about a name difference, in a sentence. */
.consistency-item-guidance[b-phf6agfaqv] {
    margin: 0;
    max-width: 80ch;
    font-size: 0.84rem;
    color: var(--ui-ink-2);
}

.consistency-value-doc[b-phf6agfaqv] {
    color: var(--ui-muted);
    font-weight: 600;
}

.consistency-value-eq[b-phf6agfaqv] {
    color: var(--ui-faint);
}

.consistency-value-text[b-phf6agfaqv] {
    color: var(--ui-ink);
}

.consistency-item-action[b-phf6agfaqv] {
    flex: none;
}

.consistency-ack-btn[b-phf6agfaqv] {
    padding: 6px 14px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ui-ink);
    background: var(--ui-surface);
    border: 1px solid var(--ui-line-strong);
    border-radius: 99px;
    cursor: pointer;
}

.consistency-ack-btn:hover:not([disabled])[b-phf6agfaqv] {
    background: var(--ui-surface-page);
}

.consistency-ack-btn[disabled][b-phf6agfaqv] {
    opacity: 0.55;
    cursor: default;
}

/* Clarifying note: some numbers can legitimately differ between document types. */
.consistency-note[b-phf6agfaqv] {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--ui-muted);
}

/* The one line that stands in for the Info rows until the officer asks for them. */
.consistency-notes-toggle[b-phf6agfaqv] {
    align-self: flex-start;
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    font-size: 0.85rem;
    color: var(--ui-attention); /* accent */
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.consistency-notes-toggle:focus-visible[b-phf6agfaqv] {
    outline: 2px solid var(--ui-attention);
    outline-offset: 2px;
    border-radius: 2px;
}
/* /Components/Pages/Console/Detail/DocumentsPane.razor.rz.scp.css */
/*
    Scoped styles for the applicant-detail Documents pane: a review workspace (2026-09-15). One card —
    the document bar, notices, then the scan beside the review panel, each pane scrolling on its own.
    The console's design system carries the look: Tabs, Dropdown, Chip, Button and ConfPill come from
    Mohap.Web.Ui; this file only lays them out. Monochrome (the slate ramp and the single accent), flat
    1px borders, an 8px rhythm, logical properties so the pane mirrors under RTL. ::deep reaches the
    markup the composed components emit.
*/

.docs-layout[b-3ddcufioju] {
    min-inline-size: 0;
}

.docs-detail[b-3ddcufioju] {
    display: flex;
    flex-direction: column;
    min-inline-size: 0;
    background: var(--ui-surface);
    border: 1px solid var(--ui-line);
    border-radius: 10px;
    overflow: clip;
    container-name: document-detail;
    container-type: inline-size;
}

/* ── Document bar ───────────────────────────────────────────────────────────── */
.docs-bar[b-3ddcufioju] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 16px;
    padding-block: 10px;
    padding-inline: 14px;
    border-block-end: 1px solid var(--ui-line);
}

/* Previous, the picker (or the page) and next read as one segmented control. */
.docs-pager[b-3ddcufioju] {
    display: inline-flex;
    align-items: stretch;
    min-inline-size: 0;
    block-size: 34px;
    border: 1px solid var(--ui-line-strong);
    border-radius: 8px;
    background: var(--ui-surface);
}

.docs-pager--compact[b-3ddcufioju] {
    block-size: 30px;
}

.docs-pager-step[b-3ddcufioju] {
    display: inline-grid;
    flex: 0 0 auto;
    place-items: center;
    inline-size: 34px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ui-ink-2);
    cursor: pointer;
    transition: background .12s ease, color .12s ease;
}

.docs-pager--compact .docs-pager-step[b-3ddcufioju] {
    inline-size: 30px;
}

.docs-pager-step:first-child[b-3ddcufioju] {
    border-inline-end: 1px solid var(--ui-line);
    border-start-start-radius: 7px;
    border-end-start-radius: 7px;
}

.docs-pager-step:last-child[b-3ddcufioju] {
    border-inline-start: 1px solid var(--ui-line);
    border-start-end-radius: 7px;
    border-end-end-radius: 7px;
}

.docs-pager-step:hover:not(:disabled)[b-3ddcufioju] {
    background: var(--ui-surface-page);
    color: var(--ui-accent);
}

.docs-pager-step:focus-visible[b-3ddcufioju] {
    outline: 2px solid var(--ui-accent);
    outline-offset: -2px;
}

.docs-pager-step:disabled[b-3ddcufioju] {
    color: var(--ui-line-strong);
    cursor: default;
}

.docs-pager-label[b-3ddcufioju] {
    display: inline-flex;
    align-items: center;
    padding-inline: 12px;
    font-size: 12.5px;
    color: var(--ui-ink-2);
    white-space: nowrap;
}

.docs-page-single[b-3ddcufioju] {
    font-size: 12.5px;
    color: var(--ui-muted);
}

.docs-step-icon[b-3ddcufioju] {
    display: block;
}

[dir="rtl"] .docs-step-icon[b-3ddcufioju] {
    transform: scaleX(-1);
}

.docs-chevron[b-3ddcufioju] {
    flex: 0 0 auto;
    color: var(--ui-muted);
}

/* The picker fills the middle of the segmented control. */
.docs-picker[b-3ddcufioju] {
    display: flex;
    min-inline-size: 0;
}

.docs-picker[b-3ddcufioju]  .ui-dropdown {
    display: flex;
}

.docs-picker[b-3ddcufioju]  .ui-dropdown__trigger,
.docs-more[b-3ddcufioju]  .ui-dropdown__trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding-block: 0;
    padding-inline: 12px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--ui-ink);
    font-size: 13px;
    cursor: pointer;
    list-style: none;
    white-space: nowrap;
}

.docs-picker[b-3ddcufioju]  .ui-dropdown__trigger {
    block-size: 100%;
}

.docs-more[b-3ddcufioju]  .ui-dropdown__trigger {
    block-size: 32px;
    border-radius: 8px;
    color: var(--ui-ink-2);
    font-weight: 500;
}

.docs-picker[b-3ddcufioju]  .ui-dropdown__trigger::-webkit-details-marker,
.docs-more[b-3ddcufioju]  .ui-dropdown__trigger::-webkit-details-marker {
    display: none;
}

.docs-picker[b-3ddcufioju]  .ui-dropdown__trigger:hover,
.docs-more[b-3ddcufioju]  .ui-dropdown__trigger:hover {
    background: var(--ui-surface-page);
}

.docs-picker-title[b-3ddcufioju] {
    font-weight: 600;
}

.docs-picker-meta[b-3ddcufioju] {
    color: var(--ui-muted);
}

.docs-picker[b-3ddcufioju]  .ui-dropdown__panel {
    inline-size: min(440px, calc(100vw - 32px));
    max-block-size: min(60vh, 520px);
    overflow: auto;
    padding: 6px;
}

.docs-picker-summary[b-3ddcufioju] {
    padding-block: 4px 8px;
    padding-inline: 8px;
    font-size: 12px;
    color: var(--ui-muted);
}

.docs-picker-group + .docs-picker-group[b-3ddcufioju] {
    border-block-start: 1px solid var(--ui-line);
    margin-block-start: 4px;
    padding-block-start: 4px;
}

.docs-option[b-3ddcufioju],
.doc-page[b-3ddcufioju] {
    inline-size: 100%;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--ui-ink);
    font: inherit;
    text-align: start;
    cursor: pointer;
}

.docs-option[b-3ddcufioju] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2px 10px;
    padding-block: 7px;
    padding-inline: 10px;
}

.doc-page[b-3ddcufioju] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-block: 6px;
    padding-inline: 24px 10px;
    font-size: 12.5px;
    color: var(--ui-ink-2);
}

.docs-option:hover[b-3ddcufioju],
.doc-page:hover[b-3ddcufioju] {
    background: var(--ui-surface-page);
}

.docs-option:focus-visible[b-3ddcufioju],
.doc-page:focus-visible[b-3ddcufioju] {
    outline: 2px solid var(--ui-accent);
    outline-offset: -2px;
}

/* Selected: the accent tint and inset bar, the console's one selection signal. */
.docs-option.active[b-3ddcufioju],
.doc-page.active[b-3ddcufioju] {
    background: var(--ui-accent-tint);
    box-shadow: inset 3px 0 0 var(--ui-accent);
}

.docs-option-title[b-3ddcufioju] {
    font-size: 13px;
    font-weight: 600;
}

.docs-option-flags[b-3ddcufioju] {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

.docs-option-detail[b-3ddcufioju] {
    grid-column: 1 / -1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    color: var(--ui-muted);
}

.doc-page-range[b-3ddcufioju] {
    min-inline-size: 5.5rem;
    white-space: nowrap;
    color: var(--ui-muted);
}

.docs-unsaved-dot[b-3ddcufioju] {
    display: inline-block;
    flex: 0 0 8px;
    inline-size: 8px;
    block-size: 8px;
    border-radius: 50%;
    background: var(--ui-accent);
}

/* The capture facts: quiet label + value pairs and the chips that need the officer. */
.docs-facts[b-3ddcufioju] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 14px;
    min-inline-size: 0;
    font-size: 12.5px;
    color: var(--ui-ink-2);
}

.docs-fact[b-3ddcufioju] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.docs-fact-label[b-3ddcufioju],
.docs-fact-muted[b-3ddcufioju] {
    color: var(--ui-muted);
    white-space: nowrap;
}

.dm-kind-original[b-3ddcufioju] {
    text-decoration: line-through;
}

.docs-actions[b-3ddcufioju] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 6px;
    margin-inline-start: auto;
}

/* The text-boxes switch: a visually hidden checkbox driving a slate track that turns accent when on. */
.docs-switch[b-3ddcufioju] {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-inline-end: 6px;
    font-size: 13px;
    color: var(--ui-ink-2);
    cursor: pointer;
    user-select: none;
}

.docs-switch input[b-3ddcufioju] {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    opacity: 0;
}

.docs-switch-track[b-3ddcufioju] {
    position: relative;
    flex: 0 0 auto;
    inline-size: 30px;
    block-size: 18px;
    border-radius: 9px;
    background: var(--ui-line-strong);
    transition: background .12s ease;
}

.docs-switch-track[b-3ddcufioju]::after {
    content: '';
    position: absolute;
    inset-block-start: 2px;
    inset-inline-start: 2px;
    inline-size: 14px;
    block-size: 14px;
    border-radius: 50%;
    background: var(--ui-surface);
    box-shadow: 0 1px 2px rgb(42 36 28 / .25);
    transition: transform .12s ease;
}

.docs-switch input:checked + .docs-switch-track[b-3ddcufioju] {
    background: var(--ui-accent-fill);
}

.docs-switch input:checked + .docs-switch-track[b-3ddcufioju]::after {
    transform: translateX(12px);
}

[dir="rtl"] .docs-switch input:checked + .docs-switch-track[b-3ddcufioju]::after {
    transform: translateX(-12px);
}

.docs-switch input:focus-visible + .docs-switch-track[b-3ddcufioju] {
    outline: 2px solid var(--ui-accent);
    outline-offset: 2px;
}

.docs-more[b-3ddcufioju]  .ui-dropdown__panel {
    min-inline-size: 200px;
    padding: 4px;
}

.docs-menu-item[b-3ddcufioju] {
    display: block;
    box-sizing: border-box;
    inline-size: 100%;
    text-decoration: none;
    padding-block: 8px;
    padding-inline: 10px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--ui-ink);
    font: inherit;
    font-size: 13px;
    text-align: start;
    cursor: pointer;
}

.docs-menu-item:hover[b-3ddcufioju] {
    background: var(--ui-surface-page);
}

.docs-menu-item:disabled[b-3ddcufioju] {
    opacity: .5;
    cursor: default;
}

.docs-menu-divider[b-3ddcufioju] {
    block-size: 1px;
    margin-block: 4px;
    background: var(--ui-line);
}

/* ── Notices under the bar ──────────────────────────────────────────────────── */
.docs-notice[b-3ddcufioju] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
    padding-block: 8px;
    padding-inline: 14px;
    border-block-end: 1px solid var(--ui-line);
    background: var(--ui-surface-page);
    font-size: 13px;
    color: var(--ui-ink-2);
}

.docs-notice-label[b-3ddcufioju] {
    font-weight: 600;
    color: var(--ui-ink);
}

.docs-notice--alert[b-3ddcufioju] {
    display: block;
    border-inline-start: 3px solid var(--ui-ink);
}

.docs-notice--alert ul[b-3ddcufioju] {
    margin-block: 4px 0;
    margin-inline: 0;
    padding-inline-start: 1.25rem;
}

.docs-kind-select.ui-select[b-3ddcufioju] {
    inline-size: auto;
    min-inline-size: 220px;
    block-size: 32px;
    padding-block: 0;
    padding-inline: 8px 28px;
    font-size: 13px;
}

.docs-noocr[b-3ddcufioju] {
    padding: 40px 24px;
    text-align: center;
}

/* ── Workspace: the scan beside the review panel, each scrolling on its own ─── */
.docs-grid[b-3ddcufioju] {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(400px, 1fr);
    grid-template-rows: minmax(0, 1fr);
    block-size: clamp(560px, calc(100vh - 140px), 1600px);
}

.docs-canvas[b-3ddcufioju] {
    display: flex;
    flex-direction: column;
    min-block-size: 0;
    overflow: auto;
    background: var(--ui-surface-page);
    border-inline-end: 1px solid var(--ui-line);
}

.scan-toolbar[b-3ddcufioju] {
    position: sticky;
    inset-block-start: 0;
    z-index: 6;
    display: flex;
    align-items: center;
    gap: 8px;
    block-size: 44px;
    padding-block: 0;
    padding-inline: 14px;
    background: var(--ui-surface-page);
    border-block-end: 1px solid var(--ui-line);
}

.scan-wrap[b-3ddcufioju] {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 20px;
}

.docs-review[b-3ddcufioju] {
    display: flex;
    flex-direction: column;
    min-block-size: 0;
    min-inline-size: 0;
    background: var(--ui-surface);
}

/* The tabs row matches the scan toolbar's height, so the two panes' headers line up. */
.docs-review[b-3ddcufioju]  .ui-tabs {
    flex: 0 0 auto;
    block-size: 44px;
    margin: 0;
    padding-inline: 14px;
}

.docs-review[b-3ddcufioju]  .ui-tab {
    block-size: 44px;
}

.docs-tabpanel[b-3ddcufioju] {
    flex: 1 1 auto;
    min-block-size: 0;
    overflow: auto;
    padding-block: 0 12px;
    padding-inline: 16px;
}

.docs-panel-note[b-3ddcufioju] {
    margin: 0;
    padding-block: 16px;
    font-size: 13px;
    color: var(--ui-muted);
}

/* Too narrow for two readable columns: the scan sits above the review panel and both follow the page. */
@container document-detail (max-width: 900px) {
    .docs-grid[b-3ddcufioju] {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        block-size: auto;
    }

    .docs-canvas[b-3ddcufioju] {
        overflow: visible;
        border-inline-end: 0;
        border-block-end: 1px solid var(--ui-line);
    }

    .scan-toolbar[b-3ddcufioju] {
        position: static;
    }

    .docs-tabpanel[b-3ddcufioju] {
        overflow: visible;
    }
}

/* ── Scan and its text boxes ────────────────────────────────────────────────── */
.scan-doc[b-3ddcufioju] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
    inline-size: 100%;
    max-inline-size: 640px;
    padding: 38px 44px;
    background: var(--ui-surface);
    border: 1px solid var(--ui-line);
    border-radius: 8px;
    color: var(--ui-ink);
    line-height: 1.5;
}

.scan-watermark[b-3ddcufioju] {
    position: absolute;
    inset-block-start: 14px;
    inset-inline-end: 18px;
    font-family: var(--font-mono);
    font-size: 9.5px;
    letter-spacing: .18em;
    color: var(--ui-muted);
}

.scan-noboxes[b-3ddcufioju] {
    text-align: center;
}

.scan-line[b-3ddcufioju] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.scan-key[b-3ddcufioju] {
    font-size: 11px;
}

.ocr-box[b-3ddcufioju] {
    position: relative;
    display: inline-block;
    inline-size: fit-content;
    padding: 0 2px;
    border-radius: 2px;
    outline: 1.5px dashed var(--ui-line-strong);
    outline-offset: 2px;
    background: color-mix(in srgb, var(--ui-ink) 6%, transparent);
    cursor: pointer;
}

/* The full-screen viewer's boxes are for reading (the fields sit behind it), so the stage's cursor shows through. */
.docs-viewer .ocr-box[b-3ddcufioju] {
    cursor: inherit;
}

.ocr-box[b-3ddcufioju]::before {
    content: attr(data-label);
    position: absolute;
    inset-block-start: -15px;
    inset-inline-start: -3px;
    padding: 1px 5px;
    border-radius: 3px;
    background: var(--ui-inverse);
    color: var(--ui-on-fill);
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: .04em;
    line-height: 1.2;
    white-space: nowrap;
    opacity: 0;
    transition: opacity .12s ease;
}

.ocr-box:hover[b-3ddcufioju],
.ocr-box:focus-within[b-3ddcufioju] {
    z-index: 5;
    outline-color: var(--ui-accent);
    outline-width: 2px;
    background: color-mix(in srgb, var(--ui-accent) 14%, transparent);
}

.ocr-box:hover[b-3ddcufioju]::before,
.ocr-box:focus-within[b-3ddcufioju]::before {
    background: var(--ui-accent-fill);
    color: var(--ui-on-accent-fill);
    opacity: 1;
}

.scan-image[b-3ddcufioju] {
    position: relative;
    inline-size: 100%;
    max-inline-size: 680px;
    line-height: 0;
    border: 1px solid var(--ui-line);
    border-radius: 8px;
    /* Visible: a box near the edge carries its number tab just outside it. */
    overflow: visible;
    background: var(--ui-document-paper);
}

.scan-image-src[b-3ddcufioju] {
    display: block;
    inline-size: 100%;
    block-size: auto;
    border-radius: 8px;
}

.ocr-overlay[b-3ddcufioju] {
    position: absolute;
    inset: 0;
    line-height: normal;
    overflow: visible;
}

.ocr-overlay.annotations-hidden[b-3ddcufioju] {
    display: none;
}

.ocr-box.is-positioned[b-3ddcufioju] {
    position: absolute;
    display: block;
    inline-size: auto;
    padding: 0;
    outline-style: solid;
    outline-width: 1.5px;
    outline-offset: 0;
    background: color-mix(in srgb, var(--ui-ink) 10%, transparent);
    /* A revealed box stays clear of the sticky scan toolbar, with its number tab in view. */
    scroll-margin-block: 64px 24px;
}

/* At rest a box shows its number above its region; in focus the field's name joins it. */
.ocr-box.is-positioned[b-3ddcufioju]::before {
    content: attr(data-num);
    inset-block-start: -3px;
    inset-inline-start: 0;
    max-inline-size: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    transform: translateY(-100%);
    pointer-events: none;
    opacity: .9;
}

.ocr-box.is-positioned:hover[b-3ddcufioju]::before,
.ocr-box.is-positioned:focus-within[b-3ddcufioju]::before,
.ocr-box.is-positioned.is-focus[b-3ddcufioju]::before {
    content: attr(data-label);
    background: var(--ui-accent-fill);
    color: var(--ui-on-accent-fill);
    opacity: .96;
}

.ocr-box.is-positioned:hover[b-3ddcufioju],
.ocr-box.is-positioned:focus-within[b-3ddcufioju],
.ocr-box.is-positioned.is-focus[b-3ddcufioju] {
    z-index: 5;
    outline-color: var(--ui-accent);
    outline-width: 2px;
    background: color-mix(in srgb, var(--ui-accent) 20%, transparent);
}

/* ── Fields ─────────────────────────────────────────────────────────────────── */
.dp-fields[b-3ddcufioju] {
    display: flex;
    flex-direction: column;
}

.ocr-field[b-3ddcufioju] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    padding-block: 12px;
    border-block-end: 1px solid var(--ui-line);
    scroll-margin-block: 12px;
}

.dp-fields .ocr-field:last-child[b-3ddcufioju] {
    border-block-end: 0;
}

.dp-field-head[b-3ddcufioju] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-block-size: 22px;
}

.dp-num[b-3ddcufioju] {
    display: inline-grid;
    flex: 0 0 auto;
    place-items: center;
    inline-size: 20px;
    block-size: 20px;
    border: 1px solid var(--ui-line-strong);
    border-radius: 50%;
    background: var(--ui-surface-page);
    color: var(--ui-ink-2);
    font-size: 11px;
    font-weight: 600;
}

.ocr-field.is-focus .dp-num[b-3ddcufioju] {
    border-color: var(--ui-accent-fill);
    background: var(--ui-accent-fill);
    color: var(--ui-on-accent-fill);
}

/* The page a field's box is on, when that page is not the one showing. */
.dp-num-page[b-3ddcufioju] {
    font-size: 11.5px;
    color: var(--ui-muted);
    white-space: nowrap;
}

.dp-label[b-3ddcufioju] {
    min-inline-size: 0;
    overflow-wrap: anywhere;
    font-size: 13px;
    font-weight: 600;
    color: var(--ui-ink);
}

.dp-field-flags[b-3ddcufioju] {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 6px 10px;
    margin-inline-start: auto;
}

.dp-field-input[b-3ddcufioju] {
    inline-size: 100%;
}

.ocr-field.is-changed .dp-field-input[b-3ddcufioju],
.ocr-field.is-undo .dp-field-input[b-3ddcufioju] {
    border-color: var(--ui-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-accent) 15%, transparent);
}

.ocr-field.is-blank .dp-field-input[b-3ddcufioju] {
    border-style: dashed;
    border-color: var(--ui-ink);
}

.dp-value-text[b-3ddcufioju] {
    font-size: 13.5px;
    color: var(--ui-ink);
}

.dp-field-printed[b-3ddcufioju],
.dp-value-original[b-3ddcufioju] {
    overflow-wrap: anywhere;
    font-size: 12.5px;
    color: var(--ui-muted);
}

/* What a correction replaced. */
.dp-value-original[b-3ddcufioju] {
    text-decoration: line-through;
}

.dp-link[b-3ddcufioju] {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ui-accent);
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.dp-link:hover[b-3ddcufioju] {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.dp-link:disabled[b-3ddcufioju] {
    opacity: .5;
    cursor: default;
}

/* The one Save at the foot of the review panel. */
.docs-savebar[b-3ddcufioju] {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 10px;
    padding-block: 10px;
    padding-inline: 16px;
    border-block-start: 1px solid var(--ui-line);
    background: var(--ui-surface-page);
}

.docs-savebar.has-changes[b-3ddcufioju] {
    background: var(--ui-accent-tint);
}

.docs-savebar-count[b-3ddcufioju] {
    font-size: 13px;
    color: var(--ui-muted);
}

.docs-savebar.has-changes .docs-savebar-count[b-3ddcufioju] {
    font-weight: 600;
    color: var(--ui-ink);
}

.docs-savebar-reason[b-3ddcufioju] {
    flex: 1 1 180px;
    min-inline-size: 0;
}

.docs-savebar-actions[b-3ddcufioju] {
    display: inline-flex;
    gap: 8px;
    margin-inline-start: auto;
}

.docs-savebar-msg[b-3ddcufioju] {
    flex-basis: 100%;
    margin: 0;
    font-size: 12.5px;
    color: var(--ui-ink);
}

/* ── Text: the page as printed beside its English ───────────────────────────── */
.dp-translation[b-3ddcufioju] {
    padding-block: 12px;
}

.dp-translation-table[b-3ddcufioju] {
    inline-size: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.dp-translation-table th[b-3ddcufioju],
.dp-translation-table td[b-3ddcufioju] {
    padding-block: 8px;
    padding-inline: 10px;
    vertical-align: top;
    text-align: start;
    border-block-end: 1px solid var(--ui-line);
}

.dp-translation-table tbody:last-child tr:last-child td[b-3ddcufioju] {
    border-block-end: 0;
}

.dp-translation-table th + th[b-3ddcufioju],
.dp-translation-table td + td[b-3ddcufioju] {
    border-inline-start: 1px solid var(--ui-line);
}

.dp-translation-table thead th[b-3ddcufioju] {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ui-muted);
}

.dp-translation-page th[b-3ddcufioju] {
    background: var(--ui-surface-page);
    font-size: 12px;
    font-weight: 600;
    color: var(--ui-ink-2);
}

.dp-translation-en[b-3ddcufioju],
.dp-translation-orig[b-3ddcufioju] {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    line-height: 1.5;
}

.dp-translation-en[b-3ddcufioju] {
    font-size: 13px;
    color: var(--ui-ink);
}

.dp-translation-orig[b-3ddcufioju] {
    font-size: 12.5px;
    color: var(--ui-ink-2);
}

@container document-detail (max-width: 520px) {
    .dp-translation-table thead[b-3ddcufioju] {
        display: none;
    }

    .dp-translation-table tr[b-3ddcufioju],
    .dp-translation-table td[b-3ddcufioju],
    .dp-translation-page th[b-3ddcufioju] {
        display: block;
    }

    .dp-translation-table td + td[b-3ddcufioju] {
        border-inline-start: 0;
    }
}

/* ── Full-screen reading surface ────────────────────────────────────────────── */
.docs-viewer[b-3ddcufioju] {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    background: #17140F; /* the reading surface stays dark (warm near-black) in both themes */
    color: var(--ui-on-fill);
}

.docs-viewer-head[b-3ddcufioju] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 16px;
    padding: 10px 16px;
    background: var(--ui-surface);
    color: var(--ui-ink);
    border-block-end: 1px solid var(--ui-line);
}

.docs-viewer-title[b-3ddcufioju] {
    min-inline-size: 0;
}

.docs-viewer-controls[b-3ddcufioju] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px 12px;
}

/* The zoom readout sits between − and + and fits the page when clicked. */
.docs-viewer-zoom[b-3ddcufioju] {
    justify-content: center;
    min-inline-size: 60px;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
}

.docs-viewer-zoom:hover[b-3ddcufioju] {
    background: var(--ui-surface-page);
    color: var(--ui-accent);
}

.docs-viewer-zoom:focus-visible[b-3ddcufioju] {
    outline: 2px solid var(--ui-accent);
    outline-offset: -2px;
}

.docs-viewer-stage[b-3ddcufioju] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-block-size: 0;
    padding: 24px;
    overflow: hidden;
    background: #17140F; /* the reading surface stays dark (warm near-black) in both themes */
    /* The wheel, a drag and a pinch move the page in the viewer, not the page behind it. */
    touch-action: none;
    user-select: none;
}

.docs-viewer-stage.is-zoomed[b-3ddcufioju] {
    cursor: grab;
}

.docs-viewer-stage.is-dragging[b-3ddcufioju] {
    cursor: grabbing;
}

.docs-viewer-image[b-3ddcufioju] {
    /* The rendered image defines the coordinate space: grid puts the raster and overlay in the same track
       so normalised coordinates hold at every aspect ratio. */
    display: grid;
    inline-size: auto;
    max-inline-size: calc(100vw - 48px);
    max-block-size: calc(100vh - 116px);
    transform-origin: center;
    will-change: transform;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .35);
}

/* Buttons and keys glide; the wheel, a drag and a pinch follow the pointer directly. */
.docs-viewer-image.is-animating[b-3ddcufioju] {
    transition: transform .15s ease-out;
}

.docs-viewer-image .scan-image-src[b-3ddcufioju],
.docs-viewer-image .ocr-overlay[b-3ddcufioju] {
    grid-area: 1 / 1;
}

.docs-viewer-image .scan-image-src[b-3ddcufioju] {
    inline-size: auto;
    block-size: auto;
    max-inline-size: calc(100vw - 48px);
    max-block-size: calc(100vh - 116px);
    object-fit: contain;
    -webkit-user-drag: none;
}

.docs-viewer-image .ocr-overlay[b-3ddcufioju] {
    position: relative;
    inset: auto;
    inline-size: 100%;
    block-size: 100%;
}

/* How to drive the viewer, shown when it opens and faded out after a few seconds. */
.docs-viewer-hint[b-3ddcufioju] {
    position: absolute;
    inset-block-end: 16px;
    inset-inline: 0;
    z-index: 1;
    inline-size: fit-content;
    margin-block: 0;
    margin-inline: auto;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgb(23 20 15 / .8); /* fixed: sits on the always-dark reading surface */
    color: #F2EDE4;
    font-size: 12px;
    pointer-events: none;
    animation: docs-viewer-hint-b-3ddcufioju 8s ease forwards;
}

@keyframes docs-viewer-hint-b-3ddcufioju {
    0%,
    80% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .docs-viewer-image.is-animating[b-3ddcufioju] {
        transition: none;
    }
}

/* ── Empty state and the provide-a-document form ────────────────────────────── */
.docs-set--empty[b-3ddcufioju] {
    min-inline-size: 0;
}

.docs-empty[b-3ddcufioju] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 48px 24px;
    text-align: center;
}

.docs-empty-glyph[b-3ddcufioju] {
    font-size: 34px;
    line-height: 1;
    color: var(--ui-muted);
}

.docs-empty-title[b-3ddcufioju] {
    margin: 4px 0 0;
    font-weight: 600;
    color: var(--ui-ink);
}

.docs-empty-sub[b-3ddcufioju] {
    max-inline-size: 360px;
    font-size: 13px;
    color: var(--ui-muted);
}

.docs-add[b-3ddcufioju] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-block: 12px;
    padding-inline: 14px;
    border-block-end: 1px solid var(--ui-line);
    background: var(--ui-surface-page);
}

.docs-add-head[b-3ddcufioju] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.docs-add-title[b-3ddcufioju] {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--ui-ink);
}

.docs-add-sub[b-3ddcufioju] {
    margin: 0;
    max-inline-size: 68ch;
}

.docs-add-controls[b-3ddcufioju] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.docs-add-label[b-3ddcufioju] {
    font-size: 12px;
    font-weight: 500;
    color: var(--ui-ink-2);
}

.docs-add-select.ui-select[b-3ddcufioju] {
    inline-size: auto;
    min-inline-size: 200px;
    block-size: 32px;
    padding-block: 0;
    padding-inline: 8px 28px;
    font-size: 13px;
}

.docs-add-file[b-3ddcufioju] {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    max-inline-size: 100%;
    cursor: pointer;
}

/* InputFile renders its <input> as a child component, so ::deep is required to reach it. */
.docs-add-file[b-3ddcufioju]  .docs-add-file-native {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    opacity: 0;
    cursor: pointer;
}

.docs-add-file-btn[b-3ddcufioju] {
    display: inline-flex;
    align-items: center;
    block-size: 32px;
    padding-inline: 12px;
    border: 1px solid var(--ui-line);
    border-radius: 8px;
    background: var(--ui-surface);
    color: var(--ui-ink);
    font-size: 13px;
    font-weight: 500;
}

.docs-add-file:hover .docs-add-file-btn[b-3ddcufioju] {
    border-color: var(--ui-line-strong);
    background: var(--ui-surface-page);
}

.docs-add-file-name[b-3ddcufioju] {
    max-inline-size: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.docs-add-file.is-disabled[b-3ddcufioju] {
    opacity: .55;
    cursor: default;
}

.docs-add-staged[b-3ddcufioju],
.docs-add-msg[b-3ddcufioju] {
    margin: 0;
}

.docs-add-msg[b-3ddcufioju] {
    font-size: 13px;
    color: var(--ui-ink);
}
/* /Components/Pages/Console/Detail/DocumentSummaryCard.razor.rz.scp.css */
/* Document summary (Overview). The facts-card pattern: uppercase section headings, a fact grid of
   muted labels over values, a tinted observations band. Colours are --ui-* tokens only, so the
   light and dark themes both follow. Logical properties keep it RTL-ready. */

.dsum[b-oll650to28] {
    padding: 20px 22px;
    background: var(--ui-surface);
    border: 1px solid var(--ui-line);
    border-radius: 12px;
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.04);
    display: flex;
    flex-direction: column;
    gap: 18px;
}

@media (max-width: 640px) {
    .dsum[b-oll650to28] {
        padding: 16px;
    }
}

.dsum-head[b-oll650to28] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.dsum-title[b-oll650to28] {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.005em;
    color: var(--ui-ink);
    margin: 0;
}

.dsum-sub[b-oll650to28] {
    margin: 4px 0 0;
}

.muted[b-oll650to28] {
    color: var(--ui-muted);
}

.small[b-oll650to28] {
    font-size: 12px;
}

.strong[b-oll650to28] {
    font-weight: 600;
    color: var(--ui-ink);
}

.tab-num[b-oll650to28] {
    font-variant-numeric: tabular-nums;
}

.sr-only[b-oll650to28] {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ── Observations band ─────────────────────────────────────────────────────── */

.dsum-obs[b-oll650to28] {
    border-radius: 10px;
    border: 1px solid var(--ui-line);
    border-inline-start-width: 4px;
    padding: 12px 16px;
    background: var(--ui-surface-sunken);
}

.dsum-obs.is-alert[b-oll650to28] {
    border-color: var(--ui-bad);
    background: var(--ui-bad-tint);
}

.dsum-obs.is-note[b-oll650to28] {
    border-color: var(--ui-warn);
    background: var(--ui-warn-tint);
}

.dsum-obs.is-clear[b-oll650to28] {
    border-color: var(--ui-good);
    background: var(--ui-good-tint);
}

.dsum-obs-title[b-oll650to28] {
    margin: 0 0 6px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ui-ink-2);
}

.dsum-obs-none[b-oll650to28] {
    margin: 0;
    color: var(--ui-ink);
}

.dsum-obs-list[b-oll650to28] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.dsum-obs-item[b-oll650to28] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 10px;
    color: var(--ui-ink);
    font-size: 13.5px;
}

.dsum-obs-mark[b-oll650to28] {
    inline-size: 8px;
    block-size: 8px;
    border-radius: 50%;
    background: var(--ui-warn);
    transform: translateY(-1px);
}

.dsum-obs-item.is-alert .dsum-obs-mark[b-oll650to28] {
    background: var(--ui-bad);
}

/* ── Sections ──────────────────────────────────────────────────────────────── */

.dsum-section[b-oll650to28] {
    border-block-start: 1px solid var(--ui-line-soft);
    padding-block-start: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dsum-section-title[b-oll650to28] {
    margin: 0;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--ui-muted);
}

.dsum-empty[b-oll650to28] {
    margin: 0;
    color: var(--ui-muted);
    font-size: 13px;
}

.dsum-item[b-oll650to28] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 12px;
}

.dsum-item + .dsum-item[b-oll650to28] {
    border-block-start: 1px dashed var(--ui-line-soft);
    padding-block-start: 10px;
}

.dsum-facts[b-oll650to28] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 10px 20px;
    margin: 0;
}

.dsum-fact[b-oll650to28] {
    min-inline-size: 0;
}

.dsum-fact dt[b-oll650to28] {
    font-size: 12px;
    color: var(--ui-muted);
    margin-block-end: 2px;
}

.dsum-fact dd[b-oll650to28] {
    margin: 0;
    font-weight: 500;
    color: var(--ui-ink);
    overflow-wrap: anywhere;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.dsum-missing[b-oll650to28] {
    color: var(--ui-faint);
    font-weight: 400;
    font-style: italic;
}

.dsum-sub-line[b-oll650to28] {
    display: block;
    inline-size: 100%;
    font-size: 12px;
    font-weight: 400;
    color: var(--ui-muted);
}

.dsum-open[b-oll650to28] {
    appearance: none;
    background: transparent;
    border: 1px solid var(--ui-line);
    border-radius: 6px;
    padding: 3px 10px;
    font: inherit;
    font-size: 12px;
    font-weight: 500;
    color: var(--ui-accent);
    cursor: pointer;
    white-space: nowrap;
}

.dsum-open:hover[b-oll650to28] {
    background: var(--ui-accent-tint);
    border-color: var(--ui-accent-line);
}

.dsum-open:focus-visible[b-oll650to28] {
    outline: none;
    box-shadow: 0 0 0 3px var(--ui-accent-ring);
}

/* ── Experience ────────────────────────────────────────────────────────────── */

.dsum-table-wrap[b-oll650to28] {
    overflow-x: auto;
}

.dsum-table[b-oll650to28] {
    inline-size: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}

.dsum-table th[b-oll650to28] {
    text-align: start;
    font-size: 12px;
    font-weight: 600;
    color: var(--ui-muted);
    padding: 6px 10px;
    background: var(--ui-surface-page);
    border-block-end: 1px solid var(--ui-line);
}

.dsum-table td[b-oll650to28] {
    padding: 8px 10px;
    border-block-end: 1px solid var(--ui-line-soft);
    color: var(--ui-ink);
    vertical-align: top;
}

.dsum-table .num[b-oll650to28] {
    text-align: end;
    white-space: nowrap;
}

.dsum-table .act[b-oll650to28] {
    text-align: end;
    inline-size: 1%;
}

.dsum-total[b-oll650to28] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 12px;
}

.dsum-total-label[b-oll650to28] {
    font-size: 12px;
    color: var(--ui-muted);
}

.dsum-total-value[b-oll650to28] {
    font-size: 15px;
    font-weight: 600;
    color: var(--ui-ink);
}

.dsum-gaps[b-oll650to28] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dsum-gaps-label[b-oll650to28] {
    font-size: 12px;
    color: var(--ui-muted);
}

.dsum-gap-list[b-oll650to28] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dsum-gap[b-oll650to28] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    font-size: 13px;
    color: var(--ui-ink-2);
}

.dsum-gap.is-alert[b-oll650to28] {
    color: var(--ui-bad);
}

/* ── Exemption ─────────────────────────────────────────────────────────────── */

.dsum-exemption[b-oll650to28] {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 8px;
}

.dsum-exemption-name[b-oll650to28] {
    font-size: 15px;
    font-weight: 600;
    color: var(--ui-ink);
}

.dsum-footer[b-oll650to28] {
    margin: 0;
    border-block-start: 1px solid var(--ui-line-soft);
    padding-block-start: 12px;
}
/* /Components/Pages/Console/Detail/HistoryPane.razor.rz.scp.css */
/*
    Scoped styles for the History pane. The Card / Feed primitives carry their own
    visuals (ported from the demo); this only owns the pane-level rhythm so the audit
    feed breathes inside the card body. RTL-ready: logical properties only, QB CLEAR
    var(--*) tokens.
*/

.history-pane[b-dfrtlikr0e] {
    display: block;
}

/* Give the feed a little headroom below the card header divider. */
.history-pane[b-dfrtlikr0e]  .feed {
    margin-block-start: var(--space-2, 8px);
}
/* /Components/Pages/Console/Detail/NeedsAttentionCard.razor.rz.scp.css */
/* "Needs attention" card — the case record's compact gap highlighting. Mirrors the
   short-form chips' colour language (red blocker / grey recommended) so the two intake
   surfaces read as one system. */

/* A real card (the Overview's card styles are scoped to that component and never reached this
   one, which is why the title used to sit flush against the stripe): flat 1px border, the <Card>
   component's 20px/22px padding and 10px radius like its neighbours, and the danger stripe drawn
   INSIDE the rounded frame with the content set 4px further in to clear it. */
.na-card[b-bk4cwy1fo6] {
    position: relative;
    padding: 20px 22px 20px 26px;
    background: var(--ui-surface, var(--ui-surface));
    border: 1px solid var(--ui-line, var(--ui-line));
    border-radius: 10px;
    overflow: hidden;
}

@media (max-width: 640px) {
    .na-card[b-bk4cwy1fo6] {
        padding: 16px 16px 16px 20px;
    }
}

.na-card[b-bk4cwy1fo6]::before {
    content: '';
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    inline-size: 4px;
    background: var(--danger, var(--ui-bad-fill));
}

.na-card .card-head[b-bk4cwy1fo6] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px 12px;
    margin-block-end: 12px;
}

.na-card .h2[b-bk4cwy1fo6] {
    font-family: var(--font-ui);
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.005em;
    color: var(--ui-ink, var(--ui-ink));
    margin: 0;
}

.na-card .muted[b-bk4cwy1fo6] {
    color: var(--ui-muted, var(--ui-muted));
}

.na-card .small[b-bk4cwy1fo6] {
    font-size: 12px;
}

.na-foot[b-bk4cwy1fo6] {
    margin: .8rem 0 0;
}

.na-rows[b-bk4cwy1fo6] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .4rem;
}

.na-row[b-bk4cwy1fo6] {
    display: grid;
    /* minmax(0, …) lets a long label + its tag wrap inside its column instead of running under
       the value ("Country of primary licensure BLOCKS EVALUATION" used to overlap the text). */
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 2fr) auto;
    align-items: center;
    gap: .75rem;
    border: 1px solid var(--border, var(--ui-line));
    border-radius: 8px;
    padding: .45rem .8rem;
    font-size: .9rem;
}

.na-row[data-blocker="True"][b-bk4cwy1fo6] {
    border-color: color-mix(in srgb, var(--danger, var(--ui-bad)) 45%, transparent);
    background: color-mix(in srgb, var(--danger, var(--ui-bad-fill)) 4%, transparent);
}

.na-row[data-status="suggested"][b-bk4cwy1fo6] {
    border-color: color-mix(in srgb, var(--accent, var(--ui-attention)) 45%, transparent);
    background: transparent;
}

.na-row__label[b-bk4cwy1fo6] {
    font-weight: 500;
    /* The label and its BLOCKS / RECOMMENDED tag share the column; the tag never breaks
       mid-word and drops under the label only when the column is genuinely too narrow. */
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .3rem .45rem;
    min-width: 0;
}

.na-row__blocker[b-bk4cwy1fo6],
.na-row__recommended[b-bk4cwy1fo6] {
    flex-shrink: 0;
    white-space: nowrap;
    font-size: .7rem;
    font-weight: 600;
    border-radius: 999px;
    padding: .1rem .5rem;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.na-row__blocker[b-bk4cwy1fo6] {
    color: var(--danger, var(--ui-bad));
    background: color-mix(in srgb, var(--danger, var(--ui-bad-fill)) 10%, transparent);
}

.na-row__recommended[b-bk4cwy1fo6] {
    color: var(--text-muted, var(--ui-muted));
    background: var(--surface-2, var(--ui-surface-sunken));
    border: 1px solid var(--border, var(--ui-line));
}

.na-row__value[b-bk4cwy1fo6] {
    color: var(--text-muted, var(--ui-muted));
}

.na-row[data-status="suggested"] .na-row__value[b-bk4cwy1fo6] {
    color: var(--text, var(--ui-ink));
    min-width: 0;
    overflow-wrap: anywhere;
}

.na-row__hint[b-bk4cwy1fo6] {
    display: block;
    margin-block-start: .15rem;
}

.na-route[b-bk4cwy1fo6] {
    margin-block-start: .8rem;
}

.na-route .intake-row[b-bk4cwy1fo6] {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 1rem;
    align-items: end;
}

.intake-error[b-bk4cwy1fo6] {
    color: var(--danger, var(--ui-bad));
    background: color-mix(in srgb, var(--danger, var(--ui-bad-fill)) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--danger, var(--ui-bad)) 30%, transparent);
    border-radius: 8px;
    padding: .6rem .9rem;
    margin-block-end: .6rem;
}

@media (max-width: 720px) {
    /* One column on a phone: label (with its tag), then the text, then any action — two columns
       left the long text squeezing the label to nothing and the two overprinting each other. */
    .na-row[b-bk4cwy1fo6] {
        grid-template-columns: minmax(0, 1fr);
        gap: .3rem;
        padding: .6rem .8rem;
    }

    .na-row__value[b-bk4cwy1fo6] {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .na-route .intake-row[b-bk4cwy1fo6] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Console/Detail/OutcomePane.razor.rz.scp.css */
/* Outcome-decision LETTER pane (Phase 2, re-skinned Task 5.7) — scoped layout for the
   full-size, A4-proportioned formal credentialing-decision letter. The pane renders ONE
   or TWO complete documents (English LTR and/or Arabic true-RTL); "Both" stacks the two
   full documents with a clean divider for a single bilingual PDF — never side-by-side.

   Design: warm neutrals + the gold accent. The on-screen letter mirrors the PDF, so its verdicts
   stay signalled by icon + label + weight + a neutral tint — not by green/amber/red. The formal
   document feel is preserved through typography (--font-doc), letter/paper structure (white
   surface on the warm page), and a single accent hairline on the inline-start edge.

   NOTE: the @media print A4 treatment + the global verdict-band selectors live in the GLOBAL
   wwwroot/css/outcome-print.css (they must reach console chrome outside this component's scope). */

.outcome-pane[b-1vzyixmtbx] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ── Toolbar: caption + segmented control + actions ──────────────────────────── */
.report-controls[b-1vzyixmtbx] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
}

.oc-toolbar[b-1vzyixmtbx] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.oc-segmented[b-1vzyixmtbx] {
    display: inline-flex;
    padding: 3px;
    background: var(--ui-surface-page);
    border: 1px solid var(--ui-line);
    border-radius: 999px;
}

.oc-seg[b-1vzyixmtbx] {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--ui-muted);
    padding: 6px 16px;
    border-radius: 999px;
    cursor: pointer;
    font: inherit;
    font-weight: 500;
    line-height: 1.2;
    transition: background-color .12s ease, color .12s ease, box-shadow .12s ease;
}

.oc-seg:hover[b-1vzyixmtbx] {
    color: var(--ui-ink);
}

.oc-seg.is-active[b-1vzyixmtbx] {
    background: var(--ui-surface);
    color: var(--ui-ink);
    box-shadow: var(--ui-shadow-sm);
}

.oc-send-blocked[b-1vzyixmtbx] {
    color: var(--danger, var(--ui-bad));
    background: color-mix(in srgb, var(--danger, var(--ui-bad-fill)) 7%, transparent);
    border: 1px solid color-mix(in srgb, var(--danger, var(--ui-bad)) 30%, transparent);
    border-radius: 8px;
    padding: .5rem .8rem;
    font-size: .85rem;
    margin: .5rem 0 0;
}

.oc-actions-bar[b-1vzyixmtbx] {
    display: inline-flex;
    gap: 8px;
}

/* ── The stage: the centred document column ──────────────────────────────────── */
.oc-stage[b-1vzyixmtbx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    padding: 20px;
    background: var(--ui-surface-page);
    border-radius: 8px;
    border: 1px solid var(--ui-line);
}

/* A clean ruled divider between the two stacked documents in "Both" mode. */
.oc-divider[b-1vzyixmtbx] {
    width: min(100%, 820px);
    border-top: 1px dashed var(--ui-line-strong);
}

/* ── One full-size letter document (A4-proportioned stationery) ──────────────── */
.oc-letter[b-1vzyixmtbx] {
    /* A4 at ~96dpi is 794px wide; cap there and let it shrink on narrow viewports. */
    width: 100%;
    max-width: 794px;
    min-height: 1040px;          /* ~A4 height so a short letter still reads as a full page */
    box-sizing: border-box;
    padding: clamp(28px, 6%, 56px);
    display: flex;
    flex-direction: column;
    background: var(--ui-surface);
    color: var(--ui-ink);
    font-family: var(--font-doc);
    font-size: 15px;
    line-height: 1.6;
    border: 1px solid var(--ui-line);
    border-radius: 4px;
    /* A single accent hairline at the inline-start edge = the "official document" cue. */
    border-inline-start: 3px solid var(--ui-accent);
}

/* ── Letterhead: crest · ministry identity · reference block ─────────────────── */
.oc-letterhead[b-1vzyixmtbx] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 16px;
    padding-block-end: 16px;
    border-block-end: 2px solid var(--ui-ink);
}

.oc-crest[b-1vzyixmtbx] {
    width: 56px;
    height: 56px;
}

.oc-crest svg[b-1vzyixmtbx] {
    width: 100%;
    height: 100%;
}

.oc-org[b-1vzyixmtbx] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.oc-ministry[b-1vzyixmtbx] {
    margin: 0;
    font-weight: 700;
    font-size: 1.12em;
    color: var(--ui-ink);
    line-height: 1.25;
}

.oc-dept[b-1vzyixmtbx],
.oc-country[b-1vzyixmtbx] {
    margin: 0;
    font-size: .8em;
    color: var(--ui-muted);
    line-height: 1.3;
}

.oc-refs[b-1vzyixmtbx] {
    display: grid;
    grid-template-columns: max-content;
    gap: 1px 0;
    margin: 0;
    text-align: end;
}

.oc-refs dt[b-1vzyixmtbx] {
    font-size: .66em;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ui-muted);
    font-family: var(--font-ui);
}

.oc-refs dd[b-1vzyixmtbx] {
    margin: 0 0 8px;
    font-size: .9em;
    font-weight: 600;
    color: var(--ui-ink);
}

.oc-refs dd:last-child[b-1vzyixmtbx] {
    margin-block-end: 0;
}

/* ── Title row + decision chip ───────────────────────────────────────────────── */
.oc-titlerow[b-1vzyixmtbx] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding-block-start: 24px;
}

.oc-doc-title[b-1vzyixmtbx] {
    margin: 0;
    font-size: 1.5em;
    font-weight: 600;
    color: var(--ui-ink);
    letter-spacing: -0.005em;
}

/* Decision chip: monochrome slate tints only — NO green/amber/red.
   Each band uses a different slate depth + weight + icon-character in the markup
   to distinguish verdict states without hue. */
.oc-decision-chip[b-1vzyixmtbx] {
    display: inline-block;
    padding: 5px 14px;
    border-radius: 999px;
    font-family: var(--font-ui);
    font-size: .72em;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    /* Default / pending: lightest slate tint */
    background: var(--ui-surface-sunken);
    color: var(--ui-ink-3);
    border: 1px solid var(--ui-line);
}

/* oc-band-ok — Eligible: accent tint, accent text (single blue accent is permitted) */
.oc-decision-chip.oc-band-ok[b-1vzyixmtbx] {
    background: var(--ui-accent-tint);
    color: var(--ui-accent);
    border-color: var(--ui-accent-line);
}

/* oc-band-warn — Conditional: mid slate tint, strong ink */
.oc-decision-chip.oc-band-warn[b-1vzyixmtbx] {
    background: var(--ui-surface-sunken);
    color: var(--ui-ink-2);
    border-color: var(--ui-line-strong);
}

/* oc-band-danger — Not eligible: strong slate, near-black text */
.oc-decision-chip.oc-band-danger[b-1vzyixmtbx] {
    background: var(--ui-line);
    color: var(--ui-ink);
    border-color: var(--ui-faint);
}

/* ── Recipient block ─────────────────────────────────────────────────────────── */
.oc-recipient[b-1vzyixmtbx] {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 4px 20px;
    margin: 20px 0 0;
    padding: 16px;
    background: var(--ui-surface-page);
    border: 1px solid var(--ui-line);
    border-radius: 4px;
}

.oc-recipient dt[b-1vzyixmtbx] {
    font-family: var(--font-ui);
    font-size: .76em;
    color: var(--ui-muted);
    align-self: center;
}

.oc-recipient dd[b-1vzyixmtbx] {
    margin: 0;
    font-weight: 600;
    color: var(--ui-ink);
}

/* ── Salutation + decision prose ─────────────────────────────────────────────── */
.oc-salutation[b-1vzyixmtbx] {
    margin: 24px 0 0;
    color: var(--ui-ink-2);
}

.oc-headline[b-1vzyixmtbx] {
    margin: 12px 0 0;
    font-size: 1.18em;
    font-weight: 600;
    color: var(--ui-ink);
    line-height: 1.45;
}

.oc-statement[b-1vzyixmtbx] {
    margin: 12px 0 0;
    color: var(--ui-ink-2);
}

/* ── Sections (verification record / qualification / conditions / appeal) ────── */
.oc-section[b-1vzyixmtbx] {
    margin-block-start: 24px;
}

.oc-section-head[b-1vzyixmtbx] {
    margin: 0 0 12px;
    padding-block-end: 8px;
    border-block-end: 1px solid var(--ui-line);
    font-family: var(--font-ui);
    font-size: .82em;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ui-muted);
}

/* Verification facts — criterion name + a clean status word (NEVER raw evidence). */
.oc-facts[b-1vzyixmtbx] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.oc-fact[b-1vzyixmtbx] {
    display: grid;
    grid-template-columns: 20px 1fr auto;
    align-items: baseline;
    gap: 12px;
}

.oc-mark[b-1vzyixmtbx] {
    font-weight: 700;
    text-align: center;
    font-family: var(--font-ui);
}

/* Monochrome status: met = accent, failed = strong slate, pending = muted */
.oc-fact.is-met .oc-mark[b-1vzyixmtbx],
.oc-fact.is-met .oc-fact-status[b-1vzyixmtbx] {
    color: var(--ui-accent);
}

.oc-fact.is-failed .oc-mark[b-1vzyixmtbx],
.oc-fact.is-failed .oc-fact-status[b-1vzyixmtbx] {
    color: var(--ui-ink);
    font-weight: 700;
}

.oc-fact.is-pending .oc-mark[b-1vzyixmtbx],
.oc-fact.is-pending .oc-fact-status[b-1vzyixmtbx] {
    color: var(--ui-muted);
}

.oc-fact-name[b-1vzyixmtbx] {
    color: var(--ui-ink);
}

.oc-fact-status[b-1vzyixmtbx] {
    font-family: var(--font-ui);
    font-size: .82em;
    font-weight: 600;
    letter-spacing: .01em;
}

/* Confirmed-qualification block. */
.oc-qual[b-1vzyixmtbx] {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 8px 20px;
    margin: 0;
}

.oc-qual dt[b-1vzyixmtbx] {
    font-family: var(--font-ui);
    font-size: .78em;
    color: var(--ui-muted);
}

.oc-qual dd[b-1vzyixmtbx] {
    margin: 0;
    font-weight: 600;
    color: var(--ui-ink);
}

/* Outstanding conditions. */
.oc-conditions[b-1vzyixmtbx] {
    margin: 0;
    padding-inline-start: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: var(--ui-ink-2);
}

.oc-conditions li[b-1vzyixmtbx] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.oc-cond-deadline[b-1vzyixmtbx] {
    font-family: var(--font-ui);
}

.oc-appeal[b-1vzyixmtbx] {
    margin: 0;
    color: var(--ui-ink-2);
}

/* ── Signatory + official seal block (pinned to the page foot) ───────────────── */
.oc-sign[b-1vzyixmtbx] {
    margin-block-start: auto;
    padding-block-start: 24px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
}

.oc-sign-by[b-1vzyixmtbx] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.oc-sign-for[b-1vzyixmtbx] {
    margin: 0;
    color: var(--ui-ink-2);
    font-size: .92em;
}

.oc-sign-line[b-1vzyixmtbx] {
    margin-block-start: 24px;
    width: 200px;
    max-width: 100%;
    border-block-end: 1px solid var(--ui-line-strong);
}

.oc-sign-role[b-1vzyixmtbx] {
    margin: 0;
    font-family: var(--font-ui);
    font-size: .78em;
    color: var(--ui-muted);
}

.oc-seal[b-1vzyixmtbx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex: none;
}

.oc-seal svg[b-1vzyixmtbx] {
    width: 84px;
    height: 84px;
    opacity: .5;
}

.oc-seal-label[b-1vzyixmtbx] {
    font-family: var(--font-ui);
    font-size: .64em;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ui-muted);
}

/* ── Responsive: tighten the stage + letterhead on narrow viewports ──────────── */
@media (max-width: 720px) {
    .oc-stage[b-1vzyixmtbx] {
        padding: 12px;
    }

    .oc-letter[b-1vzyixmtbx] {
        min-height: 0;
        padding: 20px;
    }

    .oc-letterhead[b-1vzyixmtbx] {
        grid-template-columns: auto 1fr;
        row-gap: 12px;
    }

    .oc-refs[b-1vzyixmtbx] {
        grid-column: 1 / -1;
        justify-items: start;
        text-align: start;
    }

    .oc-sign[b-1vzyixmtbx] {
        flex-direction: column;
        align-items: stretch;
        gap: 20px;
    }

    .oc-seal[b-1vzyixmtbx] {
        align-items: flex-start;
    }
}
/* /Components/Pages/Console/Detail/OverviewPane.razor.rz.scp.css */
/* Applicant-detail Overview pane.
   Warm palette (theme.css): warm greys + the gold accent.
   Shadows removed → flat 1px --ui-line border (identical to <Card> default).
   ovr-card-highlight: accent-tint (gold tint) flat fill, not a gradient.
   var(--muted)/var(--line)/var(--ink)/var(--radius)/var(--shadow) replaced with
   --ui-* tokens throughout. 8px grid. RTL-ready via logical inline props.

   Card-swap decision: the ovr-card sections keep their raw <section class="card ovr-card">
   markup rather than being wrapped in the <Card> component. The two-column custom grids
   (ovr-grid-6040 / ovr-grid-5050) and the extra ovr-card padding class sit outside what
   the Card component's AdditionalAttributes can cleanly absorb without forking or a
   wrapper div — keeping raw markup avoids the awkward dual-class problem while rendering
   identically to <Card> (flat 1px border, no shadow, same border-radius). */

.ovr-stack[b-nhlft1qx7u] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Base overview card: flat 1px slate border, the <Card> component's 20px/22px padding and 10px
   radius, so the header card above, these sections and the Needs-attention card share one edge. */
.ovr-card[b-nhlft1qx7u] {
    padding: 20px 22px;
    background: var(--ui-surface, var(--ui-surface));
    border: 1px solid var(--ui-line);
    border-radius: 10px;
}

@media (max-width: 640px) {
    .ovr-card[b-nhlft1qx7u] {
        padding: 16px;
    }
}

/* Highlight card: accent-tint flat fill — no gradient, no shadow. */
.ovr-card-highlight[b-nhlft1qx7u] {
    background: var(--ui-accent-tint);
}

.ovr-card .h2[b-nhlft1qx7u] {
    font-family: var(--font-ui);
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.005em;
    color: var(--ui-ink);
    margin: 0;
}

.muted[b-nhlft1qx7u] {
    color: var(--ui-muted);
}

.small[b-nhlft1qx7u] {
    font-size: 12px;
}

.strong[b-nhlft1qx7u] {
    font-weight: 600;
    color: var(--ui-ink);
}

/* Tabular numerics for numeric/identity cells. */
.tab-num[b-nhlft1qx7u] {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

.mono[b-nhlft1qx7u] {
    font-family: var(--font-mono);
}

/* The card head lays its title + sub side by side. */
.card-head[b-nhlft1qx7u] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-block-end: 12px;
}

.ovr-card-head-actions[b-nhlft1qx7u] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.ovr-amend[b-nhlft1qx7u] {
    padding: 16px;
    margin-block-end: 16px;
    border: 1px solid var(--ui-line);
    border-radius: 8px;
    background: var(--ui-bg-subtle, var(--ui-surface-page));
}

.ovr-amend > p[b-nhlft1qx7u] {
    margin: 0 0 12px;
}

.ovr-amend-grid[b-nhlft1qx7u] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.ovr-amend-grid label[b-nhlft1qx7u],
.ovr-amend-reason[b-nhlft1qx7u] {
    display: grid;
    gap: 6px;
    color: var(--ui-muted);
    font-size: 12px;
    font-weight: 600;
}

.ovr-amend-reason[b-nhlft1qx7u] {
    margin-block-start: 12px;
}

.ovr-amend-reason textarea[b-nhlft1qx7u] {
    resize: vertical;
    min-block-size: 72px;
}

.ovr-amend-actions[b-nhlft1qx7u] {
    display: flex;
    gap: 8px;
    margin-block-start: 12px;
}

.ovr-employer-actions[b-nhlft1qx7u] {
    align-items: center;
}

.ovr-employer-actions .ui-btn--danger[b-nhlft1qx7u] {
    margin-inline-start: auto;
}

.ovr-empty[b-nhlft1qx7u] {
    padding: 20px;
    border: 1px dashed var(--ui-line);
    border-radius: 8px;
    background: var(--ui-bg-subtle, var(--ui-surface-page));
}

.ovr-empty p[b-nhlft1qx7u] {
    margin: 0;
}

.ovr-empty p + p[b-nhlft1qx7u] {
    margin-block-start: 6px;
}

/* The workflow Panel sits in the 60% column; it must be free to shrink below its rows'
   intrinsic content width instead of forcing the grid wider. */
[b-nhlft1qx7u] .ovr-workflow {
    min-inline-size: 0;
}

/* Balanced two-column grids. */
.ovr-grid[b-nhlft1qx7u] {
    display: grid;
    gap: 16px;
}

.ovr-grid-6040[b-nhlft1qx7u] {
    grid-template-columns: 1.5fr 1fr;
}

.ovr-grid-5050[b-nhlft1qx7u] {
    grid-template-columns: 1fr 1fr;
}

/* Definition lists in overview cards. */
.ovr-dl[b-nhlft1qx7u] {
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: 18px;
    row-gap: 8px;
    margin: 0;
}

/* Phone: stack the value under its label so long emails / passport ids / the
   AI-suggested+Adopt cluster get the full content width instead of being crushed into
   a ~120px sliver and clipped by the shell's overflow-x:hidden. */
@media (max-width: 640px) {
    .ovr-dl[b-nhlft1qx7u] {
        grid-template-columns: 1fr;
        row-gap: 2px;
    }

    .ovr-dl dt[b-nhlft1qx7u] {
        padding-block-start: 10px;
    }

    .ovr-amend-grid[b-nhlft1qx7u] {
        grid-template-columns: 1fr;
    }
}

.ovr-dl dt[b-nhlft1qx7u] {
    color: var(--ui-muted);
    font-weight: 500;
    font-size: 12.5px;
    align-self: start;
    padding-block-start: 2px;
}

.ovr-dl dd[b-nhlft1qx7u] {
    margin: 0;
    color: var(--ui-ink);
    font-size: 14px;
    line-height: 1.5;
    min-inline-size: 0;
    /* Break long values (email, mono passport/registration numbers) only when they would
       overflow, so a value that fits stays intact and one that does not wraps cleanly. */
    overflow-wrap: break-word;
}

/* The assigned specialist row: avatar beside the name and work status. */
.ovr-person[b-nhlft1qx7u] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-block-end: 12px;
}

.ovr-actions[b-nhlft1qx7u] {
    display: flex;
    gap: 8px;
    margin-block-start: 14px;
}

/* Responsive: collapse the two-column grids on narrow viewports. */
@media (max-width: 1100px) {
    .ovr-grid-6040[b-nhlft1qx7u],
    .ovr-grid-5050[b-nhlft1qx7u] {
        grid-template-columns: 1fr;
    }
}

/* OFFICER-ONLY (Phase D3): criterion provenance chip row inside the workflow step outcome.
   Slate-only — no amber/red signal colours. */
.ovr-criterion-prov[b-nhlft1qx7u] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-block-start: 4px;
}

/* OFFICER-ONLY (document-first intake): the "AI suggested · value + Adopt" cluster shown
   beside a declared value while a provisional pipeline suggestion is pending. Slate-only. */
.ovr-suggestion[b-nhlft1qx7u] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-inline-start: 8px;
    vertical-align: middle;
}
/* /Components/Pages/Console/Detail/PqrReviewCard.razor.rz.scp.css */
.pqr-review-stack[b-h8mz2kq1b8] { display: grid; gap: 16px; }
.pqr-review-head[b-h8mz2kq1b8] { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.pqr-review-head h3[b-h8mz2kq1b8], .pqr-form-section h4[b-h8mz2kq1b8] { margin: 0; color: var(--ui-ink); }
.pqr-review-head p[b-h8mz2kq1b8], .pqr-form-section p[b-h8mz2kq1b8] { margin: 4px 0 0; color: var(--ui-muted); font-size: 13px; max-width: 72ch; }
.pqr-review-eyebrow[b-h8mz2kq1b8] { display: block; margin-block-end: 4px; color: var(--ui-accent); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.pqr-review-actions[b-h8mz2kq1b8], .pqr-form-actions[b-h8mz2kq1b8] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pqr-proposals[b-h8mz2kq1b8] { display: grid; gap: 12px; margin-block-start: 18px; padding: 16px; border: 1px solid var(--ui-accent-line); border-radius: 8px; background: var(--ui-accent-tint); }
.pqr-proposals > header[b-h8mz2kq1b8] { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.pqr-proposals h4[b-h8mz2kq1b8] { margin: 0; color: var(--ui-ink); font-size: 14px; }
.pqr-proposals header p[b-h8mz2kq1b8], .pqr-proposal-safety[b-h8mz2kq1b8] { margin: 4px 0 0; color: var(--ui-ink-3); font-size: 12px; line-height: 1.5; }
.pqr-proposal-grid[b-h8mz2kq1b8] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pqr-proposal-fact[b-h8mz2kq1b8] { display: grid; gap: 3px; min-width: 0; padding: 10px; border: 1px solid var(--ui-accent-line-soft); border-radius: 6px; background: var(--ui-surface); }
.pqr-proposal-fact > span[b-h8mz2kq1b8] { color: var(--ui-ink-3); font-size: 11px; font-weight: 700; }
.pqr-proposal-fact > strong[b-h8mz2kq1b8] { overflow-wrap: anywhere; color: var(--ui-ink); font-size: 13px; }
.pqr-proposal-fact > small[b-h8mz2kq1b8] { overflow-wrap: anywhere; color: var(--ui-muted); font-size: 10px; line-height: 1.4; }
.pqr-proposal-employment[b-h8mz2kq1b8] { display: grid; gap: 6px; padding-block-start: 10px; border-block-start: 1px solid var(--ui-accent-line); }
.pqr-proposal-employment > strong[b-h8mz2kq1b8] { color: var(--ui-ink); font-size: 12px; }
.pqr-proposal-employment > div[b-h8mz2kq1b8] { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px; border-radius: 6px; background: var(--ui-surface); color: var(--ui-ink-2); font-size: 12px; }
.pqr-proposal-safety[b-h8mz2kq1b8] { padding-block-start: 10px; border-block-start: 1px solid var(--ui-accent-line); }
.pqr-case-checks[b-h8mz2kq1b8] { margin-block-start: 18px; padding: 14px; border: 1px solid var(--ui-line); border-radius: 8px; background: var(--ui-bg-subtle, var(--ui-surface-page)); }
.pqr-case-checks-head[b-h8mz2kq1b8] { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-block-end: 10px; color: var(--ui-ink); }
.pqr-case-checks-head span[b-h8mz2kq1b8] { color: var(--ui-muted); font-size: 12px; }
.pqr-case-checks ul[b-h8mz2kq1b8] { display: grid; gap: 8px; padding: 0; margin: 0; list-style: none; }
.pqr-case-checks li[b-h8mz2kq1b8] { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding-block: 9px; border-block-start: 1px solid var(--ui-line); }
.pqr-case-checks li:first-child[b-h8mz2kq1b8] { border-block-start: 0; }
.pqr-case-checks li > div[b-h8mz2kq1b8] { display: grid; gap: 2px; }
.pqr-case-checks li span[b-h8mz2kq1b8] { color: var(--ui-muted); font-size: 12px; }
.pqr-case-checks li small[b-h8mz2kq1b8] { color: var(--ui-accent); font-size: 11px; }
.pqr-reference-provenance[b-h8mz2kq1b8] { margin-block-start: 14px; border: 1px solid var(--ui-accent-line); border-radius: 8px; background: var(--ui-surface-page); }
.pqr-reference-provenance summary[b-h8mz2kq1b8] { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; cursor: pointer; list-style-position: inside; color: var(--ui-ink); }
.pqr-reference-provenance__copy[b-h8mz2kq1b8] { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; }
.pqr-reference-provenance__copy strong[b-h8mz2kq1b8] { font-size: 12px; }
.pqr-reference-provenance__copy small[b-h8mz2kq1b8] { color: var(--ui-muted); font-size: 11px; }
.pqr-reference-provenance__status[b-h8mz2kq1b8] { flex: 0 0 auto; color: var(--ui-accent-strong); font-size: 11px; font-weight: 700; }
.pqr-reference-provenance__details[b-h8mz2kq1b8] { display: grid; gap: 10px; padding: 12px; border-block-start: 1px solid var(--ui-accent-line-soft); }
.pqr-reference-provenance__details > p[b-h8mz2kq1b8], .pqr-reference-provenance__details > small[b-h8mz2kq1b8] { margin: 0; color: var(--ui-muted); font-size: 11px; line-height: 1.5; }
.pqr-reference-provenance__details dl[b-h8mz2kq1b8] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; margin: 0; }
.pqr-reference-provenance__details dl div[b-h8mz2kq1b8] { min-inline-size: 0; }
.pqr-reference-provenance__details dt[b-h8mz2kq1b8] { color: var(--ui-muted); font-size: 10px; font-weight: 700; text-transform: uppercase; }
.pqr-reference-provenance__details dd[b-h8mz2kq1b8] { margin: 3px 0 0; color: var(--ui-ink); font-size: 12px; overflow-wrap: anywhere; }
.pqr-reference-provenance__details code[b-h8mz2kq1b8] { font-size: 11px; }
.pqr-review-summary[b-h8mz2kq1b8] { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 18px 0 0; }
.pqr-review-summary div[b-h8mz2kq1b8] { padding: 12px; border: 1px solid var(--ui-line); border-radius: 8px; background: var(--ui-bg-subtle, var(--ui-surface-page)); }
.pqr-review-summary dt[b-h8mz2kq1b8] { margin-block-end: 5px; color: var(--ui-muted); font-size: 11px; font-weight: 700; text-transform: uppercase; }
.pqr-review-summary dd[b-h8mz2kq1b8] { margin: 0; color: var(--ui-ink); font-size: 13px; }
.pqr-form[b-h8mz2kq1b8] { display: grid; gap: 18px; margin-block-start: 18px; padding-block-start: 18px; border-block-start: 1px solid var(--ui-line); }
.pqr-form-section[b-h8mz2kq1b8] { display: grid; gap: 14px; }
.pqr-form-section > header[b-h8mz2kq1b8] { display: grid; grid-template-columns: 28px 1fr; gap: 10px; }
.pqr-form-section > header > span[b-h8mz2kq1b8] { display: grid; place-items: center; inline-size: 28px; block-size: 28px; border-radius: 50%; background: var(--ui-accent-tint); color: var(--ui-accent); font-size: 12px; font-weight: 700; }
.pqr-form-grid[b-h8mz2kq1b8] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.pqr-form-grid label[b-h8mz2kq1b8], .pqr-reason[b-h8mz2kq1b8], .pqr-hours[b-h8mz2kq1b8] { display: grid; gap: 6px; color: var(--ui-muted); font-size: 12px; font-weight: 600; }
.pqr-reason textarea[b-h8mz2kq1b8], .pqr-form-grid textarea[b-h8mz2kq1b8] { resize: vertical; }
.pqr-checklist[b-h8mz2kq1b8] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; padding: 14px; border: 1px solid var(--ui-line); border-radius: 8px; }
.pqr-checklist legend[b-h8mz2kq1b8] { padding-inline: 6px; color: var(--ui-ink); font-size: 12px; font-weight: 700; }
.pqr-check[b-h8mz2kq1b8] { display: flex; align-items: flex-start; gap: 8px; color: var(--ui-ink); font-size: 13px; }
.pqr-check input[b-h8mz2kq1b8] { margin-block-start: 2px; }
.pqr-message[b-h8mz2kq1b8] { margin: 12px 0 0; color: var(--ui-danger, var(--ui-bad)); font-size: 13px; }
.pqr-route-warning[b-h8mz2kq1b8] { padding: 12px; border: 1px solid var(--ui-warn); border-radius: 8px; background: var(--ui-warn-tint); color: var(--ui-warn); font-size: 12px; }
.pqr-empty[b-h8mz2kq1b8] { display: grid; gap: 5px; margin-block-start: 16px; padding: 18px; border: 1px dashed var(--ui-line); border-radius: 8px; color: var(--ui-muted); font-size: 13px; }
.pqr-empty strong[b-h8mz2kq1b8] { color: var(--ui-ink); }
.pqr-employment-list[b-h8mz2kq1b8] { display: grid; gap: 8px; margin-block-start: 16px; }
.pqr-employment-row[b-h8mz2kq1b8] { display: grid; grid-template-columns: minmax(14rem, 1fr) minmax(0, auto) auto; align-items: center; gap: 16px; padding: 12px; border: 1px solid var(--ui-line); border-radius: 8px; }
.pqr-employment-row > div:first-child[b-h8mz2kq1b8] { display: grid; gap: 3px; }
.pqr-employment-row span[b-h8mz2kq1b8] { color: var(--ui-muted); font-size: 12px; }
.pqr-employment-flags[b-h8mz2kq1b8] { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.pqr-employment-actions[b-h8mz2kq1b8] { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.pqr-employment-reason[b-h8mz2kq1b8] { font-size: 0.82rem; color: var(--ui-muted); }
.pqr-employment-form[b-h8mz2kq1b8] { padding: 16px; border: 1px solid var(--ui-line); border-radius: 8px; background: var(--ui-bg-subtle, var(--ui-surface-page)); }
.pqr-qualifying-checks[b-h8mz2kq1b8] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pqr-hours[b-h8mz2kq1b8] { max-width: 260px; }
@media (max-width: 900px) { .pqr-review-summary[b-h8mz2kq1b8], .pqr-form-grid[b-h8mz2kq1b8], .pqr-proposal-grid[b-h8mz2kq1b8] { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pqr-qualifying-checks[b-h8mz2kq1b8] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .pqr-review-head[b-h8mz2kq1b8], .pqr-review-actions[b-h8mz2kq1b8], .pqr-proposals > header[b-h8mz2kq1b8], .pqr-proposal-employment > div[b-h8mz2kq1b8], .pqr-reference-provenance summary[b-h8mz2kq1b8] { align-items: stretch; flex-direction: column; } .pqr-review-summary[b-h8mz2kq1b8], .pqr-form-grid[b-h8mz2kq1b8], .pqr-checklist[b-h8mz2kq1b8], .pqr-qualifying-checks[b-h8mz2kq1b8], .pqr-case-checks li[b-h8mz2kq1b8], .pqr-proposal-grid[b-h8mz2kq1b8], .pqr-reference-provenance__details dl[b-h8mz2kq1b8] { grid-template-columns: 1fr; } .pqr-employment-row[b-h8mz2kq1b8] { grid-template-columns: 1fr; align-items: start; } }

/* A field the form cannot be saved without, and the line that says so while it is empty. */
.pqr-required[b-h8mz2kq1b8] {
    color: var(--ui-muted);
    font-weight: 400;
    font-size: 12px;
}

.pqr-hint[b-h8mz2kq1b8] {
    margin: 0;
    font-size: 12.5px;
    color: var(--ui-warn-ink, var(--ui-warn));
}
/* /Components/Pages/Console/Detail/PsvReportCard.razor.rz.scp.css */
/* PSV report card — the applicant's verification report as structured, editable facts inside the
   Verification pane's PSV check. Slate ramp + accent only; result tone is a semantic colour on the
   result chip, never on the card. RTL-ready via logical properties. */

.psv-card[b-fy9tzlivdy] {
    margin-block: 12px 14px;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--ui-line, var(--ui-line));
    border-radius: 8px;
    background: var(--ui-surface-2, var(--ui-surface-page));
}

.psv-card__mono[b-fy9tzlivdy] {
    font-family: var(--font-mono);
    font-size: 12.5px;
}

.psv-card__empty[b-fy9tzlivdy] {
    margin: 0;
    padding: 12px 16px;
    font-size: 12.5px;
    color: var(--ui-muted, var(--ui-muted));
}

/* Result tone: green / red / amber / slate, matching the providers' own legends. */
.psv-card__result[b-fy9tzlivdy] {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    background: var(--ui-surface-2, var(--ui-surface-sunken));
    color: var(--ui-ink-2, var(--ui-ink-2));
    white-space: nowrap;
}

.psv-card__result[data-outcome="positive"][b-fy9tzlivdy] {
    color: var(--success, var(--ui-good));
    background: color-mix(in srgb, var(--success, var(--ui-good-fill)) 10%, transparent);
}

.psv-card__result[data-outcome="negative"][b-fy9tzlivdy] {
    color: var(--danger, var(--ui-bad));
    background: color-mix(in srgb, var(--danger, var(--ui-bad-fill)) 10%, transparent);
}

.psv-card__result[data-outcome="unable"][b-fy9tzlivdy] {
    color: var(--ui-warn);
    background: color-mix(in srgb, var(--ui-warn-fill) 14%, transparent);
}

.psv-head[b-fy9tzlivdy] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    padding: 8px 12px;
    background: var(--surface-2, var(--ui-surface-sunken));
    border-block-end: 1px solid var(--line, var(--ui-line));
    font-size: 12px;
    color: var(--ink, var(--ui-ink));
}

.psv-head > span[b-fy9tzlivdy],
.psv-head strong[b-fy9tzlivdy] { white-space: nowrap; }

.psv-head strong[b-fy9tzlivdy] { font-weight: 700; }
.psv-sep[b-fy9tzlivdy] { color: var(--muted-2, var(--ui-faint)); }
.psv-mono[b-fy9tzlivdy] { font-family: var(--font-mono); font-size: 12px; }
.psv-head-right[b-fy9tzlivdy] { margin-inline-start: auto; display: flex; align-items: center; gap: 8px; }

.psv-rows[b-fy9tzlivdy]  .ui-row-body { padding-inline-start: 14px; }

.psv-marks[b-fy9tzlivdy] { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.psv-marks-label[b-fy9tzlivdy] { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--muted-2, var(--ui-faint)); margin-inline-end: 4px; }
.psv-remarks[b-fy9tzlivdy] { margin: 0; font-size: 12px; color: var(--muted, var(--ui-muted)); }

/* Edit form */
.psv-card__form[b-fy9tzlivdy] {
    display: grid;
    gap: 12px;
    padding: 12px;
}

.psv-card__grid[b-fy9tzlivdy] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px 14px;
}

.psv-card__grid label[b-fy9tzlivdy],
.psv-card__reason[b-fy9tzlivdy] {
    display: grid;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--ui-muted, var(--ui-muted));
}

.psv-card__rows-head[b-fy9tzlivdy] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 13px;
}

.psv-card__row[b-fy9tzlivdy] {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr)) minmax(0, 1.6fr) auto;
    gap: 6px;
    align-items: center;
}

.psv-card__form-actions[b-fy9tzlivdy] {
    display: flex;
    gap: 8px;
}

@media (max-width: 900px) {
    .psv-card__row[b-fy9tzlivdy] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .psv-card__row-remarks[b-fy9tzlivdy] {
        grid-column: 1 / -1;
    }
}
/* /Components/Pages/Console/Detail/QualificationPane.razor.rz.scp.css */
/* Qualification pane — tier-resolution display for the applicant-detail tab.
   Scoped to QualificationPane; warm palette + gold accent per the Phase 5
   design system (--ui-* tokens from _content/Mohap.Web.Ui/css/theme.css).
   RTL-ready: spacing/alignment use logical properties so the layout flips
   automatically under [dir=rtl]. Ported from the demo Qualification tab. */

.qual-pane[b-5dx9d0s85v] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.qual-head[b-5dx9d0s85v] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.qual-eyebrow[b-5dx9d0s85v] {
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--ui-muted);
}

.qual-title[b-5dx9d0s85v] {
    font-family: var(--font-ui);
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -.02em;
    color: var(--ui-ink);
    margin: 4px 0 6px;
}

.qual-sub[b-5dx9d0s85v] {
    font-size: 13px;
    color: var(--ui-muted);
}

.qual-head-tier[b-5dx9d0s85v] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

.qual-resolved-dl[b-5dx9d0s85v] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px 24px;
    margin: 16px 0 0;
}

.qual-resolved-dl dt[b-5dx9d0s85v] {
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--ui-muted);
    margin-bottom: 3px;
}

.qual-resolved-dl dd[b-5dx9d0s85v] {
    margin: 0;
    font-size: 14px;
    color: var(--ui-ink-2);
}

.qual-resolved-dl dd.strong[b-5dx9d0s85v] {
    font-weight: 600;
    color: var(--ui-ink);
}

.qual-mapping-note[b-5dx9d0s85v] {
    margin: 16px 0 0;
    padding-block-start: 12px;
    border-block-start: 1px solid var(--ui-line);
}

.qual-section-h[b-5dx9d0s85v] {
    font-size: 15px;
    font-weight: 600;
    color: var(--ui-ink);
    margin: 0 0 10px;
}

.qual-exp[b-5dx9d0s85v] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.qual-exp-row[b-5dx9d0s85v] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
}

.qual-exp-row .strong[b-5dx9d0s85v] {
    font-weight: 600;
    color: var(--ui-ink);
}

/* The heading and the result side by side: the answer first, the sum beneath it. */
.qual-exp-head[b-5dx9d0s85v] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}

.qual-exp-head .qual-section-h[b-5dx9d0s85v] {
    margin: 0;
}

/* The line the requirement is held against. */
.qual-exp-row--total[b-5dx9d0s85v] {
    padding-block: 6px;
    border-block: 1px solid var(--ui-line);
}

/* What still stands between the figures and a settled result; the rule's own sentence is quieter. */
.qual-exp-note[b-5dx9d0s85v] {
    margin: 0;
    font-size: 0.84rem;
    color: var(--ui-ink-2);
}

.qual-exp-note--rule[b-5dx9d0s85v] {
    color: var(--ui-muted);
}

.qual-internship[b-5dx9d0s85v] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 14px;
    color: var(--ui-ink-2);
}

.qual-cert-list[b-5dx9d0s85v] {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.qual-cert-list li[b-5dx9d0s85v] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: var(--ui-ink-2);
}

.mono[b-5dx9d0s85v] {
    font-family: var(--font-mono);
}

.muted[b-5dx9d0s85v] {
    color: var(--ui-muted);
}

.small[b-5dx9d0s85v] {
    font-size: 12.5px;
}

/* ── Match resolution — agentic proposals + officer confirm/override (the human gate). ── */

.qual-match-head[b-5dx9d0s85v] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-block-end: 12px;
}

.qual-match-head p[b-5dx9d0s85v] {
    max-inline-size: 760px;
    margin: 4px 0 0;
    line-height: 1.5;
}

.qual-match-list[b-5dx9d0s85v] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.qual-match[b-5dx9d0s85v] {
    border: 1px solid var(--ui-line);
    border-radius: 8px;
    padding: 18px;
    background: var(--ui-surface, var(--ui-surface));
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.qual-match-row[b-5dx9d0s85v] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.qual-match-meta[b-5dx9d0s85v] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.qual-match-kind[b-5dx9d0s85v] {
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--ui-muted);
}

.qual-match-title[b-5dx9d0s85v] {
    margin: 1px 0 0;
    color: var(--ui-ink);
    font-size: 16px;
    font-weight: 600;
}

.qual-match-guidance[b-5dx9d0s85v] {
    margin: 0;
    color: var(--ui-muted);
    font-size: 12.5px;
    line-height: 1.45;
}

.qual-match-display[b-5dx9d0s85v] {
    font-size: 15px;
    color: var(--ui-ink);
}

.qual-match-rationale[b-5dx9d0s85v] {
    font-size: 13px;
    color: var(--ui-ink-2);
    margin: 0;
}

.qual-suggestion[b-5dx9d0s85v],
.qual-match-notice[b-5dx9d0s85v] {
    display: grid;
    gap: 4px;
    padding: 12px 14px;
    border-radius: 8px;
}

.qual-suggestion[b-5dx9d0s85v] {
    border: 1px solid color-mix(in srgb, var(--ui-accent, var(--ui-accent)) 28%, var(--ui-line));
    background: var(--ui-accent-tint, var(--ui-accent-tint));
}

/* A suggested title rule that differs from the title applied for: say so before it is confirmed. */
.qual-suggestion-differs[b-5dx9d0s85v] {
    color: var(--ui-warn-ink, var(--ui-warn));
    font-size: 12.5px;
    font-weight: 600;
}

.qual-suggestion-confirmed[b-5dx9d0s85v] {
    border-color: var(--ui-line);
    background: var(--ui-bg-subtle, var(--ui-surface-page));
}

.qual-suggestion-label[b-5dx9d0s85v] {
    color: var(--ui-muted);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.qual-match-notice[b-5dx9d0s85v] {
    grid-template-columns: max-content 1fr;
    gap: 8px;
    border: 1px solid var(--ui-line);
    background: var(--ui-bg-subtle, var(--ui-surface-page));
    color: var(--ui-ink-2);
    font-size: 13px;
}

.qual-choice-group[b-5dx9d0s85v] {
    min-inline-size: 0;
    margin: 0;
    padding: 0;
    border: 0;
    display: grid;
    gap: 8px;
}

.qual-choice-group legend[b-5dx9d0s85v] {
    padding: 0;
    margin-block-end: 8px;
    color: var(--ui-ink);
    font-size: 13px;
    font-weight: 600;
}

.qual-choice[b-5dx9d0s85v] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 12px;
    border: 1px solid var(--ui-line);
    border-radius: 8px;
    background: var(--ui-surface, var(--ui-surface));
    cursor: pointer;
}

.qual-choice:hover[b-5dx9d0s85v],
.qual-choice:has(input:focus-visible)[b-5dx9d0s85v] {
    border-color: var(--ui-accent, var(--ui-accent));
}

.qual-choice:has(input:checked)[b-5dx9d0s85v] {
    border-color: var(--ui-accent, var(--ui-accent));
    background: var(--ui-accent-tint, var(--ui-accent-tint));
}

.qual-choice input[b-5dx9d0s85v] {
    inline-size: 17px;
    block-size: 17px;
    margin: 2px 0 0;
    accent-color: var(--ui-accent, var(--ui-accent));
}

.qual-choice-copy[b-5dx9d0s85v] {
    min-inline-size: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--ui-ink-2);
    font-size: 13.5px;
    line-height: 1.4;
}

.qual-choice-tag[b-5dx9d0s85v] {
    flex: 0 0 auto;
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--ui-accent-tint, var(--ui-accent-tint));
    color: var(--ui-accent, var(--ui-accent));
    font-size: 11px;
    font-weight: 600;
}

.qual-catalogue[b-5dx9d0s85v] {
    border-block-start: 1px solid var(--ui-line);
    padding-block-start: 10px;
}

.qual-catalogue summary[b-5dx9d0s85v] {
    color: var(--ui-accent, var(--ui-accent));
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
}

.qual-catalogue-body[b-5dx9d0s85v] {
    display: grid;
    gap: 7px;
    margin-block-start: 10px;
    padding: 12px;
    border-radius: 8px;
    background: var(--ui-bg-subtle, var(--ui-surface-page));
}

.qual-catalogue-body label[b-5dx9d0s85v] {
    color: var(--ui-ink);
    font-size: 12.5px;
    font-weight: 600;
}

/* Chain-of-trust marker + the officer-only match-confidence pill beside the proposed reference. */
.qual-match-prov[b-5dx9d0s85v] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-block-start: 4px;
}

.qual-match-actions[b-5dx9d0s85v] {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: flex-end;
    flex-wrap: wrap;
    border-block-start: 1px solid var(--ui-line);
    padding-block-start: 12px;
}

/* The confirm-match button now uses the shared Web.Ui <Button> primitive
   (Variant Primary) — the bespoke .qual-match-confirm styles were removed. */

/* OFFICER-ONLY (Phase D3): per-criterion provenance row inside internship/experience cards. */
.qual-criterion-prov[b-5dx9d0s85v] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-block-start: 8px;
}

/* OFFICER-ONLY (Phase D3): criterion provenance list card (provisional criteria summary). */
.qual-criterion-prov-list[b-5dx9d0s85v] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.qual-criterion-prov-row[b-5dx9d0s85v] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.qual-criterion-prov-name[b-5dx9d0s85v] {
    min-width: 120px;
    font-size: 13px;
    font-weight: 500;
    color: var(--ui-ink);
}

.qual-criterion-prov-chips[b-5dx9d0s85v] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.qual-match-confirmed[b-5dx9d0s85v] {
    margin: 0;
    border-block-start: 1px solid var(--ui-line);
    padding-block-start: 10px;
}

/* Inline officer edit of a captured base-degree field (T2) — the value + an Edit action, and the
   inline editor (text input + Save / Cancel). Mirrors the Documents pane's field-edit affordance. */
.qual-resolved-dl .qual-field-value[b-5dx9d0s85v] {
    margin-inline-end: 6px;
}

.qual-edit-trigger[b-5dx9d0s85v] {
    border: 0;
    background: transparent;
    color: var(--ui-muted);
    cursor: pointer;
    font-size: 12px;
    font-weight: 650;
    line-height: 1.2;
    padding: 4px 6px;
    border-radius: 6px;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Touch: grow the Edit action to a 44px hit box so it is not a mis-tap-prone target. */
@media (pointer: coarse) {
    .qual-edit-trigger[b-5dx9d0s85v] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-inline-size: 44px;
        min-block-size: 44px;
        padding: 0;
    }
}

/* Phone: stack the experience-summary row (label + value) instead of crushing the value. */
@media (max-width: 480px) {
    .qual-exp-row[b-5dx9d0s85v] {
        flex-direction: column;
        align-items: flex-start;
    }

    .qual-match-row[b-5dx9d0s85v],
    .qual-match-head[b-5dx9d0s85v] {
        flex-direction: column;
    }

    .qual-match-notice[b-5dx9d0s85v] {
        grid-template-columns: 1fr;
    }

    .qual-choice-copy[b-5dx9d0s85v] {
        align-items: flex-start;
        flex-direction: column;
    }
}

.qual-edit-trigger:hover[b-5dx9d0s85v],
.qual-edit-trigger:focus-visible[b-5dx9d0s85v] {
    color: var(--ui-accent, var(--ui-accent));
    background: var(--ui-surface-page);
    outline: none;
}

.qual-edit[b-5dx9d0s85v] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.qual-edit-input.ui-input[b-5dx9d0s85v] {
    width: auto;
    min-inline-size: 220px;
    height: 30px;
    font-size: 13px;
}

/* What the document printed, beneath a corrected base-degree value. */
.qual-field-was[b-5dx9d0s85v] {
    display: block;
    flex-basis: 100%;
    margin-block-start: 2px;
    text-decoration: line-through;
    opacity: .75;
    overflow-wrap: anywhere;
}
/* /Components/Pages/Console/Detail/SupportingDocChips.razor.rz.scp.css */
/* Supporting-document evidence (P2): which classified document supports this requirement.
   Moved here from the Verification pane so both call sites style identically. */

.verif-check-support[b-l6qwnwfpsl] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-block-start: 8px;
    border-block-start: 1px solid var(--ui-line);
}

.verif-check-support-label[b-l6qwnwfpsl] {
    font-size: 11px;
    color: var(--ui-muted);
    text-transform: uppercase;
    letter-spacing: .03em;
}

.verif-check-support-chips[b-l6qwnwfpsl] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.verif-support-kind[b-l6qwnwfpsl] {
    font-weight: 600;
    color: var(--ui-ink-2);
}

.verif-support-file[b-l6qwnwfpsl] {
    color: var(--ui-muted);
    /* Truncate a long filename so the supporting-doc chip can't push past the viewport. */
    display: inline-block;
    max-inline-size: 55vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}
/* /Components/Pages/Console/Detail/VerifForm.razor.rz.scp.css */
/* THE single home for the Verification pane's inline-form styling (previously duplicated
   as the "GSC manual-outcome form" block). Children are composed components / parent
   ChildContent, so the descendant rules pierce scoping with ::deep. */

.verif-gsc-form[b-9ps1efhb19] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-block-start: 10px;
    padding: 12px;
    background: var(--ui-surface-page);
    border: 1px solid var(--ui-line);
    border-radius: 8px;
}

.verif-gsc-form[b-9ps1efhb19]  .verif-gsc-toggle {
    display: flex;
    gap: 0;
    border: 1px solid var(--ui-line);
    border-radius: 8px;
    overflow: hidden;
    inline-size: fit-content;
}

.verif-gsc-form[b-9ps1efhb19]  .verif-gsc-toggle-btn {
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    color: var(--ui-muted);
    background: var(--ui-surface);
    border: none;
    padding: 6px 12px;
    cursor: pointer;
}

.verif-gsc-form[b-9ps1efhb19]  .verif-gsc-toggle-btn + .verif-gsc-toggle-btn {
    border-inline-start: 1px solid var(--ui-line);
}

.verif-gsc-form[b-9ps1efhb19]  .verif-gsc-toggle-btn.active {
    color: var(--ui-on-accent-fill);
    background: var(--ui-accent-fill);
}

.verif-gsc-form[b-9ps1efhb19]  .verif-gsc-label {
    font-size: 11px;
    color: var(--ui-muted);
    text-transform: uppercase;
    letter-spacing: .03em;
}

/* Native <input> — ui-input handles the base look; override here for compact density. */
.verif-gsc-form[b-9ps1efhb19]  .verif-gsc-input {
    font: inherit;
    font-size: 12.5px;
}

.verif-gsc-form[b-9ps1efhb19]  .verif-gsc-input:focus-visible {
    outline: 2px solid var(--ui-accent);
    outline-offset: 1px;
}

.verif-gsc-form[b-9ps1efhb19]  .verif-gsc-submit {
    align-self: flex-start;
    margin-block-start: 2px;
}
/* /Components/Pages/Console/Detail/VerificationPane.razor.rz.scp.css */
/* Verification pane — applicant-detail "Verification" tab: one Panel of ListRows (Panel.razor.css /
   ListRow.razor.css own the row chrome). What's left here is what the inline officer forms and the
   PSV upload hint still need — the rest moved to the shared components. */
.verif[b-vnx6x1nbd9] {
    display: grid;
    gap: 10px;
}

.verif-check-hint[b-vnx6x1nbd9] {
    margin: 0;
}

.verif-evidence-file[b-vnx6x1nbd9] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.verif-evidence-file input[type="file"][b-vnx6x1nbd9] {
    max-inline-size: 100%;
    color: var(--ui-muted);
    font-size: 12px;
}

.verif-upload-msg[b-vnx6x1nbd9] {
    font-size: 12.5px;
    color: var(--ui-ink-2);
    margin: 0;
}
/* /Components/Pages/Console/Guide.razor.rz.scp.css */
/* User guide — task-focused reviewer reference.
   Uses the shared console tokens and logical properties for RTL readiness. */
.guide[b-yebvg6z1tz] {
    max-inline-size: 1180px;
    margin-inline: auto;
    padding: 24px 24px 48px;
    gap: 24px;
    color: var(--ui-ink-2);
}

.guide-hero[b-yebvg6z1tz] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    padding: 24px 28px;
    border: 1px solid var(--ui-line);
    border-inline-start: 4px solid var(--ui-accent);
    border-radius: var(--ui-radius, 12px);
    background: var(--ui-surface);
    box-shadow: var(--ui-shadow-sm);
}

.guide-hero__copy[b-yebvg6z1tz] {
    max-inline-size: 72ch;
}

.guide-kicker[b-yebvg6z1tz],
.guide-area-card__label[b-yebvg6z1tz] {
    display: block;
    color: var(--ui-accent);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.guide-hero h1[b-yebvg6z1tz] {
    margin: 6px 0 8px;
    color: var(--ui-ink);
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 650;
    line-height: 1.2;
}

.guide-hero p[b-yebvg6z1tz] {
    margin: 0;
    color: var(--ui-ink-2);
    font-size: 14px;
    line-height: 1.65;
}

.guide-hero__meta[b-yebvg6z1tz] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    flex: none;
}

.guide-hero__meta > span:last-child[b-yebvg6z1tz] {
    color: var(--ui-muted);
    font-size: 11px;
    white-space: nowrap;
}

.guide-jump[b-yebvg6z1tz] {
    padding: 20px;
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-radius, 12px);
    background: var(--ui-surface);
}

.guide-jump__head h2[b-yebvg6z1tz],
.guide-section-head h2[b-yebvg6z1tz] {
    margin: 4px 0 0;
    color: var(--ui-ink);
    font-size: 18px;
    font-weight: 650;
    line-height: 1.3;
}

.guide-jump__links[b-yebvg6z1tz] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-block-start: 16px;
}

.guide-jump__links a[b-yebvg6z1tz] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2px 10px;
    min-inline-size: 0;
    padding: 14px;
    border: 1px solid var(--ui-line);
    border-radius: 10px;
    color: var(--ui-ink-2);
    text-decoration: none;
    transition: border-color .15s ease, background-color .15s ease, transform .15s ease;
}

.guide-jump__links a:hover[b-yebvg6z1tz] {
    border-color: var(--ui-accent);
    background: var(--ui-accent-tint);
    transform: translateY(-1px);
}

.guide-jump__number[b-yebvg6z1tz] {
    grid-row: 1 / span 2;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--ui-accent-tint);
    color: var(--ui-accent);
    font-size: 11px;
    font-weight: 750;
}

.guide-jump__links strong[b-yebvg6z1tz] {
    overflow: hidden;
    color: var(--ui-ink);
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.guide-jump__links small[b-yebvg6z1tz] {
    color: var(--ui-muted);
    font-size: 11px;
    line-height: 1.35;
}

.guide-anchor[b-yebvg6z1tz] {
    scroll-margin-block-start: 20px;
}

.guide-panel[b-yebvg6z1tz],
.guide-phase[b-yebvg6z1tz],
.guide-verdict[b-yebvg6z1tz],
.guide-area-card[b-yebvg6z1tz] {
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-radius, 12px);
    background: var(--ui-surface);
    box-shadow: var(--ui-shadow-sm);
}

.guide-panel[b-yebvg6z1tz] {
    padding: 22px;
}

.guide-section[b-yebvg6z1tz] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.guide-section-head[b-yebvg6z1tz] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
}

.guide-section-head > p[b-yebvg6z1tz] {
    max-inline-size: 52ch;
    margin: 0;
    color: var(--ui-muted);
    font-size: 12.5px;
    line-height: 1.5;
    text-align: end;
}

.guide-lifecycle[b-yebvg6z1tz] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    margin: 28px 0 0;
    padding: 0;
    list-style: none;
}

.guide-lifecycle li[b-yebvg6z1tz] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-inline-size: 0;
    padding: 28px 18px 0 0;
    border-block-start: 2px solid var(--ui-line-strong);
}

.guide-lifecycle li:last-child[b-yebvg6z1tz] {
    padding-inline-end: 0;
}

.guide-lifecycle__step[b-yebvg6z1tz] {
    position: absolute;
    inset-block-start: -16px;
    inset-inline-start: 0;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: var(--ui-accent-fill);
    color: var(--ui-on-accent-fill);
    font-size: 12px;
    font-weight: 750;
    box-shadow: 0 0 0 4px var(--ui-surface);
}

.guide-lifecycle strong[b-yebvg6z1tz] {
    color: var(--ui-ink);
    font-size: 13px;
}

.guide-lifecycle small[b-yebvg6z1tz] {
    color: var(--ui-muted);
    font-size: 11.5px;
    line-height: 1.45;
}

.guide-callout[b-yebvg6z1tz],
.guide-assurance[b-yebvg6z1tz] {
    margin: 18px 0 0;
    padding: 12px 14px;
    border-inline-start: 3px solid var(--ui-accent);
    border-radius: 8px;
    background: var(--ui-accent-tint);
    color: var(--ui-accent-strong);
    font-size: 12.5px;
    line-height: 1.55;
}

.guide-phase-grid[b-yebvg6z1tz] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.guide-phase[b-yebvg6z1tz] {
    min-inline-size: 0;
    overflow: hidden;
}

.guide-phase__head[b-yebvg6z1tz] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    border-block-end: 1px solid var(--ui-line);
    background: var(--ui-surface-page);
}

.guide-phase__head > span[b-yebvg6z1tz] {
    flex: none;
    padding: 4px 8px;
    border-radius: 999px;
    background: var(--ui-accent-tint);
    color: var(--ui-accent);
    font-size: 10px;
    font-weight: 750;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.guide-phase__head h3[b-yebvg6z1tz] {
    margin: 0;
    color: var(--ui-ink);
    font-size: 14px;
    font-weight: 650;
}

.guide-task-list[b-yebvg6z1tz] {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0 18px;
    list-style: none;
}

.guide-task-list li[b-yebvg6z1tz] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 0;
    border-block-end: 1px solid var(--ui-line);
}

.guide-task-list li:last-child[b-yebvg6z1tz] {
    border-block-end: 0;
}

.guide-task-list strong[b-yebvg6z1tz] {
    color: var(--ui-ink);
    font-size: 12.5px;
}

.guide-task-list span[b-yebvg6z1tz] {
    color: var(--ui-muted);
    font-size: 12px;
    line-height: 1.5;
}

.guide-assurance[b-yebvg6z1tz] {
    margin: 0;
}

.guide-checks-layout[b-yebvg6z1tz] {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(260px, .85fr);
    gap: 18px;
    margin-block-start: 18px;
}

.guide-check-grid[b-yebvg6z1tz] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.guide-check-grid li[b-yebvg6z1tz] {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    min-inline-size: 0;
    padding: 13px;
    border: 1px solid var(--ui-line);
    border-radius: 10px;
    background: var(--ui-surface-page);
}

.guide-check-grid li > span[b-yebvg6z1tz] {
    display: grid;
    place-items: center;
    flex: none;
    width: 25px;
    height: 25px;
    border-radius: 7px;
    background: var(--ui-accent-fill);
    color: var(--ui-on-accent-fill);
    font-size: 10px;
    font-weight: 750;
}

.guide-check-grid li > div[b-yebvg6z1tz] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-inline-size: 0;
}

.guide-check-grid strong[b-yebvg6z1tz],
.guide-gates strong[b-yebvg6z1tz] {
    color: var(--ui-ink);
    font-size: 12px;
    line-height: 1.4;
}

.guide-check-grid small[b-yebvg6z1tz] {
    color: var(--ui-muted);
    font-size: 11px;
    line-height: 1.45;
}

.guide-gates[b-yebvg6z1tz] {
    padding: 17px;
    border: 1px solid var(--ui-line);
    border-radius: 10px;
    background: var(--ui-surface-page);
}

.guide-gates h3[b-yebvg6z1tz] {
    margin: 5px 0 4px;
    color: var(--ui-ink);
    font-size: 14px;
    font-weight: 650;
}

.guide-gates article[b-yebvg6z1tz] {
    padding: 14px 0;
    border-block-start: 1px solid var(--ui-line);
}

.guide-gates article:first-of-type[b-yebvg6z1tz] {
    margin-block-start: 12px;
}

.guide-gates article:last-child[b-yebvg6z1tz] {
    padding-block-end: 0;
}

.guide-gates p[b-yebvg6z1tz] {
    margin: 5px 0 0;
    color: var(--ui-muted);
    font-size: 11.5px;
    line-height: 1.5;
}

.guide-verdict-grid[b-yebvg6z1tz] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.guide-verdict[b-yebvg6z1tz] {
    min-inline-size: 0;
    padding: 16px;
    border-block-start-width: 3px;
}

.guide-verdict > span[b-yebvg6z1tz] {
    display: block;
    margin-block-end: 6px;
    color: var(--ui-muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.guide-verdict h3[b-yebvg6z1tz] {
    margin: 0 0 7px;
    color: var(--ui-ink);
    font-size: 14px;
    font-weight: 650;
}

.guide-verdict p[b-yebvg6z1tz] {
    margin: 0;
    color: var(--ui-muted);
    font-size: 11.5px;
    line-height: 1.5;
}

.guide-verdict--eligible[b-yebvg6z1tz] {
    border-block-start-color: var(--ui-good);
}

.guide-verdict--conditional[b-yebvg6z1tz] {
    border-block-start-color: var(--ui-warn);
}

.guide-verdict--ineligible[b-yebvg6z1tz] {
    border-block-start-color: var(--ui-danger);
}

.guide-verdict--incomplete[b-yebvg6z1tz] {
    border-block-start-color: var(--ui-muted);
}

.guide-area-grid[b-yebvg6z1tz] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
    gap: 12px;
}

.guide-area-card[b-yebvg6z1tz] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-inline-size: 0;
    padding: 17px;
}

.guide-area-card h3[b-yebvg6z1tz] {
    margin: 6px 0 7px;
    color: var(--ui-ink);
    font-size: 14px;
    font-weight: 650;
}

.guide-area-card p[b-yebvg6z1tz] {
    flex: 1;
    margin: 0 0 14px;
    color: var(--ui-muted);
    font-size: 11.5px;
    line-height: 1.55;
}

.guide-area-card a[b-yebvg6z1tz] {
    color: var(--ui-accent);
    font-size: 12px;
    font-weight: 650;
    text-decoration: none;
}

.guide-area-card a:hover[b-yebvg6z1tz] {
    text-decoration: underline;
}

.guide-area-card__links[b-yebvg6z1tz] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

@media (max-width: 900px) {
    .guide-jump__links[b-yebvg6z1tz],
    .guide-verdict-grid[b-yebvg6z1tz] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .guide-checks-layout[b-yebvg6z1tz] {
        grid-template-columns: 1fr;
    }

    .guide-gates[b-yebvg6z1tz] {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0 16px;
    }

    .guide-gates > .guide-kicker[b-yebvg6z1tz],
    .guide-gates > h3[b-yebvg6z1tz] {
        grid-column: 1 / -1;
    }
}

@media (max-width: 680px) {
    .guide[b-yebvg6z1tz] {
        padding: 16px 12px 32px;
        gap: 18px;
    }

    .guide-hero[b-yebvg6z1tz],
    .guide-section-head[b-yebvg6z1tz] {
        align-items: flex-start;
        flex-direction: column;
    }

    .guide-hero[b-yebvg6z1tz] {
        padding: 20px;
    }

    .guide-hero__meta[b-yebvg6z1tz] {
        align-items: flex-start;
    }

    .guide-section-head > p[b-yebvg6z1tz] {
        text-align: start;
    }

    .guide-jump__links[b-yebvg6z1tz],
    .guide-phase-grid[b-yebvg6z1tz],
    .guide-check-grid[b-yebvg6z1tz],
    .guide-verdict-grid[b-yebvg6z1tz],
    .guide-gates[b-yebvg6z1tz] {
        grid-template-columns: 1fr;
    }

    .guide-lifecycle[b-yebvg6z1tz] {
        grid-template-columns: 1fr;
        gap: 10px;
        margin-block-start: 18px;
    }

    .guide-lifecycle li[b-yebvg6z1tz],
    .guide-lifecycle li:last-child[b-yebvg6z1tz] {
        min-block-size: 56px;
        padding: 0;
        padding-block-end: 12px;
        padding-inline-start: 46px;
        border-block-start: 0;
        border-inline-start: 2px solid var(--ui-line-strong);
    }

    .guide-lifecycle__step[b-yebvg6z1tz] {
        inset-block-start: 0;
        inset-inline-start: -17px;
    }

    .guide-panel[b-yebvg6z1tz] {
        padding: 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .guide-jump__links a[b-yebvg6z1tz] {
        transition: none;
    }

    .guide-jump__links a:hover[b-yebvg6z1tz] {
        transform: none;
    }
}
/* /Components/Pages/Console/MyQueue.razor.rz.scp.css */
/* My Queue — the officer's personal work queue. Header mirrors the PSV-queue screen;
   rows reuse the shared clickable table pattern from Applications. RTL-ready via
   logical properties. */
.myq[b-a4p2hshjqr] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.myq-head[b-a4p2hshjqr] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.myq-title[b-a4p2hshjqr] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 22px;
    font-weight: 600;
    color: var(--ui-ink);
    margin: 0;
}

/* The queue is a triage surface: applicant identity gets the flexible track, while stage,
   next action and age stay scannable and aligned. table-layout prevents a short first row from
   collapsing the full-width card back to its intrinsic content width. */
[b-a4p2hshjqr] .myq-table {
    table-layout: fixed;
}

[b-a4p2hshjqr] .myq-table .td-applicant { inline-size: 46%; }
[b-a4p2hshjqr] .myq-table .td-stage     { inline-size: 18%; }
[b-a4p2hshjqr] .myq-table .td-action    { inline-size: 24%; }
[b-a4p2hshjqr] .myq-table .td-days      { inline-size: 12%; white-space: nowrap; }

[b-a4p2hshjqr] .myq-table tbody td {
    vertical-align: middle;
}

[b-a4p2hshjqr] .days-unit {
    margin-inline-start: 1px;
    color: var(--muted, var(--ui-muted));
}

/* Clickable rows: position:relative anchors the ApplicantCell stretched-link overlay
   to the row; cursor:pointer + the hover tint telegraph that the whole row navigates. */
[b-a4p2hshjqr] .myq-table tbody tr.apps-row {
    position: relative;
    cursor: pointer;
}

[b-a4p2hshjqr] .myq-table tbody tr.apps-row:hover {
    background: var(--ui-accent-tint); /* matches Applications' clickable-row tint */
}

@media (max-width: 768px) {
    [b-a4p2hshjqr] .myq-table {
        table-layout: auto;
    }

    [b-a4p2hshjqr] .myq-table .td-applicant,
    [b-a4p2hshjqr] .myq-table .td-stage,
    [b-a4p2hshjqr] .myq-table .td-action,
    [b-a4p2hshjqr] .myq-table .td-days {
        inline-size: auto;
    }
}
/* /Components/Pages/Console/PqrReference.razor.rz.scp.css */
/* PQR Reference — six-criterion glossary screen.
   Ported from the demo PQR Reference screen. UI design-system tokens (--ui-*).
   RTL-ready via logical inline properties. */
.pqr-ref[b-js27uqh2vn] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.pqr-ref-head[b-js27uqh2vn] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.pqr-ref-title[b-js27uqh2vn] {
    font-size: 22px;
    font-weight: 600;
    color: var(--ui-ink);
    margin: 0;
}

.pqr-ref-sub[b-js27uqh2vn] {
    font-size: 13px;
    color: var(--ui-muted);
    margin: 6px 0 0;
    max-inline-size: 60ch;
}

.pqr-ref-source[b-js27uqh2vn] {
    margin: 8px 0 0;
    color: var(--ui-muted);
    font-size: 11px;
}

.pqr-ref-source strong[b-js27uqh2vn] {
    color: var(--ui-ink-2);
    font-family: var(--font-mono);
    font-weight: 650;
}

.pqr-ref-grid[b-js27uqh2vn] {
    display: grid;
    /* Cap the 320px floor to the container so the criterion card's inline-end isn't
       clipped by overflow-x:hidden on a narrow phone. Full-width at 375px, two-up at 768px. */
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
    gap: 16px;
}

.pqr-crit-head[b-js27uqh2vn] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-block-end: 10px;
}

.pqr-crit-title[b-js27uqh2vn] {
    font-size: 16px;
    font-weight: 600;
    color: var(--ui-ink);
    margin: 0;
}

.pqr-crit-desc[b-js27uqh2vn] {
    font-size: 13px;
    color: var(--ui-ink-2);
    margin: 0 0 14px;
    line-height: 1.5;
}

.pqr-crit-facets[b-js27uqh2vn] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding-block-start: 12px;
    border-block-start: 1px solid var(--ui-line);
}

.pqr-facet[b-js27uqh2vn] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.pqr-facet dt[b-js27uqh2vn] {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ui-muted);
}

.pqr-facet dd[b-js27uqh2vn] {
    font-size: 12.5px;
    color: var(--ui-ink-2);
    margin: 0;
    line-height: 1.5;
}

.pqr-ref-specialty[b-js27uqh2vn] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-block-start: 8px;
}

.pqr-ref-section-head[b-js27uqh2vn] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding-block-start: 20px;
    border-block-start: 1px solid var(--ui-line);
}

.pqr-ref-kicker[b-js27uqh2vn] {
    display: block;
    margin-block-end: 5px;
    color: var(--ui-accent);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.pqr-ref-section-head h2[b-js27uqh2vn] {
    margin: 0;
    color: var(--ui-ink);
    font-size: 18px;
    font-weight: 650;
}

.pqr-ref-section-head p[b-js27uqh2vn] {
    max-inline-size: 72ch;
    margin: 6px 0 0;
    color: var(--ui-muted);
    font-size: 13px;
    line-height: 1.5;
}

.pqr-method-grid[b-js27uqh2vn] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
    gap: 12px;
}

.pqr-method-card[b-js27uqh2vn] {
    min-inline-size: 0;
    padding: 16px;
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-radius, 12px);
    background: var(--ui-surface);
    box-shadow: var(--ui-shadow-sm);
}

.pqr-method-top[b-js27uqh2vn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.pqr-method-top > span:last-child[b-js27uqh2vn] {
    color: var(--ui-muted);
    font-size: 11px;
    font-weight: 600;
    text-align: end;
}

.pqr-method-card h3[b-js27uqh2vn] {
    margin: 13px 0 7px;
    color: var(--ui-ink);
    font-size: 14px;
    font-weight: 650;
}

.pqr-method-card p[b-js27uqh2vn],
.pqr-method-card small[b-js27uqh2vn] {
    display: block;
    margin: 0;
    color: var(--ui-ink-2);
    font-size: 12.5px;
    line-height: 1.5;
}

.pqr-method-card small[b-js27uqh2vn] {
    margin-block-start: 10px;
    padding-block-start: 10px;
    border-block-start: 1px solid var(--ui-line);
    color: var(--ui-muted);
}
/* /Components/Pages/Console/Professions.razor.rz.scp.css */
/* Professions — recognised licence-category catalogue (PQR reference) screen.
   A pure reference view: left rail of professions + right pane of reference sections
   (titles / specialty-certificate tiers / accepted exams / experience rules) read from
   the seeded PQR tables. UI design-system tokens (--ui-*). RTL-ready via logical properties. */
.professions[b-xtku1m7h6k] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.professions-head[b-xtku1m7h6k] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.professions-title[b-xtku1m7h6k] {
    font-size: 22px;
    font-weight: 600;
    color: var(--ui-ink);
    margin: 0;
}

.professions-lede[b-xtku1m7h6k] {
    font-size: 13px;
    color: var(--ui-muted);
    margin: 0;
    max-inline-size: 82ch;
}

/* Two-pane layout: profession rail (search + selector) + active-profession reference detail. */
.professions-grid[b-xtku1m7h6k] {
    display: grid;
    grid-template-columns: minmax(220px, 280px) 1fr;
    gap: 16px;
    align-items: start;
}

/* Left rail: a raised surface panel (matches the cards on the right so it doesn't float bare on the
   page), sticky + viewport-capped. The search stays pinned at the top while the profession list
   below it scrolls internally — so the ~45-item catalogue never drives the page height. */
.professions-rail[b-xtku1m7h6k] {
    position: sticky;
    inset-block-start: 8px;
    max-block-size: calc(100vh - 132px);
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-block-size: 0;
    background: var(--ui-surface, var(--ui-surface));
    border: 1px solid var(--ui-line);
    border-radius: 8px;
    padding: 10px;
}

.professions-search[b-xtku1m7h6k] {
    flex: 0 0 auto;
}

.professions-selector[b-xtku1m7h6k] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow-y: auto;
    min-block-size: 0;
    padding-inline-end: 4px;
}

.professions-noresults[b-xtku1m7h6k] {
    padding: 10px 12px;
    margin: 0;
}

.profession-pick[b-xtku1m7h6k] {
    appearance: none;
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: flex-start;
    text-align: start;
    background: none;
    border: 0;
    border-inline-start: 2px solid transparent;
    padding: 10px 12px;
    font: inherit;
    color: var(--ui-ink-2);
    cursor: pointer;
    border-radius: 8px;
}

.profession-pick:hover[b-xtku1m7h6k] {
    background: var(--ui-surface-sunken); /* visible against the white rail panel */
    border-inline-start-color: var(--ui-line);
    color: var(--ui-ink);
}

.profession-pick:focus-visible[b-xtku1m7h6k] {
    outline: 2px solid var(--ui-accent);
    outline-offset: 1px;
}

.profession-pick.active[b-xtku1m7h6k] {
    border-inline-start-color: var(--ui-accent);
    background: var(--ui-accent-tint);
    color: var(--ui-accent);
    font-weight: 500;
}

.profession-pick-name[b-xtku1m7h6k] {
    font-size: 13.5px;
}

.profession-pick-count[b-xtku1m7h6k] {
    font-size: 11.5px;
    color: var(--ui-muted);
}

@media (max-width: 720px) {
    .professions-grid[b-xtku1m7h6k] {
        grid-template-columns: 1fr;
    }

    /* Single column: the rail stacks above the detail — drop the sticky viewport cap. */
    .professions-rail[b-xtku1m7h6k] {
        position: static;
        max-block-size: none;
    }

    .professions-selector[b-xtku1m7h6k] {
        overflow-y: visible;
    }
}

/* ── Right pane: reference detail ─────────────────────────────────────────────── */
.prof-ref-stack[b-xtku1m7h6k] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.professions-detail-head[b-xtku1m7h6k] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.professions-detail-title[b-xtku1m7h6k] {
    font-size: 20px;
    font-weight: 600;
    color: var(--ui-ink);
    margin: 0;
}

.professions-detail-lede[b-xtku1m7h6k] {
    margin: 0;
    max-inline-size: 82ch;
}

/* Section head inside each reference Card (title + optional sub + count). */
.prof-sec-head[b-xtku1m7h6k] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.prof-sec-title[b-xtku1m7h6k] {
    font-family: var(--font-ui);
    font-size: 16px;
    font-weight: 600;
    color: var(--ui-ink);
    margin: 0;
}

.prof-sec-sub[b-xtku1m7h6k] {
    margin: 2px 0 0;
    max-inline-size: 72ch;
}

.prof-title-name[b-xtku1m7h6k] {
    color: var(--ui-ink);
    font-weight: 600;
}

.prof-empty[b-xtku1m7h6k] {
    margin: 0;
    padding: 8px 4px;
}

/* Horizontal scroll for wide reference tables (long certificate names). */
.prof-table-scroll[b-xtku1m7h6k] {
    overflow-x: auto;
    max-inline-size: 100%;
}

/* The specialty-certificate table can run to a few hundred rows (174 for physician) — cap its
   height and let it scroll internally so the section stays a bounded, scannable reference block. */
.prof-cert-scroll[b-xtku1m7h6k] {
    max-block-size: 420px;
    overflow-y: auto;
}

.prof-cert-search[b-xtku1m7h6k] {
    inline-size: 320px;
    max-inline-size: 100%;
    margin-block-end: 12px;
}

.muted[b-xtku1m7h6k] {
    color: var(--ui-muted);
}

.small[b-xtku1m7h6k] {
    font-size: 12px;
}
/* /Components/Pages/Console/PsvQueue.razor.rz.scp.css */
/* PSV Queue — open verification work screen.
   Ported from the demo PSV-queue screen (mockup styles.css page-head + table). QB CLEAR
   tokens migrated to --ui-* (Task 5.8 re-skin). RTL-ready via logical inline properties. */
.psv[b-f19ld9qijp] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.psv-head[b-f19ld9qijp] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.psv-title[b-f19ld9qijp] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 22px;
    font-weight: 600;
    color: var(--ui-ink);
    margin: 0 0 6px;
}

.psv-lede[b-f19ld9qijp] {
    font-size: 13px;
    color: var(--ui-muted);
    margin: 0;
    max-inline-size: 60ch;
}

.psv-filters[b-f19ld9qijp] {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.psv-filter[b-f19ld9qijp] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.psv-filter-label[b-f19ld9qijp] {
    font-size: 11px;
    font-weight: 500;
    color: var(--ui-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Compact-width override for toolbar filter selects.
   ui-select sets width:100% — cap to auto for toolbar density while keeping
   all other ui-select tokens (border, bg, focus ring, font). */
.psv-select.ui-select[b-f19ld9qijp] {
    width: auto;
    min-inline-size: 160px;
    height: 32px;
    padding-block: 0;
    padding-inline: 8px 28px;
    font-size: 13px;
}


.psv-foot[b-f19ld9qijp] {
    display: block;
}

.muted[b-f19ld9qijp] {
    color: var(--ui-muted);
}

.small[b-f19ld9qijp] {
    font-size: 12px;
}
/* /Components/Pages/Login.razor.rz.scp.css */
/* /login — two-panel officer sign-in surface.
   Design: a white logo header + navy authority body on the left, the sign-in form on the right,
   inside a single rounded, softly-shadowed card. IBM Plex Sans throughout, the gold accent, flat inputs
   (the design-system form-field style), logical properties (RTL-ready). */

/* ── Fullscreen centering shell ────────────────────────────────────────── */
.login[b-y13e32gy8j] {
    display: grid;
    place-items: center;
    min-block-size: 100dvh;
    padding: 24px;
    background: var(--ui-surface-page, var(--ui-surface-page));
}

/* ── Two-panel card ─────────────────────────────────────────────────────── */
.login-card[b-y13e32gy8j] {
    display: grid;
    grid-template-columns: minmax(240px, 300px) 1fr;
    inline-size: min(760px, 100%);
    background: var(--ui-surface);
    border: 1px solid var(--ui-line, var(--ui-line));
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--ui-shadow-pop);
}

/* ── LEFT PANEL — white logo header + navy authority body ───────────────── */
.login-brand[b-y13e32gy8j] {
    background: var(--ui-inverse);
    color: var(--ui-on-fill);
    padding: 0;
    display: flex;
    flex-direction: column;
}

/* White header strip: the QB CLEAR logo reads on white (its real colour mark). */
.login-brand-top[b-y13e32gy8j] {
    flex: 0 0 auto;
    background: var(--ui-surface);
    padding: 22px 26px;
    border-block-end: 1px solid var(--ui-line, var(--ui-line));
}

.login-cobrand[b-y13e32gy8j] {
    display: inline-flex;
    background: transparent;
    padding: 0;
}

.login-qb-logo[b-y13e32gy8j] {
    display: block;
    block-size: 26px;
    inline-size: auto;
    align-self: flex-start;
    filter: var(--ui-logo-filter);
}

/* Navy body: accent rule + brand copy. */
.login-brand-mid[b-y13e32gy8j] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 30px 26px 0;
}

.login-accent-rule[b-y13e32gy8j] {
    inline-size: 28px;
    block-size: 3px;
    background: var(--ui-accent-fill);
    border-radius: 2px;
}

.login-brand-title[b-y13e32gy8j] {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: var(--ui-on-fill);
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.login-brand-sub[b-y13e32gy8j] {
    margin: 0;
    font-size: 13px;
    color: rgba(255, 255, 255, .60);
    line-height: 1.55;
}

.login-brand-foot[b-y13e32gy8j] {
    margin: 0;
    padding: 30px 26px;
    flex: 0 0 auto;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .38);
}

/* ── RIGHT PANEL — sign-in form ─────────────────────────────────────────── */
.login-form-panel[b-y13e32gy8j] {
    background: var(--ui-surface);
    padding: 40px 38px;
    display: flex;
    flex-direction: column;
}

.login-heading[b-y13e32gy8j] {
    margin: 0 0 6px;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--ui-ink, var(--ui-ink));
}

.login-lede[b-y13e32gy8j] {
    margin: 0 0 24px;
    font-size: 14px;
    color: var(--ui-muted, var(--ui-muted));
}

/* Auth-failure alert — a calm neutral notice (a wrong password is not a field error). */
.login-error[b-y13e32gy8j] {
    margin: 0 0 18px;
    padding: 12px 14px;
    border: 1px solid var(--ui-line-strong, var(--ui-line-strong));
    border-radius: 10px;
    background: var(--ui-surface, var(--ui-surface));
    color: var(--ui-ink, var(--ui-ink));
    font-size: 14px;
    font-weight: 600;
}

/* Form layout */
.login-form[b-y13e32gy8j] {
    display: grid;
    gap: 18px;
    flex: 1 0 auto;
}

.login-field[b-y13e32gy8j] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.login-label[b-y13e32gy8j] {
    font-size: 13px;
    font-weight: 500;
    color: var(--ui-ink, var(--ui-ink));
}

/* Flat box input — the design-system form-field style (solid border, no bevel). */
.login-input[b-y13e32gy8j] {
    inline-size: 100%;
    padding: 11px 14px;
    border: 1px solid var(--ui-line-strong, var(--ui-line-strong));
    border-radius: 8px;
    font: inherit;
    font-size: 14px;
    color: var(--ui-ink, var(--ui-ink));
    background: var(--ui-surface);
    outline: none;
    box-sizing: border-box;
    transition: border-color .15s, box-shadow .15s;
}

.login-input:hover[b-y13e32gy8j] {
    border-color: var(--ui-faint);
}

.login-input:focus[b-y13e32gy8j] {
    border-color: var(--ui-accent);
    box-shadow: 0 0 0 3px var(--ui-accent-ring);
}

/* Password field — input + eye toggle side-by-side */
.login-pwd-wrap[b-y13e32gy8j] {
    position: relative;
    display: flex;
    align-items: stretch;
}

.login-input--pwd[b-y13e32gy8j] {
    padding-inline-end: 44px;
}

.login-eye[b-y13e32gy8j] {
    position: absolute;
    inset-inline-end: 0;
    inset-block-start: 0;
    block-size: 100%;
    inline-size: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--ui-muted, var(--ui-muted));
    cursor: pointer;
    border-radius: 0 8px 8px 0;
    flex-shrink: 0;
    padding: 0;
}

.login-eye:hover[b-y13e32gy8j] {
    color: var(--ui-ink, var(--ui-ink));
}

.login-eye:focus-visible[b-y13e32gy8j] {
    outline: 2px solid var(--ui-accent);
    outline-offset: -2px;
}

.login-eye-icon[b-y13e32gy8j] {
    display: block;
    flex-shrink: 0;
}

/* Actions row */
.login-actions[b-y13e32gy8j] {
    margin-block-start: 4px;
}

/* Primary submit button — full width, the gold fill */
.login-btn-primary[b-y13e32gy8j] {
    display: block;
    inline-size: 100%;
    padding: 12px 16px;
    background: var(--ui-accent-fill);
    color: var(--ui-on-accent-fill);
    border: none;
    border-radius: 8px;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    transition: background .15s;
}

.login-btn-primary:hover[b-y13e32gy8j] {
    background: var(--ui-accent-fill-hover);
}

.login-btn-primary:focus-visible[b-y13e32gy8j] {
    outline: 2px solid var(--ui-accent);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--ui-accent-ring);
}

.login-btn-primary:active[b-y13e32gy8j] {
    background: var(--ui-accent-fill-hover);
}

/* Forgot-password link */
.login-link[b-y13e32gy8j] {
    margin-block-start: 18px;
    text-align: center;
    font-size: 14px;
    color: var(--ui-muted, var(--ui-muted));
}

.login-link a[b-y13e32gy8j] {
    color: var(--ui-accent);
    font-weight: 500;
    text-decoration: none;
}

.login-link a:hover[b-y13e32gy8j] {
    text-decoration: underline;
}

/* ── Responsive: ≤640px — single column ─────────────────────────────────── */
@media (max-width: 640px) {
    .login[b-y13e32gy8j] {
        padding: 0;
        place-items: start center;
    }

    .login-card[b-y13e32gy8j] {
        grid-template-columns: 1fr;
        inline-size: 100%;
        border-radius: 0;
        border: none;
        min-block-size: 100dvh;
        box-shadow: none;
    }

    /* Just the white logo header on top; hide the navy brand body + footer. */
    .login-brand[b-y13e32gy8j] {
        background: var(--ui-surface);
    }

    .login-brand-mid[b-y13e32gy8j],
    .login-brand-foot[b-y13e32gy8j] {
        display: none;
    }

    .login-form-panel[b-y13e32gy8j] {
        padding: 28px 22px 40px;
        flex: 1 1 auto;
    }
}
/* /Components/Shared/ApplicantCell.razor.rz.scp.css */
/* ApplicantCell — avatar + name + sub-line identity cell for queue/list tables.
   Canonical stretched-link: the <a> is the real link (keyboard, screen-reader,
   middle-click all use it). Its ::after is position:absolute; inset:0, which resolves
   to the nearest POSITIONED ancestor — the consuming page's row (each queue page sets
   `tr.apps-row { position: relative }`) — so the overlay covers exactly the row. The
   <a> itself stays position:static so ::after does NOT resolve to this cell. RTL-safe
   (inset:0 is symmetric). Elements below are all in this component's own markup, so no
   ::deep is needed. */
.applicant-cell[b-zupbwrh7pj] {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: inherit;
    /* NOT position:relative — that would make ::after resolve to this cell, not the row. */
}

.applicant-cell[b-zupbwrh7pj]::after {
    content: '';
    position: absolute;
    inset: 0;      /* resolves to the position:relative row — covers exactly the row */
    z-index: 0;    /* sits beneath the z-index:1 interactive cells in the row */
}

.ac-meta[b-zupbwrh7pj] {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.ac-name[b-zupbwrh7pj] {
    font-weight: 500;
    font-size: 13px;
    color: var(--ui-ink);
    line-height: 1.3;
}

.ac-sub[b-zupbwrh7pj] {
    font-size: 11.5px;
    color: var(--ui-muted);
    line-height: 1.3;
}
/* /Components/Shared/AuthCard.razor.rz.scp.css */
/* AuthCard — centred single-column brand card for the anonymous auth pages. Monochrome
   slate design system. The page body is rendered as ChildContent (consumer scope), so the
   shared body helpers (.auth-link/.auth-status/.auth-errors) + the submit button are reached
   via ::deep. */
.auth[b-w5ajw0i242] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 24px;
    background: var(--ui-canvas, var(--ui-surface-page));
}

.auth-card[b-w5ajw0i242] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    max-width: 400px;
    padding: 32px;
    background: var(--ui-surface);
    border: 1px solid var(--ui-line, var(--ui-line));
    border-radius: 12px;
}

.auth-logo[b-w5ajw0i242] {
    height: 26px;
    align-self: flex-start;
    margin-bottom: 4px;
    filter: var(--ui-logo-filter);
}

.auth-title[b-w5ajw0i242] {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: var(--ui-ink, var(--ui-ink));
}

.auth-sub[b-w5ajw0i242] {
    margin: 0;
    font-size: 13px;
    color: var(--ui-muted, var(--ui-muted));
}

/* Submit button (a Web.Ui <Button> in the consumer's ChildContent) aligns left. */
.auth-card[b-w5ajw0i242]  .ui-btn {
    align-self: flex-start;
    margin-top: 4px;
}

/* Consumer-scoped body helpers. */
.auth-card[b-w5ajw0i242]  .auth-status {
    margin: 0;
    font-size: 13px;
    color: var(--ui-ink, var(--ui-ink));
}

.auth-card[b-w5ajw0i242]  .auth-errors {
    margin: 0;
    padding-inline-start: 18px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ui-ink, var(--ui-ink));
}

.auth-card[b-w5ajw0i242]  .auth-link {
    margin: 4px 0 0;
    font-size: 13px;
}

.auth-card[b-w5ajw0i242]  .auth-link a {
    color: var(--ui-accent, var(--ui-accent));
    text-decoration: none;
}

.auth-card[b-w5ajw0i242]  .auth-link a:hover {
    text-decoration: underline;
}