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

/* /Components/Layout/ConsoleLayout.razor.rz.scp.css */
/* ConsoleLayout — authenticated console shell.
   A header band spans both columns over the navy command-rail + the light
   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;
}

/* 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, #E2E8F0);
}

/* Sidebar tag/foot content (the Sidebar primitive provides the containers). */
.st-dot[b-pafd9sunu5] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #2563EB;
    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: #1F9D5B;
    flex-shrink: 0;
}

.sf-version[b-pafd9sunu5] {
    margin-block-start: 4px;
    font-size: 10.5px;
    color: #94A3B8;
}

/* ── 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 #2563EB;
        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 slate wash (allowed: 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: rgba(15, 23, 42, .4); /* slate-900 @ 40% */
        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, #0F172A);
}

.account-pw-lede[b-s31c10zq7x] {
    margin: 4px 0 0;
    color: var(--ui-muted, #64748B);
    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, #E2E8F0);
    border-radius: 8px;
    background: var(--ui-surface, #fff);
    color: var(--ui-ink, #0F172A);
    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, #E2E8F0);
    border-radius: 8px;
    background: var(--ui-surface, #fff);
    color: var(--ui-danger, #DC2626);
    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, #0F172A);
}

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

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

/* 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, #E2E8F0);
    border-radius: 8px;
    background: var(--ui-surface, #fff);
    color: var(--ui-ink, #0F172A);
    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, #2563EB);
}

.prefs-seg.is-active[b-vtsej3dmyl] {
    background: var(--ui-accent, #2563EB);
    border-color: var(--ui-accent, #2563EB);
    color: #fff;
}

.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, #0F172A);
}

/* /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);
    border-color: var(--ui-accent);
    color: #fff;
}

.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-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, #E2E8F0);
    border-radius: 8px;
    background: var(--ui-surface, #fff);
    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 rgba(37, 99, 235, 0.12);
}

.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: 'JetBrains Mono', ui-monospace, Menlo, monospace;
}

.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.
   Monochrome slate design system (--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-ink);
    background: var(--ui-ink);
    color: #fff;
}

@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); /* slate-300 */
    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: slate-50 fill (the B3 recipe — hover fill, accent only on dragover). */
.intake-dropzone:hover[b-pd9uz3xgaz] {
    background: var(--ui-surface-page); /* slate-50 */
}

/* 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;
    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.
*/
.intake-dropzone__file-input[b-pd9uz3xgaz] {
    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;
}

.intake-dropzone__browse-label[b-pd9uz3xgaz] {
    pointer-events: auto;
}

/* ── 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, monochrome (slate), 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-neutral slate, never red (monochrome palette). */
.intake-error[b-pd9uz3xgaz] {
    margin: 8px 0;
    color: var(--ui-ink);
    font-weight: 600;
}
/* /Components/Pages/Console/ApplicantDetail.razor.rz.scp.css */
/* Applicant detail — case-file screen.
   Monochrome re-skin (Phase 5, Task 5.4): slate ramp + #2563EB accent only.
   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, #F8FAFC);
    border: 1px solid var(--ui-line);
    border-radius: 6px;
}

/* Header card. */
.applicant-head[b-9xytkwcdpr] {
    display: flex;
    gap: 22px;
    align-items: center;
    padding: 4px;
}

.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: 6px;
}

.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;
}

.ah-sub[b-9xytkwcdpr] {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    font-size: 12.5px;
    color: var(--ui-muted);
    margin-block-end: 14px;
}

.ah-sub strong[b-9xytkwcdpr] {
    color: var(--ui-ink-2);
    font-weight: 500;
    margin-inline-end: 4px;
}

.ah-stats[b-9xytkwcdpr] {
    display: flex;
    gap: 32px;
    padding-block-start: 16px;
    border-block-start: 1px solid var(--ui-line);
    flex-wrap: wrap;
}

.ah-stats > div[b-9xytkwcdpr] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ah-stat[b-9xytkwcdpr] {
    font-size: 18px;
    font-weight: 600;
    color: var(--ui-ink);
    font-variant-numeric: tabular-nums;
}

/* Case workspace navigation. On desktop every destination shares the available width, so the
   browser never creates the awkward nested vertical scrollbar that overflow-x:auto produced.
   The selected surface is a quiet accent tint inside the same bordered, rounded language as
   cards and filter controls elsewhere in the console. */
.applicant-subnav[b-9xytkwcdpr] {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 4px;
    overflow: hidden;
    padding: 4px;
    border: 1px solid var(--ui-line);
    border-radius: 10px;
    background: var(--ui-surface);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .035);
}

.applicant-subnav .ui-tab[b-9xytkwcdpr] {
    min-inline-size: 0;
    margin: 0;
    padding: 9px 8px;
    border: 0;
    border-radius: 7px;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    line-height: 1.25;
}

.applicant-subnav .ui-tab:hover[b-9xytkwcdpr] {
    background: var(--ui-surface-page);
    color: var(--ui-ink);
}

.applicant-subnav .ui-tab.is-active[b-9xytkwcdpr] {
    border: 0;
    background: color-mix(in srgb, var(--ui-accent) 10%, var(--ui-surface));
    color: var(--ui-accent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ui-accent) 22%, transparent);
}

/* 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;
    }

    /* Stats row: reduce gap so the flex items wrap earlier and cleanly. */
    .ah-stats[b-9xytkwcdpr] {
        gap: 16px;
    }

    /* Sub-fields row: tighten gap at tablet. */
    .ah-sub[b-9xytkwcdpr] {
        gap: 10px;
    }

    .applicant-subnav[b-9xytkwcdpr] {
        display: flex;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: thin;
    }

    .applicant-subnav .ui-tab[b-9xytkwcdpr] {
        flex: 0 0 auto;
        min-inline-size: 118px;
    }
}

@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;
    }

    /* Stats: each stat takes full width as a row. */
    .ah-stats[b-9xytkwcdpr] {
        flex-direction: column;
        gap: 12px;
    }
}
/* /Components/Pages/Console/Applications.razor.rz.scp.css */
/* Applications list — officer console list screen.
   Monochrome re-skin (Phase 5, Task 5.3): slate ramp + #2563EB accent only.
   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. */
.page-head[b-b29ps4vian] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
}

.h1[b-b29ps4vian] {
    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-b29ps4vian] {
    font-size: 14px;
    color: var(--ui-muted);
    margin: 0;
    max-inline-size: 760px;
}

/* Unified filter surface: stage choices read as compact selectable filters, while the
   search/facets sit in a distinct second row. This avoids the old eight-item underline tab
   strip competing with the page navigation and makes every active constraint visible. */
.apps-controls[b-b29ps4vian] {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--ui-line);
    border-radius: 10px;
    background: var(--ui-surface);
    overflow: hidden;
}

.apps-control-row[b-b29ps4vian] {
    display: grid;
    grid-template-columns: minmax(150px, 190px) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
    padding: 14px 16px;
    border-block-end: 1px solid var(--ui-line);
}

.apps-control-label[b-b29ps4vian] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-block-start: 5px;
}

.apps-stage-tabs[b-b29ps4vian] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.apps-stage-tab[b-b29ps4vian] {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-block-size: 32px;
    padding: 5px 9px;
    border: 1px solid var(--ui-line);
    border-radius: 8px;
    background: var(--ui-surface);
    color: var(--ui-muted);
    font: inherit;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
}

.apps-stage-tab:hover[b-b29ps4vian] {
    border-color: var(--ui-line-strong);
    background: var(--ui-surface-page);
    color: var(--ui-ink-2);
}

.apps-stage-tab.is-active[b-b29ps4vian] {
    border-color: color-mix(in srgb, var(--ui-accent) 45%, var(--ui-line));
    background: var(--ui-accent-tint);
    color: var(--ui-accent);
}

.apps-stage-tab .ui-tab__count[b-b29ps4vian] {
    margin: 0;
}

/* Toolbar filters — single flex row (wraps below 1024px per the shared
   .filter-grp/.filter-grp.end + @media rules below); RTL-safe logical
   properties throughout. */
.toolbar[b-b29ps4vian] {
    display: grid;
    grid-template-columns: minmax(240px, 320px) minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
}

.filter-grp[b-b29ps4vian] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.apps-facets[b-b29ps4vian] {
    display: grid;
    grid-template-columns: repeat(4, minmax(120px, 1fr));
    align-items: end;
}

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

.filter[b-b29ps4vian] {
    display: grid;
    align-items: stretch;
    gap: 5px;
    font-size: 12px;
    color: var(--ui-muted);
}

.apps-filter-label[b-b29ps4vian],
.filter > span[b-b29ps4vian] {
    display: block;
    margin-block-end: 5px;
    font-size: 11px;
    font-weight: 600;
    color: var(--ui-muted);
}

/* Compact-width override for native selects inside the toolbar filter labels.
   The ui-select class sets width:100% (good for form fields); here we cap to auto
   for toolbar density while keeping all other ui-select tokens (border, bg, focus ring). */
.filter select.ui-select[b-b29ps4vian] {
    width: 100%;
    height: 34px;
    padding-block: 0;
    padding-inline: 8px 28px;
    font-size: 12px;
}

/* Search box sizing for the toolbar — ui-searchbox__input is full-width by default. */
.apps-search .ui-searchbox[b-b29ps4vian] {
    inline-size: 100%;
    max-inline-size: 100%;
}

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

.apps-active-filters[b-b29ps4vian] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    padding: 10px 16px;
    border-block-start: 1px solid var(--ui-line);
    background: var(--ui-surface-page);
}

/* Horizontal-scroll shell for the wide 8-column table. Its intrinsic content
   min-width (long applicant names, titles, pathway chips) can exceed the page
   width; without this the whole table overflowed the shell (which clips with
   overflow-x:hidden), cutting the last "Credentialing specialist" column. The
   scroll box keeps the overflow local — the table scrolls inside its own card
   instead of being clipped. On mobile the ui-table--stack layout takes over
   (rows become cards) so there's 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: #EFF6FF; /* blue-50, slightly warmer than slate-50 to telegraph 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] .stage {
    position: relative;
    z-index: 1;
}

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

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

/* ── Stage column ────────────────────────────────────────────────────────────
   Stage is a label + a subtle mini progress strip (aria-hidden). The strip is
   intentional — it gives a quick at-a-glance position sense — kept compact
   (4px × 44px) so it reads as an accent mark rather than a progress bar UI.
   The label and bar stack vertically: label on top, bar below. */

[b-b29ps4vian] .stage {
    display: inline-flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
}

[b-b29ps4vian] .stage-label {
    font-size: 12.5px;
    color: var(--ui-ink-2);
    white-space: nowrap;
}

[b-b29ps4vian] .stage-bar {
    block-size: 4px;
    border-radius: 99px;
    background: var(--ui-line);
    inline-size: 44px;
    overflow: hidden;
}

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

/* ── 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 (Task A5) lays out predictably. The applicant cell is the
   widest; days-in-progress is narrow (numeric, .num). Sums to 104% by
   design — table-layout is the browser default (auto), so columns still
   share the remaining space proportionally; no column collapses. */

[b-b29ps4vian] .apps thead .td-applicant { inline-size: 22%; }
[b-b29ps4vian] .apps thead .td-title     { inline-size: 16%; }
[b-b29ps4vian] .apps thead .td-hospital  { inline-size: 14%; }
[b-b29ps4vian] .apps thead .td-pathway   { inline-size: 10%; }
[b-b29ps4vian] .apps thead .td-stage     { inline-size: 10%; }
[b-b29ps4vian] .apps thead .td-verif     { inline-size: 12%; }
[b-b29ps4vian] .apps thead .td-days      { inline-size: 8%; white-space: nowrap; }
[b-b29ps4vian] .apps thead .td-specialist{ inline-size: 12%; }

/* 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; }
[b-b29ps4vian] .apps tbody .td-specialist{ color: var(--ui-muted); font-size: 12.5px; }
[b-b29ps4vian] .apps tbody .td-hospital  { 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, #fff);
    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: #F1F5F9;
}

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

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

.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 (Task 7.3) ────────────────────────────────────────────
   Breakpoints (8px rhythm):
     ≤768px (md) — page-head stacks; toolbar fills full width; search box expands.
     ≤560px      — filter groups stack vertically, search box full width.
   Tabs already have overflow-x: auto — no extra change needed.
   Desktop (>768px) layout is unchanged. */

@media (max-width: 768px) {
    /* Page-head: h1 block + action stack vertically. */
    .page-head[b-b29ps4vian] {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    /* Toolbar: allow filter groups to fill the width and wrap. */
    .toolbar[b-b29ps4vian] {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .filter-grp[b-b29ps4vian] {
        flex-wrap: wrap;
    }

    .apps-control-row[b-b29ps4vian] {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .apps-facets[b-b29ps4vian] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Trailing group: cancel the auto margin so it sits in normal flow. */
    .filter-grp.end[b-b29ps4vian] {
        margin-inline-start: 0;
    }

    /* Search box: expand to full container width at tablet. */
    .apps-search .ui-searchbox[b-b29ps4vian] {
        inline-size: 100%;
    }
}

@media (max-width: 560px) {
    /* Filter labels + selects: stack each filter on its own row. */
    .filter[b-b29ps4vian] {
        flex-direction: column;
        align-items: flex-start;
    }

    .filter select.ui-select[b-b29ps4vian] {
        width: 100%;
    }

    .apps-facets[b-b29ps4vian] {
        grid-template-columns: 1fr;
    }
}
/* /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: monochrome slate + #2563EB accent. 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, #0F172A);
    margin: 0;
}

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

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

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

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

.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;
}

.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 accent-blue —
   tone now carries the only hierarchy, as the code-behind promises. */
.kpi-tile[b-weu2ettocj]  .kpi {
    border-radius: 10px;
    box-shadow: 0 1px 2px 0 rgb(15 23 42 / 0.05);
}

.kpi-tile[b-weu2ettocj]  .kpi::before {
    background: transparent;
}

/* tone-action (awaiting confirmation) + tone-good (eligible): accent blue rail. */
.kpi-tile.tone-action[b-weu2ettocj]  .kpi::before,
.kpi-tile.tone-good[b-weu2ettocj]  .kpi::before {
    background: #2563EB;
}

/* tone-alert: needs-attention — slate-700 rail when non-zero (no amber/red). */
.kpi-tile.tone-alert[b-weu2ettocj]  .kpi::before {
    background: var(--ui-ink-2, #334155);
}

/* ── 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, #E2E8F0);
}

.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, #64748B);
}

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

/* ── Review queue — the cockpit hero ─────────────────────────────────────── */
.review-queue[b-weu2ettocj] {
    display: flex;
    flex-direction: column;
}

.rq-list[b-weu2ettocj] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.rq-row[b-weu2ettocj] {
    border-block-end: 1px solid var(--ui-line, #E2E8F0);
    border-inline-start: 3px solid transparent;
}

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

/* Awaiting-confirmation rows: accent-blue left rail + accent tint fill. */
.rq-row.is-action[b-weu2ettocj] {
    border-inline-start-color: #2563EB;
    background: #EFF6FF;
}

/* Overdue rows: slate-300 left rail (no amber). */
.rq-row.is-overdue[b-weu2ettocj] {
    border-inline-start-color: var(--ui-line-strong, #CBD5E1);
}

/* Compact data-grid density: 44px rows (32px avatar + 6px block padding), name + state
   chips on ONE line. minmax(0,…) on the applicant track so the name can ellipsize
   instead of imposing its min-content width on the grid. */
.rq-row-link[b-weu2ettocj] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 12px;
    min-block-size: 44px;
    padding: 6px 16px;
    text-decoration: none;
    color: inherit;
}

.rq-row-link:hover[b-weu2ettocj] {
    background: #F8FAFC;
}

.rq-row.is-action .rq-row-link:hover[b-weu2ettocj] {
    background: #EFF6FF;
}

.rq-row-link:focus-visible[b-weu2ettocj] {
    outline: 2px solid #2563EB;
    outline-offset: -2px;
}

.rq-avatar[b-weu2ettocj] {
    flex: 0 0 32px;
}

/* Single line: name + state chips side by side; the name yields (ellipsis) first. */
.rq-applicant[b-weu2ettocj] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-inline-size: 0;
}

.rq-who[b-weu2ettocj] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-inline-size: 0;
}

/* "Applying for <title>" triage subline under the applicant name. */
.rq-title[b-weu2ettocj] {
    font-size: 11.5px;
    color: var(--ui-muted, #64748B);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.rq-name[b-weu2ettocj] {
    font-weight: 600;
    color: var(--ui-ink, #0F172A);
    font-size: 14px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.rq-waited[b-weu2ettocj] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    font-size: 12.5px;
    color: var(--ui-muted, #64748B);
    white-space: nowrap;
}

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

/* Overdue wait count in slate-700, not amber. */
.rq-waited.overdue .rq-waited-num[b-weu2ettocj] {
    color: var(--ui-ink-2, #334155);
}

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

.rq-go[b-weu2ettocj] {
    color: var(--ui-muted, #64748B);
    font-size: 20px;
    font-weight: 300;
}

.rq-row-link:hover .rq-go[b-weu2ettocj] {
    color: #2563EB;
}

/* 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: #EFF6FF;
    color: #2563EB;
    font-size: 22px;
    font-weight: 700;
}

.rq-empty-title[b-weu2ettocj] {
    font-weight: 600;
    color: var(--ui-ink, #0F172A);
    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: slate-300 track, accent-blue leading edge. */
.dash-spinner[b-weu2ettocj] {
    inline-size: 18px;
    block-size: 18px;
    border-radius: 50%;
    border: 2px solid var(--ui-line-strong, #CBD5E1);
    border-block-start-color: #2563EB;
    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 slate 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, #E2E8F0);
    color: var(--ui-ink, #0F172A);
    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;
}

/* 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).
   Slate ramp from ink through muted, then accent for the final decided band. */
.elig-funnel[b-weu2ettocj] {
    /* Slate-900 → slate-700 → slate-500 → slate-400 → slate-300 → accent blue */
    --funnel-0: #0F172A;
    --funnel-1: #334155;
    --funnel-2: #64748B;
    --funnel-3: #94A3B8;
    --funnel-4: #CBD5E1;
    --funnel-5: #2563EB;
    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, #2563EB);
    stroke: #FFFFFF;
    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, #334155);
}

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

.elig-funnel-num[b-weu2ettocj] {
    color: var(--ui-muted, #64748B);
    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, #334155);
}

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

/* Accent bar: flat #2563EB (the ExamEquivalency criterion). */
.funnel-row .bar.accent[b-weu2ettocj] {
    background: #2563EB;
}

.funnel-row .num[b-weu2ettocj] {
    color: var(--ui-muted, #64748B);
    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, #E2E8F0);
}

.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, #0F172A);
    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, #64748B);
    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, #334155);
    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: #2563EB;
    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);
    }
}

/* Down to 375px: the queue row keeps applicant + state legible by letting the state
   chips wrap under the name and the wait column wrap under, tightening the row padding. */
@media (max-width: 480px) {
    .rq-row-link[b-weu2ettocj] {
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: 8px;
        padding: 8px 12px;
    }

    .rq-applicant[b-weu2ettocj] {
        flex-wrap: wrap;
        row-gap: 2px;
    }

    .rq-waited[b-weu2ettocj] {
        grid-column: 2 / -1;
        flex-direction: row;
        align-items: center;
        gap: 8px;
        justify-content: flex-start;
    }

    .rq-go[b-weu2ettocj] {
        grid-row: 1;
    }
}

/* 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: #64748B;
    margin-block-end: 4px;
}

/* Edge-case "Suggested action" line (mockup) — quiet accent guidance copy. */
.edge-action[b-weu2ettocj] {
    margin-block-start: 3px;
    font-size: 11.5px;
    color: #2563EB;
}

/* Quiet exit under the review queue. */
.rq-foot[b-weu2ettocj] {
    padding-block-start: 8px;
    border-block-start: 1px solid var(--ui-line, #E2E8F0);
    margin-block-start: 8px;
}

.rq-viewall[b-weu2ettocj] {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ui-accent, #2563EB);
    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, #2563EB);
}
/* /Components/Pages/Console/Detail/ConsistencyAlertStrip.razor.rz.scp.css */
/* Cross-document consistency alert strip (Phase 5) — officer guidance banner.
   Re-themed to slate + #2563EB monochrome system (Task 2.3b).
   Monochrome: no amber/orange — slate-50 bg + slate-200 border, meaning via label + icon. */

.consistency-strip[b-phf6agfaqv] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
    padding: 16px;
    background: #F8FAFC; /* slate-50 */
    border: 1px solid #E2E8F0; /* slate-200 */
    border-radius: 8px;
}

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

.consistency-strip-title[b-phf6agfaqv] {
    font-weight: 700;
    color: #0F172A; /* slate-900 */
}

.consistency-strip-sub[b-phf6agfaqv] {
    font-size: 0.82rem;
    color: #64748B; /* slate-500 */
}

.consistency-item[b-phf6agfaqv] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 12px;
    background: #FFFFFF;
    border: 1px solid #E2E8F0; /* slate-200 */
    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: #0F172A; /* slate-900 */
}

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

.consistency-item-values li[b-phf6agfaqv] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 0.88rem;
}

.consistency-value-doc[b-phf6agfaqv] {
    color: #64748B; /* slate-500 */
    font-weight: 600;
}

.consistency-value-eq[b-phf6agfaqv] {
    color: #94A3B8; /* slate-400 */
}

.consistency-value-text[b-phf6agfaqv] {
    color: #0F172A; /* slate-900 */
}

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

.consistency-ack-btn[b-phf6agfaqv] {
    padding: 6px 14px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #0F172A;             /* slate-900 */
    background: #FFFFFF;
    border: 1px solid #CBD5E1; /* slate-300 */
    border-radius: 99px;
    cursor: pointer;
}

.consistency-ack-btn:hover:not([disabled])[b-phf6agfaqv] {
    background: #F8FAFC; /* slate-50 */
}

.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: #64748B; /* slate-500 */
}
/* /Components/Pages/Console/Detail/DocumentsPane.razor.rz.scp.css */
/*
    Scoped styles for the applicant-detail Documents pane.
    Monochrome re-skin (Phase 5, Task 5.5): the slate ramp + the single #2563EB accent only —
    every old navy/teal/brass token (--primary / --accent / --accent-2 / --info / --teal-bg /
    --success / --warn / --surface-2/3) and every hardcoded paper/ink colour is replaced by the
    namespaced --ui-* tokens (or #fff / a slate tint). NO green / amber / red / teal remains:
    status on the OCR boxes, artifact markers and validation list is carried by weight + label +
    a slate/accent tint, never by hue. Flat 1px borders, 8px rhythm, no heavy drop shadows.
    Spacing uses logical (inline/block) properties so the pane mirrors under RTL. ::deep reaches
    the markup the composed Table/TableRow/TableCell/ProvenanceChip primitives emit.
*/

.docs-layout[b-3ddcufioju] {
    display: grid;
    grid-template-columns: clamp(220px, 24%, 300px) minmax(0, 1fr);
    min-block-size: 560px;
}

[b-3ddcufioju] [data-testid="docs-add-provided"] {
    margin-block-end: 16px;
}

/* Left — document list */
.docs-list[b-3ddcufioju] {
    border-inline-end: 1px solid var(--ui-line);
    background: #F1F5F9;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    overflow: auto;
}

.docs-list-head[b-3ddcufioju] {
    padding: 4px 4px 12px;
    border-block-end: 1px solid var(--ui-line);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.doc-li[b-3ddcufioju] {
    display: block;
    text-align: start;
    inline-size: 100%;
    padding: 12px;
    background: var(--ui-surface);
    border: 1px solid var(--ui-line);
    border-radius: 8px;
    cursor: pointer;
}

.doc-li:hover[b-3ddcufioju] {
    background: #F1F5F9;
}

.doc-li.active[b-3ddcufioju] {
    background: var(--ui-accent-tint);
    border-color: color-mix(in srgb, var(--ui-accent) 35%, var(--ui-line));
    box-shadow: inset 3px 0 0 var(--ui-accent);
}

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

.doc-li-title[b-3ddcufioju] {
    font-weight: 600;
    font-size: 13px;
    color: var(--ui-ink);
    line-height: 1.3;
    margin-block-end: 4px;
}

.doc-li-meta[b-3ddcufioju] {
    font-size: 11.5px;
    color: var(--ui-muted);
    margin-block-end: 6px;
}

.doc-li-chips[b-3ddcufioju] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

/* Right — selected document detail */
.docs-detail[b-3ddcufioju] {
    display: flex;
    flex-direction: column;
    min-inline-size: 0;
    container-name: document-detail;
    container-type: inline-size;
}

.docs-head[b-3ddcufioju] {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 16px;
    align-items: center;
    padding: 16px 24px;
    border-block-end: 1px solid var(--ui-line);
    background: var(--ui-surface);
}

.docs-head .h2[b-3ddcufioju] {
    margin: 2px 0 0;
    font-size: 16px;
    color: var(--ui-ink);
}

.docs-meta[b-3ddcufioju] {
    display: flex;
    gap: 12px 20px;
    align-items: center;
    /* Wrap so the confidence pills / Captured date aren't pushed off-screen and clipped
       on a narrow panel. */
    flex-wrap: wrap;
}

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

.dm > span:last-child[b-3ddcufioju] {
    font-size: 13px;
    color: var(--ui-ink);
}

.docs-actions[b-3ddcufioju] {
    display: flex;
    gap: 8px;
    align-items: center;
    /* Wrap so Re-capture / Delete / Confirm-split stay reachable instead of clipping. */
    flex-wrap: wrap;
    row-gap: 8px;
}

/* Detected-type meta cell — the kind chip + its officer-only classification ConfPill, inline. */
.dm-kind[b-3ddcufioju] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Split-confidence cluster beside the Confirm-split action (officer-only). */
.docs-split-conf[b-3ddcufioju] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

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

.docs-grid[b-3ddcufioju] {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(340px, .8fr);
    gap: 0;
    flex: 1;
    min-block-size: 0;
}

/* The pane sits beside the console sidebar and document list, so viewport breakpoints alone do
   not describe the space it actually receives. Stack the scan and fields whenever this detail
   container becomes too narrow for two genuinely readable columns. */
@container document-detail (max-width: 900px) {
    .docs-grid[b-3ddcufioju] {
        grid-template-columns: 1fr;
    }

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

/* Phone/tablet: the scan-canvas | extracted-fields split can't sit side by side —
   stack it so each half gets the full width. */
@media (max-width: 768px) {
    .docs-grid[b-3ddcufioju] {
        grid-template-columns: 1fr;
    }

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

/* Scan canvas */
.docs-canvas[b-3ddcufioju] {
    background: var(--ui-surface-page);
    border-inline-end: 1px solid var(--ui-line);
    display: flex;
    flex-direction: column;
}

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

.scan-tools[b-3ddcufioju] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.scan-tab[b-3ddcufioju] {
    padding: 5px 10px;
    font-size: 12px;
    color: var(--ui-muted);
    border-radius: 6px;
}

.scan-tab.active[b-3ddcufioju] {
    background: var(--ui-surface);
    color: var(--ui-ink);
    font-weight: 500;
}

/* Multi-page switcher (Phase 3) — sits between the tabs and the zoom in the scan toolbar. */
.scan-pager[b-3ddcufioju] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.scan-pager-label[b-3ddcufioju] {
    color: var(--ui-muted);
    min-inline-size: 5.5rem;
    text-align: center;
}

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

.scan-doc[b-3ddcufioju] {
    inline-size: 100%;
    max-inline-size: 640px;
    background: var(--ui-surface);
    border: 1px solid var(--ui-line);
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    padding: 38px 44px;
    color: var(--ui-ink);
    line-height: 1.5;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

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

.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;
}

/* Captured-field bounding boxes — the extraction is unconfirmed, so the resting box reads as a
   quiet slate rectangle; hover/focus promotes it to the #2563EB accent (status by weight, not hue). */
.ocr-box[b-3ddcufioju] {
    position: relative;
    display: inline-block;
    inline-size: fit-content;
    outline: 1.5px dashed var(--ui-line-strong);
    outline-offset: 2px;
    border-radius: 2px;
    background: color-mix(in srgb, var(--ui-ink) 6%, transparent);
    padding: 0 2px;
    cursor: pointer;
}

.ocr-box[b-3ddcufioju]::before {
    content: attr(data-label);
    position: absolute;
    inset-block-start: -15px;
    inset-inline-start: -3px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    background: var(--ui-ink);
    color: #fff;
    padding: 1px 5px;
    border-radius: 3px;
    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] {
    outline-color: var(--ui-accent);
    outline-width: 2px;
    background: color-mix(in srgb, var(--ui-accent) 14%, transparent);
    z-index: 5;
}

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

/* ── Design B: real scan + bounding-box overlay ───────────────────────────────────────
   The actual uploaded image with each captured field drawn as a rectangle positioned by
   its real normalised coords. .ocr-box.is-positioned RE-bases the resting inline box as an
   absolute rectangle on the image (the left/top/width/height come from the element's inline
   style); it keeps the slate outline + numbered ::before tab and inherits the shared
   :hover/.is-focus accent promotion (so field <-> box highlighting still reads). */
.scan-image[b-3ddcufioju] {
    position: relative;
    inline-size: 100%;
    max-inline-size: 640px;
    line-height: 0;
    border: 1px solid var(--ui-line);
    border-radius: 8px;
    /* overflow stays VISIBLE (not hidden): a box/marker whose X2 is near 1.0 carries a label tab
       that sits just outside the box, and hidden would clip it. The image keeps its own rounded
       corners via its own border-radius, so dropping the clip here costs nothing visually. */
    overflow: visible;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    background: #fff;
}

.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;
    /* Visible so a marker's label tab near the right/top edge is not clipped by the overlay box. */
    overflow: visible;
}

/* Full-screen document reading surface. The image and optional overlay transform together so
   zoom/pan never disconnect a label from its source region. */
.docs-viewer[b-3ddcufioju] {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    background: #0F172A;
    color: #fff;
}

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

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

.docs-viewer-stage[b-3ddcufioju] {
    min-block-size: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: #0F172A;
}

.docs-viewer-image[b-3ddcufioju] {
    /* The rendered image, rather than a fixed-width wrapper, defines the coordinate space.
       A fixed 900px wrapper plus object-fit:contain letterboxed portrait scans while the
       absolutely-positioned overlay still covered all 900px, shifting every box. Grid puts
       the raster and overlay in the exact same track after the image's width/height limits
       have resolved, so normalised coordinates remain correct at every aspect ratio. */
    display: grid;
    inline-size: auto;
    max-inline-size: calc(100vw - 48px);
    max-block-size: calc(100vh - 116px);
    transform-origin: center;
    transition: transform .12s ease-out;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .35);
}

.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;
}

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

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

/* ── Artifact markers (Document artifacts) ─────────────────────────────────────────────
   A DISTINCT visual language from the dashed text-field boxes — WITHOUT a second hue: a solid,
   heavier slate-900 (ink) outline with a small always-on type label (data-label) at the top-left.
   Shares the .ocr-box.is-positioned geometry (absolute, positioned by inline left/top/width/height)
   and the JS .is-focus hook. Hover promotes to the accent like every other box. */
/* Artifact TYPE-COLOUR palette (spec §5.1) — the design system's single sanctioned
   categorical exception (status stays monochrome; these code visual artifact KINDS).
   The --art custom property drives outline, tint, label and thumbnail chips alike. */
.ocr-artifact[data-kind="signature"][b-3ddcufioju] { --art: #8B5CF6; }
.ocr-artifact[data-kind="seal"][b-3ddcufioju]      { --art: #F59E0B; }
.ocr-artifact[data-kind="stamp"][b-3ddcufioju]     { --art: #F43F5E; }
.ocr-artifact[data-kind="photo"][b-3ddcufioju]     { --art: #06B6D4; }
.ocr-artifact[data-kind="logo"][b-3ddcufioju]      { --art: #64748B; }
.ocr-artifact[data-kind="chart"][b-3ddcufioju]     { --art: #14B8A6; }
.ocr-artifact[data-kind="other"][b-3ddcufioju]     { --art: #9CA3AF; }

.ocr-box.ocr-artifact[b-3ddcufioju] {
    outline-color: var(--art, #64748B);
    outline-width: 1.5px;
    background: color-mix(in srgb, var(--art, #64748B) 8%, transparent);
}

/* Replace the numeric ::before tab with the artifact TYPE label, kept visible at rest. */
.ocr-box.ocr-artifact[b-3ddcufioju]::before {
    content: attr(data-label);
    background: var(--art, #64748B);
    opacity: .95;
}

/* Hover / keyboard / JS cross-highlight DEEPEN the same type colour — the hue itself is
   the information, so focus never re-colours to the accent. */
.ocr-box.ocr-artifact:hover[b-3ddcufioju],
.ocr-box.ocr-artifact:focus-within[b-3ddcufioju],
.ocr-box.ocr-artifact.is-focus[b-3ddcufioju] {
    outline-color: var(--art, #64748B);
    outline-width: 2px;
    background: color-mix(in srgb, var(--art, #64748B) 16%, transparent);
}

.ocr-box.ocr-artifact:hover[b-3ddcufioju]::before,
.ocr-box.ocr-artifact:focus-within[b-3ddcufioju]::before,
.ocr-box.ocr-artifact.is-focus[b-3ddcufioju]::before {
    background: var(--art, #64748B);
}

.ocr-box.is-positioned[b-3ddcufioju] {
    position: absolute;
    display: block;
    inline-size: auto;
    padding: 0;
    outline-offset: 0;
    /* A semi-transparent fill + a solid (not dashed) outline reads more clearly than the
       resting dashed box once it sits over a real scan rather than a blank canvas. */
    outline-style: solid;
    outline-width: 1.5px;
    background: color-mix(in srgb, var(--ui-ink) 10%, transparent);
}

/* Labels sit ABOVE the source region and appear only while the corresponding box/field is in
   focus. This preserves the document's legibility while keeping the field-to-source link close. */
.ocr-box.is-positioned[b-3ddcufioju]::before {
    inset-block-start: -4px;
    inset-inline-start: 0;
    max-inline-size: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    transform: translateY(-100%);
    pointer-events: none;
    opacity: 0;
}

.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 {
    opacity: .96;
}

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

/* Structured-fields / validation / raw-OCR panel */
.docs-panel[b-3ddcufioju] {
    padding: 20px;
    overflow: auto;
    background: var(--ui-surface);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.dp-block[b-3ddcufioju] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dp-title[b-3ddcufioju] {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--ui-muted);
    font-weight: 600;
    padding-block-end: 6px;
    border-block-end: 1px solid var(--ui-line);
}

[b-3ddcufioju] .dp-fields {
    inline-size: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 12.5px;
}

[b-3ddcufioju] .dp-fields td {
    padding: 8px;
    border-block-end: 1px solid var(--ui-line);
    vertical-align: middle;
    color: var(--ui-ink-2);
}

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

[b-3ddcufioju] .dp-fields .dp-n {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10.5px;
    background: var(--ui-ink);
    color: #fff;
    padding: 1px 6px;
    border-radius: 3px;
    text-align: center;
    inline-size: 24px;
}

[b-3ddcufioju] .dp-fields tr.ocr-field:hover td {
    background: var(--ui-surface-page);
}

/* Confidence cell — holds the per-field officer-only ConfPill (Phase 6). */
[b-3ddcufioju] .dp-conf {
    white-space: nowrap;
    inline-size: 90px;
}

/* Document artifacts — the thumbnail panel for the split-out logos/seals/stamps/signatures.
   Each .dp-artifact carries the same data-n as its overlay marker, so hovering either lights both
   (js/ocr-fields.js .is-focus, promoted by the global .ocr-field.is-focus rule). */
.dp-artifacts[b-3ddcufioju] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dp-artifact[data-kind="signature"][b-3ddcufioju] { --art: #8B5CF6; }
.dp-artifact[data-kind="seal"][b-3ddcufioju]      { --art: #F59E0B; }
.dp-artifact[data-kind="stamp"][b-3ddcufioju]     { --art: #F43F5E; }
.dp-artifact[data-kind="photo"][b-3ddcufioju]     { --art: #06B6D4; }
.dp-artifact[data-kind="logo"][b-3ddcufioju]      { --art: #64748B; }
.dp-artifact[data-kind="chart"][b-3ddcufioju]     { --art: #14B8A6; }
.dp-artifact[data-kind="other"][b-3ddcufioju]     { --art: #9CA3AF; }

.dp-artifact[b-3ddcufioju] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px;
    border: 1px solid color-mix(in srgb, var(--art, #64748B) 45%, var(--ui-line));
    border-inline-start: 3px solid var(--art, #64748B);
    border-radius: 8px;
    background: color-mix(in srgb, var(--art, #64748B) 12%, var(--ui-surface));
    cursor: pointer;
    transition: background-color .12s ease, border-color .12s ease;
}

.dp-artifact:hover[b-3ddcufioju],
.dp-artifact:focus-visible[b-3ddcufioju],
.dp-artifact.is-focus[b-3ddcufioju] {
    border-color: var(--art, #64748B);
    outline: none;
}

/* Legend — one tinted chip per kind PRESENT in the current document. */
.dp-artifact-legend[b-3ddcufioju] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-block-end: 8px;
}

.dp-artifact-legend-chip[data-kind="signature"][b-3ddcufioju] { --art: #8B5CF6; }
.dp-artifact-legend-chip[data-kind="seal"][b-3ddcufioju]      { --art: #F59E0B; }
.dp-artifact-legend-chip[data-kind="stamp"][b-3ddcufioju]     { --art: #F43F5E; }
.dp-artifact-legend-chip[data-kind="photo"][b-3ddcufioju]     { --art: #06B6D4; }
.dp-artifact-legend-chip[data-kind="logo"][b-3ddcufioju]      { --art: #64748B; }
.dp-artifact-legend-chip[data-kind="chart"][b-3ddcufioju]     { --art: #14B8A6; }
.dp-artifact-legend-chip[data-kind="other"][b-3ddcufioju]     { --art: #9CA3AF; }

.dp-artifact-legend-chip[b-3ddcufioju] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 999px;
    color: var(--ui-ink-2);
    background: color-mix(in srgb, var(--art, #64748B) 14%, var(--ui-surface));
    border: 1px solid color-mix(in srgb, var(--art, #64748B) 40%, var(--ui-line));
}

.dp-artifact-legend-chip[b-3ddcufioju]::before {
    content: '';
    inline-size: 8px;
    block-size: 8px;
    border-radius: 50%;
    background: var(--art, #64748B);
}

.dp-artifact-thumb[b-3ddcufioju] {
    inline-size: 52px;
    block-size: 52px;
    flex: 0 0 52px;
    object-fit: contain;
    border: 1px solid var(--ui-line);
    border-radius: 6px;
    background: #fff;
    padding: 3px;
}

.dp-artifact-body[b-3ddcufioju] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-inline-size: 0;
}

.dp-artifact-desc[b-3ddcufioju] {
    line-height: 1.35;
}

.dp-checks[b-3ddcufioju] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 12.5px;
    color: var(--ui-ink-2);
}

.dp-checks li[b-3ddcufioju] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

/* Validation markers — a quiet slate ring at rest (ready/captured); a "needs review" item fills
   the marker with the accent. Status is the fill + the row's wording, never green/amber. */
.dp-checks li[b-3ddcufioju]::before {
    content: '';
    inline-size: 14px;
    block-size: 14px;
    border-radius: 50%;
    flex: 0 0 14px;
    margin-block-start: 1px;
    border: 1.5px solid var(--ui-line-strong);
    background: transparent;
}

.dp-checks li.ok[b-3ddcufioju]::before {
    border-color: var(--ui-line-strong);
    background: transparent;
}

.dp-checks li.warn[b-3ddcufioju]::before {
    border-color: var(--ui-accent);
    background: var(--ui-accent);
}

.raw-ocr[b-3ddcufioju] {
    margin: 0;
    padding: 12px;
    background: var(--ui-ink);
    color: #E2E8F0;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    line-height: 1.55;
    border-radius: 8px;
    overflow: auto;
    max-block-size: 260px;
    white-space: pre-wrap;
}

.raw-ocr code[b-3ddcufioju] {
    color: inherit;
    font-family: inherit;
}

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

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

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

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

/* ── Officer-provided document upload (T1) — a slim bar to attach a missing document (e.g. a
   supplied PSV). The pipeline OCRs + re-derives it. Relocated from the Verification tab. */
.docs-add[b-3ddcufioju] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.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;
    gap: 8px;
    flex-wrap: wrap;
}

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

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

/* Fully-themed file picker: a label wraps a visually-hidden native <input type=file>, so the
   browser's un-themeable "Choose File · No file chosen" chrome is replaced by a design-system
   ghost-button trigger + a filename indicator that matches the select and Upload button beside it. */
.docs-add-file[b-3ddcufioju] {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    max-inline-size: 100%;
}

/* The real input covers the whole label (so a click anywhere opens the picker) but is invisible.
   InputFile renders its <input> as a child COMPONENT, so it doesn't inherit this component's
   scope attribute — ::deep is required to reach it (without it the browser-default file control
   shows through on top of the styled trigger). */
.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;
    height: 32px;
    padding-inline: 12px;
    border: 1px solid var(--ui-line, #E2E8F0);
    border-radius: 8px;
    background: var(--ui-surface, #fff);
    color: var(--ui-ink, #0F172A);
    font-size: 13px;
    font-weight: 500;
    transition: background .12s ease, border-color .12s ease;
}

.docs-add-file:hover .docs-add-file-btn[b-3ddcufioju] {
    background: var(--ui-bg, #F8FAFC);
    border-color: var(--ui-line-strong, #CBD5E1);
}

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

/* Busy: the native input is disabled (clicks no-op); dim the trigger to match. */
.docs-add-file.is-disabled[b-3ddcufioju] {
    opacity: .55;
    cursor: default;
}

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

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

/* Responsive — stack the panels on narrow viewports */
@media (max-width: 1100px) {
    .docs-grid[b-3ddcufioju] {
        grid-template-columns: 1fr;
    }

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

@media (max-width: 820px) {
    .docs-layout[b-3ddcufioju] {
        grid-template-columns: 1fr;
    }

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

    .docs-head[b-3ddcufioju] {
        grid-template-columns: 1fr;
        gap: 8px;
    }
}

/* ── Officer amendments (Phase 7) ──────────────────────────────────────────────
   Inline field-value editing + document reclassification. The editor and the
   recoverable original sit inline with an explicit, discoverable Edit action. */
[b-3ddcufioju] .dp-value {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

[b-3ddcufioju] .dp-value-original,
.dm-kind-original[b-3ddcufioju] {
    text-decoration: line-through;
    opacity: .75;
}

/* A compact text action is more discoverable than an unexplained glyph and remains
   visible for keyboard, touch and pointer users. */
[b-3ddcufioju] .dp-edit-trigger,
.dp-edit-trigger[b-3ddcufioju] {
    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;
    transition: background .12s ease, color .12s ease;
}

[b-3ddcufioju] .dp-edit-trigger:hover,
.dp-edit-trigger:hover[b-3ddcufioju] {
    background: var(--ui-surface-page);
    color: var(--ui-accent);
}

/* Touch: retain a comfortable tap target. */
@media (hover: none) {
    [b-3ddcufioju] .dp-edit-trigger,
    .dp-edit-trigger[b-3ddcufioju] {
        padding: 8px;
    }
}

.docs-override-conflict[b-3ddcufioju] {
    margin-block: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--warn-border, #f59e0b);
    border-inline-start-width: 4px;
    border-radius: var(--radius-sm);
    background: var(--warn-bg, #fffbeb);
    color: var(--ink);
}

.docs-override-conflict ul[b-3ddcufioju] {
    margin: var(--space-2) 0 0;
    padding-inline-start: 1.25rem;
}

.docs-override-conflict li + li[b-3ddcufioju] {
    margin-block-start: var(--space-1);
}

.docs-ocr-state[b-3ddcufioju] {
    align-items: flex-start;
}

.docs-ocr-state__body[b-3ddcufioju] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
}

/* Inline editor — text input + Save/Cancel. The input itself carries the shared .ui-input look
   (border, focus ring); only its inline-flex layout + min-width live here. */
[b-3ddcufioju] .dp-edit {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

[b-3ddcufioju] .dp-edit-input {
    min-inline-size: 160px;
}

/* Reclassify kind dropdown beside the detected-type chip — compact width over the shared
   .ui-select base (chevron + RTL mirror; mirrors the Applications toolbar select-sizing). */
.dm-kind[b-3ddcufioju] {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.dm-kind .dm-kind-select.ui-select[b-3ddcufioju] {
    inline-size: auto;
    font-size: 12px;
    padding-block: 2px;
    padding-inline: 8px 28px;
}
/* /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/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: monochrome slate + #2563EB accent only. Verdicts are signalled by icon + label
   + weight + slate tint — never by green/amber/red. The formal document feel is preserved
   through typography (Source Serif 4 --font-doc), letter/paper structure (white surface on
   slate-50 canvas), 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: #F8FAFC; /* slate-50 */
    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: 0 1px 2px rgba(15, 23, 42, .08);
}

.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: #F1F5F9; /* slate-100 */
    color: #475569;      /* slate-600 */
    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: #EFF6FF; /* blue-50 */
    color: var(--ui-accent);
    border-color: #BFDBFE; /* blue-200 */
}

/* oc-band-warn — Conditional: mid slate tint, strong ink */
.oc-decision-chip.oc-band-warn[b-1vzyixmtbx] {
    background: #F1F5F9; /* slate-100 */
    color: #334155;      /* slate-700 */
    border-color: #CBD5E1; /* slate-300 */
}

/* oc-band-danger — Not eligible: strong slate, near-black text */
.oc-decision-chip.oc-band-danger[b-1vzyixmtbx] {
    background: #E2E8F0; /* slate-200 */
    color: #0F172A;      /* slate-900 */
    border-color: #94A3B8; /* slate-400 */
}

/* ── Recipient block ─────────────────────────────────────────────────────────── */
.oc-recipient[b-1vzyixmtbx] {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 4px 20px;
    margin: 20px 0 0;
    padding: 16px;
    background: #F8FAFC; /* slate-50 */
    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.
   Monochrome re-skin (Phase 5, Task 5.4): slate ramp + #2563EB accent only.
   Shadows removed → flat 1px --ui-line border (identical to <Card> default).
   ovr-card-highlight: accent-tint (#EFF6FF) 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, 8px radius — identical to <Card> default. */
.ovr-card[b-nhlft1qx7u] {
    padding: 18px;
    border: 1px solid var(--ui-line);
    border-radius: 8px;
}

/* Highlight card: accent-tint flat fill — no gradient, no shadow. */
.ovr-card-highlight[b-nhlft1qx7u] {
    background: var(--ui-accent-tint);
}

/* Eyebrow label above the workflow lede. */
.ovr-eyebrow[b-nhlft1qx7u] {
    display: inline-block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--ui-muted);
    font-weight: 600;
    margin-block-end: 6px;
}

.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: 'JetBrains Mono', ui-monospace, monospace;
}

/* 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, #f8fafc);
}

.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, #f8fafc);
}

.ovr-empty p[b-nhlft1qx7u] {
    margin: 0;
}

.ovr-empty p + p[b-nhlft1qx7u] {
    margin-block-start: 6px;
}

/* Eligibility lede sat inside the workflow card. */
.ovr-eligibility-lede[b-nhlft1qx7u] {
    padding-block-end: 14px;
    margin-block-end: 14px;
    border-block-end: 1px solid var(--ui-line);
}

.ovr-eligibility-lede p[b-nhlft1qx7u] {
    margin: 0;
    line-height: 1.5;
}

/* 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 — break-word breaks at the overflow point rather than eagerly mid-word like
       `anywhere`, so a value that fits stays intact and one that doesn't wraps more cleanly. */
    overflow-wrap: break-word;
    word-break: 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 #bfdbfe; border-radius: 8px; background: #eff6ff; }
.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: #475569; 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 #dbeafe; border-radius: 6px; background: #fff; }
.pqr-proposal-fact > span[b-h8mz2kq1b8] { color: #475569; 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: #64748b; 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 #bfdbfe; }
.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: #fff; color: #334155; font-size: 12px; }
.pqr-proposal-safety[b-h8mz2kq1b8] { padding-block-start: 10px; border-block-start: 1px solid #bfdbfe; }
.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, #f8fafc); }
.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 #bfdbfe; border-radius: 8px; background: #f8fbff; }
.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: #1d4ed8; font-size: 11px; font-weight: 700; }
.pqr-reference-provenance__details[b-h8mz2kq1b8] { display: grid; gap: 10px; padding: 12px; border-block-start: 1px solid #dbeafe; }
.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, #f8fafc); }
.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, #b91c1c); font-size: 13px; }
.pqr-route-warning[b-h8mz2kq1b8] { padding: 12px; border: 1px solid #f59e0b; border-radius: 8px; background: #fffbeb; color: #92400e; 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(0, 1fr) 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; gap: 8px; }
.pqr-employment-form[b-h8mz2kq1b8] { padding: 16px; border: 1px solid var(--ui-line); border-radius: 8px; background: var(--ui-bg-subtle, #f8fafc); }
.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; } }
/* /Components/Pages/Console/Detail/QualificationPane.razor.rz.scp.css */
/* Qualification pane — tier-resolution display for the applicant-detail tab.
   Scoped to QualificationPane; monochrome slate + #2563EB 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);
}

.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: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

.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, #fff);
    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, #2563eb) 28%, var(--ui-line));
    background: var(--ui-accent-tint, #eff6ff);
}

.qual-suggestion-confirmed[b-5dx9d0s85v] {
    border-color: var(--ui-line);
    background: var(--ui-bg-subtle, #f8fafc);
}

.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, #f8fafc);
    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, #fff);
    cursor: pointer;
}

.qual-choice:hover[b-5dx9d0s85v],
.qual-choice:has(input:focus-visible)[b-5dx9d0s85v] {
    border-color: var(--ui-accent, #2563eb);
}

.qual-choice:has(input:checked)[b-5dx9d0s85v] {
    border-color: var(--ui-accent, #2563eb);
    background: var(--ui-accent-tint, #eff6ff);
}

.qual-choice input[b-5dx9d0s85v] {
    inline-size: 17px;
    block-size: 17px;
    margin: 2px 0 0;
    accent-color: var(--ui-accent, #2563eb);
}

.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, #eff6ff);
    color: var(--ui-accent, #2563eb);
    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, #2563eb);
    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, #f8fafc);
}

.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, #2563EB);
    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;
}
/* /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: #fff;
    background: #2563EB;
}

.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 #2563EB;
    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.
   Monochrome slate + #2563EB accent per the Phase 5 design system
   (--ui-* tokens from _content/Mohap.Web.Ui/css/theme.css).
   RTL-ready via logical properties. Ported from the demo renderVerificationPane()
   (mockup assets/app.js / styles.css). */
.verif[b-vnx6x1nbd9] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Summary header. */
.verif-summary-head[b-vnx6x1nbd9] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.verif-summary-title[b-vnx6x1nbd9] {
    font-size: 16px;
    font-weight: 600;
    color: var(--ui-ink);
    margin: 0;
}

.verif-summary-sub[b-vnx6x1nbd9] {
    margin-block-start: 4px;
}

.verif-summary-pills[b-vnx6x1nbd9] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.verif-summary-foot[b-vnx6x1nbd9] {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-block-start: 12px;
    padding-block-start: 12px;
    border-block-start: 1px solid var(--ui-line);
}

.verif-summary-foot strong[b-vnx6x1nbd9] {
    color: var(--ui-ink-2);
    font-weight: 600;
}

/* Six-check grid. */
.verif-check-grid[b-vnx6x1nbd9] {
    display: grid;
    /* min(100%,320px): the 320px floor is capped to the container so a single track can
       never overrun the ~295px phone column (where overflow-x:hidden would clip the card's
       status chip / evidence). One full-width column at 375px, still two at 768px. */
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
    gap: 14px;
}

.verif-check[b-vnx6x1nbd9] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.verif-check-head[b-vnx6x1nbd9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.verif-check-head-l[b-vnx6x1nbd9] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-inline-size: 0;
}

.verif-check-ref[b-vnx6x1nbd9] {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    color: #2563EB;
    background: #EFF6FF;
    border-radius: 6px;
    padding: 3px 7px;
    flex: none;
}

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

.verif-check-desc[b-vnx6x1nbd9] {
    font-size: 12.5px;
    color: var(--ui-muted);
    margin: 0;
    line-height: 1.5;
}

/* Chain-of-trust row — the ProvenanceChip + an optional "needs review" flag. */
.verif-check-prov[b-vnx6x1nbd9] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Method / evidence definition list. */
.verif-check-meta[b-vnx6x1nbd9] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding-block-start: 8px;
    border-block-start: 1px solid var(--ui-line);
}

.verif-check-row[b-vnx6x1nbd9] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.verif-check-row dt[b-vnx6x1nbd9] {
    font-size: 11px;
    color: var(--ui-muted);
    text-transform: uppercase;
    letter-spacing: .03em;
}

.verif-check-row dd[b-vnx6x1nbd9] {
    font-size: 12.5px;
    color: var(--ui-ink-2);
    margin: 0;
}

/* Supporting-document evidence styling moved to SupportingDocChips.razor.css;
   inline-form styling moved to VerifForm.razor.css. */

/* Head-right cluster (SLA badge + status chip). */
.verif-check-head-r[b-vnx6x1nbd9] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* Officer action footer (PSV open/poll · GSC record). */
.verif-check-actions[b-vnx6x1nbd9] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-block-start: 4px;
    padding-block-start: 10px;
    border-block-start: 1px solid var(--ui-line);
}

.verif-evidence-empty[b-vnx6x1nbd9] {
    margin: 0;
    padding: 10px 12px;
    border: 1px dashed var(--ui-line-strong);
    border-radius: 8px;
    background: var(--ui-surface-page);
}

.verif-evidence-actions[b-vnx6x1nbd9] {
    display: flex;
    margin-block-start: -2px;
}

.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;
}

/* Verification action buttons now use the shared Web.Ui <Button> primitive
   (Variant Primary/Secondary, Size Sm) — the bespoke .verif-btn* styles were removed. */

/* Phase 8b — "upload a provided PSV/GSC document" affordance. */
.verif-upload[b-vnx6x1nbd9] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

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

.verif-upload-sub[b-vnx6x1nbd9] {
    margin-block-start: 2px;
}

.verif-upload-controls[b-vnx6x1nbd9] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding-block-start: 10px;
    border-block-start: 1px solid var(--ui-line);
}

.verif-upload-label[b-vnx6x1nbd9] {
    font-size: 11px;
    color: var(--ui-muted);
    text-transform: uppercase;
    letter-spacing: .03em;
}

/* Native <select> — ui-select handles the base look (chevron + RTL mirror);
   width auto for toolbar density. */
.verif-upload-select[b-vnx6x1nbd9] {
    font: inherit;
    font-size: 12.5px;
}

.verif-upload-input[b-vnx6x1nbd9] {
    font: inherit;
    font-size: 12.5px;
    color: var(--ui-ink-2);
}

.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, 0 1px 2px rgb(15 23 42 / .05));
}

.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, 0 1px 2px rgb(15 23 42 / .05));
}

.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);
    color: #fff;
    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: #1e3a8a;
    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);
    color: #fff;
    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: #16a34a;
}

.guide-verdict--conditional[b-yebvg6z1tz] {
    border-block-start-color: #d97706;
}

.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;
}

/* 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: #EFF6FF; /* blue-50, 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: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    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, 0 1px 2px rgb(15 23 42 / .05));
}

.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, #fff);
    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: #F1F5F9; /* slate-100 — visible against the white rail panel (was --ui-surface = white) */
    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: #EFF6FF;
    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. Inter throughout, #2563EB 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, #F6F8FB);
}

/* ── Two-panel card ─────────────────────────────────────────────────────── */
.login-card[b-y13e32gy8j] {
    display: grid;
    grid-template-columns: minmax(240px, 300px) 1fr;
    inline-size: min(760px, 100%);
    background: #fff;
    border: 1px solid var(--ui-line, #E3E8EF);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 1px 0 rgba(22, 36, 59, .04), 0 24px 56px -28px rgba(22, 36, 59, .32);
}

/* ── LEFT PANEL — white logo header + navy authority body ───────────────── */
.login-brand[b-y13e32gy8j] {
    background: #0F172A;
    color: #fff;
    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: #fff;
    padding: 22px 26px;
    border-block-end: 1px solid var(--ui-line, #E3E8EF);
}

.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;
}

/* 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: #2563EB;
    border-radius: 2px;
}

.login-brand-title[b-y13e32gy8j] {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: #fff;
    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: #ffffff;
    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, #0E1726);
}

.login-lede[b-y13e32gy8j] {
    margin: 0 0 24px;
    font-size: 14px;
    color: var(--ui-muted, #5B6B7F);
}

/* 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, #CBD5E1);
    border-radius: 10px;
    background: var(--ui-surface, #fff);
    color: var(--ui-ink, #0E1726);
    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, #0E1726);
}

/* 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, #CBD5E1);
    border-radius: 8px;
    font: inherit;
    font-size: 14px;
    color: var(--ui-ink, #0E1726);
    background: #fff;
    outline: none;
    box-sizing: border-box;
    transition: border-color .15s, box-shadow .15s;
}

.login-input:hover[b-y13e32gy8j] {
    border-color: #94A3B8; /* slate-400 */
}

.login-input:focus[b-y13e32gy8j] {
    border-color: #2563EB;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .16);
}

/* 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, #5B6B7F);
    cursor: pointer;
    border-radius: 0 8px 8px 0;
    flex-shrink: 0;
    padding: 0;
}

.login-eye:hover[b-y13e32gy8j] {
    color: var(--ui-ink, #0E1726);
}

.login-eye:focus-visible[b-y13e32gy8j] {
    outline: 2px solid #2563EB;
    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 #2563EB */
.login-btn-primary[b-y13e32gy8j] {
    display: block;
    inline-size: 100%;
    padding: 12px 16px;
    background: #2563EB;
    color: #fff;
    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: #1D4ED8;
}

.login-btn-primary:focus-visible[b-y13e32gy8j] {
    outline: 2px solid #2563EB;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, .18);
}

.login-btn-primary:active[b-y13e32gy8j] {
    background: #1E40AF;
}

/* Forgot-password link */
.login-link[b-y13e32gy8j] {
    margin-block-start: 18px;
    text-align: center;
    font-size: 14px;
    color: var(--ui-muted, #5B6B7F);
}

.login-link a[b-y13e32gy8j] {
    color: #2563EB;
    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: #fff;
    }

    .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, #F8FAFC);
}

.auth-card[b-w5ajw0i242] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    max-width: 400px;
    padding: 32px;
    background: #fff;
    border: 1px solid var(--ui-line, #E2E8F0);
    border-radius: 12px;
}

.auth-logo[b-w5ajw0i242] {
    height: 26px;
    align-self: flex-start;
    margin-bottom: 4px;
}

.auth-title[b-w5ajw0i242] {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: var(--ui-ink, #0F172A);
}

.auth-sub[b-w5ajw0i242] {
    margin: 0;
    font-size: 13px;
    color: var(--ui-muted, #64748B);
}

/* 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, #0F172A);
}

.auth-card[b-w5ajw0i242]  .auth-errors {
    margin: 0;
    padding-inline-start: 18px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ui-ink, #0F172A);
}

.auth-card[b-w5ajw0i242]  .auth-link {
    margin: 4px 0 0;
    font-size: 13px;
}

.auth-card[b-w5ajw0i242]  .auth-link a {
    color: var(--ui-accent, #2563EB);
    text-decoration: none;
}

.auth-card[b-w5ajw0i242]  .auth-link a:hover {
    text-decoration: underline;
}