@import '_content/Kwickblocks.Mortgage.Shared/Kwickblocks.Mortgage.Shared.pmgiwk5vu5.bundle.scp.css';

/* /Components/Cases/CaseDetailHeader.razor.rz.scp.css */
.case-detail-header[b-8owa22099s] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-5) 0;
}

.case-detail-back[b-8owa22099s] {
    color: var(--brand-accent);
    text-decoration: none;
    font-size: var(--text-base);
    line-height: 1.5;
    display: inline-flex;
    align-items: center;
    min-height: 44px; /* tap target — feedback_responsive_from_day_one */
    padding: var(--space-2) 0;
}

.case-detail-back:hover[b-8owa22099s],
.case-detail-back:focus[b-8owa22099s] {
    text-decoration: underline;
}

.case-detail-title-row[b-8owa22099s] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

/* Quick-task 260806-m9t — case-level actions, right-aligned on the title row.
   `margin-left: auto` is the whole mechanism and it needs no media query: the row
   above is already `flex-wrap: wrap`, so at desktop the actions sit at the right-hand
   end of the title line, and when the row runs out of width they wrap to their own
   line, still right-aligned. Nothing here has a fixed width, so nothing here can
   introduce horizontal scroll at 580px. 44px is the project's tap-target floor
   (feedback_responsive_from_day_one). */
.case-detail-title-actions[b-8owa22099s] {
    margin-left: auto;
}

.case-detail-title-actions[b-8owa22099s]  .ds-btn {
    min-height: 44px;
}

/* Quick-task 260807-ha7 — the h1 is now "type · name", so weight and colour move
   off the heading and onto the two child spans. The split is the whole point:
   the type reads FIRST so the page says what kind of page it is, but the client
   name keeps the heavier weight and the primary colour so it is still the thing
   the broker scans for. Sizing stays on the h1 — both halves are one line of
   type at one size, only the emphasis differs.

   Nothing here has a fixed width and nothing sets white-space, so the heading is
   free to wrap at 580px rather than pushing the page into horizontal scroll
   (feedback_responsive_from_day_one). Tokens only, no literals. */
.case-detail-title[b-8owa22099s] {
    font-size: var(--text-2xl);
    line-height: 1.2;
    margin: 0;
}

.case-detail-title__type[b-8owa22099s] {
    color: var(--text-secondary);
    font-weight: 500;
}

.case-detail-title__sep[b-8owa22099s] {
    color: var(--text-secondary);
    margin: 0 var(--space-2);
}

.case-detail-title__name[b-8owa22099s] {
    color: var(--text-primary);
    font-weight: 600;
}
/* /Components/Cases/CaseStatusPill.razor.rz.scp.css */
/* Phase 20 Plan 02 Task 1 — status pill, CSS isolated.
   Tokens only. Per-status surfaces are muted neutrals — accent stays
   reserved per UI-SPEC §Color. Declined uses the danger semantic. */

.status-pill[b-cm9z4eyh1o] {
    display: inline-flex;
    align-items: center;
    font-size: var(--text-xs);
    font-weight: 600;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    line-height: 1.4;
    white-space: nowrap;
}

/* Neutral / pipeline-early states */
.status-pill--lead[b-cm9z4eyh1o],
.status-pill--pre-rec[b-cm9z4eyh1o],
.status-pill--review[b-cm9z4eyh1o],
.status-pill--neutral[b-cm9z4eyh1o] {
    background-color: var(--surface-tertiary);
    color: var(--text-secondary);
}

/* Mid-pipeline */
.status-pill--pre-app[b-cm9z4eyh1o],
.status-pill--submitted[b-cm9z4eyh1o],
.status-pill--awaiting-val[b-cm9z4eyh1o],
.status-pill--awaiting-offer[b-cm9z4eyh1o] {
    background-color: var(--surface-secondary);
    color: var(--text-primary);
    border: 1px solid var(--topbar-border);
}

/* Positive / late-pipeline */
.status-pill--offered[b-cm9z4eyh1o],
.status-pill--exchanged[b-cm9z4eyh1o],
.status-pill--completed[b-cm9z4eyh1o] {
    background-color: var(--warning-bg);
    color: var(--warning-fg);
}

/* Terminal negative */
.status-pill--declined[b-cm9z4eyh1o] {
    background-color: var(--danger-bg);
    color: var(--danger-fg);
}

/* ===== Plan 20-06 — Mobile responsiveness (≤640px) — D-34 =====
   Inside stacked-card table rows the pill must remain readable; allow it
   to align right via flex (parent owns layout) — no font-size change. */
@media (max-width: 640px) {
    .status-pill[b-cm9z4eyh1o] {
        align-self: flex-start;
    }
}
/* /Components/Cases/Checklist/CaseChecklistCard.razor.rz.scp.css */
/* Phase 49 — checklist card chrome.
   Tokens only: no #rrggbb literal may appear in this file, and it must never be
   added to .planning/phases/12-ui-modernisation/hex-baseline.txt. No font-family
   is set anywhere (--font-heading is referenced in 8 files but declared nowhere
   in the solution) — the card inherits from body. */

.case-checklist[b-w8i7hhfre8] {
    /* Part of the no-horizontal-scroll-at-580px guarantee, together with
       min-width: 0 on every text-bearing flex child and no fixed widths. */
    max-width: 100%;
    min-width: 0;
}

/* The header counter is HALF the card's focal point (the progress bar is the
   other half). Nothing below it may compete: rows carry no accent colour, no size
   variation and no re-ordering by state. */
.case-checklist__count[b-w8i7hhfre8] {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--text-primary);
    /* Digits must not jitter between renders. */
    font-variant-numeric: tabular-nums;
}

/* One muted line, directly beneath the progress bar. Deliberately NOT a danger or
   warning tone: an archived case is a normal end state, not a problem. */
.case-checklist__readonly[b-w8i7hhfre8],
.case-checklist__noclients[b-w8i7hhfre8] {
    margin: var(--space-3) 0 0;
    font-size: var(--text-xs);
    line-height: var(--leading-normal);
    color: var(--text-muted);
}

/* The "Add task" button and its collapsed composer. A vertical stack so the reveal
   opens BELOW the button rather than beside it. */
.case-checklist__add[b-w8i7hhfre8] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    margin-top: var(--space-4);
}

.case-checklist__add[b-w8i7hhfre8]  .ds-btn {
    min-height: 44px;
}

/* CaseTaskComposer has no stylesheet of its own — its only host is this slot, and
   these two declarations are all it needs. ::deep reaches into it because
   .case-checklist__add IS rendered by this component. */
.case-checklist__add[b-w8i7hhfre8]  .case-task-composer {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    /* Full width of the card body: four stacked controls squeezed to the width of
       the button that opened them would be unusable. */
    width: 100%;
    padding-top: var(--space-2);
}

/* One of the three sanctioned uses of --brand-accent on this card (the others are
   the progress-bar fill and the focus ring). Row anchors are --text-primary: this
   card is 30+ links and colouring them all accent would turn it into a wall of
   blue, destroying the state signal the card exists to convey. */
.case-checklist__next[b-w8i7hhfre8] {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    flex-wrap: wrap;
    margin: var(--space-5) 0 0;
    font-size: var(--text-xs);
    line-height: var(--leading-normal);
    color: var(--text-muted);
}

.case-checklist__next a[b-w8i7hhfre8] {
    color: var(--brand-accent);
}

.case-checklist__next a:focus-visible[b-w8i7hhfre8] {
    outline: none;
    box-shadow: var(--focus-ring);
    border-radius: var(--radius-sm);
}

/* 640px == --bp-sm (design-system.css); CSS vars are illegal in @media conditions */
@media (max-width: 640px) {
    /* .ds-card__header is justify-content: space-between with no wrap, so the
       counter + task chip would otherwise squeeze the title. This selector is the
       reason the component root has to be a plain <div> wrapping the DsCard —
       without a scoped ancestor, ::deep matches nothing.

       The other three <=640px rules the UI-SPEC lists are declared where their
       elements actually live, because Blazor scope attributes do not cross a
       component boundary: .checklist-row wrap + Chase indent are in
       CaseChecklistRowView.razor.css, .checklist-group__toggle wrap is in
       CaseChecklistGroupView.razor.css, and .checklist-task__confirm belongs to
       the task row component plan 07 adds. Declaring them here would compile to
       selectors matching nothing. */
    .case-checklist[b-w8i7hhfre8]  .ds-card__header {
        flex-wrap: wrap;
    }
}
/* /Components/Cases/Checklist/CaseChecklistGroupView.razor.rz.scp.css */
/* Phase 49 Plan 04 — checklist group chrome.
   Tokens only: no #rrggbb literal may appear in this file, and it must never be
   added to .planning/phases/12-ui-modernisation/hex-baseline.txt (Phase12
   TokenLintTests walks every *.razor.css). No font-family is set anywhere —
   --font-heading is referenced in 8 files but declared nowhere in the solution,
   so this card inherits from body. */

/* --space-4 is BOTH the gap between groups and the card-body top gap (progress
   bar -> first group), so one margin covers both cases and the card needs no
   ::deep rule to reach a child component's root. */
.checklist-group[b-5ihmf39hn1] {
    margin-top: var(--space-4);
}

.checklist-group__heading[b-5ihmf39hn1] {
    margin: 0;
}

/* The button carries the whole summary, so its own text (title + attention +
   count) is its accessible name — no aria-label, which would replace it.
   aria-expanded / aria-controls carry the state. */
.checklist-group__toggle[b-5ihmf39hn1] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    /* 44 == 11 x 4, so the multiple-of-4 spacing rule still holds. Declared as a
       literal to match the convention in TabOverview.razor.css:49. */
    min-height: 44px;
    padding: var(--space-2) var(--space-3);
    background: none;
    border: 0;
    border-radius: var(--radius-sm);
    text-align: left;
    color: var(--text-primary);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
}

button.checklist-group__toggle[b-5ihmf39hn1] {
    cursor: pointer;
}

button.checklist-group__toggle:hover[b-5ihmf39hn1] {
    background: var(--surface-secondary);
}

.checklist-group__toggle:focus-visible[b-5ihmf39hn1] {
    outline: none;
    box-shadow: var(--focus-ring);
}

/* flex: 1 1 auto on the title is what pushes the attention badge and the counter
   to the right edge, and min-width: 0 + ellipsis is what stops a long applicant
   name forcing horizontal scroll at 580px. */
.checklist-group__title[b-5ihmf39hn1] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: var(--weight-semibold);
}

.checklist-group__chev[b-5ihmf39hn1],
.checklist-group__glyph[b-5ihmf39hn1] {
    flex: 0 0 1.25rem;
    width: 1.25rem;
    text-align: center;
    color: var(--text-secondary);
}

.checklist-group__role[b-5ihmf39hn1],
.checklist-group__attention[b-5ihmf39hn1] {
    flex: 0 0 auto;
}

/* Per 49-UI-SPEC: margin-left: auto on __attention pushes the summary cluster
   right. With the title flexing it is already right-aligned; kept so the layout
   still holds if the title rule is ever narrowed. */
.checklist-group__attention[b-5ihmf39hn1] {
    margin-left: auto;
}

.checklist-group__count[b-5ihmf39hn1] {
    flex: 0 0 auto;
    color: var(--text-secondary);
    /* Digits must not jitter between renders. */
    font-variant-numeric: tabular-nums;
}

.checklist-list[b-5ihmf39hn1],
.checklist-tasks[b-5ihmf39hn1] {
    list-style: none;
    margin: 0;
    padding: 0;
    min-width: 0;
}

/* Phase 49 Plan 07 — the divider between the derived rows and the broker's own
   tasks. It is a BORDER ON THE SUBHEAD plus padding, not a presentational <li>
   inside one list: the two lists are separate elements because they hold different
   item types, and the rule is only how that reads. Both are declared here rather
   than in the card's stylesheet because Blazor stamps a scope attribute only on
   elements THIS component renders — the card's copy would compile to selectors
   matching nothing. */
.checklist-subhead[b-5ihmf39hn1] {
    margin: 0;
    padding-top: var(--space-3);
    padding-left: var(--space-3);
    padding-right: var(--space-3);
    border-top: 1px solid var(--border-subtle);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-normal);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Motion is limited to the chevron transform (the only other transition on this
   card is the row hover background). Gated, per project rule. */
@media (prefers-reduced-motion: no-preference) {
    .checklist-group__chev[b-5ihmf39hn1] {
        transition: transform var(--dur-base) var(--ease-out);
    }
}

.checklist-group__toggle[aria-expanded="true"] .checklist-group__chev[b-5ihmf39hn1] {
    transform: rotate(180deg);
}

/* 640px == --bp-sm (design-system.css); CSS vars are illegal in @media conditions */
@media (max-width: 640px) {
    /* Let the attention badge + counter wrap under the title rather than squeeze
       an applicant's name to nothing. */
    .checklist-group__toggle[b-5ihmf39hn1] {
        flex-wrap: wrap;
    }
}
/* /Components/Cases/Checklist/CaseChecklistRowView.razor.rz.scp.css */
/* Phase 49 Plan 01 — checklist row chrome.
   Tokens only: no #rrggbb literal may appear in this file, and it must never be
   added to .planning/phases/12-ui-modernisation/hex-baseline.txt (Phase12
   TokenLintTests walks every *.razor.css). No font-family is set anywhere —
   --font-heading is referenced in 8 files but declared nowhere in the solution,
   so this card inherits from body. */

.checklist-row[b-qqsite0hdv] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    /* Separation is the 1px rule, not a gap — rows sit flush so the icon column
       reads as one continuous gutter down the list. */
    border-top: 1px solid var(--border-subtle);
}

.checklist-row:first-child[b-qqsite0hdv] {
    border-top: 0;
}

.checklist-row__link[b-qqsite0hdv] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    /* flex: 1 1 auto + min-width: 0 leaves room for the Chase button sibling
       (plan 06) as a right-aligned target column, and is what stops a long detail
       string forcing horizontal scroll at 580px. */
    flex: 1 1 auto;
    min-width: 0;
    /* 44 == 11 x 4, so the multiple-of-4 spacing rule still holds. Declared as a
       literal to match TabOverview.razor.css:49. Applies at EVERY width —
       consistency beats compactness on a repeated-target list. */
    min-height: 44px;
    padding: var(--space-2) var(--space-3);
    color: var(--text-primary);
    text-decoration: none;
    border-radius: var(--radius-sm);
}

a.checklist-row__link[b-qqsite0hdv] {
    transition: background-color var(--dur-fast) var(--ease-out);
}

/* Row anchors are --text-primary, NOT --brand-accent. This card is 30+ links;
   colouring them all accent would turn it into a wall of blue and destroy the
   state signal, which is the only thing the card exists to convey. Affordance is
   the hover background + focus ring + cursor, exactly as OverviewCompletenessCard
   already does. */
a.checklist-row__link:hover[b-qqsite0hdv] {
    background: var(--surface-secondary);
}

.checklist-row__link:focus-visible[b-qqsite0hdv] {
    outline: none;
    box-shadow: var(--focus-ring);
    border-radius: var(--radius-sm);
}

.checklist-row__icon[b-qqsite0hdv] {
    /* Fixed gutter so the icon column stays dead-aligned down the list. */
    flex: 0 0 1.25rem;
    width: 1.25rem;
    text-align: center;
    line-height: var(--leading-normal);
    font-size: var(--text-sm);
}

/* Flex column, unconditionally: the detail always sits on its own line beneath
   the label at every breakpoint. That removes a breakpoint rule entirely, gets
   the gutter indent free from the layout, and stops a 40-character detail
   squeezing the label at intermediate widths. */
.checklist-row__text[b-qqsite0hdv] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    justify-content: center;
}

.checklist-row__label[b-qqsite0hdv] {
    font-size: var(--text-sm);
    font-weight: var(--weight-regular);
    line-height: var(--leading-normal);
}

.checklist-row__detail[b-qqsite0hdv] {
    font-size: var(--text-xs);
    color: var(--text-muted);
    line-height: var(--leading-normal);
    /* Single line; the full string is in the title attribute. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Visually hidden, still in the accessible name (49-UI-SPEC §Density). */
.checklist-row__sr[b-qqsite0hdv] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ===== the five-state visual language =====
   Three independent channels — icon shape, icon fill, colour — so state survives
   greyscale and colour-blindness. Colour is never the only channel. */

.checklist-row[data-state="Done"] .checklist-row__icon[b-qqsite0hdv] {
    color: var(--success);
}

.checklist-row[data-state="Done"] .checklist-row__label[b-qqsite0hdv] {
    color: var(--text-secondary);
}

.checklist-row[data-state="InProgress"] .checklist-row__icon[b-qqsite0hdv] {
    color: var(--info);
}

.checklist-row[data-state="NotStarted"] .checklist-row__icon[b-qqsite0hdv] {
    color: var(--border-strong);
}

/* Attention is deliberately QUIET at row level. The escalation lives on the
   group-header badge (O(1) per group), never on the row or the card — a case
   with four Attention rows must not look like a fire. The left rule is an inset
   box-shadow, NOT border-left: a border would shift the icon gutter by 3px on
   Attention rows only and break the column alignment. */
.checklist-row[data-state="Attention"][b-qqsite0hdv] {
    background: var(--danger-bg);
    box-shadow: inset 3px 0 0 0 var(--danger);
}

.checklist-row[data-state="Attention"] .checklist-row__icon[b-qqsite0hdv] {
    color: var(--danger);
}

.checklist-row[data-state="Attention"] .checklist-row__label[b-qqsite0hdv] {
    /* The non-colour weight channel, additive to the icon-shape channel. */
    font-weight: var(--weight-semibold);
}

.checklist-row[data-state="NotApplicable"] .checklist-row__icon[b-qqsite0hdv],
.checklist-row[data-state="NotApplicable"] .checklist-row__label[b-qqsite0hdv] {
    color: var(--text-muted);
}

/* The Chase button (plan 08) renders its own <button> via DsButton, which is
   OUTSIDE this component's scope — ::deep is the only way to reach it, and it
   works here because <li class="checklist-row"> IS in this component's markup.
   flex: 0 0 auto keeps it a consistent right-aligned target column at the card
   edge, matching .ds-table row behaviour; .checklist-row__link is flex: 1 1 auto,
   which is what pushes it there without a margin-left: auto of its own.

   These rules were written by plan 01 for an occupant that did not exist yet.
   They are LIVE now — a Chase button that lost its 44px floor or its <=640px
   full-width line would be a regression here, not in the component. */
.checklist-row[b-qqsite0hdv]  .ds-btn {
    min-height: 44px;
    flex: 0 0 auto;
}

/* 640px == --bp-sm (design-system.css); CSS vars are illegal in @media conditions */
@media (max-width: 640px) {
    .checklist-row[b-qqsite0hdv] {
        flex-wrap: wrap;
    }

    /* The Chase button takes its own full-width line, indented to the icon gutter
       so it reads as belonging to the row above it rather than to the card. */
    .checklist-row[b-qqsite0hdv]  .ds-btn {
        flex: 1 0 100%;
        margin-left: calc(var(--space-3) + 1.25rem);
    }
}
/* /Components/Cases/ClientsLabel.razor.rz.scp.css */
/* Phase 20 Plan 02 Task 1 — CSS isolated for ClientsLabel.
   Tokens only — no raw values. */

.clients-label[b-fbok6526w6] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    min-width: 0;
}

.clients-label__primary[b-fbok6526w6] {
    color: var(--text-primary);
    font-size: var(--text-sm);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.clients-label__chip[b-fbok6526w6] {
    display: inline-flex;
    align-items: center;
    background-color: var(--surface-tertiary);
    color: var(--text-secondary);
    font-size: var(--text-xs);
    font-weight: 600;
    padding: 0 var(--space-1);
    border-radius: var(--radius-sm);
    line-height: 1.4;
    flex: 0 0 auto;
}

.clients-label--empty[b-fbok6526w6] {
    color: var(--text-muted);
    font-style: italic;
}

/* ===== Plan 20-06 — Mobile responsiveness (≤640px) — D-34 =====
   Inside stacked-card table rows the label may have less width — allow it
   to wrap rather than ellipsis-truncate to keep client names legible. */
@media (max-width: 640px) {
    .clients-label__primary[b-fbok6526w6] {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }
}
/* /Components/Cases/CompanySearchTypeahead.razor.rz.scp.css */
/* Phase 53-06 / SPV-01 — company-search typeahead.
   Geometry carried across from ExistingClientTypeahead.razor.css; every colour resolves
   through a design token so a tenant retheme reaches this control (CLAUDE.md white-label
   rule). This file is not in the Phase 12 hex baseline and must not need to be. */

.typeahead-container[b-9stemqcjib] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    width: 100%;
}

.typeahead-input-wrapper[b-9stemqcjib] {
    position: relative;
}

.typeahead-input[b-9stemqcjib] {
    width: 100%;
    padding-right: 44px;
    min-height: 44px;
}

/* Same geometry as the client typeahead: 16px, 2px ring, tertiary-surface track, accent
   head, 0.8s linear. aria-hidden in the markup — the status region carries the
   announcement. */
.typeahead-spinner[b-9stemqcjib] {
    position: absolute;
    right: 12px;
    top: 50%;
    width: 16px;
    height: 16px;
    margin-top: -8px;
    border: 2px solid var(--surface-tertiary);
    border-top-color: var(--brand-accent);
    border-radius: 50%;
    animation: typeahead-spin-b-9stemqcjib 0.8s linear infinite;
}

@keyframes typeahead-spin-b-9stemqcjib {
    to { transform: rotate(360deg); }
}

.typeahead-helper[b-9stemqcjib] {
    margin: var(--space-1) 0 0 0;
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

.typeahead-helper--error[b-9stemqcjib] {
    color: var(--danger);
}

/* Static flow, NOT absolutely positioned: inside DsModal an absolute dropdown clips against
   the modal body's scroll container. The cap keeps it from growing the modal body instead. */
.typeahead-results[b-9stemqcjib] {
    list-style: none;
    margin: var(--space-1) 0 0 0;
    padding: 0;
    background: var(--surface-primary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    max-height: 320px;
    overflow-y: auto;
}

.typeahead-row[b-9stemqcjib] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    min-height: 44px;
    padding: var(--space-3);
    cursor: pointer;
    border-bottom: 1px solid var(--border-subtle);
    background: var(--surface-primary);
}

.typeahead-row:last-child[b-9stemqcjib] {
    border-bottom: none;
}

.typeahead-row:hover[b-9stemqcjib],
.typeahead-row-highlighted[b-9stemqcjib] {
    background: var(--surface-secondary);
}

/* The ONLY surface in this phase that truncates. A fixed single-line row is the point of a
   dropdown, and the full registered name stays reachable through the title attribute. The
   selected-company card the broker confirms follows the opposite rule and wraps. */
.typeahead-row-name[b-9stemqcjib] {
    flex: 1 1 100%;
    min-width: 0;
    font-weight: 600;
    font-size: var(--text-sm);
    color: var(--text-primary);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.typeahead-row-meta[b-9stemqcjib] {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--text-secondary);
    font-size: var(--text-sm);
    font-weight: 400;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.typeahead-row-badge[b-9stemqcjib] {
    margin-left: auto;
    flex: 0 0 auto;
}

/* ≤640px the row wraps to two lines (name, then number and address) rather than truncating
   the company number away. No horizontal scroll at 580px. */
@media (max-width: 640px) {
    .typeahead-row[b-9stemqcjib] {
        flex-direction: column;
        align-items: flex-start;
    }

    .typeahead-row-meta[b-9stemqcjib] {
        white-space: normal;
    }

    .typeahead-row-badge[b-9stemqcjib] {
        margin-left: 0;
    }
}
/* /Components/Cases/FactFind/FactFindCredit.razor.rz.scp.css */
/* Phase 34 Plan 03: FactFindCredit — case-scoped per-applicant Bank account +
   Credit commitments + Credit history cards plus a single household Outstanding
   commitments card. Host chrome only; card + read-grid styles are owned by
   ProfileEditableCard.razor.css (::deep); form body by the shared AIP sub-forms. */

.fact-find-credit[b-f1p9dztj7w] {
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

@media (max-width: 640px) {
    .fact-find-credit[b-f1p9dztj7w] {
        padding: var(--space-4);
        gap: var(--space-3);
    }
}

.aip-section-host[b-f1p9dztj7w] {
    display: contents;
}
/* /Components/Cases/FactFind/FactFindExpenditure.razor.rz.scp.css */
/* Phase 34 Plan 04: FactFindExpenditure — case-scoped household Committed /
   Discretionary / read-only Monthly budget planner / Agreed budgets cards. Host
   chrome only; card + read-grid styles are owned by ProfileEditableCard.razor.css
   (::deep); form body by the shared AIP sub-forms. */

.fact-find-expenditure[b-z3667wfcen] {
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

@media (max-width: 640px) {
    .fact-find-expenditure[b-z3667wfcen] {
        padding: var(--space-4);
        gap: var(--space-3);
    }
}

.aip-section-host[b-z3667wfcen] {
    display: contents;
}
/* /Components/Cases/FactFind/FactFindIncome.razor.rz.scp.css */
/* Phase 34 Plan 03: FactFindIncome — case-scoped per-applicant Employment &
   income cards plus a single household Assets card. Host chrome only; card +
   read-grid styles are owned by ProfileEditableCard.razor.css (::deep); form
   body by the shared AIP sub-forms. */

.fact-find-income[b-91aqetvi31] {
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

@media (max-width: 640px) {
    .fact-find-income[b-91aqetvi31] {
        padding: var(--space-4);
        gap: var(--space-3);
    }
}

.aip-section-host[b-91aqetvi31] {
    display: contents;
}
/* /Components/Cases/FactFind/FactFindMortgage.razor.rz.scp.css */
/* Phase 34 Plan 02: FactFindMortgage — case-scoped per-applicant existing-
   mortgage cards. Host chrome only; card + read-grid styles are owned by
   ProfileEditableCard.razor.css (::deep); form body by ApplicantMortgageDetails. */

.fact-find-mortgage[b-o3n2nhytr9] {
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

@media (max-width: 640px) {
    .fact-find-mortgage[b-o3n2nhytr9] {
        padding: var(--space-4);
        gap: var(--space-3);
    }
}

.aip-section-host[b-o3n2nhytr9] {
    display: contents;
}
/* /Components/Cases/FactFind/FactFindPersonal.razor.rz.scp.css */
/* Phase 34 Plan 02: FactFindPersonal — case-scoped per-applicant Personal
   details cards. Host chrome only; card + read-grid styles are owned by
   ProfileEditableCard.razor.css (::deep); form body by ApplicantPersonalDetails. */

.fact-find-personal[b-d2oa1vnufp] {
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

@media (max-width: 640px) {
    .fact-find-personal[b-d2oa1vnufp] {
        padding: var(--space-4);
        gap: var(--space-3);
    }
}

.aip-section-host[b-d2oa1vnufp] {
    display: contents;
}
/* /Components/Cases/InviteClientToCaseModal.razor.rz.scp.css */
/* Quick-task 260720-ozy — Case Overview "+ Invite client" modal. Mirrors the invite
   step chrome from InviteForMortgageModal (scoped CSS is per-component, so the shared
   class names are re-declared here rather than inherited). */

.invite-step-heading[b-0y25rqjha1] {
    margin: 0 0 16px 0;
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
}

.invite-help[b-0y25rqjha1] {
    margin: 0 0 16px 0;
    color: var(--text-secondary);
    font-size: 14px;
}

.invite-pivot-inline[b-0y25rqjha1] {
    /* The nested CreateClientModal brings its own backdrop — this wrapper
       keeps it scoped visually inside the invite modal body. */
}
/* /Components/Cases/KybDisclosureModal.razor.rz.scp.css */
/* Phase 54 Plan 02 — the Know Your Business disclosure.

   TOKENS ONLY. No colour literal of any kind may appear in this file: the token lint fails
   the build on one, and a literal here would be invisible to the white-label system that
   re-skins this app per broker firm.

   The ≤768px full-screen modal behaviour is NOT re-declared here. It already ships in the
   Admin stylesheet (sticky header, flexing body, zero radius) and is inherited; a second copy
   would become a divergent source of truth for modal geometry.

   ::deep is required to reach design-system child markup — Blazor CSS isolation stamps this
   file's scope attribute only on elements declared in the .razor beside it, and a DsButton's
   own <button> carries the DESIGN SYSTEM's scope, not ours. 20+ stylesheets in this repo do
   the same for the same reason.

   Long text WRAPS and is never ellipsised, everywhere in this file. A clipped line on a phone
   is genuinely unavailable rather than merely tidy, because the tooltip that would reveal it
   is unreachable by touch. The ONE exception is a price figure, which carries the phase's
   only permitted no-wrap treatment so a number never breaks mid-figure. */

/* ===== The trigger, in the card's header actions slot ===== */

.kyb-trigger[b-3vufl5cfpp] {
    min-width: 0;
}

/* 44px, not the design system's 40px medium: the standing tap-target rule wins, and the
   min-height also keeps the control square-shouldered when its label wraps to two lines at a
   narrow width instead of clipping. */
.kyb-trigger[b-3vufl5cfpp]  .ds-btn {
    min-height: 44px;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: left;
}

/* ===== Modal body ===== */

.kyb-standfirst[b-3vufl5cfpp] {
    margin: 0 0 var(--space-5) 0;
    min-width: 0;
    color: var(--text-primary);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    overflow-wrap: anywhere;
}

/* The four blocks are siblings separated by one step of the scale. 2b and 2d are siblings of
   the people list, never children of it — see the component comment. */
.kyb-block[b-3vufl5cfpp] {
    min-width: 0;
    margin: 0 0 var(--space-5) 0;
}

.kyb-block:last-of-type[b-3vufl5cfpp] {
    margin-bottom: 0;
}

.kyb-block__heading[b-3vufl5cfpp] {
    margin: 0 0 var(--space-2) 0;
    min-width: 0;
    color: var(--text-primary);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-normal);
    overflow-wrap: anywhere;
}

.kyb-covers[b-3vufl5cfpp] {
    margin: 0;
    padding-left: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    color: var(--text-primary);
    font-size: var(--text-base);
    font-weight: var(--weight-regular);
    line-height: var(--leading-normal);
}

.kyb-covers li[b-3vufl5cfpp] {
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
}

/* Label left, figure right, on one wrapping flex row. The LABEL wraps and the FIGURE does
   not, so the row can never grow wider than its container and a price can never break across
   two lines mid-number. */
.kyb-price-row[b-3vufl5cfpp] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2);
    min-width: 0;
}

.kyb-price-row__label[b-3vufl5cfpp] {
    min-width: 0;
    color: var(--text-primary);
    font-size: var(--text-base);
    white-space: normal;
    overflow-wrap: anywhere;
}

.kyb-price-row__figure[b-3vufl5cfpp] {
    white-space: nowrap;
    color: var(--text-primary);
    font-size: var(--text-base);
}

.kyb-price-row__sub[b-3vufl5cfpp] {
    margin: var(--space-1) 0 0 0;
    min-width: 0;
    color: var(--text-muted);
    font-size: var(--text-xs);
    font-weight: var(--weight-regular);
    line-height: var(--leading-normal);
    overflow-wrap: anywhere;
}

/* The modal's single visual anchor: the largest-weight non-chrome element on the surface, and
   the only figure that changes as the broker interacts. Accent colour is deliberately
   withheld — it is reserved for interactive affordances, not for the number itself. */
.kyb-total__figure[b-3vufl5cfpp] {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
}

/* Mirrors .limited-company-directors__list: a company with many attached people must not push
   the total below the fold, so the LIST scrolls internally and the total stays outside it. */
.kyb-people__list[b-3vufl5cfpp] {
    list-style: none;
    margin: var(--space-1) 0 0 0;
    padding: 0;
    background: var(--surface-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    max-height: 320px;
    overflow-y: auto;
}

/* One person per row. The name and the two add-on cells sit on one wrapping flex row at 769px
   and above; the media query at the bottom of this file collapses the cells to full width. */
.kyb-person[b-3vufl5cfpp] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-4);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border-subtle);
    min-width: 0;
}

.kyb-person:last-child[b-3vufl5cfpp] {
    border-bottom: none;
}

/* Person names WRAP and are never ellipsised — the file-wide rule, and the same call
   .limited-company-directors__head makes about director names. */
.kyb-person__name[b-3vufl5cfpp] {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--text-primary);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-normal);
    white-space: normal;
    overflow-wrap: anywhere;
}

.kyb-person__addons[b-3vufl5cfpp] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-4);
    min-width: 0;
}

.kyb-person__addon[b-3vufl5cfpp] {
    min-width: 0;
}

/* The 44px tap target and the ticked-state accent come from the design system's own checkbox
   and are inherited rather than restated. Only the wrapping is ours. */
.kyb-person__addon[b-3vufl5cfpp]  .ds-checkbox {
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
}

/* The already-on-file hint. MUTED, never the success palette — a broker who reads a green tick
   beside a person as "this person is cleared" would skip the firm's own check, which is a
   compliance failure rather than a visual one. It is not that; it means one specific check
   exists on file. Phase 53 made the identical call for its registry marker (T-53-05). */
.kyb-person__addon[b-3vufl5cfpp]  .ds-checkbox__hint {
    color: var(--text-muted);
    font-size: var(--text-xs);
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
}

/* The read is in flight. Muted and quiet: it is a temporary absence of information, not a
   fault, and blocks 2a and 2b are already complete beside it. */
.kyb-status[b-3vufl5cfpp] {
    margin: var(--space-1) 0 0 0;
    min-width: 0;
    color: var(--text-muted);
    font-size: var(--text-xs);
    font-weight: var(--weight-regular);
    line-height: var(--leading-normal);
    overflow-wrap: anywhere;
}

/* The read failed. The only error surface in the phase, using the existing danger tokens. */
.kyb-error[b-3vufl5cfpp] {
    margin: var(--space-1) 0 0 0;
    padding: var(--space-2) var(--space-3);
    min-width: 0;
    background: var(--danger-bg);
    color: var(--danger-fg);
    border-radius: var(--radius-md);
    font-size: var(--text-xs);
    font-weight: var(--weight-regular);
    line-height: var(--leading-normal);
    white-space: normal;
    overflow-wrap: anywhere;
}

.kyb-empty[b-3vufl5cfpp] {
    margin: var(--space-1) 0 0 0;
    min-width: 0;
}

.kyb-empty__body[b-3vufl5cfpp] {
    margin: 0;
    min-width: 0;
    color: var(--text-muted);
    font-size: var(--text-xs);
    font-weight: var(--weight-regular);
    line-height: var(--leading-normal);
    overflow-wrap: anywhere;
}

/* ===== Modal footer ===== */

/* THE SINGLE CHILD the shared modal shell is handed, and the whole of the G-54-1 fix.

   The shell's footer container declares no flex-wrap and therefore defaults to nowrap. Given
   two children it split one un-wrappable row between them; measured at 580px the action group
   came out 136px wide, pinned right, with the primary label on four lines. A full-width basis
   on a SINGLE child leaves that nowrap with nothing to split, so the row is ours.

   From here down the geometry is this component's own. Nothing in this file names a selector
   belonging to the shared shell — it is a different component's scope behind roughly thirty
   modals (PR-10), and this file's scope attribute could never match it anyway. */
.kyb-footer[b-3vufl5cfpp] {
    flex: 1 1 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
}

/* Full width on its own line ABOVE the button row, at every width — which is what the comment
   here has always claimed and what the shell's nowrap prevented until 54-10. The wrapper's gap
   owns the spacing its bottom margin used to. No flex basis: inside a column container that
   would address the wrong axis.

   Muted rather than the danger palette: this is informational — the firm has not switched the
   feature on — not a fault the broker caused. */
.kyb-reason[b-3vufl5cfpp] {
    margin: 0;
    min-width: 0;
    color: var(--text-muted);
    font-size: var(--text-xs);
    font-weight: var(--weight-regular);
    line-height: var(--leading-normal);
    white-space: normal;
    overflow-wrap: anywhere;
}

/* HORIZONTAL at every width, right-aligned. The row direction is stated explicitly rather than
   left to the default, because "both controls on the bottom row, side by side" is what the user
   asked for in as many words and the rule should read as such. Still wrapping, so a long label
   at an extreme width drops the second control to its own line rather than overflowing. */
.kyb-footer-actions[b-3vufl5cfpp] {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-2);
    min-width: 0;
}

.kyb-footer-actions[b-3vufl5cfpp]  .ds-btn {
    min-height: 44px;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
}

/* THIS IS NOT A DUPLICATE OF THE DESIGN SYSTEM'S DISABLED RULE — do not delete it as one.

   Plan 54-10 (gap G-54-3c) removed the NATIVE disabled attribute from the primary control on
   purpose: it took the control out of the tab order, so it could never show a focus ring and its
   aria-describedby reason was never announced on it. The design system's dimming and cursor key
   off that native attribute, so dropping it would silently leave a permanently unavailable
   control looking like an ordinary primary button. Mirrors the design system's own values. */
.kyb-footer-actions[b-3vufl5cfpp]  .ds-btn[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: 0.6;
}

/* Same reason, second consequence. The design system's hover rules exclude only :not(:disabled),
   so with the native attribute gone an unavailable control would light up under the pointer.
   Restating the BASE primary background and border neutralises the hover. Tokens only — a
   literal fails the colour lint and is invisible to the white-label system. */
.kyb-footer-actions[b-3vufl5cfpp]  .ds-btn--primary[aria-disabled="true"]:hover {
    background: var(--brand-accent);
    border-color: var(--brand-accent-border);
}

/* ≤640px the two add-on cells stack to full width, mirroring
   .limited-company-directors__fields. This is the "tables become cards" collapse the standing
   responsive rule asks for: below 641px each add-on sits on its own line under the person's
   name. At 580px nothing scrolls horizontally.

   The two footer controls are deliberately NOT collapsed here. 54-06 stacked them and stretched
   them, and the stretch resolved against the 136px group the shell had pinned rather than
   against the modal, inverting the intent into the four-line label G-54-1 reported. With the
   wrapper owning the full row there is nothing left to collapse — and stacking them is the
   arrangement the user explicitly rejected. */
@media (max-width: 640px) {
    .kyb-person__name[b-3vufl5cfpp] {
        flex: 1 1 100%;
    }

    .kyb-person__addons[b-3vufl5cfpp] {
        flex: 1 1 100%;
    }

    .kyb-person__addon[b-3vufl5cfpp] {
        flex: 1 1 100%;
    }
}
/* /Components/Cases/LeadSourcePill.razor.rz.scp.css */
/* Quick-task 260804-r4d — lead source pill. Mirrors .status-pill's metrics so
   the two line up on the same baseline, but outlined rather than filled: the
   status pill is the thing that changes and matters, this is stable metadata
   about where the case came from. Tokens only. */

.lead-source-pill[b-cxifdqd0kn] {
    display: inline-flex;
    align-items: center;
    font-size: var(--text-xs);
    font-weight: 600;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    line-height: 1.4;
    white-space: nowrap;
    background-color: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--topbar-border);
}
/* /Components/Cases/LimitedCompanySection.razor.rz.scp.css */
/* Phase 53-06 / SPV-01 — the limited-company block inside CreateCaseModal field 3.
   Every colour resolves through a design token so a tenant retheme reaches this block
   (CLAUDE.md white-label rule). This file is not in the Phase 12 hex baseline and must not
   need to be. */

.limited-company-section[b-quv1fbhax7] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.limited-company-section__degraded[b-quv1fbhax7] {
    color: var(--text-muted);
    margin: 0;
}

/* Info palette, deliberately NOT brand accent: the card is a confirmation surface, not a
   call to action. */
.limited-company-card[b-quv1fbhax7] {
    background: var(--info-bg);
    border: 1px solid var(--info);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.limited-company-card__title-row[b-quv1fbhax7] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

/* The registered legal name WRAPS and is never ellipsised — the opposite rule from the
   typeahead row, and deliberately so: a truncated legal name on the card the broker is
   confirming is a compliance problem, not a layout one. */
.limited-company-card__name[b-quv1fbhax7] {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--info-fg);
    font-size: var(--text-sm);
    font-weight: 600;
    white-space: normal;
    overflow-wrap: anywhere;
}

.limited-company-card__meta[b-quv1fbhax7] {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--text-sm);
    font-weight: 400;
    overflow-wrap: anywhere;
}

.limited-company-card__clear[b-quv1fbhax7] {
    margin-left: auto;
    flex: 0 0 auto;
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: var(--text-base);
    line-height: 1;
    cursor: pointer;
}

.limited-company-card__clear:hover[b-quv1fbhax7],
.limited-company-card__clear:focus-visible[b-quv1fbhax7] {
    color: var(--danger);
    border-color: var(--border-subtle);
}

.limited-company-card__clear:focus-visible[b-quv1fbhax7] {
    outline: none;
    box-shadow: var(--focus-ring);
}

/* ===== Block 4 — directors list (plan 53-08) ===== */

.limited-company-directors[b-quv1fbhax7] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.limited-company-directors__heading[b-quv1fbhax7],
.limited-company-directors__hint[b-quv1fbhax7] {
    margin: 0;
}

/* The container the rows live in. Capped at the SAME geometry as the typeahead dropdown: a
   company with fifteen directors, each ticked row adding two inline inputs, would otherwise
   push the Create case button far below the fold.

   Paired requirement, landing in plan 53-09: because a row can now sit outside the visible
   area, a failed submit must bring the first invalid row into view and focus its email input.
   A validation message firing on a row scrolled out of sight inside a nested scroll container
   is a dead end for sighted and screen-reader users alike. */
.limited-company-directors__list[b-quv1fbhax7] {
    list-style: none;
    margin: var(--space-1) 0 0 0;
    padding: 0;
    background: var(--surface-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    max-height: 320px;
    overflow-y: auto;
}

.limited-company-directors__row[b-quv1fbhax7] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border-subtle);
    /* Plan 53-09 — the paired requirement for the cap above has landed: a failed submit scrolls the
       first invalid row into view with `block: 'nearest'`. Without a scroll margin, "nearest" parks
       the row flush against the container edge, half-clipped by the 1px border, which reads as a row
       that is still cut off. One row gap of breathing room on each side is enough. */
    scroll-margin-block: var(--space-3);
}

.limited-company-directors__row:last-child[b-quv1fbhax7] {
    border-bottom: none;
}

.limited-company-directors__head[b-quv1fbhax7] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

/* 44px tap target on the checkbox row, and the display name WRAPS. Director names are never
   ellipsised — that rule belongs to the typeahead row alone. */
.limited-company-directors__head > :global(.ds-checkbox)[b-quv1fbhax7] {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    white-space: normal;
    overflow-wrap: anywhere;
}

/* The meta line sits on its OWN line beneath the name. */
.limited-company-directors__meta[b-quv1fbhax7] {
    margin: 0;
    color: var(--text-muted);
    font-size: var(--text-xs);
    font-weight: 400;
    overflow-wrap: anywhere;
}

/* T-53-05: muted neutral, never the success palette. See the component comment — a broker who
   reads a green tick beside a director as "ID check done" skips the firm's own check, which is
   a compliance failure rather than a visual one. */
.limited-company-directors__eccta[b-quv1fbhax7] {
    color: var(--text-muted);
    white-space: normal;
}

.limited-company-directors__eccta > i[b-quv1fbhax7] {
    font-size: 12px;
    margin-right: var(--space-1);
}

.limited-company-directors__undo[b-quv1fbhax7] {
    margin-left: auto;
    flex: 0 0 auto;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    background: transparent;
    border: none;
    padding: 0 var(--space-2);
    color: var(--text-secondary);
    font-size: var(--text-sm);
    font-weight: 400;
    cursor: pointer;
}

.limited-company-directors__undo:hover[b-quv1fbhax7],
.limited-company-directors__undo:focus-visible[b-quv1fbhax7] {
    text-decoration: underline;
}

.limited-company-directors__undo:focus-visible[b-quv1fbhax7] {
    outline: none;
    box-shadow: var(--focus-ring);
    border-radius: var(--radius-sm);
}

.limited-company-directors__matched-hint[b-quv1fbhax7] {
    margin: 0;
}

.limited-company-directors__fields[b-quv1fbhax7] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.limited-company-directors__fields > :global(.ds-field)[b-quv1fbhax7] {
    flex: 1 1 200px;
    min-width: 0;
}

.limited-company-directors__fields :global(.ds-field__input)[b-quv1fbhax7] {
    min-height: 44px;
}

/* WR-01 — the blocked-duplicate notice sits INSIDE the flex row that holds the email and phone
   fields, so it needs its own full-width line. Without the 100% basis it becomes a third flex item
   and is squeezed into a sliver beside them — the message is the whole point of the row. */
.limited-company-directors__blocked-dup[b-quv1fbhax7] {
    flex: 1 1 100%;
    margin: 0;
}

/* ≤640px the two inline fields stack; at 580px neither the row nor the container may scroll
   horizontally. */
@media (max-width: 640px) {
    .limited-company-directors__fields > :global(.ds-field)[b-quv1fbhax7] {
        flex: 1 1 100%;
    }
}

/* ≤640px the title row wraps its badges below the name and the clear control stays top-right
   at 44 by 44. The card never scrolls internally. */
@media (max-width: 640px) {
    .limited-company-card__name[b-quv1fbhax7] {
        flex: 1 1 100%;
        order: 1;
        max-width: calc(100% - 52px);
    }

    .limited-company-card__clear[b-quv1fbhax7] {
        order: 0;
    }

    .limited-company-card__title-row > :global(.ds-badge)[b-quv1fbhax7] {
        order: 2;
    }
}
/* /Components/Cases/Panels/AiNotesPanel.razor.rz.scp.css */
/* Phase 26 Plan 05 — AiNotesPanel chrome.
   Tokens-only (no hex literals). Accent reserved per UI-SPEC for primary CTAs +
   Refresh; secondary/ghost buttons stay neutral.

   PHASE 49 D-08 REMOVED THE DRAWER FROM THE OVERVIEW TAB. The panel now has
   exactly ONE render site in the solution — CaseDetail.razor:97, always with
   Standalone="true" — so the drawer-only rules below became UNREACHABLE and are
   deleted deliberately: .is-collapsed, __rail, __rail-label, __header, the whole
   .ai-snapshot family (the snapshot renders only when !Standalone), and the
   reduced-motion padding transition that animated the collapse.

   THIS HAD TO BE DONE BY HAND. There is no dead-CSS lint in this repository, so
   nothing would ever have reported these rules as unreachable, and the next
   reader would have had to re-derive that the drawer no longer exists before
   daring to touch them. */

.ai-notes-panel[b-3c4pi10x2e] {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    background: var(--surface-secondary);
    border-radius: var(--radius-md);
    padding: var(--space-4);
}

/* Phase 34 — standalone Notes section: drop the drawer surface/padding so the
   cards sit on the page background (matching the other case sections) and let
   the section fill the full case-detail body width. */
.ai-notes-panel--standalone[b-3c4pi10x2e] {
    background: transparent;
    padding: 0;
}

/* The Notes section is a full-width workspace, not a form — so the AI chat card,
   the note/task text areas, and the date/select fields fill their card instead
   of the 480px form-field cap the DS applies elsewhere. Scoped to standalone via
   ::deep so the Overview drawer and every other form keep the readable cap. */
.ai-notes-panel--standalone[b-3c4pi10x2e]  .ds-conversation-card {
    max-width: none;
    margin: 0;
}

.ai-notes-panel--standalone[b-3c4pi10x2e]  .ds-field__textarea,
.ai-notes-panel--standalone[b-3c4pi10x2e]  .ds-field__input,
.ai-notes-panel--standalone[b-3c4pi10x2e]  .ds-field__input-wrap {
    max-width: none;
}

/* ===== AI section ===== */
.ai-summary[b-3c4pi10x2e] {
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--text-primary);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.ai-summary__meta[b-3c4pi10x2e] {
    margin-top: var(--space-2);
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.ai-streaming-status[b-3c4pi10x2e] {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin-bottom: var(--space-2);
}

.ai-actions[b-3c4pi10x2e] {
    margin-top: var(--space-4);
}

.ai-notice[b-3c4pi10x2e] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3);
    border-radius: var(--radius-sm);
    margin-top: var(--space-3);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
}

.ai-notice p[b-3c4pi10x2e] {
    margin: 0;
}

.ai-notice--info[b-3c4pi10x2e] {
    background: var(--info-bg);
    color: var(--info-fg);
}

.ai-notice--warning[b-3c4pi10x2e] {
    background: var(--warning-bg);
    color: var(--warning-fg);
}

.ai-feedback[b-3c4pi10x2e] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-3);
}

.ai-feedback__confirm[b-3c4pi10x2e] {
    font-size: var(--text-xs);
    color: var(--text-secondary);
}

.ai-chat-log[b-3c4pi10x2e] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.ai-chat-bubble[b-3c4pi10x2e] {
    padding: var(--space-3);
    border-radius: var(--radius-sm);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    overflow-wrap: anywhere;
    max-width: 100%;
}

.ai-chat-bubble--user[b-3c4pi10x2e] {
    background: var(--surface-tertiary);
    color: var(--text-primary);
    align-self: flex-end;
}

.ai-chat-bubble--assistant[b-3c4pi10x2e] {
    background: var(--surface-primary);
    color: var(--text-primary);
    align-self: flex-start;
}

.ai-chat-compose[b-3c4pi10x2e] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* ===== Compose block (page notes) ===== */
.ai-compose[b-3c4pi10x2e] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

/* ===== Notes list ===== */
.ai-note-list[b-3c4pi10x2e] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.ai-note[b-3c4pi10x2e] {
    background: var(--surface-primary);
    border-radius: var(--radius-sm);
    padding: var(--space-3);
}

.ai-note__body[b-3c4pi10x2e] {
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--text-primary);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.ai-note__meta[b-3c4pi10x2e] {
    margin-top: var(--space-1);
    font-size: var(--text-xs);
    color: var(--text-muted);
}

/* ===== Tasks list — DELETED (Phase 49 D-07) =====
   .ai-task / .ai-task__body / .ai-task__desc / .ai-task__meta and the
   .is-complete line-through went with the Tasks card this stylesheet's component no
   longer renders. Blazor scope attributes mean the rules could never have matched
   the checklist card's task rows, so leaving them would have been dead weight that
   reads as "the panel still does tasks". The live versions are in
   Components/Cases/Tasks/CaseTaskRow.razor.css. */

/* ===== Mobile: 44px tap targets on every interactive control at <=640px ===== */
@media (max-width: 640px) {
    .ai-notes-panel[b-3c4pi10x2e]  .ds-btn {
        min-height: 44px;
    }
}
/* /Components/Cases/Panels/ClientDetailsPanel.razor.rz.scp.css */
/* Phase 21 Plan 04 — ClientDetailsPanel chrome. Reuses --danger token set
   (VulnerabilityBanner precedent) for the inline vuln flag. Zero hex literals. */

.client-details-panel[b-bt960v25g8] {
    width: 100%;
}

.vuln-flag[b-bt960v25g8] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    margin-bottom: var(--space-3);
    background: var(--danger-bg);
    color: var(--danger-fg);
    border: 1px solid var(--danger);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    line-height: 1.3;
}

.vuln-flag i[b-bt960v25g8] {
    color: var(--danger);
    flex-shrink: 0;
}

.field-row[b-bt960v25g8] {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--border-subtle);
    font-size: var(--text-base);
}

.field-row:last-child[b-bt960v25g8] {
    border-bottom: 0;
}

.field-label[b-bt960v25g8] {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--text-secondary);
}
/* /Components/Cases/Tabs/TabAip.razor.rz.scp.css */
.tab-aip[b-teulwoetn6] {
    padding: var(--space-4, 1rem) 0;
}

.aip-toggle[b-teulwoetn6] {
    display: inline-flex;
    gap: 0;
    border-bottom: 1px solid var(--ds-border, #e5e7eb);
    margin-bottom: var(--space-4, 1rem);
}

.aip-toggle__seg[b-teulwoetn6] {
    appearance: none;
    background: transparent;
    border: 0;
    padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
    min-height: 44px;
    font: inherit;
    color: var(--ds-text-muted, #6b7280);
    cursor: pointer;
    border-bottom: 2px solid transparent;
}

.aip-toggle__seg[data-active="true"][b-teulwoetn6] {
    color: var(--brand-accent, var(--brand-primary, #4f46e5));
    border-bottom-color: var(--brand-accent, var(--brand-primary, #4f46e5));
    font-weight: 600;
}

.aip-toggle__seg:focus-visible[b-teulwoetn6] {
    outline: 2px solid var(--brand-accent-focus, var(--brand-accent, #4f46e5));
    outline-offset: 2px;
}

.aip-overflow-note[b-teulwoetn6] {
    background: var(--ds-info-bg, #eef2ff);
    color: var(--ds-info-text, #3730a3);
    padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
    border-radius: 6px;
    margin: 0 0 var(--space-4, 1rem);
    font-size: 0.9rem;
}

.aip-form-root[b-teulwoetn6] {
    padding-top: var(--space-2, 0.5rem);
}
/* /Components/Cases/Tabs/TabCompliance.razor.rz.scp.css */
/* Phase 12 Plan 10: TabCompliance retokenised (UI-04 light re-skin) — zero hex.
   DirtyGuard opt-out: the checklist does not use a Save button — each milestone-
   date change and each document generation persists immediately through its own
   endpoint. Token-only CSS rewrite per plan. */

.section-header[b-sf1ob4t9jj] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-4);
}

.section-header h3[b-sf1ob4t9jj] {
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    margin: 0;
}

.empty-state[b-sf1ob4t9jj] {
    color: var(--text-muted);
    font-size: var(--text-sm);
}

.form-error[b-sf1ob4t9jj] {
    color: var(--danger-fg);
    margin-top: var(--space-2);
    font-size: var(--text-sm);
}

.compliance-table[b-sf1ob4t9jj] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
}

.compliance-table thead th[b-sf1ob4t9jj] {
    text-align: left;
    font-weight: var(--weight-semibold);
    font-size: var(--text-sm);
    color: var(--text-muted);
    padding: var(--space-2) var(--space-3);
    border-bottom: 2px solid var(--border-subtle);
}

.col-name[b-sf1ob4t9jj] { width: auto; }
.col-status[b-sf1ob4t9jj] { width: 120px; }
.col-date[b-sf1ob4t9jj] { width: 140px; }
.col-actions[b-sf1ob4t9jj] { width: 160px; }

.compliance-row[b-sf1ob4t9jj] {
    border-bottom: 1px solid var(--border-subtle);
}

.compliance-row:hover[b-sf1ob4t9jj] {
    background: var(--surface-tertiary);
}

.compliance-row td[b-sf1ob4t9jj] {
    padding: var(--space-2) var(--space-3);
    vertical-align: middle;
}

.status-badge[b-sf1ob4t9jj] {
    display: inline-block;
    padding: var(--space-1) var(--space-2);
    border-radius: 999px;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    white-space: nowrap;
}

.status-badge.not-generated[b-sf1ob4t9jj] {
    background: var(--surface-tertiary);
    color: var(--text-secondary);
}

.status-badge.generating[b-sf1ob4t9jj] {
    background: var(--info-bg);
    color: var(--info-fg);
}

.status-badge.ready[b-sf1ob4t9jj] {
    background: var(--success-bg);
    color: var(--success-fg);
}

.status-badge.failed[b-sf1ob4t9jj] {
    background: var(--danger-bg);
    color: var(--danger-fg);
}

.doc-link[b-sf1ob4t9jj] {
    color: var(--brand-accent);
    text-decoration: none;
    cursor: pointer;
}

.doc-link:hover[b-sf1ob4t9jj] {
    text-decoration: underline;
}

.download-link[b-sf1ob4t9jj] {
    color: var(--brand-accent);
    text-decoration: none;
    font-size: var(--text-sm);
    margin-left: var(--space-2);
}

.download-link:hover[b-sf1ob4t9jj] {
    text-decoration: underline;
}

/* Phase 55 (D-55-2 / REC-07) — the gated Suitability Letter control's visible reason.

   max-width is a CONTAINMENT value, not a spacing one. This table has ZERO @media blocks: it never
   collapses to cards, so at 580px it is the only thing standing between this phase and a wider
   Compliance table. 22ch at --text-xs is approximately the rendered width of the widest button
   already in the 160px .col-actions column, so the column's intrinsic width is unchanged.

   Deliberately NO `white-space: nowrap` — the reason is four words and must wrap, not push. */
.gate-reason[b-sf1ob4t9jj] {
    display: block;
    max-width: 22ch;
    font-size: var(--text-xs);
    overflow-wrap: anywhere;
    margin-top: var(--space-1);
}

/* The 44px tap-target floor, declared EXPLICITLY. Unlike QuoteResultsTable's .results-actions,
   this table has no responsive block for the control to inherit one from. */
.col-actions .btn.disabled[b-sf1ob4t9jj] {
    min-height: 44px;
}

.generation-error[b-sf1ob4t9jj] {
    display: block;
    color: var(--danger-fg);
    font-size: var(--text-sm);
    margin-top: var(--space-1);
}

.history-toggle-row td[b-sf1ob4t9jj] {
    padding: 2px var(--space-3) var(--space-2);
    border-bottom: none;
}

.history-toggle[b-sf1ob4t9jj] {
    color: var(--brand-accent);
    text-decoration: none;
    font-size: var(--text-sm);
    cursor: pointer;
}

.history-toggle:hover[b-sf1ob4t9jj] {
    text-decoration: underline;
}

.version-history[b-sf1ob4t9jj] {
    background: var(--surface-tertiary);
}

.version-history td[b-sf1ob4t9jj] {
    font-size: var(--text-sm);
    color: var(--text-muted);
}

.version-name[b-sf1ob4t9jj] {
    padding-left: var(--space-6) !important;
}

.milestone-row td[b-sf1ob4t9jj] {
    padding: var(--space-2) var(--space-3);
}

.milestone-date[b-sf1ob4t9jj] {
    max-width: 200px;
}

.drive-status[b-sf1ob4t9jj] {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-left: var(--space-1);
    vertical-align: middle;
    flex-shrink: 0;
}

.drive-status--uploaded[b-sf1ob4t9jj] { color: var(--success); }
.drive-status--pending[b-sf1ob4t9jj] { color: var(--warning); }
.drive-status--failed[b-sf1ob4t9jj] { color: var(--danger); }
.drive-status--none[b-sf1ob4t9jj] { color: var(--text-muted); }
/* /Components/Cases/Tabs/TabIdAml.razor.rz.scp.css */
.idaml-client-block + .idaml-client-block[b-vvmwwwmc3h] {
    margin-top: 2.5rem;
}
/* /Components/Cases/Tabs/TabOverview.razor.rz.scp.css */
/* Phase 21 Plan 04 — TabOverview adaptive grid chrome.
   All spacing via --space-*; no hex literals.

   HISTORY. Phase 26 Plan 05 (D-09) added a two-column `.overview-layout` grid
   (body + AI drawer rail) with a 768px collapse. PHASE 49 D-08 DELETED BOTH,
   because the drawer's Case snapshot duplicated the Property and Loan panels
   sitting directly beside it (`Valuation` aliased to purchase price).

   QUICK-TASK 260806-hop — A RAIL IS BACK, FOR THE CHECKLIST, and it is a
   different thing from the drawer: it holds `CaseChecklistCard` and nothing else,
   the checklist restates no panel value (it links to the tabs that own them), and
   its wrapper is `.overview-rail` — never `.overview-layout`, whose absence a live
   Playwright fact still pins. The broker's complaint was wasted white space: a
   full-width checklist and a full-width Solicitor card on a wide desktop.

   THE BREAKPOINT IS 1200px, NOT 768px. The rail takes ~24rem out of the width the
   applicant grid used to have. At a 768px viewport, after 250px of sidebar and
   three levels of horizontal padding, the left column would be left with nothing
   usable — so the two-column layout only turns on where there is room for it.
   Below 1200px this tab is exactly what shipped before: a single flex column.

   THE RAIL'S STICKINESS IS NOT SELF-CONTAINED. It depends on `.case-detail-page`
   staying a NON-scroll-container (`overflow-x: clip`, see CaseDetail.razor.css).
   Reverting that one declaration to `hidden` kills the sticky behaviour silently,
   with no console error. `TabOverviewLayoutTests` guards it.

   The 900px and 640px rules below predate all of this. */

.tab-overview[b-3tnkvr8z0d] {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    padding: var(--space-5);
    min-width: 0;

    /* Quick-task 260806-hop — 24rem (384px) sits inside the 380-420px the broker
       asked for. A FIXED track, deliberately: a `minmax()` track beside a `1fr`
       sibling collapses to its own minimum as soon as the row is tight, which is
       precisely the wide-desktop case this layout exists for. Declared here rather
       than in the media query so the value has one home. */
    --overview-rail-w: 24rem;
}

/* Quick-task 260806-hop — the narrow layout must be byte-identical in appearance
   to what shipped before the split, so .overview-main reproduces the flex column
   its children used to sit in directly. */
.overview-main[b-3tnkvr8z0d] {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    min-width: 0;
}

/* Quick-task 260806-hop — the whole rail layout, in one viewport media query.
   Nothing below 1200px is touched by it. */
@media (min-width: 1200px) {
    .tab-overview[b-3tnkvr8z0d] {
        display: grid;
        /* minmax(0, 1fr) is load-bearing: a bare `1fr` keeps a min-content floor,
           so one long unbroken string inside a panel would push the whole grid
           wider than the page and reintroduce horizontal scroll. */
        grid-template-columns: minmax(0, 1fr) var(--overview-rail-w);
        /* Also load-bearing: a stretched grid item is as tall as its row, and a
           sticky element that is already as tall as its containing block has
           nowhere to travel — sticky becomes a silent no-op. */
        align-items: start;
    }

    /* Explicit placement is what puts a DOM-FIRST element in the RIGHT-HAND column
       without an `order` hack — reading and tab order stay checklist-first. */
    .overview-rail[b-3tnkvr8z0d] {
        grid-column: 2;
        grid-row: 1;
        position: sticky;
        top: calc(var(--topbar-height) + var(--space-4));

        /* Quick-task 260806-m9t — THE RAIL IS NOT A SCROLL CONTAINER, AND MUST NOT
           BECOME ONE AGAIN. 260806-hop capped this rail's height and gave it
           `overflow-y: auto` + `overscroll-behavior: contain`. Both are deleted here.
           Do not re-add either, or the max-height they needed.

           WHAT THE CAP COST. `overscroll-behavior: contain` on a rail that had hit
           its own end stops scroll CHAINING: with the pointer anywhere over the rail
           the PAGE STOPPED DEAD, and the broker could not reach the bottom of the
           left-hand column at all. That is the bug being removed.

           WHY THE PREMISE WAS WRONG. The cap was justified by "a sticky element
           taller than the viewport pins its top and puts its bottom permanently out
           of reach". A sticky element is not constrained by the viewport — it is
           constrained by its GRID AREA, and can be offset by at most
           (area height − element height). `.tab-overview` sets `align-items: start`,
           so this rail is CONTENT-height and the grid row is as tall as the taller
           column. Therefore, when the checklist is the tallest thing on the tab (the
           normal case: 20+ broker rows plus a group per applicant) the travel room is
           ZERO — sticky is inert and the card simply scrolls with the page. Sticky
           only engages when the card is SHORTER than the left column, which is exactly
           when it fits on screen and is worth keeping in view.

           AND STICKY NEVER REMOVES CONTENT FROM FLOW. It delays it, and the delay is
           bounded by the grid area, whose bottom edge is reachable by ordinary page
           scroll. So the bottom of a tall card is always reachable — no mechanism
           required, and none added: no nested scroller, no second scrollbar, no JS.

           `align-items: start` above is therefore load-bearing twice over; its own
           comment stays. Measured by OverviewRailScrollTests (Playwright, 2000x1112,
           two-applicant seed) and pinned by TabOverviewLayoutTests. */
    }

    .overview-main[b-3tnkvr8z0d] {
        grid-column: 1;
        grid-row: 1;
    }
}

/* Quick-task 260720-ozy — header row above the applicant cards. It carried the
   "+ Invite client" action alongside the title.

   QUICK-TASK 260806-m9t — the button left: the invite is a CASE-level action and
   now sits on the case title row above the tab strip (CaseDetail.razor), reachable
   from every tab. So today this row holds the "Applicants" heading alone, and it is
   kept — not flattened into the h3 — because the heading takes its spacing and its
   place in the flow from this wrapper, and because a future per-section action
   would land here and want the flex/gap/wrap rules already below. The matching
   `::deep .ds-btn { min-height: 44px }` rule was deleted with the button; the
   tap-target floor now lives with the button, in CaseDetailHeader.razor.css. */
.overview-clients-header[b-3tnkvr8z0d] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.overview-clients-title[b-3tnkvr8z0d] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.overview-clients[b-3tnkvr8z0d] {
    display: grid;
    gap: var(--space-5);
}

/* Quick-task 260806-hop — content-sized tracks, not a fixed pair. These respond to
   the CONTAINER width, so when the rail takes 24rem out of the row the applicant
   panels collapse to one per row ON THEIR OWN: no viewport breakpoint has to guess
   at it, and the C# `data-layout` contract that TabOverviewLayoutTests pins is
   untouched (it is a semantic fact — how many applicants there are — not a visual
   one).

   QUICK-TASK 260806-m9t — auto-FIT here, and only here. 260806-hop chose auto-fill
   so a single-applicant case kept a half-width card. In the browser that measured as
   a 387px card with a 411px HOLE beside it — which IS the wasted-white-space
   complaint the two-column layout exists to answer, so the broker asked for the empty
   track to collapse. `auto-fit` collapses it and the one applicant fills the column.
   With two applicants both tracks are occupied either way, and three or more take the
   `stack` layout below, so this changes the ONE-applicant case and nothing else.

   THE TWO RULES NOW DELIBERATELY DIFFER: `.overview-panels` below keeps auto-fill. It
   always holds three panels, so its first row occupies both tracks and auto-fit would
   collapse nothing there — switching it would be a no-op today with a non-zero chance
   of being wrong later. A find-and-replace of one value for the other across this file
   is therefore a bug; TabOverviewLayoutTests pins both values in a single fact. */
.overview-clients[data-layout="grid"][b-3tnkvr8z0d] {
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
}

/* 3+ applicants stay one per row regardless of available width. */
.overview-clients[data-layout="stack"][b-3tnkvr8z0d] {
    grid-template-columns: 1fr;
}

/* Quick-task 260806-hop — renamed (it used to name only its first two occupants):
   Solicitor now lives in this grid too and occupies one track on the second row,
   aligned with Property and Loan above it, instead of spanning the page as a bare
   sibling. */
.overview-panels[b-3tnkvr8z0d] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
    gap: var(--space-5);
}

/* Responsive: tighten the gaps below 900px. The grid-template-columns overrides
   that used to live here are gone — quick-task 260806-hop's auto-fill tracks
   already collapse to one column at this width on their own. */
@media (max-width: 900px) {
    .overview-clients[b-3tnkvr8z0d],
    .overview-panels[b-3tnkvr8z0d] {
        gap: var(--space-4);
    }
}

/* Mobile: tighten outer padding so no horizontal scroll at 580px. */
@media (max-width: 640px) {
    .tab-overview[b-3tnkvr8z0d] {
        padding: var(--space-4);
        gap: var(--space-4);
    }
}

/* Solicitor search row inside SolicitorPanel — keeps input + button on one line at
   desktop, stacks on mobile, and ensures the 44px tap target on the button. */
.tab-overview[b-3tnkvr8z0d]  .solicitor-search {
    display: flex;
    gap: var(--space-3);
    align-items: flex-end;
    margin-top: var(--space-3);
    /* Quick-task 260806-hop — see the flex-basis note below. */
    flex-wrap: wrap;
}

.tab-overview[b-3tnkvr8z0d]  .solicitor-search .ds-field {
    /* Quick-task 260806-hop — an explicit 12rem basis rather than `flex: 1`
       (basis 0). In the rail layout the Solicitor card can be ~329px wide at
       1500px; with a zero basis the input would shrink to a sliver beside the
       button. With a real basis it holds its ground and the button wraps to its
       own line instead. */
    flex: 1 1 12rem;
    min-width: 0;
}

.tab-overview[b-3tnkvr8z0d]  .solicitor-search .ds-btn {
    min-height: 44px;
}

@media (max-width: 640px) {
    .tab-overview[b-3tnkvr8z0d]  .solicitor-search {
        flex-direction: column;
        align-items: stretch;
    }
}
/* /Components/Cases/Tabs/TabProtection.razor.rz.scp.css */
/* Phase 42 Plan 08 — broker Protection tab chrome. DS v2 tokens only (no hard-coded colour);
   responsive: no horizontal scroll @580px, tap targets >=44px. The action bar sits below the
   shared ProtectionForm with a --space-6 top margin per UI-SPEC. */

.tab-protection[b-m2cx5cyqal] {
    max-width: 100%;
    overflow-x: hidden;
}

.tab-protection__submitted[b-m2cx5cyqal] {
    margin-bottom: var(--space-4);
}

.tab-protection__conflict[b-m2cx5cyqal] {
    color: var(--warning);
    background: var(--info-bg);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-4);
}

/* Sticky-bottom action bar. Wraps on narrow viewports; every control keeps a 44px tap target. */
.tab-protection__actions[b-m2cx5cyqal] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-6);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border-subtle);
}

/* Submit is the primary action anchor — push it to the trailing edge on wide screens. */
.tab-protection__actions > :last-child[b-m2cx5cyqal] {
    margin-inline-start: auto;
}

.tab-protection__request[b-m2cx5cyqal] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.tab-protection__request-meta[b-m2cx5cyqal] {
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.tab-protection__actions[b-m2cx5cyqal]  .ds-btn {
    min-height: 44px;
}

/* Below 641px the action bar stacks so nothing is clipped at 580px. */
@media (max-width: 640px) {
    .tab-protection__actions[b-m2cx5cyqal] {
        flex-direction: column;
        align-items: stretch;
    }

    .tab-protection__actions > :last-child[b-m2cx5cyqal] {
        margin-inline-start: 0;
    }

    .tab-protection__actions[b-m2cx5cyqal]  .ds-btn {
        width: 100%;
    }
}
/* /Components/Cases/Tabs/TabSourcing.razor.rz.scp.css */
/* Phase 29 Plan 06 — case Sourcing tab chrome. DS v2 / responsive consistent with the
   case detail page: no horizontal scroll @580px, results table collapses to cards below
   641px, tap targets >=44px. CSS isolation `::deep` reaches the mounted SourcingLifecycle
   subtree (Blazor isolation uses attribute selectors, not Shadow DOM). */

.tab-sourcing[b-rw5ukulpiv] {
    /* Never let the mounted sourcing surface push the case-detail body wider than the
       viewport — long lender/product cells wrap or scroll within their own container. */
    max-width: 100%;
    overflow-x: hidden;
}

/* Heading inside the lifecycle inherits the case-detail page chrome rather than the
   broker-wide /quotes h1 sizing. */
.tab-sourcing[b-rw5ukulpiv]  h1 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

/* Generous tap targets for every interactive control on the tab (>=44px). */
.tab-sourcing[b-rw5ukulpiv]  .btn,
.tab-sourcing[b-rw5ukulpiv]  button,
.tab-sourcing[b-rw5ukulpiv]  select,
.tab-sourcing[b-rw5ukulpiv]  input {
    min-height: 44px;
}

/* The results table can be wide (lender / product / LTV / created / actions). On wide
   screens keep it horizontally scrollable inside its own container rather than forcing
   the page to scroll. */
.tab-sourcing[b-rw5ukulpiv]  .full-width-table {
    width: 100%;
    display: table;
}

/* Below 641px: collapse the illustrations table into stacked cards. Each row becomes a
   card; each cell shows its column label via data-label (set in the table markup) or a
   labelled block layout. We avoid horizontal scroll entirely at this width. */
@media (max-width: 640px) {
    .tab-sourcing[b-rw5ukulpiv]  .results-container {
        overflow-x: visible;
    }

    .tab-sourcing[b-rw5ukulpiv]  .full-width-table,
    .tab-sourcing[b-rw5ukulpiv]  .full-width-table thead,
    .tab-sourcing[b-rw5ukulpiv]  .full-width-table tbody,
    .tab-sourcing[b-rw5ukulpiv]  .full-width-table tr,
    .tab-sourcing[b-rw5ukulpiv]  .full-width-table th,
    .tab-sourcing[b-rw5ukulpiv]  .full-width-table td {
        display: block;
        width: 100%;
    }

    /* Hide the header row — each card carries its own context. */
    .tab-sourcing[b-rw5ukulpiv]  .full-width-table thead {
        position: absolute;
        left: -9999px;
        top: -9999px;
    }

    .tab-sourcing[b-rw5ukulpiv]  .full-width-table tr {
        margin-bottom: 0.75rem;
        border: 1px solid var(--form-border, #d9dbe3);
        border-radius: var(--ds-radius-md, 8px);
        padding: 0.75rem;
        background: var(--form-bg, #fff);
    }

    .tab-sourcing[b-rw5ukulpiv]  .full-width-table td {
        padding: 0.25rem 0;
        border: none;
    }

    /* Actions cell stacks its buttons full-width for thumb-friendly tapping. */
    .tab-sourcing[b-rw5ukulpiv]  .results-actions {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .tab-sourcing[b-rw5ukulpiv]  .results-actions .btn {
        width: 100%;
    }
}

/* No horizontal scroll at 580px for any sub-surface (form rows, banners, context strip). */
@media (max-width: 580px) {
    .tab-sourcing[b-rw5ukulpiv],
    .tab-sourcing[b-rw5ukulpiv]  .results-container,
    .tab-sourcing[b-rw5ukulpiv]  form {
        max-width: 100%;
        overflow-x: hidden;
    }
}
/* /Components/Cases/Tasks/CaseTaskRow.razor.rz.scp.css */
/* Phase 49 Plan 07 — one manual task row.
   Tokens only: no #rrggbb literal may appear in this file, and it must never be
   added to .planning/phases/12-ui-modernisation/hex-baseline.txt. No font-family is
   set (--font-heading is referenced in 8 files but declared nowhere in the
   solution) — the row inherits from body. */

.checklist-task[b-ufdk7nobyr] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    /* Same 44px floor as every other repeated target on this card, at EVERY width:
       consistency beats compactness on a list you tick down. */
    min-height: 44px;
    border-top: 1px solid var(--border-subtle);
    /* Part of the no-horizontal-scroll-at-580px guarantee. */
    max-width: 100%;
    min-width: 0;
}

.checklist-task:first-child[b-ufdk7nobyr] {
    border-top: 0;
}

/* Read-only: the tick is a status glyph, not a dead button. Sized and aligned to the
   same column the DsButton occupies so the list does not shift between modes. */
.checklist-task__glyph[b-ufdk7nobyr] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    color: var(--text-muted);
}

/* The state word for screen readers only. Same recipe as .checklist-row__sr — an
   aria-label would replace the element's text content instead of composing with it. */
.checklist-task__sr[b-ufdk7nobyr] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.checklist-task__text[b-ufdk7nobyr] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    /* min-width: 0 is what actually stops a long description widening the card. */
    flex: 1 1 auto;
    min-width: 0;
    /* Optically centres the text against the 44px control column. */
    padding-top: var(--space-2);
}

.checklist-task__desc[b-ufdk7nobyr] {
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: var(--text-primary);
    /* Descriptions are free text up to 500 characters and may contain NO SPACES.
       Wrapped anywhere, never truncated — the whole task has to be readable, and an
       ellipsis on the only line that says what to do is useless. */
    overflow-wrap: anywhere;
}

/* Completion is carried on the line-through AND the muted colour, so it survives
   greyscale. The tick icon changing shape is the third channel. */
.checklist-task[data-complete="true"] .checklist-task__desc[b-ufdk7nobyr] {
    text-decoration: line-through;
    color: var(--text-muted);
}

.checklist-task__meta[b-ufdk7nobyr] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    font-size: var(--text-xs);
    line-height: var(--leading-normal);
    color: var(--text-muted);
}

.checklist-task__due[b-ufdk7nobyr] {
    font-variant-numeric: tabular-nums;
}

.checklist-task__actions[b-ufdk7nobyr] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex: 0 0 auto;
    margin-left: auto;
}

.checklist-task__confirm[b-ufdk7nobyr] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.checklist-task__confirm-text[b-ufdk7nobyr] {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: var(--text-primary);
}

/* DsButton renders its own <button>, which is outside this component's scope. ::deep
   reaches it because <li class="checklist-task"> IS in this component's markup. */
.checklist-task[b-ufdk7nobyr]  .ds-btn {
    min-height: 44px;
}

/* 640px == --bp-sm (design-system.css); CSS vars are illegal in @media conditions */
@media (max-width: 640px) {
    /* The confirm cluster takes its own full-width line rather than squeezing the
       description into two characters. The single trash button, by contrast, fits
       beside the text at every width and deliberately does NOT wrap. */
    .checklist-task__confirm[b-ufdk7nobyr] {
        flex: 1 0 100%;
    }

    .checklist-task[b-ufdk7nobyr] {
        flex-wrap: wrap;
    }
}
/* /Components/Clients/AmlIdSection.razor.rz.scp.css */
/* Phase 30-06: broker AML/ID panel — DS v2, token-only, mobile-responsive.
   Colours resolve through design-system.css tokens (no raw hex); the .ds-table--cards
   base (design-system.css) handles the ≤640px row→card collapse via data-label. */

.aml-id-section[b-doql30itz7] {
    margin-top: var(--space-5);
}

.aml-id-section__heading[b-doql30itz7] {
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-tight);
    margin-bottom: var(--space-4);
    color: var(--brand-primary);
}

/* ===== Card layout (Phase 33 post-UAT — replaces the 2-row table) =====
   Two side-by-side cards on wide viewports; stack below ~40rem. */
.aml-id-cards[b-doql30itz7] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    gap: var(--space-4);
    align-items: start;
}

.aml-id-card[b-doql30itz7] {
    background: var(--surface-primary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.aml-id-card__header[b-doql30itz7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--border-subtle);
}

.aml-id-card__title[b-doql30itz7] {
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-tight);
    color: var(--text-primary);
    margin: 0;
}

.aml-id-card__meta[b-doql30itz7] {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.aml-id-card__meta-row[b-doql30itz7] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
}

.aml-id-card__meta-row dt[b-doql30itz7] {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--text-muted);
}

.aml-id-card__meta-row dd[b-doql30itz7] {
    margin: 0;
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--text-primary);
    text-align: right;
}

.aml-id-card__body[b-doql30itz7] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.aml-id-section__hint[b-doql30itz7] {
    margin: var(--space-2) 0 0;
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: var(--leading-normal);
}

.aml-id-section__error[b-doql30itz7] {
    margin: 0 0 var(--space-2);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--danger);
    line-height: var(--leading-normal);
}

.aml-id-section__actions[b-doql30itz7] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-2);
}

/* Pending verification-link row (reuses the global .invite-link-row that clipboard.js
   targets, then layers panel-specific responsive + tap-target rules on top). */
.aml-id-link-row[b-doql30itz7] {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: var(--space-2);
    margin-top: var(--space-2);
    padding: var(--space-3);
    background: var(--surface-secondary);
    border-radius: var(--radius-sm);
}

.aml-id-link-input[b-doql30itz7] {
    flex: 1 1 12rem;
    min-width: 0;
    min-height: 44px;
    padding: var(--space-2) var(--space-3);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--brand-accent);
    background: var(--surface-primary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
}

.aml-id-link-input:focus-visible[b-doql30itz7] {
    outline: none;
    border-color: var(--brand-accent);
    box-shadow: var(--focus-ring);
}

/* Tap-target minimum (MOBR-04 / Phase-25 lint) on every action control in the panel. */
.aml-id-link-btn[b-doql30itz7],
.aml-id-section[b-doql30itz7]  .ds-btn {
    min-height: 44px;
}

/* "Email sent ✓" latched state — a reassuring success tint so the broker can see the
   link went out (and why the button is now disabled). Overrides the 0.6 disabled fade
   so the confirmation stays legible. */
.aml-id-link-btn--sent[b-doql30itz7],
.aml-id-link-btn--sent:disabled[b-doql30itz7] {
    background: var(--success-bg);
    color: var(--success-fg);
    border-color: var(--success);
    opacity: 1;
}

/* ===== Transient rich dossiers (Phase 40) — Xl modal content, token-only, responsive =====
   Rendered inside DsModal Size="Xl". No raw hex; tables/cards collapse to one column
   ≤640px; every interactive control clears the 44px tap-target floor. */
.aml-dossier[b-doql30itz7] {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

/* Pinned "Live view — not stored" privacy banner (info tone, D-10). */
.aml-dossier__privacy[b-doql30itz7] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    background: var(--info-bg);
    color: var(--info-fg);
    border: 1px solid var(--info);
    border-radius: var(--radius-md);
    position: sticky;
    top: 0;
    z-index: 1;
}

.aml-dossier__privacy-icon[b-doql30itz7] {
    flex: 0 0 auto;
    margin-top: 0.15em;
}

.aml-dossier__privacy-text[b-doql30itz7] {
    margin: 0;
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
}

.aml-dossier__hint[b-doql30itz7] {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: var(--leading-normal);
}

.aml-dossier__header[b-doql30itz7] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--border-subtle);
}

.aml-dossier__header-main[b-doql30itz7] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}

.aml-dossier__doc-type[b-doql30itz7] {
    margin: 0;
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-tight);
    color: var(--brand-primary);
}

.aml-dossier__asof[b-doql30itz7] {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--text-muted);
}

.aml-dossier__section[b-doql30itz7] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.aml-dossier__section-title[b-doql30itz7] {
    margin: 0;
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--border-subtle);
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-tight);
    color: var(--brand-primary);
}

/* Prominent, color-coded dossier header badges (Phase 40 post-UAT). The status + risk
   badges are the first thing a broker reads, so enlarge them beyond the inline default.
   Tone/colour still resolves through the DsBadge --success/--warning/--danger tokens. */
.aml-dossier__header-main[b-doql30itz7]  .ds-badge {
    font-size: var(--text-base);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
}

/* Boxed key–value grid — turns the summary / extracted-field lists into clean labelled
   cells with a clear label-over-value hierarchy instead of a cramped space-between row. */
.aml-dossier__dl--boxed .aml-dossier__dl-row[b-doql30itz7] {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-1);
    padding: var(--space-3);
    background: var(--surface-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
}

.aml-dossier__dl--boxed .aml-dossier__dl-row dt[b-doql30itz7] {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}

.aml-dossier__dl--boxed .aml-dossier__dl-row dd[b-doql30itz7] {
    text-align: left;
    font-size: var(--text-base);
    font-weight: var(--weight-medium);
    color: var(--text-primary);
}

/* Positive "clear / verified" panel — reassuring green-tinted success state that replaces
   the bland gray empty state for a clean AML screen or a minimal ID dossier. */
.aml-dossier__clear[b-doql30itz7] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-5);
    background: var(--success-bg);
    border: 1px solid var(--success);
    border-radius: var(--radius-md);
}

.aml-dossier__clear-icon[b-doql30itz7] {
    flex: 0 0 auto;
    font-size: var(--text-3xl);
    color: var(--success);
    line-height: 1;
}

.aml-dossier__clear-text[b-doql30itz7] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.aml-dossier__clear-title[b-doql30itz7] {
    margin: 0;
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-tight);
    color: var(--success-fg);
}

.aml-dossier__clear-message[b-doql30itz7] {
    margin: 0;
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: var(--success-fg);
}

/* Document-image grid — auto-fit, reflows to a single column on narrow screens. */
.aml-dossier__image-grid[b-doql30itz7] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: var(--space-4);
}

.aml-dossier__img-frame[b-doql30itz7] {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-3);
    background: var(--surface-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
}

.aml-dossier__img[b-doql30itz7] {
    width: 100%;
    max-height: 20rem;
    object-fit: contain;
    border-radius: var(--radius-sm);
}

.aml-dossier__img-fallback[b-doql30itz7] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 8rem;
    color: var(--text-muted);
    font-size: var(--text-sm);
    background: var(--surface-tertiary);
    border-radius: var(--radius-sm);
}

.aml-dossier__img-caption[b-doql30itz7] {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--text-secondary);
}

/* Definition lists — single column by default, two columns where marked (wide only). */
.aml-dossier__dl[b-doql30itz7] {
    margin: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-2);
}

.aml-dossier__dl--2col[b-doql30itz7] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2) var(--space-4);
}

.aml-dossier__dl-row[b-doql30itz7] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
}

.aml-dossier__dl-row dt[b-doql30itz7] {
    margin: 0;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--text-muted);
}

.aml-dossier__dl-row dd[b-doql30itz7] {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--text-primary);
    text-align: right;
}

.aml-dossier__score[b-doql30itz7] {
    margin-left: var(--space-2);
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

/* MRZ — the sole monospace surface; verbatim, non-reflowing, scrolls within its frame. */
.aml-dossier__mrz[b-doql30itz7] {
    margin: 0;
    padding: var(--space-3);
    font-family: ui-monospace, "SFMono-Regular", "Menlo", monospace;
    font-size: var(--text-sm);
    letter-spacing: 0.02em;
    white-space: pre;
    overflow-x: auto;
    background: var(--surface-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
}

.aml-dossier__warnings[b-doql30itz7] {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.aml-dossier__warning[b-doql30itz7] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--warning-fg);
    line-height: var(--leading-normal);
}

.aml-dossier__cards[b-doql30itz7] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.aml-dossier__headline[b-doql30itz7] {
    margin: 0 0 var(--space-2);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--text-primary);
    line-height: var(--leading-normal);
}

.aml-dossier__article-summary[b-doql30itz7] {
    margin: 0 0 var(--space-2);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: var(--leading-normal);
}

.aml-dossier__source-link[b-doql30itz7] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    min-height: 44px;
    font-size: var(--text-sm);
    color: var(--brand-accent);
}

/* Reveal toggle for extra hit detail — a text button that clears the 44px floor. */
.aml-dossier__reveal-toggle[b-doql30itz7] {
    align-self: flex-start;
    margin-top: var(--space-2);
    min-height: 44px;
    padding: var(--space-1) var(--space-2);
    background: transparent;
    border: none;
    color: var(--brand-accent);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    cursor: pointer;
}

.aml-dossier__reveal-toggle:focus-visible[b-doql30itz7] {
    outline: none;
    box-shadow: var(--focus-ring);
    border-radius: var(--radius-sm);
}

/* ≤640px: the link row stacks full-width (link + buttons wrap vertically). */
@media (max-width: 640px) {
    .aml-id-link-row[b-doql30itz7] {
        flex-direction: column;
        align-items: stretch;
    }

    .aml-id-link-input[b-doql30itz7],
    .aml-id-link-btn[b-doql30itz7] {
        width: 100%;
    }

    .aml-id-section__actions[b-doql30itz7] {
        flex-direction: column;
        align-items: stretch;
    }

    /* Dossier: image grid + two-column definition lists collapse to a single column. */
    .aml-dossier__image-grid[b-doql30itz7] {
        grid-template-columns: 1fr;
    }

    .aml-dossier__dl--2col[b-doql30itz7] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Clients/BrokerDocumentCard.razor.rz.scp.css */
.broker-doc-card[b-fln1su2xwv] { border: 1px solid #e2e8f0; border-radius: 8px; padding: 16px; background: white; transition: background-color 0.15s ease, box-shadow 0.15s ease; }
.broker-doc-card:hover[b-fln1su2xwv] { background: #f7f7f7; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.card-header[b-fln1su2xwv] { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 8px; }
.card-header-info[b-fln1su2xwv] { flex: 1; min-width: 0; }
.doc-icon[b-fln1su2xwv] { flex-shrink: 0; }
.doc-icon.icon-pdf[b-fln1su2xwv] { color: #dc3545; }
.doc-icon.icon-image[b-fln1su2xwv] { color: #0d6efd; }
.doc-icon.icon-other[b-fln1su2xwv] { color: #6c757d; }
.doc-filename[b-fln1su2xwv] { font-size: 0.875rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 4px; }
.doc-meta[b-fln1su2xwv] { font-size: 0.75rem; color: #888; margin-top: 4px; }
.status-row[b-fln1su2xwv] { margin-top: 8px; }
.status-badge[b-fln1su2xwv] { display: inline-block; padding: 2px 8px; border-radius: 12px; font-size: 0.75rem; font-weight: 500; }
.status-pending[b-fln1su2xwv] { background: #e2e8f0; color: #334155; }
.status-reviewed[b-fln1su2xwv] { background: #bbf7d0; color: #166534; }
.status-rejected[b-fln1su2xwv] { background: #fecaca; color: #991b1b; }
.rejection-reason[b-fln1su2xwv] { font-size: 0.75rem; color: #991b1b; margin-top: 4px; }
.action-row[b-fln1su2xwv] { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.category-select[b-fln1su2xwv] { max-width: 160px; font-size: 0.75rem; }
/* /Components/Clients/ClientDetailHeader.razor.rz.scp.css */
/* Phase 12 Plan 05 (UI-04): ClientDetailHeader — 30px DM Serif focal name + status badge. */

.detail-header[b-9g219atrzh] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.detail-header__top[b-9g219atrzh] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.detail-header__identity[b-9g219atrzh] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.detail-header__name[b-9g219atrzh] {
    font-family: var(--font-heading);
    font-size: var(--text-3xl);
    font-weight: var(--weight-regular);
    line-height: var(--leading-tight);
    color: var(--text-primary);
    margin: 0;
}

.detail-header__meta[b-9g219atrzh] {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
    font-size: var(--text-sm);
    font-weight: var(--weight-regular);
    color: var(--text-muted);
}
/* /Components/Clients/ComplianceModal.razor.rz.scp.css */
.modal-overlay[b-ac1mjztgli] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-content[b-ac1mjztgli] {
    max-width: 640px;
    width: 100%;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    max-height: 90vh;
    overflow-y: auto;
}

.modal-header[b-ac1mjztgli] {
    padding: 32px 32px 0;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.modal-title[b-ac1mjztgli] {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0;
}

.close-btn[b-ac1mjztgli] {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #64748b;
    padding: 0;
    line-height: 1;
}

.close-btn:hover[b-ac1mjztgli] {
    color: #334155;
}

.modal-body[b-ac1mjztgli] {
    padding: 24px 32px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.modal-footer[b-ac1mjztgli] {
    padding: 0 32px 32px;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    gap: 8px;
}

.field-row[b-ac1mjztgli] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.field-label[b-ac1mjztgli] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--brand-primary, #1a1a4e);
}

.facts-box[b-ac1mjztgli] {
    background: #f7f7f7;
    border-radius: 4px;
    padding: 16px;
}

.facts-box .field-row[b-ac1mjztgli] {
    flex-direction: row;
    gap: 8px;
    align-items: center;
    /* Phase 55 (REC-09) — a facts row is flex-direction: row with no wrap, so a long product
       title beside its label would push the row past the modal's content width at narrow
       viewports. Three declarations, no colour, no new selector. */
    flex-wrap: wrap;
    min-width: 0;
    overflow-wrap: anywhere;
}

.vuln-banner[b-ac1mjztgli] {
    background: #fef3c7;
    color: #92400e;
    border-radius: 4px;
    padding: 16px;
    font-size: 0.875rem;
    line-height: 1.5;
}

.textarea-wrapper[b-ac1mjztgli] {
    position: relative;
}

.ai-icon[b-ac1mjztgli] {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 16px;
    height: 16px;
    background: none;
    border: none;
    color: var(--brand-accent, #0071c1);
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ai-icon:hover[b-ac1mjztgli] {
    opacity: 0.8;
}

.checkbox-group[b-ac1mjztgli] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.checkbox-group label[b-ac1mjztgli] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    cursor: pointer;
}

.field-changed[b-ac1mjztgli] {
    border-left: 3px solid var(--brand-accent, #0071c1) !important;
}

.btn-text[b-ac1mjztgli] {
    background: none;
    border: none;
    color: #64748b;
    cursor: pointer;
    font-size: 0.875rem;
    padding: 4px 8px;
}

.btn-text:hover[b-ac1mjztgli] {
    color: #334155;
}
/* /Components/Clients/CreateClientModal.razor.rz.scp.css */
.override-reason-row textarea[b-egz09exsl2] {
    min-height: 80px;
    resize: vertical;
}
/* /Components/Clients/DocumentPreviewModal.razor.rz.scp.css */
.preview-overlay[b-lj0wjatvn0] { position: fixed; inset: 0; z-index: 1050; background: rgba(0,0,0,0.7); display: flex; align-items: center; justify-content: center; }
.preview-container[b-lj0wjatvn0] { position: relative; max-width: 900px; width: 95vw; max-height: 90vh; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.close-btn[b-lj0wjatvn0] { position: absolute; top: -12px; right: -12px; width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,0.9); border: none; font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 1; }
.close-btn:hover[b-lj0wjatvn0] { background: white; }
.preview-content[b-lj0wjatvn0] { width: 100%; display: flex; justify-content: center; }
.preview-content img[b-lj0wjatvn0] { max-width: 100%; max-height: 80vh; object-fit: contain; border-radius: 4px; }
.preview-content iframe[b-lj0wjatvn0] { width: 100%; height: 80vh; border: none; border-radius: 4px; background: white; }
.preview-footer[b-lj0wjatvn0] { display: flex; align-items: center; gap: 12px; }
.preview-filename[b-lj0wjatvn0] { color: white; font-size: 0.875rem; font-weight: 600; }
/* /Components/Clients/DupCheckWarning.razor.rz.scp.css */
.dup-check-warning[b-xhyrahww8w] {
    background: var(--warning-bg);
    border-left: 4px solid var(--warning);
    border-radius: var(--radius-md);
    padding: 16px 20px;
    margin-top: 16px;
    color: var(--text-primary);
}

.dup-check-heading[b-xhyrahww8w] {
    margin: 0 0 8px 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--warning);
    outline: none;
}

.dup-check-body[b-xhyrahww8w] {
    margin: 0 0 12px 0;
    color: var(--text-secondary);
    font-size: 14px;
}

.dup-check-matches[b-xhyrahww8w] {
    list-style: none;
    padding: 0;
    margin: 0 0 16px 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dup-check-match-row[b-xhyrahww8w] {
    background: var(--surface-primary);
    border-radius: var(--radius-sm);
    padding: 8px 12px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

.dup-check-archived-badge[b-xhyrahww8w] {
    color: var(--warning);
    font-weight: 600;
    font-size: 12px;
}

.dup-check-match-text[b-xhyrahww8w] {
    flex: 1;
    color: var(--text-primary);
}

.dup-check-match-actions[b-xhyrahww8w] {
    display: flex;
    gap: 8px;
}

.dup-check-panel-actions[b-xhyrahww8w] {
    display: flex;
    justify-content: flex-end;
}

.dup-check-blocked-copy[b-xhyrahww8w] {
    margin: 12px 0 0 0;
    padding: 8px 12px;
    background: var(--surface-secondary);
    border-radius: var(--radius-sm, 6px);
    color: var(--text-secondary);
    font-size: 13px;
}
/* /Components/Clients/ExistingClientTypeahead.razor.rz.scp.css */
.typeahead-container[b-cbcwcitrfl] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.typeahead-input-wrapper[b-cbcwcitrfl] {
    position: relative;
}

.typeahead-input[b-cbcwcitrfl] {
    width: 100%;
    padding-right: 44px;
    min-height: 44px;
}

.typeahead-toggle[b-cbcwcitrfl] {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--text-secondary);
    padding: 0;
    border-radius: var(--radius-sm);
}

.typeahead-toggle:hover[b-cbcwcitrfl] {
    background: var(--surface-secondary);
    color: var(--text-primary);
}

.typeahead-toggle__icon[b-cbcwcitrfl] {
    width: 12px;
    height: 8px;
    transition: transform 0.15s ease;
}

.typeahead-toggle--open .typeahead-toggle__icon[b-cbcwcitrfl] {
    transform: rotate(180deg);
}

.typeahead-spinner[b-cbcwcitrfl] {
    position: absolute;
    right: 12px;
    top: 50%;
    width: 16px;
    height: 16px;
    margin-top: -8px;
    border: 2px solid var(--surface-tertiary);
    border-top-color: var(--brand-accent);
    border-radius: 50%;
    animation: typeahead-spin-b-cbcwcitrfl 0.8s linear infinite;
}

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

.typeahead-helper[b-cbcwcitrfl] {
    margin: 4px 0 0 0;
    color: var(--text-secondary);
    font-size: 14px;
}

.typeahead-results[b-cbcwcitrfl] {
    list-style: none;
    margin: 4px 0 0 0;
    padding: 0;
    background: var(--surface-primary);
    border: 1px solid var(--surface-tertiary);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    max-height: 320px;
    overflow-y: auto;
}

.typeahead-row[b-cbcwcitrfl] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid var(--surface-tertiary);
    background: var(--surface-primary);
}

.typeahead-row:last-child[b-cbcwcitrfl] {
    border-bottom: none;
}

.typeahead-row:hover[b-cbcwcitrfl],
.typeahead-row-highlighted[b-cbcwcitrfl] {
    background: var(--surface-secondary);
}

.typeahead-row-name[b-cbcwcitrfl] {
    font-weight: 600;
    color: var(--text-primary);
}

.typeahead-row-meta[b-cbcwcitrfl] {
    color: var(--text-secondary);
    font-size: 14px;
}

.typeahead-row-badge[b-cbcwcitrfl] {
    margin-left: auto;
    background: var(--surface-secondary);
    color: var(--brand-accent);
    font-size: 12px;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
}

.typeahead-create-link[b-cbcwcitrfl] {
    align-self: flex-start;
    background: none;
    border: none;
    padding: 8px 0;
    margin-top: 4px;
    color: var(--brand-accent);
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    min-height: 44px;
}

.typeahead-create-link:hover[b-cbcwcitrfl] {
    text-decoration: underline;
}

@media (max-width: 768px) {
    .typeahead-row[b-cbcwcitrfl] {
        flex-direction: column;
        align-items: flex-start;
    }
    .typeahead-row-badge[b-cbcwcitrfl] {
        margin-left: 0;
    }
}
/* /Components/Clients/InviteForMortgageModal.razor.rz.scp.css */
.invite-modal-card[b-u4is5sg4kc] {
    max-width: 720px;
    width: 100%;
}

.invite-step-heading[b-u4is5sg4kc] {
    margin: 0 0 16px 0;
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
}

.invite-selected-client[b-u4is5sg4kc] {
    margin: 0 0 16px 0;
    color: var(--text-secondary);
    font-size: 14px;
}

.invite-pivot-inline[b-u4is5sg4kc] {
    /* The nested CreateClientModal brings its own backdrop — this wrapper
       keeps it scoped visually inside the invite modal body. */
}

.invite-zero-scenarios[b-u4is5sg4kc] {
    background: var(--warning-bg);
    border-left: 4px solid var(--warning);
    border-radius: var(--radius-md);
    padding: 16px 20px;
    color: var(--text-primary);
}

.invite-zero-scenarios h4[b-u4is5sg4kc] {
    margin: 0 0 8px 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--warning);
}

.invite-zero-scenarios p[b-u4is5sg4kc] {
    margin: 0 0 16px 0;
    color: var(--text-secondary);
    font-size: 14px;
}

.loan-input-wrapper[b-u4is5sg4kc] {
    position: relative;
}

.loan-prefix[b-u4is5sg4kc] {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary);
    font-size: 16px;
    pointer-events: none;
}

.loan-input-wrapper[b-u4is5sg4kc]  .form-control {
    padding-left: 28px;
}

@media (max-width: 768px) {
    .invite-modal-card[b-u4is5sg4kc] {
        max-width: 100vw;
        width: 100vw;
        height: 100vh;
        border-radius: 0;
    }
}
/* /Components/Clients/InviteLinkSuccess.razor.rz.scp.css */
.invite-link-box[b-ti11zoexl4] {
    width: 100%;
}

.invite-link-sent[b-ti11zoexl4] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 16px 0;
    padding: 10px 12px;
    border: 1px solid var(--success-border, #a7d8b0);
    border-radius: var(--radius-sm);
    background: var(--success-bg, #eaf7ee);
    color: var(--success-text, #1d6b32);
    font-size: 14px;
}

.invite-link-sent .bi[b-ti11zoexl4] {
    flex: 0 0 auto;
    font-size: 16px;
}

.invite-link-row[b-ti11zoexl4] {
    display: flex;
    gap: 8px;
    align-items: stretch;
    width: 100%;
}

.invite-link-row .invite-link-input[b-ti11zoexl4] {
    flex: 1 1 auto;
    min-width: 0;
    padding: 8px 12px;
    border: 1px solid var(--topbar-border);
    border-radius: var(--radius-sm);
    background: var(--surface-secondary);
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 14px;
    color: var(--text-primary);
}

.invite-link-row .btn[b-ti11zoexl4] {
    flex: 0 0 auto;
    white-space: nowrap;
}

.invite-link-expiry[b-ti11zoexl4] {
    margin: 8px 0 0 0;
    color: var(--text-secondary);
    font-size: 13px;
}
/* /Components/Clients/Overview/ClientOverview.razor.rz.scp.css */
/* Phase 22 Plan 11 — ClientOverview adaptive 2-column grid.
   Above 900px: 2fr / 1fr (left = linked-cases + activity stacked; right = completeness).
   Below 900px: single column with completeness ordered above the left content
   (next-action affordance > chronology — UI-SPEC §Visuals). */

.client-overview-grid[b-zscbuu0sy8] {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
    gap: var(--space-6);
    padding: var(--space-5);
}

.client-overview-grid__left[b-zscbuu0sy8],
.client-overview-grid__right[b-zscbuu0sy8] {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    min-width: 0;
}

@media (max-width: 900px) {
    .client-overview-grid[b-zscbuu0sy8] {
        grid-template-columns: 1fr;
        gap: var(--space-5);
        padding: var(--space-4);
    }

    /* Completeness moves above left content on narrow viewports. */
    .client-overview-grid__right[b-zscbuu0sy8] {
        order: -1;
    }
}

@media (max-width: 580px) {
    .client-overview-grid[b-zscbuu0sy8] {
        padding: var(--space-3);
    }
}
/* /Components/Clients/Overview/OverviewActivityCard.razor.rz.scp.css */
/* Phase 22 Plan 11 — Recent activity card (10 most-recent events). DS tokens only. */

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

.activity-row[b-xb4pyzyph3] {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: var(--space-3);
    align-items: baseline;
    padding-block: var(--space-2);
    border-bottom: 1px solid var(--surface-tertiary);
    font-size: var(--text-sm);
}

.activity-row:last-child[b-xb4pyzyph3] {
    border-bottom: none;
}

.activity-row__when[b-xb4pyzyph3] {
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

@media (max-width: 700px) {
    .activity-row[b-xb4pyzyph3] {
        grid-template-columns: 1fr;
        gap: var(--space-1);
    }
}
/* /Components/Clients/Overview/OverviewCompletenessCard.razor.rz.scp.css */
/* Phase 22 Plan 11 — Profile completeness card (6 deep-link rows).
   Icon colours via scoped classes only (checker INFO #6 — no inline style). */

.completeness-list[b-tbpuv2553q] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.completeness-row[b-tbpuv2553q] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 44px;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm, 6px);
    text-decoration: none;
    color: var(--text-default);
}

.completeness-row:hover[b-tbpuv2553q] {
    background: var(--surface-secondary);
    text-decoration: none;
}

.completeness-row:focus-visible[b-tbpuv2553q] {
    outline: 2px solid var(--brand-accent-focus);
    outline-offset: 2px;
}

.completeness-row__icon[b-tbpuv2553q] {
    font-size: 1.25em;
    flex-shrink: 0;
}

.completeness-row__icon--complete[b-tbpuv2553q] {
    color: var(--success-fg);
}

.completeness-row__icon--incomplete[b-tbpuv2553q] {
    color: var(--warning-fg);
}

.completeness-row__label[b-tbpuv2553q] {
    font-size: var(--text-sm);
    font-weight: 600;
}
/* /Components/Clients/Overview/OverviewLinkedCasesCard.razor.rz.scp.css */
/* Phase 22 Plan 11 — Linked-cases preview on Overview (top 3). DS tokens only.
   UAT-feedback 2026-05-19: card body is now <CaseKanbanCard> for full
   label→value parity with the dashboard kanban. This stylesheet owns only
   the clickable wrapper around each row + the view-all link. Inner card
   layout (head / fields / foot) is owned by CaseKanbanCard.razor.css. */

.linked-cases-list[b-vuz3tzyp55] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.linked-cases-list__item[b-vuz3tzyp55] {
    border: 1px solid var(--border-default, #e5e7eb);
    border-radius: var(--radius-md, 8px);
    background: var(--surface-default, #fff);
    cursor: pointer;
    transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}

.linked-cases-list__item:hover[b-vuz3tzyp55] {
    border-color: var(--brand-accent-border, var(--brand-accent));
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.linked-cases-list__item:focus-visible[b-vuz3tzyp55] {
    outline: 2px solid var(--brand-accent-focus);
    outline-offset: 2px;
}

.linked-cases-list__item:active[b-vuz3tzyp55] {
    transform: translateY(0.5px);
}

.linked-cases-list__view-all[b-vuz3tzyp55] {
    display: inline-block;
    margin-top: var(--space-3);
    color: var(--brand-accent);
    text-decoration: none;
    font-size: var(--text-sm);
}

.linked-cases-list__view-all:hover[b-vuz3tzyp55] {
    text-decoration: underline;
}
/* /Components/Clients/PdfPreviewModal.razor.rz.scp.css */
.preview-overlay[b-toov1s5fy5] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.preview-content[b-toov1s5fy5] {
    max-width: 900px;
    width: 100%;
    height: 80vh;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
}

.preview-header[b-toov1s5fy5] {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    border-bottom: 1px solid #e2e8f0;
}

.preview-title[b-toov1s5fy5] {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0;
}

.preview-actions[b-toov1s5fy5] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.close-btn[b-toov1s5fy5] {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #64748b;
    padding: 0;
    line-height: 1;
}

.close-btn:hover[b-toov1s5fy5] {
    color: #334155;
}

.preview-body[b-toov1s5fy5] {
    flex: 1;
    overflow: hidden;
    position: relative;
}

.preview-body iframe[b-toov1s5fy5] {
    width: 100%;
    height: 100%;
    border: none;
}

.preview-fallback-msg[b-toov1s5fy5] {
    display: none;
    text-align: center;
    padding: 32px;
    color: #64748b;
    font-size: 0.875rem;
}

.preview-fallback-msg a[b-toov1s5fy5] {
    color: var(--brand-accent, #0071c1);
}
/* /Components/Clients/Profile/AipSourceBanner.razor.rz.scp.css */
/* Phase 22: AipSourceBanner — info banner shown above Personal Info / Income / Expenditure
   when the sub-page data is pre-filled from the client's AIP submission. Uses DS v2 semantic
   surface tokens (no hex), role="status" not "alert" (informational, not destructive). */

.aip-source-banner[b-knhqxmlu78] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-4);
    background: var(--surface-secondary);
    border: 1px solid var(--surface-tertiary);
    border-radius: var(--radius-md, 8px);
    color: var(--text-default);
    font-size: var(--text-sm);
    margin-bottom: var(--space-4);
}

.aip-source-banner .bi-info-circle[b-knhqxmlu78] {
    color: var(--brand-accent);
    font-size: 1.25em;
    flex-shrink: 0;
}

.aip-source-banner__copy strong[b-knhqxmlu78] {
    display: block;
    margin-bottom: var(--space-1);
}
/* /Components/Clients/Profile/ProfileCases.razor.rz.scp.css */
/* Phase 22 Plan 12 (CV2-06): ProfileCases — host chrome only.
   DsTable owns the responsive table-to-cards collapse below 641px (DS v2
   contract per CLAUDE.md feedback_responsive_from_day_one); this file only
   contributes layout padding. (2026-05-19: dropped the Reference column
   and its `.cases-row__ref` monospace styling — brokers asked for Case
   type + Loan amount instead, which use default cell typography.) */

.profile-cases[b-udldcdzb4v] {
    padding: var(--space-5);
}

/* Quick-task 260724-kug — create-case CTA row. Right-aligned; wraps rather
   than overflows on narrow screens (no fixed width, no horizontal scroll). */
.profile-cases__header[b-udldcdzb4v] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    margin-bottom: var(--space-4);
}

@media (max-width: 640px) {
    .profile-cases[b-udldcdzb4v] {
        padding: var(--space-3);
    }
}
/* /Components/Clients/Profile/ProfileCredit.razor.rz.scp.css */
/* Phase 22 Plan 10: ProfileCredit — broker-captured adverse-credit fields, auto-save 1500ms.
   Visual language mirrors ProfileHealth (severity-group radios + DsCard chrome).
   All tokens via DS v2 CSS custom properties — no raw colours. */

.profile-credit[b-h51u6sq4eu] {
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.field-row[b-h51u6sq4eu] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.field-label[b-h51u6sq4eu] {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--brand-primary);
}

.severity-group[b-h51u6sq4eu] {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.severity-group label[b-h51u6sq4eu] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    min-height: 44px;
    padding-inline: var(--space-2);
    cursor: pointer;
}

.checkbox-group[b-h51u6sq4eu] {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.checkbox-group label[b-h51u6sq4eu] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    min-height: 44px;
    padding-inline: var(--space-2);
    cursor: pointer;
}

.ds-input[b-h51u6sq4eu] {
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--form-border);
    border-radius: var(--radius-sm, 6px);
    background: var(--form-bg);
    font-size: var(--text-base);
    max-width: 220px;
}

.save-status[b-h51u6sq4eu] {
    font-size: var(--text-sm);
    color: var(--text-muted);
    min-height: 24px;
}
.save-status[data-state="saving"][b-h51u6sq4eu] { color: var(--brand-accent); }
.save-status[data-state="saved"][b-h51u6sq4eu] { color: var(--success-fg); }
.save-status[data-state="error"][b-h51u6sq4eu] { color: var(--danger-fg); }

.btn-link[b-h51u6sq4eu] {
    background: none;
    border: none;
    color: var(--brand-accent);
    cursor: pointer;
    text-decoration: underline;
    padding: 0;
}
/* /Components/Clients/Profile/ProfileEditableCard.razor.rz.scp.css */
/* Phase 33 (post-UAT) — editable profile card. Mirrors the client-portal review
   cards (SummaryReview.razor.css): left accent rail, header with title + Edit,
   then a two-column label/value read grid. Tokens only — no hex literals.

   Row styling reaches the parent-supplied ReadContent fragment via ::deep, so
   each section only emits <div class="info-row"><dt/><dd/></div> markup. */

.info-card[b-qx4rj5iixq] {
    position: relative;
    overflow: hidden;
    background: var(--surface-primary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: var(--space-5);
    padding-left: calc(var(--space-5) + 4px);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.info-card__rail[b-qx4rj5iixq] {
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--brand-accent);
}

.info-card__header[b-qx4rj5iixq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--border-subtle);
}

.info-card__title[b-qx4rj5iixq] {
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    font-weight: var(--weight-regular);
    line-height: var(--leading-tight);
    color: var(--text-primary);
    margin: 0;
}

/* ===== Edit button (portal-style bordered ghost) ===== */
.info-card__edit[b-qx4rj5iixq] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    flex: 0 0 auto;
    min-height: 2rem;
    padding: var(--space-1) var(--space-3);
    background: transparent;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    color: var(--brand-accent);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    cursor: pointer;
}

.info-card__edit:hover[b-qx4rj5iixq] {
    background: var(--surface-tertiary);
    border-color: var(--brand-accent);
}

.info-card__edit:focus-visible[b-qx4rj5iixq] {
    outline: none;
    box-shadow: var(--focus-ring);
}

@media (prefers-reduced-motion: no-preference) {
    .info-card__edit[b-qx4rj5iixq] {
        transition: background-color var(--dur-fast) var(--ease-out),
                    border-color var(--dur-fast) var(--ease-out);
    }
}

/* ===== Read grid (parent supplies .info-row rows via ReadContent) ===== */
.info-card__body[b-qx4rj5iixq]  .info-fields {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.info-card__body[b-qx4rj5iixq]  .info-row {
    display: grid;
    grid-template-columns: 40% 1fr;
    align-items: baseline;
    gap: var(--space-3);
}

.info-card__body[b-qx4rj5iixq]  .info-row__label {
    margin: 0;
    color: var(--text-muted);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
}

.info-card__body[b-qx4rj5iixq]  .info-row__value {
    margin: 0;
    color: var(--text-primary);
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    word-break: break-word;
}

.info-card__body[b-qx4rj5iixq]  .info-empty {
    margin: 0;
    color: var(--text-muted);
    font-size: var(--text-sm);
}

/* ===== Edit footer ===== */
.info-card__actions[b-qx4rj5iixq] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-4);
    padding-top: var(--space-3);
    border-top: 1px solid var(--border-subtle);
}

.info-card__status[b-qx4rj5iixq] {
    margin-right: auto;
    font-size: var(--text-sm);
    color: var(--text-muted);
}

.info-card__status-error[b-qx4rj5iixq] {
    color: var(--danger-fg);
}

.info-card__buttons[b-qx4rj5iixq] {
    display: flex;
    gap: var(--space-2);
}

/* Stack the read grid on narrow viewports (parity with the portal cards). */
@media (max-width: 640px) {
    .info-card[b-qx4rj5iixq] {
        padding: var(--space-4);
        padding-left: calc(var(--space-4) + 4px);
    }

    .info-card__body[b-qx4rj5iixq]  .info-row {
        grid-template-columns: 1fr;
        gap: var(--space-1);
    }
}
/* /Components/Clients/Profile/ProfileExpenditure.razor.rz.scp.css */
/* Phase 22 Plan 08: ProfileExpenditure — AIP-backed sub-page with 1500ms auto-save.
   Host chrome only; form body styles are owned by ApplicantFinancialDetails. */

.profile-expenditure[b-yyzutlu3s0] {
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

@media (max-width: 640px) {
    .profile-expenditure[b-yyzutlu3s0] {
        padding: var(--space-4);
        gap: var(--space-3);
    }
}

.aip-section-host[b-yyzutlu3s0] {
    display: contents;
}

.save-status[b-yyzutlu3s0] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-sm);
    color: var(--text-muted);
    min-height: 32px;
}

.save-status[data-state="saving"][b-yyzutlu3s0] {
    color: var(--text-secondary);
}

.save-status[data-state="saved"][b-yyzutlu3s0] {
    color: var(--success-fg, var(--text-secondary));
}

.save-status[data-state="error"][b-yyzutlu3s0] {
    color: var(--danger-fg);
}

.btn-link[b-yyzutlu3s0] {
    background: none;
    border: none;
    color: var(--brand-accent);
    cursor: pointer;
    text-decoration: underline;
    padding: 0;
    font: inherit;
}
/* /Components/Clients/Profile/ProfileHealth.razor.rz.scp.css */
/* Phase 22 Plan 06 (CV2-08): relocated from Components/Clients/TabVulnerability.razor.css — content verbatim.
   DirtyGuard-wrapped; severity rendered via DsBadge tone (warning / danger). */

[b-mrc00ovah8] .ds-card {
    margin-bottom: var(--space-4);
}

.driver-desc[b-mrc00ovah8] {
    font-size: var(--text-sm);
    color: var(--text-muted);
    margin-bottom: var(--space-2);
}

.severity-group[b-mrc00ovah8] {
    display: flex;
    gap: var(--space-4);
    margin-bottom: var(--space-2);
    flex-wrap: wrap;
}

.severity-group label[b-mrc00ovah8] {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-sm);
    cursor: pointer;
}

.flag-toggle[b-mrc00ovah8] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    background: var(--surface-tertiary);
    border-radius: var(--radius-sm);
}

.flag-toggle label[b-mrc00ovah8] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
}

.flag-fields[b-mrc00ovah8] {
    margin-top: var(--space-4);
}

.flag-hint[b-mrc00ovah8] {
    font-size: var(--text-sm);
    color: var(--warning-fg);
    margin-top: var(--space-1);
}

.field-row[b-mrc00ovah8] {
    display: flex;
    align-items: baseline;
    gap: var(--space-4);
    margin-bottom: var(--space-2);
}

.field-label[b-mrc00ovah8] {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    min-width: 140px;
    color: var(--brand-primary);
}

.action-buttons[b-mrc00ovah8] {
    display: flex;
    gap: var(--space-2);
    margin-top: var(--space-4);
}

.empty-state[b-mrc00ovah8] {
    color: var(--text-muted);
    font-size: var(--text-sm);
    margin-bottom: var(--space-4);
}

.form-error[b-mrc00ovah8] {
    color: var(--danger-fg);
    margin-top: var(--space-2);
    font-size: var(--text-sm);
}
/* /Components/Clients/Profile/ProfileHealthQuestionnaire.razor.rz.scp.css */
/* Phase 38 (HQVIEW-02) — scoped styles for the read-only broker Health →
   Questionnaire sub-view. The read grid is copied VERBATIM from
   ProfileEditableCard.razor.css (::deep .info-fields / .info-row / .info-row__label /
   .info-row__value / .info-empty, 40%/1fr, 640px single-column collapse). The only
   difference is the outer scoping selector: here the .info-* markup is this
   component's OWN (rendered inside DsCard's ChildContent), so the rules apply
   directly without ::deep. Tokens only — no hex literals.

   Note (carried to SUMMARY): the read grid uses three in-use DS weights
   (400 heading / 500 label / 600 value). This is a deliberate, justified reuse of
   the shipped ProfileEditableCard read-card rhythm — NOT a violation of the generic
   2-weight heuristic. Do not "fix" it down to two weights. */

.profile-health-questionnaire[b-r2zp3dmydd] {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

/* ===== Read grid (verbatim from ProfileEditableCard, un-::deep'd) ===== */
.info-fields[b-r2zp3dmydd] {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.info-row[b-r2zp3dmydd] {
    display: grid;
    grid-template-columns: 40% 1fr;
    align-items: baseline;
    gap: var(--space-3);
}

.info-row__label[b-r2zp3dmydd] {
    margin: 0;
    color: var(--text-muted);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
}

.info-row__value[b-r2zp3dmydd] {
    margin: 0;
    color: var(--text-primary);
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    word-break: break-word;
}

.info-empty[b-r2zp3dmydd] {
    margin: 0;
    color: var(--text-muted);
    font-size: var(--text-sm);
}

/* ===== Submitted status header ===== */
.hq-status[b-r2zp3dmydd] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.hq-signed[b-r2zp3dmydd] {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--text-muted);
}

/* The sub-view's single interactive element — accent-reserved, 44px tap target. */
.hq-pdf-link[b-r2zp3dmydd] {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: var(--space-2) var(--space-3);
    color: var(--brand-accent);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    text-decoration: none;
}

.hq-pdf-link:hover[b-r2zp3dmydd] {
    text-decoration: underline;
}

.hq-pdf-link:focus-visible[b-r2zp3dmydd] {
    outline: none;
    box-shadow: var(--focus-ring);
    border-radius: var(--radius-sm);
}

/* ===== Not-started / In-progress empty state ===== */
.hq-empty[b-r2zp3dmydd] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
}

.hq-empty__heading[b-r2zp3dmydd] {
    margin: 0;
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    font-weight: var(--weight-regular);
    line-height: var(--leading-tight);
    color: var(--text-primary);
}

.hq-empty__body[b-r2zp3dmydd] {
    margin: 0;
    max-width: 60ch;
    font-size: var(--text-sm);
    color: var(--text-muted);
}

/* Stack the read grid + tighten inter-card gap on narrow viewports (parity with the
   copied ProfileEditableCard media query). */
@media (max-width: 640px) {
    .profile-health-questionnaire[b-r2zp3dmydd] {
        gap: var(--space-4);
    }

    .info-row[b-r2zp3dmydd] {
        grid-template-columns: 1fr;
        gap: var(--space-1);
    }
}
/* /Components/Clients/Profile/ProfileIdVerification.razor.rz.scp.css */
/* Phase 22 Plan 06: ProfileIdVerification — wrapper around the shared AmlIdSection (Pitfall 2: kept in place). */

.profile-id-verification[b-mzks7az8ho] {
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
/* /Components/Clients/Profile/ProfileIncome.razor.rz.scp.css */
/* Phase 22 Plan 08: ProfileIncome — AIP-backed sub-page with 1500ms auto-save.
   Host chrome only; form body styles are owned by ApplicantEmploymentDetails. */

.profile-income[b-7kduk8s7z5] {
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

@media (max-width: 640px) {
    .profile-income[b-7kduk8s7z5] {
        padding: var(--space-4);
        gap: var(--space-3);
    }
}

.aip-section-host[b-7kduk8s7z5] {
    display: contents;
}

.save-status[b-7kduk8s7z5] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-sm);
    color: var(--text-muted);
    min-height: 32px;
}

.save-status[data-state="saving"][b-7kduk8s7z5] {
    color: var(--text-secondary);
}

.save-status[data-state="saved"][b-7kduk8s7z5] {
    color: var(--success-fg, var(--text-secondary));
}

.save-status[data-state="error"][b-7kduk8s7z5] {
    color: var(--danger-fg);
}

.btn-link[b-7kduk8s7z5] {
    background: none;
    border: none;
    color: var(--brand-accent);
    cursor: pointer;
    text-decoration: underline;
    padding: 0;
    font: inherit;
}
/* /Components/Clients/Profile/ProfilePane.razor.rz.scp.css */
/* Phase 22 Plan 04 Task 2: Profile pane.

   Phase 36: Profile is a horizontal parent tab again; ProfilePane renders its
   six sub-sections as a vertical child rail (flat DsSideNav, its own 200px
   styling) on the LEFT with the section body to its right. Below 640px the two
   columns stack (the rail becomes a chip-strip via DsSideNav's own <700px rule).
   Zero raw hex — tokens only. */

.profile-pane[b-abjexazsku] {
    display: flex;
    flex-direction: row;
    gap: var(--space-5);
}

.record-section-body[b-abjexazsku] {
    flex: 1;
    min-width: 0;
}

.profile-pane__heading[b-abjexazsku] {
    font-size: var(--text-sm);
    color: var(--text-muted);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-block-end: var(--space-2);
}

.placeholder-note[b-abjexazsku] {
    color: var(--text-muted);
    font-style: italic;
}

@media (max-width: 640px) {
    .profile-pane[b-abjexazsku] {
        flex-direction: column;
        gap: var(--space-4);
    }
}
/* /Components/Clients/Profile/ProfilePersonalInfo.razor.rz.scp.css */
/* Phase 22 Plan 08: ProfilePersonalInfo — AIP-backed sub-page with 1500ms auto-save.
   Host chrome only; form body styles are owned by ApplicantPersonalDetails. */

.profile-personal-info[b-llabno9uy0] {
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

@media (max-width: 640px) {
    .profile-personal-info[b-llabno9uy0] {
        padding: var(--space-4);
        gap: var(--space-3);
    }
}

.aip-section-host[b-llabno9uy0] {
    display: contents;
}

.save-status[b-llabno9uy0] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-sm);
    color: var(--text-muted);
    min-height: 32px;
}

.save-status[data-state="saving"][b-llabno9uy0] {
    color: var(--text-secondary);
}

.save-status[data-state="saved"][b-llabno9uy0] {
    color: var(--success-fg, var(--text-secondary));
}

.save-status[data-state="error"][b-llabno9uy0] {
    color: var(--danger-fg);
}

.btn-link[b-llabno9uy0] {
    background: none;
    border: none;
    color: var(--brand-accent);
    cursor: pointer;
    text-decoration: underline;
    padding: 0;
    font: inherit;
}
/* /Components/Clients/RejectDocumentModal.razor.rz.scp.css */
.reject-overlay[b-vbakaa8hpb] { position: fixed; inset: 0; z-index: 1050; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; }
.reject-modal[b-vbakaa8hpb] { background: white; border-radius: 8px; padding: 24px; max-width: 480px; width: 90vw; }
.reject-modal h3[b-vbakaa8hpb] { font-size: 0.875rem; font-weight: 600; margin-bottom: 16px; }
.reject-modal .doc-name[b-vbakaa8hpb] { font-size: 0.75rem; color: #888; margin-bottom: 12px; }
.reject-modal textarea[b-vbakaa8hpb] { width: 100%; resize: vertical; }
.reject-footer[b-vbakaa8hpb] { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
/* /Components/Clients/SilentAttachSuccess.razor.rz.scp.css */
.silent-attach-card[b-nc4z08noqs] {
    background: var(--success-bg);
    border-left: 4px solid var(--success);
    border-radius: var(--radius-md);
    padding: 20px 24px;
    margin-top: 16px;
    color: var(--text-primary);
}

.silent-attach-heading[b-nc4z08noqs] {
    margin: 0 0 8px 0;
    font-size: 20px;
    font-weight: 600;
    color: var(--success);
}

.silent-attach-body[b-nc4z08noqs] {
    margin: 0 0 16px 0;
    color: var(--text-primary);
    font-size: 16px;
    line-height: 1.5;
}

.silent-attach-actions[b-nc4z08noqs] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}
/* /Components/Clients/TabClientAip.razor.rz.scp.css */
/* Client → AIP tab.
   2026-05-17 — host chrome for the broker-editable AIP form at the
   client scope. Form body styles are owned by AipForm.razor.css;
   this stylesheet only owns padding and the save-status indicator. */

.tab-client-aip[b-cae10qkmxb] {
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

@media (max-width: 640px) {
    .tab-client-aip[b-cae10qkmxb] {
        padding: var(--space-4);
        gap: var(--space-3);
    }
}

.save-status[b-cae10qkmxb] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-sm);
    color: var(--text-muted);
    min-height: 32px;
}

.save-status[data-state="Saved"] .save-status__label[b-cae10qkmxb] {
    color: var(--success-fg, var(--text-secondary));
}

.save-status[data-state="Saving"] .save-status__label[b-cae10qkmxb] {
    color: var(--text-secondary);
}

.save-status__label[b-cae10qkmxb] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}

.save-status__label--error[b-cae10qkmxb] {
    color: var(--danger-fg);
}
/* /Components/Clients/TabDocuments.razor.rz.scp.css */
/* Phase 12 Plan 10: TabDocuments retokenised (UI-04 light re-skin) — zero hex.
   DirtyGuard opt-out: no inline edit form on this tab — uploads are one-shot actions. */

.section-header[b-r7wayyfg8z] {
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    margin-bottom: var(--space-4);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.doc-count[b-r7wayyfg8z] {
    font-weight: var(--weight-regular);
    color: var(--text-muted);
}

.filter-bar[b-r7wayyfg8z] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
    align-items: center;
}

.filter-pill[b-r7wayyfg8z] {
    border: 1px solid var(--border-subtle);
    background: var(--surface-primary);
    padding: var(--space-1) var(--space-3);
    border-radius: 999px;
    font-size: var(--text-sm);
    cursor: pointer;
    transition: background-color var(--dur-fast) var(--ease-out);
}

.filter-pill:hover[b-r7wayyfg8z] {
    background: var(--surface-tertiary);
}

.filter-pill.active[b-r7wayyfg8z] {
    background: var(--brand-accent);
    color: var(--surface-primary);
    border-color: var(--brand-accent);
}

.category-filter[b-r7wayyfg8z] {
    max-width: 180px;
    font-size: var(--text-sm);
}

.document-grid[b-r7wayyfg8z] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--space-4);
}

.empty-state[b-r7wayyfg8z] {
    text-align: center;
    padding: var(--space-7) var(--space-4);
    color: var(--text-muted);
}

.empty-state h4[b-r7wayyfg8z] {
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    margin-bottom: var(--space-2);
    color: var(--brand-primary);
}

.form-error[b-r7wayyfg8z] {
    color: var(--danger-fg);
    margin-top: var(--space-2);
    font-size: var(--text-sm);
}
/* /Components/Clients/VulnerabilityBanner.razor.rz.scp.css */
/* Phase 12 Plan 10: VulnerabilityBanner re-skinned (UI-06).
   Surface uses --danger-bg + --danger-fg + --danger border tokens per UI-SPEC §Color.
   Zero hex literals — every colour resolves to a token. */

.vulnerability-banner[b-gkedqr2utm] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-4);
    background: var(--danger-bg);
    color: var(--danger-fg);
    border: 1px solid var(--danger);
    border-radius: var(--radius-sm);
}

.banner-icon[b-gkedqr2utm] {
    font-size: var(--text-xl);
    color: var(--danger);
    flex-shrink: 0;
    line-height: 1;
}

.banner-body[b-gkedqr2utm] {
    flex: 1;
    min-width: 0;
}

.banner-title[b-gkedqr2utm] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    line-height: 1.3;
}

.banner-reason[b-gkedqr2utm] {
    margin-top: var(--space-1);
    font-size: var(--text-sm);
    color: var(--danger-fg);
}

.view-link[b-gkedqr2utm] {
    color: var(--danger-fg);
    font-weight: var(--weight-semibold);
    text-decoration: underline;
    cursor: pointer;
    margin-left: auto;
    align-self: center;
    flex-shrink: 0;
}

.view-link:hover[b-gkedqr2utm],
.view-link:focus-visible[b-gkedqr2utm] {
    text-decoration: none;
}
/* /Components/Dashboard/CardStatusMenu.razor.rz.scp.css */
.card-status-menu[b-a757y0y8i3] {
    position: relative;
    display: inline-block;
}

.card-status-menu__trigger[b-a757y0y8i3] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    width: 44px;
    height: 44px;
    padding: 0;
    background: transparent;
    border: 0;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: var(--radius-sm, 0.375rem);
}

.card-status-menu__trigger:hover[b-a757y0y8i3] {
    background: var(--surface-tertiary);
    color: var(--brand-accent);
}

.card-status-menu__trigger:focus-visible[b-a757y0y8i3] {
    outline: 2px solid var(--brand-accent-focus);
    outline-offset: 2px;
}

.card-status-menu__backdrop[b-a757y0y8i3] {
    /* Quick-task 260515-o9: invisible full-viewport surface that closes the
       popover when the user clicks anywhere else on the page. Sits BELOW the
       popover so popover clicks still hit the menu items first. */
    position: fixed;
    inset: 0;
    z-index: 19;
    background: transparent;
}

.card-status-menu__popover[b-a757y0y8i3] {
    position: absolute;
    top: calc(100% + 0.25rem);
    right: 0;
    z-index: 20;
    min-width: 12rem;
    background: var(--surface-primary);
    border: 1px solid var(--topbar-border);
    border-radius: var(--radius-md, 0.5rem);
    box-shadow: var(--shadow-md, 0 4px 8px rgba(0,0,0,0.08));
    padding: 0.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.card-status-menu__item[b-a757y0y8i3] {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: 0;
    padding: 0.5rem 0.75rem;
    min-height: 2.5rem;
    font-size: 0.875rem;
    color: var(--text-primary);
    border-radius: var(--radius-sm, 0.375rem);
    cursor: pointer;
}

.card-status-menu__item:hover[b-a757y0y8i3],
.card-status-menu__item:focus-visible[b-a757y0y8i3] {
    background: var(--surface-tertiary);
    outline: none;
}

.card-status-menu__item:focus-visible[b-a757y0y8i3] {
    outline: 2px solid var(--brand-accent-focus);
    outline-offset: -2px;
}

.card-status-menu__empty[b-a757y0y8i3] {
    display: block;
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
    color: var(--text-muted);
}
/* /Components/Dashboard/CaseKanbanCard.razor.rz.scp.css */
/* Phase 20 Plan 02 Task 2 — CaseKanbanCard body, CSS isolated.
   Card chrome (background/border/radius/shadow) owned by DsKanbanCard;
   this stylesheet only owns inner content layout.
   2026-05-17 — card redesign: new 3-zone layout (head / fields / foot).
   .kanban-field-* mirrors the .field-row / .field-label grammar used on
   the case-detail panels (see ClientDetailsPanel.razor.css:28-45) but
   namespaced to avoid CSS-isolation clashes and sized down for the
   smaller card surface. */

.kanban-card[b-db0hohivzi] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    min-height: 96px;
}

/* ===== Head ===== */
.kanban-card__head[b-db0hohivzi] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    min-width: 0;
}

.kanban-card__name[b-db0hohivzi] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    min-width: 0;
    font-weight: 600;
    color: var(--text-primary);
    font-size: var(--text-base);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kanban-card__name :deep(*)[b-db0hohivzi] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.kanban-card__vuln-glyph[b-db0hohivzi] {
    color: var(--warning);
    font-size: 14px;
    flex: 0 0 auto;
}

/* ===== Field rows (key → value) ===== */
.kanban-card__fields[b-db0hohivzi] {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.kanban-field-row[b-db0hohivzi] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-3);
    padding: var(--space-1) 0;
    min-width: 0;
}

.kanban-field-row + .kanban-field-row[b-db0hohivzi] {
    border-top: 1px solid var(--border-subtle);
}

.kanban-field-label[b-db0hohivzi] {
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--text-secondary);
    flex: 0 0 auto;
    margin: 0;
}

.kanban-field-value[b-db0hohivzi] {
    font-size: var(--text-sm);
    color: var(--text-primary);
    text-align: right;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
}

.kanban-field-value--num[b-db0hohivzi] {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.kanban-field-value--ellipsis[b-db0hohivzi] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ===== Foot ===== */
.kanban-card__foot[b-db0hohivzi] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding-top: var(--space-2);
    border-top: 1px solid var(--border-subtle);
}

.kanban-card__days[b-db0hohivzi],
.kanban-card__tasks[b-db0hohivzi] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--text-muted);
    line-height: 1.4;
}

.kanban-card__days[b-db0hohivzi] {
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    font-weight: 600;
    flex: 0 0 auto;
}

.kanban-card__days--neutral[b-db0hohivzi] {
    background-color: var(--surface-tertiary);
    color: var(--text-muted);
}

.kanban-card__days--warn[b-db0hohivzi] {
    background-color: var(--warning-bg);
    color: var(--warning-fg);
}

.kanban-card__days--danger[b-db0hohivzi] {
    background-color: var(--danger-bg);
    color: var(--danger-fg);
}

.kanban-card__tasks[b-db0hohivzi] {
    font-variant-numeric: tabular-nums;
}

/* ===== Plan 20-06 / 2026-05-17 — Mobile responsiveness (≤640px).
   Cards live inside fixed-width kanban columns; the inner content was
   already token-driven. Enforce 44×44 tap targets for any interactive
   controls inside the card (the drag handle + move button live on the
   DsKanbanCard chrome above). */
@media (max-width: 640px) {
    .kanban-card[b-db0hohivzi]  [data-drag-handle],
    .kanban-card[b-db0hohivzi]  .ds-kanban-card__drag-handle,
    .kanban-card[b-db0hohivzi]  button {
        min-width: 44px;
        min-height: 44px;
    }
}
/* /Components/Dashboard/CreateCaseModal.razor.rz.scp.css */
/* Phase 20 Plan 04 — CreateCaseModal layout.
   Tokens only (no new :root entries — D-32 no-op).
   Spacing: --space-* (4/8/16/24/32 only — no 12 rung).
   Color: --surface-tertiary chip surface, --brand-accent Primary pill,
   --danger-fg validation error text (inherited from DsField). */

.create-case-modal__body[b-qc22gvxuhy] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: 0;
}

/* Phase 53 (SPV-07/SPV-09) — the limited-company block: the Yes/No control plus,
   when the answer is Yes, the company entry fields. One wrapper so the pair reveals
   and hides as a unit.

   Internal rhythm is var(--space-4) — the SAME gap as .create-case-modal__body, so
   the fields inside the block sit on exactly the modal's existing rhythm rather than
   a private one.

   Separation from the Advisor field below is var(--space-6) (32px), composed as
   16px (the body's flex gap) + 16px here. The block's last child is a .ds-field,
   whose :last-child rule zeroes its own margin, so this margin is the whole of the
   extra separation and the arithmetic holds.

   NO transition and NO animation, deliberately: every other conditional field in
   this modal appears instantly, and an animated block that pushes the Advisor field
   down mid-interaction is worse than an instant one.

   The block is NEVER hidden here — visibility is an @if in the .razor. A field
   hidden with display:none stays in the tab order and still submits, which would let
   company data ride along onto a residential case (T-53-21). Do not add a
   display/visibility rule to this class.

   44px tap targets on the radio pills come from DsRadioGroup.razor.css; not
   restated or overridden here. */
.create-case-modal__company[b-qc22gvxuhy] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

/* Phase 53-10 (SPV-08) — the sale-type-change clear notice, directly beneath the Case
   type field. Informational palette, never the danger one: nothing has gone wrong, the
   broker asked for this by changing the sale type. It is a live region in the markup
   (role="status"), so this rule carries no colour-only meaning.

   Tokens only — the notice retheme with the tenant, and this is a white-label product.
   Padding is var(--space-2) var(--space-3), per 53-UI-SPEC; the body's own flex gap
   supplies the separation above and below, so no margin of its own. */
.create-case-modal__notice[b-qc22gvxuhy] {
    margin: 0;
    padding: var(--space-2) var(--space-3);
    background: var(--info-bg);
    color: var(--info-fg);
    border: 1px solid var(--info);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    font-weight: 400;
}

.create-case-modal__clients[b-qc22gvxuhy] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.create-case-modal__chip-list[b-qc22gvxuhy] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.create-case-modal__server-error[b-qc22gvxuhy] {
    margin-top: var(--space-2);
}

[b-qc22gvxuhy] .attached-client-chip {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2);
    background: var(--surface-tertiary);
    border-radius: var(--radius-md);
    border: 1px solid var(--topbar-border);
}

[b-qc22gvxuhy] .attached-client-chip__name {
    flex: 1 1 auto;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-primary);
}

[b-qc22gvxuhy] .attached-client-chip__role {
    flex: 0 0 auto;
    min-height: 44px;
    padding: 0 var(--space-2);
    background: var(--surface-primary);
    border: 1px solid var(--topbar-border);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: var(--text-xs);
}

[b-qc22gvxuhy] .attached-client-chip--primary .attached-client-chip__role {
    background: var(--brand-accent);
    border-color: var(--brand-accent);
    /* Phase 53: was a bare white hex literal. On-accent text resolves through
       var(--surface-primary), the established .ds-btn--primary convention — a
       hardcoded white cannot retheme, and this is a white-label product. Same
       rendered colour today; correct under a tenant whose accent is light.
       (Phase12/TokenLintTests scans comments too, so no literal here either.) */
    color: var(--surface-primary);
}

[b-qc22gvxuhy] .attached-client-chip__remove {
    flex: 0 0 auto;
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
}

[b-qc22gvxuhy] .attached-client-chip__remove:hover,
[b-qc22gvxuhy] .attached-client-chip__remove:focus-visible {
    border-color: var(--topbar-border);
    color: var(--danger);
    outline: none;
}

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

/* ===== Plan 20-06 — Mobile responsiveness (≤640px) — D-34 =====
   DsModal already supports full-screen at narrow viewports (Phase 18 D-07),
   but we belt-and-braces it here for the create-case modal specifically,
   and ensure footer buttons stack full-width. */
@media (max-width: 640px) {
    [b-qc22gvxuhy] .ds-modal--lg,
    [b-qc22gvxuhy] .ds-modal__dialog {
        width: 100vw;
        max-width: none;
        height: 100vh;
        max-height: none;
        border-radius: 0;
        margin: 0;
    }

    [b-qc22gvxuhy] .ds-modal__footer {
        flex-direction: column;
        gap: var(--space-2);
    }

    [b-qc22gvxuhy] .ds-modal__footer .ds-btn,
    [b-qc22gvxuhy] .ds-modal__footer button {
        width: 100%;
        min-height: 44px;
    }

    .create-case-modal__body[b-qc22gvxuhy] {
        gap: var(--space-2);
    }

    /* Phase 53 — track the body's tightened gap so the limited-company block keeps
       the same rhythm as everything around it on a phone. The block is already
       height-bounded (one radio group + at most two fields), and the modal is
       full-screen with its own scroll at this width, so the revealed block cannot
       grow the dialog without limit. */
    .create-case-modal__company[b-qc22gvxuhy] {
        gap: var(--space-2);
        margin-bottom: var(--space-2);
    }
}
/* /Components/Dashboard/TaskReminders.razor.rz.scp.css */
.task-reminders[b-6vna2g1og4] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

@media (max-width: 768px) {
    .task-reminders[b-6vna2g1og4] {
        grid-template-columns: 1fr;
    }
}

.task-bucket[b-6vna2g1og4] {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 16px;
}

.bucket-header[b-6vna2g1og4] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    font-weight: 600;
    font-size: 0.875rem;
}

.bucket-badge[b-6vna2g1og4] {
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
}

.badge-overdue[b-6vna2g1og4] {
    background: #fecaca;
    color: #991b1b;
}

.badge-due-today[b-6vna2g1og4] {
    background: #fef3c7;
    color: #92400e;
}

.badge-upcoming[b-6vna2g1og4] {
    background: #e2e8f0;
    color: #334155;
}

.task-row[b-6vna2g1og4] {
    padding: 8px 0;
    border-bottom: 1px solid #f1f5f9;
    display: flex;
    justify-content: space-between;
    font-size: 0.875rem;
}

.task-row:last-child[b-6vna2g1og4] {
    border-bottom: none;
}

.task-client-link[b-6vna2g1og4] {
    color: var(--brand-accent);
    text-decoration: none;
    margin-left: 4px;
}

.task-client-link:hover[b-6vna2g1og4] {
    text-decoration: underline;
}

.task-due-date[b-6vna2g1og4] {
    color: #64748b;
    font-size: 0.75rem;
    white-space: nowrap;
}

.empty-bucket[b-6vna2g1og4] {
    color: #94a3b8;
    font-size: 0.875rem;
}
/* /Components/Dashboard/ToastHost.razor.rz.scp.css */
.toast-host[b-k53oy61gs1] {
    position: sticky;
    top: var(--space-2, 0.5rem);
    z-index: 30;
    margin: var(--space-2, 0.5rem) auto;
    max-width: 36rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: var(--space-2, 0.5rem) var(--space-4, 1rem);
    border-radius: var(--radius-md, 0.5rem);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.4;
}

.toast-host--error[b-k53oy61gs1] {
    background: var(--danger-bg);
    color: var(--danger-fg);
    border: 1px solid var(--danger);
}

.toast-host--success[b-k53oy61gs1] {
    background: var(--success-bg);
    color: var(--success-fg);
    border: 1px solid var(--success);
}

.toast-host__glyph[b-k53oy61gs1] {
    font-size: 1rem;
    flex-shrink: 0;
}

.toast-host__message[b-k53oy61gs1] {
    flex: 1 1 auto;
}

.toast-host__dismiss[b-k53oy61gs1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    width: 44px;
    height: 44px;
    padding: 0;
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    border-radius: var(--radius-sm, 0.375rem);
    font-size: 1.25rem;
    line-height: 1;
}

.toast-host__dismiss:hover[b-k53oy61gs1],
.toast-host__dismiss:focus-visible[b-k53oy61gs1] {
    background: rgba(0, 0, 0, 0.06);
}

.toast-host__dismiss:focus-visible[b-k53oy61gs1] {
    outline: 2px solid var(--brand-accent-focus);
    outline-offset: -2px;
}

/* ===== Plan 20-06 — Mobile responsiveness (≤640px) — D-34 =====
   Dismiss button already has explicit 44×44; reaffirm here in case future
   tweaks change defaults, and let the toast take full width. */
@media (max-width: 640px) {
    .toast-host[b-k53oy61gs1] {
        max-width: 100%;
        margin: var(--space-2) var(--space-2);
    }

    .toast-host__dismiss[b-k53oy61gs1] {
        min-width: 44px;
        min-height: 44px;
    }
}
/* /Components/Documents/DriveFileBrowser.razor.rz.scp.css */
.file-browser[b-7ibckwnixi] {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
}

.browser-toolbar[b-7ibckwnixi] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #e5e7eb;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.breadcrumb[b-7ibckwnixi] {
    margin: 0;
    padding: 0;
    background: none;
    font-size: 0.9rem;
}

.breadcrumb-item + .breadcrumb-item[b-7ibckwnixi]::before {
    content: ">";
    padding: 0 0.4rem;
    color: #94a3b8;
}

.breadcrumb-item a[b-7ibckwnixi] {
    color: var(--brand-accent);
    text-decoration: none;
}

.breadcrumb-item a:hover[b-7ibckwnixi] {
    text-decoration: underline;
}

.breadcrumb-item.active[b-7ibckwnixi] {
    color: #1e293b;
    font-weight: 600;
}

.search-bar[b-7ibckwnixi] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.search-bar input[b-7ibckwnixi] {
    width: 200px;
}

.browser-error[b-7ibckwnixi] {
    padding: 0.75rem 1rem;
    background: #fef2f2;
    color: #b91c1c;
    border-bottom: 1px solid #fecaca;
    font-size: 0.9rem;
}

.table-container[b-7ibckwnixi] {
    overflow-x: auto;
}

.table[b-7ibckwnixi] {
    margin: 0;
    width: 100%;
}

.table thead th[b-7ibckwnixi] {
    background: #f8fafc;
    border-bottom: 2px solid #e5e7eb;
    padding: 0.6rem 1rem;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #64748b;
}

.table tbody td[b-7ibckwnixi] {
    padding: 0.6rem 1rem;
    vertical-align: middle;
    border-bottom: 1px solid #f1f5f9;
}

.file-row[b-7ibckwnixi] {
    cursor: pointer;
    transition: background 0.15s;
}

.file-row:hover[b-7ibckwnixi] {
    background: #f8fafc;
}

.folder-row:hover[b-7ibckwnixi] {
    background: #eff6ff;
}

.file-name-cell[b-7ibckwnixi] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
}

.file-icon[b-7ibckwnixi] {
    flex-shrink: 0;
    color: #94a3b8;
}

.folder-icon[b-7ibckwnixi] {
    color: #f59e0b;
}

.spinner[b-7ibckwnixi] {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 2px solid #e5e7eb;
    border-top-color: var(--brand-accent, #0071c1);
    border-radius: 50%;
    animation: spin-b-7ibckwnixi 0.6s linear infinite;
    vertical-align: middle;
    margin-right: 0.4rem;
}

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

/* Responsive: hide Size and Modified columns below 768px */
@media (max-width: 767.98px) {
    .col-modified[b-7ibckwnixi],
    .col-size[b-7ibckwnixi] {
        display: none;
    }

    .search-bar input[b-7ibckwnixi] {
        width: 140px;
    }
}

/* Phase 52 Plan 16 (D-08) — the parent folders this firm used before the current one.
   Colours resolve through the brand custom properties in app.css rather than hex literals, so a
   white-label tenant picks them up with no per-tenant CSS. */
.browser-previous[b-7ibckwnixi] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-bottom: 1px solid var(--form-border);
    font-size: 0.85rem;
}

.browser-previous__label[b-7ibckwnixi] {
    color: var(--brand-primary);
    opacity: 0.75;
}

.browser-previous__item[b-7ibckwnixi] {
    padding: 0;
    min-height: 44px;
    color: var(--brand-accent);
}
/* /Components/Documents/DriveFilePreview.razor.rz.scp.css */
.preview-backdrop[b-5c6xzmc62h] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
    padding: 2rem;
}

.preview-modal[b-5c6xzmc62h] {
    background: white;
    border-radius: 8px;
    width: 100%;
    max-width: 900px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.preview-header[b-5c6xzmc62h] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #e5e7eb;
}

.preview-header h3[b-5c6xzmc62h] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: calc(100% - 3rem);
}

.btn-close-preview[b-5c6xzmc62h] {
    background: none;
    border: none;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    color: #64748b;
    padding: 0.25rem;
}

.btn-close-preview:hover[b-5c6xzmc62h] {
    color: #1e293b;
}

.preview-body[b-5c6xzmc62h] {
    flex: 1;
    overflow: auto;
    padding: 1.25rem;
    min-height: 300px;
}

.preview-iframe[b-5c6xzmc62h] {
    width: 100%;
    height: 60vh;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
}

.preview-download[b-5c6xzmc62h] {
    text-align: center;
    padding: 3rem 2rem;
    color: #64748b;
}

.preview-download svg[b-5c6xzmc62h] {
    margin-bottom: 1rem;
    color: #94a3b8;
}

.preview-file-type[b-5c6xzmc62h] {
    font-size: 1.1rem;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 0.25rem;
}

.preview-file-size[b-5c6xzmc62h] {
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
}

.preview-fallback[b-5c6xzmc62h] {
    color: #94a3b8;
    font-style: italic;
}
/* /Components/Integrations/StoreSwitchConfirm.razor.rz.scp.css */
/* Store-switch confirmation — CSS isolation (Blazor attribute-scoped).
   Every colour resolves through a design-system custom property; this is a white-label product and
   Phase12.TokenLintTests lints component CSS for hex literals. */

.store-switch__line[b-tbuwta5sjt] {
    margin: 0 0 0.75rem;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--text-primary);
    overflow-wrap: anywhere;
}

.store-switch__line:last-of-type[b-tbuwta5sjt] {
    margin-bottom: 0;
}

/* The clause the dialogue exists for. Given its own block so it reads as the answer to "what
   happens to the documents I already have", not as one more line of small print. */
.store-switch__line--keep[b-tbuwta5sjt] {
    padding: 0.75rem 0.875rem;
    border-radius: 10px;
    background: var(--surface-secondary);
    border-left: 3px solid var(--brand-accent);
}

.store-switch__error[b-tbuwta5sjt] {
    margin: 0.875rem 0 0;
    padding: 0.625rem 0.75rem;
    border-radius: 8px;
    font-size: 0.875rem;
    line-height: 1.45;
    background: var(--warning-bg);
    color: var(--warning-fg);
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* Phase 12 Plan 04 (UI-08): MainLayout — token-only styling.
   Zero hex literals; topbar uses --topbar-bg/--topbar-border, content uses
   surface tokens, z-index via --z-nav.
   Phase 19 Plan 03: dead chrome rules trimmed (lifted to TopBar.razor.css in
   Plan 02 and NavMenu.razor.css in Plan 04).
   Phase 36: reverted the Phase 33 horizontal-top-nav layout back to the branded
   vertical left sidebar. At >= 641px .page is a ROW (sidebar + content side by
   side); the gradient .sidebar is a sticky 250px desktop rail; .content is
   offset by --topbar-height for the slim top bar. Below 641px the sidebar
   becomes a hamburger-drawer overlay (a11y-dismissable backdrop). */

.page[b-i9x1vu1n46] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-i9x1vu1n46] {
    flex: 1;
    /* A flex item defaults to min-width: auto, so it can never shrink below its
       min-content width. At >= 641px .page is a ROW, so any wide descendant (the
       credit-history / outstanding-commitments tables, a wide DsTable) pushed
       main past its share and widened the whole row past the viewport — the
       DOCUMENT then scrolled horizontally, panning the sticky sidebar and top
       bar out of view along with the content. min-width: 0 lets main shrink to
       its share; wide tables scroll inside their own .table-scroll wrapper
       (overflow-x: auto), which is where the scrollbar belongs. */
    min-width: 0;
}

.sidebar[b-i9x1vu1n46] {
    background-image: linear-gradient(180deg, var(--sidebar-gradient-start) 0%, var(--sidebar-gradient-end) 70%);
    display: flex;
    flex-direction: column;
}

@media (min-width: 641px) {
    .page[b-i9x1vu1n46] {
        flex-direction: row;
    }

    .sidebar[b-i9x1vu1n46] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
        display: flex;
        flex-direction: column;
    }
}

.content[b-i9x1vu1n46] {
    padding-top: var(--topbar-height);
    padding-right: var(--space-6);
    padding-bottom: var(--space-6);
    padding-left: var(--space-6);
    background: var(--surface-secondary);
    min-height: 100vh;
}

@media (max-width: 640.98px) {
    .page .sidebar[b-i9x1vu1n46] {
        display: none;
    }

    /* re-assert display:flex to override the .page .sidebar { display:none } rule above */
    .page--sidebar-open .sidebar[b-i9x1vu1n46] {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 250px;
        z-index: calc(var(--z-nav) + 1);
    }

    /* Mobile-only backdrop behind the overlay sidebar (a11y dismissal target). */
    .sidebar-backdrop[b-i9x1vu1n46] {
        position: fixed;
        inset: 0;
        background: var(--ds-modal-backdrop);
        z-index: var(--z-nav);
    }
}

@media (min-width: 641px) {
    /* Desktop sidebar is sticky, not modal — no backdrop required. */
    .sidebar-backdrop[b-i9x1vu1n46] {
        display: none;
    }
}

/* ===== Phase 43 (D-10): environment banner =====
   Full-bleed across the content column, above the top bar, occupying real
   layout space. NOT position:fixed — fixed would overlay content on small
   viewports and fight the mobile sidebar overlay.

   DELIBERATE WHITE-LABEL EXCEPTION: these two colours are fixed literals, not
   brand tokens. This is a warning surface, not brand chrome — a tenant whose
   palette happened to match --brand-* would lose the entire signal, which is
   precisely the incident (operator mistakes staging for production on a system
   handling mortgage applications) this banner exists to prevent. Amber on black
   is the hazard idiom and reads as "not normal UI" at a glance. Contrast of
   #000 on #d97706 is ~5.5:1 — comfortably AA for this bold, large-ish text. */
.env-banner[b-i9x1vu1n46] {
    box-sizing: border-box;
    width: 100%;
    padding: var(--space-2) var(--space-4);
    background: #d97706;
    color: #000000;
    font-weight: var(--weight-bold);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-align: center;
    /* Wrap rather than force a minimum width — no horizontal scroll at 580px
       however long the configured label is (responsive-from-day-one). */
    overflow-wrap: anywhere;
}

#blazor-error-ui[b-i9x1vu1n46] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: var(--shadow-md);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: var(--z-toast);
}

    #blazor-error-ui .dismiss[b-i9x1vu1n46] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* Phase 12 Plan 04 (UI-08): NavMenu — token-only styling.
   Sidebar uses existing gradient tokens; active/hover/focus states via
   --nav-active-bg / --nav-hover-bg / --focus-ring. Zero hex literals
   (SVG data-URIs use percent-encoded %23 + named colour 'white', which
   are not hex-literal token violations).
   Phase 19 Plan 04: .navbar-toggler rules deleted (D-14); .sign-out-btn
   lifted from MainLayout.razor.css; .nav-footer rule added with
   --sidebar-divider top border; .nav-scrollable now uses flex:1 1 auto
   so the sidebar flex-column root (owned by MainLayout) anchors the
   footer to the bottom; mobile-base display:none rule removed so
   visibility cascades from .sidebar (checker Issue 9). */

.top-row[b-ryqmgec0gq] {
    min-height: 3.5rem;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: var(--z-nav);
}

.navbar-brand[b-ryqmgec0gq] {
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
}

.bi[b-ryqmgec0gq] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
    /* Never let the icon shrink — keeps it aligned even when the label is long. */
    flex-shrink: 0;
}

.bi-house-door-fill-nav-menu[b-ryqmgec0gq] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-chat-dots-fill-nav-menu[b-ryqmgec0gq] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-chat-dots-fill' viewBox='0 0 16 16'%3E%3Cpath d='M16 8c0 3.866-3.582 7-8 7a9 9 0 0 1-2.347-.306c-.584.296-1.925.864-4.181 1.234-.2.032-.352-.176-.273-.362.354-.836.674-1.95.77-2.966C.744 11.37 0 9.76 0 8c0-3.866 3.582-7 8-7s8 3.134 8 7M5 8a1 1 0 1 0-2 0 1 1 0 0 0 2 0m4 0a1 1 0 1 0-2 0 1 1 0 0 0 2 0m3 1a1 1 0 1 0 0-2 1 1 0 0 0 0 2'/%3E%3C/svg%3E");
}

.bi-person-fill-nav-menu[b-ryqmgec0gq] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-person-fill' viewBox='0 0 16 16'%3E%3Cpath d='M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6'/%3E%3C/svg%3E");
}

.bi-calculator-nav-menu[b-ryqmgec0gq] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-calculator' viewBox='0 0 16 16'%3E%3Cpath d='M12 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1zM4 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2z'/%3E%3Cpath d='M4 2.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.5.5h-7a.5.5 0 0 1-.5-.5zm0 4a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5zm0 3a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5zm0 3a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5zm3-6a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5zm0 3a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5zm0 3a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5zm3-6a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5zm0 3a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.bi-folder2-open-nav-menu[b-ryqmgec0gq] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-folder2-open' viewBox='0 0 16 16'%3E%3Cpath d='M1 3.5A1.5 1.5 0 0 1 2.5 2h2.764c.958 0 1.76.56 2.311 1.184C7.985 3.648 8.48 4 9 4h4.5A1.5 1.5 0 0 1 15 5.5v.64c.57.265.94.876.856 1.546l-.64 5.124A2.5 2.5 0 0 1 12.733 15H3.266a2.5 2.5 0 0 1-2.481-2.19l-.64-5.124A1.5 1.5 0 0 1 1 6.14zM2 6h12v-.5a.5.5 0 0 0-.5-.5H9c-.964 0-1.71-.629-2.174-1.154C6.374 3.334 5.82 3 5.264 3H2.5a.5.5 0 0 0-.5.5zm-.367 1a.5.5 0 0 0-.496.562l.64 5.124A1.5 1.5 0 0 0 3.266 14h9.468a1.5 1.5 0 0 0 1.489-1.314l.64-5.124A.5.5 0 0 0 14.367 7z'/%3E%3C/svg%3E");
}

.bi-gear-fill-nav-menu[b-ryqmgec0gq] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-gear-fill' viewBox='0 0 16 16'%3E%3Cpath d='M9.405 1.05c-.413-1.4-2.397-1.4-2.81 0l-.1.34a1.464 1.464 0 0 1-2.105.872l-.31-.17c-1.283-.698-2.686.705-1.987 1.987l.169.311c.446.82.023 1.841-.872 2.105l-.34.1c-1.4.413-1.4 2.397 0 2.81l.34.1a1.464 1.464 0 0 1 .872 2.105l-.17.31c-.698 1.283.705 2.686 1.987 1.987l.311-.169a1.464 1.464 0 0 1 2.105.872l.1.34c.413 1.4 2.397 1.4 2.81 0l.1-.34a1.464 1.464 0 0 1 2.105-.872l.31.17c1.283.698 2.686-.705 1.987-1.987l-.169-.311a1.464 1.464 0 0 1 .872-2.105l.34-.1c1.4-.413 1.4-2.397 0-2.81l-.34-.1a1.464 1.464 0 0 1-.872-2.105l.17-.31c.698-1.283-.705-2.686-1.987-1.987l-.311.169a1.464 1.464 0 0 1-2.105-.872zM8 10.93a2.929 2.929 0 1 1 0-5.86 2.929 2.929 0 0 1 0 5.858z'/%3E%3C/svg%3E");
}

.bi-clipboard-check-nav-menu[b-ryqmgec0gq] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-clipboard-check-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 0A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0zm3 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5zM4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1A2.5 2.5 0 0 1 9.5 5h-3A2.5 2.5 0 0 1 4 2.5zm6.854 7.354-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 0 1 .708-.708L7.5 10.793l2.646-2.647a.5.5 0 0 1 .708.708'/%3E%3C/svg%3E");
}

.bi-plug-fill-nav-menu[b-ryqmgec0gq] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plug-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6 0a.5.5 0 0 1 .5.5V3h3V.5a.5.5 0 0 1 1 0V3h1a.5.5 0 0 1 .5.5v3A3.5 3.5 0 0 1 8.5 10c-.002.434-.01 1.492.11 2.115.062.322.15.54.268.684.115.14.303.26.666.301A.5.5 0 0 1 9.5 13.5v2a.5.5 0 0 1-.5.5H7a.5.5 0 0 1-.5-.5v-2a.5.5 0 0 1 .456-.498c.363-.04.55-.16.666-.3.118-.145.206-.363.268-.685.12-.623.112-1.681.11-2.115A3.5 3.5 0 0 1 4 6.5v-3a.5.5 0 0 1 .5-.5h1V.5A.5.5 0 0 1 6 0'/%3E%3C/svg%3E");
}

.bi-chevron-nav-menu[b-ryqmgec0gq] {
    width: 0.8rem;
    height: 0.8rem;
    margin-left: auto;
    margin-right: 0;
    transition: transform var(--dur-fast) var(--ease-out);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-chevron-down' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/%3E%3C/svg%3E");
}

.bi-chevron-nav-menu.expanded[b-ryqmgec0gq] {
    transform: rotate(180deg);
}

.nav-item[b-ryqmgec0gq] {
    font-size: var(--text-sm);
    padding: var(--space-1) var(--space-3);
}

    .nav-item:first-of-type[b-ryqmgec0gq] {
        padding-top: var(--space-4);
    }

    .nav-item:last-of-type[b-ryqmgec0gq] {
        padding-bottom: var(--space-4);
    }

    .nav-item[b-ryqmgec0gq]  .nav-link {
        color: var(--nav-text);
        background: none;
        border: none;
        border-radius: var(--radius-sm);
        height: 3rem;
        display: flex;
        align-items: center;
        /* line-height kept normal: the fixed 3rem box + align-items:center handle
           vertical centring. A 3rem line-height made each wrapped line 3rem tall,
           so a long label (e.g. "Fee Scenarios") spilled out of the box and pushed
           its icon out of alignment. nowrap stops the wrap at any font size. */
        line-height: 1.2;
        white-space: nowrap;
        width: 100%;
        padding: var(--space-3) var(--space-4);
        transition: background var(--dur-fast) var(--ease-out);
    }

    .nav-item[b-ryqmgec0gq]  .nav-parent-toggle {
        cursor: pointer;
        font-size: var(--text-sm);
        padding: var(--space-2) var(--space-4);
        white-space: nowrap;
    }

    .nav-item[b-ryqmgec0gq]  .nav-parent-toggle:hover {
        background-color: var(--nav-hover-bg);
        color: white;
    }

.nav-item[b-ryqmgec0gq]  a.active {
    background-color: var(--nav-active-bg);
    color: white;
}

.nav-item[b-ryqmgec0gq]  .nav-link:hover {
    background-color: var(--nav-hover-bg);
    color: white;
}

.nav-item[b-ryqmgec0gq]  .nav-link:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.nav-footer[b-ryqmgec0gq] {
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--sidebar-divider);
    flex-shrink: 0;
}

.sign-out-btn[b-ryqmgec0gq] {
    font-size: var(--text-sm);
    color: var(--brand-accent);
    text-decoration: none;
    padding: 0;
}

.sign-out-btn:focus-visible[b-ryqmgec0gq] {
    outline: none;
    box-shadow: var(--focus-ring);
}

@media (min-width: 641px) {
    .nav-scrollable[b-ryqmgec0gq] {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
    }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-j8zrhdifz4],
.components-reconnect-repeated-attempt-visible[b-j8zrhdifz4],
.components-reconnect-failed-visible[b-j8zrhdifz4],
.components-pause-visible[b-j8zrhdifz4],
.components-resume-failed-visible[b-j8zrhdifz4],
.components-rejoining-animation[b-j8zrhdifz4] {
    display: none;
}

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


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

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

}

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

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

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

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

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

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

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

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

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

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

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

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Layout/TopBar.razor.rz.scp.css */
/* Phase 19 — TopBar (scoped). Tokens-only; no hex literals.
   :root tokens (Plan 01): --topbar-height, --topbar-search-max-w,
   --topbar-search-bg, --topbar-search-border, --badge-count-bg, --badge-count-fg.
   Reused existing: --topbar-bg, --topbar-border, --brand-accent, --text-primary,
   --text-secondary, --text-muted, --space-1..5, --text-sm, --text-xs, --weight-semibold,
   --leading-normal, --radius-sm, --focus-ring, --z-nav, --dur-fast, --ease-out,
   --ds-row-hover-bg (Phase 18).
   Phase 36: reverted the Phase 33 top-nav — removed .topbar-nav / .topbar-brand /
   .topbar-user avatar-dropdown / .topbar-usermenu rules; hamburger is mobile-only
   again (sidebar owns nav at >= 641px). */

.topbar[b-79qzgylahs] {
    position: sticky;
    top: 0;
    z-index: var(--z-nav);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 0 var(--space-5);
    height: var(--topbar-height);
    background: var(--topbar-bg);
    border-bottom: 1px solid var(--topbar-border);
}

/* ===== Hamburger + Bell + mobile-search trigger — shared icon-button base ===== */
.topbar-iconbtn[b-79qzgylahs] {
    width: 2.75rem;   /* 44 px touch target */
    height: 2.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    padding: 0;
    position: relative;
    cursor: pointer;
    transition: background-color var(--dur-fast) var(--ease-out);
}

.topbar-iconbtn:hover[b-79qzgylahs] {
    background: var(--ds-row-hover-bg);
    color: var(--text-primary);
}

.topbar-iconbtn:focus-visible[b-79qzgylahs] {
    outline: none;
    box-shadow: var(--focus-ring);
}

.topbar-iconbtn .bi[b-79qzgylahs] {
    width: 1.25rem;
    height: 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    line-height: 1;
}

/* ===== Search shell ===== */
.topbar-search[b-79qzgylahs] {
    flex: 1 1 auto;
    max-width: var(--topbar-search-max-w);
    margin-inline: auto;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.visually-hidden-wrapper[b-79qzgylahs] {
    flex: 1 1 auto;
    width: 100%;
}

/* The DsCombobox renders its own <label> when Label non-empty; hide it visually
   (D-21 — a real <label> for AT, hidden for sighted users). Bootstrap .visually-hidden
   utility may not be present in Admin app.css; replicate inline via ::deep. */
.visually-hidden-wrapper[b-79qzgylahs]  .ds-field__label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.visually-hidden-wrapper[b-79qzgylahs]  .ds-combobox__input {
    background: var(--topbar-search-bg);
    border: 1px solid var(--topbar-search-border);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--text-primary);
}

.visually-hidden-wrapper[b-79qzgylahs]  .ds-combobox__input::placeholder {
    color: var(--text-muted);
    font-weight: var(--weight-regular);
}

.visually-hidden-wrapper[b-79qzgylahs]  .ds-combobox__input:focus-visible {
    outline: none;
    border-color: var(--brand-accent);
    box-shadow: var(--focus-ring);
}

/* ===== Auth cluster — bell + user, sits on the right ===== */
.topbar-auth-cluster[b-79qzgylahs] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

/* ===== Bell badge pill ===== */
.topbar-bell[b-79qzgylahs] {
    position: relative;
}

.topbar-bell__badge[b-79qzgylahs] {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 1.125rem;
    height: 1.125rem;
    padding: 0 var(--space-1);
    border-radius: 999px;
    background: var(--badge-count-bg);
    color: var(--badge-count-fg);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ===== User chrome (display-only — NOT a button) ===== */
.topbar-user[b-79qzgylahs] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.user-avatar[b-79qzgylahs] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--brand-accent);
    color: var(--badge-count-fg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
}

.user-name[b-79qzgylahs] {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--text-primary);
}

/* ===== Responsive (desktop-first base; tablet + mobile narrow it) ===== */

/* Desktop default: hide the mobile search trigger; show inline search shell. */
.topbar-search-trigger[b-79qzgylahs] {
    display: none;
}

/* Hamburger is mobile-only chrome — sidebar is always-visible at >= 641px
   (matches MainLayout.razor.css sidebar breakpoint). */
@media (min-width: 641px) {
    .topbar-hamburger[b-79qzgylahs] {
        display: none;
    }
}

@media (max-width: 640.98px) {
    /* Mobile: collapse the inline search; show the magnifier trigger. */
    .topbar-search[b-79qzgylahs] {
        display: none;
    }

    /* Compound selector (specificity 0,2,0) beats the single-class
       .topbar-search base rule (0,1,0) regardless of declaration order —
       checker Issue 5 fix. */
    .topbar-search.topbar-search--expanded[b-79qzgylahs] {
        display: flex;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: var(--topbar-height);
        background: var(--topbar-bg);
        border-bottom: 1px solid var(--topbar-border);
        padding: 0 var(--space-5);
        z-index: var(--z-nav);
        align-items: center;
        opacity: 1;
        transition: opacity var(--dur-fast) var(--ease-out);
    }

    .topbar-search-trigger[b-79qzgylahs] {
        display: inline-flex;
        margin-left: auto;  /* push trigger to the right when search is collapsed */
    }

    .topbar-search.topbar-search--expanded + .topbar-search-trigger[b-79qzgylahs] {
        display: none;  /* hide trigger while overlay is open */
    }

    /* Mobile: also hide the display name; keep avatar. */
    .user-name[b-79qzgylahs] {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .topbar-iconbtn[b-79qzgylahs],
    .topbar-search.topbar-search--expanded[b-79qzgylahs] {
        transition: none;
    }
}
/* /Components/Messages/ConversationList.razor.rz.scp.css */
.conversation-list[b-quhb0r4ipi] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.search-bar[b-quhb0r4ipi] {
    padding: 12px 16px;
    border-bottom: 1px solid #f0f0f0;
}

.search-input[b-quhb0r4ipi] {
    font-size: 13px;
}

.conversation-item[b-quhb0r4ipi] {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
}

.conversation-item:hover[b-quhb0r4ipi] {
    background: #f7f7f7;
}

.conversation-item.active[b-quhb0r4ipi] {
    background: #e8f0fe;
}

.avatar[b-quhb0r4ipi] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--brand-accent);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    margin-right: 12px;
    flex-shrink: 0;
}

.unread-dot[b-quhb0r4ipi] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--brand-accent);
    margin-right: 8px;
    flex-shrink: 0;
}

.conversation-info[b-quhb0r4ipi] {
    flex: 1;
    min-width: 0;
}

.client-name[b-quhb0r4ipi] {
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 2px;
}

.preview[b-quhb0r4ipi] {
    color: #6c757d;
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.timestamp[b-quhb0r4ipi] {
    font-size: 12px;
    color: #6c757d;
    margin-left: auto;
    white-space: nowrap;
    padding-left: 8px;
}

.empty-conversations[b-quhb0r4ipi] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    text-align: center;
    color: #6c757d;
}

.empty-heading[b-quhb0r4ipi] {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 8px;
    color: #495057;
}

.empty-body[b-quhb0r4ipi] {
    font-size: 14px;
}
/* /Components/Messages/MessageComposer.razor.rz.scp.css */
.composer[b-ni2vn1hrsy] {
    padding: 12px 16px;
    border-top: 1px solid #f0f0f0;
    background: #ffffff;
}

.composer-internal[b-ni2vn1hrsy] {
    background: #fff8e1;
}

.internal-warning[b-ni2vn1hrsy] {
    font-size: 13px;
    color: #8a6d3b;
    padding: 8px 0;
    font-style: italic;
}

.composer-row[b-ni2vn1hrsy] {
    display: flex;
    gap: 8px;
    align-items: flex-end;
}

.composer-input[b-ni2vn1hrsy] {
    flex: 1;
    resize: none;
    min-height: 40px;
    max-height: 120px;
    font-size: 14px;
}

.btn-send[b-ni2vn1hrsy] {
    min-width: 44px;
    min-height: 44px;
    background-color: var(--brand-accent);
    color: white;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    font-size: 14px;
    padding: 8px 16px;
    cursor: pointer;
}

.btn-send:hover:not(:disabled)[b-ni2vn1hrsy] {
    background-color: var(--brand-accent-hover);
}

.btn-send:disabled[b-ni2vn1hrsy] {
    opacity: 0.5;
    cursor: not-allowed;
}

.composer-options[b-ni2vn1hrsy] {
    padding-top: 8px;
}

.internal-toggle[b-ni2vn1hrsy] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #495057;
    cursor: pointer;
}

.internal-toggle input[type="checkbox"][b-ni2vn1hrsy] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}
/* /Components/Messages/MessageThread.razor.rz.scp.css */
.thread-container[b-33lba7v35r] {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.message-bubble[b-33lba7v35r] {
    max-width: 70%;
    padding: 8px 12px;
    border-radius: 12px;
    position: relative;
}

.message-broker[b-33lba7v35r] {
    align-self: flex-end;
    background: #e8f0fe;
}

.message-client[b-33lba7v35r] {
    align-self: flex-start;
    background: #f0f0f0;
}

.message-internal[b-33lba7v35r] {
    align-self: stretch;
    background: #fff8e1;
    border-left: 3px solid #f0ad4e;
}

.internal-label[b-33lba7v35r] {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #8a6d3b;
    margin-bottom: 4px;
}

.bubble-body[b-33lba7v35r] {
    font-size: 14px;
    line-height: 1.5;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.bubble-footer[b-33lba7v35r] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.bubble-time[b-33lba7v35r] {
    font-size: 12px;
    color: #6c757d;
    margin-top: 4px;
}

.read-indicator[b-33lba7v35r] {
    font-size: 11px;
    color: #6c757d;
    margin-top: 4px;
}

.empty-thread[b-33lba7v35r] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #6c757d;
    font-size: 14px;
}
/* /Components/Pages/Bootstrap.razor.rz.scp.css */
/* Bootstrap page — shell/hero live in design-system.css (.auth-page + .auth-card).
   This file holds only page-specific overrides, if any. */
/* /Components/Pages/BrokerClaim.razor.rz.scp.css */
/* BrokerClaim page — shell/hero live in design-system.css (.auth-page + .auth-card). */

.broker-claim__tabs[b-ujauq417wc] {
    display: flex;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}
/* /Components/Pages/BrokerManagement.razor.rz.scp.css */
/* BrokerManagement page — page-level surfaces use ds-page + ds-table + ds-modal-*.
   This file holds only page-specific overrides (row states + modal close icon). */

.broker-management-page h1[b-r61q2xxdch] {
    font-weight: 600;
}

.page-subheading[b-r61q2xxdch] {
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
}

.broker-row--disabled[b-r61q2xxdch] {
    opacity: 0.6;
}

.broker-row__self[b-r61q2xxdch] {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin-left: var(--space-1);
}

.broker-row__invite-expiry[b-r61q2xxdch] {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin-top: var(--space-1);
}

.broker-row__actions[b-r61q2xxdch] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.broker-modal__close[b-r61q2xxdch] {
    background: none;
    border: none;
    font-size: var(--text-xl);
    line-height: 1;
    cursor: pointer;
    color: var(--text-secondary);
}

.broker-modal__close:hover[b-r61q2xxdch] {
    color: var(--text-primary);
}
/* /Components/Pages/CaseDetail.razor.rz.scp.css */
.case-detail-page[b-8873fny41a] {
    /* Phase 34 (FF-01 / UI-SPEC L1) — full-width. The overflow-x declaration below
       is the no-horizontal-scroll responsive guarantee (FF-05). */
    max-width: none;
    margin: 0 auto;
    padding: var(--space-6) var(--space-5);
    /* Quick-task 260806-m9t — the shorthand's --space-6 is 2rem, and 32px was measured
       as the ENTIRE gap between the last content pixel and the bottom of the document.
       It read to the broker as a cropped page rather than a finished one. The bottom
       edge therefore gets deliberately more than the page's uniform inset. */
    padding-bottom: var(--space-8);
    background: var(--surface-secondary);
    min-height: 100%;
    /* Quick-task 260806-hop — `clip`, deliberately, NOT a scroll-container value.
       It still prevents the page body from horizontally scrolling (FF-05,
       UI-SPEC §Responsive), but it does NOT make this element a scroll container.
       A scroll container here would silently neutralise .overview-rail's
       position: sticky on the Overview tab — the rail would stick to THIS box,
       which is as tall as its content and never scrolls, so it would simply never
       stick, with no error in the console and nothing to grep for. */
    overflow-x: clip;
}

/* Phase 36 — parent sections are horizontal DsTabs again; the body sits full-width
   below the tab strip. */
.case-detail-body[b-8873fny41a] {
    min-width: 0; /* prevents flex-child overflow when content has a long word */
    margin-top: var(--space-6);
}

/* Phase 36 — the in-tab child rail (Fact find). Flat DsSideNav on the left
   (200px, its own CSS, chip-strip below 700px) + the section content to the
   right. Shared shape used by ProfilePane too. */
.record-section-layout[b-8873fny41a] {
    display: flex;
    flex-direction: row;
    gap: var(--space-5);
}

.record-section-body[b-8873fny41a] {
    flex: 1;
    min-width: 0;
}

/* Canonical 640px table-collapse boundary only. The rail→chip-strip collapse
   (< 700px) is owned by DsSideNav.razor.css in the Shared RCL; below 640px the
   rail becomes a chip-strip via its own rule, so we just stack the two-column
   layout to a column and let the body run full-width. */
@media (max-width: 640px) {
    .case-detail-page[b-8873fny41a] {
        padding: var(--space-5) var(--space-4);
        /* Quick-task 260806-m9t — this shorthand re-declares the padding, which would
           silently drop the desktop rule's bottom inset on mobile. One step down
           (--space-7) so the mobile page keeps the fix at a mobile scale. */
        padding-bottom: var(--space-7);
    }

    .record-section-layout[b-8873fny41a] {
        flex-direction: column;
        gap: var(--space-4);
    }
}
/* /Components/Pages/ClientDetail.razor.rz.scp.css */
/* Phase 36: ClientDetail — horizontal DsTabs parent strip ABOVE a full-width
   section body. Profile's child rail lives inside ProfilePane (two-column). The
   page CSS stays on the canonical 640px boundary; the child rail's chip-strip
   collapse (<700px) is owned by DsSideNav.razor.css. Zero raw hex — tokens only. */

.back-link[b-yro98nt4cv] {
    color: var(--brand-accent);
    text-decoration: none;
    display: inline-block;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
}

.back-link:hover[b-yro98nt4cv] {
    text-decoration: underline;
}

.client-detail-body[b-yro98nt4cv] {
    min-width: 0; /* prevents h-scroll when a child has a long word (580px floor) */
    padding-block: var(--space-5);
}

.placeholder-note[b-yro98nt4cv] {
    color: var(--text-muted);
    font-style: italic;
    padding: var(--space-5);
}
/* /Components/Pages/Clients.razor.rz.scp.css */
/* Phase 12 Plan 05 (UI-03): Clients list page — tokenised. */

.clients-page h1[b-mdvh23i8z2] {
    font-weight: 600;
}

.page-subheading[b-mdvh23i8z2] {
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
}

.ds-page-header__actions[b-mdvh23i8z2] {
    display: flex;
    gap: var(--space-3);
    align-items: flex-end;
    flex-wrap: wrap;
}

.clients-search[b-mdvh23i8z2] {
    min-width: 16rem;
}

.clients-table__avatar-col[b-mdvh23i8z2] {
    width: var(--space-7);
}

.clients-table__avatar-cell[b-mdvh23i8z2] {
    width: var(--space-7);
    text-align: center;
}

.clients-table__name[b-mdvh23i8z2] {
    font-weight: var(--weight-semibold);
    color: var(--text-primary);
}

.clients-table__sortable[b-mdvh23i8z2] {
    cursor: pointer;
    user-select: none;
}

.clients-table__sortable:hover[b-mdvh23i8z2] {
    background: var(--surface-tertiary);
}

/* The shared .ds-table clips with overflow:hidden (for its rounded corners),
   which would crop the row-actions kebab popover on the last/short rows. Allow
   overflow here and restore the rounded corners on the corner cells instead. */
.clients-page .ds-table[b-mdvh23i8z2] {
    overflow: visible;
}

.clients-page .ds-table thead tr:first-child th:first-child[b-mdvh23i8z2] {
    border-top-left-radius: var(--radius-md);
}

.clients-page .ds-table thead tr:first-child th:last-child[b-mdvh23i8z2] {
    border-top-right-radius: var(--radius-md);
}

.clients-page .ds-table tbody tr:last-child td:first-child[b-mdvh23i8z2] {
    border-bottom-left-radius: var(--radius-md);
}

.clients-page .ds-table tbody tr:last-child td:last-child[b-mdvh23i8z2] {
    border-bottom-right-radius: var(--radius-md);
}

.bootstrap-banner[b-mdvh23i8z2] {
    display: flex;
    gap: var(--space-4);
    align-items: center;
    padding: var(--space-4) var(--space-5);
    background: var(--info-bg);
    color: var(--info-fg);
    border: 1px solid var(--info);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
}

.bootstrap-banner__link[b-mdvh23i8z2] {
    color: var(--info-fg);
    text-decoration: underline;
    font-weight: var(--weight-semibold);
    white-space: nowrap;
}

.bootstrap-banner__dismiss[b-mdvh23i8z2] {
    background: transparent;
    border: none;
    color: var(--info-fg);
    font-weight: var(--weight-semibold);
    cursor: pointer;
    padding: var(--space-1) var(--space-2);
    font-size: var(--text-sm);
}

.regen-close[b-mdvh23i8z2] {
    background: transparent;
    border: none;
    font-size: var(--text-xl);
    line-height: 1;
    cursor: pointer;
    color: var(--text-secondary);
    padding: var(--space-1) var(--space-2);
}

.regen-close:hover[b-mdvh23i8z2] {
    color: var(--text-primary);
}

@media (max-width: 768px) {
    .ds-page-header__actions[b-mdvh23i8z2] {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

    .clients-search[b-mdvh23i8z2] {
        min-width: unset;
        width: 100%;
    }
}
/* /Components/Pages/Dashboard.razor.rz.scp.css */
/* Phase 20 Plan 02 Task 3 — Dashboard chrome (cases-first 3-tab dashboard).
   Tokens only. Mobile pass (≤640px) is owned by Plan 20-06; this
   stylesheet ships the desktop layout. Legacy Phase 12 .dashboard-grid /
   .tile-* / .stalled-card__* rules removed alongside the legacy KPI tile
   markup. */

.dashboard-page[b-9s8vusyfwi] {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.dashboard-header[b-9s8vusyfwi] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}

.dashboard-title[b-9s8vusyfwi] {
    font-size: var(--text-xl);
    font-weight: 600;
    margin: 0;
}

/* Export menu. Positioning and popover chrome come from the global .row-actions rules
   this shares; the only thing missing there is an anchor reset, because
   .row-actions__item was written for <button> and anchors arrive underlined. CSS
   isolation cannot reach the popover's children, hence ::deep. */
.dashboard-export[b-9s8vusyfwi]  .row-actions__item {
    text-decoration: none;
    white-space: nowrap;
}

.dashboard-filters[b-9s8vusyfwi] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-2);
}

.dashboard-filters__control[b-9s8vusyfwi] {
    min-width: 180px;
}

.dashboard-filters__advisor[b-9s8vusyfwi] {
    min-width: 200px;
}

.dashboard-filters__sort[b-9s8vusyfwi] {
    display: inline-flex;
    background-color: var(--surface-tertiary);
    border-radius: var(--radius-sm);
    padding: var(--space-1);
    gap: var(--space-1);
}

.dashboard-sort-btn[b-9s8vusyfwi] {
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-secondary);
    font-size: var(--text-sm);
    font-weight: 400;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    cursor: pointer;
    line-height: 1.4;
    min-height: 32px;
}

.dashboard-sort-btn:hover[b-9s8vusyfwi] {
    color: var(--text-primary);
}

.dashboard-sort-btn:focus-visible[b-9s8vusyfwi] {
    outline: 2px solid var(--brand-accent-focus);
    outline-offset: 2px;
}

.dashboard-sort-btn--active[b-9s8vusyfwi] {
    background-color: var(--surface-primary);
    border-color: var(--brand-accent);
    color: var(--text-primary);
    font-weight: 600;
}

.dashboard-filters__clear[b-9s8vusyfwi] {
    margin-left: auto;
}

.dashboard-board-skeleton[b-9s8vusyfwi] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-5);
}

.dashboard-board-skeleton__lane[b-9s8vusyfwi] {
    background-color: var(--surface-secondary);
    border-radius: var(--radius-md);
    padding: var(--space-4);
}

.dashboard-empty-cta[b-9s8vusyfwi] {
    display: flex;
    justify-content: center;
    margin-top: var(--space-4);
}

/* ===== Plan 20-06 — Sort control responsive swap (CSS-only) =====
   Both controls are always in the DOM. Default (>640px) shows segmented;
   media query below 640px hides segmented and shows the DsSelect. */
.dashboard-sort-segmented[b-9s8vusyfwi] {
    display: inline-flex;
}

.dashboard-sort-select[b-9s8vusyfwi] {
    display: none;
    min-width: 200px;
}

/* ===== Plan 20-06 — Mobile responsiveness (≤640px) — D-34 =====
   - No horizontal scroll at 580px
   - Board lanes stack vertically
   - All Cases / Leads tables collapse to stacked cards
   - 44×44 tap targets
   - CSS-only sort swap
   - Tokens only — relies on Phase 12 P01 + Phase 18 + Phase 19 base set */
@media (max-width: 640px) {

    /* Filter row stacks. */
    .dashboard-filters[b-9s8vusyfwi] {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-2);
    }

    .dashboard-filters__control[b-9s8vusyfwi],
    .dashboard-filters__advisor[b-9s8vusyfwi],
    .dashboard-filters__status[b-9s8vusyfwi],
    .dashboard-filters__type[b-9s8vusyfwi] {
        min-width: 0;
        width: 100%;
    }

    .dashboard-filters__clear[b-9s8vusyfwi] {
        margin-left: 0;
    }

    /* Quick-task 260515-r12 (UAT): keep the segmented Created/Updated toggle
       visible at narrow widths (was previously hidden in favour of a DsSelect
       dropdown; the dropdown was retired because the toggle is a better UX
       and stays visually consistent across breakpoints). Stretch each button
       full-width and ensure 44×44 tap targets. */
    .dashboard-sort-segmented[b-9s8vusyfwi] {
        width: 100%;
        display: flex;
        gap: var(--space-2);
    }

    .dashboard-sort-btn[b-9s8vusyfwi] {
        flex: 1 1 0;
        min-height: 44px;
    }

    /* Header stacks; primary CTA goes full width. */
    .dashboard-header[b-9s8vusyfwi] {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-2);
    }

    /* Board lanes stack vertically — DsKanbanBoard lane container is a
       descendant; flex-direction inherits from the board. We override via
       ::deep so the lane row becomes a column at narrow viewports.
       Quick-task 260515-r12 (UAT fix): selectors above were targeting class
       names that don't exist in the actual DOM (.ds-kanban__columns,
       .ds-kanban-board__lanes, [data-kanban-lanes]). The DS primitive uses
       .ds-kanban-board__columns and .ds-kanban-board__column. Also drop
       overflow-x:auto so the column doesn't keep its horizontal scroll
       wrapper at narrow widths. */
    [b-9s8vusyfwi] .ds-kanban-board__columns {
        flex-direction: column;
        overflow-x: visible;
    }

    [b-9s8vusyfwi] .ds-kanban-board__column,
    [b-9s8vusyfwi] [data-column-id] {
        width: 100%;
        min-width: 0;
        max-width: none;
    }

    /* All Cases / Leads tables collapse to stacked cards.
       The `.dashboard-table-host` wrapper scopes this rule so other tables
       (none in scope this phase, but future-proof) aren't affected. */
    .dashboard-table-host[b-9s8vusyfwi]  .ds-table {
        display: block;
        width: 100%;
    }

    .dashboard-table-host[b-9s8vusyfwi]  .ds-table thead {
        display: none;
    }

    .dashboard-table-host[b-9s8vusyfwi]  .ds-table tbody,
    .dashboard-table-host[b-9s8vusyfwi]  .ds-table tr {
        display: block;
        width: 100%;
    }

    .dashboard-table-host[b-9s8vusyfwi]  .ds-table tbody tr {
        background: var(--surface-primary);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-sm);
        padding: var(--space-4);
        margin-bottom: var(--space-2);
        min-height: 44px;
    }

    .dashboard-table-host[b-9s8vusyfwi]  .ds-table td {
        display: block;
        border: 0;
        padding: var(--space-1) 0;
    }

    /* Hide the wrapper's table-layout helpers that fight block display. */
    .dashboard-table-host[b-9s8vusyfwi]  .ds-table-wrapper {
        overflow: visible;
    }
}

/* 2026-05-17 — card redesign: CaseKanbanCard now owns header presentation
   (applicant names + status pill + vulnerability shield). Hide the
   DsKanbanCard shell's title slot to avoid duplicate name rendering. Scoped
   to the kanban surface only — leaves HeaderActions (CardStatusMenu) intact. */
.dashboard-page[b-9s8vusyfwi]  .ds-kanban-card__title {
    display: none;
}


/* Quick-task 260809-c7t — the one-off Leads trash button (quick-task 260518-3ry)
   was replaced by the shared RowActionsMenu, so its three rules were deleted here
   along with the markup. Styles that outlive their markup are how a stylesheet
   becomes unreadable. The menu's chrome lives in design-system.css, not here,
   because RowActionsMenu renders its items from ChildContent — which CSS
   isolation cannot reach. */

/* Phase 35 — skip-move picker: stack the valid-next-status buttons full-width. */
.move-picker__lead[b-9s8vusyfwi] {
    margin: 0 0 var(--space-4);
    color: var(--text-secondary);
}

.move-picker__options[b-9s8vusyfwi] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.move-picker__options[b-9s8vusyfwi]  .ds-btn {
    width: 100%;
    justify-content: center;
}

.move-picker__empty[b-9s8vusyfwi] {
    margin: 0;
    color: var(--text-secondary);
}
/* /Components/Pages/DesignSystemShowcase.razor.rz.scp.css */
.showcase-token-grid[b-jzt0yvh0vs] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-3);
}

.showcase-swatch[b-jzt0yvh0vs] {
    padding: var(--space-4);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-subtle);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--text-primary);
    min-height: var(--space-7);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.showcase-swatch--border[b-jzt0yvh0vs] {
    border-width: 2px;
}

.showcase-stack[b-jzt0yvh0vs] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.showcase-row[b-jzt0yvh0vs] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.ds-showcase-section[b-jzt0yvh0vs] {
    margin-top: 2rem;
}

.ds-showcase-tabpanel[b-jzt0yvh0vs] {
    margin-top: 1rem;
    padding: 1rem;
    background: var(--surface-secondary);
    border: 1px solid var(--topbar-border);
    border-radius: var(--radius-sm, 0.375rem);
}

.ds-showcase-row[b-jzt0yvh0vs] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.5rem 0 1rem;
}

.ds-showcase-toggle[b-jzt0yvh0vs] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.5rem 0 1rem;
}
/* /Components/Pages/Documents.razor.rz.scp.css */
.empty-state[b-n28l9jppzl] {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--text-secondary);
}

.empty-state-icon[b-n28l9jppzl] {
    margin-bottom: 1.5rem;
    color: var(--text-muted);
}

.empty-state h2[b-n28l9jppzl] {
    color: var(--text-primary);
    font-size: 1.5rem;
    margin-bottom: 0.75rem;
}

.empty-state p[b-n28l9jppzl] {
    max-width: 400px;
    margin: 0 auto 1.5rem;
    font-size: 1rem;
    line-height: 1.5;
}

.btn-connect[b-n28l9jppzl] {
    font-size: 1rem;
    padding: 0.6rem 1.5rem;
}

.connected-header[b-n28l9jppzl] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.connected-badge[b-n28l9jppzl] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.75rem;
    background: var(--success-bg);
    color: var(--success-fg);
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
}

.alert-banner[b-n28l9jppzl] {
    padding: 0.75rem 1rem;
    border-radius: 6px;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.alert-error[b-n28l9jppzl] {
    background: var(--danger-bg);
    color: var(--danger-fg);
    border: 1px solid var(--danger);
}

.alert-warning[b-n28l9jppzl] {
    background: var(--warning-bg);
    color: var(--warning-fg);
    border: 1px solid var(--warning);
}
/* /Components/Pages/ImportAip.razor.rz.scp.css */
.import-aip-page[b-psdfh72nx0] {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.aip-empty[b-psdfh72nx0],
.aip-parsing[b-psdfh72nx0] {
    padding: var(--space-7) var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.aip-upload[b-psdfh72nx0] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.aip-section[b-psdfh72nx0] {
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.aip-section h2[b-psdfh72nx0] {
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-tight);
    margin: 0;
}

/* A1 / A2 two-column review grid — stacks below --bp-md (768px). */
.aip-applicants[b-psdfh72nx0] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-5);
}

.aip-applicant-col[b-psdfh72nx0] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-width: 0;
}

.aip-app-label[b-psdfh72nx0] {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--text-muted);
    margin: 0;
}

.aip-no-app2[b-psdfh72nx0],
.aip-policies-summary[b-psdfh72nx0] {
    color: var(--text-muted);
    font-size: var(--text-sm);
    margin: 0;
}

/* D-08 low-confidence highlight — amber, never red, non-blocking. */
.aip-lowconf[b-psdfh72nx0] {
    background: var(--warning-bg);
    border-left: 2px solid var(--warning);
    padding-left: var(--space-1);
}

.aip-lowconf .ds-field__hint[b-psdfh72nx0] {
    color: var(--warning-fg);
}

.aip-actions[b-psdfh72nx0] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
}

.aip-gate-hint[b-psdfh72nx0] {
    color: var(--text-muted);
    font-size: var(--text-sm);
    margin: 0;
}

/* Duplicate-match panel — info-toned (not danger): the broker is being offered a choice. */
.import-dup-warning[b-psdfh72nx0] {
    background: var(--info-bg);
    color: var(--info-fg);
    padding: var(--space-5);
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.import-dup-warning h3[b-psdfh72nx0] {
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-tight);
    margin: 0;
}

.import-dup-warning p[b-psdfh72nx0] {
    margin: 0;
}

.import-dup-warning__actions[b-psdfh72nx0] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-2);
}

@media (max-width: 768px) {
    .aip-applicants[b-psdfh72nx0] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .import-dup-warning__actions[b-psdfh72nx0] {
        flex-direction: column;
    }
}
/* /Components/Pages/Integrations.razor.rz.scp.css */
/* Integrations hub — CSS isolation (Blazor attribute-scoped). */

.integrations-hub[b-3tuw1dcol1] {
    --card-radius: 14px;
    --card-border: rgba(15, 23, 42, 0.08);
    --card-shadow: 0 1px 2px rgba(15, 23, 42, 0.04),
                   0 4px 12px rgba(15, 23, 42, 0.05);
    --card-shadow-hover: 0 1px 2px rgba(15, 23, 42, 0.06),
                         0 12px 28px rgba(15, 23, 42, 0.09);
    --logo-tile-bg: var(--surface-secondary);
    --logo-tile-border: rgba(15, 23, 42, 0.06);
    --muted-text: var(--text-secondary);
    --status-connected-bg: rgba(22, 163, 74, 0.1);
    --status-connected-fg: var(--success);
    --status-connected-dot: var(--success);
    --status-idle-bg: rgba(100, 116, 139, 0.1);
    --status-idle-fg: var(--text-secondary);
    --status-idle-dot: var(--text-muted);
    /* Quick task 260801-dqb (D-07) — the third pill state: a connection that EXISTED and died.
       Sourced from the design-system warning tokens, NOT from the hardcoded rgba() in
       .integrations-banner--error below, which is the only untokenised colour on this page and
       predates the token set. */
    --status-warning-bg: var(--warning-bg);
    --status-warning-fg: var(--warning-fg);
    --status-warning-dot: var(--warning);

    max-width: 1120px;
    margin: 0 auto;
    padding: 1.5rem 0 3rem;
}

/* ── Hero header ───────────────────────────────────── */

.integrations-hero[b-3tuw1dcol1] {
    margin-bottom: 2rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--card-border);
}

.integrations-hero h1[b-3tuw1dcol1] {
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--brand-primary);
    margin: 0 0 0.35rem;
}

.integrations-subtitle[b-3tuw1dcol1] {
    font-size: 1rem;
    color: var(--muted-text);
    margin: 0;
    max-width: 60ch;
}

/* ── Banners ───────────────────────────────────────── */

.integrations-banner[b-3tuw1dcol1] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.875rem 1.125rem;
    border-radius: 10px;
    font-size: 0.9375rem;
    margin-bottom: 1.5rem;
    border: 1px solid transparent;
}

.integrations-banner--success[b-3tuw1dcol1] {
    background: var(--status-connected-bg);
    color: var(--status-connected-fg);
    border-color: rgba(22, 163, 74, 0.25);
}

.integrations-banner--error[b-3tuw1dcol1] {
    background: rgba(220, 38, 38, 0.08);
    color: var(--danger-fg);
    border-color: rgba(220, 38, 38, 0.25);
}

/* Phase 52 Plan 14 (D-11) — no document store holds the write target. Sourced from the design-system
   warning tokens, like the --warning pill above and NOT like the untokenised --error rule, which is
   the only hardcoded colour on this page and predates the token set. */
.integrations-banner--warning[b-3tuw1dcol1] {
    background: var(--status-warning-bg);
    color: var(--status-warning-fg);
    border-color: color-mix(in srgb, var(--warning) 25%, transparent);
    align-items: flex-start;
}

/* ── Integration card ──────────────────────────────── */

.integration-card[b-3tuw1dcol1] {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--surface-primary);
    border: 1px solid var(--card-border);
    border-radius: var(--card-radius);
    padding: 1.5rem;
    box-shadow: var(--card-shadow);
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.integration-card:hover[b-3tuw1dcol1] {
    transform: translateY(-2px);
    box-shadow: var(--card-shadow-hover);
    border-color: rgba(15, 23, 42, 0.12);
}

.integration-card[b-3tuw1dcol1]::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--card-radius);
    padding: 1px;
    background: linear-gradient(135deg,
                rgba(255, 255, 255, 0) 0%,
                var(--brand-accent) 100%);
    /* Mask gradients are alpha-only (the colour is irrelevant to the cut-out);
       --text-primary is fully opaque so the mask result is byte-identical. */
    -webkit-mask: linear-gradient(var(--text-primary) 0 0) content-box,
                  linear-gradient(var(--text-primary) 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    opacity: 0;
    transition: opacity 180ms ease;
    pointer-events: none;
}

.integration-card:hover[b-3tuw1dcol1]::before {
    opacity: 0.35;
}

/* ── Top row: logo tile + status pill ──────────────── */

.integration-card__top[b-3tuw1dcol1] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.integration-card__logo-tile[b-3tuw1dcol1] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 88px;
    height: 88px;
    background: var(--logo-tile-bg);
    border: 1px solid var(--logo-tile-border);
    border-radius: 12px;
    padding: 0.75rem;
    flex-shrink: 0;
}

.integration-card__logo-tile img[b-3tuw1dcol1] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
}

/* ── Status pill ───────────────────────────────────── */

.integration-status-pill[b-3tuw1dcol1] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    letter-spacing: 0.005em;
}

.integration-status-pill__dot[b-3tuw1dcol1] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.integration-status-pill--connected[b-3tuw1dcol1] {
    background: var(--status-connected-bg);
    color: var(--status-connected-fg);
}

.integration-status-pill--connected .integration-status-pill__dot[b-3tuw1dcol1] {
    background: var(--status-connected-dot);
    box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.15);
}

.integration-status-pill--warning[b-3tuw1dcol1] {
    background: var(--status-warning-bg);
    color: var(--status-warning-fg);
}

.integration-status-pill--warning .integration-status-pill__dot[b-3tuw1dcol1] {
    background: var(--status-warning-dot);
    /* color-mix against the token rather than a literal — the connected rule's hardcoded
       rgba() halo predates the design-system tokens and must not be pattern-matched forward. */
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--warning) 15%, transparent);
}

.integration-status-pill--idle[b-3tuw1dcol1] {
    background: var(--status-idle-bg);
    color: var(--status-idle-fg);
}

.integration-status-pill--idle .integration-status-pill__dot[b-3tuw1dcol1] {
    background: var(--status-idle-dot);
}

/* ── Text content ──────────────────────────────────── */

.integration-card__title[b-3tuw1dcol1] {
    font-size: 1.25rem;
    font-weight: 650;
    letter-spacing: -0.01em;
    color: var(--brand-primary);
    margin: 0 0 0.4rem;
}

.integration-card__body[b-3tuw1dcol1] {
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--muted-text);
    margin: 0 0 1.5rem;
    flex-grow: 1;
}

/* Phase 52 Plan 14 — the Synology card's meta line: which NAS, and which folder on it. The design
   budgeted exactly one new rule and this is it.
   overflow-wrap is load-bearing rather than tidy: a DDNS hostname plus a share path is easily wider
   than a 580px viewport, and without it the card forces the whole page to scroll sideways. */
.integration-card__meta[b-3tuw1dcol1] {
    margin: -1.15rem 0 1.25rem;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--muted-text);
    overflow-wrap: anywhere;
}

/* ── Archive opt-ins (Google Drive card) ───────────── */
/* Phase 51 Plan 13 (WR-06 / STO-25). Every colour here comes from a custom property already
   defined in the .integrations-hub block above or in app.css — this is a white-label product
   and Phase12.TokenLintTests lints component CSS for hex literals. */

.integration-card__options[b-3tuw1dcol1] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin: 0 0 1.25rem;
    padding: 0.875rem 1rem;
    background: var(--surface-secondary);
    border: 1px solid var(--card-border);
    border-radius: 10px;
}

.integration-card__option-notice[b-3tuw1dcol1] {
    margin: 0;
    padding: 0.5rem 0.625rem;
    border-radius: 8px;
    font-size: 0.8125rem;
    line-height: 1.45;
    background: var(--status-warning-bg);
    color: var(--status-warning-fg);
}

.integration-card__option[b-3tuw1dcol1] {
    margin: 0;
}

.integration-card__option .form-check-input[b-3tuw1dcol1] {
    margin-top: 0.3rem;
}

.integration-card__option .form-check-input:checked[b-3tuw1dcol1] {
    background-color: var(--brand-accent);
    border-color: var(--brand-accent-border);
}

.integration-card__option .form-check-input:focus[b-3tuw1dcol1],
.integration-card__option .form-check-input:focus-visible[b-3tuw1dcol1] {
    border-color: var(--brand-accent-focus);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-accent) 30%, transparent);
}

.integration-card__option .form-check-input:disabled[b-3tuw1dcol1],
.integration-card__option .form-check-input:disabled ~ .form-check-label[b-3tuw1dcol1] {
    opacity: 0.55;
    cursor: not-allowed;
}

.integration-card__option-label[b-3tuw1dcol1] {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--brand-primary);
}

.integration-card__option-hint[b-3tuw1dcol1] {
    display: block;
    margin: 0.15rem 0 0;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--muted-text);
}

/* ── Action row ────────────────────────────────────── */

.integration-card__action[b-3tuw1dcol1] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    /* Phase 52 Plan 14 — the Synology card can carry three controls (switch, disconnect, manage),
       which at 580px do not fit on one line. Without the wrap the row overflows and the page scrolls
       sideways; the gap replaces the ms-2 the Drive card used to space its second button. */
    flex-wrap: wrap;
    gap: 0.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--card-border);
    margin-top: auto;
}

.integration-card__action .btn[b-3tuw1dcol1] {
    font-weight: 500;
    padding-inline: 1.1rem;
}

.integration-card__action .btn-primary[b-3tuw1dcol1] {
    background-color: var(--brand-accent);
    border-color: var(--brand-accent-border);
}

.integration-card__action .btn-primary:hover[b-3tuw1dcol1] {
    background-color: var(--brand-accent-hover);
    border-color: var(--brand-accent-hover);
}

.integration-card__action .btn-primary:focus[b-3tuw1dcol1],
.integration-card__action .btn-primary:focus-visible[b-3tuw1dcol1] {
    box-shadow: 0 0 0 3px rgba(0, 113, 193, 0.3);
    border-color: var(--brand-accent-focus);
}

/* ── Responsive polish ─────────────────────────────── */

@media (max-width: 640px) {
    .integrations-hub[b-3tuw1dcol1] {
        padding: 1rem 0 2rem;
    }

    .integrations-hero h1[b-3tuw1dcol1] {
        font-size: 1.625rem;
    }

    .integration-card[b-3tuw1dcol1] {
        padding: 1.25rem;
    }

    .integration-card__logo-tile[b-3tuw1dcol1] {
        width: 72px;
        height: 72px;
    }

    /* Phase 52 Plan 14 — 44px minimum tap target on touch-sized viewports. Bootstrap's .btn-sm is
       about 31px, which is a miss on a phone; applied here rather than globally so the desktop
       card's proportions are unchanged. */
    .integration-card__action .btn[b-3tuw1dcol1] {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* ── Reduced motion ────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .integration-card[b-3tuw1dcol1],
    .integration-card[b-3tuw1dcol1]::before {
        transition: none;
    }

    .integration-card:hover[b-3tuw1dcol1] {
        transform: none;
    }
}
/* /Components/Pages/Login.razor.rz.scp.css */
/* Login page — shell/hero live in design-system.css (.auth-page + .auth-card).
   This file holds only page-specific overrides, if any. */
/* /Components/Pages/Messages.razor.rz.scp.css */
.page-title[b-bepmxnq88e] {
    padding: 16px 24px 0;
    margin-bottom: 16px;
    font-size: 24px;
    font-weight: 600;
}

.messages-layout[b-bepmxnq88e] {
    display: flex;
    height: calc(100vh - 120px);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    overflow: hidden;
    margin: 0 24px;
}

.conversations-panel[b-bepmxnq88e] {
    width: 320px;
    border-right: 1px solid var(--border-subtle);
    overflow-y: auto;
}

.thread-panel[b-bepmxnq88e] {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.empty-state[b-bepmxnq88e] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 48px;
    color: var(--text-muted);
    text-align: center;
}

.empty-state h5[b-bepmxnq88e] {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.empty-state p[b-bepmxnq88e] {
    font-size: 14px;
}

@media (max-width: 640px) {
    .messages-layout[b-bepmxnq88e] {
        flex-direction: column;
        height: auto;
        min-height: calc(100vh - 120px);
    }

    .conversations-panel[b-bepmxnq88e] {
        width: 100%;
        height: auto;
        max-height: 300px;
        border-right: none;
        border-bottom: 1px solid var(--border-subtle);
    }

    .thread-panel[b-bepmxnq88e] {
        flex: 1;
        min-height: 400px;
    }
}
/* /Components/Pages/Quotes.razor.rz.scp.css */
/* Quick task 260816-w9n — chrome for the /quotes case picker ONLY.

   A Quotes.razor.css existed before and was deleted by quick task 260801-dqb: it held the
   .alert-* rules, and since Phase 29 the page rendered nothing but <SourcingLifecycle />, so
   CSS isolation meant those compiled selectors could never match (Blazor stamps the scope
   attribute only on markup the owning component authors). The picker markup below IS authored
   by Quotes.razor, so scoped rules apply again — including the banner rules, re-stated here
   because SourcingLifecycle (which now carries them inline) is not mounted in picker mode. */

.case-picker[b-ohv774ab19] {
    max-width: 100%;
    box-sizing: border-box;
    padding: var(--space-4, 1rem);
    border: 1px solid var(--border-subtle, #e5e7eb);
    border-radius: var(--radius-md, 8px);
    background: var(--surface-primary, #fff);
    margin-bottom: var(--space-4, 1rem);
}

.case-picker__hint[b-ohv774ab19] {
    margin: 0 0 var(--space-3, 0.75rem);
    color: var(--text-secondary, #6b7280);
    font-size: 0.9rem;
}

.case-picker__empty[b-ohv774ab19] {
    margin: 0;
    color: var(--text-secondary, #6b7280);
    font-size: 0.9rem;
}

#case-select[b-ohv774ab19] {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    /* Phase 20 mobile tap-target rule. */
    min-height: 44px;
}

/* Quick task 260817-1g0 (D-03) — the secondary quick-quote path and the way back from it.
   Every class below is authored by Quotes.razor itself (the scoped-selector rule this
   stylesheet is guarded on), and both rows wrap rather than scroll at narrow widths. */

.case-picker__quick[b-ohv774ab19] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
    max-width: 100%;
    box-sizing: border-box;
    margin-top: var(--space-4, 1rem);
    padding-top: var(--space-3, 0.75rem);
    border-top: 1px solid var(--border-subtle, #e5e7eb);
}

.case-picker__quick-hint[b-ohv774ab19] {
    color: var(--text-secondary, #6b7280);
    font-size: 0.85rem;
    max-width: 100%;
}

.quick-quote-toggle[b-ohv774ab19],
.quick-quote-back[b-ohv774ab19] {
    max-width: 100%;
    box-sizing: border-box;
    /* Phase 20 mobile tap-target rule. */
    min-height: 44px;
    padding: var(--space-2, 0.5rem) var(--space-4, 1rem);
    border: 1px solid var(--brand-accent-border, #c7d2fe);
    border-radius: var(--radius-sm, 4px);
    background: var(--surface-primary, #fff);
    color: var(--brand-accent, #4f46e5);
    font-size: 0.9rem;
    cursor: pointer;
}

.quick-quote-bar[b-ohv774ab19] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
    max-width: 100%;
    box-sizing: border-box;
    margin-bottom: var(--space-4, 1rem);
}

.quick-quote-bar__note[b-ohv774ab19] {
    color: var(--text-secondary, #6b7280);
    font-size: 0.85rem;
    max-width: 100%;
}

/* Quick task 260818-wpy — .ds-page-header itself is global (design-system.css:142), but its
   __actions half is defined per page in scoped CSS rather than in the design system; this is the
   same four-line rule and the same narrow-width stacking block Clients.razor.css:12-17 and
   :112-118 carry. Authored by Quotes.razor, so the scoped selector matches. */
.ds-page-header__actions[b-ohv774ab19] {
    display: flex;
    gap: var(--space-3);
    align-items: flex-end;
    flex-wrap: wrap;
}

@media (max-width: 768px) {
    .ds-page-header__actions[b-ohv774ab19] {
        align-items: stretch;
        width: 100%;
    }
}

.alert-banner[b-ohv774ab19] {
    padding: 0.75rem 1rem;
    border-radius: var(--radius-sm);
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.alert-error[b-ohv774ab19] {
    background: var(--danger-bg);
    color: var(--danger-fg);
    border: 1px solid var(--danger);
}
/* /Components/Pages/Settings/FeeScenarios.razor.rz.scp.css */
.fee-scenarios-page[b-zrhabafnua] {
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}

.fee-scenarios-page h1[b-zrhabafnua] {
    font-weight: 600;
}

.page-subheading[b-zrhabafnua] {
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
}

.form-error[b-zrhabafnua] {
    color: var(--danger);
    margin-bottom: 1rem;
}

.toolbar[b-zrhabafnua] {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 1rem;
}

.empty-state[b-zrhabafnua] {
    background: var(--surface-secondary);
    border-radius: var(--radius-md);
    padding: 3rem 2rem;
    text-align: center;
    box-shadow: var(--shadow-sm);
}

.empty-state h2[b-zrhabafnua] {
    font-weight: 600;
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
}

.empty-state p[b-zrhabafnua] {
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
}

.scenarios-table[b-zrhabafnua] {
    width: 100%;
    background: var(--surface-primary);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    border-collapse: collapse;
}

.scenarios-table th[b-zrhabafnua],
.scenarios-table td[b-zrhabafnua] {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--surface-tertiary);
    text-align: left;
}

.scenarios-table thead th[b-zrhabafnua] {
    background: var(--surface-secondary);
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.scenarios-table tbody tr:nth-child(even)[b-zrhabafnua] {
    background: var(--surface-secondary);
}

.col-amount[b-zrhabafnua] {
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.col-order[b-zrhabafnua] {
    width: 3rem;
    text-align: center;
}

.drag-handle[b-zrhabafnua] {
    cursor: grab;
    color: var(--text-muted);
    font-weight: 700;
    letter-spacing: -2px;
}

.status-pill[b-zrhabafnua] {
    display: inline-block;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
}

.status-pill.status-active[b-zrhabafnua] {
    background: var(--success-bg);
    color: var(--success);
}

.status-pill.status-disabled[b-zrhabafnua] {
    background: var(--surface-secondary);
    color: var(--text-muted);
}

.actions-cell[b-zrhabafnua] {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.modal-backdrop-custom[b-zrhabafnua] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
}

.modal-card[b-zrhabafnua] {
    background: var(--surface-primary);
    border: 1px solid var(--topbar-border);
    border-radius: var(--radius-md);
    /* min-width removed (Phase 25 MOBR-01): a fixed 420px floor forced the modal
       wider than a 580px viewport. width:100% + max-width keep desktop sizing. */
    min-width: 0;
    max-width: min(560px, 100vw);
    width: 100%;
    box-shadow: var(--shadow-lg);
}

.modal-header[b-zrhabafnua] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 1px solid var(--topbar-border);
}

.modal-header h3[b-zrhabafnua] {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--text-primary);
}

.modal-body[b-zrhabafnua] {
    padding: 24px;
    max-height: 80vh;
    overflow-y: auto;
}

.btn-close-custom[b-zrhabafnua] {
    background: none;
    border: none;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    color: var(--text-secondary);
}

.field-row[b-zrhabafnua] {
    margin-bottom: 1rem;
}

.field-label[b-zrhabafnua] {
    display: block;
    font-weight: 600;
    font-size: 0.875rem;
    margin-bottom: 0.25rem;
    color: var(--text-primary);
}

.modal-actions[b-zrhabafnua] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1rem;
}

@media (max-width: 768px) {
    .modal-card[b-zrhabafnua] {
        width: 100vw;
        height: 100vh;
        max-width: 100vw;
        min-width: 0;
        border-radius: 0;
        display: flex;
        flex-direction: column;
    }

    .modal-header[b-zrhabafnua] {
        position: sticky;
        top: 0;
        background: var(--surface-primary);
        z-index: 1;
    }

    .modal-body[b-zrhabafnua] {
        flex: 1;
        max-height: none;
    }
}

.toast-banner[b-zrhabafnua] {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    background: var(--danger-bg);
    color: var(--danger);
    border: 1px solid var(--danger);
    border-radius: var(--radius-sm);
    padding: 0.75rem 1rem;
    box-shadow: var(--shadow-md);
    max-width: 420px;
    z-index: 1000;
}

@media (max-width: 768px) {
    .scenarios-table .col-order[b-zrhabafnua],
    .scenarios-table .col-used-on[b-zrhabafnua] {
        display: none;
    }
}

.scenarios-table tbody tr[b-zrhabafnua] {
    cursor: grab;
}

.scenarios-table tbody tr:active[b-zrhabafnua] {
    cursor: grabbing;
}

.scenarios-table tbody tr.drop-target[b-zrhabafnua] {
    border-top: 2px solid var(--brand-accent);
}

.scenarios-table tbody tr:focus-visible[b-zrhabafnua] {
    outline: 2px solid var(--brand-accent-focus);
    outline-offset: -2px;
}

.visually-hidden[b-zrhabafnua] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
/* /Components/Pages/Settings/SourcingDefaults.razor.rz.scp.css */
/* Phase 28 Plan 05 — sourcing-defaults settings page.
   One screen of labelled DS sections (Rate / Location / Includes-Features-Fees)
   + Save/Cancel at the bottom. Mirrors FeeScenarios chrome (NOT its table).
   Mobile-responsive: no horizontal scroll @ 580px; stacked actions on small screens. */

.sourcing-defaults-page[b-jghcvoqg8u] {
    max-width: 720px;
}

.ds-section[b-jghcvoqg8u] {
    margin-top: var(--space-6, 1.5rem);
    padding: var(--space-5, 1.25rem);
    background: var(--surface-primary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg, 12px);
}

.ds-section + .ds-section[b-jghcvoqg8u] {
    margin-top: var(--space-4, 1rem);
}

.ds-section__heading[b-jghcvoqg8u] {
    margin: 0 0 var(--space-1, 0.25rem) 0;
    font-size: var(--font-size-lg, 1.125rem);
    color: var(--brand-primary);
}

.ds-section__hint[b-jghcvoqg8u] {
    margin: 0 0 var(--space-3, 0.75rem) 0;
    color: var(--text-muted);
    font-size: var(--font-size-sm, 0.875rem);
}

.ds-section .ds-field + .ds-field[b-jghcvoqg8u] {
    margin-top: var(--space-3, 0.75rem);
}

.ds-form-actions[b-jghcvoqg8u] {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3, 0.75rem);
    margin-top: var(--space-6, 1.5rem);
    flex-wrap: wrap;
}

.ds-form-actions[b-jghcvoqg8u]  .ds-btn {
    min-height: 44px; /* 44px tap target — responsive-from-day-one */
}

.toast-banner[b-jghcvoqg8u] {
    margin-top: var(--space-4, 1rem);
    padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
    background: var(--success-bg);
    color: var(--success-fg);
    /* No --success-border token exists; the solid --success is the nearest
       defined token (mirrors Plan 25-04's badge-border mapping). */
    border: 1px solid var(--success);
    border-radius: var(--radius-md, 8px);
}

@media (max-width: 640px) {
    .ds-form-actions[b-jghcvoqg8u] {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .ds-form-actions[b-jghcvoqg8u]  .ds-btn {
        width: 100%;
    }
}
/* /Components/Pages/SynologyConnect.razor.rz.scp.css */
/* Synology connect page — CSS isolation (Blazor attribute-scoped).

   NO HEX LITERAL AND NO RAW rgba() APPEARS IN THIS FILE. Every colour resolves through the
   design-system custom properties, which is what makes a rebrand a change to one :root block
   rather than a search through component stylesheets (design-system.css, D-11).

   Responsive rule this page has to keep: no horizontal scroll at 580px, and every tap target at
   least 44px. A broker may well be doing this standing next to the NAS with a phone in one hand. */

.syn-connect[b-r0fjazpe1s] {
    --syn-border: var(--border-subtle);
    --syn-border-strong: var(--border-strong);
    --syn-muted: var(--text-secondary);

    max-width: 46rem;
    margin: 0 auto;
    padding: var(--space-5) 0 var(--space-8);
}

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

.syn-connect__hero[b-r0fjazpe1s] {
    margin-bottom: var(--space-5);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--syn-border);
}

.syn-connect__back[b-r0fjazpe1s] {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: var(--text-sm);
    color: var(--brand-accent);
    text-decoration: none;
}

.syn-connect__back:hover[b-r0fjazpe1s],
.syn-connect__back:focus-visible[b-r0fjazpe1s] {
    text-decoration: underline;
}

.syn-connect__hero h1[b-r0fjazpe1s] {
    font-size: var(--text-2xl);
    font-weight: var(--weight-bold);
    color: var(--brand-primary);
    margin: 0 0 var(--space-1);
}

.syn-connect__subtitle[b-r0fjazpe1s] {
    font-size: var(--text-base);
    color: var(--syn-muted);
    margin: 0;
    max-width: 60ch;
}

/* ── Panels ─────────────────────────────────────────── */

.syn-panel[b-r0fjazpe1s] {
    background: var(--surface-primary);
    border: 1px solid var(--syn-border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    margin-bottom: var(--space-4);
    box-shadow: var(--shadow-sm);
}

.syn-panel--muted[b-r0fjazpe1s] {
    background: var(--surface-secondary);
    box-shadow: none;
}

.syn-panel__title[b-r0fjazpe1s] {
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    color: var(--brand-primary);
    margin: 0 0 var(--space-3);
}

.syn-note[b-r0fjazpe1s] {
    font-size: var(--text-sm);
    color: var(--syn-muted);
    line-height: var(--leading-normal);
    margin: 0 0 var(--space-4);
    max-width: 68ch;
}

/* ── The address row: a fixed scheme, then the host, then the port ───────────────── */

.syn-host-row[b-r0fjazpe1s] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--space-3);
}

/* Deliberately NOT a control. There is no http option and nothing on this page offers to skip a
   certificate check, so this is text with the weight of a field label beside it. */
.syn-scheme[b-r0fjazpe1s] {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    align-self: flex-end;
    padding: 0 var(--space-3);
    background: var(--surface-tertiary);
    border: 1px solid var(--syn-border-strong);
    border-radius: var(--radius-sm);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: var(--text-sm);
    color: var(--text-primary);
    white-space: nowrap;
}

.syn-host-row > .ds-field:nth-of-type(1)[b-r0fjazpe1s] {
    flex: 1 1 18rem;
    min-width: 0;
}

.syn-host-row > .ds-field:nth-of-type(2)[b-r0fjazpe1s] {
    flex: 0 1 7rem;
    min-width: 0;
}

/* ── The stored password, which is shown as a placeholder and never as a value ───── */

.syn-field-static[b-r0fjazpe1s] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}

.syn-field-static__label[b-r0fjazpe1s] {
    flex: 0 0 100%;
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--text-primary);
}

.syn-password-masked[b-r0fjazpe1s] {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: 0.15em;
    color: var(--text-muted);
}

.syn-field-static__hint[b-r0fjazpe1s] {
    flex: 0 0 100%;
    font-size: var(--text-xs);
    color: var(--syn-muted);
    margin: 0;
    max-width: 68ch;
}

/* ── Actions ────────────────────────────────────────── */

.syn-actions[b-r0fjazpe1s] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.syn-actions .ds-btn[b-r0fjazpe1s] {
    min-height: 44px;
}

.syn-save-hint[b-r0fjazpe1s] {
    font-size: var(--text-sm);
    color: var(--syn-muted);
    margin: var(--space-3) 0 0;
}

/* ── Banners ────────────────────────────────────────── */

.syn-banner[b-r0fjazpe1s] {
    margin: var(--space-4) 0 0;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
}

.syn-banner--failed[b-r0fjazpe1s] {
    background: var(--danger-bg);
    color: var(--danger-fg);
}

.syn-banner--wait[b-r0fjazpe1s] {
    background: var(--warning-bg);
    color: var(--warning-fg);
}

.syn-banner--passed[b-r0fjazpe1s] {
    background: var(--success-bg);
    color: var(--success-fg);
}

.syn-banner__headline[b-r0fjazpe1s] {
    display: block;
    font-weight: var(--weight-semibold);
    margin-bottom: var(--space-1);
}

/* ── The five steps ─────────────────────────────────── */

.syn-steps[b-r0fjazpe1s] {
    list-style: none;
    margin: var(--space-4) 0 0;
    padding: 0;
    border: 1px solid var(--syn-border);
    border-radius: var(--radius-sm);
}

.syn-step[b-r0fjazpe1s] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-2);
    padding: var(--space-3);
    border-bottom: 1px solid var(--syn-border);
}

.syn-step:last-child[b-r0fjazpe1s] {
    border-bottom: none;
}

.syn-step__mark[b-r0fjazpe1s] {
    flex: 0 0 1.25rem;
    font-weight: var(--weight-bold);
}

.syn-step__name[b-r0fjazpe1s] {
    font-weight: var(--weight-medium);
    color: var(--text-primary);
}

.syn-step__message[b-r0fjazpe1s] {
    flex: 1 1 100%;
    font-size: var(--text-sm);
    color: var(--syn-muted);
    margin: 0;
    overflow-wrap: anywhere;
}

.syn-step--passed .syn-step__mark[b-r0fjazpe1s] {
    color: var(--success);
}

.syn-step--failed .syn-step__mark[b-r0fjazpe1s],
.syn-step--failed .syn-step__name[b-r0fjazpe1s] {
    color: var(--danger-fg);
}

.syn-step--notrun .syn-step__mark[b-r0fjazpe1s],
.syn-step--notrun .syn-step__name[b-r0fjazpe1s] {
    color: var(--text-muted);
}

.syn-step--checking .syn-step__mark[b-r0fjazpe1s] {
    color: var(--brand-accent);
}

.syn-otp[b-r0fjazpe1s] {
    margin: var(--space-4) 0 0;
    max-width: 16rem;
}

/* ── Technical details, the egress addresses, the trust panel ───────────────────── */

.syn-tech[b-r0fjazpe1s] {
    margin: var(--space-3) 0 0;
    font-size: var(--text-sm);
}

.syn-tech summary[b-r0fjazpe1s] {
    min-height: 44px;
    display: flex;
    align-items: center;
    cursor: pointer;
    color: var(--brand-accent);
}

.syn-tech__list[b-r0fjazpe1s] {
    margin: 0;
    padding: var(--space-3);
    background: var(--surface-secondary);
    border-radius: var(--radius-sm);
}

.syn-tech__list dt[b-r0fjazpe1s] {
    font-weight: var(--weight-medium);
    color: var(--text-primary);
}

.syn-tech__list dd[b-r0fjazpe1s] {
    margin: 0 0 var(--space-2);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    color: var(--syn-muted);
    overflow-wrap: anywhere;
}

.syn-egress[b-r0fjazpe1s] {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    overflow-wrap: anywhere;
}

.syn-trust[b-r0fjazpe1s] {
    margin: var(--space-4) 0 0;
    padding: var(--space-4);
    border: 1px solid var(--warning);
    border-radius: var(--radius-sm);
    background: var(--warning-bg);
}

.syn-trust__title[b-r0fjazpe1s] {
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--warning-fg);
    margin: 0 0 var(--space-2);
}

.syn-trust__body[b-r0fjazpe1s] {
    font-size: var(--text-sm);
    color: var(--text-primary);
    line-height: var(--leading-normal);
    margin: 0 0 var(--space-3);
    max-width: 68ch;
}

.syn-trust__facts[b-r0fjazpe1s] {
    margin: 0 0 var(--space-3);
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--space-1) var(--space-3);
    font-size: var(--text-sm);
}

.syn-trust__facts dt[b-r0fjazpe1s] {
    font-weight: var(--weight-medium);
    color: var(--text-primary);
}

.syn-trust__facts dd[b-r0fjazpe1s] {
    margin: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    color: var(--text-primary);
    overflow-wrap: anywhere;
}

/* Both fingerprints SIDE BY SIDE, because the broker is being asked to make a security judgement
   and one value is not enough to make one (D-04). Stacks below 641px rather than scrolling. */
.syn-fingerprints[b-r0fjazpe1s] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
    margin: 0 0 var(--space-3);
}

.syn-fingerprint[b-r0fjazpe1s] {
    padding: var(--space-3);
    background: var(--surface-primary);
    border: 1px solid var(--syn-border-strong);
    border-radius: var(--radius-sm);
}

.syn-fingerprint__label[b-r0fjazpe1s] {
    display: block;
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--syn-muted);
    margin-bottom: var(--space-1);
}

.syn-fingerprint__value[b-r0fjazpe1s] {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: var(--text-sm);
    color: var(--text-primary);
    overflow-wrap: anywhere;
}

.syn-trust__foot[b-r0fjazpe1s] {
    margin-bottom: 0;
    margin-top: var(--space-3);
}

.syn-share[b-r0fjazpe1s] {
    margin: var(--space-4) 0 0;
    max-width: 28rem;
}

.syn-trust__tick[b-r0fjazpe1s] {
    margin-bottom: var(--space-3);
}

.syn-trust__tick .ds-checkbox[b-r0fjazpe1s] {
    min-height: 44px;
    display: flex;
    align-items: center;
}

/* ── Narrow screens ─────────────────────────────────── */

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

    .syn-trust__facts[b-r0fjazpe1s] {
        grid-template-columns: 1fr;
    }

    .syn-scheme[b-r0fjazpe1s] {
        align-self: flex-start;
    }
}
/* /Components/Quotes/QuoteResultsTable.razor.rz.scp.css */
/* Quick task 260818-dvg — the sourcing results Actions cell.
   Net-new and therefore NOT on .planning/phases/12-ui-modernisation/hex-baseline.txt, so
   Phase12/TokenLintTests enforces zero hex literals here from the moment the file exists.
   Only the NEW classes live here: the component's global <style> block keeps the base
   container rule and the whole <=640px block, because two Phase 55 facts grep the rendered
   markup for those selectors and CSS isolation would take them out of cut.Markup. */

/* TIER 1 — what the broker DOES. Generate and Recommend keep their fills, and they are now
   the only boxes left in the cell. */
.results-actions__primary[b-hdsbf3x53d] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

/* TIER 2 — what the broker OPENS. The hairline is the separation lever: the least chrome that
   makes "do" and "open" read as two different kinds of thing. Rendered only when there are
   documents, so an empty tier cannot leave a stray rule under the buttons. */
.results-actions__docs[b-hdsbf3x53d] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-1);
    border-top: 1px solid var(--border-subtle);
    padding-top: var(--space-2);
}

/* One document per line: the name takes the space, the icon sits at the end. */
.doc-row[b-hdsbf3x53d] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 44px;
}

/* The unconditional min-height is LOAD-BEARING: the name link no longer carries .btn, so it
   no longer inherits the 640px floor, and a bare text link renders around 21px. Colour comes
   from the global `a` rule in design-system.css — a link that does not look like a link is a
   worse defect than the one being fixed, so no colour is set here. */
.doc-row__name[b-hdsbf3x53d] {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    flex: 1 1 auto;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.doc-row__name:hover[b-hdsbf3x53d] {
    text-decoration: underline;
}

/* Everything else about this control — its 44x44, its colour, its hover and its focus ring —
   comes from .ds-icon-btn. Restating any of it here would duplicate the design system and
   then drift from it. */
.doc-download[b-hdsbf3x53d] {
    flex: 0 0 auto;
}

/* Quick task 260818-i84 item C — the desktop width cap.

   At 1440px the Actions cell is wide, .doc-row__name grows into all of it, and the download icon
   ends up ~330px from the name it belongs to: the pair reads as two unrelated controls at opposite
   ends of the cell. Capping the ROW is what closes that, and it is deliberately not the obvious
   alternative — taking `flex: 1 1 auto` off .doc-row__name would also close the gap, but it would
   change the measured name-link width at 375px, which is on the 260818-dvg must-not-regress list.

   GATED ABOVE 640px, and that gate is the whole safety argument. Below the breakpoint the row is a
   full-width bar in a card (`.doc-row { width: 100% }` in the component's inline <style>), and an
   ungated max-width would shrink it — changing exactly the 375px and 580px geometry the UAT
   measured. Above the breakpoint no card layout exists, so nothing measured can move.
   641px == --bp-sm + 1 (design-system.css); CSS vars are illegal in @media conditions, so the
   canonical breakpoint is written as a literal, the same way the <=640px block does it.

   20rem (320px) is sized to the longest classifier label the tier renders ("Product Selection
   Report", ~180px) plus the 8px gap and the 44px icon, with headroom — tight enough to cut the
   separation by roughly two thirds, loose enough that no label wraps onto a second line. A tighter
   cap would trade the gap for a taller Actions column, which is the other open UAT question and
   not one to answer by accident.

   No width token exists in design-system.css (only --space-*, --text-*, --radius-* and colour), so
   a rem length is the correct literal here. The token lint bans hex, not lengths. */
@media (min-width: 641px) {
    .doc-row[b-hdsbf3x53d] {
        max-width: 20rem;
    }
}

/* Quick task 260818-mkv item A — the cross-session notice (Phase 55 UAT #69).

   A statement about the CASE, sitting above a table of THIS session's rows. Quiet, informational
   chrome and nothing more: a subtle surface, a hairline border, the small text size. It is not a
   badge (a badge is a row-scoped mark beside the thing it describes, and the thing this describes is
   not on screen) and it is not toned as success — a recommendation is a choice, not a pass, which is
   the call the existing badge already makes.

   Tokens only, no colour literal: this file is net-new since 260818-dvg and therefore absent from
   .planning/phases/12-ui-modernisation/hex-baseline.txt, so Phase12/TokenLintTests enforces zero hex
   here from the moment it exists. */
.results-cross-session[b-hdsbf3x53d] {
    margin-bottom: var(--space-4);
    padding: var(--space-3) var(--space-4);
    background: var(--surface-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

/* The lead carries the weight, so the sentence reads as one statement rather than two. Colour comes
   from the block above — restating it here would be a second place to change it. */
.results-cross-session strong[b-hdsbf3x53d] {
    color: var(--text-primary);
}
/* /Components/Quotes/RecentSessionsPanel.razor.rz.scp.css */
/* Phase 22.2 Plan 02 + UAT follow-up — recent-sessions detail table. DS v2 tokens only.
   Full-width stacked panel (no 720px cap) so the wide param table uses the desktop
   real estate; horizontal scroll below the desktop breakpoint keeps it usable on mobile. */

.recent-sessions[b-0oa1ty5rrn] {
    background: var(--surface-primary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: var(--space-5) var(--space-6);
    margin-bottom: var(--space-5);
}

.recent-sessions h3[b-0oa1ty5rrn] {
    margin: 0 0 var(--space-4) 0;
    color: var(--brand-primary);
    font-size: 1.1rem;
}

.recent-sessions__empty[b-0oa1ty5rrn] {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

/* Below the desktop breakpoint the table can exceed the viewport — scroll it
   horizontally inside the panel rather than forcing a document-level scrollbar. */
.recent-sessions__scroll[b-0oa1ty5rrn] {
    width: 100%;
    overflow-x: auto;
}

.recent-sessions__table[b-0oa1ty5rrn] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
    color: var(--text-primary);
}

.recent-sessions__table th[b-0oa1ty5rrn],
.recent-sessions__table td[b-0oa1ty5rrn] {
    padding: var(--space-3) var(--space-4);
    text-align: left;
    border-bottom: 1px solid var(--border-subtle);
    white-space: nowrap;
}

.recent-sessions__table th[b-0oa1ty5rrn] {
    font-weight: 600;
    color: var(--brand-primary);
    background: var(--surface-secondary);
    position: sticky;
    top: 0;
}

.recent-sessions__table th.num[b-0oa1ty5rrn],
.recent-sessions__table td.num[b-0oa1ty5rrn] {
    text-align: right;
}

.recent-sessions__row:hover[b-0oa1ty5rrn] {
    background: var(--surface-tertiary);
}

.recent-sessions__client[b-0oa1ty5rrn] {
    font-weight: 600;
}

.recent-sessions__date[b-0oa1ty5rrn] {
    color: var(--text-secondary);
}

/* Quick task 260816-w9n — the Case label is usually a full property address, and every cell in
   this table is white-space: nowrap, so an uncapped column would widen an already 12-column
   table for every broker. Capped with an ellipsis on desktop; the cell carries the full string
   as a title. Scoped to >=641px so the card collapse below it is untouched.

   Quick task 260817-2bn — the Client cell now carries the SAME risk for the same reason: a joint
   row holds two full names joined by ' & ', which is easily wider than the address beside it.
   Capped identically rather than differently, so the two widest columns in the table behave the
   same way. Below 641px the card collapse gives each cell its own line, so neither cap applies
   there and a two-name cell cannot force horizontal scroll. */
@media (min-width: 641px) {
    .recent-sessions__table td.recent-sessions__case[b-0oa1ty5rrn],
    .recent-sessions__table td.recent-sessions__client[b-0oa1ty5rrn] {
        max-width: 22ch;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* Action column — explicit per-row buttons replace the old whole-row click. */
.recent-sessions__action-col[b-0oa1ty5rrn],
.recent-sessions__action[b-0oa1ty5rrn] {
    text-align: right;
}

.recent-sessions__btn[b-0oa1ty5rrn] {
    display: inline-block;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}

.recent-sessions__btn:focus-visible[b-0oa1ty5rrn] {
    outline: 2px solid var(--brand-accent, #4f46e5);
    outline-offset: 2px;
}

.recent-sessions__btn[disabled][b-0oa1ty5rrn] {
    cursor: not-allowed;
    opacity: 0.55;
}

.recent-sessions__btn--view[b-0oa1ty5rrn] {
    background: transparent;
    color: var(--brand-accent, #4f46e5);
    border: 1px solid var(--brand-accent-border, var(--brand-accent, #4f46e5));
}

.recent-sessions__btn--view:hover:not([disabled])[b-0oa1ty5rrn] {
    background: var(--surface-tertiary);
}

.recent-sessions__btn--resume[b-0oa1ty5rrn] {
    background: var(--brand-accent, #4f46e5);
    color: #fff;
    border: 1px solid var(--brand-accent, #4f46e5);
}

.recent-sessions__btn--resume:hover:not([disabled])[b-0oa1ty5rrn] {
    background: var(--brand-accent-hover, var(--brand-accent, #4338ca));
    border-color: var(--brand-accent-hover, var(--brand-accent, #4338ca));
}

/* 2026-06-07 (UAT) — below 641px the wide param table collapses to one card per row:
   each cell shows its column label (data-label in markup) on the left with the value on
   the right; the View/Resume action goes full-width. No horizontal scroll at this size.
   Applies on both /quotes and the case Sourcing tab. */
@media (max-width: 640px) {
    .recent-sessions__scroll[b-0oa1ty5rrn] {
        overflow-x: visible;
    }

    .recent-sessions__table[b-0oa1ty5rrn],
    .recent-sessions__table tbody[b-0oa1ty5rrn],
    .recent-sessions__table tr[b-0oa1ty5rrn],
    .recent-sessions__table td[b-0oa1ty5rrn] {
        display: block;
        width: 100%;
    }

    .recent-sessions__table thead[b-0oa1ty5rrn] {
        position: absolute;
        left: -9999px;
        top: -9999px;
    }

    .recent-sessions__table tr[b-0oa1ty5rrn] {
        margin-bottom: var(--space-3);
        border: 1px solid var(--border-subtle);
        border-radius: var(--radius-md);
        padding: var(--space-3);
        background: var(--surface-primary);
    }

    .recent-sessions__table td[b-0oa1ty5rrn] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: var(--space-4);
        padding: var(--space-2) 0;
        border: none;
        white-space: normal;
        text-align: right;
    }

    .recent-sessions__table td[b-0oa1ty5rrn]::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--brand-primary);
        text-align: left;
        flex: 0 0 auto;
    }

    /* Action cell: no label, button fills the card width. */
    .recent-sessions__table td.recent-sessions__action[b-0oa1ty5rrn] {
        text-align: left;
    }

    .recent-sessions__table td.recent-sessions__action[b-0oa1ty5rrn]::before {
        content: none;
    }

    .recent-sessions__action .recent-sessions__btn[b-0oa1ty5rrn] {
        width: 100%;
    }
}
/* /Components/Quotes/SourcingContextStrip.razor.rz.scp.css */
/* Phase 22.2 Plan 02 — read-only context strip (D-08). DS v2 tokens only. */

.context-strip[b-gu2958qahk] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-2);
    max-width: 720px;
    background: var(--surface-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-4);
    font-size: var(--text-sm);
}

.context-strip__label[b-gu2958qahk] {
    font-weight: 600;
    color: var(--text-secondary);
}

.context-strip__value[b-gu2958qahk] {
    color: var(--text-primary);
}
/* /Components/Quotes/SourcingStatusPill.razor.rz.scp.css */
/* Phase 22.2 Plan 02 — sourcing status pill, CSS isolated. Tokens only,
   mirrors Cases/CaseStatusPill.razor.css. Launched/InProgress = neutral,
   Completed = warning tone, Failed = danger. */

.status-pill[b-dc3sbnhtl1] {
    display: inline-flex;
    align-items: center;
    font-size: var(--text-xs);
    font-weight: 600;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    line-height: 1.4;
    white-space: nowrap;
}

.status-pill--neutral[b-dc3sbnhtl1] {
    background-color: var(--surface-tertiary);
    color: var(--text-secondary);
}

.status-pill--completed[b-dc3sbnhtl1] {
    background-color: var(--warning-bg);
    color: var(--warning-fg);
}

.status-pill--declined[b-dc3sbnhtl1] {
    background-color: var(--danger-bg);
    color: var(--danger-fg);
}
/* /Components/Shared/AdvisorTypeahead.razor.rz.scp.css */
.advisor-typeahead[b-6apyz74dlv] {
    position: relative;
    width: 100%;
}

.advisor-input-wrapper[b-6apyz74dlv] {
    position: relative;
}

.advisor-input[b-6apyz74dlv] {
    width: 100%;
    min-height: 44px;
}

.advisor-results[b-6apyz74dlv] {
    list-style: none;
    margin: 4px 0 0 0;
    padding: 0;
    background: var(--surface-primary);
    border: 1px solid var(--surface-tertiary);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    max-height: 280px;
    overflow-y: auto;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 10;
}

.advisor-row[b-6apyz74dlv] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    min-height: 44px;
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid var(--surface-tertiary);
    background: var(--surface-primary);
}

.advisor-row:last-child[b-6apyz74dlv] {
    border-bottom: none;
}

.advisor-row:hover[b-6apyz74dlv],
.advisor-row-highlighted[b-6apyz74dlv] {
    background: var(--surface-secondary);
}

.advisor-row-name[b-6apyz74dlv] {
    font-weight: 600;
    color: var(--text-primary);
}

.advisor-row-meta[b-6apyz74dlv] {
    color: var(--text-secondary);
    font-size: 14px;
}

.advisor-empty[b-6apyz74dlv] {
    padding: 12px;
    color: var(--text-secondary);
    font-size: 14px;
    background: var(--surface-primary);
}