@import '_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.lcdo7z9xd2.bundle.scp.css';

/* /Components/Admin/AdminNavMenu.razor.rz.scp.css */
.w4l-nav-badge[b-27mox87p18] {
    margin-left: 6px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--w4l-warning);
    color: var(--foreground-on-accent-rest);
    font-size: 0.7rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
/* /Components/Admin/InvoiceAdmin.razor.rz.scp.css */
.ia-filter-open[b-n54y4linu8] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9rem;
    cursor: pointer;
}

.ia-confirm-row[b-n54y4linu8] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 8px 0;
}

.ia-confirm-actions[b-n54y4linu8] {
    display: flex;
    gap: 12px;
}
/* /Components/Admin/MailCampaigns.razor.rz.scp.css */
/* Surface (fill, radius, padding) comes from .w4l-edit-panel in utilities.css — here only the
   editor internals. Inputs keep the global .w4l-text-input look; this file just stacks the
   labelled fields and gives the actions row its spacing. */

.nlc-editor[b-k7tuyabrg8] {
    margin-top: 16px;
}

.nlc-fields[b-k7tuyabrg8] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.nlc-fields label[b-k7tuyabrg8],
.nlc-field[b-k7tuyabrg8] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.nlc-label[b-k7tuyabrg8] {
    font-size: var(--type-ramp-minus-1-font-size, 12px);
    color: var(--neutral-foreground-hint);
}

/* Link + label sit side by side on wide screens and wrap on narrow ones. */
.nlc-cta[b-k7tuyabrg8] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

.nlc-english[b-k7tuyabrg8] {
    margin-top: 4px;
}

.nlc-english > summary[b-k7tuyabrg8] {
    cursor: pointer;
    font-size: var(--type-ramp-minus-1-font-size, 12px);
    color: var(--neutral-foreground-hint);
    margin-bottom: 8px;
}

.nlc-actions[b-k7tuyabrg8] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

.mc-setup[b-k7tuyabrg8] { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.mc-audience[b-k7tuyabrg8], .mc-plans[b-k7tuyabrg8] { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; }
.mc-audience-users[b-k7tuyabrg8] { display: flex; flex-direction: column; gap: 6px; padding-left: 24px; width: 100%; }
.mc-check[b-k7tuyabrg8] { display: inline-flex; align-items: center; gap: 6px; }
.mc-preview[b-k7tuyabrg8] { margin: 0; color: var(--neutral-foreground-hint); font-size: 0.875rem; }
.mc-dialog-grid[b-k7tuyabrg8] { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; }
.mc-justification[b-k7tuyabrg8] { margin: 0; white-space: pre-wrap; }
/* /Components/Admin/PricingAdmin.razor.rz.scp.css */
.pricing-panel[b-b2bdvk1ubg] {
    margin-bottom: 24px;
}

.pricing-subhead[b-b2bdvk1ubg] {
    font-size: var(--type-ramp-minus-1-font-size, 12px);
    font-weight: 600;
    color: var(--neutral-foreground-hint);
    margin-bottom: 6px;
}

.pricing-form-grid[b-b2bdvk1ubg] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

.pricing-form-grid label[b-b2bdvk1ubg] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: var(--type-ramp-minus-1-font-size, 12px);
    color: var(--neutral-foreground-hint);
}

.pricing-wide[b-b2bdvk1ubg] {
    grid-column: 1 / -1;
}

.pricing-tier-row[b-b2bdvk1ubg] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
    margin-bottom: 8px;
}

.pricing-tier-row label[b-b2bdvk1ubg] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: var(--type-ramp-minus-1-font-size, 12px);
    color: var(--neutral-foreground-hint);
}

.pricing-actions[b-b2bdvk1ubg] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}

.pricing-check[b-b2bdvk1ubg] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    font-size: 0.86rem;
    color: var(--neutral-foreground-rest);
    cursor: pointer;
}

.pricing-import[b-b2bdvk1ubg] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-width: 420px;
    font-size: var(--type-ramp-minus-1-font-size, 12px);
    color: var(--neutral-foreground-hint);
}

.pricing-note[b-b2bdvk1ubg] {
    margin: 4px 0 0;
    font-size: 0.8rem;
    color: var(--neutral-foreground-hint);
}

.pricing-changes[b-b2bdvk1ubg] {
    margin: 4px 0 0;
    padding-left: 1.2rem;
    font-family: var(--monospace-font, ui-monospace, monospace);
    font-size: 0.8rem;
    color: var(--neutral-foreground-rest);
}

/* The raw schema message from the service — diagnostic, clearly secondary to the headline. */
.pricing-error-detail[b-b2bdvk1ubg] {
    display: block;
    margin-top: 6px;
    font-family: var(--monospace-font, ui-monospace, monospace);
    font-size: 0.78rem;
    color: var(--neutral-foreground-hint);
    word-break: break-word;
}

.pricing-row--inactive[b-b2bdvk1ubg] {
    opacity: 0.55;
}
/* /Components/Admin/UsageAdmin.razor.rz.scp.css */
/* Area-breakdown proportional bar (relative to the busiest area in the current filter). */
.w4l-usage-bar-track[b-9ip6zn8ncg] {
    width: 100%;
    min-width: 80px;
    height: 8px;
    border-radius: 4px;
    background: var(--neutral-fill-secondary-rest);
    overflow: hidden;
}

.w4l-usage-bar[b-9ip6zn8ncg] {
    height: 100%;
    border-radius: 4px;
    background: var(--accent-fill-rest);
}

/* Per-user timeline: one block per Swiss calendar day, newest first (server-ordered). */
.w4l-usage-timeline-day[b-9ip6zn8ncg] {
    margin-bottom: 1rem;
}

.w4l-usage-timeline-date[b-9ip6zn8ncg] {
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 4px;
}

.w4l-usage-timeline-list[b-9ip6zn8ncg] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.w4l-usage-timeline-list li[b-9ip6zn8ncg] {
    display: flex;
    gap: 12px;
    align-items: baseline;
    font-size: 13px;
    padding: 4px 8px;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
}

.w4l-usage-timeline-list li .num[b-9ip6zn8ncg] {
    font-variant-numeric: tabular-nums;
    color: var(--neutral-foreground-hint);
    min-width: 48px;
}

.w4l-usage-timeline-list li .mono[b-9ip6zn8ncg] {
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
}

.w4l-usage-timeline-list li .muted[b-9ip6zn8ncg] {
    color: var(--neutral-foreground-hint);
}

/* Error timeline rows: same color-mix pattern as UsageErrorBoundary.razor.css — the
   --error-fill-rest/--error-foreground-rest/--color-danger-subtle tokens are undefined no-ops
   in this repo, so the runtime --error token is mixed by hand instead. */
.w4l-usage-timeline-list li.w4l-usage-timeline-error[b-9ip6zn8ncg] {
    border-left: 3px solid var(--error, #d13438);
    /* 3px border + 5px padding = the 8px the plain `li` rule uses, so error and usage rows keep a
       flush left edge. Compounded with the list class on purpose: the bare class alone loses to
       `.w4l-usage-timeline-list li` on specificity and the padding would silently not apply. */
    padding-left: 5px;
    background-color: color-mix(in srgb, var(--error, #d13438) 12%, transparent);
    color: var(--error, #d13438);
    flex-wrap: wrap;
}

.w4l-usage-timeline-error code[b-9ip6zn8ncg] {
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    color: var(--neutral-foreground-rest);
}
/* /Components/Admin/UserManager.razor.rz.scp.css */
/* Master-detail: table left, detail right, always two equal columns; stacks below ~1100px.
   The detail column is always shown — a selection always exists once there are rows
   (see AutoSelectIfNeeded in UserManager.razor). */
.w4l-user-master-detail[b-20aorbe2vx] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: start;
}

.w4l-user-detail-col[b-20aorbe2vx] {
    min-width: 0;
}

.w4l-admin-table-selectable tbody tr[b-20aorbe2vx] {
    cursor: pointer;
}

.w4l-admin-table-selectable tbody tr.is-selected[b-20aorbe2vx] {
    background: var(--neutral-fill-secondary-rest);
}

@media (max-width: 1100px) {
    .w4l-user-master-detail[b-20aorbe2vx] {
        grid-template-columns: 1fr;
    }
}

/* Presence lamp — same colour tokens as the presence dot on /Clients, never a raw hex. */
.w4l-lamp-col[b-20aorbe2vx] {
    width: 28px;
    text-align: center;
}

.w4l-user-lamp[b-20aorbe2vx] {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--neutral-stroke-rest);
}

.w4l-user-lamp.is-active[b-20aorbe2vx] { background: var(--w4l-positive); }
.w4l-user-lamp.is-idle[b-20aorbe2vx] { background: var(--w4l-warning); }
.w4l-user-lamp.is-offline[b-20aorbe2vx] { background: var(--neutral-stroke-rest); }

/* Column header label kept for screen readers only — the lamp needs no visible header text. */
.w4l-visually-hidden[b-20aorbe2vx] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    margin: -1px;
    border: 0;
    padding: 0;
}

.w4l-spark[b-20aorbe2vx] {
    width: 72px;
    height: 16px;
    display: block;
}

.w4l-spark rect[b-20aorbe2vx] {
    fill: var(--accent-fill-rest);
}

.w4l-spark rect.is-empty[b-20aorbe2vx] {
    fill: var(--neutral-stroke-rest);
}
/* /Components/Admin/Users/UserDetailPanel.razor.rz.scp.css */
.w4l-user-detail[b-ro4pmamept] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

/* Lightweight tab strip; content panes are display-toggled by the component (FAST rule 6). */
.w4l-tabs[b-ro4pmamept] {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--neutral-stroke-rest);
}

.w4l-tab[b-ro4pmamept] {
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 6px 12px;
    cursor: pointer;
    color: var(--neutral-foreground-rest);
    font-size: 13px;
}

.w4l-tab.is-active[b-ro4pmamept] {
    border-bottom-color: var(--accent-fill-rest);
    font-weight: 600;
}

/* Reused verbatim from UsageAdmin.razor.css — scoped CSS does not cross components. */
.w4l-usage-timeline-day[b-ro4pmamept] { margin-bottom: 1rem; }
.w4l-usage-timeline-date[b-ro4pmamept] { font-weight: 600; font-size: 13px; margin-bottom: 4px; }
.w4l-usage-timeline-list[b-ro4pmamept] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.w4l-usage-timeline-list li[b-ro4pmamept] { display: flex; gap: 12px; align-items: baseline; }
/* /Components/Admin/VoucherAdmin.razor.rz.scp.css */
.voucher-create[b-g0r29wsowh] {
    margin-bottom: 24px;
}

.voucher-form-grid[b-g0r29wsowh] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
}

.voucher-form-grid label[b-g0r29wsowh] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: var(--type-ramp-minus-1-font-size, 12px);
    color: var(--neutral-foreground-hint);
}

.voucher-note-field[b-g0r29wsowh] {
    grid-column: 1 / -1;
}

.voucher-input[b-g0r29wsowh] {
    font-family: var(--body-font, "Segoe UI", sans-serif);
    font-size: var(--type-ramp-base-font-size, 14px);
    height: 32px;
    width: 100%;
    box-sizing: border-box;
    padding: 0 8px;
    border: calc(var(--stroke-width, 1) * 1px) solid var(--neutral-stroke-rest);
    border-radius: calc(var(--control-corner-radius, 4) * 1px);
    background-color: var(--neutral-fill-input-rest);
    color: var(--neutral-foreground-rest);
    outline: none;
}

.voucher-input:hover[b-g0r29wsowh] { border-color: var(--neutral-stroke-hover); }

.voucher-input:focus[b-g0r29wsowh] {
    border-color: var(--accent-fill-rest);
    box-shadow: 0 0 0 1px var(--accent-fill-rest);
}

.voucher-form-actions[b-g0r29wsowh] {
    margin-top: 16px;
}

.voucher-created-code[b-g0r29wsowh] {
    font-family: var(--monospace-font, ui-monospace, monospace);
    font-weight: 700;
    letter-spacing: 0.05em;
}

.voucher-row--disabled[b-g0r29wsowh] {
    opacity: 0.55;
}
/* /Components/Application/Charts/DeathCapitalNeedChart.razor.rz.scp.css */
/* «Capital need per death year» chart (W2-G, spec 2026-10-24 §6/§18.3). Theme tokens only; the class names follow the
   disability cover timeline so one mental model covers both. */
.dct[b-7niw9a47rl] { display: flex; flex-direction: column; width: 100%; position: relative; margin-bottom: 0.9rem; }
.dct-subtitle-text[b-7niw9a47rl] { font-size: 0.85rem; color: var(--neutral-foreground-hint); padding-bottom: 0.25rem; }
.dct-svg[b-7niw9a47rl] { width: 100%; display: block; user-select: none; overflow: visible; }
.dct-legend[b-7niw9a47rl] { display: flex; flex-wrap: wrap; gap: 0.25rem 0.85rem; font-size: 0.85rem; padding-top: 0.35rem; }
.dct-legend-item[b-7niw9a47rl] { display: inline-flex; align-items: center; gap: 0.3rem; }
.dct-swatch[b-7niw9a47rl] { width: 14px; height: 10px; border-radius: 2px; flex-shrink: 0; }
.dct-empty[b-7niw9a47rl] { font-size: 0.85rem; padding: 1.2rem 0; }
.dct-stale[b-7niw9a47rl] { opacity: 0.45; transition: none; }

/* Retirement years are not capitalised: dashed outline (never a tone alone) plus the hatched bar; the legend swatch is the
   dashed box with a solid left edge, so it also explains the solid boundary line, filled with the bar's hatch (legend =
   drawing, W2-H CF-3). */
.dct-aged-outline[b-7niw9a47rl] { stroke: var(--neutral-foreground-hint); stroke-width: 1; stroke-dasharray: 3 2; }
.dct-swatch--aged[b-7niw9a47rl] {
    border: 1px dashed var(--neutral-foreground-hint); border-left: 2px solid var(--neutral-foreground-hint);
    background: repeating-linear-gradient(45deg, transparent 0 2px, var(--neutral-foreground-hint) 2px 3.5px);
}
/* Years after a recorded death: no fill, a finer dotted outline, so it differs from the pensioner outline by pattern. */
.dct-unavailable-outline[b-7niw9a47rl] { stroke: var(--neutral-foreground-hint); stroke-width: 1; stroke-dasharray: 1 3; stroke-linecap: round; }
.dct-swatch--unavailable[b-7niw9a47rl] { border: 1px dotted var(--neutral-foreground-hint); background: transparent; }
.dct-swatch--noneed[b-7niw9a47rl] { border: 1px solid var(--neutral-stroke-rest); background: transparent; }
@media (forced-colors: active) {
    .dct-aged-outline[b-7niw9a47rl], .dct-unavailable-outline[b-7niw9a47rl] { stroke: CanvasText; }
    .dct-swatch--aged[b-7niw9a47rl], .dct-swatch--unavailable[b-7niw9a47rl], .dct-swatch--noneed[b-7niw9a47rl] { border-color: CanvasText; }
    .dct-swatch--aged[b-7niw9a47rl] {
        background: repeating-linear-gradient(45deg, transparent 0 2px, CanvasText 2px 3.5px);
        forced-color-adjust: none;
    }
}
.dct-sr[b-7niw9a47rl] {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.dct-occasion[b-7niw9a47rl] { fill: var(--neutral-fill-rest); stroke: var(--neutral-stroke-strong-rest); stroke-width: 1.5; pointer-events: none; }
.dct-occasion-hit[b-7niw9a47rl] { fill: transparent; }
@media (forced-colors: active) { .dct-occasion[b-7niw9a47rl] { stroke: CanvasText; } }
.dct-hit--pick[b-7niw9a47rl] { cursor: pointer; }
/* /Components/Application/Charts/DeathCoverageChart.razor.rz.scp.css */
/* ui-ux review, Task 8 fix round 1 (critical #2): the "versicherter Lohn im Todesjahr" figure moved
   out of the fixed-font-size SVG into normal DOM text so it wraps at any container width and is
   screen-reader accessible. Theme tokens only, no raw hex. */
.risk-salary-caption[b-ayns2lzkbx] {
    font-size: 0.8rem;
    color: var(--neutral-foreground-hint);
    font-variant-numeric: tabular-nums;
    text-align: right;
    padding: 0.15rem 0 0;
}

/* W2-G G4b: salary-after-death lead-in marker — a solid line, so forced colours only need a system colour. */
@media (forced-colors: active) {
    .dcc-salary-lead-in-line[b-ayns2lzkbx] {
        stroke: CanvasText;
    }

    /* The wide hit target stays invisible in forced colours too. */
    .dcc-salary-lead-in-hit[b-ayns2lzkbx] {
        stroke: transparent;
        forced-color-adjust: none;
    }

    .dcc-salary-lead-in-swatch[b-ayns2lzkbx] {
        background: CanvasText !important;
    }
}

/* W2-G: «Kapital reicht bis» when the month lies outside the drawn phases (spec §18.1). */
.reach-caption[b-ayns2lzkbx] {
    font-size: 0.85rem;
    color: var(--neutral-foreground-rest);
    font-variant-numeric: tabular-nums;
    padding: 0.15rem 0 0;
}
/* /Components/Application/Charts/DisabilityBridgeGapChart.razor.rz.scp.css */
/* Bridge-time gap chart (spec 2026-10-12 §8, slice S5). Theme tokens only; the same treatment as DisabilityCoverTimeline. */
.dbg[b-2en68avz6t] { display: flex; flex-direction: column; width: 100%; position: relative; margin-bottom: 0.9rem; }
.dbg-subtitle[b-2en68avz6t] { font-size: 0.85rem; color: var(--neutral-foreground-hint); padding-bottom: 0.25rem; }
.dbg-svg[b-2en68avz6t] { width: 100%; display: block; user-select: none; overflow: visible; }
.dbg-legend[b-2en68avz6t] { display: flex; flex-wrap: wrap; gap: 0.25rem 0.85rem; font-size: 0.85rem; padding-top: 0.35rem; }
.dbg-legend-item[b-2en68avz6t] { display: inline-flex; align-items: center; gap: 0.3rem; }
.dbg-swatch[b-2en68avz6t] { width: 14px; height: 10px; border-radius: 2px; flex-shrink: 0; }
.dbg-swatch--hatch[b-2en68avz6t] {
    background: repeating-linear-gradient(45deg, transparent 0 2px, var(--neutral-foreground-hint) 2px 3.5px);
    border: 1px dashed var(--neutral-stroke-rest);
}
.dbg-empty[b-2en68avz6t] { font-size: 0.85rem; color: var(--neutral-foreground-hint); padding: 1.2rem 0; }
/* Transient drag state dims the columns (opacity is fine for a transient state); the aged cue is the dashed outline, not a tone. */
.dbg-stale[b-2en68avz6t] { opacity: 0.45; }
.dbg-aged-outline[b-2en68avz6t] { stroke: var(--neutral-foreground-hint); stroke-width: 1; stroke-dasharray: 3 2; }
/* S6-7 ui-ux F-09: the swatch's solid left edge stands for the solid boundary line before the first aged column (it was only
   explained by a hover title); identical to DisabilityCoverTimeline's .dct-swatch--aged. */
.dbg-swatch--aged[b-2en68avz6t] { height: 10px; border: 1px dashed var(--neutral-foreground-hint); border-left: 2px solid var(--neutral-foreground-hint); background: transparent; }
@media (forced-colors: active) { .dbg-aged-outline[b-2en68avz6t] { stroke: CanvasText; } }
.dbg-hit--pick[b-2en68avz6t] { cursor: pointer; }
.dbg-sr[b-2en68avz6t] {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
/* /Components/Application/Charts/DisabilityCoverageChart.razor.rz.scp.css */
/* ui-ux review, Task 8 fix round 1 (critical #2): the "versicherter Lohn beim Vorsorgefall" figure moved
   out of the fixed-font-size SVG into normal DOM text so it wraps at any container width and is
   screen-reader accessible. Theme tokens only, no raw hex. */
.risk-salary-caption[b-zgeml1484l] {
    font-size: 0.8rem;
    color: var(--neutral-foreground-hint);
    font-variant-numeric: tabular-nums;
    text-align: right;
    padding: 0.15rem 0 0;
}

/* Spec 2026-10-14 §10.4 / ui-ux addendum C: the mode caption slot under the title, rendered in every mode with a constant
   min-height so a flip % ⇄ CHF (or a missing result) never moves the chart vertically. CHF mode: the no-wage caption;
   % mode: it holds the risk-salary caption. */
.coverage-mode-caption[b-zgeml1484l] {
    min-height: 2.6rem;
    font-size: 0.8rem;
    color: var(--neutral-foreground-hint);
    text-align: left;
}

/* Inside the slot the risk-salary caption is left-aligned like the CHF caption. */
.coverage-mode-caption .risk-salary-caption[b-zgeml1484l] {
    text-align: left;
    padding-top: 0;
}

/* The axis title «CHF/Jahr» (CHF mode only), right-aligned above the SVG; the slot keeps its height in every mode. */
.coverage-axis-unit[b-zgeml1484l] {
    min-height: 1.1rem;
    font-size: 0.8rem;
    color: var(--neutral-foreground-hint);
    text-align: right;
}
/* /Components/Application/Charts/DisabilityCoverTimeline.razor.rz.scp.css */
/* Long-term cover chart in the disability-pension card's panel (spec 2026-09-28-disability-gap-timeline,
   amended 2026-10-01). Theme tokens only. */
.dct[b-4s735dm8tu] { display: flex; flex-direction: column; width: 100%; position: relative; margin-bottom: 0.9rem; }
.dct-subtitle-text[b-4s735dm8tu] { font-size: 0.85rem; color: var(--neutral-foreground-hint); padding-bottom: 0.25rem; }
.dct-svg[b-4s735dm8tu] { width: 100%; display: block; user-select: none; overflow: visible; }
.dct-legend[b-4s735dm8tu] { display: flex; flex-wrap: wrap; gap: 0.25rem 0.85rem; font-size: 0.85rem; padding-top: 0.35rem; }
.dct-legend-item[b-4s735dm8tu] { display: inline-flex; align-items: center; gap: 0.3rem; }
.dct-swatch[b-4s735dm8tu] { width: 14px; height: 10px; border-radius: 2px; flex-shrink: 0; }
.dct-swatch--hatch[b-4s735dm8tu] {
    background: repeating-linear-gradient(45deg, transparent 0 2px, var(--neutral-foreground-hint) 2px 3.5px);
    border: 1px dashed var(--neutral-stroke-rest);
}
.dct-empty[b-4s735dm8tu] { font-size: 0.85rem; padding: 1.2rem 0; }
.dct-stale[b-4s735dm8tu] { opacity: 0.45; transition: none; }
/* C-2: columns from age MaxEntryAge + 1 carry a dashed outline (S6-7 ui-ux F-08: the same cue as the bridge-time chart, never a
   tone). The legend swatch is that dashed box with a solid left edge, so it also explains the solid boundary line (F-09). */
.dct-aged-outline[b-4s735dm8tu] { stroke: var(--neutral-foreground-hint); stroke-width: 1; stroke-dasharray: 3 2; }
.dct-swatch--aged[b-4s735dm8tu] { border: 1px dashed var(--neutral-foreground-hint); border-left: 2px solid var(--neutral-foreground-hint); background: transparent; }
@media (forced-colors: active) { .dct-aged-outline[b-4s735dm8tu] { stroke: CanvasText; } }
.dct-swatch--over[b-4s735dm8tu] {
    background: repeating-linear-gradient(-45deg, var(--w4l-positive) 0 1.5px, color-mix(in srgb, var(--w4l-positive) 35%, transparent) 1.5px 5px);
}
.dct-sr[b-4s735dm8tu] {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.dct-occasion[b-4s735dm8tu] { fill: var(--neutral-fill-rest); stroke: var(--neutral-stroke-strong-rest); stroke-width: 1.5; pointer-events: none; }
.dct-occasion-hit[b-4s735dm8tu] { fill: transparent; }
.dct-swatch--occasion[b-4s735dm8tu] { width: 7px; height: 7px; margin: 3px; transform: rotate(45deg); border-radius: 0;
    border: 1.5px solid var(--neutral-stroke-strong-rest); background: var(--neutral-fill-rest); }
@media (forced-colors: active) { .dct-occasion[b-4s735dm8tu] { stroke: CanvasText; } .dct-swatch--occasion[b-4s735dm8tu] { border-color: CanvasText; } }
.dct-hit--pick[b-4s735dm8tu] { cursor: pointer; }
/* /Components/Application/Charts/OwnerComparisonChart.razor.rz.scp.css */
/* OwnerComparisonChart — per-owner combined stack (Household / Person 1 / Person 2).
   With no headings or side markers the charts align cleanly in one column, and
   the shared y-scale reads true. */

.owner-cmp[b-38ebtkmfcq] {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 0;
}

.owner-cmp-stack[b-38ebtkmfcq] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    gap: 6px;
}

/* Combined view — single overlaid chart (ResultChartJsV2). */
.owner-cmp-combined[b-38ebtkmfcq] {
    display: flex;
    flex: 1;
    min-height: 0;
}

/* Inactive rendering (multi vs combined) — kept mounted, just not shown. */
.owner-cmp-origin[b-38ebtkmfcq] {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
}

/* Equal-height row per owner. */
.owner-cmp-row[b-38ebtkmfcq] {
    display: flex;
    flex: 1;
    min-height: 0;
    position: relative;
}

/* Hidden via the pill bar — the row is dropped, remaining charts reclaim the space. */
.owner-cmp-row--gone[b-38ebtkmfcq] {
    display: none;
}

/* ── Shared series legend ── */
.owner-cmp-legend[b-38ebtkmfcq] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    font-size: 0.75rem;
    color: var(--neutral-foreground-rest);
    margin-top: 8px;
    flex-shrink: 0;
}

.owner-cmp-legend-item[b-38ebtkmfcq] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.owner-cmp-legend-swatches[b-38ebtkmfcq] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

.owner-cmp-legend-swatch[b-38ebtkmfcq] {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    flex-shrink: 0;
}
/* /Components/Application/Charts/OwnerPillBar.razor.rz.scp.css */
/* OwnerPillBar — die geteilte Pill-Optik lebt in utilities.css (.w4l-pill*).
   Hier nur die komponenten-spezifischen Extras. */

/* Bar sitzt im Charts-Tab-Header und darf nicht schrumpfen. */
.owner-pillbar[b-iwupq4cmjs] {
    flex-shrink: 0;
}

/* ── Combine-Button — dezenter Icon-Only-Toggle ── */
.owner-pill-combine[b-iwupq4cmjs] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    margin-left: 2px;
    padding: 0;
    border: 1.5px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: var(--neutral-foreground-hint);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.owner-pill-combine:hover[b-iwupq4cmjs] {
    background: var(--neutral-fill-secondary-hover);
}

/* Aktiv — Charts überlagert. */
.owner-pill-combine--on[b-iwupq4cmjs] {
    border-color: var(--accent-fill-rest);
    background: color-mix(in srgb, var(--accent-fill-rest) 16%, transparent);
}
/* /Components/Application/Charts/OwnershipOriginChart.razor.rz.scp.css */
.origin-cmp[b-3msevf2upt] {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 0;
}

/* Start-page-card variant: a single compact Household sub-chart. Fills the
   host's explicit-height wrapper (Large 160px / Compact 120px / List 64px). */
.origin-cmp--sparkline[b-3msevf2upt] {
    height: 100%;
}

.origin-cmp-stack[b-3msevf2upt] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    gap: 0;
}

.origin-cmp-row[b-3msevf2upt] {
    position: relative;
    flex: 1 1 0;
    min-height: 0;
    display: flex;
}

.origin-cmp-row--gone[b-3msevf2upt] {
    display: none;
}

.origin-cmp-legend[b-3msevf2upt] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 0.85rem;
    justify-content: center;
    padding-top: 0.45rem;
    flex-shrink: 0;
    font-size: 0.75rem;
}

.origin-cmp-legend-item[b-3msevf2upt] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.origin-cmp-legend-swatches[b-3msevf2upt] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

.origin-cmp-legend-swatch[b-3msevf2upt] {
    width: 11px;
    height: 11px;
    border-radius: 2px;
    display: inline-block;
}

.origin-cmp-hint[b-3msevf2upt] {
    display: flex;
    justify-content: center;
    padding-top: 0.2rem;
    flex-shrink: 0;
    font-size: 0.68rem;
    opacity: 0.75;
    text-align: center;
}
/* /Components/Application/Charts/Preview.razor.rz.scp.css */
/* View switch in the preview header: charts / findings / journey as one segmented control.
   Native buttons (no FAST). Sized to the stealth icon buttons next to it so the header
   keeps its height. */
.preview-view-switch[b-xza1tjdoy3] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px;
    border-radius: 6px;
    background: var(--neutral-fill-secondary-rest);
    flex-shrink: 0;
}

.preview-view-switch__segment[b-xza1tjdoy3] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--neutral-foreground-hint);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.preview-view-switch__segment:hover[b-xza1tjdoy3] {
    background: var(--neutral-fill-secondary-hover);
    color: var(--neutral-foreground-rest);
}

.preview-view-switch__segment[aria-pressed="true"][b-xza1tjdoy3] {
    background: var(--neutral-layer-1);
    color: var(--accent-foreground-rest);
    box-shadow: 0 0 0 1px var(--neutral-stroke-rest);
}

.preview-view-switch__segment:focus-visible[b-xza1tjdoy3] {
    outline: 2px solid var(--focus-stroke-outer);
    outline-offset: 1px;
}
/* /Components/Application/Charts/TaxOriginChart.razor.rz.scp.css */
.tax-origin[b-ied1tiphfu] {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 0;
}

.tax-origin-chart[b-ied1tiphfu] {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
}

.tax-origin-legend[b-ied1tiphfu] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem 0.85rem;
    justify-content: center;
    flex-shrink: 0;
    padding-top: 0.45rem;
    font-size: 0.75rem;
}

.tax-origin-legend-item[b-ied1tiphfu] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.tax-origin-legend-swatch[b-ied1tiphfu] {
    width: 11px;
    height: 11px;
    border-radius: 2px;
    display: inline-block;
    flex-shrink: 0;
}
/* /Components/Application/Concerns/ConcernSchematic.razor.rz.scp.css */
/* ConcernSchematic: the concern picker as a box schematic (spec 2026-10-29-concerns-schematic-design, design review D1-D16).
   Muting is done by colour, never by opacity, on tiles and chevrons (text contrast). The tint percentages come from
   SchematicBoxTint (--cs-box-tint, --cs-box-border, --cs-selected-tint); SchematicBoxContrastTests pins them. */

.cs-root[b-kvm529w10g] {
    display: block;
    width: 100%;
}

/* Container query target. z-index 41 lifts the tiles and the open card above the tap-outside backdrop (40). */
.cs-container[b-kvm529w10g] {
    container-type: inline-size;
    position: relative;
    z-index: 41;
    width: 100%;
}

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

.cs-backdrop[b-kvm529w10g] {
    position: fixed;
    inset: 0;
    z-index: 40;
}

/* ---- Grid: wide = [phases 1fr] [chevron 34px] [what-if column = one tile + box padding] ---- */

.cs-grid[b-kvm529w10g] {
    --cs-tile-w: 216px;
    display: grid;
    grid-template-columns: 1fr 34px calc(var(--cs-tile-w) + 22px);
    grid-template-rows: var(--cs-rows);
    width: 100%;
}

.cs-grid--no-whatif[b-kvm529w10g] { grid-template-columns: 1fr; }

.cs-box[b-kvm529w10g] {
    --cs-ring: var(--cs-box-color);
    grid-column: 1;
    grid-row: var(--cs-row);
    box-sizing: border-box;
    min-width: 0;
    padding: 8px 10px 10px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--cs-box-color) var(--cs-box-tint), transparent);
    border: 1px solid color-mix(in srgb, var(--cs-box-color) var(--cs-box-border), transparent);
}

.cs-box--overall[b-kvm529w10g] { grid-column: 1 / -1; }
.cs-box--whatif[b-kvm529w10g] { grid-column: 3; }
.cs-grid--no-whatif .cs-box--whatif[b-kvm529w10g] { grid-column: 1; }
.cs-box--solo[b-kvm529w10g] { grid-column: 1 / -1; }

/* Title: neutral token, never the box colour. Overall and phases carry it left of the tiles. */
.cs-box-title[b-kvm529w10g] {
    margin: 0 0 7px;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.25;
    color: var(--neutral-foreground-hint);
}

.cs-box--overall[b-kvm529w10g],
.cs-box--phase[b-kvm529w10g] {
    display: grid;
    grid-template-columns: 120px 1fr;
    column-gap: 10px;
    align-items: center;
}

.cs-box--overall .cs-box-title[b-kvm529w10g],
.cs-box--phase .cs-box-title[b-kvm529w10g] {
    margin: 0;
    text-align: right;
}

/* ---- Tiles: equal width through one grid track definition ---- */

.cs-tiles[b-kvm529w10g] {
    display: grid;
    grid-template-columns: repeat(auto-fill, var(--cs-tile-w));
    justify-content: start;
    gap: 8px;
    min-width: 0;
}

/* Flex wrapper: the tile stretches to the wrapper, so tiles in one row share their height. */
.cs-tile-wrap[b-kvm529w10g] {
    position: relative;
    display: flex;
    min-width: 0;
}

.cs-tile-wrap:hover[b-kvm529w10g],
.cs-tile-wrap:focus-within[b-kvm529w10g],
.cs-tile-wrap:has(:focus-visible)[b-kvm529w10g],
.cs-tile-wrap--open[b-kvm529w10g] {
    z-index: 50;
}

.cs-tile[b-kvm529w10g] {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    box-sizing: border-box;
    min-height: 44px;
    padding: 6px 12px 6px 10px;
    border: 1.5px solid var(--neutral-stroke-strong-rest);
    border-radius: 7px;
    background: var(--neutral-layer-1);
    color: var(--neutral-foreground-rest);
    font: inherit;
    font-size: 13px;
    line-height: 1.15;
    text-align: left;
    cursor: pointer;
    transition: background-color .15s, border-color .15s;
}

/* Scenario tiles carry topic + status word: the minimum fits a label on two lines plus the status line, so a wrapped
   label («Vermögen bis ans Lebensende») does not make its tile taller than the others. */
.cs-root--scenario .cs-tile[b-kvm529w10g] { min-height: 62px; }

.cs-tile:hover[b-kvm529w10g] { border-color: color-mix(in srgb, var(--cs-box-color) 60%, var(--neutral-stroke-strong-rest)); }

.cs-tile:focus-visible[b-kvm529w10g] {
    outline: 2px solid var(--neutral-foreground-rest);
    outline-offset: 2px;
}

.cs-tile[aria-disabled="true"][b-kvm529w10g] { cursor: default; }

.cs-tile-icon[b-kvm529w10g],
.cs-check[b-kvm529w10g] {
    display: inline-flex;
    flex-shrink: 0;
}

.cs-tile-icon[b-kvm529w10g] { color: var(--neutral-foreground-hint); }
.cs-tile-label[b-kvm529w10g] { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.cs-check[b-kvm529w10g] { visibility: hidden; color: var(--neutral-foreground-rest); }

/* Selected: the box colour at --cs-selected-tint over the box fill; text stays neutral. */
.cs-tile--on[b-kvm529w10g] {
    background: color-mix(in srgb, var(--cs-box-color) var(--cs-selected-tint), transparent);
    border-color: color-mix(in srgb, var(--cs-box-color) 85%, transparent);
}

.cs-tile--on .cs-tile-label[b-kvm529w10g] { font-weight: 600; }
.cs-tile--on .cs-tile-icon[b-kvm529w10g] { color: var(--neutral-foreground-rest); }
.cs-tile--on .cs-check[b-kvm529w10g] { visibility: visible; }

/* Selected but no longer relevant (D10): the normal tile fill and border, rest text; only the state word says so. */
.cs-tile--on.cs-tile--muted[b-kvm529w10g] {
    background: var(--neutral-layer-1);
    border-color: var(--neutral-stroke-strong-rest);
}

.cs-tile--muted .cs-tile-label[b-kvm529w10g] { font-weight: 400; }
.cs-tile--muted .cs-tile-icon[b-kvm529w10g] { color: var(--neutral-foreground-hint); }

/* Scenario tile: topic, then dot + state word; the chevron says "opens the answer". */
.cs-tile-text[b-kvm529w10g] {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

/* The status word sits on the selected fill in the rest colour; the hint colour fails 4.5:1 there. */
.cs-tile-status[b-kvm529w10g] {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: var(--neutral-foreground-rest);
}

.cs-tile-chevron[b-kvm529w10g] {
    display: inline-flex;
    flex-shrink: 0;
    color: var(--neutral-foreground-rest);
}

/* The concern the preview shows: a ring in the box colour, set off from the tile by a gap in the layer colour. */
.cs-tile--focused[b-kvm529w10g] {
    box-shadow: 0 0 0 2px var(--neutral-layer-1), 0 0 0 4px var(--cs-ring);
}

/* Ghost tile (scenario page, Task 7): not followed yet. */
.cs-tile--ghost[b-kvm529w10g] {
    background: transparent;
    border: 1.5px dashed var(--neutral-foreground-hint);
    color: var(--neutral-foreground-hint);
}

.cs-tile--ghost .cs-tile-icon[b-kvm529w10g] { color: var(--neutral-foreground-hint); }

.cs-tile--ghost[b-kvm529w10g]::after {
    content: "+" / "";
    color: var(--neutral-foreground-hint);
    font-size: 15px;
}

/* Read-only example: no plus, no hint of an action. */
.cs-tile--ghost[aria-disabled="true"][b-kvm529w10g]::after { content: none; }

/* ---- Chevrons: one open arrowhead, no connector lines ---- */

.cs-chevron[b-kvm529w10g] {
    display: flex;
    align-items: center;
    justify-content: center;
    grid-row: var(--cs-row);
    pointer-events: none;
}

.cs-chevron[b-kvm529w10g]::before {
    content: "";
    width: 6px;
    height: 6px;
    border: solid currentColor;
    border-width: 0 1.5px 1.5px 0;
}

.cs-chevron--down[b-kvm529w10g] {
    grid-column: 1;
    color: var(--neutral-foreground-hint);
}

.cs-chevron--down[b-kvm529w10g]::before { transform: rotate(45deg); }

.cs-chevron--to-whatif[b-kvm529w10g] { grid-column: 3; }
.cs-chevron--solo[b-kvm529w10g] { grid-column: 1 / -1; }
.cs-grid--no-whatif .cs-chevron--to-whatif[b-kvm529w10g] { display: none; }

.cs-chevron--left[b-kvm529w10g] {
    grid-column: 2;
    color: color-mix(in srgb, var(--cs-box-color) 70%, var(--neutral-foreground-hint));
}

.cs-chevron--left[b-kvm529w10g]::before { transform: rotate(135deg); }

/* ---- Question card ---- */

.cs-card[b-kvm529w10g] {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 20;
    box-sizing: border-box;
    width: 300px;
    padding: 11px 13px 10px;
    border: 1px solid var(--neutral-stroke-strong-rest);
    border-radius: 8px;
    background: var(--neutral-layer-floating, var(--neutral-layer-1));
    /* Fluent's flyout elevation: a dark shadow in both themes (a foreground-based shadow glowed white in dark mode). */
    box-shadow: var(--elevation-shadow-flyout);
    color: var(--neutral-foreground-rest);
    cursor: default;
    /* Link-free card (wizard): hidden by opacity, so the questions stay in the accessibility tree. */
    opacity: 0;
    pointer-events: none;
    transform: translateY(4px);
    transition: opacity .14s, transform .14s;
}

/* Hover bridge: the 6 px gap between tile and card belongs to the card, so the pointer never leaves :hover on its way in. */
.cs-card[b-kvm529w10g]::before {
    content: "";
    position: absolute;
    top: -6px;
    left: 0;
    right: 0;
    height: 6px;
}

.cs-card--left[b-kvm529w10g] { left: auto; right: 0; }

/* A card with links or footer actions leaves the tab order while hidden; it shows without delay and hides after the fade. */
.cs-card--interactive[b-kvm529w10g] {
    visibility: hidden;
    transition: opacity .14s, transform .14s, visibility 0s linear .14s;
}

.cs-card--open[b-kvm529w10g] { opacity: 1; pointer-events: auto; transform: none; }
.cs-card--interactive.cs-card--open[b-kvm529w10g] { visibility: visible; transition-delay: 0s; }

.cs-card:focus[b-kvm529w10g] { outline: none; }

/* Keyboard focus shows the card; the tile stays the focus owner. */
.cs-tile-wrap:has(:focus-visible) .cs-card[b-kvm529w10g] {
    opacity: 1;
    pointer-events: auto;
    transform: none;
}

.cs-tile-wrap:has(:focus-visible) .cs-card--interactive[b-kvm529w10g] {
    visibility: visible;
    transition-delay: 0s;
}

/* Hover only on a fine pointer; on a coarse pointer only .cs-card--open shows the card. */
@media (hover: hover) and (pointer: fine) {
    .cs-tile-wrap:hover .cs-card[b-kvm529w10g] {
        opacity: 1;
        pointer-events: auto;
        transform: none;
    }

    .cs-tile-wrap:hover .cs-card--interactive[b-kvm529w10g] {
        visibility: visible;
        transition-delay: 0s;
    }
}

/* Escape on a hovered or focused card: hidden until the next focus or pointer-down on the wrapper. */
.cs-root .cs-tile-wrap .cs-card.cs-card--dismissed[b-kvm529w10g] {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.cs-card-top[b-kvm529w10g] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 6px;
}

.cs-card-head[b-kvm529w10g] {
    flex: 1 1 auto;
    min-width: 0;
    padding-top: 2px;
    font-size: 11px;
    color: var(--neutral-foreground-hint);
}

/* Small close button top right: dismisses a hovered/focused card, closes a tapped one. */
.cs-card-close[b-kvm529w10g] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    margin: -4px -6px 0 0;
    padding: 0;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--neutral-foreground-hint);
    cursor: pointer;
}

.cs-card-close:hover[b-kvm529w10g] { background: var(--neutral-fill-secondary-rest); color: var(--neutral-foreground-rest); }
.cs-card-close:focus-visible[b-kvm529w10g] { outline: 2px solid var(--neutral-foreground-rest); outline-offset: 1px; }

.cs-card-questions[b-kvm529w10g] {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 12.5px;
    line-height: 1.4;
}

.cs-card-questions > li[b-kvm529w10g] {
    position: relative;
    margin-bottom: 6px;
    padding-left: 16px;
}

.cs-card-questions > li[b-kvm529w10g]::before {
    content: "";
    position: absolute;
    left: 1px;
    top: 6px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--cs-box-color);
}

/* Scenario card: one line per person or household under each question. */
.cs-card-lines[b-kvm529w10g] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-top: 3px;
    font-size: 12px;
}

.cs-line[b-kvm529w10g] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 3px 6px;
}

.cs-line-text[b-kvm529w10g] { min-width: 0; overflow-wrap: anywhere; }

.cs-card-link[b-kvm529w10g] {
    color: var(--accent-foreground-rest);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.cs-card-link:hover[b-kvm529w10g] { color: var(--accent-foreground-hover); }
.cs-card-link:focus-visible[b-kvm529w10g] { outline: 2px solid var(--neutral-foreground-rest); outline-offset: 2px; }

.cs-card-occasion[b-kvm529w10g] {
    margin: 0 0 6px;
    font-size: 12.5px;
    line-height: 1.4;
}

.cs-card-needs[b-kvm529w10g] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    margin-top: 7px;
    padding-top: 7px;
    border-top: 1px solid var(--neutral-stroke-divider-rest);
    font-size: 11px;
    color: var(--neutral-foreground-hint);
}

.cs-tag[b-kvm529w10g] {
    padding: 1px 6px;
    border-radius: 8px;
    background: var(--neutral-fill-secondary-rest);
    color: var(--neutral-foreground-rest);
}

.cs-card-foot[b-kvm529w10g] {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--neutral-stroke-divider-rest);
    display: flex;
    justify-content: flex-end;
}

.cs-card-foot--split[b-kvm529w10g] { justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }

.cs-card-secondary[b-kvm529w10g] {
    min-height: 32px;
    padding: 0 2px;
    border: none;
    background: transparent;
    color: var(--accent-foreground-rest);
    font: inherit;
    font-size: 12.5px;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.cs-card-secondary:hover[b-kvm529w10g] { color: var(--accent-foreground-hover); }
.cs-card-secondary:focus-visible[b-kvm529w10g] { outline: 2px solid var(--neutral-foreground-rest); outline-offset: 2px; }

/* Standard button height (Fluent: 32 px); on a coarse pointer the touch target grows below. */
.cs-card-action[b-kvm529w10g] {
    min-height: 32px;
    padding: 0 12px;
    border: none;
    border-radius: 4px;
    background: var(--accent-fill-rest);
    color: var(--foreground-on-accent-rest);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

.cs-card-action:hover[b-kvm529w10g] { background: var(--accent-fill-hover); }
.cs-card-action:focus-visible[b-kvm529w10g] { outline: 2px solid var(--neutral-foreground-rest); outline-offset: 2px; }

@media (pointer: coarse) {
    .cs-tile[b-kvm529w10g] { min-height: 44px; }
    .cs-root--scenario .cs-tile[b-kvm529w10g] { min-height: 62px; }
    .cs-card-action[b-kvm529w10g],
    .cs-card-secondary[b-kvm529w10g] { min-height: 44px; }
    .cs-card-close[b-kvm529w10g] { width: 36px; height: 36px; }
}

@media (prefers-reduced-motion: reduce) {
    .cs-card[b-kvm529w10g],
    .cs-card--interactive[b-kvm529w10g],
    .cs-tile[b-kvm529w10g] {
        transition: none;
        transform: none;
    }
}

@media (forced-colors: active) {
    .cs-tile--on[b-kvm529w10g] { border-width: 2px; }
    .cs-tile--on.cs-tile--focused[b-kvm529w10g] { outline: 2px solid Highlight; outline-offset: 3px; }
}

/* ---- Container breakpoints ---- */

/* Only the first tile of a box opens its card to the right; every later tile anchors the card at its own right edge.
   A 300 px card under the third tile of a row otherwise crossed the box edge, and the work area (.preview-content,
   overflow: hidden) clipped it at the border to the preview. */
@container (min-width: 561px) {
    .cs-tile-wrap:nth-child(n+2) .cs-card[b-kvm529w10g] { left: auto; right: 0; }
}

/* One column: boxes in DOM (= flow) order, chevrons only between the boxes of the life path. */
@container (max-width: 900px) {
    .cs-tiles[b-kvm529w10g] { grid-template-columns: repeat(auto-fill, minmax(min(var(--cs-tile-w), 100%), 1fr)); justify-content: normal; }

    .cs-grid[b-kvm529w10g] {
        grid-template-columns: 1fr;
        grid-template-rows: none;
    }

    .cs-box[b-kvm529w10g],
    .cs-box--overall[b-kvm529w10g],
    .cs-box--whatif[b-kvm529w10g],
    .cs-box--solo[b-kvm529w10g],
    .cs-grid--no-whatif .cs-box--whatif[b-kvm529w10g] {
        grid-column: 1;
        grid-row: auto;
    }

    .cs-chevron[b-kvm529w10g],
    .cs-chevron--down[b-kvm529w10g],
    .cs-chevron--solo[b-kvm529w10g] {
        grid-column: 1;
        grid-row: auto;
        height: 16px;
    }

    .cs-chevron--left[b-kvm529w10g],
    .cs-chevron--to-whatif[b-kvm529w10g] { display: none; }

    .cs-box--whatif[b-kvm529w10g] { margin-top: 16px; }
}

/* Narrow: the box label sits above the tiles, tiles take the full width, the card spans the tile. */
@container (max-width: 560px) {
    .cs-grid[b-kvm529w10g] { --cs-tile-w: 100%; }

    .cs-box--overall[b-kvm529w10g],
    .cs-box--phase[b-kvm529w10g] {
        grid-template-columns: 1fr;
        row-gap: 6px;
    }

    .cs-box--overall .cs-box-title[b-kvm529w10g],
    .cs-box--phase .cs-box-title[b-kvm529w10g] { text-align: left; }

    .cs-card[b-kvm529w10g],
    .cs-card--left[b-kvm529w10g] {
        left: 0;
        right: 0;
        width: auto;
    }
}
/* /Components/Application/Forms/AhvWithdrawalForm.razor.rz.scp.css */
.ahvw-root[b-s5yw8qpe86] {
    padding: 1rem 0;
}

.ahvw-chart[b-s5yw8qpe86] {
    width: 100%;
    height: 360px;
    display: block;
    touch-action: none;
    user-select: none;
}

/* ── Step list (one row per draw, ascending staircase) ── */
.ahvw-steps[b-s5yw8qpe86] {
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ahvw-step[b-s5yw8qpe86] {
    padding: 10px 14px;
    border: 0.5px solid var(--neutral-stroke-divider-rest);
    border-left: 3px solid var(--neutral-stroke-divider-rest);
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
    transition: border-color 0.12s;
}

.ahvw-step:not(.ahvw-step--selected):hover[b-s5yw8qpe86] {
    border-color: var(--neutral-stroke-hover);
}

.ahvw-step--selected[b-s5yw8qpe86] {
    border-left-color: var(--accent-fill-rest);
    border-color: var(--accent-fill-rest);
}

.ahvw-step-head[b-s5yw8qpe86] {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: space-between;
}

/* Status-card body: distinct, highlighted metrics rather than a cramped meta line. */
.ahvw-step-stats[b-s5yw8qpe86] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
    margin-top: 10px;
}

.ahvw-stat[b-s5yw8qpe86] {
    flex: 1 1 0;
    min-width: 92px;
    padding: 7px 10px;
    border-radius: 5px;
    background: var(--neutral-fill-secondary-rest, rgba(0, 0, 0, 0.03));
}

.ahvw-stat-label[b-s5yw8qpe86] {
    font-size: 11px;
    color: var(--neutral-foreground-hint);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.ahvw-stat-value[b-s5yw8qpe86] {
    margin-top: 2px;
    font-size: 15px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    font-variant-numeric: tabular-nums;
}

.ahvw-step-id[b-s5yw8qpe86] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.ahvw-step-badge[b-s5yw8qpe86] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    background: var(--accent-fill-rest);
}

.ahvw-step-name[b-s5yw8qpe86] {
    font-size: 14px;
    font-weight: 500;
    color: var(--neutral-foreground-rest);
}

.ahvw-icon-btn[b-s5yw8qpe86] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    background: transparent;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    color: var(--neutral-foreground-hint);
}

.ahvw-icon-btn:hover[b-s5yw8qpe86] {
    background: var(--neutral-fill-secondary-rest);
}
/* /Components/Application/Forms/DeathBenefitStaircase.razor.rz.scp.css */
.dbs-anchor[b-ht8tk9khex] {
    white-space: pre-line;
    margin: 0 0 0.25rem 0;
    font-size: 0.875rem;
    color: var(--neutral-foreground-rest);
    font-variant-numeric: tabular-nums;
}
/* /Components/Application/Forms/DeathCapitalStagePanel.razor.rz.scp.css */
.w4l-ben-compact[b-y3v9ygfb4j] { display: flex; flex-direction: column; gap: 0.4rem; font-size: 0.85rem; }
.w4l-ben-line > details > summary[b-y3v9ygfb4j] { cursor: pointer; font-size: 0.8rem; color: var(--accent-foreground-rest); }

/* Touch target: the ladder toggle is a 12.8 px text line otherwise. */
@media (pointer: coarse) {
    .w4l-ben-line > details > summary[b-y3v9ygfb4j] { min-height: 44px; padding-block: 0.6rem; box-sizing: border-box; }
}
/* /Components/Application/Forms/DeathGapStagePanel.razor.rz.scp.css */
/* Slot of the capital-need chart pair (W2-G): own size container so the pair can go side by side from its own width. */
.dbs-charts[b-otumh6z7tg] {
    container-type: inline-size;
    width: 100%;
    margin: 0.75rem 0;
}
/* /Components/Application/Forms/DeathOnsetControls.razor.rz.scp.css */
/* Staircase: the component is its own size container (the page body is none). */
.doc-root[b-oz1hb9kmrs] { container-type: inline-size; }

.doc-two[b-oz1hb9kmrs] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem 1.5rem;
}

@container (min-width: 760px) {
    .doc-two[b-oz1hb9kmrs] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* The rate slider's inert reason is information, not a hint: full foreground contrast (the shared hint token falls below
   4.5:1 in light and dark). */
.doc-rate[b-oz1hb9kmrs]  .value-slider__title-suffix { color: var(--neutral-foreground-rest); }

/* A 15 px/year band cannot carry text; the anchor line names the employer and the knob announces it. */
@container (max-width: 479px) { .doc-root[b-oz1hb9kmrs]  .value-slider__segment-labels { display: none; } }
/* /Components/Application/Forms/DisabilityBenefitStaircase.razor.rz.scp.css */
.dbs-anchor[b-8e53pgizgg] {
    white-space: pre-line;
    margin: 0 0 0.25rem 0;
    font-size: 0.875rem;
    color: var(--neutral-foreground-rest);
    font-variant-numeric: tabular-nums;
}
/* /Components/Application/Forms/DisabilityDailyAllowanceStage.razor.rz.scp.css */
/* Gap charts per cause side by side from 680 px of their own width (spec §8, memo §2). */
.dbs-charts[b-a2svwjbwyb] {
    container-type: inline-size;
    width: 100%;
    margin: 0.75rem 0;
}
/* /Components/Application/Forms/DisabilityOnsetControls.razor.rz.scp.css */
/* Verdict paragraph rules live here because a scoped rule only reaches its own component's elements. */
.dis-cover-text[b-6ntqfja0jz] {
    font-size: 0.85rem;
    color: var(--neutral-foreground-rest);
    max-width: 60rem;
}

.dis-cover-text p[b-6ntqfja0jz] {
    margin: 0 0 0.6rem 0;
}

.dis-cover-text p:last-child[b-6ntqfja0jz] {
    margin-bottom: 0;
}

.dis-cover-verdict[b-6ntqfja0jz] {
    font-weight: 600;
}

/* Staircase (memo §2/§4): the component is its own size container. */
.doc-root[b-6ntqfja0jz] { container-type: inline-size; }

.doc-two[b-6ntqfja0jz] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem 1.5rem;
}

@container (min-width: 760px) {
    .doc-two[b-6ntqfja0jz] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* The Bedarf slider carries a marker-label row the Grad slider lacks: push the Grad track down so both tracks align
       (Playwright check in S6: track tops equal ±1 px). */
    .doc-degree[b-6ntqfja0jz]  .value-slider__track-area { margin-top: 18px; }
}

/* A 15 px/year band cannot carry text; the anchor line names the employer and the knob announces it. */
@container (max-width: 479px) { .doc-root[b-6ntqfja0jz]  .value-slider__segment-labels { display: none; } }
/* /Components/Application/Forms/DisabilityPrivatePensionStage.razor.rz.scp.css */
/* Gap charts per cause side by side from 680 px of their own width (spec §8, memo §2). */
.dbs-charts[b-97sdrph2b9] {
    container-type: inline-size;
    width: 100%;
    margin: 0.75rem 0;
}
/* /Components/Application/Forms/DivorceGapToolPanel.razor.rz.scp.css */
/* DivorceGapToolPanel — native popover: transparent backdrop closes it, the panel is position:fixed and placed by popoverPlace.js
   (viewport-aware). Mounted once; closed = display:none, so no FAST element is ever created or dropped on toggle. */
.dgt-anchor[b-2c9c1yfo10] {
    display: block;
}

.dgt-hidden[b-2c9c1yfo10] {
    display: none !important;
}

.dgt-backdrop[b-2c9c1yfo10] {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: transparent;
}

.dgt-panel[b-2c9c1yfo10] {
    position: fixed;
    z-index: 50;
    top: 0;
    left: 0;
    visibility: hidden; /* popoverPlace.place sets top/left and reveals */
    /* 390 px: never wider than the viewport minus a 16 px gutter on each side. */
    width: min(24rem, calc(100vw - 32px));
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.dgt-title[b-2c9c1yfo10] {
    font-weight: 700;
}

.dgt-scope[b-2c9c1yfo10] {
    margin: 0;
    font-size: 0.875rem;
}

.dgt-field[b-2c9c1yfo10] {
    display: block;
}

/* The message line is reserved by FindingLine's own hide/show; the result row is bold and live. */
.dgt-result[b-2c9c1yfo10] {
    font-weight: 700;
}

.dgt-actions[b-2c9c1yfo10] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.dgt-actions[b-2c9c1yfo10]  fluent-button {
    min-height: 40px;
}

.dgt-trigger[b-2c9c1yfo10] {
    text-align: left;
}
/* /Components/Application/Forms/DivorceGapYearField.razor.rz.scp.css */
/* DivorceGapYearField — a block wrapper (a span would be an inline box around the block-level field). */
.dgy-field[b-yvollfbxsi] {
    display: block;
    width: 100%;
}
/* /Components/Application/Forms/EmployeeShareExitRulesSection.razor.rz.scp.css */
/* Radio matrix: a 100 % wide native table, wrapping column heads, >= 24 px targets (UI review B-3). */
.eso-matrix[b-t1o0vyiwbs] {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.eso-matrix th[b-t1o0vyiwbs],
.eso-matrix td[b-t1o0vyiwbs] {
    padding: 4px 6px;
    text-align: center;
    vertical-align: middle;
    font-size: 0.8125rem;
    font-weight: 400;
    overflow-wrap: anywhere;
}

.eso-matrix thead th[b-t1o0vyiwbs] {
    color: var(--neutral-foreground-hint);
    vertical-align: bottom;
}

.eso-matrix tbody th[b-t1o0vyiwbs] {
    text-align: left;
    color: var(--neutral-foreground-rest);
    font-weight: 600;
    width: 38%;
}

/* Row-group heads ("Leaving", "Life event"): a label line, not focusable, no radio (UI memo 2a §1.3). */
.eso-matrix tbody tr.eso-group th[b-t1o0vyiwbs] {
    color: var(--neutral-foreground-hint);
    font-weight: 400;
    padding-top: 8px;
}

.eso-matrix tbody tr + tr th[b-t1o0vyiwbs],
.eso-matrix tbody tr + tr td[b-t1o0vyiwbs],
.eso-matrix tbody + tbody tr.eso-group th[b-t1o0vyiwbs] {
    border-top: 1px solid var(--neutral-stroke-divider-rest);
}

.eso-radio[b-t1o0vyiwbs] {
    width: 24px;
    height: 24px;
    margin: 0;
    accent-color: var(--accent-fill-rest);
    cursor: pointer;
}

.eso-radio:focus-visible[b-t1o0vyiwbs] {
    outline: 2px solid var(--focus-stroke-outer, var(--accent-fill-rest));
    outline-offset: 2px;
}

.eso-toggle[b-t1o0vyiwbs] {
    margin-top: 8px;
}

/* Death row: label + rule pill, the heirs line (state text + link), then the assumption sentence or the finding. */
.eso-death-row[b-t1o0vyiwbs] {
    margin-top: 0.75rem;
}

.eso-death-label .ym-badge[b-t1o0vyiwbs] {
    margin-left: 6px;
}

.eso-heirs[b-t1o0vyiwbs] {
    margin-top: 6px;
    font-size: 0.78rem;
    color: var(--neutral-foreground-rest);
}

.eso-heirs-text[b-t1o0vyiwbs] {
    margin-right: 6px;
}

/* The durable text of this group: the death assumption. */
.eso-death[b-t1o0vyiwbs] {
    margin: 0.75rem 0 0 0;
    font-size: 0.78rem;
    color: var(--neutral-foreground-rest);
}

.eso-death .ym-badge[b-t1o0vyiwbs] {
    margin-right: 6px;
}

.eso-return[b-t1o0vyiwbs] {
    margin-top: 0.75rem;
    max-width: 22rem;
}

.eso-rows[b-t1o0vyiwbs] {
    margin-top: 1rem;
}

.eso-head[b-t1o0vyiwbs] {
    font-size: 0.78rem;
    font-weight: 600;
    margin-bottom: 4px;
}

.eso-hint[b-t1o0vyiwbs] {
    margin: 0.5rem 0 0 0;
    font-size: 0.78rem;
    color: var(--neutral-foreground-rest);
}
/* /Components/Application/Forms/EmployeeSharePlanForm.razor.rz.scp.css */
/* Label row above the listing switch: the label and its "formula value" badge sit on one line (wrapping on narrow columns). */
.esp-label-row[b-foxi5fpq1i] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

/* Container for the key-figure tiles: the quad variant reads the width of THIS box (the work column), not the viewport. */
.esp-kpi-wrap[b-foxi5fpq1i] {
    container-type: inline-size;
    width: 100%;
}

.esp-hint[b-foxi5fpq1i] {
    margin: 4px 0 0 0;
    font-size: 0.78rem;
    color: var(--neutral-foreground-rest);
}
/* /Components/Application/Forms/EmploymentForm.razor.rz.scp.css */
.wl-summary[b-za5bbbtp1q] {
    font-size: var(--type-ramp-minus-1-font-size);
    color: var(--neutral-foreground-hint);
    white-space: nowrap;
}

/* Stepper panels: CSS-toggled, never @if (FAST leak rule) - same as HomeForm's hf-panel. */
.ef-panel[b-za5bbbtp1q] {
    width: 100%;
    box-sizing: border-box;
    padding-top: 8px;
}

.ef-panel--hidden[b-za5bbbtp1q] {
    display: none;
}

.wl-riskcover[b-za5bbbtp1q] { margin-top: 8px; }
.wl-riskcover-row[b-za5bbbtp1q] { display: inline-flex; align-items: center; gap: 0.4rem; }
.wl-riskcover-qualifier[b-za5bbbtp1q] { margin-left: calc(var(--design-unit) * 7px); /* aligns with the checkbox label (checkbox box + gap) */ font-size: var(--type-ramp-minus-1-font-size); color: var(--neutral-foreground-hint); }

/* Pension-fund switch (spec 2026-10-28 §6.1): badge, reset and switch in the group title's slot, one state line below. */
.ef-pk-controls[b-za5bbbtp1q] { display: inline-flex; align-items: center; gap: 0.4rem; }
.ef-pk-label[b-za5bbbtp1q] { font-size: var(--type-ramp-minus-1-font-size); white-space: nowrap; }
.ef-pk-line[b-za5bbbtp1q] { font-size: var(--type-ramp-minus-1-font-size); color: var(--neutral-foreground-hint); margin-top: 4px; }
/* /Components/Application/Forms/HomeForm.razor.rz.scp.css */
.home-chart-zone[b-j7b23aj53r] {
    width: 100%;
    padding: 8px 0 16px 0;
}

/* Chevron-Stepper: extrahiert in die Shared-Komponente LifecycleStepper
   (LifecycleStepper.razor.css). */

/* ── Panels (CSS-toggled, never @if — FAST leak rule) ────────── */
.hf-panel[b-j7b23aj53r] {
    width: 100%;
    box-sizing: border-box;
    padding-top: 8px;
}
.hf-panel--hidden[b-j7b23aj53r] {
    display: none;
}

/* ── Hypotheken: Auto-Modus (read-only Zeilen) + Modus-Toggle ──────────── */
.hf-automode-label[b-j7b23aj53r] {
    font-size: 0.78rem;
    color: var(--neutral-foreground-rest);
    align-self: center;
    white-space: nowrap;
}

.hf-mortgage-list[b-j7b23aj53r] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.hf-mortgage-ro[b-j7b23aj53r] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 1rem;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 6px;
    background: var(--neutral-layer-2);
    font-size: 0.82rem;
    font-variant-numeric: tabular-nums;
}

.hf-mortgage-ro .hf-mro-name[b-j7b23aj53r] {
    font-weight: 600;
    min-width: 7rem;
}

.hf-mortgage-ro .hf-mro-amount[b-j7b23aj53r] {
    font-weight: 600;
}

.hf-mortgage-ro .hf-mro-period[b-j7b23aj53r] {
    margin-left: auto;
    color: var(--neutral-foreground-hint, #707a87);
}

/* ── Kleine Feld-Überschrift über Pill-Switches (Type / Amortization) ──── */
.hf-field-caption[b-j7b23aj53r] {
    font-size: 0.75rem;
    color: var(--neutral-foreground-hint, #707a87);
    margin-bottom: 0.25rem;
}

/* ── Max-Kaufpreis-Karten (1 / 2 Hypotheken) unter dem Purchase-Price-Feld ──
   Visuell an die fin-stat-cards im StandardFinancingPanel angelehnt. ──────── */
.hf-afford-cards[b-j7b23aj53r] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
    margin-top: 4px;
}

.hf-afford-card[b-j7b23aj53r] {
    flex: 1 1 140px;
    min-width: 140px;
    padding: 8px 10px;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 6px;
    background: var(--neutral-layer-1);
    cursor: help;
}

.hf-afford-card--over[b-j7b23aj53r] {
    border-color: var(--warning-foreground, #b06a00);
}

.hf-afford-label[b-j7b23aj53r] {
    font-size: 10px;
    color: var(--neutral-foreground-hint);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    text-align: center;
}

.hf-afford-value[b-j7b23aj53r] {
    font-size: 18px;
    font-weight: 700;
    margin-top: 1px;
    text-align: center;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.hf-afford-card--over .hf-afford-value[b-j7b23aj53r] {
    color: var(--warning-foreground, #b06a00);
}

.hf-afford-sub[b-j7b23aj53r] {
    font-size: 0.68rem;
    color: var(--neutral-foreground-hint);
    text-align: center;
    margin-top: 1px;
    font-variant-numeric: tabular-nums;
}

.hf-afford-card--over .hf-afford-sub[b-j7b23aj53r] {
    color: var(--warning-foreground, #b06a00);
    font-weight: 600;
}

/* Warn-Engine-Findings (Schritt ④ + Tranche): geteilter Bullet-Block MortgageFindingsBlock. */

/* Holding-mode status line (existing property vs purchase month) - state, not help text. */
.hf-mode-line[b-j7b23aj53r] {
    font-size: 0.8rem;
    color: var(--neutral-foreground-rest);
    color: color-mix(in srgb, var(--neutral-foreground-rest) 82%, transparent);
    margin-top: 4px;
}

.hf-subhead[b-j7b23aj53r] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 8px;
}
/* /Components/Application/Forms/HouseholdAreasForm.razor.rz.scp.css */
/* Contribution pills inside the household cash box: one per person, flanking the cash node, the quiet word below (spec 5). */
.hh-contrib[b-gyykbzkigc] {
    position: absolute;
    inset: 22px 8px 4px;
    pointer-events: none;
}

.hh-contrib__item[b-gyykbzkigc] {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    max-width: 33%;
}

.hh-contrib__item:nth-child(1)[b-gyykbzkigc] { left: 16%; }
.hh-contrib__item:nth-child(2)[b-gyykbzkigc] { left: 84%; }

/* A single person: the one pill takes the left flank as well. */
.hh-contrib__pill[b-gyykbzkigc] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 100%;
    padding: 4px 7px;
    border-radius: 6px;
    background: var(--neutral-fill-secondary-rest);
    font-size: 13px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

.hh-contrib__bar[b-gyykbzkigc] {
    flex-shrink: 0;
    width: 4px;
    height: 14px;
    border-radius: 2px;
}

.hh-contrib__name[b-gyykbzkigc] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hh-contrib__word[b-gyykbzkigc] {
    font-size: 12px;
    color: var(--neutral-foreground-hint);
}

/* Single-column state: the box is a normal block, the pills sit side by side below the node. */
@container (max-width: 699px) {
    .hh-contrib[b-gyykbzkigc] {
        position: static;
        display: flex;
        justify-content: space-evenly;
        gap: 8px;
        padding-block: 4px;
    }

    .hh-contrib__item[b-gyykbzkigc] {
        position: static;
        transform: none;
        max-width: 45%;
    }
}
/* /Components/Application/Forms/HouseholdStructureForm.razor.rz.scp.css */
/* ==========================================================================
   HouseholdStructureForm — Chip-style, Fluent Blazor color tokens
   Neutral at rest, accent only on active/highlighted states.
   Works in both light and dark mode via Fluent CSS variables.
   ========================================================================== */

/* ====== MAIN GRID ====== */
.hs5[b-7gimchsr73] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 0;
    row-gap: 0;
    width: 100%;
    max-width: 920px;
    margin: 0 auto;
    padding: 20px 12px;
}

/* ====== CARDS (Person 1 / Person 2) — chip style ====== */
.hs5-card[b-7gimchsr73] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 28px 16px 28px;
    border-radius: calc(var(--layer-corner-radius) * 1px);
    border: none;
    background: var(--neutral-fill-stealth-rest);
    position: relative;
    cursor: default;
    box-shadow: none;
    transition: background 0.2s ease, box-shadow 0.2s ease;
}

.hs5-card--p1[b-7gimchsr73] { grid-column: 1; grid-row: 1; }
.hs5-card--p2[b-7gimchsr73] { grid-column: 3; grid-row: 1; }

/* Active: accent-tinted background, subtle elevation */
.hs5-card--active[b-7gimchsr73] {
    background: var(--neutral-fill-rest);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.hs5-card--surface-toggle[b-7gimchsr73] {
    cursor: pointer;
}

.hs5-card--surface-toggle:hover[b-7gimchsr73] {
    background: var(--neutral-fill-hover);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Inactive: muted, clickable */
.hs5-card--inactive[b-7gimchsr73] {
    opacity: 0.6;
    cursor: pointer;
}

.hs5-card--inactive:hover[b-7gimchsr73] {
    opacity: 0.85;
    background: var(--neutral-fill-stealth-hover);
}

/* ====== AVATAR CIRCLES ====== */
.hs5-card-avatar[b-7gimchsr73] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: var(--neutral-fill-secondary-rest);
}

/* Active avatar: accent ring for visibility */
.hs5-card--active .hs5-card-avatar[b-7gimchsr73],
.hs5-card--rel-active .hs5-card-avatar[b-7gimchsr73] {
    background: color-mix(in srgb, var(--accent-fill-rest) 15%, var(--neutral-fill-secondary-rest));
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent-fill-rest) 30%, transparent);
}

/* Person avatar circles stay on the neutral accent (same as relationship /
   child icons); the person's scenario colour lives in the slim bar next to
   the name (.hs5-person-bar) instead. */

/* Name row: slim person-colour bar next to the name */
.hs5-name-row[b-7gimchsr73] {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.hs5-person-bar[b-7gimchsr73] {
    width: 4px;
    height: 16px;
    border-radius: 2px;
    background: var(--hs5-person-color, var(--accent-fill-rest));
    flex-shrink: 0;
}

.hs5-card-avatar--small[b-7gimchsr73] {
    width: 52px;
    height: 52px;
}

.hs5-card-avatar--medium[b-7gimchsr73] {
    width: 68px;
    height: 68px;
}

.hs5-card-avatar--empty[b-7gimchsr73] {
    background: var(--neutral-fill-secondary-rest);
}

/* ====== RELATIONSHIP WRAPPER ====== */
.hs5-rel-wrapper[b-7gimchsr73] {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    align-items: center;
    gap: 0;
}

/* Connector lines — neutral at rest */
.hs5-rel-line[b-7gimchsr73] {
    flex: 1;
    height: 1px;
    background: transparent;
    min-width: 8px;
}

.hs5-rel-line--active[b-7gimchsr73] {
    height: 3px;
    background: var(--accent-fill-rest);
}

/* Dotted line when divorce/separation is defined */
.hs5-rel-line--broken[b-7gimchsr73] {
    height: 3px;
    background: none;
    border-top: 3px dashed var(--accent-fill-rest);
}

/* Broken heart badge on relationship card */
.hs5-broken-heart[b-7gimchsr73] {
    position: absolute;
    top: 6px;
    left: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--neutral-fill-rest);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
    z-index: 2;
}

/* Disability badge on person cards */
.hs5-disability-badge[b-7gimchsr73] {
    position: absolute;
    top: 6px;
    left: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--neutral-fill-rest);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
    z-index: 2;
}

/* Relationship chip */
.hs5-card--rel[b-7gimchsr73] {
    flex-shrink: 0;
    padding: 22px 14px 26px;
    border-radius: calc(var(--layer-corner-radius) * 1px);
    border: none;
    background: var(--neutral-fill-stealth-rest);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 58%;
    box-shadow: none;
    transition: background 0.2s ease, box-shadow 0.2s ease;
}

.hs5-card--rel-inactive[b-7gimchsr73] {
    opacity: 0.55;
    cursor: pointer;
}

.hs5-card--rel-inactive:hover[b-7gimchsr73] {
    opacity: 0.8;
    background: var(--neutral-fill-stealth-hover);
}

.hs5-card--rel-active[b-7gimchsr73] {
    background: var(--neutral-fill-rest);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    cursor: pointer;
}

.hs5-card--rel-active:hover[b-7gimchsr73] {
    background: var(--neutral-fill-hover);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.hs5-card--married[b-7gimchsr73] {
    background: var(--neutral-fill-rest);
}

/* ====== NAVIGATION HINT ====== */
.hs5-nav-hint[b-7gimchsr73] {
    position: absolute;
    bottom: 7px;
    right: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--neutral-fill-stealth-rest);
    opacity: 0;
    cursor: pointer;
    transition: opacity 0.2s ease, background 0.2s ease;
    z-index: 1;
}

.hs5-card:hover .hs5-nav-hint[b-7gimchsr73],
.hs5-children-box:hover .hs5-nav-hint[b-7gimchsr73] {
    opacity: 1;
}

.hs5-nav-hint:hover[b-7gimchsr73] {
    background: var(--neutral-fill-stealth-hover);
}

/* Close badges mirror NavigationChevron visually; wrappers only control placement. */
.hs5-close-hint[b-7gimchsr73] {
    position: absolute;
    top: 7px;
    right: 8px;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 2;
}

.hs5-card:hover > .hs5-close-hint[b-7gimchsr73],
.hs5-close-hint:focus-within[b-7gimchsr73] {
    opacity: 1;
}

/* ====== CHILDREN BLOCKS ====== */
.hs5-children[b-7gimchsr73] {
    grid-row: 2;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    margin-top: 20px;
}

.hs5-children--p1[b-7gimchsr73]     { grid-column: 1; padding-right: 10px; }
.hs5-children--shared[b-7gimchsr73] { grid-column: 2; padding: 0 10px; }
.hs5-children--p2[b-7gimchsr73]     { grid-column: 3; padding-left: 10px; }

.hs5-children--disabled[b-7gimchsr73] {
    opacity: 0.45;
    pointer-events: none;
}

/* --- Lane toggle: slim label bar + small triangle tip (ported from lwr).
   A native <button>; purely reveals/collapses an EMPTY lane — never mutates data. --- */
.hs5-lane-toggle[b-7gimchsr73] {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    user-select: none;
    cursor: pointer;
    border: none;
    background: transparent;
    padding: 0;
    font: inherit;
}

.hs5-lane-toggle-text[b-7gimchsr73] {
    display: block;
    padding: 6px 8px;
    text-align: center;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.03em;
    color: var(--neutral-foreground-hint);
    background: var(--neutral-fill-stealth-rest);
    border-radius: calc(var(--layer-corner-radius) * 1px);
    transition: background 0.15s ease, color 0.15s ease;
}

/* Triangle tip: small pointer flush under the rectangle — keeps the genealogy
   "descendants hang below" cue without being the button itself. */
.hs5-lane-toggle-tip[b-7gimchsr73] {
    width: 16px;
    height: 8px;
    margin: 0 auto;
    background: var(--neutral-fill-stealth-rest);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    transition: background 0.15s ease;
}

.hs5-lane-toggle:hover .hs5-lane-toggle-text[b-7gimchsr73],
.hs5-lane-toggle:hover .hs5-lane-toggle-tip[b-7gimchsr73] {
    background: var(--neutral-fill-stealth-hover);
}

.hs5-lane-toggle--on .hs5-lane-toggle-text[b-7gimchsr73],
.hs5-lane-toggle--on .hs5-lane-toggle-tip[b-7gimchsr73] {
    background: color-mix(in srgb, var(--accent-fill-rest) 15%, var(--neutral-fill-secondary-rest));
}

.hs5-lane-toggle--on .hs5-lane-toggle-text[b-7gimchsr73] {
    color: var(--accent-fill-rest);
}

.hs5-lane-toggle--on:hover .hs5-lane-toggle-text[b-7gimchsr73],
.hs5-lane-toggle--on:hover .hs5-lane-toggle-tip[b-7gimchsr73] {
    background: color-mix(in srgb, var(--accent-fill-rest) 22%, var(--neutral-fill-secondary-rest));
}

/* --- Children box: card surface matching the person cards (.hs5-card--active) —
   the lane bar stays slim above; the open box carries the shared chip surface. --- */
.hs5-children-box[b-7gimchsr73] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 14px 8px 10px;
    border-radius: calc(var(--layer-corner-radius) * 1px);
    background: var(--neutral-fill-rest);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    position: relative;
    margin-top: 12px;
}

.hs5-children-grid[b-7gimchsr73] {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    justify-content: center;
    width: 100%;
    align-content: flex-start;
}

/* ====== CHILD MINI-CARDS ====== */
.hs5-child[b-7gimchsr73] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 11px 7px 8px;
    border-radius: calc(var(--layer-corner-radius) * 1px);
    border: none;
    background: transparent;
    width: 78px;
    min-height: 82px;
    position: relative;
    cursor: default;
    box-shadow: none;
    transition: background 0.15s ease, box-shadow 0.15s ease;
}

button.hs5-child:hover[b-7gimchsr73],
.hs5-child.nav-chevron-host:hover[b-7gimchsr73] {
    background: var(--neutral-fill-stealth-hover);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.hs5-child-icon[b-7gimchsr73] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent-fill-rest) 15%, var(--neutral-fill-secondary-rest));
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent-fill-rest) 25%, transparent);
}

.hs5-child-name[b-7gimchsr73] {
    font-size: 0.68rem;
    color: var(--neutral-foreground-rest);
    white-space: nowrap;
}

.hs5-child-close[b-7gimchsr73] {
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 2;
}

/* --- Add pill: compact dashed button with visible caption (lwr AddPersonCard idiom) --- */
.hs5-child-add[b-7gimchsr73] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    align-self: center;
    padding: 6px 12px;
    border: 1px dashed var(--neutral-stroke-rest);
    border-radius: calc(var(--layer-corner-radius) * 1px);
    background: transparent;
    opacity: 0.7;
    cursor: pointer;
    font: inherit;
    transition: opacity 0.15s ease;
}

.hs5-child-add:hover[b-7gimchsr73] {
    opacity: 1;
}

.hs5-add-label[b-7gimchsr73] {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--accent-fill-rest);
    white-space: nowrap;
}

/* Wizard mode renders the child card as a native button (click removes) —
   neutralize the UA button chrome and make the pointer honest. */
button.hs5-child[b-7gimchsr73] {
    cursor: pointer;
    font: inherit;
}

/* ====== NAVIGATION MESSAGE ====== */
.hs5-nav-message[b-7gimchsr73] {
    grid-column: 1 / -1;
    grid-row: 3;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: calc(var(--layer-corner-radius) * 1px);
    border: 1px solid var(--neutral-stroke-rest);
    background: var(--neutral-fill-stealth-rest);
    font-size: 0.78rem;
    color: var(--neutral-foreground-rest);
    cursor: pointer;
    margin-top: 8px;
}

/* ====== RESPONSIVE ====== */
@media (max-width: 639px) {
    .hs5[b-7gimchsr73] {
        display: flex;
        flex-direction: column;
        gap: 0;
        padding: 12px 6px;
    }

    .hs5-rel-wrapper[b-7gimchsr73] {
        flex-direction: column;
        align-items: stretch;
    }

    .hs5-rel-line[b-7gimchsr73] { display: none; }

    .hs5-card--rel[b-7gimchsr73] {
        width: auto;
        flex-direction: row;
        gap: 12px;
        padding: 14px 16px;
    }

    .hs5-card-avatar--small[b-7gimchsr73] {
        width: 40px;
        height: 40px;
        flex-shrink: 0;
    }

    .hs5-card[b-7gimchsr73] {
        flex-direction: row;
        gap: 12px;
        padding: 14px 16px;
    }

    .hs5-card-avatar[b-7gimchsr73] {
        width: 48px;
        height: 48px;
        flex-shrink: 0;
    }

    .hs5-children--p1[b-7gimchsr73],
    .hs5-children--shared[b-7gimchsr73],
    .hs5-children--p2[b-7gimchsr73] {
        padding: 0;
        margin-top: 12px;
    }

    .hs5-children-box[b-7gimchsr73] {
        margin-top: 12px;
    }
}

/* ==========================================================================
   Title row with embedded swatch picker (household accent color).
   The swatch picker itself is styled globally in site.css (.w4l-swatch-row).
   ========================================================================== */
.hs5-title-row[b-7gimchsr73] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    flex-wrap: wrap;
}

.hs5-title-main[b-7gimchsr73] {
    flex: 1;
    min-width: 0;
}
/* /Components/Application/Forms/IntercantonalAllocationCard.razor.rz.scp.css */
/* Ausscheidungsspiegel — eine Spalte pro Kanton. Fläche/Padding kommen vom Host
   (YearTaxDeclarationCard-Sektion); hier nur Tabellen-Styling analog .ytd-table. */
.ika-block[b-uek6l8ih5i] {
    min-width: 0;
}

/* Sektionstitel im Rhythmus der Nachbar-Sektionen (.ytd-section-title). */
.ika-section-title[b-uek6l8ih5i] {
    font-size: var(--type-ramp-minus-1-font-size);
    font-weight: 600;
    color: var(--neutral-foreground-hint);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 14px 0 4px;
}

/* Kantonswappen im Spaltenkopf, auf Zeilenhöhe des Kanton-Kürzels. */
.ika-flag[b-uek6l8ih5i] {
    width: 16px;
    height: 16px;
    object-fit: contain;
    border-radius: 2px;
    margin-right: 6px;
    vertical-align: -0.18em;
}

.ika-table[b-uek6l8ih5i] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--type-ramp-base-font-size);
}

.ika-table td[b-uek6l8ih5i],
.ika-table th[b-uek6l8ih5i] {
    padding: 5px 0;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
}

.ika-table th[b-uek6l8ih5i] {
    font-weight: 600;
    text-align: left;
    vertical-align: bottom;
}

.ika-num[b-uek6l8ih5i] {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    padding-left: 20px;
}

.ika-canton[b-uek6l8ih5i] {
    display: block;
}

.ika-commune[b-uek6l8ih5i] {
    display: block;
    font-size: var(--type-ramp-minus-1-font-size);
    font-weight: 400;
    color: var(--neutral-foreground-hint);
}

.ika-total-col[b-uek6l8ih5i] {
    color: var(--neutral-foreground-hint);
    border-left: 1px solid var(--neutral-stroke-divider-rest);
    padding-left: 20px;
}

/* Sektions-Zwischentitel innerhalb der Tabelle (Wealth / Income / Tax). */
.ika-group td[b-uek6l8ih5i] {
    font-size: var(--type-ramp-minus-1-font-size);
    font-weight: 600;
    color: var(--neutral-foreground-hint);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding-top: 12px;
    border-bottom: none;
}

.ika-info td[b-uek6l8ih5i] {
    color: var(--neutral-foreground-hint);
    border-bottom: none;
}

.ika-subtotal td[b-uek6l8ih5i] {
    font-weight: 600;
}

.ika-total td[b-uek6l8ih5i] {
    font-weight: 600;
    border-bottom: none;
    border-top: 2px solid var(--neutral-stroke-strong-rest);
}
/* /Components/Application/Forms/ParticipationForm.razor.rz.scp.css */
/* Panels are CSS-toggled, never @if (FAST leak rule; pattern HomeForm). */
.pf-panel[b-tlo0hhvg55] {
    width: 100%;
    box-sizing: border-box;
    padding-top: 8px;
}

.pf-panel--hidden[b-tlo0hhvg55] {
    display: none;
}

/* Native icon button (add row / delete row): no FAST element per row; >= 24 px target, visible focus ring. */
.pf-icon-btn[b-tlo0hhvg55] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    min-height: 28px;
    padding: 0;
    border: none;
    border-radius: 4px;
    background: none;
    color: var(--neutral-foreground-rest);
    cursor: pointer;
}

.pf-icon-btn:hover[b-tlo0hhvg55] {
    background: var(--neutral-fill-stealth-hover);
}

.pf-icon-btn:focus-visible[b-tlo0hhvg55] {
    outline: 2px solid var(--accent-fill-rest);
    outline-offset: 1px;
}

/* The one durable text of step 3 (liquidation): hint tone, no extra icon. */
.pf-hint[b-tlo0hhvg55] {
    margin: 0.5rem 0 0 0;
    font-size: 0.78rem;
    color: var(--neutral-foreground-rest);
}

/* Guidance rows (Richtwert): a small title over the shared key/value rows. */
.pf-hint-rows[b-tlo0hhvg55] {
    margin-top: 1rem;
}

.pf-hint-title[b-tlo0hhvg55] {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--neutral-foreground-hint);
    padding-bottom: 0.25rem;
}

/* Field rows stay aligned when a long label wraps in a narrow column ("capital contribution reserves (your share)" at
   panel widths around 550-600 px): the field sits at the bottom of its grid cell, so both inputs of the row line up. */
.pf-panel[b-tlo0hhvg55]  .pf-field-bottom {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
/* /Components/Application/Forms/PensionBuyInForm.razor.rz.scp.css */
/* PensionBuyInForm — KPI cards + bar-per-year editor + selected-year panel. */

/* ── KPI result cards (global .w4l-kpi / .w4l-kpi-card) ──────────────
   Fixed min-height so the row height is invariant across instant-estimate
   updates (— ↔ value, "≈" prefix). Without this the cards reflow while a bar
   handle is being dragged and the editor below shifts out from under the cursor. */
.bi-kpi[b-tkf5cr3uuc]  .w4l-kpi-card {
    /* Label + value + a reserved sub line (the first and third tile fill it, «davon …» / refund). */
    min-height: 98px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Band «Über alle Jahre» below the year panel: stand tiles + result KPIs as ONE grid of equally sized tiles. A hidden stand tile
   (display:none) takes no cell, so the rest share the row evenly; the sub lines are reserved by the tile height. */
.bi-band[b-tkf5cr3uuc] {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.bi-band-title[b-tkf5cr3uuc] {
    font-size: 0.8rem;
    font-weight: 600;
}

.bi-band-tiles.w4l-kpi[b-tkf5cr3uuc] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
    gap: 8px;
    width: 100%;
}

.bi-band-tiles[b-tkf5cr3uuc]  .w4l-kpi-card {
    min-width: 0;
    min-height: 104px;
}

/* The 3a share line of the total tile (merge gate S4): always two reserved lines while the person has a 3a account (hidden or shown), so a
   transfer amount that wraps in a narrow tile never changes the band height. */
.bi-kpi-sub-3a[b-tkf5cr3uuc] {
    line-height: 16px;
    min-height: 32px;
}

/* Line swatch before a stand label = the legend of the matching staircase line in the chart (no legend row). */
.bi-key[b-tkf5cr3uuc] {
    display: inline-block;
    width: 18px;
    height: 0;
    vertical-align: middle;
    margin-right: 6px;
}

.bi-key--wef[b-tkf5cr3uuc] { border-top: 2px dashed var(--w4l-info); }
.bi-key--gap[b-tkf5cr3uuc] { border-top: 2px dotted var(--w4l-divorce-gap); }

/* The WEF rows under the stand tiles: tight list, the title is a part heading. */
.bi-wef-group[b-tkf5cr3uuc] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
}

/* ── Instant-estimate "≈" marker ─────────────────────────────────────
   Space is ALWAYS reserved: when the estimate settles to the exact engine value,
   only the marker fades out — the number never shifts horizontally. */
.bi-approx[b-tkf5cr3uuc] {
    opacity: 1;
    transition: opacity 0.25s ease;
}

.bi-approx--settled[b-tkf5cr3uuc] {
    opacity: 0;
}

/* ── Selected-year panel — the canonical nested edit panel (.w4l-edit-panel-nested, global) ──
   ALWAYS occupies its full space: a year is always selected, the row set is fixed (values flip
   to «—») and the findings area reserves two lines — so selecting a year or dragging a bar never
   changes the page height and the editor above never shifts under the pointer (a height change
   with the page scrolled to the bottom scroll-clamps the chart away mid-drag). */
.bi-sel[b-tkf5cr3uuc] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* Full available width: flex item in the parent's vertical FluentStack
       (align-items: start) — without a definite width it shrinks to fit. */
    width: 100%;
    overflow-anchor: none;
}

/* Two calculations side by side, equal halves: amount/waterfall (left) +
   return breakdown (right); they wrap below each other only on narrow screens. */
.bi-sel-columns[b-tkf5cr3uuc] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 16px 32px;
    width: 100%;
}

.bi-sel-left[b-tkf5cr3uuc] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1 1 300px;
    min-width: 0;
}

.bi-sel-right[b-tkf5cr3uuc] {
    flex: 1 1 300px;
    min-width: 0;
}

/* Status facts — fixed two-column grid (label | value), rows never disappear.
   Full column width so the value edge lines up with the breakdown table.
   The value track is FIXED and values never wrap: with `auto 1fr` the label track grabbed its max-content width at a narrow
   panel and left the value little room, so a value growing from «≈ CHF 0» to «≈ CHF 20'492» wrapped onto a second line and the
   panel grew by one line height (seen at 390px as 821 → 841px). Label wrapping now depends on the constant label text only. */
.bi-facts-grid[b-tkf5cr3uuc] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 7.5rem;
    gap: 2px 16px;
    font-size: 0.8rem;
    color: var(--neutral-foreground-rest, var(--w4l-chrome-axis-text));
}

.bi-facts-value[b-tkf5cr3uuc] {
    white-space: nowrap;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Findings of the selected year: three FindingLines are reserved so the panel never changes height while a bar is dragged.
   One line = padding 2 × 6px + 1.4 × 0.875rem per text line (≈ 2.0rem for one line, 3.2rem for a wrapped two-line text);
   the global margin (0.5rem) is zeroed here and replaced by the 6px gap. 3 lines × 2.0rem + 2 gaps ≈ 6.8rem, so 7.5rem
   leaves room for one wrapped text. Long texts do not wrap on purpose where the width allows (max-width: none). */
.bi-findings[b-tkf5cr3uuc] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 7.5rem;
}

/* At 390 px three findings of two wrapped lines each need about 8.7rem (the longer «fills the gap, then repays» and
   «of which … not booked» texts): reserve 9.5rem there so the panel keeps its height in every year. */
@media (max-width: 640px) {
    .bi-findings[b-tkf5cr3uuc] {
        min-height: 9.5rem;
    }
}

.bi-findings[b-tkf5cr3uuc]  .finding-line {
    margin: 0;
    max-width: none;
}

/* The title wrapper carries the legal detail as a hover title and must not take part in the layout. */
.bi-finding[b-tkf5cr3uuc] {
    display: contents;
}

/* ── Return breakdown ──────────────────────────────────────────────── */
.bi-breakdown-title[b-tkf5cr3uuc] {
    font-weight: 600;
    font-size: 0.85rem;
    margin-bottom: 4px;
}

/* Fixed layout + fixed value column: the label column never narrows when a value is wider, so sub lines wrap alike in a filled and
   an empty year (measured: 44 px empty vs 64 px filled with auto layout). */
.bi-breakdown[b-tkf5cr3uuc] {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
}

.bi-breakdown td[b-tkf5cr3uuc] {
    padding: 2px 0;
}

/* A long label («Einkommenssteuerersparnis», 158 px) must break inside a narrow label column (124 px at 400 px), never run into
   the value column; <html lang> is set, so hyphens follow the culture. */
.bi-breakdown td:first-child[b-tkf5cr3uuc] {
    overflow-wrap: anywhere;
    hyphens: auto;
}

.bi-breakdown td:last-child[b-tkf5cr3uuc] {
    width: 9.5rem;
    white-space: nowrap;
    text-align: right;
}

.bi-breakdown-total td[b-tkf5cr3uuc] {
    border-top: 1px solid var(--neutral-stroke-rest, rgba(0, 0, 0, 0.1));
    padding-top: 4px;
    font-weight: 700;
}

.bi-muted[b-tkf5cr3uuc] {
    font-size: 0.78rem;
    opacity: 0.7;
    padding: 4px 0;
}

/* ── Selected-year waterfall split (repayment / deductible buy-in) ──── */
.bi-split[b-tkf5cr3uuc] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
}

.bi-split-row[b-tkf5cr3uuc] {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Fixed-row-set principle at 390 px: a long label («WEF repayment · not deductible») wraps to two lines once its amount grows
   (CHF 15'000), which made the panel taller in that year only. Every split row therefore reserves two lines on a phone,
   so the height does not depend on the year. */
@media (max-width: 640px) {
    .bi-split-row[b-tkf5cr3uuc] {
        min-height: 2.5rem; /* two lines of the 20px line height: the row is only ~266 px wide at 390 px */
    }
}

.bi-split-row .bi-split-amount[b-tkf5cr3uuc] {
    margin-left: auto;
    flex: none;
    white-space: nowrap;
}

/* «Booked» sum row under the three waterfall segments. */
.bi-split-row--total[b-tkf5cr3uuc] {
    border-top: 1px solid var(--neutral-stroke-divider-rest, rgba(0, 0, 0, 0.1));
    margin-top: 2px;
    padding-top: 3px;
    font-weight: 600;
}

.bi-dot[b-tkf5cr3uuc] {
    width: 9px;
    height: 9px;
    border-radius: 2px;
    flex: 0 0 auto;
}

.bi-dot--repayment[b-tkf5cr3uuc] { background: var(--w4l-info); }
.bi-dot--deductible[b-tkf5cr3uuc] { background: var(--w4l-positive); }
/* The bar editor draws the rebuy after divorce in the colour of the gap line (the segment at the bottom of the bar). */
.bi-dot--rebuy[b-tkf5cr3uuc] { background: var(--w4l-divorce-gap); }
.bi-dot--blocked[b-tkf5cr3uuc] { background: var(--w4l-warning); }
/* Transfer from pillar 3a: the hatched «3a» segment of the chart in miniature (pattern, not only colour). */
.bi-dot--thirdpillar[b-tkf5cr3uuc] {
    background: repeating-linear-gradient(135deg, var(--w4l-pillar3a) 0 2px, color-mix(in srgb, var(--w4l-pillar3a) 35%, transparent) 2px 4px);
    border: 1px solid var(--w4l-pillar3a);
    box-sizing: border-box;
}
.bi-dot--none[b-tkf5cr3uuc] { background: transparent; }
/* Not booked: the same neutral dashed box the bar editor draws (the signal is the pattern, not a colour). */
.bi-dot--notbooked[b-tkf5cr3uuc] {
    background: transparent;
    border: 1px dashed var(--neutral-foreground-hint);
    box-sizing: border-box;
}

/* Caption of the split: «split of the payment · tool assumption» with its help badge right behind. */
.bi-split-title[b-tkf5cr3uuc] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8rem;
    font-weight: 600;
}

.bi-wef-link[b-tkf5cr3uuc] { margin-inline-start: 0.4em; }

/* The 3a sentence under the yield breakdown: small, may wrap to two lines on a narrow column. */
.bi-yield-note[b-tkf5cr3uuc] {
    margin-top: 6px;
    font-size: 0.8rem;
}

/* ── «Ends as» block (D2): mix bar + two fixed rows; capital/pension colours are the chart tokens ─────────────────── */
.bi-ends[b-tkf5cr3uuc] { display: flex; flex-direction: column; gap: 4px; font-size: 0.8rem; }

.bi-ends-bar[b-tkf5cr3uuc] {
    display: flex;
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
    background: var(--neutral-fill-secondary-rest, rgba(0, 0, 0, 0.06));
}

.bi-ends-cap[b-tkf5cr3uuc] { background: var(--w4l-exit-capital); }
.bi-ends-ann[b-tkf5cr3uuc] {
    /* Non-colour cue (WCAG 1.4.1), as the annuity chip in the chart. */
    background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--w4l-exit-ink) 35%, transparent) 0 1px, transparent 1px 5px), var(--w4l-exit-annuity);
}

.bi-ends-row[b-tkf5cr3uuc] { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; column-gap: 8px; align-items: start; }
.bi-ends-swatch[b-tkf5cr3uuc] { display: flex; flex-direction: column; justify-content: flex-end; width: 12px; height: 3.1rem; border-radius: 2px; overflow: hidden; background: var(--neutral-fill-secondary-rest, rgba(0, 0, 0, 0.06)); }
.bi-ends-swatch-cap[b-tkf5cr3uuc] { display: block; background: var(--w4l-exit-capital); }
.bi-ends-swatch-ann[b-tkf5cr3uuc] { display: block; background: var(--w4l-exit-annuity); }
.bi-ends-text[b-tkf5cr3uuc] { display: flex; flex-direction: column; min-width: 0; }
.bi-ends-why[b-tkf5cr3uuc] { display: block; font-size: 0.75rem; opacity: 0.8; }
.bi-ends-pc[b-tkf5cr3uuc] { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; }
.bi-ends-hint[b-tkf5cr3uuc] { padding: 0; }

/* Breakdown groups and sub lines. */
.bi-breakdown .bi-breakdown-group td[b-tkf5cr3uuc] { padding-top: 8px; font-weight: 600; }
.bi-breakdown .bi-breakdown-key td[b-tkf5cr3uuc] { font-weight: 600; border-top: 1px solid var(--neutral-stroke-divider-rest, rgba(0, 0, 0, 0.1)); }
.bi-sub[b-tkf5cr3uuc] { display: block; font-size: 0.72rem; font-weight: 400; opacity: 0.7; min-height: 1.35em; }
.bi-breakdown td[b-tkf5cr3uuc] { vertical-align: top; }
/* The pension IRR triple reserves two lines whether filled or a dash, so the row never changes height with the year. */
.bi-irr[b-tkf5cr3uuc] { display: block; min-height: 2.6em; white-space: normal; }
.bi-sw[b-tkf5cr3uuc] { display: inline-block; width: 14px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: baseline; }
.bi-sw--capital[b-tkf5cr3uuc] { background: var(--w4l-exit-capital); }
.bi-sw--annuity[b-tkf5cr3uuc] {
    background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--w4l-exit-ink) 35%, transparent) 0 1px, transparent 1px 5px), var(--w4l-exit-annuity);
}

/* Stacking (AK 9): every possible text of a cell lies hidden in the SAME grid cell as the visible one, so the cell takes the size of
   its largest candidate at the current width and culture — the «Endet als» title, main line, why-line and share, and the ONE note
   slot. Replaces the measured min-heights and width bands of rounds 2–3, which failed between their breakpoints. */
.bi-stack[b-tkf5cr3uuc] { display: grid; }
.bi-stack > span[b-tkf5cr3uuc] { grid-area: 1 / 1; }
.bi-stack-reserve[b-tkf5cr3uuc] { visibility: hidden; }

.bi-note[b-tkf5cr3uuc] {
    margin-top: 8px;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 0.78rem;
    line-height: 1.35;
    background: var(--neutral-fill-secondary-rest, rgba(0, 0, 0, 0.05));
}
/* /Components/Application/Forms/PensionCertificateCapitalGroup.razor.rz.scp.css */
.pcg-label[b-cjnw9obvvh] {
    display: block;
    font-size: 12px;
    color: var(--neutral-foreground-rest);
    margin-bottom: 4px;
}

.pcg-fill[b-cjnw9obvvh] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 12px;
}

/* A label that wraps (e.g. «davon BVG-Altersguthaben» beside a docked preview) must not push its input below its
   siblings: the inputs share one baseline at the bottom of the row. */
.pcg-fill[b-cjnw9obvvh]  .pcg-fields .fluent-grid {
    align-items: flex-end;
}

.pcg-kpis[b-cjnw9obvvh] {
    margin-top: 4px;
}

.pcg-wef-text[b-cjnw9obvvh] {
    margin: 7px 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0 .3em;
    align-items: baseline;
}

.pcg-hint[b-cjnw9obvvh] {
    margin: 0;
    font-size: var(--type-ramp-minus-1-font-size);
    color: var(--neutral-foreground-hint);
}

/* Divorce-gap row (anchor pf-divorce-gap): a full-width block holding its own nested grid, the finding line and the link.
   Same bottom-aligned inputs as the neighbouring certificate rows; fields stack below 640 px (AdaptiveRendering). */
.pcg-gap[b-cjnw9obvvh] {
    display: block;
    width: 100%;
}

/* Balance field + help badge on one baseline-aligned row; the field takes the width, the badge keeps its size
   (without this the badge drops under the field). min-width:0 lets the field shrink at 390 px. */
.pcg-gap-field[b-cjnw9obvvh] {
    display: flex;
    align-items: flex-end;
    gap: 6px;
}

.pcg-gap-field[b-cjnw9obvvh]  .ym-field {
    flex: 1 1 auto;
    min-width: 0;
}

.pcg-gap-field[b-cjnw9obvvh]  .w4l-help-badge {
    flex: 0 0 auto;
    margin-bottom: 8px;
}
/* /Components/Application/Forms/PensionCertificateSection.razor.rz.scp.css */
.pcs[b-622ray5kia] { display: flex; flex-direction: column; gap: 32px; }
/* State head (memo v2 §1): an island on the panel, not a card and not a second panel (C1/C5). */
.pcs-head[b-622ray5kia] { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px;
    background: var(--neutral-layer-1); border: 1px solid var(--neutral-stroke-divider-rest);
    border-left: 4px solid var(--accent-fill-rest); border-radius: 6px; }
.pcs-head__icon[b-622ray5kia] { display: inline-flex; flex: none; }
.pcs-head__text[b-622ray5kia] { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.pcs-head__title[b-622ray5kia] { margin: 0; font-size: 14px; font-weight: 600; color: var(--neutral-foreground-rest); }
.pcs-head__meta[b-622ray5kia] { margin: 0; font-size: 12px; color: var(--neutral-foreground-hint); }
.pcs-group[b-622ray5kia] { width: 100%; box-sizing: border-box; container: pcs-group / inline-size; }
.pcs-death-capital[b-622ray5kia] { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; }
.pcs-help-slot[b-622ray5kia] { display: flex; align-items: center; min-height: 32px; }
.pcs-check[b-622ray5kia] { display: flex; align-items: center; gap: 8px; font-size: 14px; min-height: 32px; }
.pcs-check__label[b-622ray5kia] { display: flex; align-items: center; gap: 8px; cursor: pointer; }
/* Death-capital field + help badge: the field takes the column, the badge sits beside it. */
.pcs-dc-row[b-622ray5kia] { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: end; }
.pcs-label[b-622ray5kia] { display: block; font-size: 0.875rem; font-weight: 600; margin-bottom: 4px; }
.pcs-risk-groups[b-622ray5kia] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; margin-top: 12px; }
.pcs-risk-group[b-622ray5kia] { container: pcs-risk / inline-size; }
.pcs-risk-group--rule[b-622ray5kia] { border-left: 1px solid var(--neutral-stroke-divider-rest); padding-left: 32px; }
.pcs-group-title[b-622ray5kia] { display: flex; gap: 8px; align-items: center; font-size: var(--type-ramp-plus-1-font-size); font-weight: 700; margin-bottom: 8px; }
.pcs-pair[b-622ray5kia] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.pcs-mute[b-622ray5kia], .pcs-hint[b-622ray5kia] { color: var(--neutral-foreground-hint); }
.pcs-hint[b-622ray5kia] { display: block; font-size: var(--type-ramp-minus-1-font-size); }
.pcs-half[b-622ray5kia] { width: 50%; min-width: 12rem; }
/* Container queries, not viewport: the side dock narrows the column without changing the viewport. */
@container pcs-group (max-width: 40rem) {
    .pcs-risk-groups[b-622ray5kia] { grid-template-columns: 1fr; row-gap: 20px; }
    .pcs-risk-group--rule[b-622ray5kia] { border-left: 0; padding-left: 0; }
}
@container pcs-risk (max-width: 30rem) {
    .pcs-pair[b-622ray5kia] { grid-template-columns: 1fr; }
}
/* The pills live in a half-width grid cell: the wrap rule reacts to that cell, not to the whole group. */
.pcs-group[b-622ray5kia]  .pcs-pillcell { container: pcs-pillcell / inline-size; }
@container pcs-pillcell (max-width: 32rem) {
    .pcs-group[b-622ray5kia]  .w4l-pillswitch { display: flex; flex-wrap: wrap; width: 100%; border-radius: 16px; }
    .pcs-group[b-622ray5kia]  .w4l-pillswitch__seg { flex: 1 1 auto; justify-content: center; }
}
.pcs-hint--below[b-622ray5kia] { margin-top: 4px; }
/* The risk-salary one-liner sits at the pill row's height and stays on one line where the width allows. */
.pcs-group[b-622ray5kia]  .w4l-rows .w4l-row--kv { flex-wrap: nowrap; }
.pcs-group[b-622ray5kia]  .w4l-rows .w4l-row--kv > span:first-child { white-space: nowrap; }
/* Rows with an "(estimated)" mark may wrap at narrow widths (390 px): the value block drops below and stays right-aligned. */
.pcs-group[b-622ray5kia]  .w4l-rows .w4l-row--kv.pcs-row--wrap { flex-wrap: wrap; column-gap: 12px; row-gap: 2px; }
.pcs-group[b-622ray5kia]  .w4l-rows .w4l-row--kv.pcs-row--wrap > span:first-child { white-space: normal; min-width: 0; }
.pcs-group[b-622ray5kia]  .w4l-rows .w4l-row--kv.pcs-row--wrap > span:last-child { margin-left: auto; text-align: right; white-space: nowrap; }
/* /Components/Application/Forms/PensionFundContributionsForm.razor.rz.scp.css */
.contrib-legend[b-mjbp6j3f2q] {
    display: flex;
    gap: 16px;
    align-items: center;
    flex-wrap: wrap;
    font-size: 0.78rem;
    color: var(--neutral-foreground-hint);
}
.contrib-legend span[b-mjbp6j3f2q] { display: flex; align-items: center; gap: 6px; }
.contrib-sw[b-mjbp6j3f2q] { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.contrib-sw--er[b-mjbp6j3f2q] { background: var(--w4l-contrib-employer); }
.contrib-sw--ee[b-mjbp6j3f2q] { background: var(--w4l-contrib-employee); }

.contrib-grid[b-mjbp6j3f2q] { display: flex; flex-direction: column; width: 100%; }

.contrib-row[b-mjbp6j3f2q] {
    display: grid;
    grid-template-columns: 68px minmax(140px, 1fr) 92px 92px 56px 34px;
    gap: 12px;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
}

.contrib-row--head[b-mjbp6j3f2q] {
    padding: 2px 0 6px;
    border-bottom: 1px solid var(--neutral-stroke-rest);
}

/* Every grid cell carries a .contrib-a-* class (own markup, so scoped CSS reaches it — a rule on the child component's root via
   :nth-child did not: the rate bar stayed in the row and everything was squeezed). */
.contrib-a-bar[b-mjbp6j3f2q], .contrib-a-age[b-mjbp6j3f2q], .contrib-a-er[b-mjbp6j3f2q] { min-width: 0; }

/* sm: six columns (~540px min) do not fit. Two rows instead of an overfull one, so the rate inputs keep ~70px and show
   their decimals: row 1 = age | bar | delete, row 2 = total | employer | employee. The head row uses the same areas. */
@media (max-width: 639px) {
    .contrib-row[b-mjbp6j3f2q] {
        grid-template-columns: 68px 1fr 1fr 34px;
        grid-template-areas:
            "age bar bar del"
            "tot er ee .";
        gap: 8px;
    }

    .contrib-a-age[b-mjbp6j3f2q] { grid-area: age; }
    .contrib-a-bar[b-mjbp6j3f2q] { grid-area: bar; }
    .contrib-a-er[b-mjbp6j3f2q] { grid-area: er; }
    .contrib-a-ee[b-mjbp6j3f2q] { grid-area: ee; }
    .contrib-a-tot[b-mjbp6j3f2q] { grid-area: tot; }
    .contrib-a-del[b-mjbp6j3f2q] { grid-area: del; }

    .contrib-row--head .contrib-hd--num.contrib-a-er[b-mjbp6j3f2q],
    .contrib-row--head .contrib-hd--num.contrib-a-ee[b-mjbp6j3f2q] { text-align: left; }
}

.contrib-hd[b-mjbp6j3f2q] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--neutral-foreground-hint);
}
.contrib-hd--num[b-mjbp6j3f2q] { text-align: right; }

/* Shared scale axis aligned to the bar column */
.contrib-axis[b-mjbp6j3f2q] { position: relative; height: 14px; }
.contrib-axis-lbl[b-mjbp6j3f2q] {
    position: absolute;
    bottom: 0;
    transform: translateX(-50%);
    font-size: 0.72rem;
    color: var(--neutral-foreground-hint);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    line-height: 1;
}
.contrib-axis-lbl--start[b-mjbp6j3f2q] { transform: none; }
.contrib-axis-lbl--end[b-mjbp6j3f2q] { transform: translateX(-100%); }

.contrib-total[b-mjbp6j3f2q] {
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--neutral-foreground-rest);
    font-size: 0.85rem;
}

.contrib-del[b-mjbp6j3f2q] {
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--neutral-foreground-hint);
}
.contrib-del:hover[b-mjbp6j3f2q] { background: var(--neutral-fill-stealth-hover); }

.contrib-ee-cell[b-mjbp6j3f2q] {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

/* Reserve the icon's box at all times — toggling display would make the number field
   jitter in width whenever a row becomes (un)remarkable. */
.contrib-split-toggle[b-mjbp6j3f2q] {
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 2px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--neutral-foreground-hint);
    flex: 0 0 auto;
}
.contrib-split-toggle:hover[b-mjbp6j3f2q] { background: var(--neutral-fill-stealth-hover); }
.contrib-split-toggle--hidden[b-mjbp6j3f2q] { visibility: hidden; pointer-events: none; }

/* Neutral, not the warning colour: an employee-heavy split can be perfectly correct
   (elective plans), so this must not read as "something is broken". */
.contrib-split-panel[b-mjbp6j3f2q] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px;
    margin: 0 0 8px;
    border-radius: 6px;
    background: var(--neutral-fill-secondary-rest);
    border-left: 3px solid var(--neutral-stroke-rest);
}
.contrib-split-panel__text[b-mjbp6j3f2q] {
    font-size: 0.82rem;
    color: var(--neutral-foreground-rest);
}
.contrib-split-panel__actions[b-mjbp6j3f2q] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.w4l-visually-hidden[b-mjbp6j3f2q] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    margin: -1px;
    border: 0;
    padding: 0;
}
/* /Components/Application/Forms/PensionFundForm.razor.rz.scp.css */
.pf-chart-zone[b-3smlyru5mq] {
    width: 100%;
    padding: 8px 0 16px 0;
}

/* ── Chevron stepper ─────────────────────────────────────────────
   Three-piece composition per chevron:
     - left SVG cap (18×60) for the V-notch diagonals
     - middle div with top/bottom borders only (rectangular — no
       diagonals to alias)
     - right SVG cap (18×60) for the right-point diagonals
   Diagonals live in real SVG paths, not stretched, so the browser's
   vector rasteriser anti-aliases them cleanly at every form width.
   8 px flex gap separates the chevrons — no overlap, no z-index, no
   border-triangle pixel math.                                     */

.pf-stepper[b-3smlyru5mq] {
    display: flex;
    gap: 8px;
    width: 100%;
    margin: 8px 0 16px 0;
}

.pf-chevron[b-3smlyru5mq] {
    all: unset;
    cursor: pointer;
    box-sizing: border-box;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: stretch;
    height: 60px;
    color: var(--c-text);
    font-family: inherit;
    font-size: var(--type-ramp-plus-1-font-size);
    font-weight: 500;
    transition: color 150ms ease;
}

.pf-cap[b-3smlyru5mq] {
    flex: 0 0 18px;
    height: 60px;
    display: block;
    overflow: visible;
}

.pf-fill[b-3smlyru5mq] {
    fill: var(--c-fill);
    transition: fill 150ms ease;
}

.pf-stroke[b-3smlyru5mq] {
    fill: none;
    stroke: var(--c-border);
    stroke-width: 2;
    stroke-linejoin: miter;
    stroke-linecap: butt;
    stroke-miterlimit: 4;
    transition: stroke 150ms ease;
}

.pf-body[b-3smlyru5mq] {
    flex: 1 1 auto;
    min-width: 0;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 12px;
    background: var(--c-fill);
    border-top:    2px solid var(--c-border);
    border-bottom: 2px solid var(--c-border);
    transition: background-color 150ms ease, border-color 150ms ease;
}

.pf-label[b-3smlyru5mq] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── State palette ──────────────────────────────────────────── */

.pf-chevron.is-pending[b-3smlyru5mq] {
    --c-fill:   var(--neutral-layer-2);
    --c-border: var(--neutral-stroke-divider-rest);
    --c-text:   var(--neutral-foreground-hint);
}

.pf-chevron.is-done[b-3smlyru5mq] {
    --c-fill:   color-mix(in srgb, var(--accent-fill-rest)  8%, var(--neutral-layer-2));
    --c-border: color-mix(in srgb, var(--accent-fill-rest) 30%, var(--neutral-stroke-divider-rest));
    --c-text:   var(--neutral-foreground-rest);
}

.pf-chevron.is-active[b-3smlyru5mq] {
    --c-fill:   color-mix(in srgb, var(--accent-fill-rest) 12%, var(--neutral-layer-1));
    --c-border: var(--accent-fill-rest);
    --c-text:   var(--accent-foreground-rest);
}

.pf-chevron[aria-selected="true"][b-3smlyru5mq] {
    font-weight: 600;
}

.pf-chevron:hover:not(.is-active)[b-3smlyru5mq] {
    --c-fill: color-mix(in srgb, var(--accent-fill-rest) 12%, var(--neutral-layer-2));
    --c-text: var(--neutral-foreground-rest);
}

.pf-chevron:focus-visible[b-3smlyru5mq] {
    outline: 2px solid var(--accent-fill-rest);
    outline-offset: 2px;
}

@media (max-width: 639px) {
    .pf-chevron[b-3smlyru5mq] {
        font-size: var(--type-ramp-base-font-size);
    }
    .pf-label[b-3smlyru5mq] {
        display: none;
    }
}

/* ── Panels ─────────────────────────────────────────────────── */
.pf-panel[b-3smlyru5mq] {
    display: flex;
    flex-direction: column;
    gap: 36px;
    padding-top: 24px;
    /* The panel is a flex item in a vertical FluentStack — without an explicit
       width it is shrink-to-fit, so a child SVG sized width:100% resolves against
       an indefinite container and collapses the whole panel narrow. A definite
       100% width makes the percentage-sized Sankeys stretch to the full width. */
    width: 100%;
    box-sizing: border-box;
}
.pf-panel--hidden[b-3smlyru5mq] {
    display: none;
}

/* Section wrappers must also span the full panel width so their content
   (Sankey SVGs, FluentGrids) has a definite box to fill. */
.pf-section[b-3smlyru5mq] {
    width: 100%;
    box-sizing: border-box;
}

/* Title→content spacer. No visible rule — the element only carries the bottom
   margin that gives each section title breathing room to its content. */
.pf-section-divider[b-3smlyru5mq] {
    margin: 0 0 18px 0;
    border: 0;
    height: 0;
}
/* /Components/Application/Forms/PensionFundSalaryForm.razor.rz.scp.css */
.psf-label[b-xtkagfaipm] { display: block; font-size: 0.875rem; font-weight: 600; margin-bottom: 4px; }
.psf-check[b-xtkagfaipm] { display: flex; align-items: flex-start; gap: 8px; margin-top: 8px; font-size: 0.875rem; }
.psf-rows[b-xtkagfaipm] { margin-top: 8px; }
.psf-kv[b-xtkagfaipm] { display: flex; justify-content: space-between; gap: 12px; font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.psf-kv--sum[b-xtkagfaipm] { font-weight: 600; }
.psf-kv--mute[b-xtkagfaipm] { color: var(--neutral-foreground-hint); border-bottom: 0; }
.psf-manual[b-xtkagfaipm] { width: 50%; min-width: 12rem; }
.psf-hint[b-xtkagfaipm] { display: block; margin-top: 6px; font-size: var(--type-ramp-minus-1-font-size); color: var(--neutral-foreground-hint); }
.psf-share[b-xtkagfaipm] { margin-top: 12px; }
.psf-share--dim[b-xtkagfaipm] { opacity: 0.6; }
.psf-badge[b-xtkagfaipm] { margin-left: 6px; padding: 0 6px; font-size: var(--type-ramp-minus-1-font-size); font-weight: 400; color: var(--neutral-foreground-hint); border: 1px solid var(--neutral-stroke-rest); border-radius: 8px; }
/* /Components/Application/Forms/PensionPlanForm.razor.rz.scp.css */
.pp-root[b-m0sepudjvf] {
    padding: 1rem 0;
}

.pp-chart[b-m0sepudjvf] {
    width: 100%;
    height: 360px;
    display: block;
    touch-action: none;
    user-select: none;
}

.pp-steps[b-m0sepudjvf] {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.pp-step[b-m0sepudjvf] {
    padding: 12px 14px;
    background: transparent;
    border: 0.5px solid var(--neutral-stroke-divider-rest);
    border-left: 3px solid var(--neutral-stroke-divider-rest);
    border-radius: 6px;
    cursor: pointer;
    transition: border-color 0.12s;
}

.pp-step:not(.pp-step--selected):hover[b-m0sepudjvf] {
    border-color: var(--neutral-stroke-hover);
}

.pp-step--selected[b-m0sepudjvf] {
    border-color: var(--accent-fill-rest);
}

.pp-step-head[b-m0sepudjvf] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.pp-step-id[b-m0sepudjvf] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pp-step-badge[b-m0sepudjvf] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid var(--accent-fill-rest);
    color: var(--accent-foreground-rest);
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.pp-step-name[b-m0sepudjvf] {
    font-size: 14px;
    font-weight: 500;
    color: var(--neutral-foreground-rest);
}

.pp-step-meta[b-m0sepudjvf] {
    flex: 1;
    font-size: 13px;
    color: var(--neutral-foreground-hint);
    font-variant-numeric: tabular-nums;
}

.pp-icon-btn[b-m0sepudjvf] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    background: transparent;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    color: var(--neutral-foreground-hint);
}

.pp-icon-btn:hover[b-m0sepudjvf] {
    background: var(--neutral-fill-secondary-rest);
}

.pp-detail-grid[b-m0sepudjvf] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.pp-row[b-m0sepudjvf] {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--neutral-foreground-hint);
    margin-bottom: 4px;
}

.pp-row-sub[b-m0sepudjvf] {
    font-size: 11px;
    color: var(--neutral-foreground-hint);
    margin-top: 2px;
    margin-bottom: 0;
}

.pp-readout[b-m0sepudjvf] {
    font-variant-numeric: tabular-nums;
    font-weight: 500;
    color: var(--neutral-foreground-rest);
}

.pp-auto-tag[b-m0sepudjvf] {
    margin-left: 6px;
    padding: 1px 6px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-radius: 8px;
    color: var(--accent-foreground-rest);
    background: color-mix(in srgb, var(--accent-fill-rest) 15%, transparent);
    vertical-align: middle;
}

.pp-reset-link[b-m0sepudjvf] {
    margin-left: 6px;
    padding: 0;
    font-size: 11px;
    font-weight: 600;
    border: none;
    background: transparent;
    color: var(--accent-fill-rest);
    cursor: pointer;
    text-decoration: underline;
}

.pp-reset-link:hover[b-m0sepudjvf] {
    color: var(--accent-fill-hover);
}

@media (max-width: 639px) {
    .pp-detail-grid[b-m0sepudjvf] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Application/Forms/PensionWithdrawalForm.razor.rz.scp.css */
/* Read-only block of a renovation advance (maintained on the project of the home). */
.pwf-ro[b-dvvwxrsbpe] { display: flex; flex-direction: column; gap: 4px; width: 100%; font-size: 0.875rem; }
/* /Components/Application/Forms/PriorMarriagesEditor.razor.rz.scp.css */
/* Separates consecutive prior marriages; plain <hr> instead of FluentDivider (no FAST element per row). */
.pm-divider[b-2dmxz9khav] {
    border: 0;
    border-top: 1px solid var(--neutral-stroke-divider-rest);
    margin: 12px 0 4px;
}
/* /Components/Application/Forms/RentalForm.razor.rz.scp.css */
.rf-chart-zone[b-7sny8lbj1e] {
    width: 100%;
    padding: 8px 0 16px 0;
}

/* Net-proceeds line directly under the sale-price field (live settlement). */
.rf-sale-net-line[b-7sny8lbj1e] {
    font-size: 0.8rem;
    color: var(--neutral-foreground-hint);
    margin-top: 0.25rem;
}

/* ── Panels (CSS-toggled, never @if — FAST leak rule; Muster HomeForm) ───── */
.hf-panel[b-7sny8lbj1e] {
    width: 100%;
    box-sizing: border-box;
    padding-top: 8px;
}
.hf-panel--hidden[b-7sny8lbj1e] {
    display: none;
}

/* ── Kosten-Waterfall (Use-Step, reiner Readout): Leerstand | Bewirtschaftung |
   Rückstellung | Nettomiete — Farb-Punkte wiederholen sich vor den Quoten-Feldern. */
.rf-waterfall[b-7sny8lbj1e] {
    display: flex;
    align-items: stretch;
    gap: 2px;
    height: 28px;
    border-radius: 4px;
    overflow: hidden;
}

.rf-wf-seg[b-7sny8lbj1e] {
    flex-basis: 0%;
    min-width: 2px;
}

.rf-wf-vac[b-7sny8lbj1e] { background: var(--w4l-bar-strong); }
.rf-wf-op[b-7sny8lbj1e]  { background: var(--w4l-bar-mid); }
.rf-wf-res[b-7sny8lbj1e] { background: var(--w4l-bar-soft); }
.rf-wf-net[b-7sny8lbj1e] { background: color-mix(in srgb, var(--w4l-positive) 45%, transparent); }

.rf-wf-readout[b-7sny8lbj1e] {
    margin-top: 0.3rem;
    font-size: 0.78rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--neutral-foreground-rest);
}

.rf-quota-dot[b-7sny8lbj1e] {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    margin-bottom: 2px;
}

/* ── fin-*-Anatomie (Bar + StatCards): kopiert aus EffectiveAffordabilitySection
   (scoped CSS ist komponentengebunden — Duplikat nötig). ─────────────────── */
.fin-afford-head[b-7sny8lbj1e] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 0.74rem;
    color: var(--neutral-foreground-rest);
    margin: 0.45rem 0 0.15rem;
    font-variant-numeric: tabular-nums;
}

.fin-afford-head > span:last-child[b-7sny8lbj1e] {
    font-weight: 700;
    font-size: 0.85rem;
}

.fin-bar[b-7sny8lbj1e] {
    position: relative;
    display: flex;
    width: 100%;
    height: 26px;
    border-radius: 4px;
    overflow: hidden;
    background: var(--neutral-layer-2);
    border: 1px solid var(--neutral-stroke-rest);
}

.fin-afford-bar[b-7sny8lbj1e] {
    height: 30px;
}

.fin-income-zone[b-7sny8lbj1e] {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    background: color-mix(in srgb, var(--w4l-income-accent) 16%, transparent);
    border-right: 2px solid var(--w4l-income-accent);
}

.fin-segs[b-7sny8lbj1e] {
    position: absolute;
    inset: 0;
    display: flex;
}

.fin-bar .seg[b-7sny8lbj1e] {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.68rem;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    min-width: 0;
}

.seg-int[b-7sny8lbj1e] { background: var(--w4l-bar-strong); }
.seg-amo[b-7sny8lbj1e] { background: var(--w4l-bar-mid); }
.seg-mnt[b-7sny8lbj1e] { background: var(--w4l-bar-soft); }

.fin-marker[b-7sny8lbj1e] {
    position: absolute;
    top: -2px;
    bottom: -2px;
    width: 0;
    border-left: 2px dashed var(--neutral-foreground-rest);
    pointer-events: none;
}

.fin-ok[b-7sny8lbj1e]   { color: var(--w4l-positive); }
.fin-over[b-7sny8lbj1e] { color: var(--w4l-negative); }

.fin-legend[b-7sny8lbj1e] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem 0.85rem;
    margin-top: 0.25rem;
    font-size: 0.72rem;
    color: var(--neutral-foreground-rest);
}

.fin-legend .dot[b-7sny8lbj1e] {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    margin-right: 0.25rem;
    vertical-align: middle;
}

.fin-dot-income[b-7sny8lbj1e] {
    background: color-mix(in srgb, var(--w4l-income-accent) 25%, transparent);
    border: 1px solid var(--w4l-income-accent);
}

.fin-legend-marker[b-7sny8lbj1e] { opacity: 0.8; }

.fin-stats[b-7sny8lbj1e] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-content: flex-start;
    margin-top: 0.5rem;
}

.fin-stat-card[b-7sny8lbj1e] {
    flex: 1 1 0;
    min-width: 130px;
    padding: 8px 10px;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 6px;
    background: var(--neutral-layer-1);
}

.fin-stat-label[b-7sny8lbj1e] {
    font-size: 11px;
    color: var(--neutral-foreground-hint);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    text-align: center;
}

.fin-stat-value[b-7sny8lbj1e] {
    font-size: 22px;
    font-weight: 700;
    margin-top: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.fin-stat-sub[b-7sny8lbj1e] {
    font-size: 0.7rem;
    color: var(--neutral-foreground-hint);
    text-align: center;
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
}

.fit-good[b-7sny8lbj1e]    { color: var(--w4l-positive); }
.fit-caution[b-7sny8lbj1e] { color: var(--w4l-negative); }

/* ── Responsive: KPI-Karten 4 → 2×2 (sm) → 1 Spalte (xs). ────────────────── */
@media (max-width: 639px) {
    .fin-stats .fin-stat-card[b-7sny8lbj1e] {
        flex-basis: calc(50% - 4px);
    }
}

@media (max-width: 479px) {
    .fin-stats .fin-stat-card[b-7sny8lbj1e] {
        flex-basis: 100%;
    }
}

/* Holding-mode status line (existing property vs purchase month) - state, not help text. */
.rf-mode-line[b-7sny8lbj1e] {
    font-size: 0.8rem;
    color: var(--neutral-foreground-rest);
    color: color-mix(in srgb, var(--neutral-foreground-rest) 82%, transparent);
    margin-top: 4px;
}

.rf-subhead[b-7sny8lbj1e] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 8px;
}
/* /Components/Application/Forms/RiskChartPair.razor.rz.scp.css */
/* The container is .dbs-charts (container-type: inline-size, declared by the stage). */
.dcp[b-zjpop0nz1u] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem 1.5rem;
}

@container (min-width: 680px) {
    .dcp[b-zjpop0nz1u] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.dcp__cell[b-zjpop0nz1u] {
    min-width: 0;
}
/* /Components/Application/Forms/RiskPresetNotes.razor.rz.scp.css */
.dpn[b-20gsp27d8u] {
    display: flex;
    gap: .5rem;
    align-items: flex-start;
}

.dpn-list[b-20gsp27d8u] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .2rem;
    flex: 1;
}

.dpn-line[b-20gsp27d8u] {
    display: flex;
    gap: .35rem;
    align-items: flex-start;
    font-size: .8125rem;
    color: var(--neutral-foreground-hint);
}

.dpn-line--sub[b-20gsp27d8u] {
    padding-left: 1.35rem;
}

.dpn-help[b-20gsp27d8u] {
    background: none;
    border: 0;
    padding: 0;
    color: var(--accent-fill-rest);
    cursor: pointer;
    font-size: .8125rem;
    white-space: nowrap;
}

.dpn-help:focus-visible[b-20gsp27d8u],
.dpn-dismiss:focus-visible[b-20gsp27d8u] {
    outline: 2px solid var(--accent-fill-rest);
    outline-offset: 1px;
}

.dpn-dismiss[b-20gsp27d8u] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    cursor: pointer;
}

/* 44 px touch target on coarse pointers, like the policy trash (S6-7 ui-ux F-10). */
@media (pointer: coarse) { .dpn-dismiss[b-20gsp27d8u] { width: 44px; height: 44px; } }

.dpn-dismiss:hover[b-20gsp27d8u] {
    background: var(--neutral-fill-stealth-hover);
}
/* /Components/Application/Forms/RiskSourceLines.razor.rz.scp.css */
.dbs-sources[b-97hhobd0qj] {
    list-style: none;
    margin: 0.5rem 0 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.8125rem;
    color: var(--neutral-foreground-rest);
}

.dbs-sources li[b-97hhobd0qj] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.75rem;
}
/* /Components/Application/Forms/ScenarioReportsCard.razor.rz.scp.css */
/* Documents section — scoped styles. Colours come from tokens.css only (RawHexLintTests). */

/* Wraps the add button on the title line together with its FeatureBadge. */
.doc-anchor[b-zuik2ch061] { display: inline-flex; align-items: center; gap: 0.4rem; }

.doc-panel[b-zuik2ch061] { margin-top: 0.7rem; }

.doc-label[b-zuik2ch061] { display: block; font-size: 0.8rem; opacity: 0.75; margin: 0.5rem 0 0.15rem; }

/* Type cards: the shared .w4l-optcard look (utilities.css) plus the format icon in the head. */
.doc-types[b-zuik2ch061] { margin-bottom: 0.4rem; }
.doc-type:disabled[b-zuik2ch061] { cursor: not-allowed; opacity: 0.55; }
.doc-type__head[b-zuik2ch061] { display: flex; align-items: center; gap: 0.45rem; }
.doc-type__head img[b-zuik2ch061] { display: block; flex-shrink: 0; }

/* The upgrade badge is a link and must stay outside the card button, so the cell carries it.
   That wrapper costs the card its grid stretch: the other card IS a grid item and fills its
   track, this one is a child of the cell and would shrink to its content (404px vs 221px). */
.doc-type-cell[b-zuik2ch061] { position: relative; display: block; min-width: 0; }
.doc-type-cell .w4l-optcard[b-zuik2ch061] { width: 100%; }
.doc-type-cell__badge[b-zuik2ch061] { position: absolute; top: 6px; right: 8px; }

.doc-readonly-hint[b-zuik2ch061] { margin: 0 0 0.4rem; font-size: 0.8rem; color: var(--neutral-foreground-hint); }

.doc-chapters[b-zuik2ch061] { margin: 0.5rem 0; }
.doc-chapter-list[b-zuik2ch061] { columns: 2; list-style: none; padding: 0; margin: 0.3em 0; }

/* Admin canon test mode: canon chapters as groups, one stage pill per builder row. */
.doc-testmode[b-zuik2ch061] { display: block; margin: 0.3em 0; font-weight: 600; }
.doc-canon-hint[b-zuik2ch061] { font-size: 0.8rem; color: var(--neutral-foreground-hint); margin: 0.2em 0; }
.doc-canon-group[b-zuik2ch061] { margin: 0.4em 0; }
.doc-canon-heading[b-zuik2ch061] { font-size: 0.8rem; font-weight: 600; color: var(--neutral-foreground-hint); }
.doc-canon-list[b-zuik2ch061] { list-style: none; padding: 0 0 0 0.6rem; margin: 0.15em 0; }
.doc-stage--reference[b-zuik2ch061]  { background: color-mix(in srgb, var(--w4l-positive) 15%, transparent); color: var(--w4l-positive); }
.doc-stage--inprogress[b-zuik2ch061] { background: color-mix(in srgb, var(--w4l-info) 15%, transparent); color: var(--w4l-info); }

.doc-input[b-zuik2ch061] {
    width: 100%; box-sizing: border-box; padding: 5px 8px; font: inherit; font-size: 0.85rem;
    border: 1px solid var(--neutral-stroke-rest); border-radius: 4px;
    background: var(--neutral-fill-input-rest); color: var(--neutral-foreground-rest);
}
.doc-brief[b-zuik2ch061] { gap: 0.6rem; align-items: baseline; flex-wrap: wrap; font-size: 0.8rem; opacity: 0.85; padding-top: 0.5rem; }
/* Names of the concerns the report answers - a plain list, no status vocabulary. */
.doc-linkbtn[b-zuik2ch061] {
    padding: 0; border: 0; background: none; font: inherit;
    color: var(--accent-foreground-rest); cursor: pointer; text-decoration: underline;
}
.doc-linkbtn:hover[b-zuik2ch061] { color: var(--accent-foreground-hover); }
.doc-brief-list[b-zuik2ch061] { margin: 0.15rem 0 0; padding-left: 1.1rem; font-size: 0.8rem; color: var(--neutral-foreground-hint); }
.doc-limit-error[b-zuik2ch061] { color: var(--w4l-negative); font-size: 0.85rem; padding-top: 0.4rem; }
.doc-prose-hint[b-zuik2ch061] { color: var(--neutral-foreground-hint); margin: 0 0 8px; }
.doc-buttons[b-zuik2ch061] { display: flex; justify-content: flex-end; gap: 0.5rem; padding-top: 0.5rem; }
/* Equal footprint for the two actions - a wider Cancel than Create reads as an accident.
   ::deep because FluentButton renders the custom element itself (see ActionPlanOverview). */
.doc-buttons[b-zuik2ch061]  fluent-button { min-width: 7.5rem; }

.doc-table[b-zuik2ch061] { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.doc-table th[b-zuik2ch061] { text-align: left; padding: 4px 8px; opacity: 0.7; font-weight: 600; }
.doc-table td[b-zuik2ch061] { padding: 4px 8px; border-top: 1px solid var(--neutral-stroke-divider-rest); }
.doc-actions-col[b-zuik2ch061] { text-align: right; white-space: nowrap; }
/* `.doc-table th` (class+element) outranks the plain class, so the header would stay left
   of its icons without this. */
.doc-table th.doc-actions-col[b-zuik2ch061] { text-align: right; }

/* Empty list: the head stays, the body is one full-width cell carrying the hint. The divider
   under the head is the td's own border-top; the padding gives it a row's worth of air. */
.doc-empty-row td[b-zuik2ch061] { padding: 26px 8px; text-align: center; color: var(--neutral-foreground-hint); }

.doc-table .doc-icon-col[b-zuik2ch061] { width: 28px; padding-right: 0; }
.doc-icon-col svg[b-zuik2ch061] { display: block; }
/* Screen-reader-only header text for the icon column (no global helper class exists). */
.doc-sr-only[b-zuik2ch061] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; margin: -1px; border: 0; padding: 0; }

.doc-badge[b-zuik2ch061] {
    display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 0.75rem;
    background: var(--neutral-layer-3); margin-left: 0.4rem;
}
.doc-badge:first-child[b-zuik2ch061] { margin-left: 0; }
.doc-badge--active[b-zuik2ch061] { background: color-mix(in srgb, var(--w4l-info) 15%, transparent); color: var(--w4l-info); }
.doc-badge--ok[b-zuik2ch061]     { background: color-mix(in srgb, var(--w4l-positive) 15%, transparent); color: var(--w4l-positive); }
.doc-badge--error[b-zuik2ch061]  { background: color-mix(in srgb, var(--w4l-negative) 15%, transparent); color: var(--w4l-negative); }
.doc-badge--stale[b-zuik2ch061]  { background: color-mix(in srgb, var(--w4l-warning) 18%, transparent); color: var(--w4l-warning); }

/* Row actions are icon-only (mirrors .fm-icon on /Sharing): the title/aria-label carries the name. */
.doc-icon[b-zuik2ch061] {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 6px; border: 0; padding: 0;
    background: transparent; color: inherit; cursor: pointer; text-decoration: none;
}
.doc-icon:hover[b-zuik2ch061] { background: var(--neutral-fill-secondary-hover); }
.doc-icon svg[b-zuik2ch061] { display: block; }

.doc-paging[b-zuik2ch061] { display: flex; align-items: center; justify-content: flex-end; gap: 0.25rem; padding-top: 0.3rem; }
.doc-paging__label[b-zuik2ch061] { font-size: 0.8rem; opacity: 0.7; font-variant-numeric: tabular-nums; }
.doc-icon:disabled[b-zuik2ch061] { opacity: 0.35; cursor: default; }
.doc-icon:disabled:hover[b-zuik2ch061] { background: transparent; }

@media (max-width: 640px) {
    .doc-actions-col[b-zuik2ch061] { white-space: normal; }
    /* Two columns of chapter checkboxes squeeze on a narrow viewport. */
    .doc-chapter-list[b-zuik2ch061] { columns: 1; }
}
/* /Components/Application/Forms/SelfEmploymentExitStep.razor.rz.scp.css */
/* Exit panel (slice 2b). */
.se-exit-bridge[b-vd7p2lpdhl] {
    display: flex;
    justify-content: flex-end;
}

.se-exit-switch[b-vd7p2lpdhl] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: var(--type-ramp-minus-1-font-size);
    white-space: nowrap;
}

/* Three tiles that keep their height whether the sub line is one or two lines, so «≈» -> figures never moves the page. */
.se-exit-compare .w4l-kpi-card[b-vd7p2lpdhl] {
    min-width: 150px;
    min-height: 7.75rem;
}

.se-exit-compare .w4l-kpi-sub[b-vd7p2lpdhl] {
    min-height: 2.6em;
}
/* /Components/Application/Forms/SelfEmploymentForm.razor.rz.scp.css */
/* Panels (CSS-toggled, never @if - FAST leak rule). */
.se-panel[b-gi4thds0fa] {
    width: 100%;
    box-sizing: border-box;
    padding-top: 8px;
}

.se-panel--hidden[b-gi4thds0fa] {
    display: none;
}
/* /Components/Application/Forms/StatutoryRelativesForm.razor.rz.scp.css */
/* ==========================================================================
   StatutoryRelativesForm («Erbenbaum») — Fluent tokens, hs5 visual language.
   Neutral at rest, accent only for the entitled Parentel band and live chips.
   Works in light and dark mode via Fluent CSS variables.
   ========================================================================== */

.lwr[b-do5bvbswqx] {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 920px;
    margin: 0 auto;
    padding: 8px 12px 20px;

    /* ONE footprint for EVERY person (parents, grandparents, siblings, children, grandchildren,
       uncles, testator, spouse) + the escheat card — «alle Personen gleich». */
    --lwr-person-w: 164px;
    --lwr-person-min-h: 82px;  /* wider + a touch shorter */
}

/* ====== 3-column generation grid ====== */
.lwr-grid[b-do5bvbswqx] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 12px;
    align-items: stretch;
}

.lwr-cell--c1[b-do5bvbswqx] { grid-column: 1; }
.lwr-cell--c2[b-do5bvbswqx] { grid-column: 2; }
.lwr-cell--c3[b-do5bvbswqx] { grid-column: 3; }

/* 3rd Parentel: paternal | maternal grandparents split 50:50 across the full width
   (uses the freed middle space). Same grid drives the GP cards and the uncle/aunt lanes. */
.lwr-gp-row[b-do5bvbswqx] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 12px;
    align-items: stretch;
}

.lwr-gp-row .lwr-lane--paternal[b-do5bvbswqx] { grid-column: 1; }
.lwr-gp-row .lwr-lane--maternal[b-do5bvbswqx] { grid-column: 2; }

.lwr-cell[b-do5bvbswqx] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
}

/* Erblinie segments between the generation rows */
.lwr-spine-gap[b-do5bvbswqx] {
    height: 18px;
    width: 3px;
    margin: 0 auto;
    background: color-mix(in srgb, var(--accent-fill-rest) 45%, transparent);
    border-radius: 2px;
}

/* ====== Parentel bands ====== */
.lwr-band[b-do5bvbswqx] {
    border-radius: calc(var(--layer-corner-radius) * 1px);
    /* Transparent — each Parentel reads as its own block via the border alone (no fill). */
    background: transparent;
    border: 1px solid var(--neutral-stroke-rest);
    padding: 0 0 4px;
    position: relative;
    transition: opacity 0.2s ease, background 0.2s ease;
}

/* Active Parentel: distinguished by a crisp accent frame + accent title, NOT a background fill
   (the subtle fill read as too low-contrast). Same surface as the other bands. */
.lwr-band--active[b-do5bvbswqx] {
    border-color: var(--accent-fill-rest);
    box-shadow: inset 0 0 0 1px var(--accent-fill-rest);
}

.lwr-band--active .lwr-band-title[b-do5bvbswqx] {
    color: var(--accent-fill-rest);
}

/* Disabled band: not a relevant Parentel (a closer one inherits / no heirs).
   Filled surface + muted foreground instead of whole-band opacity — the title and
   the relevance chip stay readable; dashed border + no chevron signal "inactive". */
.lwr-band--disabled[b-do5bvbswqx] {
    background: var(--neutral-fill-secondary-rest);
    border-style: dashed;
}

.lwr-band--disabled .lwr-band-title[b-do5bvbswqx] {
    color: var(--neutral-foreground-hint);
}

.lwr-band--disabled .lwr-relevance-chip[b-do5bvbswqx] {
    background: var(--neutral-fill-rest);
}

.lwr-band--disabled .lwr-band-header[b-do5bvbswqx] {
    cursor: default;
}

.lwr-band--disabled .lwr-band-header:hover[b-do5bvbswqx] {
    background: transparent;
}

.lwr-band--disabled .lwr-band-chevron[b-do5bvbswqx] {
    display: none;
}

.lwr-band--displaced .lwr-band-body[b-do5bvbswqx] {
    /* Secondary, but still readable + interactive (a displaced band can still be the one where
       the user adds the siblings/uncles that would make it the active heir). */
    opacity: 0.75;
}

/* Band header — a real button (keyboard + aria-expanded) */
.lwr-band-header[b-do5bvbswqx] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 12px;
    border: none;
    background: transparent;
    cursor: pointer;
    font: inherit;
    color: var(--neutral-foreground-rest);
    border-radius: calc(var(--layer-corner-radius) * 1px);
    text-align: left;
}

.lwr-band-header:hover[b-do5bvbswqx] {
    background: var(--neutral-fill-stealth-hover);
}

.lwr-band-header:focus-visible[b-do5bvbswqx] {
    outline: 2px solid var(--focus-stroke-outer);
    outline-offset: -2px;
}

.lwr-band-title[b-do5bvbswqx] {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.lwr-band-chevron[b-do5bvbswqx] {
    margin-left: auto;
    display: flex;
    align-items: center;
}

.lwr-band-body[b-do5bvbswqx] {
    padding: 8px 12px 10px;
}

/* Relevance chip in the band header */
.lwr-relevance-chip[b-do5bvbswqx] {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--neutral-fill-secondary-rest);
    color: var(--neutral-foreground-hint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lwr-relevance-chip--active[b-do5bvbswqx] {
    background: color-mix(in srgb, var(--accent-fill-rest) 18%, var(--neutral-fill-secondary-rest));
    color: var(--accent-fill-rest);
}

/* ====== THE unified person card (every person + the escheat card share this) ====== */
.lwr-person-wrap[b-do5bvbswqx] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.lwr-person[b-do5bvbswqx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 5px;
    width: var(--lwr-person-w);
    min-height: var(--lwr-person-min-h);
    padding: 9px 12px;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: calc(var(--layer-corner-radius) * 1px);
    background: transparent;
    position: relative;
    font: inherit;
    color: var(--neutral-foreground-rest);
    text-align: center;
    transition: background 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
}

button.lwr-person[b-do5bvbswqx] { cursor: pointer; }
div.lwr-person[b-do5bvbswqx] { cursor: default; }

button.lwr-person:hover[b-do5bvbswqx] {
    background: var(--neutral-fill-hover);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}

button.lwr-person:focus-visible[b-do5bvbswqx] {
    outline: 2px solid var(--focus-stroke-outer);
    outline-offset: 2px;
}

/* Life state — alive FILLS, deceased is transparent (point 2). */
.lwr-person--alive[b-do5bvbswqx] { background: var(--neutral-fill-secondary-rest); }
.lwr-person--deceased[b-do5bvbswqx] { background: transparent; }
.lwr-person--deceased .lwr-person-name[b-do5bvbswqx] { color: var(--neutral-foreground-hint); }
.lwr-person--deceased .lwr-person-icon[b-do5bvbswqx] { opacity: 0.55; }

/* Compound with the base class (not just `.lwr-person--unknown` alone) so the scoped selector
   carries 2 of its own classes, not 1: CSS isolation adds one attribute selector ([b-xxxxx]), and
   2+1=3 beats FluentUI reboot.css's `button:focus:not(:focus-visible) { outline: 0 }` (specificity
   0,2,1) outright, where 1+1=2 would only tie it and lose the tie-break. This card can be a real
   <button> (ParentCard's onClick cycles life state) — found by the SelectionOutlineLintTests
   widening in the Slice 4 tile-selection-bug-report follow-up; same bug class, different page. */
.lwr-person.lwr-person--unknown[b-do5bvbswqx] {
    background: transparent;
    outline: 1.5px dashed var(--neutral-stroke-rest);
    outline-offset: -1.5px;
}

/* Testator anchor — same footprint, distinguished by accent tint + border only. */
.lwr-person--anchor[b-do5bvbswqx] {
    cursor: default;
    background: color-mix(in srgb, var(--accent-fill-rest) 10%, transparent);
    border-color: color-mix(in srgb, var(--accent-fill-rest) 45%, transparent);
}

/* Person line: {icon} name inline, single font size (point 3), left-aligned. */
.lwr-person-line[b-do5bvbswqx] {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 5px;
    width: 100%;
    min-width: 0;
}

.lwr-person-icon[b-do5bvbswqx] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--neutral-foreground-hint);
}

.lwr-person-name[b-do5bvbswqx] {
    font-size: 0.75rem;
    font-weight: 700;
    /* Wrap to a 2nd line instead of ellipsis. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
    line-height: 1.15;
    text-align: left;
    min-width: 0;
}

/* Deceased marker: a cross after the name (accent), replaces the status heart. */
.lwr-person-cross[b-do5bvbswqx] {
    flex-shrink: 0;
    font-size: 0.95rem;
    font-weight: 800;
    line-height: 1;
    color: var(--accent-fill-rest);
}

/* Reserved chip slot (point 1: † / % never change the geometry). */
.lwr-person-chip-slot[b-do5bvbswqx] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 20px;
    width: 100%;
    flex-shrink: 0;
}

/* Compact labeled add-button — deliberately SMALLER than a person card so the tree
   reads as "people + affordances", not as ghost people. */
.lwr-person--add[b-do5bvbswqx] {
    flex-direction: row;
    gap: 6px;
    width: auto;
    min-width: 0;
    min-height: 0;
    padding: 6px 12px;
    justify-content: center;
    align-self: center;
    border-style: dashed;
    opacity: 0.7;
}

.lwr-person--add:hover[b-do5bvbswqx] { opacity: 1; box-shadow: none; }

.lwr-add-label[b-do5bvbswqx] {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--accent-fill-rest);
    white-space: nowrap;
}

/* Subtitle in the chip slot (testator year / spouse status) when there is no % chip. */
.lwr-person-subtitle[b-do5bvbswqx] {
    font-size: 0.6rem;
    color: var(--neutral-foreground-hint);
    text-align: center;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* 3rd Parentel: discrete heading + two identical grandparent person cards (no couple card). */
.lwr-gp-side[b-do5bvbswqx] {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.lwr-gp-heading[b-do5bvbswqx] {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--neutral-foreground-hint);
    text-align: center;
    margin-bottom: 8px;
}

.lwr-gp-persons[b-do5bvbswqx] {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

/* Corner badges + hover-revealed close/nav on the unified wrap. */
.lwr-person-wrap:hover .lwr-close-hint[b-do5bvbswqx],
.lwr-close-hint:focus-within[b-do5bvbswqx] {
    opacity: 1;
}

.lwr-person-wrap:hover .lwr-nav-hint[b-do5bvbswqx] {
    opacity: 1;
}

.lwr-person-wrap .lwr-dagger-badge[b-do5bvbswqx] {
    top: 4px;
    left: 4px;
}

.lwr-person-wrap .lwr-nav-hint[b-do5bvbswqx] {
    bottom: 6px;
    right: 6px;
}

/* ====== Badges ====== */
/* Deceased marker †: accent-coloured and prominent (replaces the old plant/Stamm badge). */
.lwr-dagger-badge[b-do5bvbswqx] {
    position: absolute;
    top: 4px;
    left: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--neutral-fill-rest);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1;
    color: var(--accent-fill-rest);
    z-index: 2;
    pointer-events: none;
}

/* On siblings/uncles the † doubles as the representation toggle (deceased leaves descendants —
   nieces/nephews/cousins step in, ZGB 458 III / 457 III): clickable, filled ring when on. */
.lwr-dagger-badge--stamm[b-do5bvbswqx] {
    border: none;
    padding: 0;
    cursor: pointer;
    pointer-events: auto;
    opacity: 0.7;
    transition: opacity 0.15s ease, box-shadow 0.15s ease;
}

.lwr-dagger-badge--stamm:hover[b-do5bvbswqx] {
    opacity: 1;
}

.lwr-dagger-badge--stamm:focus-visible[b-do5bvbswqx] {
    outline: 2px solid var(--focus-stroke-outer);
    outline-offset: 1px;
}

.lwr-dagger-badge--stamm-on[b-do5bvbswqx] {
    opacity: 1;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15),
        inset 0 0 0 2px color-mix(in srgb, var(--accent-fill-rest) 55%, transparent);
}

.lwr-unknown-hint[b-do5bvbswqx] {
    position: absolute;
    top: 6px;
    right: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: color-mix(in srgb, #b45309 20%, var(--neutral-fill-rest));
    color: #b45309;
    font-size: 0.75rem;
    font-weight: 800;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
    z-index: 2;
    cursor: help;
}

/* ====== Share / warning chips ====== */
.lwr-share-chip[b-do5bvbswqx] {
    font-size: 0.66rem;
    font-weight: 700;
    color: #fff;
    padding: 2px 8px;
    border-radius: 999px;
    white-space: nowrap;
    margin-top: 2px;
}

/* Vorverstorbenes Kind, das nur als Stamm-Platzhalter erbt: Anteil ausgegraut. */
.lwr-share-chip--muted[b-do5bvbswqx] {
    opacity: 0.45;
}

.lwr-warn-chip[b-do5bvbswqx] {
    font-size: 0.66rem;
    font-weight: 700;
    color: #b45309;
    background: color-mix(in srgb, #b45309 16%, transparent);
    padding: 2px 8px;
    border-radius: 999px;
    white-space: nowrap;
    margin-top: 2px;
    cursor: help;
}

/* ====== Parents row + connector ====== */
/* Father | ——link—— | Mother as a centered flex pair so the line is CONTINUOUS between the cards. */
.lwr-parents-row[b-do5bvbswqx] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.lwr-parents-row .lwr-person-wrap[b-do5bvbswqx] {
    width: auto;
    flex: 0 1 var(--lwr-person-w);
}

.lwr-parents-link[b-do5bvbswqx] {
    flex: 1 1 auto;
    max-width: 140px;
    min-width: 20px;
    height: 3px;
    background: color-mix(in srgb, var(--accent-fill-rest) 55%, transparent);
    border-radius: 2px;
}

/* ====== Sibling lanes ====== */
.lwr-lanes[b-do5bvbswqx] {
    margin-top: 12px;
    align-items: start;
}

.lwr-lane[b-do5bvbswqx] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
}

.lwr-lane--paternal[b-do5bvbswqx] { grid-column: 1; }
.lwr-lane--full[b-do5bvbswqx]     { grid-column: 2; }
.lwr-lane--maternal[b-do5bvbswqx] { grid-column: 3; }

/* Clickable compact lane selector — a label RECTANGLE (room for wrapping text) with a small
   downward triangle tip beneath it (like the HouseholdStructure children triangles). Click to
   unlock/collapse the lane's entry box. */
.lwr-lane-toggle[b-do5bvbswqx] {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    user-select: none;
    cursor: pointer;
}

.lwr-lane-toggle-text[b-do5bvbswqx] {
    display: block;
    padding: 6px 8px;
    text-align: center;
    font-size: 0.64rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.02em;
    color: var(--neutral-foreground-hint);
    background: var(--neutral-fill-stealth-rest);
    border-radius: calc(var(--layer-corner-radius) * 1px);
    transition: background 0.15s ease, color 0.15s ease;
}

/* Triangle tip: a small pointer flush under the rectangle. */
.lwr-lane-toggle-tip[b-do5bvbswqx] {
    width: 16px;
    height: 8px;
    margin: 0 auto;
    background: var(--neutral-fill-stealth-rest);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    transition: background 0.15s ease;
}

.lwr-lane-toggle:hover .lwr-lane-toggle-text[b-do5bvbswqx],
.lwr-lane-toggle:hover .lwr-lane-toggle-tip[b-do5bvbswqx] {
    background: var(--neutral-fill-stealth-hover);
}

.lwr-lane-toggle--on .lwr-lane-toggle-text[b-do5bvbswqx],
.lwr-lane-toggle--on .lwr-lane-toggle-tip[b-do5bvbswqx] {
    background: color-mix(in srgb, var(--accent-fill-rest) 15%, var(--neutral-fill-secondary-rest));
}

.lwr-lane-toggle--on .lwr-lane-toggle-text[b-do5bvbswqx] {
    color: var(--accent-fill-rest);
}

.lwr-lane-toggle--on:hover .lwr-lane-toggle-text[b-do5bvbswqx],
.lwr-lane-toggle--on:hover .lwr-lane-toggle-tip[b-do5bvbswqx] {
    background: color-mix(in srgb, var(--accent-fill-rest) 22%, var(--neutral-fill-secondary-rest));
}

.lwr-lane-box[b-do5bvbswqx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 8px 14px;
    border-radius: calc(var(--layer-corner-radius) * 1px);
    background: transparent;
    margin-top: 12px;
    position: relative;
}

/* Discreet note when captured relatives are currently hidden (a closer ancestor is alive) —
   keeps retained data discoverable without cluttering the tree. */
.lwr-hidden-hint[b-do5bvbswqx] {
    font-size: 0.68rem;
    color: var(--neutral-foreground-hint);
    text-align: center;
    margin-top: 10px;
    padding: 4px 8px;
}

/* ====== Mini cards (siblings + children) ====== */
.lwr-mini-grid[b-do5bvbswqx] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    width: 100%;
    align-content: flex-start;
}

.lwr-mini-wrap[b-do5bvbswqx] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.lwr-mini[b-do5bvbswqx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 8px 8px;
    border: none;
    border-radius: calc(var(--layer-corner-radius) * 1px);
    background: transparent;
    width: var(--lwr-chip-w);
    min-height: 44px;
    justify-content: center;
    position: relative;
    cursor: pointer;
    font: inherit;
    color: var(--neutral-foreground-rest);
    transition: background 0.15s ease, box-shadow 0.15s ease;
}

.lwr-mini:hover[b-do5bvbswqx] {
    background: var(--neutral-fill-stealth-hover);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.lwr-mini:focus-visible[b-do5bvbswqx] {
    outline: 2px solid var(--focus-stroke-outer);
    outline-offset: 1px;
}

.lwr-mini-name[b-do5bvbswqx] {
    font-size: 0.68rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.lwr-mini-caption[b-do5bvbswqx] {
    font-size: 0.6rem;
    color: var(--neutral-foreground-hint);
}

.lwr-mini--deceased .lwr-mini-name[b-do5bvbswqx] {
    color: var(--neutral-foreground-hint);
}

.lwr-mini--add[b-do5bvbswqx] {
    justify-content: center;
    opacity: 0.6;
}

.lwr-mini--add:hover[b-do5bvbswqx] {
    opacity: 1;
    box-shadow: none;
}

/* Sibling close badge (hover reveal, NavigationChevron inside) */
.lwr-close-hint[b-do5bvbswqx] {
    position: absolute;
    top: 2px;
    right: 2px;
    /* Immer leicht sichtbar (Auffindbarkeit des «Ausschaltens»), voll bei Hover/Fokus. */
    opacity: 0.35;
    transition: opacity 0.2s ease;
    z-index: 3;
}

/* Bare accent × — no round background, just the cross. */
.lwr-remove-x[b-do5bvbswqx] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
    border: none;
    background: transparent;
    color: var(--accent-fill-rest);
    cursor: pointer;
    line-height: 0;
}

.lwr-remove-x:focus-visible[b-do5bvbswqx] {
    outline: 2px solid var(--focus-stroke-outer);
    outline-offset: 1px;
}

.lwr-mini-wrap:hover .lwr-close-hint[b-do5bvbswqx],
.lwr-close-hint:focus-within[b-do5bvbswqx] {
    opacity: 1;
}

/* Mini-card badges sit tighter than on the big cards */
.lwr-mini-wrap .lwr-dagger-badge[b-do5bvbswqx] {
    top: 1px;
    left: 1px;
    width: 21px;
    height: 21px;
    font-size: 0.95rem;
}

/* ====== Testator row ====== */
/* A centered Testator | ——link—— | Spouse pair with a CONTINUOUS line. The escheat/incomplete
   context is taken OUT OF FLOW (absolute, left) so the pair stays centred whether or not it exists. */
.lwr-testator-row[b-do5bvbswqx] {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.lwr-testator-context[b-do5bvbswqx] {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    justify-content: flex-start;
    max-width: 42%;
}

/* 3-column grid: the TESTATOR sits in the centre column (always horizontally centred), the
   spouse + connecting line hang off to the right; the empty left column balances them. */
.lwr-testator-pair[b-do5bvbswqx] {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    width: 100%;
    min-width: 0;
}

.lwr-testator-pair > .lwr-person-wrap[b-do5bvbswqx] {
    grid-column: 2;
    justify-self: center;
}

.lwr-testator-spouse-side[b-do5bvbswqx] {
    grid-column: 3;
    justify-self: stretch;
    display: flex;
    align-items: center;
    min-width: 0;
}

.lwr-testator-spouse-side > .lwr-person-wrap[b-do5bvbswqx] {
    flex: 0 0 auto;
}

.lwr-rel-line[b-do5bvbswqx] {
    flex: 1 1 auto;
    max-width: 140px;
    min-width: 20px;
    height: 3px;
    border-radius: 2px;
}

.lwr-rel-line--married[b-do5bvbswqx] {
    background: var(--accent-fill-rest);
}

.lwr-rel-line--cohab[b-do5bvbswqx] {
    background: none;
    border-top: 3px dashed var(--neutral-stroke-rest);
}

/* Divorced / separated before the death: the bond is severed, so is the statutory right. */
.lwr-rel-line--dissolved[b-do5bvbswqx] {
    background: none;
    border-top: 3px dotted var(--neutral-stroke-rest);
    opacity: 0.6;
}

.lwr-card--spouse[b-do5bvbswqx] {
    cursor: default;
}

/* ====== Escheat / incomplete context cards — own warning-toned card left of the testator ====== */
/* Escheat card: SAME footprint as a person card (point 5), warning-toned. */
.lwr-escheat-card[b-do5bvbswqx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: var(--lwr-person-w);
    min-height: var(--lwr-person-min-h);
    padding: 12px;
    border-radius: calc(var(--layer-corner-radius) * 1px);
    background: color-mix(in srgb, #b45309 8%, var(--fill-color));
    border: 1px solid color-mix(in srgb, #b45309 35%, transparent);
    font-size: 0.66rem;
    font-weight: 700;
    color: #b45309;
    text-align: center;
    cursor: help;
}

.lwr-incomplete-card[b-do5bvbswqx] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: calc(var(--layer-corner-radius) * 1px);
    background: color-mix(in srgb, #b45309 8%, var(--fill-color));
    border: 1px solid color-mix(in srgb, #b45309 35%, transparent);
    font-size: 0.72rem;
    font-weight: 600;
    color: #b45309;
    cursor: help;
}

/* ====== Children box (band 1) ====== */
.lwr-children-box[b-do5bvbswqx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 8px 14px;
    border-radius: calc(var(--layer-corner-radius) * 1px);
    background: transparent;
    position: relative;
}

.lwr-band--displaced .lwr-children-box[b-do5bvbswqx],
.lwr-band--displaced .lwr-lane-box[b-do5bvbswqx] {
    box-shadow: none;
    background: var(--neutral-fill-stealth-rest);
}

.lwr-empty-hint[b-do5bvbswqx] {
    font-size: 0.72rem;
    color: var(--neutral-foreground-hint);
    padding: 8px 4px;
}

/* nav hint (hover reveal, hs5 idiom) */
.lwr-nav-hint[b-do5bvbswqx] {
    position: absolute;
    bottom: 7px;
    right: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--neutral-fill-stealth-rest);
    opacity: 0;
    cursor: pointer;
    transition: opacity 0.2s ease, background 0.2s ease;
    z-index: 2;
}

.lwr-children-box:hover .lwr-nav-hint[b-do5bvbswqx],
.lwr-card--spouse:hover .lwr-nav-hint[b-do5bvbswqx] {
    opacity: 1;
}

.lwr-nav-hint:hover[b-do5bvbswqx] {
    background: var(--neutral-fill-stealth-hover);
}

/* ====== Notes, GP middle note ====== */
.lwr-note[b-do5bvbswqx] {
    margin-top: 8px;
    font-size: 0.7rem;
    color: var(--neutral-foreground-hint);
    padding: 6px 10px;
    border-radius: calc(var(--layer-corner-radius) * 1px);
    background: var(--neutral-fill-stealth-rest);
}

/* ====== Screenreader live region ====== */
.lwr-live[b-do5bvbswqx] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ====== Stamm columns (child + grandchildren) ====== */
.lwr-stamm-row[b-do5bvbswqx] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    width: 100%;
    align-items: flex-start;
}

.lwr-stamm-col[b-do5bvbswqx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: var(--lwr-person-w);
}

.lwr-grandchildren[b-do5bvbswqx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.lwr-stamm-connector[b-do5bvbswqx] {
    width: 2px;
    height: 10px;
    background: color-mix(in srgb, var(--accent-fill-rest) 35%, transparent);
    border-radius: 1px;
}

/* Smaller mini variant for grandchildren / uncles & aunts */
.lwr-mini--small[b-do5bvbswqx] {
    width: var(--lwr-chip-sm-w);
    min-height: 40px;
    padding: 7px 6px;
}

/* ====== Grandparent couple cards (3rd Parentel) ====== */
.lwr-card--gpcouple[b-do5bvbswqx] {
    cursor: default;
    padding: 12px 10px;
    gap: 8px;
    max-width: none; /* fill its 50% column instead of the shared 184px footprint */
}

/* Side-by-side (grandfather | grandmother) — the card now fills a 50% column, so there's room. */
.lwr-gp-pair[b-do5bvbswqx] {
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: stretch;
    justify-content: center;
    width: 100%;
}

.lwr-gp-person[b-do5bvbswqx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 8px 6px;
    border: none;
    border-radius: calc(var(--layer-corner-radius) * 1px);
    background: transparent;
    flex: 1 1 0;
    min-width: 0;
    cursor: pointer;
    font: inherit;
    color: var(--neutral-foreground-rest);
    transition: background 0.15s ease;
}

.lwr-gp-person:hover[b-do5bvbswqx] {
    background: var(--neutral-fill-stealth-hover);
}

.lwr-gp-person:focus-visible[b-do5bvbswqx] {
    outline: 2px solid var(--focus-stroke-outer);
    outline-offset: 1px;
}

.lwr-gp-person--deceased .lwr-person-icon[b-do5bvbswqx] {
    opacity: 0.4;
}

.lwr-gp-person-label[b-do5bvbswqx] {
    font-size: 0.62rem;
    font-weight: 600;
    white-space: nowrap;
}

.lwr-gp-person--deceased .lwr-gp-person-label[b-do5bvbswqx] {
    color: var(--neutral-foreground-hint);
}

/* ====== Responsive ====== */
@media (max-width: 639px) {
    .lwr-grid[b-do5bvbswqx],
    .lwr-gp-row[b-do5bvbswqx],
    .lwr-parents-row[b-do5bvbswqx],
    .lwr-testator-pair[b-do5bvbswqx] {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .lwr-testator-row[b-do5bvbswqx] {
        flex-direction: column;
        align-items: stretch;
    }

    .lwr-testator-context[b-do5bvbswqx] {
        position: static;
        transform: none;
        max-width: none;
    }

    .lwr-spine-gap[b-do5bvbswqx],
    .lwr-parents-link[b-do5bvbswqx],
    .lwr-rel-line[b-do5bvbswqx] {
        display: none;
    }

    .lwr-lanes[b-do5bvbswqx] {
        margin-top: 10px;
    }

    .lwr-lane-box[b-do5bvbswqx] {
        margin-top: 4px;
    }
}
/* /Components/Application/Forms/VestedBenefitAccountForm.razor.rz.scp.css */
/* Chart directly under the panel title — same rhythm as .home-chart-zone / .pf-chart-zone.
   The fixed height plus overflow guard keeps Chart.js from growing the panel on re-render. */
.vba-chart-zone[b-2xa7trs9d9] {
    width: 100%;
    height: 200px;
    min-height: 0;
    overflow: hidden;
    padding: 8px 0 16px 0;
    box-sizing: content-box;
}
/* /Components/Application/Forms/YearAssetStatementCard.razor.rz.scp.css */
/* Rahmen/Fläche/Padding kommen von .w4l-edit-panel (Band-Muster für selektionsabhängige
   Detail-Cards, siehe Docs/DesignBacklog.md); hier bleibt nur die volle Breite. */
.yas-card[b-aun68ed71c] {
    width: 100%;
}

.yas-empty[b-aun68ed71c] {
    color: var(--neutral-foreground-hint);
    font-size: var(--type-ramp-base-font-size);
    padding: 8px 0;
}

.yas-body[b-aun68ed71c] {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.yas-donut[b-aun68ed71c] {
    width: 100%;
    max-width: 260px;
    margin: 0 auto;
}

.yas-table[b-aun68ed71c] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--type-ramp-base-font-size);
}

.yas-table td[b-aun68ed71c] {
    padding: 6px 0;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
}

.yas-cat[b-aun68ed71c] {
    display: flex;
    align-items: center;
}

.yas-dot[b-aun68ed71c] {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    margin-right: 8px;
    flex: 0 0 auto;
}

.yas-num[b-aun68ed71c] {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    padding-left: 24px;
}

.yas-pct[b-aun68ed71c] {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    padding-left: 16px;
    color: var(--neutral-foreground-hint);
    width: 3.5em;
}

.yas-total td[b-aun68ed71c] {
    font-weight: 600;
    border-bottom: none;
    border-top: 2px solid var(--neutral-stroke-strong-rest);
}

/* Donut left, table right on wide screens; stacked on narrow. */
@media (min-width: 640px) {
    .yas-body[b-aun68ed71c] {
        flex-direction: row;
        align-items: center;
    }

    .yas-donut[b-aun68ed71c] {
        flex: 0 0 240px;
        margin: 0;
    }

    .yas-table[b-aun68ed71c] {
        flex: 1 1 auto;
    }
}
/* /Components/Application/Forms/YearBudgetCard.razor.rz.scp.css */
/* Rahmen/Fläche/Padding kommen von .w4l-edit-panel (Band-Muster für selektionsabhängige
   Detail-Cards, siehe Docs/DesignBacklog.md); hier bleibt nur die volle Breite. */
.ybc-card[b-7fko4ooqbu] {
    width: 100%;
}

.ybc-empty[b-7fko4ooqbu] {
    color: var(--neutral-foreground-hint);
    font-size: var(--type-ramp-base-font-size);
    padding: 8px 0;
}

.ybc-body[b-7fko4ooqbu] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ybc-table-col[b-7fko4ooqbu] {
    min-width: 0;
}

.ybc-donut-col[b-7fko4ooqbu] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
}

.ybc-table[b-7fko4ooqbu] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--type-ramp-base-font-size);
}

.ybc-table td[b-7fko4ooqbu] {
    padding: 5px 0;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
}

.ybc-dot[b-7fko4ooqbu] {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 2px;
    margin-right: 8px;
    vertical-align: middle;
}

/* Die Spaltenabstände müssen `td` mitnennen — `.ybc-table td` (padding: 5px 0) schlägt
   sonst die reine Klassenregel und die Zahlenspalten kleben aneinander. */
.ybc-table td.ybc-num[b-7fko4ooqbu] {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    padding-left: 24px;
}

/* Anteil am Jahres-Gesamtabfluss — schmale Nebenspalte, deshalb zurückgenommen,
   damit die CHF-Beträge die Leitspalte bleiben. */
.ybc-table td.ybc-pct[b-7fko4ooqbu] {
    padding-left: 16px;
    width: 1%;
    color: var(--neutral-foreground-hint);
}

.ybc-total td[b-7fko4ooqbu] {
    font-weight: 600;
    border-bottom: none;
    border-top: 2px solid var(--neutral-stroke-strong-rest);
}

/* Table left, donut right on wide screens; stacked on narrow. */
@media (min-width: 640px) {
    .ybc-body[b-7fko4ooqbu] {
        flex-direction: row;
        align-items: stretch;
    }

    .ybc-table-col[b-7fko4ooqbu] {
        flex: 1 1 0;
    }

    .ybc-donut-col[b-7fko4ooqbu] {
        flex: 0 0 260px;
    }
}
/* /Components/Application/Forms/YearIncomeStatementCard.razor.rz.scp.css */
/* Rahmen/Fläche/Padding kommen von .w4l-edit-panel (Band-Muster für selektionsabhängige
   Detail-Cards, siehe Docs/DesignBacklog.md); hier bleibt nur die volle Breite. */
.yin-card[b-h5fxk8k71h] {
    width: 100%;
}

.yin-section-title[b-h5fxk8k71h] {
    font-size: var(--type-ramp-minus-1-font-size);
    font-weight: 600;
    color: var(--neutral-foreground-hint);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 14px 0 4px;
}

.yin-table[b-h5fxk8k71h] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--type-ramp-base-font-size);
}

.yin-table td[b-h5fxk8k71h] {
    padding: 5px 0;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
}

.yin-num[b-h5fxk8k71h] {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    padding-left: 24px;
}

.yin-total td[b-h5fxk8k71h] {
    font-weight: 600;
    border-bottom: none;
    border-top: 2px solid var(--neutral-stroke-strong-rest);
}

.yin-cost td[b-h5fxk8k71h] {
    color: var(--neutral-foreground-hint);
}

.yin-info td[b-h5fxk8k71h] {
    color: var(--neutral-foreground-hint);
    border-bottom: none;
}
/* /Components/Application/Forms/YearPensionStatementCard.razor.rz.scp.css */
/* Rahmen/Fläche/Padding kommen von .w4l-edit-panel (Band-Muster für selektionsabhängige
   Detail-Cards, siehe Docs/DesignBacklog.md); hier bleibt nur die volle Breite. */
.yps-card[b-lhsxsr2cs5] {
    width: 100%;
}

/* Objekt-Überschrift (eine PK / ein FZK) — der Punkt trägt die Chart-Farbe, damit
   der Block sichtbar zum geklickten Balkensegment gehört. */
.yps-block-title[b-lhsxsr2cs5] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--type-ramp-plus-1-font-size);
    font-weight: 600;
    margin: 20px 0 2px;
}

.yps-block-title:first-of-type[b-lhsxsr2cs5] {
    margin-top: 8px;
}

.yps-dot[b-lhsxsr2cs5] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex: 0 0 auto;
}

.yps-section-title[b-lhsxsr2cs5] {
    font-size: var(--type-ramp-minus-1-font-size);
    font-weight: 600;
    color: var(--neutral-foreground-hint);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 14px 0 4px;
}

.yps-table[b-lhsxsr2cs5] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--type-ramp-base-font-size);
}

.yps-table td[b-lhsxsr2cs5] {
    padding: 5px 0;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
}

.yps-num[b-lhsxsr2cs5] {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    padding-left: 24px;
}

.yps-opening td[b-lhsxsr2cs5] {
    font-weight: 600;
}

.yps-total td[b-lhsxsr2cs5] {
    font-weight: 600;
    border-bottom: none;
    border-top: 2px solid var(--neutral-stroke-strong-rest);
}

.yps-info td[b-lhsxsr2cs5] {
    color: var(--neutral-foreground-hint);
}

/* Trägt eine Handlung/einen Zustand (gesperrter Abzug, unerklärte Differenz) — kein Hilfstext. */
.yps-warn td[b-lhsxsr2cs5] {
    color: var(--w4l-warning);
    border-bottom: none;
}

.yps-empty[b-lhsxsr2cs5] {
    color: var(--neutral-foreground-hint);
    font-size: var(--type-ramp-base-font-size);
    padding: 8px 0;
}
/* /Components/Application/Forms/YearTaxDeclarationCard.razor.rz.scp.css */
/* Rahmen/Fläche/Padding kommen jetzt von .w4l-edit-panel (Band-Muster wie die Income-Panels);
   hier bleibt nur die Layout-Rolle (volle Breite + Zwei-Spalten-Grid im Split-Jahr, s.u.). */
.ytd-card[b-8z078x9y4r] {
    width: 100%;
}

/* Kopfzeile: YearCardHeader (Titel links, Pfeile + ✕ rechts). Der Wrapper bleibt,
   weil das Split-Jahr-Grid unten .ytd-card-head als Grid-Item adressiert; der
   Abstand nach unten kommt aus dem Header selbst (.ych-head). */
.ytd-card-head[b-8z078x9y4r] {
    min-width: 0;
}

/* Two declarations (split year) sit side by side on wide screens, stack on narrow.
   Kein full-height Personenfarb-Streifen mehr (früher border-left: 3px): die Person wird
   nur noch durch den kleinen Marker + die eingefärbte Kopfzeile markiert — analog zum
   dezenten Personen-Marker in der Titelzeile (PersonChip). */
.ytd-block[b-8z078x9y4r] {
    margin-bottom: 18px;
}

/* Ein Sektions-Wrapper = ein Grid-Item pro Zeilen-Spur im Split-Jahr (subgrid, s.u.).
   Im Ein-Personen-/schmalen Fall ein simpler Block; min-width:0 lässt breite Tabellen
   im .w4l-table-scroll scrollen statt die Spalte zu sprengen. */
.ytd-sec[b-8z078x9y4r] {
    min-width: 0;
}

/* Kleiner Personen-Marker in der Blockkopfzeile (ersetzt den früheren Seitenstreifen):
   ein schmaler vertikaler Farbbalken wie der PersonChip im Seitentitel. */
.ytd-owner-dot[b-8z078x9y4r] {
    display: inline-block;
    width: 4px;
    height: 0.95em;
    border-radius: 2px;
    margin-right: 8px;
    vertical-align: -0.12em;
    background: var(--owner-color, var(--neutral-stroke-strong-rest));
}

.ytd-head-unit[b-8z078x9y4r] {
    color: var(--owner-color, var(--neutral-foreground-rest));
}

.ytd-block:last-child[b-8z078x9y4r] {
    margin-bottom: 0;
}

.ytd-head[b-8z078x9y4r] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.ytd-flag[b-8z078x9y4r] {
    width: 24px;
    height: 24px;
    object-fit: contain;
    border-radius: 2px;
}

.ytd-head-text[b-8z078x9y4r] {
    display: flex;
    flex-direction: column;
}

.ytd-head-unit[b-8z078x9y4r] {
    font-weight: 600;
}

.ytd-head-loc[b-8z078x9y4r] {
    font-size: var(--type-ramp-minus-1-font-size);
    color: var(--neutral-foreground-hint);
}

.ytd-section-title[b-8z078x9y4r] {
    font-size: var(--type-ramp-minus-1-font-size);
    font-weight: 600;
    color: var(--neutral-foreground-hint);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 14px 0 4px;
}

.ytd-table[b-8z078x9y4r] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--type-ramp-base-font-size);
}

.ytd-table td[b-8z078x9y4r] {
    padding: 5px 0;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
}

.ytd-num[b-8z078x9y4r] {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    padding-left: 24px;
}

.ytd-total td[b-8z078x9y4r] {
    font-weight: 600;
    border-bottom: none;
    border-top: 2px solid var(--neutral-stroke-strong-rest);
}

.ytd-info td[b-8z078x9y4r] {
    color: var(--neutral-foreground-hint);
    border-bottom: none;
}

.ytd-summary[b-8z078x9y4r] {
    margin-top: 12px;
}

/* Rate stat cards (Portfolio-style) */
.ytd-stats[b-8z078x9y4r] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 12px;
}

.ytd-stat[b-8z078x9y4r] {
    flex: 1 1 0;
    min-width: 140px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 14px;
    border: 1px solid var(--neutral-stroke-divider-rest);
    border-radius: calc(var(--control-corner-radius) * 1px);
    background: var(--neutral-layer-2, var(--neutral-fill-secondary-rest));
}

.ytd-stat-label[b-8z078x9y4r] {
    font-size: var(--type-ramp-minus-1-font-size);
    color: var(--neutral-foreground-hint);
}

.ytd-stat-value[b-8z078x9y4r] {
    font-size: var(--type-ramp-plus-3-font-size);
    line-height: var(--type-ramp-plus-3-line-height);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.ytd-stat-hint[b-8z078x9y4r] {
    font-size: var(--type-ramp-minus-2-font-size, 0.7rem);
    color: var(--neutral-foreground-hint);
}

@media (min-width: 900px) {
    /* Split-Jahr (2 Deklarationen nebeneinander): beide Blöcke teilen sich über subgrid
       EINE Zeilen-Spur pro Sektion, damit „Taxable income", „Deductions", … in beiden
       Spalten auf DERSELBEN Höhe beginnen — inkl. der Rate-Cards. Jeder Block liefert
       dieselben 10 direkten Items (head + 9 × .ytd-sec, fehlende Sektionen als leere
       Platzhalter, s. Razor). Zeilenhöhe = Max beider Spalten; der Zeilen-Abstand kommt
       aus dem internen Titel-/Card-Margin (kein row-gap), damit beidseitig leere
       Sektionen wirklich kollabieren und keine Phantom-Lücke hinterlassen.
       NB: repeat(11, …) == Anzahl der Block-Items — bei Änderung der Sektionsliste im
       Razor mitziehen. */
    .ytd-card:has(.ytd-block + .ytd-block)[b-8z078x9y4r] {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 28px;
        grid-template-rows: auto repeat(11, auto);
    }

    .ytd-card:has(.ytd-block + .ytd-block) .ytd-card-head[b-8z078x9y4r] {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    .ytd-card:has(.ytd-block + .ytd-block) .ytd-block[b-8z078x9y4r] {
        display: grid;
        grid-template-rows: subgrid;
        grid-row: 2 / span 11;
        min-width: 0;
        margin-bottom: 0;
    }
}
/* /Components/Application/Journeys/JourneyPanel.razor.rz.scp.css */
.w4l-journey-panel[b-aeog6jvi6x] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    /* Full-bleed like the FindingsPanel: pane, card and body wrappers in Preview.razor are
       padding-free so the scrollbar starts right below the title divider. */
    padding: 1rem;
}

.jp-empty[b-aeog6jvi6x] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-start;
    color: var(--neutral-foreground-hint);
    padding: 1rem 0.5rem;
}
.jp-link[b-aeog6jvi6x] { font-size: 0.8125rem; color: var(--accent-foreground-rest); text-decoration: none; }
.jp-link:hover[b-aeog6jvi6x] { text-decoration: underline; }

.jp-block[b-aeog6jvi6x] { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.25rem; }
/* Blocks with questions grow tall: a divider keeps neighbours apart. */
.jp-block + .jp-block[b-aeog6jvi6x] { border-top: 1px solid var(--neutral-stroke-divider-rest); padding-top: 1rem; }

.jp-head[b-aeog6jvi6x] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-bottom: 0.2rem;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
}
.jp-title[b-aeog6jvi6x] { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 1rem; font-weight: 600; }
.jp-title:focus-visible[b-aeog6jvi6x] { outline: 2px solid var(--accent-fill-rest); outline-offset: 2px; }
.jp-status[b-aeog6jvi6x] { flex-shrink: 0; font-size: 0.8125rem; color: var(--neutral-foreground-hint); }

.jp-parts[b-aeog6jvi6x] { list-style: none; margin: 0; padding: 0 0 0 1.125rem; display: flex; flex-direction: column; gap: 0.15rem; }
.jp-part[b-aeog6jvi6x] { display: flex; align-items: center; gap: 0.5rem; min-height: 26px; }
.jp-part-link[b-aeog6jvi6x] {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
    border: none;
    background: none;
    color: var(--accent-foreground-rest);
    font: inherit;
    font-size: 0.8125rem;
    text-align: left;
    cursor: pointer;
}
.jp-part-link:hover[b-aeog6jvi6x] { text-decoration: underline; }
.jp-part-link:focus-visible[b-aeog6jvi6x] { outline: 2px solid var(--accent-fill-rest); outline-offset: 1px; }
.jp-part-status[b-aeog6jvi6x] { flex-shrink: 0; font-size: 0.75rem; color: var(--neutral-foreground-hint); }

.jp-chips[b-aeog6jvi6x] { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; }
.jp-chips-caption[b-aeog6jvi6x] { flex-basis: 100%; font-size: 0.75rem; font-weight: 600; color: var(--neutral-foreground-hint); }
.jp-chip[b-aeog6jvi6x] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    min-height: 26px;
    padding: 0.15rem 0.6rem;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 999px;
    background: transparent;
    color: var(--neutral-foreground-rest);
    font: inherit;
    font-size: 0.8125rem;
    text-decoration: none;
    cursor: pointer;
}
.jp-chip:hover[b-aeog6jvi6x] { background: var(--neutral-fill-stealth-hover); }
.jp-chip:focus-visible[b-aeog6jvi6x] { outline: 2px solid var(--accent-fill-rest); outline-offset: 1px; }
.jp-chip.is-done[b-aeog6jvi6x] { color: var(--neutral-foreground-hint); }
.jp-chip.is-open[b-aeog6jvi6x] { border-color: var(--accent-fill-rest); color: var(--accent-foreground-rest); font-weight: 600; }
.jp-chip.is-check.is-on[b-aeog6jvi6x] { background: color-mix(in srgb, var(--accent-fill-rest) 10%, transparent); }
.jp-chip-box[b-aeog6jvi6x] {
    width: 14px;
    height: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border: 1.5px solid var(--neutral-stroke-strong-rest);
    border-radius: 3px;
}
.jp-chip-glyph[b-aeog6jvi6x] { display: inline-flex; }

/* One advice chip with a tick per person: the chip is a plain group, the ticks are the buttons. */
.jp-chip.is-multi[b-aeog6jvi6x] { cursor: default; flex-wrap: wrap; }
.jp-chip.is-multi:hover[b-aeog6jvi6x], .jp-chip.is-split:hover[b-aeog6jvi6x] { background: transparent; }
.jp-chip.is-split[b-aeog6jvi6x] { cursor: default; gap: 0.15rem; padding-left: 0.3rem; }
.jp-chip-link[b-aeog6jvi6x] { color: inherit; text-decoration: none; border-radius: 4px; }
.jp-chip-link:hover[b-aeog6jvi6x] { text-decoration: underline; }
.jp-chip-link:focus-visible[b-aeog6jvi6x] { outline: 2px solid var(--accent-fill-rest); outline-offset: 1px; text-decoration: underline; }
.jp-chip-tick[b-aeog6jvi6x] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    min-height: 22px;
    padding: 0 0.3rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
}
.jp-chip-tick:hover[b-aeog6jvi6x] { background: var(--neutral-fill-stealth-hover); }
.jp-chip-tick:focus-visible[b-aeog6jvi6x] { outline: 2px solid var(--accent-fill-rest); outline-offset: 1px; }
.jp-chip-tick.is-on[b-aeog6jvi6x] { background: color-mix(in srgb, var(--accent-fill-rest) 10%, transparent); }

/* Concern not in the scenario: plain text under the head, same axis as the question list. */
.jp-nm[b-aeog6jvi6x], .jp-nm-ref[b-aeog6jvi6x] { margin: 0; padding-left: 1.125rem; font-size: 0.8125rem; line-height: 1.45; max-width: 60ch; color: var(--neutral-foreground-rest); }
.jp-nm-ref[b-aeog6jvi6x] { font-size: 0.75rem; }

/* One footer per panel, at the end of the scroll area (not sticky). */
.jp-disclaimer[b-aeog6jvi6x] {
    margin: auto 0 0;
    padding-top: 0.6rem;
    border-top: 1px solid var(--neutral-stroke-divider-rest);
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--neutral-foreground-hint);
}

@media (pointer: coarse) {
    .jp-chip[b-aeog6jvi6x] { min-height: 40px; }
    .jp-chip-tick[b-aeog6jvi6x] { min-height: 36px; padding: 0 0.5rem; }
    .jp-part[b-aeog6jvi6x] { min-height: 44px; }
}
/* /Components/Application/Journeys/JourneyQuestionList.razor.rz.scp.css */
.jp-qs[b-wpolo5p7tg] {
    list-style: none;
    margin: 0 0 0 1.125rem;
    padding: 0;
    display: flex;
    flex-direction: column;
}
.jp-q + .jp-q[b-wpolo5p7tg] {
    margin-top: 0.6rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--neutral-stroke-divider-rest);
}
.jp-q-text[b-wpolo5p7tg] {
    margin: 0 0 0.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--neutral-foreground-rest);
    overflow-wrap: anywhere;
    hyphens: auto;
}

/* Answer line: dot in the gutter, the rest flows and wraps as one paragraph. */
.jp-line[b-wpolo5p7tg] { display: flex; align-items: flex-start; gap: 0.375rem; flex: 1 1 auto; min-width: 0; }
.jp-q-dot[b-wpolo5p7tg] { width: 8px; height: 8px; margin-top: 0.4em; flex-shrink: 0; }
.jp-q-flow[b-wpolo5p7tg] { flex: 1 1 auto; min-width: 0; font-size: 0.8125rem; line-height: 1.4; color: var(--neutral-foreground-rest); }
.jp-q-who[b-wpolo5p7tg] { font-weight: 600; }
.jp-q-word[b-wpolo5p7tg] { font-size: 0.75rem; font-weight: 600; white-space: nowrap; }
.jp-q-short[b-wpolo5p7tg] { overflow-wrap: anywhere; }

.jp-qd > summary[b-wpolo5p7tg] {
    list-style: none;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    min-height: 28px;
    padding: 0.2rem 0.25rem;
    border-radius: 4px;
    cursor: pointer;
}
.jp-qd > summary[b-wpolo5p7tg]::-webkit-details-marker { display: none; }
.jp-qd > summary:hover[b-wpolo5p7tg] { background: var(--neutral-fill-stealth-hover); }
.jp-qd > summary:focus-visible[b-wpolo5p7tg] { outline: 2px solid var(--accent-fill-rest); outline-offset: 1px; }
.jp-line-static[b-wpolo5p7tg] { display: flex; align-items: flex-start; min-height: 28px; padding: 0.2rem 0.25rem; }
.jp-chev[b-wpolo5p7tg] { flex-shrink: 0; display: inline-flex; align-self: flex-start; margin-top: 0.15rem; color: var(--neutral-foreground-hint); transition: transform 0.15s; }
.jp-qd[open] > summary .jp-chev[b-wpolo5p7tg] { transform: rotate(180deg); }

.jp-q-answer[b-wpolo5p7tg] {
    margin: 0;
    padding: 0.25rem 0 0.35rem 14px;
    font-size: 0.8125rem;
    line-height: 1.45;
    max-width: 60ch;
    color: var(--neutral-foreground-rest);
}
.jp-q-open[b-wpolo5p7tg], .jp-scope[b-wpolo5p7tg], .jp-footnote[b-wpolo5p7tg], .jp-term[b-wpolo5p7tg] {
    margin: 0;
    padding: 0.1rem 0 0.1rem 14px;
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--neutral-foreground-hint);
}
.jp-scope[b-wpolo5p7tg] { padding-top: 0.4rem; color: var(--neutral-foreground-rest); }

.jp-reasons[b-wpolo5p7tg] { list-style: none; margin: 0; padding: 0 0 0 14px; display: flex; flex-direction: column; gap: 0.1rem; }
.jp-reason[b-wpolo5p7tg] { position: relative; display: flex; align-items: flex-start; gap: 0.375rem; min-height: 26px; }
.jp-reason .jp-q-dot[b-wpolo5p7tg] { margin-top: 0.55em; }
.jp-part-link[b-wpolo5p7tg] {
    padding: 0;
    border: none;
    background: none;
    color: var(--accent-foreground-rest);
    font: inherit;
    font-size: 0.8125rem;
    text-align: left;
    cursor: pointer;
    overflow-wrap: anywhere;
}
.jp-part-link:hover[b-wpolo5p7tg] { text-decoration: underline; }
.jp-part-link:focus-visible[b-wpolo5p7tg] { outline: 2px solid var(--accent-fill-rest); outline-offset: 1px; }

/* Visually hidden, still read by assistive technology. */
.jp-sr[b-wpolo5p7tg] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (prefers-reduced-motion: reduce) {
    .jp-chev[b-wpolo5p7tg] { transition: none; }
}

@media (pointer: coarse) {
    .jp-qd > summary[b-wpolo5p7tg], .jp-line-static[b-wpolo5p7tg] { min-height: 44px; }
    .jp-part-link[b-wpolo5p7tg] { min-height: 44px; }
    .jp-reason[b-wpolo5p7tg] { min-height: 44px; align-items: center; }
    .jp-reason .jp-q-dot[b-wpolo5p7tg] { margin-top: 0; }
}
/* /Components/Application/Pages/Compare.razor.rz.scp.css */
.w4l-compare-head[b-hhayqm01lq] { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.w4l-compare-side[b-hhayqm01lq] { display: flex; flex-direction: column; min-width: 0; }
.w4l-compare-role[b-hhayqm01lq] { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--neutral-foreground-hint); }
.w4l-compare-name[b-hhayqm01lq] { font-weight: 600; color: var(--neutral-foreground-rest); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.w4l-compare-distance[b-hhayqm01lq] { margin-left: auto; font-size: 0.8rem; padding: 2px 10px; border: 1px solid var(--neutral-stroke-rest); border-radius: 999px; color: var(--neutral-foreground-rest); }
.w4l-compare-section[b-hhayqm01lq] { margin: 20px 0 8px; font-size: 1.05rem; }
.w4l-compare-table-wrap[b-hhayqm01lq] { overflow-x: auto; }
.w4l-compare-table[b-hhayqm01lq] { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.w4l-compare-table th[b-hhayqm01lq], .w4l-compare-table td[b-hhayqm01lq] { padding: 6px 10px; border-bottom: 1px solid var(--neutral-stroke-rest); text-align: left; vertical-align: top; }
.w4l-compare-table th.num[b-hhayqm01lq], .w4l-compare-table td.num[b-hhayqm01lq] { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.w4l-compare-delta[b-hhayqm01lq] { font-weight: 600; }
.w4l-compare-kpi-label[b-hhayqm01lq] { display: block; }
.w4l-compare-kpi-sub[b-hhayqm01lq] { display: block; font-size: 0.75rem; color: var(--neutral-foreground-hint); }
.w4l-compare-area[b-hhayqm01lq] { margin-top: 10px; }
.w4l-compare-area > summary[b-hhayqm01lq] { cursor: pointer; font-weight: 600; display: flex; gap: 10px; align-items: baseline; }
.w4l-compare-owner[b-hhayqm01lq] { font-weight: 400; font-size: 0.8rem; color: var(--neutral-foreground-hint); }
.w4l-compare-object[b-hhayqm01lq] { color: var(--neutral-foreground-hint); }
.w4l-compare-arrow[b-hhayqm01lq] { text-align: center; color: var(--neutral-foreground-hint); }
.w4l-compare-tag[b-hhayqm01lq] { font-size: 0.75rem; padding: 1px 6px; border: 1px solid var(--neutral-stroke-rest); border-radius: 4px; margin-right: 6px; }
.w4l-compare-link a[b-hhayqm01lq] { display: inline-flex; }
.w4l-compare-dot[b-hhayqm01lq] { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin: 0 4px 0 8px; }
.w4l-compare-dot--red[b-hhayqm01lq] { background: var(--w4l-finding-red); }
.w4l-compare-dot--amber[b-hhayqm01lq] { background: var(--w4l-finding-amber); }
.w4l-compare-visually-hidden[b-hhayqm01lq] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
/* /Components/Application/Pages/Death.razor.rz.scp.css */
/* The mode pills moved to RiskModePills (scoped css there), the beneficiary lines to DeathCapitalStagePanel. */

/* Simulated mode shows both cause charts: the accident block keeps its distance to the illness chart above (replaces the
   spacer the mode switch used to mount and unmount). */
.death-chart-next[b-za6n75zo4e] { margin-top: var(--w4l-space-m, 32px); }
/* /Components/Application/Pages/Diagnostics.razor.rz.scp.css */
/* /Diagnostics - the two swapped panes. Both are flex children of .diagnostic-page-content
   (global, components.css) and take the whole remaining height; exactly one is display:flex
   at a time, set inline from C#. Colours are FluentUI tokens only. */

.diag-tree-pane[b-ietsqcdqsk],
.diag-detail-pane[b-ietsqcdqsk] {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    flex-direction: column;
}

.diag-detail-pane:focus[b-ietsqcdqsk] {
    outline: none;
}

.diag-filter-input[b-ietsqcdqsk] {
    flex-shrink: 0;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 0.5rem;
    padding: 0.4rem 0.6rem;
    font-family: inherit;
    font-size: 0.85rem;
    color: var(--neutral-foreground-rest);
    background: var(--neutral-fill-input-rest);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 4px;
}

.diag-filter-input:focus[b-ietsqcdqsk] {
    outline: none;
    border-color: var(--accent-fill-rest);
}

.diag-tree-scroll[b-ietsqcdqsk] {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 4px;
    padding: 0.25rem;
}

.diag-tree-empty[b-ietsqcdqsk] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem;
    font-size: 0.85rem;
    color: var(--neutral-foreground-hint);
}

.diag-link-btn[b-ietsqcdqsk] {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font: inherit;
    color: var(--accent-foreground-rest);
    text-decoration: underline;
}

.diag-detail-head[b-ietsqcdqsk] {
    flex-shrink: 0;
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.diag-back-btn[b-ietsqcdqsk] {
    background: none;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 4px;
    padding: 0.25rem 0.6rem;
    cursor: pointer;
    font: inherit;
    font-size: 0.85rem;
    color: var(--neutral-foreground-rest);
}

.diag-back-btn:hover[b-ietsqcdqsk],
.diag-back-btn:focus-visible[b-ietsqcdqsk] {
    background: var(--neutral-fill-secondary-hover);
}

.diag-detail-title[b-ietsqcdqsk] {
    font-weight: 600;
}

.diag-detail-count[b-ietsqcdqsk],
.diag-detail-parent[b-ietsqcdqsk] {
    font-size: 0.75rem;
    color: var(--neutral-foreground-hint);
}

/* The parent path is the long part - let it be the one that gets cut. */
.diag-detail-parent[b-ietsqcdqsk] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* /Components/Application/Pages/EstateDocuments.razor.rz.scp.css */
/* /EstateDocuments — the per-person status strip (edp-tile Ampel) and its generation triggers
   (edp-trigger*). Moved out of the page's inline <style> block into CSS isolation (Slice 4 Task 1);
   `edp-` is a component-local prefix (scoped, so it cannot collide — Docs/Css.md). Colours are
   FluentUI tokens (theme-aware chrome) or --w4l-* tokens (the fixed Ampel semantics carried over
   from Slice 2: --w4l-positive/-finding-amber/-finding-red), never raw hex. */

.edp-strip[b-50fs3a18we] { display: flex; flex-direction: column; gap: 12px; }
.edp-person[b-50fs3a18we] { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* ── Status tiles (the Ampel) ── */
.edp-tile[b-50fs3a18we] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 170px;
    padding: 8px 12px;
    text-align: left;
    font: inherit;
    cursor: pointer;
    border: 1px solid var(--neutral-stroke-rest);
    border-left-width: 4px;
    border-radius: calc(var(--layer-corner-radius) * 1px);
    background: var(--neutral-fill-input-rest);
    color: var(--neutral-foreground-rest);
}
/* Selection is a persistent STATE, expressed on a channel FluentUI's reboot.css cannot touch —
   `button:focus:not(:focus-visible) { outline: 0 }` (reboot.css, specificity 0,2,1) would otherwise
   suppress an `outline`-based marker the instant the just-clicked tile (a <button>, so it holds
   focus by construction) becomes selected, which is exactly the "new tile never marked, old tile
   flashes" bug this replaces (see the Slice 4 tile-selection-bug-report). `:focus-visible` keeps a
   real keyboard focus ring on its own, untouched, channel. */
.edp-tile.edp-selected[b-50fs3a18we] { box-shadow: inset 0 0 0 2px var(--accent-fill-rest); }
.edp-tile:focus-visible[b-50fs3a18we] { outline: 2px solid var(--accent-fill-rest); outline-offset: -1px; }
.edp-name[b-50fs3a18we] { min-width: 90px; font-weight: 600; font-size: 0.9rem; }
.edp-kind[b-50fs3a18we] { font-weight: 600; font-size: 0.85rem; }
.edp-state[b-50fs3a18we] { font-size: 0.78rem; opacity: 0.8; }

/* Ampel semantics (Slice 2): worst-severity precedence is decided in EstateDocumentLights, this
   is only the colour mapping. Ok/Stale/Missing share the same three tones as the tile chips
   elsewhere on this page; NotCaptured/NotApplicable are deliberately neutral, not a fourth colour. */
.edp-ok[b-50fs3a18we] { border-left-color: var(--w4l-positive); }
.edp-stale[b-50fs3a18we] { border-left-color: var(--w4l-finding-amber); }
.edp-missing[b-50fs3a18we] { border-left-color: var(--w4l-finding-red); }
.edp-notcaptured[b-50fs3a18we], .edp-notapplicable[b-50fs3a18we] { border-left-color: var(--neutral-stroke-rest); }

.edp-freequota[b-50fs3a18we] { font-size: 0.78rem; opacity: 0.85; }
.edp-household[b-50fs3a18we] { margin-top: 4px; }

/* ── Generation triggers (Offer/Running/Ready/ReadyPreview — EstateDocumentTriggerModel) ── */
.edp-triggers[b-50fs3a18we] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.edp-trigger[b-50fs3a18we] { display: inline-flex; align-items: center; gap: 4px; }

.edp-trigger-btn[b-50fs3a18we] {
    font: inherit;
    font-size: 0.8rem;
    padding: 4px 10px;
    cursor: pointer;
    border: 1px solid var(--accent-fill-rest);
    border-radius: calc(var(--layer-corner-radius) * 1px);
    background: transparent;
    color: var(--accent-fill-rest);
}
.edp-trigger-btn:disabled[b-50fs3a18we] { cursor: not-allowed; opacity: 0.5; }
.edp-trigger-btn--failed[b-50fs3a18we] { border-color: var(--w4l-finding-red); color: var(--w4l-finding-red); }
.edp-trigger-failed-text[b-50fs3a18we] { font-size: 0.78rem; color: var(--w4l-finding-red); }
.edp-trigger-progress[b-50fs3a18we] { font-size: 0.78rem; opacity: 0.8; }

/* Cancel (button), Download (anchor) and Preview (button, ReadyPreview — a Light deploy renders
   HTML only, spec §7.2) share one plain-icon-link look; only the element type differs. */
.edp-trigger-cancel[b-50fs3a18we], .edp-trigger-download[b-50fs3a18we], .edp-trigger-preview[b-50fs3a18we] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 0.78rem;
    cursor: pointer;
    border: none;
    background: transparent;
    color: var(--neutral-foreground-rest);
    text-decoration: none;
}
.edp-trigger-cancel:disabled[b-50fs3a18we], .edp-trigger-preview:disabled[b-50fs3a18we] { cursor: not-allowed; opacity: 0.5; }

.edp-limit-error[b-50fs3a18we] { color: var(--w4l-negative); font-size: 0.85rem; padding-top: 4px; }
/* /Components/Application/Pages/Relationship.razor.rz.scp.css */
/* Divorce card head: divorce date + proceedings-duration slider, bottom-aligned so the date input
   sits level with the slider bar. The input row (32px) is taller than the slider track (26px); the
   3px pull-down centres the two on the same line. State lines go below the slider column. */
.divorce-head[b-r6zibexi53] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    column-gap: 12px;
    row-gap: 4px;
    align-items: end;
}

.divorce-head__date[b-r6zibexi53] {
    margin-bottom: -3px;
}

.divorce-head__state[b-r6zibexi53] {
    grid-column: 2;
}

@media (max-width: 639px) {
    .divorce-head[b-r6zibexi53] {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 12px;
    }

    .divorce-head__date[b-r6zibexi53] {
        margin-bottom: 0;
    }

    .divorce-head__state[b-r6zibexi53] {
        grid-column: 1;
        margin-top: -8px;
    }
}
/* /Components/Application/Pages/Taxes.razor.rz.scp.css */
/* Residence page — braided residence-track editor + segment panel. */

.residence-editor-head[b-s21ik645zz] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
    width: 100%;
}

.residence-editor-head-main[b-s21ik645zz] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.residence-flag-lg[b-s21ik645zz] {
    width: 48px;
    height: 34px;
    object-fit: contain;
    border-radius: 3px;
    box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.2);
    flex-shrink: 0;
}

.residence-pick-row[b-s21ik645zz] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.residence-pick[b-s21ik645zz] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 11px;
    font-size: 0.8125rem;
    border-radius: 8px;
    border: 0.5px solid var(--neutral-stroke-divider-rest);
    background: transparent;
    color: var(--neutral-foreground-rest);
    cursor: pointer;
}

.residence-pick:hover[b-s21ik645zz] {
    background: var(--neutral-fill-secondary-rest, rgba(0, 0, 0, 0.04));
}

.residence-pick-active[b-s21ik645zz] {
    border: 2px solid var(--accent-fill-rest);
    background: color-mix(in srgb, var(--accent-fill-rest) 12%, transparent);
}

.residence-auto-tag[b-s21ik645zz] {
    margin-left: 5px;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--neutral-foreground-hint);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 3px;
    padding: 0 3px;
}

/* ── Decision state chip + confirm bar (Task 9) — shown above the domicile cards when the
      selected segment sits inside a domicile decision (D5 finding). Amber only while State=Open;
      a confirmed decision keeps the same layout without the warning colour. ── */
.domicile-decision-bar[b-s21ik645zz] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    width: 100%;
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid var(--neutral-stroke-divider-rest);
}

.domicile-decision-bar--open[b-s21ik645zz] {
    border-color: var(--w4l-warning);
    background: color-mix(in srgb, var(--w4l-warning) 10%, transparent);
}

.domicile-decision-state[b-s21ik645zz] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

.domicile-decision-bar--open .domicile-decision-state[b-s21ik645zz] {
    color: var(--w4l-warning);
}

.residence-pick--confirm[b-s21ik645zz] {
    border-color: var(--w4l-warning);
    color: var(--w4l-warning);
}

.residence-pick--confirm:hover[b-s21ik645zz] {
    background: color-mix(in srgb, var(--w4l-warning) 12%, transparent);
}

.residence-action-row[b-s21ik645zz] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.residence-action-title[b-s21ik645zz] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

/* ── Domicile location cards: radio-card grid (a11y skeleton per ModeCardGroup). ── */
.residence-cards[b-s21ik645zz] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 8px;
    width: 100%;
    margin: 6px 0 0;
    padding: 0;
    border: none;
    min-inline-size: 0;
}

.residence-card[b-s21ik645zz] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    border: 1px solid var(--neutral-stroke-divider-rest);
    border-radius: 8px;
    background: var(--neutral-fill-stealth-rest);
    cursor: pointer;
    transition: border-color 0.1s ease, background 0.1s ease;
    box-sizing: border-box;
}

.residence-card:hover[b-s21ik645zz] {
    background: var(--neutral-fill-stealth-hover);
}

.residence-card--on[b-s21ik645zz] {
    border-color: var(--accent-fill-rest);
    background: color-mix(in srgb, var(--accent-fill-rest) 10%, transparent);
}

.residence-card--on:hover[b-s21ik645zz] {
    background: color-mix(in srgb, var(--accent-fill-rest) 10%, transparent);
}

/* Single-candidate segment: same card, no interaction affordance. */
.residence-card--static[b-s21ik645zz] {
    cursor: default;
}

/* Visually hidden but focusable/announceable radio (recipe: ModeCardGroup). */
.residence-card__input[b-s21ik645zz] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Forward the hidden input's focus ring onto the card. */
.residence-card:has(.residence-card__input:focus-visible)[b-s21ik645zz] {
    outline: 2px solid var(--accent-fill-rest);
    outline-offset: 2px;
}

.residence-card__title[b-s21ik645zz] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.residence-card__flag[b-s21ik645zz] {
    width: 28px;
    height: 20px;
    object-fit: contain;
    border-radius: 2px;
    box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.2);
    flex-shrink: 0;
}

.residence-card__muni[b-s21ik645zz] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.residence-card__canton[b-s21ik645zz] {
    font-size: 0.75rem;
    color: var(--neutral-foreground-hint);
    margin-left: auto;
    flex-shrink: 0;
}

.residence-card__meta[b-s21ik645zz] {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.75rem;
    color: var(--neutral-foreground-hint);
    min-width: 0;
}

/* State-carrying heuristic tag: the engine auto-picked this domicile by value. */
.residence-heuristic-tag[b-s21ik645zz] {
    margin-left: auto;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--warning-foreground-rest, #9a6700);
    border: 1px solid currentColor;
    border-radius: 3px;
    padding: 0 3px;
    white-space: nowrap;
}

/* Screen-reader-only text (title= alone is not SR-reliable). */
.residence-vh[b-s21ik645zz] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}
/* /Components/Application/Pages/Wizard.razor.rz.scp.css */
/* Styles for the household structure builder have moved to HouseholdStructureForm.razor.css */

/* Wizard miniature (spec 2026-10-29 7): it sits in the right slot of a step title row; on narrow screens it drops below the title. */
@media (max-width: 639px) {
    .wiz-shell[b-bof2h2hasz]  .stack-horizontal:has(> div > .wiz-mini) {
        flex-wrap: wrap;
    }

    .wiz-shell[b-bof2h2hasz]  .stack-horizontal:has(> div > .wiz-mini) > div:last-child {
        flex: 1 0 100%;
        /* IconTitle sets justify-content:flex-end inline on this slot, so the override needs !important. */
        justify-content: flex-start !important;
    }
}
/* /Components/Application/Schematic/AreaNode.razor.rz.scp.css */
/* AreaNode: a round avatar + label, a diagram element (not a card). Spec 2026-10-29 3.1/3.2. */
.area-node[b-cfzfwc47r3] {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    width: 88px;
    /* Room around the button so the 2 px focus ring + 2 px offset is never clipped by a parent. */
    padding: 4px;
    --area-color: var(--w4l-category-default);
    /* Icon colour: muted when off, the area colour when on. */
    --area-icon: var(--neutral-foreground-hint);
}

.area-node--on[b-cfzfwc47r3] { --area-icon: var(--area-color); }

.area-node--compact[b-cfzfwc47r3] { width: 74px; }

.area-node__btn[b-cfzfwc47r3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 100%;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--neutral-foreground-rest);
    font: inherit;
    cursor: pointer;
}

.area-node__btn:disabled[b-cfzfwc47r3] { cursor: not-allowed; }

.area-node__avatar[b-cfzfwc47r3] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--neutral-fill-secondary-rest);
    /* Ring: solid in the area colour when on, dashed neutral when off (state also readable without colour). */
    box-shadow: inset 0 0 0 2px var(--area-color);
}

.area-node--compact .area-node__avatar[b-cfzfwc47r3] { width: 48px; height: 48px; }

.area-node--off .area-node__avatar[b-cfzfwc47r3] {
    box-shadow: none;
    border: 2px dashed var(--neutral-foreground-hint);
}

.area-node--gated .area-node__avatar[b-cfzfwc47r3] {
    /* Hint (not stroke-rest): the pale stroke token fails 3:1 against a tinted box once dimmed. */
    box-shadow: inset 0 0 0 2px var(--neutral-foreground-hint);
}

/* Off: small plus badge, decorative (aria-hidden); aria-pressed carries the state for assistive tech. */
.area-node__plus[b-cfzfwc47r3] {
    display: none;
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-foreground-hint);
    color: var(--neutral-foreground-rest);
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    pointer-events: none;
}

.area-node--off .area-node__plus[b-cfzfwc47r3] { display: flex; }

.area-node__label[b-cfzfwc47r3] {
    font-size: 12px;
    font-weight: 400;
    line-height: 1.15;
    text-align: center;
    color: var(--neutral-foreground-hint);
    /* No automatic hyphenation (it produced "Einkom-men"): the label breaks at word boundaries only, and may be
       wider than its slot: the label is constrained to the node width (button width + 4 px overhang per side, so a 60 px node still fits "Vermögen"), so the soft
       hyphen of a long label (<Area>Break resx keys) breaks it instead of running into the neighbour. */
    hyphens: manual;
    overflow-wrap: break-word;
    white-space: normal;
    box-sizing: border-box;
    margin-inline: -4px;
    width: calc(100% + 8px);
    /* Room for descenders: overflow:hidden (line clamp) would otherwise cut the tail of a "g". */
    padding-bottom: 2px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.area-node--on .area-node__label[b-cfzfwc47r3],
.area-node--gated .area-node__label[b-cfzfwc47r3] {
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

/* Dimmed: .8 (not .7) keeps the muted icon/ring at 3:1 over the lightest box tints; SchematicBoxContrastTests pins
   it through SchematicBoxTint.GatedOpacityPercent (keep both in sync). */
.area-node--gated .area-node__btn[b-cfzfwc47r3] { opacity: .8; }

.area-node__always[b-cfzfwc47r3] {
    display: none;
    font-size: 12px;
    line-height: 1.1;
    color: var(--neutral-foreground-hint);
}

.area-node--fixed .area-node__always[b-cfzfwc47r3] { display: block; }
.area-node--fixed.area-node--no-always .area-node__always[b-cfzfwc47r3] { display: none; }
.area-node--fixed .area-node__btn[b-cfzfwc47r3] { cursor: default; }

/* Visually hidden hint, read through aria-describedby. */
.area-node__hint[b-cfzfwc47r3] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Switch-off badge: always visible (no hover), 24 px glyph, 44 px hit area through the pseudo-element.
   A sibling of the node button, never nested. Hidden for Off/Gated via class, not @if. */
.area-node__off[b-cfzfwc47r3] {
    display: none;
    position: absolute;
    top: 0;
    right: 4px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    width: 24px;
    height: 24px;
}

.area-node--has-off.area-node--on .area-node__off[b-cfzfwc47r3] { display: block; }

/* The 44 px hit area grows only up and to the right: it must never cover the avatar (a tap there navigates). */
.area-node__off[b-cfzfwc47r3]::before {
    content: "";
    position: absolute;
    inset: -20px -20px 0 0;
}

.area-node__off-glyph[b-cfzfwc47r3] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-foreground-hint);
}

.area-node__suggest[b-cfzfwc47r3] {
    position: absolute;
    top: 0;
    left: 4px;
    z-index: 1;
    font-size: 13px;
    line-height: 1;
}

.area-node__feature[b-cfzfwc47r3] {
    position: absolute;
    top: 0;
    right: 4px;
    z-index: 1;
}

/* Premium badge: 24 px glyph, 44 px hit area through the pseudo-element (spec 3.2). */
.area-node__feature[b-cfzfwc47r3]  .w4l-feature-badge { position: relative; }

.area-node__feature[b-cfzfwc47r3]  .w4l-feature-badge::before {
    content: "";
    position: absolute;
    inset: -10px;
}

/* Focus: neutral token, 2 px + 2 px offset, never the area colour. */
.area-node__btn:focus-visible[b-cfzfwc47r3],
.area-node__off:focus-visible[b-cfzfwc47r3] {
    outline: 2px solid var(--neutral-foreground-rest);
    outline-offset: 2px;
}

/* Hover only reinforces (spec 3.2); the scale respects reduced motion. */
@media (prefers-reduced-motion: no-preference) {
    .area-node__avatar[b-cfzfwc47r3] { transition: background-color .15s ease, transform .15s ease; }
    .area-node__btn:not(:disabled):hover .area-node__avatar[b-cfzfwc47r3] { transform: scale(1.06); }
}

.area-node__btn:not(:disabled):hover .area-node__avatar[b-cfzfwc47r3] {
    background: color-mix(in srgb, var(--area-color) 12%, var(--neutral-fill-secondary-rest));
}

@media (max-width: 639px) {
    .area-node__label[b-cfzfwc47r3] { font-size: 13px; }
}
/* /Components/Application/Schematic/AreaSchematic.razor.rz.scp.css */
/* AreaSchematic: boxes at fixed % / px positions (the same numbers the SVG overlay uses, so no JS measuring). */
.area-schematic[b-shxd2kgb2g] {
    /* Container query target: the schematic reacts to its own width, not the viewport (nav and preview dock share the row). */
    container-type: inline-size;
    width: 100%;
}

.area-schematic__canvas[b-shxd2kgb2g] {
    position: relative;
    height: var(--schematic-h);
}

.area-schematic__svg[b-shxd2kgb2g] {
    position: absolute;
    inset: 0;
    /* Arrows: muted neutral, the markers inherit it through currentColor. Pinned >= 3:1 by SchematicBoxContrastTests. */
    color: var(--neutral-foreground-hint);
    overflow: visible;
    pointer-events: none;
}

/*
    A schematic BOX is a diagram element, not a card and not a .w4l-edit-panel (spec 2026-10-29 3.1; Docs/DesignBacklog.md
    knows only three surface patterns). Never reuse it as a content surface.
    The tint percentages come from SchematicBoxTint (--box-tint), the contrast test pins them.
*/
.area-schematic__box[b-shxd2kgb2g] {
    position: absolute;
    left: var(--l);
    width: var(--w);
    top: var(--t);
    height: var(--h);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    padding: 4px 8px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--box-color) var(--box-tint), transparent);
    border: 1px solid color-mix(in srgb, var(--box-color) var(--box-border), transparent);
}

.area-schematic__head[b-shxd2kgb2g] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    min-height: 14px;
    line-height: 14px;
}

/* Title, tag and small text stay in neutral tokens, never the series colour (spec 3.1). */
.area-schematic__title[b-shxd2kgb2g] {
    font-size: 12px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

.area-schematic__title--button[b-shxd2kgb2g] {
    padding: 0;
    border: 0;
    background: transparent;
    font-family: inherit;
    cursor: pointer;
    text-align: left;
}

/* The title button covers the whole box (summary view: one tab stop, the box is the target). */
.area-schematic__title--button[b-shxd2kgb2g]::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

.area-schematic__title--button:focus-visible[b-shxd2kgb2g] { outline: none; }

.area-schematic__box--clickable:has(.area-schematic__title--button:focus-visible)[b-shxd2kgb2g] {
    outline: 2px solid var(--neutral-foreground-rest);
    outline-offset: 2px;
}

.area-schematic__box--clickable[b-shxd2kgb2g] { cursor: pointer; }

.area-schematic__box--clickable:hover[b-shxd2kgb2g] {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--box-color) 70%, transparent);
}

/* Small trailing chevron after the title: the box jumps to the step that captured it. */
.area-schematic__chev[b-shxd2kgb2g] {
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-inline-start: 6px;
    border-top: 1.5px solid var(--neutral-foreground-hint);
    border-right: 1.5px solid var(--neutral-foreground-hint);
    transform: rotate(45deg) translateY(-1px);
}

.area-schematic__box--clickable:hover .area-schematic__chev[b-shxd2kgb2g] { border-color: var(--neutral-foreground-rest); }

.area-schematic__tag[b-shxd2kgb2g] {
    font-size: 12px;
    color: var(--neutral-foreground-hint);
}

.area-schematic__els[b-shxd2kgb2g] {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    min-height: 0;
}

/* Tall boxes (person page: Risks, Expenses and debts) stack their elements one above the other, centred; the single column lays them out in a row again. */
.area-schematic__els--stack[b-shxd2kgb2g] { flex-direction: column; }

/* A box without elements (summary view: only BoxExtra rows) gives its height to the rows. */
.area-schematic__els:not(:has(*))[b-shxd2kgb2g] { flex: 0 0 0; }

/* Elements with an XFraction (Pension) sit at their own x, centred on it. */
.area-schematic__els--placed .area-schematic__el[b-shxd2kgb2g] {
    position: absolute;
    left: var(--x);
    top: 50%;
    transform: translate(-50%, -50%);
}

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

/* Name tag above a person column (couple wizard): a neutral pill centred over the column. */
.area-schematic__name[b-shxd2kgb2g] {
    position: absolute;
    left: var(--l);
    width: var(--w);
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

.area-schematic__name-dot[b-shxd2kgb2g] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex: none;
}

/* Short vertical connector between consecutive boxes, only in the single-column state. */
.area-schematic__box[b-shxd2kgb2g]::before { display: none; }

/*
    Collapse thresholds, derived (the schematic reacts to its OWN width, see container-type above; a column is 27 %).

    Wizard (four nodes in the widest row; the page leaves the schematic ~72 px less than the viewport):
      full    >= 1160 px : four 74 px nodes + 2 x 8 px padding = 312 px / 0.27 = 1156 px.
      compact >=  960 px : four 60 px nodes (44 px avatar) + 2 x 4 px padding = 248 px / 0.27 = 919 px, 960 keeps ~11 px
                           slack for the label overhang; reaches the 3-column picture on a tablet in landscape.
      single column below 960 px. Measured on the real wizard page (couple and single): Task 7 report.

    App pages (person, household) have three nodes per box at most, in three tiers:
      full    >= 1040 px : three 88 px nodes + 2 x 8 px padding = 280 px / 0.27 = 1037 px.
      compact >=  700 px : three 60 px nodes (44 px avatar) + 2 x 4 px padding = 188 px / 0.27 = 696 px; the 12 px label
                           wraps to two lines (hyphenated), never overflows. Reaches the 3-column picture with the
                           navigation open and the preview dock closed at 1280 px.
      single column below 700 px (nav + preview dock both open at 1280 px give ~550 px).
    Measurements and the reasoning: .superpowers/sdd/2026-10-29-planning-areas-schematic/task-6-report.md.
*/
@container (max-width: 959px) {
    .area-schematic:not(.area-schematic--app) .area-schematic__canvas[b-shxd2kgb2g] {
        height: auto;
        display: flex;
        flex-direction: column;
        gap: 28px;
        padding-block: 4px;
    }

    .area-schematic:not(.area-schematic--app) .area-schematic__svg[b-shxd2kgb2g] { display: none; }

    .area-schematic:not(.area-schematic--app) .area-schematic__name[b-shxd2kgb2g] {
        position: static;
        width: auto;
        justify-content: flex-start;
        /* Pulls the tag down to its block, away from the previous one. */
        margin-bottom: -16px;
        margin-top: 8px;
    }

    .area-schematic:not(.area-schematic--app) .area-schematic__box[b-shxd2kgb2g] {
        position: relative;
        left: auto;
        top: auto;
        width: auto;
        height: auto;
    }

    .area-schematic:not(.area-schematic--app) .area-schematic__box[b-shxd2kgb2g]::before {
        display: block;
        content: "";
        position: absolute;
        left: 50%;
        top: -28px;
        height: 28px;
        border-left: 1px solid var(--neutral-foreground-hint);
    }

    /* The first box of a block (the first box, or the one after a name tag) has no predecessor. */
    .area-schematic:not(.area-schematic--app) .area-schematic__canvas > .area-schematic__box--start[b-shxd2kgb2g]::before { display: none; }

    .area-schematic:not(.area-schematic--app) .area-schematic__els[b-shxd2kgb2g],
    .area-schematic:not(.area-schematic--app) .area-schematic__els--placed[b-shxd2kgb2g] {
        flex-wrap: wrap;
        justify-content: space-evenly;
        gap: 4px 8px;
        padding-block: 4px;
    }

    .area-schematic:not(.area-schematic--app) .area-schematic__els--placed .area-schematic__el[b-shxd2kgb2g] {
        position: static;
        transform: none;
    }

    /* Avatars may grow to 64 px in the single column (spec 3.4); compact wizard nodes keep their size. */
    .area-schematic:not(.area-schematic--app) .area-schematic__el[b-shxd2kgb2g]  .area-node:not(.area-node--compact) .area-node__avatar {
        width: 64px;
        height: 64px;
    }
}

@container (max-width: 699px) {
    .area-schematic--app .area-schematic__canvas[b-shxd2kgb2g] {
        height: auto;
        display: flex;
        flex-direction: column;
        gap: 28px;
        padding-block: 4px;
    }

    .area-schematic--app .area-schematic__svg[b-shxd2kgb2g] { display: none; }

    .area-schematic--app .area-schematic__box[b-shxd2kgb2g] {
        position: relative;
        left: auto;
        top: auto;
        width: auto;
        height: auto;
    }

    .area-schematic--app .area-schematic__box[b-shxd2kgb2g]::before {
        display: block;
        content: "";
        position: absolute;
        left: 50%;
        top: -28px;
        height: 28px;
        border-left: 1px solid var(--neutral-foreground-hint);
    }

    /* The first box of a block (the first box, or the one after a name tag) has no predecessor. */
    .area-schematic--app .area-schematic__canvas > .area-schematic__box--start[b-shxd2kgb2g]::before { display: none; }

    .area-schematic--app .area-schematic__els[b-shxd2kgb2g],
    .area-schematic--app .area-schematic__els--placed[b-shxd2kgb2g] {
        flex-wrap: wrap;
        justify-content: space-evenly;
        gap: 4px 8px;
        padding-block: 4px;
    }

    .area-schematic--app .area-schematic__els--stack[b-shxd2kgb2g] { flex-direction: row; }

    .area-schematic--app .area-schematic__els--placed .area-schematic__el[b-shxd2kgb2g] {
        position: static;
        transform: none;
    }

    /* Avatars may grow to 64 px in the single column (spec 3.4); compact wizard nodes keep their size. */
    .area-schematic--app .area-schematic__el[b-shxd2kgb2g]  .area-node:not(.area-node--compact) .area-node__avatar {
        width: 64px;
        height: 64px;
    }
}

/* Compact tier of the app pages: smaller avatar, tighter node and box padding. The wide household column (46 %) keeps the full nodes. */
@container (min-width: 700px) and (max-width: 1039px) {
    .area-schematic--app:not(.area-schematic--wide) .area-schematic__box[b-shxd2kgb2g] {
        padding-inline: 4px;
    }

    .area-schematic--app:not(.area-schematic--wide) .area-schematic__el[b-shxd2kgb2g]  .area-node {
        width: 60px;
    }

    .area-schematic--app:not(.area-schematic--wide) .area-schematic__el[b-shxd2kgb2g]  .area-node .area-node__avatar {
        width: 44px;
        height: 44px;
    }

    .area-schematic--app:not(.area-schematic--wide) .area-schematic__el[b-shxd2kgb2g]  .area-node .area-node__label {
        line-height: 1.1;
        /* 60 px nodes: 4 px overhang per side is too tight for a bold "Einkommen" (it would break mid-word); the 12 px gaps absorb 8 px. */
        margin-inline: -8px;
        width: calc(100% + 16px);
    }
}

/* Compact tier of the wizard: 60 px nodes, tighter box padding (same shape as the app compact tier). */
@container (min-width: 960px) and (max-width: 1159px) {
    .area-schematic:not(.area-schematic--app) .area-schematic__box[b-shxd2kgb2g] {
        padding-inline: 4px;
    }

    .area-schematic:not(.area-schematic--app) .area-schematic__el[b-shxd2kgb2g]  .area-node {
        width: 60px;
    }

    .area-schematic:not(.area-schematic--app) .area-schematic__el[b-shxd2kgb2g]  .area-node .area-node__avatar {
        width: 44px;
        height: 44px;
    }

    .area-schematic:not(.area-schematic--app) .area-schematic__el[b-shxd2kgb2g]  .area-node .area-node__label {
        line-height: 1.1;
        /* 60 px nodes: 4 px overhang per side is too tight for a bold "Einkommen" (it would break mid-word); the 12 px gaps absorb 8 px. */
        margin-inline: -8px;
        width: calc(100% + 16px);
    }
}
/* /Components/Application/Schematic/WizardMiniature.razor.rz.scp.css */
.wiz-mini[b-qxlehmugst] {
    /* Sits in the right slot of the step title row (IconTitle), so the title keeps its place. */
    flex: none;
    margin: 0 0 0 16px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.wiz-mini__svg[b-qxlehmugst] {
    display: block;
    overflow: visible;
}

.wiz-mini__conn[b-qxlehmugst] {
    stroke: var(--neutral-stroke-rest);
    opacity: 0.6;
}

/* Empty must read differently from "later" (dashed outline only): a clearly visible hatch in the hint colour. */
.wiz-mini__hatch[b-qxlehmugst] {
    stroke: var(--neutral-foreground-hint);
    stroke-opacity: 0.7;
}

.wiz-mini__box[b-qxlehmugst] {
    fill: none;
    stroke: var(--neutral-foreground-hint);
    stroke-width: 0.8;
    vector-effect: non-scaling-stroke;
}

.wiz-mini__box--done[b-qxlehmugst] {
    fill: color-mix(in srgb, var(--box-color) 60%, transparent);
    stroke: color-mix(in srgb, var(--box-color) 80%, transparent);
    stroke-width: 1;
}

.wiz-mini__box--now[b-qxlehmugst] {
    stroke: var(--accent-fill-rest);
    stroke-width: 2.5;
    fill: color-mix(in srgb, var(--accent-fill-rest) 12%, transparent);
}

.wiz-mini__box--empty[b-qxlehmugst] {
    stroke-dasharray: 1.5 1.5;
}

.wiz-mini__legend[b-qxlehmugst] {
    display: flex;
    gap: 10px;
    font-size: 12px;
    line-height: 14px;
    color: var(--neutral-foreground-hint);
}

.wiz-mini__legend span[b-qxlehmugst] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.wiz-mini__swatch[b-qxlehmugst] {
    display: inline-block;
    width: 10px;
    height: 8px;
    border-radius: 2px;
    box-sizing: border-box;
}

.wiz-mini__swatch--done[b-qxlehmugst] {
    /* Same recipe as .wiz-mini__box--done (60 % fill, 80 % stroke), in the neutral hint colour instead of the area colour. */
    background: color-mix(in srgb, var(--neutral-foreground-hint) 60%, transparent);
    border: 1px solid color-mix(in srgb, var(--neutral-foreground-hint) 80%, transparent);
}

.wiz-mini__swatch--now[b-qxlehmugst] {
    border: 2px solid var(--accent-fill-rest);
}

@media (max-width: 639px) {
    .wiz-mini[b-qxlehmugst] {
        margin: 0 0 8px 0;
        align-items: flex-start;
    }
}
/* /Components/Application/Shared/ActionPlanAddButton.razor.rz.scp.css */
/* "+" of a plan area: small round icon button; filled while its picker is open. */

.apk-plus[b-ct8ahz5de5] {
    position: relative;
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 50%;
    background: transparent;
    color: var(--neutral-foreground-hint);
    cursor: pointer;
}

/* 44px touch target without growing the visual button. */
.apk-plus[b-ct8ahz5de5]::before {
    content: "";
    position: absolute;
    inset: -10px;
}

.apk-plus:hover[b-ct8ahz5de5],
.apk-plus:focus-visible[b-ct8ahz5de5] {
    background: var(--neutral-fill-secondary-hover);
    color: var(--accent-foreground-rest);
}

.apk-plus:focus-visible[b-ct8ahz5de5] {
    outline: 2px solid var(--accent-fill-rest);
    outline-offset: 1px;
}

.apk-plus--on[b-ct8ahz5de5],
.apk-plus--on:hover[b-ct8ahz5de5] {
    background: var(--accent-fill-rest);
    color: var(--foreground-on-accent-rest);
}
/* /Components/Application/Shared/ActionPlanChecklistRow.razor.rz.scp.css */
/* ActionPlanChecklistRow - the checklist line (hairline pattern like ActionPlanRow, no card). */

.apcl[b-68cwmpab9w] {
    padding: 0.45rem 0;
    border-top: 1px solid var(--neutral-stroke-divider-rest);
}

.apcl-head[b-68cwmpab9w] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* The whole label (chevron + chip + title) is the toggle: a big target, also on touch. */
.apcl-toggle[b-68cwmpab9w] {
    flex: 1 1 12rem;
    min-width: 0;
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.apcl-toggle:hover[b-68cwmpab9w] { background: var(--neutral-fill-secondary-hover); }

.apcl-toggle:focus-visible[b-68cwmpab9w],
.apcl-pin:focus-visible[b-68cwmpab9w] {
    outline: 2px solid var(--accent-fill-rest);
    outline-offset: 1px;
}

.apcl-chevron[b-68cwmpab9w] {
    flex: 0 0 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    transition: transform 120ms ease;
}

@media (prefers-reduced-motion: reduce) {
    .apcl-chevron[b-68cwmpab9w] { transition: none; }
}

.apcl-chevron--open[b-68cwmpab9w] { transform: rotate(90deg); }

.apcl-chip[b-68cwmpab9w] {
    flex: 0 0 auto;
    padding: 0 8px;
    border-radius: 999px;
    border: 1px solid var(--neutral-stroke-rest);
    background: var(--neutral-fill-secondary-rest);
    font-size: var(--type-ramp-minus-1-font-size);
    color: var(--neutral-foreground-rest);
    white-space: nowrap;
}

.apcl-title[b-68cwmpab9w] {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: var(--type-ramp-minus-1-font-size);
    color: var(--neutral-foreground-rest);
}

.apcl--complete .apcl-title[b-68cwmpab9w] { color: var(--neutral-foreground-hint); }

.apcl-origin[b-68cwmpab9w] {
    flex: 0 0 auto;
    font-size: var(--type-ramp-minus-1-font-size);
    color: var(--neutral-foreground-hint);
    white-space: nowrap;
}

.apcl-owner[b-68cwmpab9w] {
    --owner-color: var(--neutral-stroke-rest);
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0 8px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--owner-color) 55%, transparent);
    background: color-mix(in srgb, var(--owner-color) 12%, transparent);
    font-size: var(--type-ramp-minus-1-font-size);
    font-weight: 600;
    white-space: nowrap;
}

.apcl-owner-dot[b-68cwmpab9w] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--owner-color);
}

.apcl-progress[b-68cwmpab9w] {
    flex: 0 0 auto;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.apcl-bar[b-68cwmpab9w] {
    width: 72px;
    height: 6px;
    border-radius: 3px;
    background: var(--neutral-fill-secondary-rest);
    box-shadow: inset 0 0 0 1px var(--neutral-stroke-divider-rest);
    overflow: hidden;
}

.apcl-bar-fill[b-68cwmpab9w] {
    display: block;
    height: 100%;
    background: var(--accent-fill-rest);
}

.apcl--complete .apcl-bar-fill[b-68cwmpab9w] { background: var(--w4l-positive); }

.apcl-count[b-68cwmpab9w] {
    font-size: var(--type-ramp-minus-1-font-size);
    font-variant-numeric: tabular-nums;
    color: var(--neutral-foreground-hint);
}

.apcl-steps[b-68cwmpab9w] {
    list-style: none;
    margin: 0.35rem 0 0;
    padding: 0 0 0 32px;
}

.apcl-steps--pinned[b-68cwmpab9w] { margin-top: 0.15rem; }

/* Expanded list: the library blocks keep their subheadings (e.g. "Meldung an Arbeitgeber"). */
.apcl-block[b-68cwmpab9w] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.apcl-block-title[b-68cwmpab9w] {
    margin: 0.6rem 0 0.1rem;
    font-size: 12px;
    font-weight: 600;
    color: var(--neutral-foreground-hint);
}

.apcl-steps--grouped > .apcl-block-title:first-child[b-68cwmpab9w] { margin-top: 0.2rem; }

.apcl-step[b-68cwmpab9w] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 0.25rem 0;
}

.apcl-step-label[b-68cwmpab9w] {
    position: relative;
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    cursor: pointer;
}

.apcl-visually-hidden[b-68cwmpab9w] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.apcl-check[b-68cwmpab9w] {
    flex: 0 0 auto;
    align-self: flex-start;
    margin: 0.2em 0 0;
}

.apcl-step-text[b-68cwmpab9w] {
    flex: 1;
    min-width: 0;
    font-size: var(--type-ramp-base-font-size);
    color: var(--neutral-foreground-rest);
}

/* Done items fade like a done measure row (.apr-row--done), no strike-through. */
.apcl-step--done[b-68cwmpab9w] {
    opacity: 0.5;
}

.apcl-step--done .apcl-step-text[b-68cwmpab9w] {
    color: var(--neutral-foreground-hint);
}

.apcl-pin[b-68cwmpab9w] {
    flex: 0 0 auto;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    min-height: 24px;
    padding: 0;
    border: none;
    border-radius: 4px;
    background: transparent;
    cursor: pointer;
    opacity: 0.75;
}

.apcl-remove[b-68cwmpab9w],
.apcl-linked[b-68cwmpab9w] {
    position: relative;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 0;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.apcl-remove[b-68cwmpab9w] { min-width: 28px; min-height: 28px; opacity: 0.75; }
.apcl-remove:hover[b-68cwmpab9w] { opacity: 1; background: var(--neutral-fill-secondary-hover); }

/* 44 px hit area around the 28 px button. */
.apcl-remove[b-68cwmpab9w]::before { content: ""; position: absolute; inset: -8px; }

.apcl-linked[b-68cwmpab9w] {
    align-self: flex-start;
    padding: 0 4px;
    font-size: var(--type-ramp-minus-1-font-size);
    color: var(--accent-foreground-rest);
    text-decoration: underline;
}

.apcl-linked:focus-visible[b-68cwmpab9w],
.apcl-remove:focus-visible[b-68cwmpab9w] {
    outline: 2px solid var(--accent-fill-rest);
    outline-offset: 1px;
}

.apcl-pin:hover:not(:disabled)[b-68cwmpab9w],
.apcl-pin--on[b-68cwmpab9w] { opacity: 1; }

.apcl-pin:disabled[b-68cwmpab9w] { cursor: default; }

/* No leading hairline when the checklist is the first row of its group (no measures above it). */
.aps-rows > .apcl:first-child[b-68cwmpab9w],
.apsb-rows > .apcl:first-child[b-68cwmpab9w] { border-top: none; }

@media (max-width: 640px) {
    /* The text wraps, not the indent: items stay right of the title. */
    .apcl-steps[b-68cwmpab9w] { padding-left: 32px; }

    /* Title on its own line; origin, progress and the remove button share the second one. */
    .apcl-toggle[b-68cwmpab9w] { flex-basis: 100%; }
    .apcl-origin[b-68cwmpab9w] { padding-left: 32px; }
    .apcl-progress[b-68cwmpab9w] { flex: 1 1 auto; justify-content: flex-end; margin-left: auto; padding-left: 0; }
    .apcl-bar[b-68cwmpab9w] { width: 56px; }
}

/* Arrival flash (class added by actionPlan.js when a picker choice or jump lands on this row). */
.apcl.ap-group-flash[b-68cwmpab9w] {
    animation: apclFlash-b-68cwmpab9w 1.6s ease;
}

@keyframes apclFlash-b-68cwmpab9w {
    0% { box-shadow: 0 0 0 2px var(--accent-fill-rest); }
    100% { box-shadow: 0 0 0 2px transparent; }
}
/* /Components/Application/Shared/ActionPlanFilterBar.razor.rz.scp.css */
/* ActionPlanFilterBar — die geteilte Pill-Optik lebt in utilities.css (.w4l-pill*).
   Hier nur die komponenten-spezifischen Extras. */

.ap-filter-spacer[b-gps0b80prv] {
    flex: 1;
    min-width: 8px;
}

.ap-filter-reset[b-gps0b80prv] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 1.5px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: var(--neutral-foreground-hint);
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.ap-filter-reset:hover[b-gps0b80prv] {
    background: var(--neutral-fill-secondary-hover);
}

/* Mobile: the pill bar scrolls horizontally instead of wrapping into many rows. */
@media (max-width: 639px) {
    .w4l-pillbar[b-gps0b80prv] {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 2px;
    }

    .w4l-pillbar[b-gps0b80prv]::-webkit-scrollbar {
        display: none;
    }
}
/* /Components/Application/Shared/ActionPlanMeasurePanel.razor.rz.scp.css */
/* ActionPlanMeasurePanel — FAST-free edit panel of the Massnahmenplan.
   Surface comes from .w4l-edit-panel (utilities.css); here only the internals. */

.apm-panel[b-y0xs3zfpra] {
    margin: 8px 0 12px 0;
}

/* ── Header: title + [Delete] │ hairline │ [X] (FundForm order, native) ────── */

.apm-head[b-y0xs3zfpra] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
}

.apm-title[b-y0xs3zfpra] {
    flex: 1;
    min-width: 0;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    white-space: normal;
    overflow-wrap: anywhere;
}

/* Own measures: icon + auto-growing multi-line title field (native textarea, FAST-free). */
.apm-head--edit[b-y0xs3zfpra] {
    align-items: flex-start;
}

.apm-head--edit[b-y0xs3zfpra]  .apm-title-icon {
    flex: 0 0 auto;
    margin-top: 2px;
}

.apm-title-wrap[b-y0xs3zfpra] {
    flex: 1;
    min-width: 0;
    position: relative;
}

.apm-title-input[b-y0xs3zfpra] {
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-height: 1.4em;
    margin: 0;
    padding: 0 0 3px 0;
    border: none;
    outline: none;
    background: transparent;
    resize: none;
    field-sizing: content;
    overflow-wrap: anywhere;
    font-family: inherit;
    font-size: var(--type-ramp-plus-2-font-size, 20px);
    font-weight: 600;
    line-height: 1.3;
    color: var(--neutral-foreground-rest);
    caret-color: var(--accent-fill-rest);
}

.apm-title-wrap[b-y0xs3zfpra]::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: calc(var(--focus-stroke-width, 2) * 1px);
    background-color: var(--accent-fill-rest);
    border-radius: 1px;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 300ms cubic-bezier(0.1, 0.9, 0.2, 1);
    pointer-events: none;
}

.apm-title-wrap:focus-within[b-y0xs3zfpra]::after {
    transform: scaleX(1);
}

.apm-actions[b-y0xs3zfpra] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.apm-icon-btn[b-y0xs3zfpra] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--neutral-foreground-rest);
    cursor: pointer;
}

.apm-icon-btn:hover[b-y0xs3zfpra] {
    background: var(--neutral-fill-secondary-hover);
}

/* Rot nur als Hover-Hinweis, kein Klick-Zustand (DesignBacklog §3). */
.apm-delete:hover svg[b-y0xs3zfpra] {
    color: var(--error, #d13438);
}

.apm-sep[b-y0xs3zfpra] {
    width: 1px;
    height: 18px;
    background: var(--neutral-stroke-rest);
    margin: 0 2px;
}

/* ── Mobile three-dot menu (native <details>) ──────────────────────────────── */

.apm-actions__mobile[b-y0xs3zfpra] {
    display: none;
    position: relative;
}

.apm-actions__mobile summary[b-y0xs3zfpra] {
    list-style: none;
}

.apm-actions__mobile summary[b-y0xs3zfpra]::-webkit-details-marker {
    display: none;
}

.apm-menu[b-y0xs3zfpra] {
    position: absolute;
    right: 0;
    top: 30px;
    z-index: 20;
    min-width: 120px;
    padding: 4px;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 6px;
    background: var(--neutral-layer-floating, var(--fill-color));
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

.apm-menu button[b-y0xs3zfpra] {
    display: block;
    width: 100%;
    padding: 6px 10px;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--neutral-foreground-rest);
    text-align: left;
    cursor: pointer;
}

.apm-menu button:hover[b-y0xs3zfpra] {
    background: var(--neutral-fill-secondary-hover);
}

@media (max-width: 639px) {
    .apm-actions__desktop[b-y0xs3zfpra] {
        display: none;
    }

    .apm-actions__mobile[b-y0xs3zfpra] {
        display: inline-flex;
    }
}

/* ── Pill rows (own measures): Responsible + Type, both single-select ──────── */

.apm-pillrow[b-y0xs3zfpra] {
    margin: 6px 0 0 0;
}

.apm-pillrow + .apm-fields[b-y0xs3zfpra] {
    margin-top: 12px;
}

.apm-pillrow-label[b-y0xs3zfpra] {
    align-self: center;
    margin-right: 4px;
    font-size: var(--type-ramp-minus-1-font-size);
    color: var(--neutral-foreground-hint);
}

/* ── Timing radio group ─────────────────────────────────────────────────────── */

.apm-radio-row[b-y0xs3zfpra] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 18px;
    min-height: 32px;
    align-items: center;
}

.apm-radio[b-y0xs3zfpra] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    color: var(--neutral-foreground-rest);
}

.apm-radio input[type="radio"][b-y0xs3zfpra] {
    margin: 0;
    accent-color: var(--accent-fill-rest);
    cursor: pointer;
}

/* ── Fields ────────────────────────────────────────────────────────────────── */

.apm-fields[b-y0xs3zfpra] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 16px;
}

.apm-field[b-y0xs3zfpra] {
    display: block;
    min-width: 0;
}

.apm-field--wide[b-y0xs3zfpra] {
    grid-column: 1 / -1;
}

/* Shared field components (TextField / YearMonthField / NumberField) stretch to the cell. */
.apm-field[b-y0xs3zfpra]  .ym-field {
    display: block;
    width: 100%;
}

@media (max-width: 639px) {
    .apm-fields[b-y0xs3zfpra] {
        grid-template-columns: 1fr;
    }
}

/* Native inputs styled like .w4l-select (utilities.css) so the panel reads as one system. */
.apm-input[b-y0xs3zfpra] {
    font-family: var(--body-font, "Segoe UI", sans-serif);
    font-size: var(--type-ramp-base-font-size, 14px);
    height: 32px;
    width: 100%;
    box-sizing: border-box;
    padding: 0 8px;
    border: calc(var(--stroke-width, 1) * 1px) solid var(--neutral-stroke-rest, #d1d1d1);
    border-radius: calc(var(--control-corner-radius, 4) * 1px);
    background-color: var(--neutral-fill-input-rest, #fafafa);
    color: var(--neutral-foreground-rest, #242424);
    outline: none;
}

.apm-input:hover[b-y0xs3zfpra] {
    border-color: var(--neutral-stroke-hover, #a1a1a1);
}

.apm-input:focus[b-y0xs3zfpra] {
    border-color: var(--accent-fill-rest, #0078d4);
    box-shadow: 0 0 0 1px var(--accent-fill-rest, #0078d4);
}

.apm-textarea[b-y0xs3zfpra] {
    height: auto;
    padding: 6px 8px;
    resize: vertical;
}

/* ── Generated (read-only) view ────────────────────────────────────────────── */

.apm-generated-hint[b-y0xs3zfpra] {
    margin-bottom: 10px;
    font-size: var(--type-ramp-minus-1-font-size);
    color: var(--neutral-foreground-hint);
}

.apm-readonly[b-y0xs3zfpra] {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 24px;
    color: var(--neutral-foreground-rest);
}

.apm-cat-dot[b-y0xs3zfpra] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: 0 0 auto;
}

/* ── Footer of an own measure: Delete · Move ........ Done ──────────────────── */

.apm-footer[b-y0xs3zfpra] {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 12px;
}

.apm-footer-spacer[b-y0xs3zfpra] {
    flex: 1;
}

.apm-txtbtn[b-y0xs3zfpra] {
    padding: 4px 2px;
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: var(--type-ramp-base-font-size);
    color: var(--neutral-foreground-rest);
    cursor: pointer;
}

.apm-txtbtn:hover[b-y0xs3zfpra] {
    color: var(--accent-fill-rest);
    text-decoration: underline;
}

.apm-txtbtn--danger[b-y0xs3zfpra],
.apm-txtbtn--danger:hover[b-y0xs3zfpra] {
    color: var(--error);
}

/* Touch: real targets, and no hover to reveal what is dangerous. */
@media (pointer: coarse) {
    .apm-txtbtn[b-y0xs3zfpra] { min-height: 40px; padding: 8px 10px; }
}

.apm-donebtn[b-y0xs3zfpra] {
    padding: 5px 18px;
    border: none;
    border-radius: calc(var(--control-corner-radius, 4) * 1px);
    background: var(--accent-fill-rest);
    color: var(--foreground-on-accent-rest);
    font-family: inherit;
    font-size: var(--type-ramp-base-font-size);
    cursor: pointer;
}

.apm-donebtn:hover[b-y0xs3zfpra] {
    background: var(--accent-fill-hover);
}

/* Touch: Done is as tall as Delete / Move. */
@media (pointer: coarse) {
    .apm-donebtn[b-y0xs3zfpra] { min-height: 40px; }
}

.apm-moverow .apm-year-select[b-y0xs3zfpra] {
    width: auto;
    min-width: 88px;
    align-self: center;
}
/* /Components/Application/Shared/ActionPlanOverview.razor.rz.scp.css */
/* ActionPlanOverview — two stacked GanttTimeline instances on one shared scale.
   ::deep adjustments keep the shared component untouched. */

.ap-ov[b-hcubwib8l8] {
    display: flex;
    flex-direction: column;
    margin-bottom: 8px;
}

/* ── Diamond lane: event emojis / cluster badges via DiamondTemplate ───────── */

/* Emojis and cluster badges are click targets (scroll-to-node / expand) — read as links. */
.ap-ov-events[b-hcubwib8l8]  .gantt-diamond {
    cursor: pointer;
}

/* Fallback for events without a known emoji: replicates the former neutral diamond. */
.ap-ov-diamond-fallback[b-hcubwib8l8] {
    width: 14px;
    height: 14px;
    transform: rotate(45deg);
    background-color: color-mix(in srgb, var(--neutral-foreground-hint) 70%, transparent);
    border: 1.5px solid var(--neutral-foreground-hint);
    border-radius: 2px;
}

/* Count badge for a multi-event cluster. */
.ap-ov-cluster-badge[b-hcubwib8l8] {
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--neutral-foreground-hint) 25%, transparent);
    border: 1.5px solid var(--neutral-foreground-hint);
    color: var(--neutral-foreground-rest);
    font-size: 11px;
    font-weight: 700;
}

.ap-ov-cluster-badge--open[b-hcubwib8l8] {
    background: var(--accent-fill-rest);
    border-color: var(--accent-fill-rest);
    color: var(--foreground-on-accent-rest);
}

/* Expanded cluster: one chip per event group, directly under the events lane. */
.ap-ov-cluster-strip[b-hcubwib8l8] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 2px 0 6px;
    padding-left: 228px; /* under the timeline area, past the 220px label column */
}

@media (max-width: 899px) {
    .ap-ov-cluster-strip[b-hcubwib8l8] {
        padding-left: 0;
    }
}

/* ── Brush lane (first lane — carries the shared year axis) ────────────────── */

.ap-ov-brush[b-hcubwib8l8] {
    margin-bottom: 2px;
}

.ap-ov-brush[b-hcubwib8l8]  .gantt-row {
    min-height: 30px;
}

/* Permanent selection is a means to keep the grips active — it must not read as "active row". */
.ap-ov-brush[b-hcubwib8l8]  .gantt-row.gantt-row-selected {
    background: transparent;
}

.ap-ov-brush[b-hcubwib8l8]  .gantt-bar {
    height: 16px;
    background: color-mix(in srgb, var(--accent-fill-rest) 22%, transparent);
    border: 1.5px solid var(--accent-fill-rest);
}

.ap-ov-brush-label[b-hcubwib8l8] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--type-ramp-minus-1-font-size);
    color: var(--neutral-foreground-hint);
    white-space: nowrap;
}

.ap-ov-brush-reset[b-hcubwib8l8] {
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 999px;
    background: transparent;
    color: var(--neutral-foreground-rest);
    font-size: var(--type-ramp-minus-2-font-size);
    padding: 0 8px;
    cursor: pointer;
}

.ap-ov-brush-reset:hover[b-hcubwib8l8] {
    background: var(--neutral-fill-secondary-hover);
}

/* ── Cluster strip chips ────────────────────────────────────────────────────── */

.ap-ov-chip[b-hcubwib8l8] {
    --cat-color: var(--neutral-stroke-rest);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    padding: 2px 10px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--cat-color) 45%, transparent);
    background: color-mix(in srgb, var(--cat-color) 10%, transparent);
    color: var(--neutral-foreground-rest);
    font-size: var(--type-ramp-minus-1-font-size);
    cursor: pointer;
}

.ap-ov-chip-text[b-hcubwib8l8] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ap-ov-chip-until[b-hcubwib8l8] {
    color: var(--neutral-foreground-hint);
    white-space: nowrap;
}

@media (max-width: 639px) {
    /* Touch: the brush lane needs a bigger hit area. */
    .ap-ov-brush[b-hcubwib8l8]  .gantt-row {
        min-height: 44px;
    }
}
/* /Components/Application/Shared/ActionPlanOwnEventPanel.razor.rz.scp.css */
/* ActionPlanOwnEventPanel — FAST-free edit panel of an own event, under its heading in the spine.
   Surface comes from .w4l-edit-panel (utilities.css); here only the internals. Tokens only (dark mode). */

.aoe-panel[b-nd6ffauwib] {
    margin: 4px 0 12px 0;
}

.aoe-field[b-nd6ffauwib] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 10px;
}

.aoe-title[b-nd6ffauwib] {
    box-sizing: border-box;
    width: 100%;
    max-width: 480px;
    padding: 5px 8px;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: calc(var(--control-corner-radius, 4) * 1px);
    background: var(--neutral-layer-1);
    color: var(--neutral-foreground-rest);
    font-family: inherit;
    font-size: var(--type-ramp-base-font-size);
}

.aoe-title:focus[b-nd6ffauwib] {
    outline: 2px solid var(--accent-fill-rest);
    outline-offset: -1px;
}

.aoe-who[b-nd6ffauwib] {
    margin: 0 0 10px 0;
}

.aoe-label[b-nd6ffauwib] {
    align-self: center;
    margin-right: 4px;
    font-size: var(--type-ramp-minus-1-font-size);
    color: var(--neutral-foreground-hint);
}

.aoe-year[b-nd6ffauwib] {
    width: auto;
    min-width: 88px;
    align-self: flex-start;
}

/* ── Footer: Delete ........ Done ─────────────────────────────────────────── */

.aoe-footer[b-nd6ffauwib] {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 12px;
}

.aoe-footer-spacer[b-nd6ffauwib] {
    flex: 1;
}

.aoe-txtbtn[b-nd6ffauwib] {
    padding: 4px 2px;
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: var(--type-ramp-base-font-size);
    color: var(--neutral-foreground-rest);
    cursor: pointer;
}

.aoe-txtbtn:hover[b-nd6ffauwib] {
    color: var(--accent-fill-rest);
    text-decoration: underline;
}

.aoe-txtbtn--danger[b-nd6ffauwib],
.aoe-txtbtn--danger:hover[b-nd6ffauwib] {
    color: var(--error);
}

.aoe-donebtn[b-nd6ffauwib] {
    padding: 5px 18px;
    border: none;
    border-radius: calc(var(--control-corner-radius, 4) * 1px);
    background: var(--accent-fill-rest);
    color: var(--foreground-on-accent-rest);
    font-family: inherit;
    font-size: var(--type-ramp-base-font-size);
    cursor: pointer;
}

.aoe-donebtn:hover[b-nd6ffauwib] {
    background: var(--accent-fill-hover);
}

/* Touch: real targets. */
@media (pointer: coarse) {
    .aoe-txtbtn[b-nd6ffauwib] { min-height: 40px; padding: 8px 10px; }
    .aoe-donebtn[b-nd6ffauwib] { min-height: 40px; }
}

@media (pointer: coarse), (max-width: 640px) {
    .aoe-who .w4l-pill[b-nd6ffauwib] { min-height: 32px; }
}

@media (max-width: 640px) {
    .aoe-title[b-nd6ffauwib] { max-width: none; }
}
/* /Components/Application/Shared/ActionPlanPicker.razor.rz.scp.css */
/* Picker panel under a "+" (UX concept A.2/A.4): sticky search on top, sticky "Measure" line below,
   the middle scrolls. Tokens only. */

.apk[b-ljc19prevf] {
    position: relative;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    max-width: 100%;
    max-height: min(70dvh, 480px);
    margin: 6px 0 10px 0;
    padding: 0;
    overflow: hidden;
}

.apk-top[b-ljc19prevf] {
    flex: none;
    padding: 10px 10px 6px 10px;
}

.apk-search[b-ljc19prevf] {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 12px;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 6px;
    background: var(--neutral-fill-input-rest, var(--fill-color));
    color: var(--neutral-foreground-rest);
    font: inherit;
    font-size: 16px; /* no iOS zoom on focus */
}

.apk-search:focus-visible[b-ljc19prevf] {
    outline: 2px solid var(--accent-fill-rest);
    outline-offset: -1px;
}

.apk-scroll[b-ljc19prevf] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 0 6px;
}

.apk-sep[b-ljc19prevf] {
    margin: 10px 8px 2px 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--neutral-foreground-hint);
}

.apk-list[b-ljc19prevf] {
    margin: 0;
    padding: 0;
    list-style: none;
}

.apk-nohits[b-ljc19prevf] {
    margin: 10px 8px;
    color: var(--neutral-foreground-hint);
}

.apk-opt[b-ljc19prevf] {
    display: flex;
    align-items: center;
    gap: 10px;
    box-sizing: border-box;
    width: 100%;
    min-height: 38px;
    padding: 8px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--neutral-foreground-rest);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

button.apk-opt:hover[b-ljc19prevf],
button.apk-opt:focus-visible[b-ljc19prevf] {
    background: var(--neutral-fill-secondary-hover);
}

button.apk-opt:focus-visible[b-ljc19prevf] {
    outline: 2px solid var(--accent-fill-rest);
    outline-offset: -2px;
}

.apk-opt--muted[b-ljc19prevf],
.apk-opt--off[b-ljc19prevf] {
    color: var(--neutral-foreground-hint);
}

.apk-opt--off[b-ljc19prevf] {
    cursor: default;
}

.apk-text[b-ljc19prevf] {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Long step texts (up to ~370 characters): two lines, the title attribute carries the rest. */
.apk-text--clamp[b-ljc19prevf] {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

/* Item rows: the library block title (e.g. "Meldung an Arbeitgeber") as a small line above the step. */
.apk-stack[b-ljc19prevf] {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

.apk-kicker[b-ljc19prevf] {
    overflow: hidden;
    font-size: 12px;
    color: var(--neutral-foreground-hint);
    white-space: nowrap;
    text-overflow: ellipsis;
}

.apk-meta[b-ljc19prevf] {
    flex: none;
    max-width: 40%;
    padding-left: 8px;
    font-size: 12px;
    color: var(--neutral-foreground-hint);
    text-align: right;
}

@media (max-width: 639px) {
    /* Narrow: the theme title goes under the step text instead of squeezing it. */
    .apk-opt[b-ljc19prevf] { flex-wrap: wrap; row-gap: 2px; }
    .apk-meta[b-ljc19prevf] { flex: 1 0 100%; max-width: 100%; padding-left: 0; text-align: left; }
}

/* Same look as the green checklist chip of the plan rows (.apcl-chip), re-defined for this scope. */
.apk-chip[b-ljc19prevf] {
    display: none;
    flex: 0 0 auto;
    padding: 0 8px;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 999px;
    background: var(--neutral-fill-secondary-rest);
    font-size: var(--type-ramp-minus-1-font-size);
    color: var(--neutral-foreground-rest);
    white-space: nowrap;
}

@media (min-width: 640px) {
    .apk-chip[b-ljc19prevf] {
        display: inline-block;
    }
}

.apk-foot[b-ljc19prevf] {
    flex: none;
    padding: 4px 6px 6px 6px;
    border-top: 1px solid var(--neutral-stroke-rest);
}

.apk-create[b-ljc19prevf] {
    color: var(--accent-foreground-rest);
    font-weight: 600;
}

.apk-plus-glyph[b-ljc19prevf] {
    flex: none;
    width: 1em;
    text-align: center;
}

/* Visually hidden live region for the result count. */
.apk-live[b-ljc19prevf] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

@media (hover: none), (pointer: coarse) {
    .apk-opt[b-ljc19prevf] {
        min-height: 44px;
    }
}

/* "Event" block (slice 3): the row opens a small native form under the foot line. */
.apk-event[b-ljc19prevf] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 6px 8px 8px 8px;
}

.apk-event[hidden][b-ljc19prevf] {
    display: none;
}

.apk-event-title[b-ljc19prevf] {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 12px;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 6px;
    background: var(--neutral-fill-input-rest, var(--fill-color));
    color: var(--neutral-foreground-rest);
    font: inherit;
    font-size: 16px; /* no iOS zoom on focus */
}

.apk-event-title:focus-visible[b-ljc19prevf] {
    outline: 2px solid var(--accent-fill-rest);
    outline-offset: -1px;
}

.apk-event-who-label[b-ljc19prevf] {
    align-self: center;
    margin-right: 4px;
    font-size: var(--type-ramp-minus-1-font-size);
    color: var(--neutral-foreground-hint);
}

.apk-event-create[b-ljc19prevf] {
    align-self: flex-start;
    padding: 5px 18px;
    border: none;
    border-radius: calc(var(--control-corner-radius, 4) * 1px);
    background: var(--accent-fill-rest);
    color: var(--foreground-on-accent-rest);
    font-family: inherit;
    font-size: var(--type-ramp-base-font-size);
    cursor: pointer;
}

.apk-event-create:hover:not(:disabled)[b-ljc19prevf] {
    background: var(--accent-fill-hover);
}

.apk-event-create:disabled[b-ljc19prevf] {
    opacity: 0.5;
    cursor: default;
}

.apk-event-hint[b-ljc19prevf] {
    margin: 0;
    font-size: 11px;
    color: var(--neutral-foreground-hint);
}

@media (pointer: coarse), (max-width: 640px) {
    .apk-event .w4l-pill[b-ljc19prevf] { min-height: 32px; }
}

@media (pointer: coarse) {
    .apk-event-create[b-ljc19prevf] { min-height: 40px; }
}
/* /Components/Application/Shared/ActionPlanResetDialog.razor.rz.scp.css */
.aprd[b-dugx4zuk9i] { display: flex; flex-direction: column; gap: 16px; width: 100%; }
.aprd-options[b-dugx4zuk9i] { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.aprd-option[b-dugx4zuk9i] { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.aprd-option input[b-dugx4zuk9i] { margin-top: 3px; }
.aprd-option:has(input:disabled)[b-dugx4zuk9i] { opacity: .55; cursor: default; }
.aprd-text[b-dugx4zuk9i] { display: flex; flex-direction: column; gap: 2px; }
.aprd-label[b-dugx4zuk9i] { font-weight: 600; }
.aprd-hint[b-dugx4zuk9i] { color: var(--neutral-foreground-hint); font-size: var(--type-ramp-minus-1-font-size); }
.aprd-footer[b-dugx4zuk9i] { display: flex; justify-content: space-between; gap: 8px; margin-top: 8px; }

/* No danger appearance in the repo: tint the accent button with the error token. */
.aprd-footer[b-dugx4zuk9i]  .aprd-danger::part(control) {
    background: transparent;
    color: var(--error);
    border: 1px solid var(--error);
}
/* /Components/Application/Shared/ActionPlanRow.razor.rz.scp.css */
/* ActionPlanRow — one measure line (.w4l-row hairline pattern, no cards). Shared by the
   standing block and the year spine; the host owns the surrounding list and dividers. */

.apr-row[b-b5dh23cys6] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 0.45rem 0;
}

.apr-row + .apr-row[b-b5dh23cys6] {
    border-top: 1px solid var(--neutral-stroke-divider-rest);
}

.apr-row--done[b-b5dh23cys6] {
    opacity: 0.5;
}

.apr-row--done .apr-text[b-b5dh23cys6] {
    color: var(--neutral-foreground-hint);
}

.apr-row--selected[b-b5dh23cys6] {
    background: color-mix(in srgb, var(--accent-fill-rest) 8%, transparent);
    border-radius: 4px;
}

.apr-check[b-b5dh23cys6] {
    flex: 0 0 auto;
    align-self: center;
    margin: 0;
}

.apr-text[b-b5dh23cys6] {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    padding: 0;
    text-align: left;
    font-size: var(--type-ramp-base-font-size);
    font-family: inherit;
    color: var(--neutral-foreground-rest);
    cursor: pointer;
}

.apr-text:hover[b-b5dh23cys6] {
    color: var(--accent-fill-rest);
}

.apr-untitled[b-b5dh23cys6] {
    color: var(--neutral-foreground-hint);
    font-style: italic;
}

.apr-hint-badge[b-b5dh23cys6],
.apr-src-badge[b-b5dh23cys6] {
    display: inline-block;
    margin-left: 6px;
    padding: 0 6px;
    border-radius: 8px;
    font-size: var(--type-ramp-minus-2-font-size);
    background: var(--neutral-fill-secondary-rest);
    color: var(--neutral-foreground-hint);
    text-decoration: none;
}

.apr-remarks[b-b5dh23cys6] {
    flex: 0 0 auto;
    color: var(--neutral-foreground-hint);
    font-size: var(--type-ramp-minus-1-font-size);
    cursor: help;
}

.apr-owner-chip[b-b5dh23cys6] {
    --owner-color: var(--neutral-stroke-rest);
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0 8px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--owner-color) 55%, transparent);
    background: color-mix(in srgb, var(--owner-color) 12%, transparent);
    font-size: var(--type-ramp-minus-1-font-size);
    font-weight: 600;
    white-space: nowrap;
}

.apr-owner-dot[b-b5dh23cys6] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--owner-color);
}

.apr-when-chip[b-b5dh23cys6] {
    --cat-color: var(--neutral-stroke-rest);
    flex: 0 0 auto;
    padding: 0 8px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--cat-color) 45%, transparent);
    background: color-mix(in srgb, var(--cat-color) 10%, transparent);
    font-size: var(--type-ramp-minus-1-font-size);
    font-variant-numeric: tabular-nums;
    color: var(--neutral-foreground-rest);
    white-space: nowrap;
}

.apr-theme[b-b5dh23cys6] {
    flex: 0 0 auto;
    font-size: var(--type-ramp-minus-1-font-size);
    color: var(--neutral-foreground-hint);
    white-space: nowrap;
}

/* ── Severity axis — the two ends carry a class, the recommended default stays plain. ── */
.apr-row--critical[b-b5dh23cys6] {
    border-left: 2px solid var(--w4l-negative);
    padding-left: 6px;
    margin-left: -8px;
}

.apr-row--info .apr-text[b-b5dh23cys6] {
    color: var(--neutral-foreground-hint);
}

.apr-sev-badge[b-b5dh23cys6] {
    display: inline-block;
    margin-left: 6px;
    padding: 0 6px;
    border-radius: 8px;
    font-size: var(--type-ramp-minus-2-font-size);
    font-weight: 600;
    letter-spacing: 0.02em;
    background: color-mix(in srgb, var(--w4l-negative) 15%, transparent);
    color: var(--w4l-negative);
    text-decoration: none;
}

.apr-row--done.apr-row--critical[b-b5dh23cys6] {
    border-left-color: transparent;
}

/* ── Deadlines — a Verwirkungsfrist is filled, a procedural deadline outlined. ── */
.apr-deadline-badge[b-b5dh23cys6] {
    display: inline-block;
    margin-left: 6px;
    padding: 0 6px;
    border-radius: 8px;
    font-size: var(--type-ramp-minus-2-font-size);
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    border: 1px solid var(--neutral-stroke-rest);
    color: var(--neutral-foreground-hint);
}

.apr-deadline-badge--forfeit[b-b5dh23cys6] {
    border-color: transparent;
    background: var(--w4l-negative);
    color: var(--foreground-on-accent-rest);
}

.apr-row--done .apr-deadline-badge--forfeit[b-b5dh23cys6] {
    background: transparent;
    border-color: var(--neutral-stroke-rest);
    color: var(--neutral-foreground-hint);
}

/* ── Mobile ── */
@media (max-width: 639px) {
    .apr-row[b-b5dh23cys6] {
        flex-wrap: wrap;
    }

    .apr-when-chip[b-b5dh23cys6],
    .apr-theme[b-b5dh23cys6] {
        margin-left: 26px;
        order: 5;
    }
}
/* /Components/Application/Shared/ActionPlanSpine.razor.rz.scp.css */
/* ActionPlanSpine — vertical year spine. Rail language borrowed from /Timeline
   (solid past / dashed future); the measure rows themselves live in
   ActionPlanRow.razor.css, this file only styles the spine scaffolding. */

/* One dashed rail for the whole spine - drawn once on the container, so the dash phase never
   restarts at a node boundary. Past rows lay a solid line over it; future rows draw nothing. */
.aps-spine[b-ztz9tixf0d] {
    position: relative;
    display: flex;
    flex-direction: column;
}

.aps-spine[b-ztz9tixf0d]::before {
    content: "";
    position: absolute;
    left: 14px; /* centre of the 28px rail column */
    top: 13px;
    bottom: 13px;
    width: 3px;
    transform: translateX(-50%);
    background: repeating-linear-gradient(
        to bottom,
        var(--neutral-stroke-strong-rest) 0px,
        var(--neutral-stroke-strong-rest) 2px,
        transparent 2px,
        transparent 6px
    );
    pointer-events: none;
}

/* ── Node: rail column + body ──────────────────────────────────────────────── */

.aps-node[b-ztz9tixf0d] {
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: 0 10px;
    scroll-margin-top: 80px; /* anchor jumps land below the sticky header */
}

.aps-rail[b-ztz9tixf0d] {
    position: relative;
}

/* Solid past overlay (past nodes and gaps between past years). */
.aps-rail-line[b-ztz9tixf0d] {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 3px;
    transform: translateX(-50%);
    background: var(--neutral-stroke-strong-rest);
}

.aps-rail-dot[b-ztz9tixf0d] {
    position: absolute;
    left: 50%;
    top: 8px;
    width: 11px;
    height: 11px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: var(--neutral-layer-1, var(--fill-color));
    border: 3px solid var(--neutral-stroke-strong-rest);
    z-index: 1;
}

.aps-body[b-ztz9tixf0d] {
    min-width: 0;
    padding: 4px 0 18px 0;
}

/* ── Node head ─────────────────────────────────────────────────────────────── */

.aps-head[b-ztz9tixf0d] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 0 4px 4px 0;
    border-radius: 4px;
    cursor: pointer;
}

.aps-head:hover[b-ztz9tixf0d] {
    background: var(--neutral-fill-secondary-hover);
}

.aps-head--collapsed[b-ztz9tixf0d] {
    color: var(--neutral-foreground-hint);
}

/* The chevron is the only focusable control of the head; 24px hit area, rotates when open. */
.aps-toggle[b-ztz9tixf0d] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-left: -4px;
    padding: 0;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--neutral-foreground-rest);
    cursor: pointer;
    flex-shrink: 0;
}

.aps-toggle:hover[b-ztz9tixf0d] {
    background: var(--neutral-fill-stealth-hover);
}

.aps-toggle:focus-visible[b-ztz9tixf0d] {
    outline: 2px solid var(--accent-fill-rest);
    outline-offset: -2px;
}

.aps-toggle-icon[b-ztz9tixf0d] {
    display: inline-flex;
    line-height: 1;
    transition: transform 120ms ease;
}

.aps-head:not(.aps-head--collapsed) .aps-toggle-icon[b-ztz9tixf0d] {
    transform: rotate(90deg);
}

.aps-year[b-ztz9tixf0d] {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--accent-foreground-rest);
    white-space: nowrap;
}

.aps-title[b-ztz9tixf0d] {
    font-weight: 600;
    font-size: var(--type-ramp-plus-1-font-size);
    color: var(--neutral-foreground-rest);
    min-width: 0;
}

.aps-check[b-ztz9tixf0d] {
    color: var(--w4l-positive);
    font-weight: 700;
}

.aps-done-count[b-ztz9tixf0d] {
    font-size: var(--type-ramp-minus-1-font-size);
    color: var(--neutral-foreground-hint);
    white-space: nowrap;
}

.aps-owner-chip[b-ztz9tixf0d] {
    --owner-color: var(--neutral-stroke-rest);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 1px 8px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--owner-color) 55%, transparent);
    background: color-mix(in srgb, var(--owner-color) 12%, transparent);
    font-size: var(--type-ramp-minus-1-font-size);
    font-weight: 600;
    white-space: nowrap;
}

.aps-owner-dot[b-ztz9tixf0d] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--owner-color);
}

/* ── Collapsed year: event chips ─────────────────────────────────────────── */

.aps-chip[b-ztz9tixf0d] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0 8px;
    border-radius: 999px;
    border: 1px solid var(--neutral-stroke-rest);
    background: var(--neutral-fill-secondary-rest);
    color: var(--neutral-foreground-rest);
    font-size: var(--type-ramp-minus-1-font-size);
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
}

.aps-chip:hover[b-ztz9tixf0d] {
    background: var(--neutral-fill-secondary-hover);
    border-color: var(--accent-fill-rest);
}

.aps-chip--own[b-ztz9tixf0d] {
    cursor: default;
    color: var(--neutral-foreground-hint);
}

.aps-chip-range[b-ztz9tixf0d],
.aps-chip-owner[b-ztz9tixf0d] {
    color: var(--neutral-foreground-hint);
    font-variant-numeric: tabular-nums;
}

/* ── Expanded year: event sub-heading ───────────────────────────────────── */

.aps-event[b-ztz9tixf0d] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    margin: 10px 0 2px 0;
    scroll-margin-top: 80px; /* anchor jumps land below the sticky header */
}

.aps-event .aps-title[b-ztz9tixf0d] {
    font-size: var(--type-ramp-base-font-size);
}

.aps-event--own .aps-title[b-ztz9tixf0d] {
    color: var(--neutral-foreground-hint);
}

.aps-event-range[b-ztz9tixf0d] {
    font-size: var(--type-ramp-minus-1-font-size);
    color: var(--neutral-foreground-hint);
    font-variant-numeric: tabular-nums;
}

/* ── Measure rows (row anatomy lives in ActionPlanRow.razor.css) ───────────── */

.aps-rows[b-ztz9tixf0d] {
    display: flex;
    flex-direction: column;
    padding-left: 26px;
}

.aps-panel-slot[b-ztz9tixf0d] {
    margin-top: 6px;
}

/* Picker under a year head: capped width like the prototype. */
.aps-picker-slot[b-ztz9tixf0d] {
    max-width: 640px;
}

/* ── Gap: the invisible 16px line between nodes; "+" and year chips show on hover/focus/open ─ */

.aps-gap[b-ztz9tixf0d] {
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: 0 10px;
    height: 16px;
    position: relative;
}

.aps-gap-rail[b-ztz9tixf0d] {
    grid-column: 1;
    grid-row: 1;
    position: relative;
}

/* At rest the "+" is invisible and inert, so its hit area never swallows clicks meant for the nodes.
   Positioned against the whole .aps-gap row, so `left` is the rail column's centre (28 px column ->
   14 px, 18 px on mobile -> 9 px), the same line as .aps-spine::before. */
.aps-gap-plus[b-ztz9tixf0d] {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 22px;
    height: 22px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    z-index: 3;
    border: 1px solid var(--accent-fill-rest);
    background: var(--fill-color);
    color: var(--accent-foreground-rest);
    font: inherit;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity .12s;
}

/* Hit area 28 x 40: exactly the rail column wide, so it never reaches a neighbouring node's chevron. */
.aps-gap-plus[b-ztz9tixf0d]::before {
    content: "";
    position: absolute;
    inset: -9px -3px;
}

.aps-gap:has(:focus-visible) .aps-gap-plus[b-ztz9tixf0d],
.aps-gap--open .aps-gap-plus[b-ztz9tixf0d] {
    opacity: 1;
    pointer-events: auto;
}

.aps-gap:has(:focus-visible) .aps-gap-rail[b-ztz9tixf0d]::after,
.aps-gap--open .aps-gap-rail[b-ztz9tixf0d]::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    border-left: 2px solid var(--accent-fill-rest);
    transform: translateX(-50%);
}

/* The chips show only when the gap is pinned open (click / tap) or reached by keyboard - never on hover,
   so a pointer crossing a gap never covers the next node. :focus-visible, not :focus-within: a clicked
   chip keeps focus, and the popover must still close once the draft year is opened. */
.aps-gap-chips[b-ztz9tixf0d] {
    display: flex;
    visibility: hidden;
    opacity: 0;
    position: absolute;
    left: 38px;
    top: -10px;
    z-index: 5;
    flex-wrap: wrap;
    gap: 6px;
    max-width: min(560px, calc(100% - 38px));
    max-height: 9.5rem;
    overflow-y: auto;
    padding: 8px 10px;
    background: var(--neutral-layer-floating, var(--fill-color));
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
}

.aps-gap:has(:focus-visible) .aps-gap-chips[b-ztz9tixf0d],
.aps-gap--open .aps-gap-chips[b-ztz9tixf0d] {
    visibility: visible;
    opacity: 1;
}

/* Hover (mouse only): the rail or the "+" shows the "+" and the blue rail line - no chips. */
@media (hover: hover) {
    .aps-gap:has(.aps-gap-rail:hover) .aps-gap-plus[b-ztz9tixf0d],
    .aps-gap:has(.aps-gap-plus:hover) .aps-gap-plus[b-ztz9tixf0d] {
        opacity: 1;
        pointer-events: auto;
    }

    .aps-gap:has(.aps-gap-rail:hover) .aps-gap-rail[b-ztz9tixf0d]::after,
    .aps-gap:has(.aps-gap-plus:hover) .aps-gap-rail[b-ztz9tixf0d]::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 0;
        bottom: 0;
        border-left: 2px solid var(--accent-fill-rest);
        transform: translateX(-50%);
    }
}

.aps-gap-chips-label[b-ztz9tixf0d] {
    width: 100%;
    font-size: var(--type-ramp-minus-2-font-size);
    color: var(--neutral-foreground-hint);
}

.aps-gap-chip[b-ztz9tixf0d] {
    min-height: 32px;
    padding: 3px 12px;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 999px;
    background: transparent;
    color: var(--neutral-foreground-rest);
    font: inherit;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
}

.aps-gap-chip:hover[b-ztz9tixf0d] {
    background: var(--neutral-fill-secondary-hover);
    color: var(--accent-foreground-rest);
}

/* Touch has no hover: keep the "+" faintly visible; a tap pins .aps-gap--open. */
@media (hover: none), (pointer: coarse) {
    .aps-gap-plus[b-ztz9tixf0d] {
        opacity: .6;
        pointer-events: auto;
        border-style: dashed;
    }
}

@media (max-width: 639px) {
    .aps-gap-plus[b-ztz9tixf0d] {
        left: 9px;
        width: 18px;
        height: 18px;
    }

    .aps-gap-plus[b-ztz9tixf0d]::before {
        inset: -13px -8px;
    }

    .aps-gap-chips[b-ztz9tixf0d] {
        left: 26px;
        max-width: calc(100% - 26px);
    }

    .aps-gap-chip[b-ztz9tixf0d] {
        min-height: 36px;
    }
}

/* Draft year (no content yet): hollow grey dot until the first measure or checklist arrives. */
.aps-rail-dot--draft[b-ztz9tixf0d] {
    background: var(--neutral-layer-1, var(--fill-color));
    border-color: var(--neutral-stroke-rest);
    border-style: dashed;
}

/* Today pill at the past/future seam - same badge vocabulary as the phase badge, accent-outlined. */
.aps-today-row[b-ztz9tixf0d] {
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: 0 10px;
    margin: 2px 0;
}

.aps-today-pill[b-ztz9tixf0d] {
    grid-column: 2;
    justify-self: start;
    padding: 1px 9px;
    border-radius: 999px;
    border: 1px solid var(--accent-fill-rest);
    background: var(--neutral-layer-1, var(--fill-color));
    color: var(--accent-foreground-rest);
    font-size: var(--type-ramp-minus-1-font-size);
    font-weight: 600;
    white-space: nowrap;
}

/* Event emoji in the event sub-heading (Timeline convention). */
.aps-emoji[b-ztz9tixf0d] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

/* ── Phase badge on the rail ───────────────────────────────────────────────── */

.aps-phase-badge-row[b-ztz9tixf0d] {
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: 0 10px;
    margin: 2px 0;
}

.aps-phase-badge[b-ztz9tixf0d] {
    grid-column: 2;
    justify-self: start;
    padding: 1px 9px;
    border-radius: 999px;
    background: var(--neutral-fill-secondary-rest);
    color: var(--neutral-foreground-hint);
    font-size: var(--type-ramp-minus-1-font-size);
    font-weight: 600;
    white-space: nowrap;
}

/* ── Caps: start dot / end flag, or a fade when the window clips the period ─── */

.aps-cap[b-ztz9tixf0d] {
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: 0 10px;
    align-items: center;
    min-height: 26px;
}

.aps-cap--start[b-ztz9tixf0d] { margin-bottom: 4px; }
.aps-cap--end[b-ztz9tixf0d] { margin-top: 4px; }

.aps-cap .aps-rail[b-ztz9tixf0d] { align-self: stretch; }

.aps-cap-dot[b-ztz9tixf0d] {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 13px;
    height: 13px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: var(--accent-fill-rest);
    border: 2px solid var(--neutral-layer-1, var(--fill-color));
    z-index: 1;
}

.aps-cap-flag[b-ztz9tixf0d] {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    line-height: 1;
    background: var(--neutral-layer-1, var(--fill-color));
    border-radius: 50%;
    padding: 1px;
    z-index: 1;
}

.aps-cap-label[b-ztz9tixf0d] {
    font-size: var(--type-ramp-minus-1-font-size);
    color: var(--neutral-foreground-hint);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Cover fade over the rail (works for both the dashed container rail and the solid past overlay). */
.aps-fade[b-ztz9tixf0d] {
    position: absolute;
    left: 0;
    right: 0;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

.aps-fade--top[b-ztz9tixf0d] {
    top: 0;
    background: linear-gradient(to bottom, var(--neutral-layer-1, var(--fill-color)), transparent);
}

.aps-fade--bottom[b-ztz9tixf0d] {
    bottom: 0;
    background: linear-gradient(to top, var(--neutral-layer-1, var(--fill-color)), transparent);
}

/* ── Anchor flash (added by actionPlan.js on deep-link arrival) ────────────── */

.ap-group-flash[b-ztz9tixf0d] {
    animation: apsFlash-b-ztz9tixf0d 1.6s ease;
}

@keyframes apsFlash-b-ztz9tixf0d {
    0% { box-shadow: 0 0 0 2px var(--accent-fill-rest); }
    100% { box-shadow: 0 0 0 2px transparent; }
}

/* ── Mobile ────────────────────────────────────────────────────────────────── */

@media (max-width: 639px) {
    .aps-node[b-ztz9tixf0d],
    .aps-gap[b-ztz9tixf0d],
    .aps-phase-badge-row[b-ztz9tixf0d],
    .aps-today-row[b-ztz9tixf0d],
    .aps-cap[b-ztz9tixf0d] {
        grid-template-columns: 18px 1fr;
        gap: 0 8px;
    }

    .aps-spine[b-ztz9tixf0d]::before {
        left: 9px;
    }

    .aps-rows[b-ztz9tixf0d] {
        padding-left: 12px;
    }
}

/* ── Own events (slice 3) ───────────────────────────────────────────────── */

.aps-event--ownev[b-ztz9tixf0d] {
    align-items: center;
}

.aps-event--ownev .aps-title[b-ztz9tixf0d] {
    flex: 0 1 auto;
    overflow-wrap: anywhere;
}

/* Subtitle sits on its own line, flush with the title edge (ring 14px + gap 8px). */
.aps-own-sub[b-ztz9tixf0d] {
    flex-basis: 100%;
    padding-left: 22px;
    font-size: var(--type-ramp-minus-1-font-size);
    color: var(--neutral-foreground-hint);
}

.aps-own-edit[b-ztz9tixf0d] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--neutral-foreground-hint);
    cursor: pointer;
}

.aps-own-edit:hover[b-ztz9tixf0d],
.aps-own-edit[aria-expanded="true"][b-ztz9tixf0d] {
    background: var(--neutral-fill-secondary-hover);
    color: var(--neutral-foreground-rest);
}

.aps-own-edit:focus-visible[b-ztz9tixf0d] {
    outline: 2px solid var(--accent-fill-rest);
    outline-offset: 1px;
}

@media (max-width: 640px), (pointer: coarse) {
    .aps-own-edit[b-ztz9tixf0d] {
        width: 32px;
        height: 32px;
    }
}

/* Collapsed year: the chip keeps the neutral pill; the ring is the only own-event signal besides the title. */
.aps-spine:focus[b-ztz9tixf0d] {
    outline: none; /* programmatic focus fallback only (tabindex -1) */
}

.aps-chip--ownev[b-ztz9tixf0d] {
    border-color: var(--accent-fill-rest);
}

/* Visually hidden, announced politely. */
.aps-live[b-ztz9tixf0d] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}
/* /Components/Application/Shared/ActionPlanStandingBlock.razor.rz.scp.css */
/* ActionPlanStandingBlock — two hairline-row columns, stacked on narrow screens. */

.apsb[b-6846sjwozk] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 32px;
    align-items: start;
}

.apsb-col[b-6846sjwozk] {
    min-width: 0;
}

.apsb-colhead[b-6846sjwozk] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 0 0 4px 0;
    border-bottom: 2px solid var(--neutral-stroke-rest);
    margin-bottom: 2px;
}

.apsb-glyph[b-6846sjwozk] {
    color: var(--neutral-foreground-hint);
    font-weight: 700;
}

.apsb-title[b-6846sjwozk] {
    font-weight: 600;
    font-size: var(--type-ramp-plus-1-font-size);
    color: var(--neutral-foreground-rest);
}

.apsb-count[b-6846sjwozk] {
    margin-left: auto;
    font-size: var(--type-ramp-minus-1-font-size);
    color: var(--neutral-foreground-hint);
    white-space: nowrap;
}

.apsb-rows[b-6846sjwozk] {
    display: flex;
    flex-direction: column;
}

.apsb-panel-slot[b-6846sjwozk] {
    margin: 6px 0 10px 0;
}

@media (max-width: 639px) {
    .apsb[b-6846sjwozk] {
        grid-template-columns: 1fr;
        gap: 18px;
    }
}
/* /Components/Application/Shared/AdvisorReviewDialog.razor.rz.scp.css */
.w4l-revdlg-backdrop[b-5io5vvlgjm] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(15, 23, 42, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.w4l-revdlg[b-5io5vvlgjm] {
    width: min(560px, 100%);
    max-height: 90vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.25);
}

.w4l-revdlg-title[b-5io5vvlgjm] {
    margin: 0;
    font-size: 1.05rem;
    color: var(--neutral-foreground-rest);
}

.w4l-revdlg-field[b-5io5vvlgjm] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.w4l-revdlg-label[b-5io5vvlgjm] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

.w4l-revdlg-sub[b-5io5vvlgjm] {
    font-weight: 400;
    color: var(--neutral-foreground-hint);
}

.w4l-revdlg-skill[b-5io5vvlgjm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 3px 0;
}

.w4l-revdlg-skill-pick[b-5io5vvlgjm] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    cursor: pointer;
    min-width: 0;
}

.w4l-revdlg-skill-stars[b-5io5vvlgjm] {
    display: flex;
    gap: 2px;
    flex: 0 0 auto;
}

.w4l-revdlg-skill-stars--lg .w4l-revdlg-star[b-5io5vvlgjm] {
    font-size: 22px;
    padding: 0 2px;
}

.w4l-revdlg-star[b-5io5vvlgjm] {
    background: none;
    border: none;
    padding: 0 1px;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    color: var(--neutral-stroke-rest);
}

.w4l-revdlg-star.is-on[b-5io5vvlgjm] {
    color: var(--w4l-rating-star, #e8a33d);
}

.w4l-revdlg-text[b-5io5vvlgjm] {
    font: inherit;
    font-size: 0.9rem;
    color: var(--neutral-foreground-rest);
    background: var(--neutral-layer-2);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 6px;
    padding: 8px 10px;
    width: 100%;
    box-sizing: border-box;
    resize: vertical;
}

.w4l-revdlg-radio[b-5io5vvlgjm] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    cursor: pointer;
}

.w4l-revdlg-hint[b-5io5vvlgjm] {
    margin: 0;
    font-size: 0.8rem;
    color: var(--neutral-foreground-hint);
    line-height: 1.5;
}

/* A hint, not a rejection: it states what would be removed, and the send button stays enabled. */
.w4l-revdlg-warn[b-5io5vvlgjm] {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--w4l-warning-fg, #b45309);
}

.w4l-revdlg-rules[b-5io5vvlgjm] {
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--neutral-foreground-hint);
    padding: 8px 10px;
    background: var(--neutral-fill-secondary);
    border-radius: 6px;
}

.w4l-revdlg-actions[b-5io5vvlgjm] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.w4l-revdlg-cancel[b-5io5vvlgjm],
.w4l-revdlg-send[b-5io5vvlgjm] {
    font: inherit;
    font-size: 0.88rem;
    padding: 7px 16px;
    border-radius: 6px;
    cursor: pointer;
}

.w4l-revdlg-cancel[b-5io5vvlgjm] {
    background: transparent;
    border: 1px solid var(--neutral-stroke-rest);
    color: var(--neutral-foreground-rest);
}

.w4l-revdlg-send[b-5io5vvlgjm] {
    background: var(--accent-fill-rest);
    border: 1px solid var(--accent-fill-rest);
    color: var(--foreground-on-accent-rest, #fff);
    font-weight: 600;
}

.w4l-revdlg-send:disabled[b-5io5vvlgjm] {
    opacity: 0.5;
    cursor: default;
}

/* ── Own review, read-only ─────────────────────────────────────────────────
   Shown instead of the "you already reviewed" notice. */
.w4l-revdlg-own-row[b-5io5vvlgjm] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 2px 0;
}

.w4l-revdlg-own-caption[b-5io5vvlgjm] {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.85rem;
    color: var(--neutral-foreground-rest);
}

.w4l-revdlg-own-stars[b-5io5vvlgjm] {
    display: inline-flex;
    gap: 2px;
    flex: 0 0 auto;
}

/* Same glyph and colours as the interactive row, without the affordances — no pointer,
   no hit area, so it reads as a record rather than a control. */
.w4l-revdlg-star.is-static[b-5io5vvlgjm] {
    cursor: default;
    padding: 0 1px;
}

.w4l-revdlg-own-text[b-5io5vvlgjm] {
    margin: 0;
    padding: 10px 12px;
    border-radius: 6px;
    background: var(--neutral-layer-2);
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--neutral-foreground-rest);
    white-space: pre-wrap;
}
/* /Components/Application/Shared/AdvisorReviewList.razor.rz.scp.css */
.w4l-rev-list[b-t0qymn2l4e] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.w4l-rev[b-t0qymn2l4e] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 14px;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 8px;
    background: var(--neutral-layer-2);
}

.w4l-rev-head[b-t0qymn2l4e] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.w4l-rev-skills[b-t0qymn2l4e] {
    font-size: 0.82rem;
    color: var(--neutral-foreground-rest);
}

.w4l-rev-meta[b-t0qymn2l4e] {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    font-size: 0.78rem;
    color: var(--neutral-foreground-hint);
}

.w4l-rev-verified[b-t0qymn2l4e] {
    color: var(--accent-foreground-rest);
    font-weight: 600;
}

.w4l-rev-disputed[b-t0qymn2l4e] {
    color: var(--w4l-warning-fg, #b45309);
}

.w4l-rev-text[b-t0qymn2l4e] {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--neutral-foreground-rest);
    white-space: pre-wrap;
}

/* Indented but not shrunk — the reply stands in for a deletion right, so it must not read as a
   footnote to the review it answers. */
.w4l-rev-response[b-t0qymn2l4e] {
    margin-top: 4px;
    padding-inline-start: 12px;
    border-inline-start: 2px solid var(--neutral-stroke-rest);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.w4l-rev-response-label[b-t0qymn2l4e] {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--neutral-foreground-hint);
}

.w4l-rev-empty[b-t0qymn2l4e] {
    margin: 8px 4px;
    font-size: 0.85rem;
    color: var(--neutral-foreground-hint);
}
/* /Components/Application/Shared/AllocationRiskBar.razor.rz.scp.css */
/* AllocationRiskBar — the allocation bar doubling as the slider track.

   ::deep is used deliberately: the visual is AssetAllocationView, whose own scoped CSS sizes
   .aav-bar for read-only display (14px). Here it is a drag target and needs a grabbable height,
   so it is re-sized from the outside rather than by adding a "mode" parameter to that component. */

.arb[b-d77jpgzfuc] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    user-select: none;
}

.arb__header[b-d77jpgzfuc] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.75rem;
}

.arb__title[b-d77jpgzfuc] {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

/* Band-heat chip: a transparent tint plus a hairline in the same hue carries the signal; the text
   stays in the normal foreground at normal weight so it remains legible in both themes (the heat
   scale as type would fail contrast at this size).

   Grid-stacked with a hidden sizer so the chip's width is fixed by the WIDEST content it can ever
   hold — the box must not resize while the value ticks under a drag. */
.arb__value[b-d77jpgzfuc] {
    display: inline-grid;
    font-size: 0.9rem;
    font-weight: 400;
    color: var(--neutral-foreground-rest);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    padding: 2px 10px;
    border-radius: 4px;
    border: 1px solid transparent;
}

.arb__value-sizer[b-d77jpgzfuc],
.arb__value-text[b-d77jpgzfuc] {
    grid-area: 1 / 1;
    text-align: center;
}

/* Reserves the width without being seen or read out. */
.arb__value-sizer[b-d77jpgzfuc] {
    visibility: hidden;
    pointer-events: none;
}

/* ── Band ticks (above the bar) ──
   No horizontal margin: the labels must use the same 0..100% mapping as the track, or they
   drift apart toward the edges. */
.arb__tick-labels[b-d77jpgzfuc] {
    position: relative;
    height: 16px;
}

.arb__tick-label[b-d77jpgzfuc] {
    position: absolute;
    bottom: 0;
    transform: translateX(-50%);
    font-size: 0.75rem;
    color: var(--neutral-foreground-hint);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.arb__tick-label--start[b-d77jpgzfuc] { transform: none; }
.arb__tick-label--end[b-d77jpgzfuc] { transform: translateX(-100%); }

/* Stepped mode carries no tick TEXT (fund names are far too long side by side) — the row collapses
   to a thin gap so the bar does not float under an empty strip. */
.arb__tick-labels--bare[b-d77jpgzfuc] {
    height: 4px;
}

/* Rung marks crossing the bar. In stepped mode these are the snap points; they sit above the
   segments but below the handle, and stay light so they never compete with the allocation. */
.arb__tick[b-d77jpgzfuc] {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 0;
    border-left: 1px solid color-mix(in srgb, var(--neutral-layer-1) 55%, transparent);
    pointer-events: none;
    z-index: 1;
}

/* ── Track area (the rect the drag measures) ── */
.arb__track-area[b-d77jpgzfuc] {
    position: relative;
    touch-action: pan-y pinch-zoom;
    cursor: ew-resize;
}

.arb--readonly .arb__track-area[b-d77jpgzfuc] {
    cursor: default;
}

/* The allocation bar itself, grown to a drag-friendly height. Geometry matches the financing
   bars on Homes → Financing (.fin-bar: 26px / radius 4px) so the two read as the same object. */
.arb__track-area[b-d77jpgzfuc]  .aav-bar {
    height: 26px;
    border-radius: 4px;
}

/* Risk-capacity ceiling. A LINE, not a shaded region above it — the ceiling falls with the
   remaining horizon, so late in a plan it lands on band 1 and a fill would cover the entire
   track, wiping out the allocation it is drawn over. */
.arb__capacity-line[b-d77jpgzfuc] {
    position: absolute;
    top: -3px;
    bottom: -3px;
    width: 0;
    border-left: 1.5px dashed var(--neutral-foreground-hint);
    pointer-events: none;
}

/* The derived recommendation, where there is one. */
.arb__suggested[b-d77jpgzfuc] {
    position: absolute;
    top: -4px;
    bottom: -4px;
    width: 0;
    border-left: 2px dashed var(--accent-fill-rest);
    opacity: 0.85;
    pointer-events: none;
    z-index: 1;
}

/* Split line at the handle — mirrors .fsc-split on the financing structure chart (2.5px, 2px
   proud of the bar top and bottom) so the two draggable bars read as the same mechanism. */
.arb__split[b-d77jpgzfuc] {
    position: absolute;
    left: var(--pos);
    top: -2px;
    bottom: -2px;
    width: 0;
    border-left: 2.5px solid var(--neutral-foreground-rest);
    transform: translateX(-1px);
    pointer-events: none;
    z-index: 2;
}

/* ── Handle ──
   Styled in full here rather than inherited: the .value-slider__knob rules now live globally in utilities.css
   (no longer in ValueSlider's inline <style>), so they are always present; this control still styles its knob in
   full to keep its own ring and size. The class is kept on the element purely as
   the hit-test hook valueSliderDrag.js dispatches on.

   Deliberately the same 16px hit area / 12px circle as the site-wide grip, plus a light ring:
   this knob sits on saturated asset-class colours, not a neutral track. */
.arb__knob[b-d77jpgzfuc] {
    position: absolute;
    left: var(--pos);
    top: 0;
    bottom: 0;
    width: 16px;
    margin-left: -8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: ew-resize;
    touch-action: none;
    z-index: 3;
}

.arb__knob[b-d77jpgzfuc]::before {
    content: "";
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: var(--neutral-layer-1);
    border: 1.5px solid var(--neutral-foreground-rest);
    box-sizing: border-box;
    transition: transform 0.1s ease;
    box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--neutral-layer-1) 85%, transparent),
                0 1px 3px rgb(0 0 0 / 0.35);
}

.arb__knob:hover[b-d77jpgzfuc]::before,
.arb__knob:focus-visible[b-d77jpgzfuc]::before {
    transform: scale(1.18);
}

.arb__knob:focus-visible[b-d77jpgzfuc] {
    outline: 2px solid var(--accent-fill-rest);
    outline-offset: 2px;
    border-radius: 50%;
}

/* ── Smooth drag (valueSliderDrag.js, data-smooth) ──
   While dragging, the script writes --drag-dx (px) on the track area: the knob and the split line follow the pointer
   between detents, the allocation under them snaps. Gated on data-dragging so the resting bar is pixel-identical. On
   release the script sets data-settling and zeroes --drag-dx; the transition runs on left (custom properties do not
   animate), and not at all for reduced motion. */
.arb__track-area[data-dragging] .arb__knob[data-dragging][b-d77jpgzfuc],
.arb__track-area[data-dragging] .arb__split[b-d77jpgzfuc] {
    left: calc(var(--pos) + var(--drag-dx, 0px));
}

@media (prefers-reduced-motion: no-preference) {
    .arb__track-area[data-settling] .arb__knob[data-dragging][b-d77jpgzfuc],
    .arb__track-area[data-settling] .arb__split[b-d77jpgzfuc] {
        transition: left 110ms ease-out;
    }
}

/* Touch: wider hit area + bigger knob, mirroring the site-wide grip. */
@media (pointer: coarse) {
    .arb__knob[b-d77jpgzfuc] {
        width: 32px;
        margin-left: -16px;
    }

    .arb__knob[b-d77jpgzfuc]::before {
        width: 16px;
        height: 16px;
    }
}

/* Touch hit area ≥ 44×44 px, invisible and out of the layout (same rule as ValueSlider in utilities.css). */
@media (pointer: coarse), (any-pointer: coarse) {
    .arb__knob[b-d77jpgzfuc]::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        width: 44px;
        height: 44px;
        transform: translate(-50%, -50%);
    }
}

/* ── Legend ──
   A fixed grid, not a wrapping flex row: with auto-fill columns the row set and column widths
   depend only on the container, so nothing re-flows when a percentage changes width or a class
   drops to 0 %. Percentages are tabular and right-aligned in a fixed column for the same reason —
   the numbers tick in place instead of nudging the labels around. */
.arb__legend[b-d77jpgzfuc] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 4px 16px;
    margin-top: 10px;
}

.arb__legend-item[b-d77jpgzfuc] {
    display: grid;
    grid-template-columns: 10px 1fr 3.2em;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    min-width: 0;
}

/* A class that is absent at this position keeps its row and recedes — it must not vanish, or the
   legend would re-flow exactly when the user is dragging past it. */
.arb__legend-item--empty[b-d77jpgzfuc] {
    opacity: 0.45;
}

.arb__swatch[b-d77jpgzfuc] {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    display: inline-block;
}

.arb__legend-label[b-d77jpgzfuc] {
    color: var(--neutral-foreground-rest);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.arb__legend-pct[b-d77jpgzfuc] {
    color: var(--neutral-foreground-hint);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* ── Marker labels ──
   Names the dashed lines, in the manner of .fsc-mark under the financing structure chart. Without
   these the lines are unexplained decoration. */
.arb__marks[b-d77jpgzfuc] {
    position: relative;
    height: 14px;
    margin-top: 3px;
}

.arb__mark[b-d77jpgzfuc] {
    position: absolute;
    top: 0;
    font-size: 0.68rem;
    line-height: 1;
    white-space: nowrap;
    color: var(--neutral-foreground-hint);
    pointer-events: none;
}

.arb__mark--suggested[b-d77jpgzfuc] {
    color: var(--accent-foreground-rest);
    font-weight: 600;
}
/* /Components/Application/Shared/AppointmentMonthView.razor.rz.scp.css */
.mv-root[b-gutt85z5lf] { border: 1px solid var(--neutral-stroke-rest); border-radius: 8px; overflow: hidden; }
.mv-dow[b-gutt85z5lf] { display: grid; grid-template-columns: repeat(7, 1fr); border-bottom: 1px solid var(--neutral-stroke-rest); }
.mv-dow-cell[b-gutt85z5lf] { padding: 4px; text-align: center; font-size: 0.72rem; color: var(--neutral-foreground-hint); text-transform: uppercase; }
.mv-grid[b-gutt85z5lf] { display: grid; grid-template-columns: repeat(7, 1fr); grid-auto-rows: minmax(84px, auto); }

.mv-day[b-gutt85z5lf] { display: flex; flex-direction: column; align-items: stretch; gap: 2px; padding: 4px; border: none; border-top: 1px solid color-mix(in srgb, var(--neutral-stroke-rest) 50%, transparent); border-left: 1px solid color-mix(in srgb, var(--neutral-stroke-rest) 50%, transparent); background: transparent; color: var(--neutral-foreground-rest); font: inherit; cursor: pointer; text-align: left; min-width: 0; }
.mv-day:hover[b-gutt85z5lf] { background: color-mix(in srgb, var(--accent-fill-rest) 6%, transparent); }
.mv-day:focus-visible[b-gutt85z5lf] { outline: 2px solid var(--accent-fill-rest); outline-offset: -2px; }
.mv-day.is-outside[b-gutt85z5lf] { opacity: 0.45; }
.mv-day.is-today[b-gutt85z5lf] { background-color: color-mix(in srgb, var(--accent-fill-rest) 4%, transparent); }   /* same tint as the week view's today column */
.mv-day.is-today .mv-day-num[b-gutt85z5lf] { color: var(--accent-fill-rest); font-weight: 700; }
.mv-day-num[b-gutt85z5lf] { font-size: 0.8rem; font-variant-numeric: tabular-nums; }

.mv-entries[b-gutt85z5lf] { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mv-chip[b-gutt85z5lf] { display: flex; align-items: center; gap: 4px; border-radius: 4px; padding: 0 3px; font-size: 0.7rem; min-width: 0; }
.mv-chip-text[b-gutt85z5lf] { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mv-dot[b-gutt85z5lf] { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.mv-more[b-gutt85z5lf] { font-size: 0.68rem; color: var(--neutral-foreground-hint); }

.mv-k-confirmed .mv-dot[b-gutt85z5lf] { background: var(--accent-fill-rest); }
.mv-k-pending .mv-dot[b-gutt85z5lf] { background: color-mix(in srgb, var(--accent-fill-rest) 45%, transparent); }
.mv-k-approval .mv-dot[b-gutt85z5lf] { background: var(--w4l-warning); }
.mv-k-past .mv-dot[b-gutt85z5lf] { background: var(--neutral-foreground-hint); }

/* Wide cells: the chip carries the status as a background too (echoes the week-view block
   palette) — a confirmed meeting and an unanswered proposal must differ at a glance.
   In the dot-only degrade (≤110px cells / phones) the chip has no padding, so these tints
   collapse to a faint halo around the dot — acceptable. */
.mv-k-confirmed[b-gutt85z5lf] { background: color-mix(in srgb, var(--accent-fill-rest) 14%, transparent); }
.mv-k-pending[b-gutt85z5lf] { background: color-mix(in srgb, var(--accent-fill-rest) 7%, transparent); }
.mv-k-approval[b-gutt85z5lf] { background: color-mix(in srgb, var(--w4l-warning) 15%, transparent); }

/* Degrade ladder (spec §5): below ~110px cell width the text hides, dot + nothing else;
   ≤639px only dots in a row. Container queries express "cell width", supported everywhere .NET 10 runs. */
.mv-day[b-gutt85z5lf] { container-type: inline-size; }
@container (max-width: 110px) {
    .mv-chip-text[b-gutt85z5lf] { display: none; }
    .mv-chip[b-gutt85z5lf] { padding: 0; }
    .mv-entries[b-gutt85z5lf] { flex-direction: row; flex-wrap: wrap; }
}
@media (max-width: 639px) {
    .mv-grid[b-gutt85z5lf] { grid-auto-rows: minmax(48px, auto); }
    .mv-chip-text[b-gutt85z5lf] { display: none; }
    .mv-entries[b-gutt85z5lf] { flex-direction: row; flex-wrap: wrap; }
}
/* /Components/Application/Shared/AppointmentWeekView.razor.rz.scp.css */
/* Week/day view — all colors are theme tokens or color-mix on tokens (raw-hex lint enforced). */
.wv-root[b-xi7f9dj66l] {
    --wv-row-h: 24px;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 8px;
    overflow: hidden;
}

.wv-head[b-xi7f9dj66l] { display: grid; grid-template-columns: 48px repeat(var(--wv-days), 1fr); border-bottom: 1px solid var(--neutral-stroke-rest); }
.wv-day-head[b-xi7f9dj66l] { padding: 6px 4px; text-align: center; display: flex; flex-direction: column; gap: 1px; }
.wv-day-head.is-today .wv-day-date[b-xi7f9dj66l] { color: var(--accent-fill-rest); font-weight: 600; }
.wv-day-name[b-xi7f9dj66l] { font-size: 0.72rem; color: var(--neutral-foreground-hint); text-transform: uppercase; }
.wv-day-date[b-xi7f9dj66l] { font-size: 0.85rem; }

.wv-body[b-xi7f9dj66l] { display: grid; grid-template-columns: 48px repeat(var(--wv-days), 1fr); outline: none; }
.wv-body:focus-visible[b-xi7f9dj66l] { box-shadow: inset 0 0 0 2px var(--accent-fill-rest); }

.wv-gutter-cell[b-xi7f9dj66l] { height: var(--wv-row-h); font-size: 0.7rem; color: var(--neutral-foreground-hint); text-align: right; padding-right: 6px; font-variant-numeric: tabular-nums; }

.wv-day-col[b-xi7f9dj66l] { position: relative; height: calc(var(--wv-row-h) * var(--wv-rows)); border-left: 1px solid color-mix(in srgb, var(--neutral-stroke-rest) 50%, transparent); background-image: repeating-linear-gradient(to bottom, color-mix(in srgb, var(--neutral-stroke-rest) 35%, transparent) 0 1px, transparent 1px calc(var(--wv-row-h) * 2)); }
.wv-day-col.is-today[b-xi7f9dj66l] { background-color: color-mix(in srgb, var(--accent-fill-rest) 4%, transparent); }

/* Layer 1 — availability / bookable tint. Quiet fill, no borders (spec §4: no graph paper). */
.wv-tint[b-xi7f9dj66l] { position: absolute; left: 0; right: 0; background: color-mix(in srgb, var(--accent-fill-rest) 9%, transparent); pointer-events: none; }

/* Layer 2 — clickable open slots. Invisible at rest inside the tint; lifted on hover/focus. */
.wv-slot[b-xi7f9dj66l] { position: absolute; left: 1px; right: 1px; border: none; background: transparent; cursor: pointer; padding: 0; border-radius: 4px; color: transparent; }
.wv-slot:hover[b-xi7f9dj66l], .wv-slot.is-focused[b-xi7f9dj66l] { background: color-mix(in srgb, var(--accent-fill-rest) 22%, transparent); color: var(--neutral-foreground-rest); }
.wv-slot.is-picked[b-xi7f9dj66l] { background: color-mix(in srgb, var(--accent-fill-rest) 30%, transparent); outline: 2px solid var(--accent-fill-rest); color: var(--neutral-foreground-rest); }
.wv-slot:focus-visible[b-xi7f9dj66l] { outline: 2px solid var(--accent-fill-rest); color: var(--neutral-foreground-rest); }
.wv-slot-time[b-xi7f9dj66l] { font-size: 0.72rem; font-variant-numeric: tabular-nums; }

/* Collect mode (propose times): pickable slots are lifted at rest so the user sees what can be
   picked — the hover-reveal affordance does not exist on touch and is undiscoverable otherwise. */
.wv-root.is-collect .wv-slot[b-xi7f9dj66l] { background: color-mix(in srgb, var(--accent-fill-rest) 14%, transparent); color: var(--neutral-foreground-rest); }
.wv-root.is-collect .wv-slot:hover[b-xi7f9dj66l], .wv-root.is-collect .wv-slot.is-focused[b-xi7f9dj66l] { background: color-mix(in srgb, var(--accent-fill-rest) 26%, transparent); }

/* Layer 3 — appointment blocks. */
.wv-block[b-xi7f9dj66l] { position: absolute; display: flex; flex-direction: column; align-items: flex-start; gap: 0; overflow: hidden; border-radius: 5px; border: 1px solid transparent; padding: 2px 5px; font: inherit; text-align: left; cursor: pointer; min-width: 0; }
.wv-block.is-selected[b-xi7f9dj66l] { outline: 2px solid var(--accent-fill-rest); outline-offset: 1px; }
.wv-block.is-focused[b-xi7f9dj66l] { outline: 2px dashed var(--accent-fill-rest); }
.wv-block:focus-visible[b-xi7f9dj66l] { outline: 2px solid var(--accent-fill-rest); }
.wv-block-time[b-xi7f9dj66l] { font-size: 0.7rem; font-variant-numeric: tabular-nums; opacity: 0.9; }
.wv-block-name[b-xi7f9dj66l] { font-size: 0.76rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.wv-block-mode[b-xi7f9dj66l] { font-size: 0.7rem; }

.wv-b-confirmed[b-xi7f9dj66l] { background: var(--accent-fill-rest); color: var(--foreground-on-accent-rest); }
.wv-b-pending[b-xi7f9dj66l] { background: color-mix(in srgb, var(--accent-fill-rest) 12%, transparent); border: 1px dashed var(--accent-fill-rest); color: var(--neutral-foreground-rest); }
.wv-b-approval[b-xi7f9dj66l] { background: color-mix(in srgb, var(--w4l-warning) 20%, transparent); border-color: var(--w4l-warning); color: var(--neutral-foreground-rest); }
.wv-b-past[b-xi7f9dj66l] { background: var(--neutral-fill-secondary-rest); color: var(--neutral-foreground-hint); }
.wv-b-minutedue[b-xi7f9dj66l] { background: var(--neutral-fill-secondary-rest); color: var(--neutral-foreground-rest); border-color: var(--w4l-warning); border-style: solid; }
.wv-b-cancelled[b-xi7f9dj66l] { background: var(--neutral-fill-secondary-rest); color: var(--neutral-foreground-hint); text-decoration: line-through; opacity: 0.7; }

/* Current time = accent (joins the existing "today = accent" encoding: today column tint +
   today date). Amber is reserved for the needs-approval state on this surface. */
.wv-now[b-xi7f9dj66l] { position: absolute; left: 0; right: 0; height: 2px; background: var(--accent-fill-rest); pointer-events: none; }
.wv-now[b-xi7f9dj66l]::before { content: ""; position: absolute; left: -3px; top: -2px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-fill-rest); }

@media (max-width: 639px) {
    .wv-root[b-xi7f9dj66l] { --wv-row-h: 44px; }   /* touch minimum — the day column scrolls, it never compresses */
}
/* /Components/Application/Shared/AssetAllocationView.razor.rz.scp.css */
/* Stacked variant — segmented bar + legend (carried over from FundAllocationBar). */
.aav-bar[b-3wcr104nmy] {
    display: flex;
    width: 100%;
    height: 14px;
    border-radius: 7px;
    overflow: hidden;
    background: var(--neutral-stroke-rest);
}

.aav-seg[b-3wcr104nmy] { height: 100%; }

.aav-legend[b-3wcr104nmy] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 18px;
    margin-top: 8px;
    margin-bottom: 4px;
}

.aav-legend-item[b-3wcr104nmy] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
}

/* Rows variant — one labelled row per class (carried over from the risk-slider forms). */
.aav-rows[b-3wcr104nmy] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.aav-row[b-3wcr104nmy] {
    display: grid;
    grid-template-columns: 12px minmax(90px, auto) 1fr 36px;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
}

.aav-name[b-3wcr104nmy] { color: var(--neutral-foreground-rest); }

.aav-track[b-3wcr104nmy] {
    height: 8px;
    border-radius: 4px;
    background: color-mix(in srgb, var(--neutral-foreground-hint) 18%, transparent);
    overflow: hidden;
}

.aav-fill[b-3wcr104nmy] {
    display: block;
    height: 100%;
    border-radius: 4px;
    opacity: 0.85;
}

/* Shared */
.aav-swatch[b-3wcr104nmy] {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    display: inline-block;
}

.aav-pct[b-3wcr104nmy] {
    color: var(--neutral-foreground-hint);
    text-align: right;
    font-variant-numeric: tabular-nums;
}
/* /Components/Application/Shared/BeneficiaryOrderEditor.razor.rz.scp.css */
/* BeneficiaryOrderEditor — rank blocks around the ShareBar. Colours come from theme tokens only (no raw hex);
   the person colours live in ShareBar / BeneficiaryResultBlock. */

.ben-order[b-pf8alcuz9t] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
}

.ben-order__titlebar[b-pf8alcuz9t] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 4px 12px;
}

.ben-order__status[b-pf8alcuz9t] {
    margin-left: auto;
    font-size: 0.78rem;
    color: var(--neutral-foreground-hint);
}

.ben-order__rows[b-pf8alcuz9t] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ben-order__rank[b-pf8alcuz9t] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ben-order__rank-head[b-pf8alcuz9t] {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 8px;
}

.ben-order__rank-title[b-pf8alcuz9t] {
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--neutral-foreground-rest);
}

/* The one-line empty rank: "Rang 1 · Ehegatte … — niemand". */
.ben-order__rank-empty[b-pf8alcuz9t] {
    font-size: 0.78rem;
    color: var(--neutral-foreground-hint);
}

.ben-order__rank-badge[b-pf8alcuz9t] {
    font-size: 0.68rem;
    padding: 1px 8px;
    border-radius: 999px;
    white-space: nowrap;
    color: var(--accent-foreground-rest);
    background: color-mix(in srgb, var(--accent-fill-rest) 14%, transparent);
}

/* The split differs from the statutory order: a written notice to the foundation is needed. */
.ben-order__rank-badge--notice[b-pf8alcuz9t] {
    color: var(--neutral-foreground-rest);
    background: color-mix(in srgb, var(--w4l-warning) 22%, transparent);
    cursor: help;
}

.ben-order__rank-badge--idle[b-pf8alcuz9t] {
    color: var(--neutral-foreground-hint);
    background: var(--neutral-fill-stealth-rest);
    white-space: normal;
}

.ben-order__rank-note[b-pf8alcuz9t] {
    margin: 0 0 4px;
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--neutral-foreground-hint);
}

.ben-order__rank-foot[b-pf8alcuz9t] {
    margin: 0;
    font-size: 0.72rem;
    line-height: 1.4;
    color: var(--neutral-foreground-hint);
}

/* A rank behind an occupied rank: grey, 0 %. */
.ben-order__dormant[b-pf8alcuz9t] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.ben-order__dormant-row[b-pf8alcuz9t] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 10px;
    padding: 4px 0;
    font-size: 0.85rem;
    color: var(--neutral-foreground-hint);
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
}

.ben-order__dormant-row:last-child[b-pf8alcuz9t] {
    border-bottom: none;
}

.ben-order__dormant-row .ben-order__name[b-pf8alcuz9t] {
    flex: 1 1 auto;
}

.ben-order__dormant-share[b-pf8alcuz9t] {
    font-variant-numeric: tabular-nums;
}

/* "+" pills of a rank that has nobody yet (inside a ShareBar they are styled by ShareBar.razor.css). */
.ben-order__additions[b-pf8alcuz9t] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ben-order__additions[b-pf8alcuz9t]  .sb__pill--add {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 2px 10px;
    border: 1px dashed var(--neutral-stroke-rest);
    border-radius: 999px;
    background: transparent;
    color: var(--neutral-foreground-hint);
    font: inherit;
    cursor: pointer;
}

.ben-order__additions[b-pf8alcuz9t]  .sb__pill--add:hover {
    color: var(--accent-fill-rest);
    border-color: var(--accent-fill-rest);
}

.ben-order__fallback[b-pf8alcuz9t] {
    font-size: 0.85rem;
}

.ben-order__fallback[open] > .ben-order__fallback-summary[b-pf8alcuz9t] {
    margin-bottom: 8px;
}

/* Footer action of a rank: split equally. */
.ben-order__foot[b-pf8alcuz9t] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 14px;
}

/* Native button styled as a link — a row must stay free of FAST elements (Docs/BlazorFastLeaks.md Rule 1). */
.ben-order__link[b-pf8alcuz9t] {
    border: none;
    background: none;
    padding: 2px 0;
    cursor: pointer;
    font: inherit;
    font-size: 0.78rem;
    color: var(--accent-foreground-rest);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.ben-order__link:hover:not(:disabled)[b-pf8alcuz9t] {
    color: var(--accent-foreground-hover);
}

.ben-order__link:disabled[b-pf8alcuz9t] {
    cursor: default;
    color: var(--neutral-foreground-hint);
    text-decoration: none;
    opacity: 0.6;
}

.ben-order__row[b-pf8alcuz9t] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 4px 0;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
    font-size: 0.85rem;
}

.ben-order__name[b-pf8alcuz9t] {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
}

.ben-order__kind[b-pf8alcuz9t] {
    font-size: 0.68rem;
    opacity: 0.65;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.ben-order__hint[b-pf8alcuz9t] {
    font-size: 0.75rem;
    color: var(--neutral-foreground-hint);
    line-height: 1.4;
}

/* Ranks 3–5: a dashed one-liner. */
.ben-order__lower[b-pf8alcuz9t] {
    font-size: 0.78rem;
    padding: 6px 10px;
    border: 1px dashed var(--neutral-stroke-rest);
    border-radius: 6px;
}

/* One disclosure style for «Falls Rang 1 wegfällt» and «Rang 3–5»: the chevron is a flex item and never wraps away. */
.ben-order__summary[b-pf8alcuz9t] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    list-style: none;
    cursor: pointer;
    font-size: 0.78rem;
    color: var(--neutral-foreground-rest);
}

.ben-order__summary[b-pf8alcuz9t]::-webkit-details-marker {
    display: none;
}

.ben-order__summary[b-pf8alcuz9t]::before {
    content: "›";
    flex: none;
    color: var(--neutral-foreground-hint);
}

details[open] > .ben-order__summary[b-pf8alcuz9t]::before {
    content: "⌄";
}

.ben-order__summary-body[b-pf8alcuz9t] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 8px;
    min-width: 0;
}

.ben-order__lower-facts[b-pf8alcuz9t] {
    color: var(--neutral-foreground-hint);
}
/* /Components/Application/Shared/BeneficiaryResultBlock.razor.rz.scp.css */
.ben-result[b-dv9wcjebfj] {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--neutral-stroke-divider-rest);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ben-result__panel[b-dv9wcjebfj] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ben-result__head[b-dv9wcjebfj] {
    display: flex;
}

.ben-result__pill[b-dv9wcjebfj] {
    display: inline-block;
    padding: 2px 12px;
    border-radius: 999px;
    font-size: var(--type-ramp-minus-1-font-size);
    font-weight: 600;
}

.ben-result__pill--paid[b-dv9wcjebfj] {
    background: var(--accent-fill-rest);
    color: var(--foreground-on-accent-rest);
    border: 1.5px solid var(--accent-fill-rest);
}

.ben-result__pill--potential[b-dv9wcjebfj] {
    background: transparent;
    color: var(--accent-foreground-rest);
    border: 1.5px solid var(--accent-fill-rest);
}

.ben-result__timeline[b-dv9wcjebfj] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: var(--type-ramp-minus-1-font-size);
    color: var(--neutral-foreground-rest);
}

.ben-result__step[b-dv9wcjebfj] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ben-result__node[b-dv9wcjebfj] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.ben-result__node--strong[b-dv9wcjebfj] {
    font-weight: 600;
}

.ben-result__node--muted[b-dv9wcjebfj] {
    color: var(--neutral-foreground-hint);
}

.ben-result__node--death[b-dv9wcjebfj]::before,
.ben-result__node--payout[b-dv9wcjebfj]::before {
    content: "";
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.ben-result__node--death[b-dv9wcjebfj]::before {
    background: var(--error);
}

.ben-result__node--payout[b-dv9wcjebfj]::before {
    background: var(--accent-fill-rest);
}

.ben-result__line[b-dv9wcjebfj] {
    display: inline-block;
    width: 40px;
    border-top: 2px solid var(--neutral-stroke-rest);
}

.ben-result__line--accent[b-dv9wcjebfj] {
    border-top-color: var(--accent-fill-rest);
}

.ben-result__line--dashed[b-dv9wcjebfj] {
    border-top-style: dashed;
}

.ben-result__note[b-dv9wcjebfj] {
    margin: 0;
    font-size: var(--type-ramp-minus-1-font-size);
    color: var(--neutral-foreground-hint);
}

.ben-result__table[b-dv9wcjebfj] {
    width: 100%;
    max-width: 460px;
    /* the global table rule adds a 16px bottom margin (the whitespace under the table) */
    margin: 0;
    border-collapse: collapse;
    font-size: var(--type-ramp-base-font-size);
}

.ben-result__table th[b-dv9wcjebfj],
.ben-result__table td[b-dv9wcjebfj] {
    padding: 4px 8px;
    text-align: left;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
}

.ben-result__table thead th[b-dv9wcjebfj] {
    font-size: var(--type-ramp-minus-1-font-size);
    font-weight: 400;
    color: var(--neutral-foreground-hint);
}

.ben-result__table tfoot th[b-dv9wcjebfj],
.ben-result__table tfoot td[b-dv9wcjebfj] {
    font-weight: 600;
    border-bottom: none;
}

.ben-result__table .ben-result__num[b-dv9wcjebfj] {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.ben-result__swatch[b-dv9wcjebfj] {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    margin-right: 8px;
    vertical-align: middle;
}

.ben-result__swatch--external[b-dv9wcjebfj] {
    background: var(--neutral-fill-strong-rest);
}

@media (max-width: 560px) {
    .ben-result__timeline[b-dv9wcjebfj] {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .ben-result__line[b-dv9wcjebfj] {
        display: none;
    }
}
/* /Components/Application/Shared/CapitalBar/PensionCapitalBar.razor.rz.scp.css */
/* Look = shared ValueSlider classes (utilities.css); only what the slider has no counterpart for lives here. */
.pcb[b-c6jbb41bfh] { margin-top: 12px; container: pcb / inline-size; }
.pcb-area[b-c6jbb41bfh] { margin-top: 2px; }
/* The track = the maximum (D5): it starts at 0 and ends at Max, not at the bar's right edge. */
.pcb-frame[b-c6jbb41bfh] { right: auto; pointer-events: none; }
.pcb-seg[b-c6jbb41bfh] { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; padding: 0 8px; border-radius: 4px;
    font-size: 12px; font-style: normal; white-space: nowrap; overflow: hidden; box-sizing: border-box; pointer-events: none; }
.pcb-seg-label[b-c6jbb41bfh] { position: relative; z-index: 2; overflow: hidden; text-overflow: ellipsis; }
/* A label gets a quiet token ground (and the token foreground on it) so hatch stripes never run through its letters, in both themes. */
.pcb-seg-label:not(:empty)[b-c6jbb41bfh] { padding: 0 4px; border-radius: 3px; background: color-mix(in srgb, var(--neutral-layer-1) 85%, transparent); color: var(--neutral-foreground-rest); }
.pcb-track[b-c6jbb41bfh] { position: absolute; inset: 0 auto 0 0; z-index: 3; }
/* Plan-start estimate marker: a quiet stroke over the track area, its label in its own row above (no connector line). */
.pcb-estimate[b-c6jbb41bfh] { position: absolute; top: -4px; bottom: -4px; width: 0; border-left: 2px solid var(--neutral-foreground-rest);
    box-shadow: 0 0 0 1px var(--neutral-layer-1); z-index: 1; pointer-events: none; }
.pcb-estimate-labels[b-c6jbb41bfh] { position: relative; height: 16px; }
.pcb-estimate-label[b-c6jbb41bfh] { position: absolute; transform: translateX(-50%); white-space: nowrap; font-size: 0.75rem; font-weight: 600;
    line-height: 1; color: var(--neutral-foreground-rest); pointer-events: none; }
.pcb-estimate-label--start[b-c6jbb41bfh] { transform: none; }
.pcb-estimate-label--end[b-c6jbb41bfh] { transform: translateX(-100%); }
.pcb-sr-only[b-c6jbb41bfh] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.pcb-under[b-c6jbb41bfh] { position: relative; height: 16px; font-size: 0.75rem; color: var(--neutral-foreground-hint); }
.pcb-mark[b-c6jbb41bfh] { position: absolute; transform: translateX(-100%); white-space: nowrap; font-weight: 600; color: var(--neutral-foreground-rest); line-height: 1; }
.pcb-legend[b-c6jbb41bfh] { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; color: var(--neutral-foreground-rest); }
.pcb-swatch[b-c6jbb41bfh] { display: inline-block; width: 12px; height: 12px; border-radius: 2px; margin-right: 5px; vertical-align: -2px; box-sizing: border-box; }
/* Narrow bar (container, not viewport): the row flows statically under the track. */
@container pcb (max-width: 32rem) {
    .pcb-label-skip-narrow[b-c6jbb41bfh] { display: none; }
}
/* /Components/Application/Shared/CauseComparisonTable.razor.rz.scp.css */
/* Illness | Accident table. The wrapper is its own size container: the page body declares none, so the 760px
   threshold is measured on the table's own width (works in the narrow work area next to the preview panel). */
.cct[b-74065wj3mv] {
    container-type: inline-size;
    width: 100%;
}

.cct__table[b-74065wj3mv] {
    display: grid;
    grid-template-columns: minmax(8rem, 1.2fr) minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 1rem;
}

/* Rows inherit the table's columns (subgrid) so cells align across rows without display:contents
   (which can drop the table roles in assistive tech). */
.cct__row[b-74065wj3mv] {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / -1;
    align-items: start;
    padding: 0.5rem 0;
    border-top: 1px solid var(--neutral-stroke-divider-rest);
}

.cct__row--head[b-74065wj3mv] {
    border-top: 0;
    padding-top: 0;
}

.cct__head[b-74065wj3mv] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

.cct__label[b-74065wj3mv] {
    font-size: 0.875rem;
    color: var(--neutral-foreground-rest);
    min-width: 0;
    overflow-wrap: anywhere;
}

.cct__cell[b-74065wj3mv] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.cct__value[b-74065wj3mv] {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.cct__sub[b-74065wj3mv] {
    font-size: 12px;
    font-weight: 400;
    /* Sichttest M-1: the hint token measured 4.48:1 (light) / 4.06:1 (dark) on the panel fill - below 4.5:1. */
    color: var(--neutral-foreground-rest);
    overflow-wrap: anywhere;
}

/* Accident equals illness: quieter by weight, at full opacity and in the full-contrast foreground (Sichttest M-1: the hint
   token stayed below 4.5:1 on the panel fill in both themes). */
.cct__cell--same .cct__value[b-74065wj3mv] {
    font-weight: 400;
    color: var(--neutral-foreground-rest);
}

/* Total row ("Insgesamt"): heavier top rule and bold label/values; stays bold in a muted accident cell (declared after --same). */
.cct__row--total[b-74065wj3mv] { border-top: 2px solid var(--neutral-stroke-rest); }
.cct__row--total .cct__label[b-74065wj3mv],
.cct__row--total .cct__value[b-74065wj3mv] { font-weight: 700; }

/* Narrow: two columns (Illness | Accident), the row label becomes a heading row above its pair. */
@container (max-width: 759px) {
    .cct__table[b-74065wj3mv] {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .cct__corner[b-74065wj3mv] {
        display: none;
    }

    .cct__label[b-74065wj3mv] {
        grid-column: 1 / -1;
        font-weight: 600;
        padding-bottom: 0.25rem;
    }
}
/* /Components/Application/Shared/DiagnosticPathTreeView.razor.rz.scp.css */
/* Diagnostic object-path tree. Dense on purpose - this is an admin debugging tool, and the
   table below it is the point. Colours are FluentUI tokens only (no raw hex, RawHexLintTests). */

.dpt-node[b-no7208jo9g] {
    margin: 0;
}

/* display:flex would drop the native disclosure triangle (the marker is tied to
   display:list-item), so the triangle is drawn explicitly. That also makes it deterministic
   across browsers instead of inheriting each engine's default glyph. */
.dpt-summary[b-no7208jo9g] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    padding: 0.3rem 0.5rem;
    border-radius: 4px;
    font-size: 0.85rem;
    white-space: nowrap;
    list-style: none;
}

.dpt-summary[b-no7208jo9g]::-webkit-details-marker {
    display: none;
}

.dpt-summary[b-no7208jo9g]::before {
    content: "▸"; /* right-pointing triangle */
    flex-shrink: 0;
    width: 0.75rem;
    color: var(--neutral-foreground-hint);
}

.dpt-node[open] > .dpt-summary[b-no7208jo9g]::before {
    content: "▾"; /* down-pointing triangle */
}

.dpt-summary:hover[b-no7208jo9g],
.dpt-summary:focus-visible[b-no7208jo9g] {
    background: var(--neutral-fill-secondary-hover);
}

/* Indent one level per nesting step. The component recurses, so this compounds by itself. */
.dpt-children[b-no7208jo9g] {
    padding-left: 0.9rem;
}

.dpt-leaf[b-no7208jo9g] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.3rem 0.5rem;
    border-radius: 4px;
    font-family: inherit;
    font-size: 0.85rem;
    color: var(--neutral-foreground-rest);
    white-space: nowrap;
}

.dpt-leaf:hover[b-no7208jo9g],
.dpt-leaf:focus-visible[b-no7208jo9g] {
    background: var(--neutral-fill-secondary-hover);
}

/* Persistent selection, so returning from the detail pane lands on the row you left. */
.dpt-leaf--selected[b-no7208jo9g] {
    background: var(--neutral-fill-secondary-rest);
    font-weight: 600;
}

/* Count chip - how many diagnostic series this node carries ITSELF. On a leaf it is a plain
   label (the whole row is already the button); on a branch summary it is the click target for
   that node's own data, because the rest of the summary toggles the disclosure. A node with no
   series of its own simply has no chip - the absence is the statement. */
.dpt-label[b-no7208jo9g] {
    overflow: hidden;
    text-overflow: ellipsis;
}

.dpt-count[b-no7208jo9g] {
    flex-shrink: 0;
    margin-left: auto;
    padding: 0 0.35rem;
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.7rem;
    font-variant-numeric: tabular-nums;
    color: var(--neutral-foreground-hint);
    background: var(--neutral-fill-secondary-rest);
}

button.dpt-count[b-no7208jo9g] {
    border: none;
    cursor: pointer;
}

button.dpt-count:hover[b-no7208jo9g],
button.dpt-count:focus-visible[b-no7208jo9g] {
    color: var(--neutral-foreground-rest);
    background: var(--neutral-fill-secondary-hover);
}

.dpt-count--selected[b-no7208jo9g] {
    color: var(--neutral-foreground-rest);
    font-weight: 600;
}
/* /Components/Application/Shared/DomicileDecisionChip.razor.rz.scp.css */
/* ── Open-decision chip on a dwelling's form header (Home/Rent) — amber outline, same
      token as the /Taxes decision bar (Task 9's .domicile-decision-bar--open). ── */
.domicile-chip[b-ru8y2n7ivc] {
    display: inline-flex;
    gap: 4px;
    align-items: center;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    border: 1px solid var(--w4l-warning);
    background: color-mix(in srgb, var(--w4l-warning) 10%, transparent);
    color: var(--w4l-warning);
}

.domicile-chip:hover[b-ru8y2n7ivc] {
    background: color-mix(in srgb, var(--w4l-warning) 18%, transparent);
}
/* /Components/Application/Shared/DomicileLocationEditor.razor.rz.scp.css */
/* DomicileLocationEditor — read-only derived-location display; the editable case
   delegates to the shared LocationPicker (same picker as the Home form). */

.domicile-flag[b-qsrfjapioi] {
    width: 22px;
    height: 16px;
    object-fit: contain;
    border-radius: 2px;
    flex-shrink: 0;
    box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.2);
}

.domicile-field-label[b-qsrfjapioi] {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    margin-bottom: 6px;
}

/* ── Derived (read-only) domicile location ── */
.domicile-derived-location[b-qsrfjapioi] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 5px;
    background: var(--neutral-fill-secondary-rest, rgba(0, 0, 0, 0.04));
    font-weight: 600;
    width: fit-content;
}
/* /Components/Application/Shared/DomicileTaxAllocationPanel.razor.rz.scp.css */
/* DomicileTaxAllocationPanel — non-interactive status cards for the derived
   display/booking rule. */

.domicile-alloc[b-fyjrpvhmds] {
    width: 100%;
}

.domicile-alloc-cards[b-fyjrpvhmds] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
}

.domicile-alloc-card[b-fyjrpvhmds] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: 1px solid var(--neutral-stroke-divider-rest);
    border-radius: 8px;
    background: var(--neutral-fill-stealth-rest);
    cursor: default;
}

.domicile-alloc-card__title[b-fyjrpvhmds] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}
/* /Components/Application/Shared/EffectiveAffordabilitySection.razor.rz.scp.css */
/* ── Tragbarkeits-Bar + StatCards (kopiert aus StandardFinancingPanel.razor.css;
      scoped CSS ist komponentengebunden, daher die für diese Section nötigen Regeln
      hier dupliziert). ───────────────────────────────────────────────────────── */
.fin-afford-head[b-tx9znro6p5] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 0.74rem;
    color: var(--neutral-foreground-rest);
    margin: 0.45rem 0 0.15rem;
    font-variant-numeric: tabular-nums;
}

.fin-afford-head > span:last-child[b-tx9znro6p5] {
    font-weight: 700;
    font-size: 0.85rem;
}

.fin-bar[b-tx9znro6p5] {
    position: relative;
    display: flex;
    width: 100%;
    height: 26px;
    border-radius: 4px;
    overflow: hidden;
    background: var(--neutral-layer-2);
    border: 1px solid var(--neutral-stroke-rest);
}

.fin-afford-bar[b-tx9znro6p5] {
    height: 30px;
}

.fin-income-zone[b-tx9znro6p5] {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    background: color-mix(in srgb, var(--w4l-income-accent) 16%, transparent);
    border-right: 2px solid var(--w4l-income-accent);
}

.fin-segs[b-tx9znro6p5] {
    position: absolute;
    inset: 0;
    display: flex;
}

.fin-bar .seg[b-tx9znro6p5] {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.68rem;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    min-width: 0;
}

.seg-int[b-tx9znro6p5] { background: var(--w4l-bar-strong); }
.seg-amo[b-tx9znro6p5] { background: var(--w4l-bar-mid); }
.seg-mnt[b-tx9znro6p5] { background: var(--w4l-bar-soft); }

.fin-marker[b-tx9znro6p5] {
    position: absolute;
    top: -2px;
    bottom: -2px;
    width: 0;
    border-left: 2px dashed var(--neutral-foreground-rest);
    pointer-events: none;
}

.fin-ok[b-tx9znro6p5]   { color: var(--w4l-positive); }
.fin-over[b-tx9znro6p5] { color: var(--w4l-negative); }

.fin-legend[b-tx9znro6p5] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem 0.85rem;
    margin-top: 0.25rem;
    font-size: 0.72rem;
    color: var(--neutral-foreground-rest);
}

.fin-legend .dot[b-tx9znro6p5] {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    margin-right: 0.25rem;
    vertical-align: middle;
}

.fin-dot-income[b-tx9znro6p5] {
    background: color-mix(in srgb, var(--w4l-income-accent) 25%, transparent);
    border: 1px solid var(--w4l-income-accent);
}

.fin-legend-marker[b-tx9znro6p5] { opacity: 0.8; }

.fin-stats[b-tx9znro6p5] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-content: flex-start;
    margin-top: 0.5rem;
}

.fin-stat-card[b-tx9znro6p5] {
    flex: 1 1 0;
    min-width: 130px;
    padding: 8px 10px;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 6px;
    background: var(--neutral-layer-1);
}

.fin-stat-label[b-tx9znro6p5] {
    font-size: 11px;
    color: var(--neutral-foreground-hint);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    text-align: center;
}

.fin-stat-value[b-tx9znro6p5] {
    font-size: 22px;
    font-weight: 700;
    margin-top: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.fin-stat-sub[b-tx9znro6p5] {
    font-size: 0.7rem;
    color: var(--neutral-foreground-hint);
    text-align: center;
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
}

.fit-good[b-tx9znro6p5]    { color: var(--w4l-positive); }
.fit-caution[b-tx9znro6p5] { color: var(--w4l-negative); }
/* /Components/Application/Shared/EmployeeShareCurveSection.razor.rz.scp.css */
.ecs-action[b-zh47kd7i3o] {
    margin-top: 4px;
}

/* The one state line of the curve (planned sale), hint tone. */
.ecs-state[b-zh47kd7i3o] {
    margin: 0.25rem 0 0 0;
    font-size: 0.78rem;
    color: var(--neutral-foreground-rest);
}
/* /Components/Application/Shared/EmployerBenefitsFields.razor.rz.scp.css */
.eb-row[b-1vooj4wrjw] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}
/* Mode pills carry no label: they sit directly under the group title (aria-label = group title). */
.eb-pillrow[b-1vooj4wrjw] {
    margin-top: 8px;
}
/* Short label + pill, only for the four choice rows (coverage, duration, allowance rate, insured earnings): one narrow
   shared label width on desktop, label above the pill on <=639px. Width fits the longest label ("Insured earnings") on one line. */
.eb-lrow[b-1vooj4wrjw] {
    display: grid;
    grid-template-columns: 11rem 1fr;
    align-items: center;
    column-gap: 12px;
    margin-top: 8px;
}
@media (max-width: 639px) {
    .eb-lrow[b-1vooj4wrjw] {
        grid-template-columns: 1fr;
        row-gap: 2px;
    }
}
/* Read-only scale line under the LFZ pill. */
.eb-readout[b-1vooj4wrjw] {
    margin-top: 6px;
}
/* The group title's parenthetical stays at normal weight. */
.eb-group-title-sub[b-1vooj4wrjw] {
    font-weight: 400;
}
.eb-label[b-1vooj4wrjw] {
    font-size: 0.85rem;
    font-weight: 400;
    opacity: 0.85;
}
.eb-fixed[b-1vooj4wrjw] {
    font-size: 0.85rem;
    color: var(--neutral-foreground-rest);
}
.eb-note[b-1vooj4wrjw] {
    font-size: 0.72rem;
    opacity: 0.65;
    margin-top: 4px;
}
.eb-group[b-1vooj4wrjw] {
    margin-top: 16px;
}
.eb-group:first-child[b-1vooj4wrjw] {
    margin-top: 0;
}
/* Section heads: stronger than the row labels (the group decides, the label names the row). */
.eb-group-title[b-1vooj4wrjw] {
    font-size: var(--type-ramp-base-font-size);
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    padding-bottom: 4px;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
    margin-bottom: 4px;
}
.eb-row-fields[b-1vooj4wrjw] {
    align-items: flex-end;
}
/* utilities.css gives .w4l-select width:100%; the scale select sits inline with its mode pill. */
.eb-row .eb-scale-select[b-1vooj4wrjw] {
    width: auto;
    min-width: 160px;
    flex: 0 0 auto;
}
/* After the desktop rule above, so the mobile width wins at equal specificity. */
@media (max-width: 639px) {
    .eb-row .eb-scale-select[b-1vooj4wrjw] {
        width: 100%;
        min-width: 0;
    }
}
/* /Components/Application/Shared/EmploymentExitShareRows.razor.rz.scp.css */
.ees[b-dhafs3r4wl] {
    margin-top: 1rem;
}

.ees-head[b-dhafs3r4wl] {
    font-size: 0.78rem;
    font-weight: 600;
    margin-bottom: 4px;
}
/* /Components/Application/Shared/ExamplePairCard.razor.rz.scp.css */
/* ExamplePairCard - the two-segment switch above a pair's two preview cards.
   Colours come from tokens only (Docs/Css.md, W4L.Test/Theming/RawHexLintTests). */

/* The card takes its four rows — axis, switch, story, preview — from the section's grid via
   subgrid, so those four rows are the same height in EVERY card of the band. Without that the card
   was a flex column of its own: total height was equalised by the row, the preview was the
   flexible remainder, and a story block that wrapped one line more than the neighbours' took that
   line out of the preview (see StartExamplesSection.razor.css for the full reasoning).
   The 8px gap is stated rather than inherited from the parent grid: a subgrid does inherit its
   parent's gaps, but that mechanism disappears together with `subgrid` on a browser that does not
   support it, and the fallback would then stack the four blocks with no spacing at all.
   The 16px bottom margin plus the grid's 8px row gap make the 24px gutter between two bands. A
   spanning item's margin counts towards its outer size, so a browser may spread those 16px over
   the four rows instead of appending them below the preview — every card in a band carries the
   same margin, so either way it cannot skew the alignment. */
.w4l-pair[b-r3e4u3ultu] {
    grid-row: span 4;
    display: grid;
    grid-template-rows: subgrid;
    gap: 8px;
    margin-bottom: 16px;
}

/* Both halves share ONE grid cell (grid-area 1/1), so the card is always as tall as the TALLER
   half and switching cannot resize the grid row — the earlier display:none made the height depend
   on which half was active. visibility:hidden keeps the inactive half laid out, which also lets
   Chart.js measure it correctly; under display:none it cannot. */
.w4l-pair-panels[b-r3e4u3ultu] {
    display: grid;
    min-height: 0;
}

.w4l-pair-panels > .w4l-pair-panel[b-r3e4u3ultu] {
    grid-area: 1 / 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Names what the two segments differ along (turnaround vs fork) — the switch itself only carries
   the two side labels, which would otherwise leave a reader guessing what is being compared. */
.w4l-pair-axis[b-r3e4u3ultu] {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--neutral-foreground-hint);
    padding: 0 4px;
}

.w4l-pair-switch[b-r3e4u3ultu] {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: stretch;
    gap: 4px;
    padding: 4px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--neutral-fill-secondary-rest) 70%, transparent);
}

/* Decorative direction glyph between the two segments. */
.w4l-pair-arrow[b-r3e4u3ultu] {
    align-self: center;
    padding: 0 2px;
    font-size: 0.95rem;
    color: var(--neutral-foreground-hint);
}

/* Both segments look like pressable chips — the inactive one used to be borderless and
   transparent, which read as a caption rather than as the other half of a switch. */
.w4l-pair-segment[b-r3e4u3ultu] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 8px 12px;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
    background: var(--neutral-fill-input-rest);
    color: var(--neutral-foreground-hint);
    font: inherit;
}

.w4l-pair-segment:hover:not(.active)[b-r3e4u3ultu] {
    background: var(--neutral-fill-secondary-hover);
    color: var(--neutral-foreground-rest);
}

.w4l-pair-segment:focus-visible[b-r3e4u3ultu] {
    outline: 2px solid var(--accent-fill-rest);
    outline-offset: 1px;
}

.w4l-pair-segment.active[b-r3e4u3ultu] {
    background: var(--neutral-fill-rest);
    border-color: var(--accent-fill-rest);
    color: var(--neutral-foreground-rest);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

.w4l-pair-segment-label[b-r3e4u3ultu] {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Three fixed rows instead of flex-wrap: the solution segment carries an extra delta, so a wrapping
   layout made the two segments break differently at sm and the switch grew a ragged second line.
   The delta and findings rows are always present (empty where they do not apply) and keep a
   min-height, so both segments are structurally identical whatever they contain. */
.w4l-pair-segment-kpi[b-r3e4u3ultu] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    font-size: 0.9rem;
    font-weight: 600;
}

.w4l-pair-segment-amount[b-r3e4u3ultu] {
    display: block;
    line-height: 1.3;
}

.w4l-pair-segment-delta[b-r3e4u3ultu] {
    display: block;
    line-height: 1.3;
    min-height: 1.3em;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--neutral-foreground-hint);
}

.w4l-pair-segment-findings[b-r3e4u3ultu] {
    display: flex;
    align-items: center;
    line-height: 1.3;
    min-height: 1.3em;
    font-weight: 500;
    font-size: 0.8rem;
}

/* The dot/count pairs; aria-hidden as a unit, so the gap only has to look right. */
.w4l-pair-dots[b-r3e4u3ultu] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.w4l-pair-dot[b-r3e4u3ultu] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

/* The findings traffic light. The .w4l-finding-dot rules that FindingsPanel/JourneyPanel use
   live in Preview.razor's unscoped <style> block, which is only in the DOM while the scenario
   preview renders - unreachable from /Start. Hence the tokens in wwwroot/css/tokens.css. */
.w4l-pair-dot--red[b-r3e4u3ultu] {
    background: var(--w4l-finding-red);
}

.w4l-pair-dot--amber[b-r3e4u3ultu] {
    background: var(--w4l-finding-amber);
}

.w4l-pair-visually-hidden[b-r3e4u3ultu] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.w4l-pair-story[b-r3e4u3ultu] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0 4px;
}

.w4l-pair-story-intro[b-r3e4u3ultu] {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.35;
    color: var(--neutral-foreground-rest);
}

/* Both halves' lists occupy the same cell: the taller one sets the height for both. */
.w4l-pair-story-stack[b-r3e4u3ultu] {
    display: grid;
}

.w4l-pair-story-stack > *[b-r3e4u3ultu] {
    grid-area: 1 / 1;
}

.w4l-pair-story-diff[b-r3e4u3ultu] {
    margin: 0;
    padding-left: 18px;
    font-size: 0.8rem;
    line-height: 1.35;
    color: var(--neutral-foreground-hint);
}

/* The inactive half stays laid out (that is the whole point) but is invisible and, by virtue of
   visibility:hidden, out of the tab order and the accessibility tree. */
.w4l-pair-hidden[b-r3e4u3ultu] {
    visibility: hidden;
}
/* /Components/Application/Shared/ExampleScenarioBanner.razor.rz.scp.css */
/* Dezente Statusleiste — Farbe wie die Edit-Panel-Fläche (--neutral-fill-secondary,
   W4L.Web/CLAUDE.md "Struktur im Arbeitsbereich"), kleiner Radius, kein Schatten. */
.w4l-example-banner[b-cg1od28z19] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    margin-bottom: 12px;
    border-radius: 8px;
    background: var(--neutral-fill-secondary-rest);
    color: var(--neutral-foreground-hint);
    font-size: 0.85rem;
}

.w4l-example-banner-sep[b-cg1od28z19] { opacity: 0.6; }
.w4l-example-banner-role[b-cg1od28z19] { font-weight: 600; }
.w4l-example-banner-twin[b-cg1od28z19] { margin-left: auto; font-weight: 600; text-decoration: none; color: var(--accent-foreground-rest); }
.w4l-example-banner-twin:hover[b-cg1od28z19] { text-decoration: underline; }
/* /Components/Application/Shared/FileFormatIcon.razor.rz.scp.css */
/* The vector icon it replaces was an inline SVG; a bare <img> would sit on the text baseline and
   add descender space inside the Documents table cell. block + flex:none keeps the row height
   identical in both hosts (table cell on /Scenario, flex row on /Sharing). */
.file-format-icon[b-sl4oli55ff] {
    display: block;
    flex: none;
}
/* /Components/Application/Shared/FinanceStepSection.razor.rz.scp.css */
/* ── FinanceStepSection — banale Section mit Status-Chip in der Titelzeile
      (das frühere Schritt-Chrome ①–⑤/Collapse/Rail ist 2026-07-16 entfernt). ── */

.fss-chip[b-t073msvcbd] {
    flex: none;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    border: 1px solid transparent;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.fss-chip--ok[b-t073msvcbd] {
    color: var(--w4l-positive);
    border-color: color-mix(in srgb, var(--w4l-positive) 45%, transparent);
    background: color-mix(in srgb, var(--w4l-positive) 10%, transparent);
}

.fss-chip--warn[b-t073msvcbd] {
    color: var(--warning-foreground-rest, #b8860b);
    border-color: color-mix(in srgb, var(--warning-foreground-rest, #b8860b) 45%, transparent);
    background: color-mix(in srgb, var(--warning-foreground-rest, #b8860b) 10%, transparent);
}

.fss-chip--bad[b-t073msvcbd] {
    color: var(--w4l-negative);
    border-color: color-mix(in srgb, var(--w4l-negative) 45%, transparent);
    background: color-mix(in srgb, var(--w4l-negative) 10%, transparent);
}

.fss-chip--pending[b-t073msvcbd] {
    color: var(--neutral-foreground-hint);
    border-color: var(--neutral-stroke-rest);
    background: var(--neutral-layer-2);
}

/* Clickable chip (OnChipClick): a native button that keeps the chip look and gains hover + focus ring. */
.fss-chip--link[b-t073msvcbd] {
    font: inherit;
    font-size: 0.7rem;
    font-weight: 600;
    cursor: pointer;
}

.fss-chip--link:hover[b-t073msvcbd] {
    text-decoration: underline;
}

.fss-chip--link:focus-visible[b-t073msvcbd] {
    outline: 2px solid var(--accent-fill-rest);
    outline-offset: 1px;
}
/* /Components/Application/Shared/FindingLine.razor.rz.scp.css */
.finding-line[b-hntdoukxgf] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0.5rem 0;
    padding: 6px 10px;
    border-left: 3px solid var(--w4l-warning);
    background: var(--neutral-layer-1);
    color: var(--neutral-foreground-rest);
    font-size: 0.875rem;
    line-height: 1.4;
    max-width: 60rem;
}

.finding-line__icon[b-hntdoukxgf] {
    flex: 0 0 16px;
    margin-top: 2px;
    color: var(--w4l-warning);
}
/* /Components/Application/Shared/GanttResidenceTimeline.razor.rz.scp.css */
/* GanttResidenceTimeline — scoped CSS. Both sections render via the shared GanttTimeline, so this
   only styles the bits injected into its Label/Bar templates plus the section titles. */

.grt[b-jlvzoahnaf] {
    width: 100%;
    font-size: 0.8125rem;
}

.grt-sectiontitle[b-jlvzoahnaf] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    margin: 4px 0 6px;
}

.grt-sectiontitle-2[b-jlvzoahnaf] {
    margin-top: 18px;
    padding-top: 12px;
    border-top: 1px solid var(--neutral-stroke-divider-rest);
}

/* Owner chip + Auto badge in the overview label. */
.grt-owner-chip[b-jlvzoahnaf] {
    flex-shrink: 0;
    font-size: 0.625rem;
    font-weight: 600;
    color: var(--chip, var(--neutral-foreground-hint));
    border: 1px solid color-mix(in srgb, var(--chip, var(--neutral-stroke-rest)) 55%, transparent);
    border-radius: 8px;
    padding: 0 5px;
    line-height: 1.4;
}

.grt-auto[b-jlvzoahnaf] {
    flex-shrink: 0;
    margin-left: 4px;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--neutral-foreground-hint);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 3px;
    padding: 0 3px;
}

/* Stealth deep-link button on an overview bar label: open the object on its editing page
   (home → Homes, rent → Budget). Faint until hovered, like other stealth header icons. */
.grt-open[b-jlvzoahnaf] {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    padding: 1px;
    margin: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--neutral-foreground-hint);
    opacity: 0.55;
    border-radius: 3px;
}
.grt-open:hover[b-jlvzoahnaf] { opacity: 1; color: var(--accent-fill-rest); }
.grt-open:focus-visible[b-jlvzoahnaf] { outline: 2px solid var(--accent-fill-rest); outline-offset: 1px; opacity: 1; }

/* Domicile segment bands inside a phase bar: a flex row whose children grow in proportion to each
   segment's year span, filling the bar. Each band is styled to be PIXEL-IDENTICAL to an overview
   GanttTimeline bar (same 1.4px owner border, radius, padding, height, font) — so a phase reads as a
   contiguous row of residence bars. The container is also the per-phase drag track for the knobs. */
.grt-bands[b-jlvzoahnaf] {
    position: relative;
    width: 100%;
    align-self: stretch;
}

.grt-band[b-jlvzoahnaf] {
    position: absolute;
    top: 0;
    bottom: 0;
    /* left/width set inline (percent of the phase span — identical math to the split handle). */
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    box-sizing: border-box;
    overflow: hidden;
    border: 1.4px solid currentColor; /* currentColor = the band's owner colour (set inline) */
    font-size: 0.75rem;
    font-weight: 500;
}
/* Round only the outer corners (first/last segment); internal joins stay square so the two adjacent
   owner-coloured borders form a crisp divider centred exactly on the boundary (under the handle). */
.grt-band-first[b-jlvzoahnaf] { border-top-left-radius: 4px; border-bottom-left-radius: 4px; }
.grt-band-last[b-jlvzoahnaf] { border-top-right-radius: 4px; border-bottom-right-radius: 4px; }

.grt-bands-editable .grt-band[b-jlvzoahnaf] { cursor: pointer; }
.grt-bands-editable .grt-band:hover[b-jlvzoahnaf] { filter: brightness(1.08); }
.grt-band-selected[b-jlvzoahnaf] { outline: 2px solid var(--accent-fill-rest); outline-offset: -1px; z-index: 1; }

/* Amber overlay over exactly an OPEN decision's year span (the D5 finding) — not the whole
   intersecting band. Sits above the bands (z-index 2 > selected band's 1) but below the drag
   knobs (3); pointer-events none lets clicks fall through to the bands beneath. Mirrors
   .domicile-decision-bar--open in Taxes.razor.css, same warning token. */
.grt-decision-overlay[b-jlvzoahnaf] {
    position: absolute;
    top: 0;
    bottom: 0;
    outline: 2px solid var(--w4l-warning);
    outline-offset: -2px;
    background: color-mix(in srgb, var(--w4l-warning) 10%, transparent);
    border-radius: 3px;
    pointer-events: none;
    z-index: 2;
}

.grt-band-flag[b-jlvzoahnaf] {
    width: 15px; height: 11px; object-fit: contain; border-radius: 2px;
    box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.25); flex-shrink: 0;
}
.grt-band-name[b-jlvzoahnaf] {
    color: inherit; /* owner colour, like the overview bar text */
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── Split handle (draggable; class names match residenceHtmlTrack.js: .hrt-knob / .hrt-bubble).
   No line — just a round white knob like the GanttTimeline time-handles, centred on the split. ── */
.hrt-knob[b-jlvzoahnaf] { position: absolute; top: 0; bottom: 0; width: 0; cursor: ew-resize; z-index: 3; touch-action: none; }
.hrt-knob-dot[b-jlvzoahnaf] {
    position: absolute; left: 50%; top: 50%; width: 12px; height: 12px;
    transform: translate(-50%, -50%); border-radius: 50%;
    background: var(--neutral-layer-1); border: 1.5px solid var(--neutral-foreground-rest);
}
.hrt-knob:hover .hrt-knob-dot[b-jlvzoahnaf] { transform: translate(-50%, -50%) scale(1.18); }

/* Derived domicile switch (auto flip inside an overlap window): hollow dashed dot — the switch
   currently follows the home purchase automatically; dragging it pins the move year. */
.hrt-knob-derived .hrt-knob-dot[b-jlvzoahnaf] {
    background: transparent;
    border-style: dashed;
    border-color: var(--neutral-foreground-hint);
}
.hrt-knob-derived:hover .hrt-knob-dot[b-jlvzoahnaf] { border-color: var(--neutral-foreground-rest); }
.hrt-bubble[b-jlvzoahnaf] {
    position: absolute; left: 50%; top: -18px; transform: translateX(-50%); visibility: hidden;
    background: var(--neutral-foreground-rest); color: var(--neutral-layer-1);
    font-size: 0.7rem; font-weight: 600; padding: 1px 5px; border-radius: 4px; white-space: nowrap;
}

/* Touch: breitere unsichtbare Grab-Fläche (der width:0-Knob ist sonst nur über den Dot greifbar)
   + grösserer Dot als sichtbare Affordance. */
@media (pointer: coarse) {
    .hrt-knob[b-jlvzoahnaf]::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: -16px;
        right: -16px;
    }

    .hrt-knob-dot[b-jlvzoahnaf] { width: 18px; height: 18px; }
}
/* /Components/Application/Shared/HouseholdBankTermsFields.razor.rz.scp.css */
.hbt-heading[b-2ddwqfzw4u] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 8px;
}

.hbt-line[b-2ddwqfzw4u] {
    font-size: 0.8rem;
    color: var(--neutral-foreground-rest);
    color: color-mix(in srgb, var(--neutral-foreground-rest) 82%, transparent);
    margin-top: 4px;
}
/* /Components/Application/Shared/InvestmentStrategyTimeline.razor.rz.scp.css */
/* InvestmentStrategyTimeline — scoped CSS. Styles the bands + split knobs injected into the shared
   GanttTimeline's Bar/Label templates. Mirrors RiskProfileTimeline's band/knob look (flat preset
   tint instead of a per-year fit gradient). */

.ist[b-idw4da4zmn] {
    width: 100%;
}

.ist-owner-chip[b-idw4da4zmn] {
    flex-shrink: 0;
    font-size: 0.7rem;
    color: var(--chip, var(--neutral-foreground-hint));
    line-height: 1;
}

/* In-bar strategy bands: absolutely positioned by percent of the lane span; the container doubles
   as the per-lane drag track for the split knobs. */
.ist-bands[b-idw4da4zmn] {
    position: relative;
    width: 100%;
    align-self: stretch;
}

.ist-band[b-idw4da4zmn] {
    position: absolute;
    top: 0;
    bottom: 0;
    /* left/width set inline (percent of the lane span — identical math to the split knob). */
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    box-sizing: border-box;
    overflow: hidden;
    border: 1.4px solid var(--neutral-stroke-strong-rest); /* subtle, closer to text; theme-adaptive */
    font-size: 0.75rem;
    font-weight: 400;
    cursor: pointer;
}

.ist-band:hover[b-idw4da4zmn] { filter: brightness(1.08); }

/* Round only outer corners so internal joins read as crisp dividers under the knobs. */
.ist-band-first[b-idw4da4zmn] { border-top-left-radius: 4px; border-bottom-left-radius: 4px; }
.ist-band-last[b-idw4da4zmn] { border-top-right-radius: 4px; border-bottom-right-radius: 4px; }

.ist-band-selected[b-idw4da4zmn] { outline: 2px solid var(--accent-fill-rest); outline-offset: -1px; z-index: 1; }

.ist-band-name[b-idw4da4zmn] {
    color: inherit;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Split knob (draggable; class names match residenceHtmlTrack.js: .hrt-knob / .hrt-bubble). ── */
.hrt-knob[b-idw4da4zmn] { position: absolute; top: 0; bottom: 0; width: 0; cursor: ew-resize; z-index: 3; touch-action: none; }

.hrt-knob-dot[b-idw4da4zmn] {
    position: absolute; left: 50%; top: 50%; width: 12px; height: 12px;
    transform: translate(-50%, -50%); border-radius: 50%;
    background: var(--neutral-layer-1); border: 1.5px solid var(--neutral-foreground-rest);
}

.hrt-knob:hover .hrt-knob-dot[b-idw4da4zmn] { transform: translate(-50%, -50%) scale(1.18); }

.hrt-bubble[b-idw4da4zmn] {
    position: absolute; left: 50%; top: -18px; transform: translateX(-50%); visibility: hidden;
    background: var(--neutral-foreground-rest); color: var(--neutral-layer-1);
    font-size: 0.7rem; font-weight: 600; padding: 1px 5px; border-radius: 4px; white-space: nowrap;
}

/* Touch: breitere unsichtbare Grab-Fläche (der width:0-Knob ist sonst nur über den Dot greifbar)
   + grösserer Dot als sichtbare Affordance. */
@media (pointer: coarse) {
    .hrt-knob[b-idw4da4zmn]::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: -16px;
        right: -16px;
    }

    .hrt-knob-dot[b-idw4da4zmn] { width: 18px; height: 18px; }
}
/* /Components/Application/Shared/InvestTimeline.razor.rz.scp.css */
/* InvestTimeline — scoped CSS. Styles the bands + split knobs injected into the shared
   GanttTimeline's Bar/Label templates. Mirrors InvestmentStrategyTimeline's band/knob look so the
   bands fill the flex bar height (align-self: stretch + top/bottom anchoring, NOT height:100% which
   collapses) and the draggable boundary knobs are actually visible (the .hrt-knob CSS must live in THIS
   component's scope — CSS isolation does not share it across components). */

.cdt[b-l6y88yl2r1] {
    width: 100%;
}

/* In-bar deployment bands: absolutely positioned by percent of the lane span; the container doubles
   as the per-lane drag track for the split knobs. */
.cdt-bands[b-l6y88yl2r1] {
    position: relative;
    width: 100%;
    align-self: stretch;
}

.cdt-band[b-l6y88yl2r1] {
    position: absolute;
    top: 0;
    bottom: 0;
    /* left/width set inline (percent of the lane span — identical math to the split knob). */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3px 8px;
    box-sizing: border-box;
    overflow: hidden;
    border: 1.4px solid var(--neutral-stroke-strong-rest); /* subtle, closer to text; theme-adaptive */
    font-size: 0.75rem;
    font-weight: 400;
    cursor: pointer;
}

.cdt-band:hover[b-l6y88yl2r1] { filter: brightness(1.08); }

.cdt-band-first[b-l6y88yl2r1] { border-top-left-radius: 4px; border-bottom-left-radius: 4px; }
.cdt-band-last[b-l6y88yl2r1] { border-top-right-radius: 4px; border-bottom-right-radius: 4px; }

.cdt-band-selected[b-l6y88yl2r1] { outline: 2px solid var(--accent-fill-rest); outline-offset: -1px; z-index: 1; }

.cdt-band-name[b-l6y88yl2r1] {
    color: inherit;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-variant-numeric: tabular-nums;
    position: relative; /* stays above the per-year tint cells */
    z-index: 1;
}

/* Per-year tint cell: absolute slice of the band, green alpha scales with the CHF invested that
   year (inline background); the band's overflow:hidden clips it to the rounded corners. */
.cdt-yearcell[b-l6y88yl2r1] {
    position: absolute;
    top: 0;
    bottom: 0;
}

/* ── Split knob (draggable; class names match residenceHtmlTrack.js: .hrt-knob / .hrt-bubble). ── */
.hrt-knob[b-l6y88yl2r1] { position: absolute; top: 0; bottom: 0; width: 0; cursor: ew-resize; z-index: 3; touch-action: none; }

.hrt-knob-dot[b-l6y88yl2r1] {
    position: absolute; left: 50%; top: 50%; width: 12px; height: 12px;
    transform: translate(-50%, -50%); border-radius: 50%;
    background: var(--neutral-layer-1); border: 1.5px solid var(--neutral-foreground-rest);
}

.hrt-knob:hover .hrt-knob-dot[b-l6y88yl2r1] { transform: translate(-50%, -50%) scale(1.18); }

.hrt-bubble[b-l6y88yl2r1] {
    position: absolute; left: 50%; top: -18px; transform: translateX(-50%); visibility: hidden;
    background: var(--neutral-foreground-rest); color: var(--neutral-layer-1);
    font-size: 0.7rem; font-weight: 600; padding: 1px 5px; border-radius: 4px; white-space: nowrap;
}

/* Touch: breitere unsichtbare Grab-Fläche (der width:0-Knob ist sonst nur über den Dot greifbar)
   + grösserer Dot als sichtbare Affordance. */
@media (pointer: coarse) {
    .hrt-knob[b-l6y88yl2r1]::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: -16px;
        right: -16px;
    }

    .hrt-knob-dot[b-l6y88yl2r1] { width: 18px; height: 18px; }
}
/* /Components/Application/Shared/LiabilitiesKpiRow.razor.rz.scp.css */
/* ── LiabilitiesKpiRow — Entschuldungs-Kennzahlen-Cards (Pattern: MortgageKpiRow) ── */
.lkr[b-85a6n8a7br] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-content: flex-start;
}

.lkr-card[b-85a6n8a7br] {
    flex: 1 1 0;
    min-width: 130px;
    padding: 8px 10px;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 6px;
    background: var(--neutral-layer-1);
}

.lkr-label[b-85a6n8a7br] {
    font-size: 11px;
    color: var(--neutral-foreground-hint);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    text-align: center;
}

.lkr-value[b-85a6n8a7br] {
    font-size: 22px;
    font-weight: 700;
    margin-top: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.lkr-sub[b-85a6n8a7br] {
    font-size: 0.7rem;
    color: var(--neutral-foreground-hint);
    text-align: center;
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
}
/* /Components/Application/Shared/LifecycleStepper.razor.rz.scp.css */
/* ── Chevron stepper (Lebenszyklus: Object → Finance → Use → Sell) ─────────
   Aus HomeForm.razor.css extrahiert (Shared: HomeForm + RentalForm + EmploymentForm). Pro Chevron
   ein linkes SVG-Cap (V-Kerbe), rechteckiger Body (top/bottom borders) und ein
   rechtes SVG-Cap (Spitze). 8 px flex gap, kein Overlap.
   Höhe über --hf-h (60px); der Wert muss LifecycleStepper.BaseCapHeight entsprechen (Test pinnt das). */

.hf-stepper[b-2njqoad3xc] {
    --hf-h: 60px;
    display: flex;
    gap: 8px;
    width: 100%;
    margin: 8px 0 16px 0;
}

.hf-chevron[b-2njqoad3xc] {
    all: unset;
    cursor: pointer;
    box-sizing: border-box;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: stretch;
    height: var(--hf-h);
    color: var(--c-text);
    font-family: inherit;
    font-size: var(--type-ramp-plus-1-font-size);
    font-weight: 500;
    transition: color 150ms ease;
}

.hf-cap[b-2njqoad3xc] {
    flex: 0 0 18px;
    height: var(--hf-h);
    display: block;
    overflow: visible;
}

.hf-fill[b-2njqoad3xc] {
    fill: var(--c-fill);
    transition: fill 150ms ease;
}

.hf-stroke[b-2njqoad3xc] {
    fill: none;
    stroke: var(--c-border);
    stroke-width: 2;
    stroke-linejoin: miter;
    stroke-linecap: butt;
    stroke-miterlimit: 4;
    transition: stroke 150ms ease;
}

.hf-body[b-2njqoad3xc] {
    flex: 1 1 auto;
    min-width: 0;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 12px;
    background: var(--c-fill);
    border-top:    2px solid var(--c-border);
    border-bottom: 2px solid var(--c-border);
    transition: background-color 150ms ease, border-color 150ms ease;
}

.hf-label[b-2njqoad3xc] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── State palette ──────────────────────────────────────────── */

.hf-chevron.is-pending[b-2njqoad3xc] {
    --c-fill:   var(--neutral-layer-2);
    --c-border: var(--neutral-stroke-divider-rest);
    --c-text:   var(--neutral-foreground-hint);
}

.hf-chevron.is-done[b-2njqoad3xc] {
    --c-fill:   color-mix(in srgb, var(--accent-fill-rest)  8%, var(--neutral-layer-2));
    --c-border: color-mix(in srgb, var(--accent-fill-rest) 30%, var(--neutral-stroke-divider-rest));
    --c-text:   var(--neutral-foreground-rest);
}

/* Progressive=false: no done/pending distinction — neutral surface, full text colour (not greyed out). */
.hf-chevron.is-neutral[b-2njqoad3xc] {
    --c-fill:   var(--neutral-layer-2);
    --c-border: var(--neutral-stroke-divider-rest);
    --c-text:   var(--neutral-foreground-rest);
}

.hf-chevron.is-active[b-2njqoad3xc] {
    --c-fill:   color-mix(in srgb, var(--accent-fill-rest) 12%, var(--neutral-layer-1));
    --c-border: var(--accent-fill-rest);
    --c-text:   var(--accent-foreground-rest);
}

.hf-chevron[aria-selected="true"][b-2njqoad3xc] {
    font-weight: 600;
}

.hf-chevron:hover:not(.is-active)[b-2njqoad3xc] {
    --c-fill: color-mix(in srgb, var(--accent-fill-rest) 12%, var(--neutral-layer-2));
    --c-text: var(--neutral-foreground-rest);
}

.hf-chevron:focus-visible[b-2njqoad3xc] {
    outline: 2px solid var(--accent-fill-rest);
    outline-offset: 2px;
}

/* ≤639px: kompaktere Schrift; ≤479px: nur Icons (aria-label bleibt). */
@media (max-width: 639px) {
    .hf-chevron[b-2njqoad3xc] {
        font-size: var(--type-ramp-base-font-size);
    }
}

@media (max-width: 479px) {
    .hf-label[b-2njqoad3xc] {
        display: none;
    }
}

/* The icon never shrinks (a nowrap label must not squeeze it to a dot). */
.hf-body[b-2njqoad3xc]  svg,
.hf-body[b-2njqoad3xc]  .fluent-icon {
    flex: 0 0 auto;
}

/* ── Dense mode (>= 5 steps, e.g. the disability staircase) ─────────────────
   3/4-step steppers are untouched. The nav is the size container (not the viewport: the preview panel eats ~1/3);
   below 680px only the active chevron keeps its label. */
.hf-stepper--dense[b-2njqoad3xc] {
    container-type: inline-size;
    gap: 6px;
}

.hf-stepper--dense .hf-chevron[b-2njqoad3xc] {
    font-size: var(--type-ramp-base-font-size);
}

.hf-stepper--dense .hf-cap[b-2njqoad3xc] {
    flex-basis: 12px;
}

.hf-stepper--dense .hf-stroke[b-2njqoad3xc] {
    vector-effect: non-scaling-stroke;
}

.hf-stepper--dense .hf-body[b-2njqoad3xc] {
    padding: 0 3px;
    gap: 3px;
}

@media (max-width: 479px) {
    .hf-stepper--dense .hf-chevron[aria-selected="true"] .hf-label[b-2njqoad3xc] {
        display: inline;
    }
}

@container (max-width: 679px) {
    .hf-stepper--dense .hf-chevron[b-2njqoad3xc] {
        flex: 1 1 0;
    }

    .hf-stepper--dense .hf-chevron[aria-selected="true"][b-2njqoad3xc] {
        flex: 3.4 1 0;
    }

    .hf-stepper--dense .hf-chevron:not([aria-selected="true"]) .hf-label[b-2njqoad3xc] {
        display: none;
    }

    .hf-stepper--dense .hf-chevron:not([aria-selected="true"]) .hf-body[b-2njqoad3xc] {
        padding: 0 2px;
    }
}
/* /Components/Application/Shared/LocationPicker.razor.rz.scp.css */
/* LocationPicker — flag-chip canton picker + municipality combobox.
   Styles mirror DomicileManager's picker (scoped CSS does not cross components). */

.location-field-label[b-8byq2dfwea] {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    margin-bottom: 6px;
}

/* Dynamic wrap — as many chips per row as fit. */
.flag-chip-wrap[b-8byq2dfwea] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.flag-chip[b-8byq2dfwea] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    width: 56px;
    box-sizing: border-box;
    padding: 4px 2px;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 5px;
    background: var(--neutral-fill-stealth-rest);
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.flag-chip:hover[b-8byq2dfwea] {
    background: var(--neutral-fill-secondary-hover);
}

.flag-chip img[b-8byq2dfwea] {
    width: 24px;
    height: 24px;
    object-fit: contain;
    border-radius: 2px;
    box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.15);
}

.flag-chip span[b-8byq2dfwea] {
    font-size: 0.625rem;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

/* B7 — visible automatik: the canton switch picked the cantonal capital. */
.municipality-auto-hint[b-8byq2dfwea] {
    display: block;
    margin-top: 4px;
    font-size: 0.75rem;
    line-height: 1.3;
    color: var(--neutral-foreground-hint);
}

.flag-chip-selected[b-8byq2dfwea] {
    border-color: var(--accent-fill-rest);
    background: color-mix(in srgb, var(--accent-fill-rest) 12%, transparent);
    box-shadow: 0 0 0 1px var(--accent-fill-rest);
}
/* /Components/Application/Shared/ModeCardGroup.razor.rz.scp.css */
.mcg[b-gqo9g15zmq] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 8px;
    margin: 0;
    padding: 0;
    border: none;
    min-inline-size: 0;
}

.mcg-card[b-gqo9g15zmq] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 8px;
    background: var(--neutral-fill-stealth-rest);
    cursor: pointer;
    transition: border-color 0.1s ease, background 0.1s ease;
    min-height: 96px;
    box-sizing: border-box;
}

.mcg-card:hover[b-gqo9g15zmq] {
    background: var(--neutral-fill-stealth-hover);
}

.mcg-card--on[b-gqo9g15zmq] {
    border-color: var(--accent-fill-rest);
    background: var(--neutral-layer-1);
    box-shadow: inset 0 0 0 1px var(--accent-fill-rest);
}

.mcg-card--disabled[b-gqo9g15zmq] {
    cursor: default;
    opacity: 0.6;
}

/* Visually hidden but focusable/announceable radio. */
.mcg-input[b-gqo9g15zmq] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Forward the hidden input's focus ring onto the card. */
.mcg-card:has(.mcg-input:focus-visible)[b-gqo9g15zmq] {
    outline: 2px solid var(--accent-fill-rest);
    outline-offset: 2px;
}

.mcg-head[b-gqo9g15zmq] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.mcg-title[b-gqo9g15zmq] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

.mcg-badge[b-gqo9g15zmq] {
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 1px 7px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent-fill-rest) 18%, transparent);
    color: var(--neutral-foreground-rest);
    white-space: nowrap;
}

.mcg-glyph[b-gqo9g15zmq] {
    display: block;
    height: 26px;
}

/* Glyph fragments come from the caller — scoped attribute differs, so reach through. */
.mcg-glyph[b-gqo9g15zmq]  svg {
    display: block;
    height: 100%;
}

.mcg-desc[b-gqo9g15zmq] {
    font-size: 0.75rem;
    line-height: 1.35;
    color: var(--neutral-foreground-hint);
}
/* /Components/Application/Shared/MortgageBlockCard.razor.rz.scp.css */
/* MortgageBlockCard - right column of the open tranche (the selected mortgage). */
.mbc[b-ppy53mkx6a] {
    min-width: 0;
    /* No container-type here: this element is a row-subgrid of the detail grid (MortgageSection.razor.css), and size/layout
       containment on a subgrid would cut it off from the shared rows. The cqw container is .mbc-r2 (full column width). */
    --mbc-product: var(--accent-fill-rest);  /* product colour: heading edge + badge (tokens.css --w4l-mtg-*) */
}

.mbc--fixed[b-ppy53mkx6a] { --mbc-product: var(--w4l-mtg-fixed); }
.mbc--saron[b-ppy53mkx6a] { --mbc-product: var(--w4l-mtg-saron); }
.mbc--variable[b-ppy53mkx6a] { --mbc-product: var(--w4l-mtg-variable); }
.mbc--gap[b-ppy53mkx6a] { --mbc-product: var(--w4l-warning); }
.mbc--nodebt[b-ppy53mkx6a] { --mbc-product: var(--neutral-stroke-rest); }

.mbc-empty[b-ppy53mkx6a] {
    font-size: 0.82rem;
    color: var(--neutral-foreground-hint);
    padding: 0.5rem 0;
}

.mbc-head[b-ppy53mkx6a] {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    align-items: flex-start;
    border-left: 4px solid var(--mbc-product);
    padding-left: 0.5rem;
}

.mbc-controls[b-ppy53mkx6a] {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    margin-left: auto;
    flex: 0 0 auto;
}

.mbc-title[b-ppy53mkx6a] {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

/* Same box as the tranche name field (.mtp-name): padding, border and margin match, so both heads are equally tall
   and their texts line up. */
.mbc-years[b-ppy53mkx6a] {
    font-weight: 700;
    font-size: 0.9rem;
    padding: 0.15rem 0.35rem;
    margin-bottom: 0.2rem;
    border: 1px solid transparent;
}

.mbc-sub[b-ppy53mkx6a] {
    font-size: 0.72rem;
    padding-left: 0.35rem;
    font-variant-numeric: tabular-nums;
    color: var(--neutral-foreground-hint);
}

.mbc-badge[b-ppy53mkx6a] {
    font-size: 0.66rem;
    font-weight: 600;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    border: 1px solid var(--mbc-product);
    background: color-mix(in srgb, var(--mbc-product) 14%, transparent);
}

.mbc-pos[b-ppy53mkx6a] {
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
    color: var(--neutral-foreground-hint);
}

.mbc-btn[b-ppy53mkx6a] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    color: var(--neutral-foreground-rest);
    cursor: pointer;
}

.mbc-btn:hover:not(:disabled)[b-ppy53mkx6a] {
    background: var(--neutral-fill-stealth-hover);
}

.mbc-btn:disabled[b-ppy53mkx6a] {
    opacity: 0.4;
    cursor: default;
}

.mbc-facts[b-ppy53mkx6a] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.25rem;
    margin: 0.6rem 0 0.2rem;
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
}

.mbc-note[b-ppy53mkx6a] {
    color: var(--neutral-foreground-rest);
}

.mbc-hint[b-ppy53mkx6a] {
    font-size: 0.75rem;
    color: var(--neutral-foreground-hint);
    margin-top: 0.25rem;
}

.mbc-hint--live:empty[b-ppy53mkx6a] {
    min-height: 0;
    margin: 0;
}

.mbc-status.mbc-hint--live:empty[b-ppy53mkx6a] {
    min-height: var(--w4l-mtg-status-height);
    margin-top: 0.25rem;
}

/* Refusal / cap on the value field: neutral text with a 2px warning edge, never the warning colour as text colour. */
.mbc-hint--warn[b-ppy53mkx6a] {
    color: var(--neutral-foreground-rest);
    border-left: 2px solid var(--w4l-warning);
    padding-left: 0.4rem;
}

/* Rows of the detail grid shared with the tranche pane (MortgageSection.razor.css: 1 head, 2 value fields, 3 caption + pills,
   4 slider, 5 rest). Harmless where the card is not a subgrid: the wrappers then simply stack. */
.mbc-empty[b-ppy53mkx6a],
.mbc-r1[b-ppy53mkx6a] { grid-row: 1; }
.mbc-r2[b-ppy53mkx6a] { grid-row: 2; }
.mbc-r3[b-ppy53mkx6a] { grid-row: 3; }
.mbc-r4[b-ppy53mkx6a] { grid-row: 4; }
.mbc-r5[b-ppy53mkx6a] { grid-row: 5; }

/* Row 2 is the cqw container (column width) of the amount width, like the pane's .mtp-amountwrap. Top margin = the pane's
   first block. */
.mbc-r2[b-ppy53mkx6a] {
    container-type: inline-size;
    margin-top: 0.85rem;
}

/* Two fixed slots [balance | repayment] (owner 2026-10-10): the first is exactly the shared amount width (half the column,
   never narrower than 9rem, no full-width fallback), the second takes the rest of the row. Both are the same CurrencyField
   box, so the row has one height whatever is input and what is display. */
.mbc-slots[b-ppy53mkx6a] {
    display: grid;
    grid-template-columns: var(--w4l-mtg-amount-width) minmax(6rem, 1fr);
    gap: 0.75rem;
    align-items: start;
}

.mbc-slot[b-ppy53mkx6a] {
    min-width: 0;
}

/* The ONE status line over the full width under both slots: its height is reserved (empty or not), same token as the pane's
   status area. */
.mbc-status[b-ppy53mkx6a] {
    min-height: var(--w4l-mtg-status-height);
    margin-top: 0.25rem;
    box-sizing: border-box;
}

.mbc-link[b-ppy53mkx6a] {
    padding: 0;
    border: 0;
    background: none;
    color: var(--accent-foreground-rest);
    font-size: 0.75rem;
    text-decoration: underline;
    cursor: pointer;
}

.mbc-link:focus-visible[b-ppy53mkx6a] {
    outline: 2px solid var(--accent-fill-rest);
    outline-offset: 1px;
}

.mbc-fact-label[b-ppy53mkx6a] {
    color: var(--neutral-foreground-hint);
    margin-right: 0.3rem;
}

/* Inline delete confirmation - native buttons, no dialog. */
.mbc-confirm[b-ppy53mkx6a] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.6rem;
    margin-top: 0.5rem;
    padding: 0.4rem 0.6rem;
    border-radius: 4px;
    border: 1px solid color-mix(in srgb, var(--w4l-warning) 60%, transparent);
    background: color-mix(in srgb, var(--w4l-warning) 10%, transparent);
    font-size: 0.8rem;
}

.mbc-confirm-text[b-ppy53mkx6a] {
    flex: 1 1 12rem;
}

.mbc-confirm-btn[b-ppy53mkx6a] {
    padding: 0.2rem 0.7rem;
    border-radius: 4px;
    border: 1px solid var(--neutral-stroke-rest);
    background: var(--neutral-fill-rest);
    color: var(--neutral-foreground-rest);
    font-size: 0.78rem;
    cursor: pointer;
}

.mbc-confirm-btn:hover[b-ppy53mkx6a] {
    background: var(--neutral-fill-hover);
}

.mbc-confirm-btn--danger[b-ppy53mkx6a] {
    border-color: var(--w4l-negative);
    color: var(--w4l-negative);
}

.mbc-field[b-ppy53mkx6a] {
    margin-top: 0.7rem;
}

/* One column: the slot row with its status line on top (row 2), the product setting below (row 3, the same block distance
   as between the blocks of the tranche pane). */
.mbc-fillrow[b-ppy53mkx6a] { display: flex; flex-direction: column; }

.mbc-r3[b-ppy53mkx6a] { margin-top: var(--w4l-mtg-block-gap); }

/* Slider row: the same top distance as the pane's amortisation fields, so both sliders start on one line. */
.mbc-r4[b-ppy53mkx6a] { margin-top: 0.6rem; }

.mbc-caption[b-ppy53mkx6a] {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    margin-bottom: var(--w4l-mtg-caption-gap);
}

@media (pointer: coarse) {
    .mbc-btn[b-ppy53mkx6a] {
        width: 2.25rem;
        height: 2.25rem;
    }
}
/* /Components/Application/Shared/MortgageFindingsBlock.razor.rz.scp.css */
/* ── MortgageFindingsBlock — ein Block, Bullet-Zeilen, 100 % Breite ── */
.mfb[b-initjj9vdq] {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--neutral-stroke-divider-rest);
    border-radius: 6px;
    background: var(--neutral-layer-2);
    padding: 0.5rem 0.75rem;
}

/* Rahmen-Tönung nach höchstem Schweregrad — dezent, die Punkte tragen das Detail. */
.mfb--bad[b-initjj9vdq] {
    border-color: color-mix(in srgb, var(--w4l-negative) 45%, transparent);
    background: color-mix(in srgb, var(--w4l-negative) 6%, var(--neutral-layer-2));
}

.mfb--warn[b-initjj9vdq] {
    border-color: color-mix(in srgb, var(--warning-foreground-rest, #b8860b) 45%, transparent);
    background: color-mix(in srgb, var(--warning-foreground-rest, #b8860b) 6%, var(--neutral-layer-2));
}

.mfb--info[b-initjj9vdq] {
    border-color: color-mix(in srgb, var(--accent-fill-rest) 35%, transparent);
    background: color-mix(in srgb, var(--accent-fill-rest) 5%, var(--neutral-layer-2));
}

.mfb-list[b-initjj9vdq] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.mfb-item[b-initjj9vdq] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    font-size: 0.76rem;
    line-height: 1.35;
    color: var(--neutral-foreground-rest);
}

.mfb-dot[b-initjj9vdq] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: none;
    align-self: center;
}

.mfb-dot--bad[b-initjj9vdq]  { background: var(--w4l-negative); }
.mfb-dot--warn[b-initjj9vdq] { background: var(--warning-foreground-rest, #b8860b); }
.mfb-dot--info[b-initjj9vdq] { background: var(--accent-fill-rest); }
/* /Components/Application/Shared/MortgageSection.razor.rz.scp.css */
/* Margin (not padding) so the intro-course crop edges move outward of the measured box. */
.ms-shot[b-1de8iwl4v6] {
    margin-block: 8px 32px;
}

/* Detail slot: tranche pane left, selected mortgage right; the columns stack once the container
   (not the viewport - the preview panel eats space) is narrower than 760 px. */
.msec-detail-host[b-1de8iwl4v6] {
    container-type: inline-size;
}

.msec-detail[b-1de8iwl4v6] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 16px;
}

/* Tranche findings: full width of the detail host, below both columns. */
.msec-findings[b-1de8iwl4v6] {
    width: 100%;
    margin-top: 0.75rem;
}

@container (max-width: 760px) {
    .msec-detail[b-1de8iwl4v6] {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Shared rows (owner feedback 2026-10-10): the pane and the card span the SAME five auto rows and take them over as a row
   subgrid, so what belongs together stands on one line whatever wraps or how long a hint is - each row is as tall as the
   taller of its two contents, never a fixed height. Rows: 1 head (with lock / confirmation lines), 2 value fields incl. status
   area, 3 caption + pills (amortisation | mortgage type), 4 sliders (amortisation | term; a side without a slider is simply
   empty, a row empty on both sides collapses to 0), 5 the rest (mortgages block | interest + facts). The wrappers of the
   card (.mbc-body, .mbc-fillrow) are display:contents so the card's rows are direct children of the subgrid.
   Without subgrid support (or stacked below 760 px) none of this applies: two plain columns / one column as before. */
@supports (grid-template-rows: subgrid) {
    @container (min-width: 761px) {
        .msec-detail[b-1de8iwl4v6] {
            grid-template-rows: repeat(5, auto);
        }

        .msec-detail[b-1de8iwl4v6] >  .mtp,
        .msec-detail[b-1de8iwl4v6] >  .mbc {
            grid-row: 1 / span 5;
            display: grid;
            grid-template-columns: minmax(0, 1fr);
            grid-template-rows: subgrid;
        }

        .msec-detail[b-1de8iwl4v6] >  .mtp {
            grid-column: 1;
        }

        .msec-detail[b-1de8iwl4v6] >  .mbc {
            grid-column: 2;
        }

        .msec-detail[b-1de8iwl4v6] >  .mbc .mbc-body,
        .msec-detail[b-1de8iwl4v6] >  .mbc .mbc-fillrow {
            display: contents;
        }
    }
}

@container (min-width: 761px) {
    .msec-detail[b-1de8iwl4v6] >  .mbc {
        border-left: 1px solid var(--neutral-stroke-divider-rest);
        padding-left: 16px;
    }
}

/* Hint line under the «+» menu while a top-up has no room: dimmed but still readable (contrast). */
.ms-topup-hint[b-1de8iwl4v6] {
    margin-bottom: 0.4rem;
    font-size: var(--type-ramp-minus-1-font-size);
    color: var(--neutral-foreground-hint);
}
/* /Components/Application/Shared/MortgageStructureTimeline.razor.rz.scp.css */
/* ── MortgageStructureTimeline — Zinsbindungs-Blöcke + Drag-Knobs im BarTemplate der
   geteilten GanttTimeline-Shell (leak-frei, native Inhalte). Label-Spalte, Jahres-Skala
   und ⚑-Marker kommen von der Shell (gantt-*-Klassen). ── */
.mst[b-pf6ij7sp03] {
    margin: 0.25rem 0;
}

.mst-empty[b-pf6ij7sp03] {
    font-size: 0.8rem;
    opacity: 0.75;
}

/* Band-Container = Drag-Track (hrt-track-area) über die volle Bar-Höhe. */
.mst-bands[b-pf6ij7sp03] {
    position: relative;
    width: 100%;
    align-self: stretch;
    min-height: 30px;
}

/* 0-Tranche (Voll-Cash, §14): Struktur bleibt sichtbar, aber gedimmt. */
.mst-bands--zero[b-pf6ij7sp03] {
    opacity: 0.4;
    filter: saturate(0.4);
}

/* Lane endet VOR dem Objekt (Schuld vollständig amortisiert): harter End-Cap am rechten
   Rand + ✓ — die 2. Hypothek verschwindet sichtbar, wenn die 66⅔-Linie erreicht ist. */
.mst-bands--ends[b-pf6ij7sp03] {
    border-right: 2px solid var(--w4l-positive);
}

/* ✓ RECHTS der grünen End-Linie (erst die Linie = Amortisationsende, dann der Haken). */
.mst-bands--ends[b-pf6ij7sp03]::after {
    content: "✓";
    position: absolute;
    top: -2px;
    left: calc(100% + 3px);
    font-size: 0.62rem;
    font-weight: 700;
    color: var(--w4l-positive);
    line-height: 1;
}

/* Schuldenfrei-/Ziel-Marker IN der Lane: grüne Linie am Ende des letzten Amortisations-
   jahres + ✓ rechts davon (gleiche Sprache wie der --ends-Cap des Trägers). Klicks fallen
   zur Row/den Blöcken durch. */
.mst-amort-end[b-pf6ij7sp03] {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 0;
    border-left: 2px solid var(--w4l-positive);
    cursor: help; /* Tooltip erklärt schuldenfrei/Ziel; Klick bubbelt zur Row (Lane-Selektion) */
    z-index: 2;
}

.mst-amort-end[b-pf6ij7sp03]::after {
    content: "✓";
    position: absolute;
    top: -2px;
    left: 3px;
    font-size: 0.62rem;
    font-weight: 700;
    color: var(--w4l-positive);
    line-height: 1;
}

/* Payoff-Warn-Tick: Blockende-Tilgung vor dem Perioden-Ende (Plan zu kurz) — gleiche
   Marker-Sprache wie .mst-amort-end, aber Warn-Valenz + ↦ statt ✓. */
.mst-payoff-end[b-pf6ij7sp03],
.mst-redraw[b-pf6ij7sp03] {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 16px;
    min-width: 16px;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    transform: translateX(-8px);
    cursor: help;
    z-index: 2;
}

/* The visible line sits in the middle of the 16px hit area. */
.mst-payoff-end[b-pf6ij7sp03]::before,
.mst-redraw[b-pf6ij7sp03]::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 7px;
    border-left: 2px dashed var(--w4l-warn-fg);
}

.mst-payoff-end[b-pf6ij7sp03]::after {
    content: "↦";
    position: absolute;
    top: -4px;
    left: 11px;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--w4l-warn-fg);
    line-height: 1;
}

/* Planned repayment of a NoDebt window: same hue, solid line and a toned-down glyph, so it does not
   read as the dashed "plan too short" warning above. */
.mst-payoff-end--planned[b-pf6ij7sp03]::before {
    border-left-style: solid;
    border-left-color: color-mix(in srgb, var(--w4l-warn-fg) 75%, var(--neutral-foreground-rest));
}

.mst-payoff-end--planned[b-pf6ij7sp03]::after {
    color: color-mix(in srgb, var(--w4l-warn-fg) 75%, var(--neutral-foreground-rest));
}

/* NoDebt window, re-borrow marker: dashed accent line + ↤ at the start of the redraw year (tokens only);
   the repayment end of the window reuses .mst-payoff-end (↦). */
.mst-redraw[b-pf6ij7sp03]::before {
    border-left-color: var(--accent-fill-rest);
}

.mst-redraw[b-pf6ij7sp03]::after {
    content: "↤";
    position: absolute;
    top: -4px;
    right: 10px;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--accent-fill-rest);
    line-height: 1;
}

.mst-payoff-end:focus-visible[b-pf6ij7sp03],
.mst-redraw:focus-visible[b-pf6ij7sp03] {
    outline: 2px solid var(--accent-fill-rest);
    outline-offset: 0;
}

/* Legend glyphs for the two NoDebt markers. */
.mst-mk[b-pf6ij7sp03] {
    font-style: normal;
    font-weight: 700;
    margin-right: 0.25rem;
}

.mst-mk--repay[b-pf6ij7sp03] {
    color: color-mix(in srgb, var(--w4l-warn-fg) 75%, var(--neutral-foreground-rest));
}

.mst-mk--redraw[b-pf6ij7sp03] {
    color: var(--accent-fill-rest);
}

/* Amortisations-Glyph im kompakten Lane-Label (Details im Tooltip). */
.mst-amort-glyph[b-pf6ij7sp03] {
    margin-left: 0.25rem;
    font-weight: 700;
    color: var(--w4l-positive);
    cursor: help;
}

/* Warn icon (highest finding level of the tranche) in the lane label; tooltip carries the finding text */
.mst-warn[b-pf6ij7sp03] {
    display: inline-flex;
    align-items: center;
    border: 0;
    background: none;
    padding: 0 0.15rem;
    cursor: pointer;
}

.mst-warn:focus-visible[b-pf6ij7sp03] {
    outline: 2px solid var(--focus-stroke-outer);
    outline-offset: 1px;
}

/* Tranche identity on the lane label: 4px edge, colour never as a fill (the bars carry the product colour). */
.mst-lane-name[b-pf6ij7sp03] {
    border-left: 4px solid var(--mst-tranche, var(--neutral-stroke-rest));
    padding-left: 0.35rem;
    min-width: 0;
}


/* Zinsbindungs-Blöcke innerhalb der Bar */
.mst-block[b-pf6ij7sp03] {
    position: absolute;
    top: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0;
    overflow: hidden;
    min-width: 0;
    border: 1px solid var(--w4l-mtg-fixed); /* Product colour: Fest = grün (tokens.css --w4l-mtg-*) */
    border-radius: 4px;
    background: color-mix(in srgb, var(--w4l-mtg-fixed) 18%, transparent);
    cursor: pointer;
    font-size: 0.62rem;
    line-height: 1.1;
    color: inherit;
}

/* SARON = blau */
.mst-block--saron[b-pf6ij7sp03] {
    border-color: var(--w4l-mtg-saron);
    background: color-mix(in srgb, var(--w4l-mtg-saron) 18%, transparent);
}

/* Klassische variable Hypothek = orange; dashed edge is the colour-blind backup (green vs orange). */
.mst-block--variable[b-pf6ij7sp03] {
    border-style: dashed;
    border-color: var(--w4l-mtg-variable);
    background: color-mix(in srgb, var(--w4l-mtg-variable) 20%, transparent);
}

/* Period without a mortgage (MortgageType.NoDebt): outlined, no fill. */
.mst-block--nodebt[b-pf6ij7sp03] {
    border: 1px dashed var(--neutral-stroke-rest);
    background: transparent;
    color: var(--neutral-foreground-rest);
}

.mst-block--nodebt .mst-block-line2[b-pf6ij7sp03] {
    color: var(--neutral-foreground-hint);
}

/* Phone width: the 28px phase keeps its dashed outline and the "None" label only. */
@media (max-width: 480px) {
    .mst-block--nodebt .mst-block-line2[b-pf6ij7sp03] {
        display: none;
    }
}

/* Plan-lose Tranche: Engine-Fallback «Variable +1.25pp» sichtbar gemacht — gestrichelt +
   blass = nicht committet; Klick fällt zur Row durch (Lane-Selektion → Generate-CTA).
   Dotted (not dashed) so it stays distinguishable from the dashed .mst-block--variable. */
.mst-block--auto[b-pf6ij7sp03] {
    border: 1px dotted var(--w4l-mtg-variable);
    background: color-mix(in srgb, var(--w4l-mtg-variable) 7%, transparent);
}

/* Gap (no agreed rate lock, variable assumed — spec 2026-10-05 §5): hatched in the warning
   colour so a span without a contract reads as "open", not as a variable mortgage. Theme token
   only (tokens.css --w4l-warning). */
.mst-block--gap[b-pf6ij7sp03] {
    border: 1px dashed var(--w4l-warning);
    background: repeating-linear-gradient(
        -45deg,
        color-mix(in srgb, var(--w4l-warning) 22%, transparent) 0 4px,
        color-mix(in srgb, var(--w4l-warning) 6%, transparent) 4px 9px);
}

/* Text tone: the raw amber token (--w4l-warning) reaches only ~3.4:1 on the light layer — too little for
   0.62rem text. Mixed toward the foreground token it darkens in light mode and lightens in dark
   mode (~5:1 / ~6:1 against the label background). Tokens only. */
.mst-block--gap .mst-block-line1[b-pf6ij7sp03] {
    font-weight: 600;
    color: color-mix(in srgb, var(--w4l-warning) 70%, var(--neutral-foreground-rest));
}

.mst-block--auto .mst-block-line1[b-pf6ij7sp03] {
    font-style: italic;
    font-weight: 600;
}

/* z-index 2 (not 1): a z-indexed block is its own stacking context, so the label's own
   z-index (see the rule at the end) only counts inside it — at 1 the marker lines (.gantt-marker,
   z-index 1, later in the DOM) painted across the label of the SELECTED block. At 2 the block sits
   above those lines (the fills are translucent, so they still show through the body) but below the
   in-lane amortisation/payoff markers (also 2, later in the DOM: their tooltip and click stay
   reachable); knobs (4) stay on top. */
.mst-block--sel[b-pf6ij7sp03] {
    outline: 2px solid var(--accent-fill-rest);
    outline-offset: 1px;
    z-index: 2;
}

.mst-block:focus-visible[b-pf6ij7sp03] {
    outline: 2px solid var(--accent-fill-rest);
    outline-offset: 1px;
    z-index: 2;
}

/* Narrow blocks (phone width) cut their text with an ellipsis instead of clipping it mid-glyph;
   the full text is in the block's title. Flex children are blockified, so ellipsis applies. */
.mst-block-line1[b-pf6ij7sp03] {
    font-weight: 700;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
}

.mst-block-line2[b-pf6ij7sp03] {
    opacity: 0.75;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
}

/* ── Ziehbare Block-Grenzen (Klassennamen = residenceHtmlTrack.js-Vertrag). ── */
.hrt-knob[b-pf6ij7sp03] {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 0;
    cursor: ew-resize;
    z-index: 4; /* über Blöcken (--sel hat z-index 2) */
    touch-action: none;
}

.hrt-knob-dot[b-pf6ij7sp03] {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 11px;
    height: 11px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: var(--neutral-layer-1);
    border: 1.5px solid var(--neutral-foreground-rest);
}

.hrt-knob:focus-visible[b-pf6ij7sp03] {
    outline: none;
}

.hrt-knob:focus-visible .hrt-knob-dot[b-pf6ij7sp03] {
    outline: 2px solid var(--focus-stroke-outer, var(--accent-fill-rest));
    outline-offset: 2px;
}

/* Visually hidden announcement region for the keyboard slider (stop sentences). */
.mst-live[b-pf6ij7sp03] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.hrt-knob:hover .hrt-knob-dot[b-pf6ij7sp03] {
    transform: translate(-50%, -50%) scale(1.18);
}

.hrt-bubble[b-pf6ij7sp03] {
    position: absolute;
    left: 50%;
    top: -20px;
    transform: translateX(-50%);
    visibility: hidden;
    background: var(--neutral-foreground-rest);
    color: var(--neutral-layer-1);
    font-size: 0.7rem;
    font-weight: 600;
    padding: 1px 5px;
    border-radius: 4px;
    white-space: normal;
    width: max-content;
    max-width: 16rem;
    z-index: 5;
}

.hrt-bubble[data-align="end"][b-pf6ij7sp03] {
    left: auto;
    right: 0;
    transform: none;
}

/* Touch: breitere unsichtbare Grab-Fläche (der width:0-Knob ist sonst nur über den Dot greifbar)
   + grösserer Dot als sichtbare Affordance. */
@media (pointer: coarse) {
    .hrt-knob[b-pf6ij7sp03]::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: -10px;
        right: -10px;
    }

    .hrt-knob-dot[b-pf6ij7sp03] { width: 18px; height: 18px; }
}

/* Legende */
.mst-legend[b-pf6ij7sp03] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem 0.9rem;
    margin-top: 0.4rem;
    font-size: 0.68rem;
    color: var(--neutral-foreground-hint);
}

.mst-dot[b-pf6ij7sp03] {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    margin-right: 0.25rem;
    vertical-align: middle;
}

.mst-dot-fixed[b-pf6ij7sp03] {
    background: var(--w4l-mtg-fixed);
    border: 0;
}

.mst-dot-saron[b-pf6ij7sp03] {
    border: 0;
    background: var(--w4l-mtg-saron);
}

.mst-dot-variable[b-pf6ij7sp03] {
    border: 0;
    background: var(--w4l-mtg-variable);
}

.mst-dot-gap[b-pf6ij7sp03] {
    border: 1px dashed var(--w4l-warning);
    background: repeating-linear-gradient(
        -45deg,
        color-mix(in srgb, var(--w4l-warning) 45%, transparent) 0 2px,
        transparent 2px 4px);
}

.mst-dot-nodebt[b-pf6ij7sp03] {
    border: 1px dashed var(--neutral-stroke-rest);
    background: transparent;
}

.mst-dot-auto[b-pf6ij7sp03] {
    border: 1px dashed var(--w4l-mtg-variable);
    background: color-mix(in srgb, var(--w4l-mtg-variable) 7%, transparent);
}

/* Accordion chevron in the lane label (native <button>, 24×24 hit area). Rotates 90° when
   the lane is open. Focus ring only under :focus-visible (reboot.css resets button outlines). */
.mst-chevron[b-pf6ij7sp03] {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--neutral-foreground-hint, currentColor);
    cursor: pointer;
}

.mst-chevron:hover[b-pf6ij7sp03] {
    background: var(--neutral-fill-stealth-hover);
    color: var(--neutral-foreground-rest);
}

.mst-chevron:focus-visible[b-pf6ij7sp03] {
    outline: 2px solid var(--accent-fill-rest);
    outline-offset: 1px;
}

.mst-chevron svg[b-pf6ij7sp03] {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .15s;
}

.mst-chevron--open svg[b-pf6ij7sp03] {
    transform: rotate(90deg);
}

/* Detail slot of the open lane, between the two GanttTimeline instances. */
.mst-detail[b-pf6ij7sp03] {
    margin: 0.25rem 0 0.75rem;
    padding: 0.75rem 1rem 1rem;
    border: 1px solid var(--neutral-stroke-divider-rest);
    border-radius: 6px;
    background: var(--neutral-layer-2);
}

@media (max-width: 639px) {
    .mst[b-pf6ij7sp03] {
        --w4l-timeline-gutter: 112px;
    }

    .mst[b-pf6ij7sp03]  .gantt-label-amount {
        display: none;
    }
}

@media (pointer: coarse) {
    .mst-chevron[b-pf6ij7sp03] {
        width: 32px;
        height: 32px;
    }
}

/* Lane text on the dotted auto block stays readable above the marker lines. */
.mst-block--auto .mst-block-line1[b-pf6ij7sp03],
.mst-block--auto .mst-block-line2[b-pf6ij7sp03],
.mst-block--gap .mst-block-line1[b-pf6ij7sp03],
.mst-block--gap .mst-block-line2[b-pf6ij7sp03] {
    position: relative;
    z-index: 3;
    padding: 0 3px;
    border-radius: 2px;
    background: color-mix(in srgb, var(--neutral-layer-1) 82%, transparent);
}
/* /Components/Application/Shared/MortgageTranchePane.razor.rz.scp.css */
/* MortgageTranchePane - left column of the open tranche. */
.mtp[b-sxd3lcfvpd] {
    min-width: 0;
    /* No container-type here: .mtp is a row-subgrid of the detail grid (MortgageSection.razor.css) and containment would cut
       it off from the shared rows. --w4l-mtg-amount-width (cqw) resolves against .mtp-amountwrap (= .mtp-r2). */
}

/* Rows of the detail grid shared with the mortgage card: 1 head, 2 amount, 3 caption + pills, 4 slider, 5 rest. Where the
   pane is not a grid, the wrappers just stack. */
.mtp-r1[b-sxd3lcfvpd] { grid-row: 1; }
.mtp-r2[b-sxd3lcfvpd] { grid-row: 2; }
.mtp-r3[b-sxd3lcfvpd] { grid-row: 3; }
.mtp-r4[b-sxd3lcfvpd] { grid-row: 4; }
.mtp-r5[b-sxd3lcfvpd] { grid-row: 5; }

/* Not preceded by a block sibling any more (the amortisation block is split over rows 3 and 4). */
.mtp-r5 > .mtp-block[b-sxd3lcfvpd] {
    margin-top: var(--w4l-mtg-block-gap);
}

/* White space instead of a hairline between the blocks (amount | amortisation | mortgages), no card per block. */
.mtp-block[b-sxd3lcfvpd] {
    margin-top: 0.85rem;
}

.mtp-block + .mtp-block[b-sxd3lcfvpd] {
    margin-top: var(--w4l-mtg-block-gap);
    padding-top: 0;
    border-top: 0;
}

/* Native head (no IconTitleEdit: its host is flex-shrink:0 and overflowed the column). */
.mtp-head[b-sxd3lcfvpd] {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    min-width: 0;
    /* Tranche identity: colour only as edge, never a fill (--mtp-accent set inline by the section). */
    border-left: 4px solid var(--mtp-accent, var(--neutral-stroke-rest));
    padding-left: 0.5rem;
}

.mtp-head-text[b-sxd3lcfvpd] {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.mtp-name[b-sxd3lcfvpd] {
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
    font: inherit;
    font-size: 0.9rem;
    padding: 0.15rem 0.35rem;
    margin-bottom: 0.2rem;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    color: var(--neutral-foreground-rest);
    text-overflow: ellipsis;
}

.mtp-name:hover:not([readonly])[b-sxd3lcfvpd],
.mtp-name:focus[b-sxd3lcfvpd] {
    border-color: var(--neutral-stroke-rest);
    background: var(--neutral-fill-input-rest);
}

.mtp-head-sub[b-sxd3lcfvpd] {
    font-size: 0.72rem;
    color: var(--neutral-foreground-hint);
    overflow-wrap: anywhere;
    padding-left: 0.35rem;
}

.mtp-controls[b-sxd3lcfvpd] {
    display: inline-flex;
    gap: 0.2rem;
    flex: 0 0 auto;
}

.mtp-btn[b-sxd3lcfvpd] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    color: var(--neutral-foreground-rest);
    cursor: pointer;
}

.mtp-btn:hover:not(:disabled):not(.mtp-btn--locked)[b-sxd3lcfvpd] {
    background: var(--neutral-fill-stealth-hover);
}

.mtp-btn:disabled[b-sxd3lcfvpd] {
    opacity: 0.4;
    cursor: default;
}

/* Locked delete (aria-disabled, stays focusable): looks disabled, the hint line explains why. */
.mtp-btn--locked[b-sxd3lcfvpd] {
    opacity: 0.5;
    cursor: not-allowed;
}

.mtp-basis[b-sxd3lcfvpd] {
    margin-top: 0.3rem;
    font-size: 0.85rem;
    color: var(--neutral-foreground-rest);
    overflow-wrap: anywhere;
}

.mtp-lock-hint[b-sxd3lcfvpd] {
    margin-top: 0.3rem;
    font-size: 0.78rem;
    color: var(--neutral-foreground-rest);
    color: color-mix(in srgb, var(--neutral-foreground-rest) 82%, transparent);
}

/* Inline delete confirmation - native buttons, no dialog (pattern .mbc-confirm in MortgageBlockCard). */
.mtp-confirm[b-sxd3lcfvpd] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.6rem;
    margin-top: 0.5rem;
    padding: 0.4rem 0.6rem;
    border-radius: 4px;
    border: 1px solid color-mix(in srgb, var(--w4l-warning) 60%, transparent);
    background: color-mix(in srgb, var(--w4l-warning) 10%, transparent);
    font-size: 0.8rem;
}

.mtp-confirm-text[b-sxd3lcfvpd] {
    flex: 1 1 12rem;
}

.mtp-confirm-btn[b-sxd3lcfvpd] {
    padding: 0.2rem 0.7rem;
    border-radius: 4px;
    border: 1px solid var(--neutral-stroke-rest);
    background: var(--neutral-fill-rest);
    color: var(--neutral-foreground-rest);
    font-size: 0.78rem;
    cursor: pointer;
}

.mtp-confirm-btn:hover[b-sxd3lcfvpd] {
    background: var(--neutral-fill-hover);
}

.mtp-confirm-btn--danger[b-sxd3lcfvpd] {
    border-color: var(--w4l-negative);
    color: var(--w4l-negative);
}

@media (pointer: coarse) {
    .mtp-btn[b-sxd3lcfvpd] {
        width: 2.25rem;
        height: 2.25rem;
    }
}

.mtp-sub[b-sxd3lcfvpd] {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: var(--w4l-mtg-caption-gap);
}

.mtp-sub-row[b-sxd3lcfvpd] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.mtp-sub-row .mtp-sub[b-sxd3lcfvpd] {
    margin-bottom: 0;
}

.mtp-spacer[b-sxd3lcfvpd] {
    flex: 1 1 auto;
}

.mtp-caption[b-sxd3lcfvpd] {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    margin-bottom: var(--w4l-mtg-caption-gap);
}

/* Amortisation fields: CHF amounts take one column (a quarter of the detail width), sliders and
   the 3a account select take the whole column (owner 2026-10-06) - two sliders simply stack. */
.mtp-fields[b-sxd3lcfvpd] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 24px;
    align-items: start;
    margin-top: 0.6rem;
}

.mtp-cell--wide[b-sxd3lcfvpd] {
    grid-column: 1 / -1;
}

.mtp-cell--chf[b-sxd3lcfvpd]  .ym-label {
    font-size: 0.9rem;
    font-weight: 600;
}

/* The amount starts in column 1; in fixed-amount mode the annual amount sits beside it. */
.mtp-cell--amount[b-sxd3lcfvpd] {
    grid-column: 1;
}

@media (max-width: 639px) {
    .mtp-fields[b-sxd3lcfvpd] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.mtp-fields[b-sxd3lcfvpd]  .ym-field {
    display: block;
}

.mtp-planner[b-sxd3lcfvpd] {
    margin-top: 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.mtp-planner-term[b-sxd3lcfvpd] {
    max-width: 22rem;
}

.mtp-planner-note[b-sxd3lcfvpd] {
    font-size: 0.78rem;
    color: var(--neutral-foreground-hint);
}

.mtp-planner-actions[b-sxd3lcfvpd] {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}

/* Status chip (indirect amortisation: pick an account / balance stays flat). */
.mtp-chip[b-sxd3lcfvpd] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.68rem;
    font-weight: 600;
    line-height: 1.1;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    margin-top: 0.4rem;
}

.mtp-chip--warn[b-sxd3lcfvpd] {
    color: var(--w4l-negative);
    background: color-mix(in srgb, var(--w4l-negative) 10%, transparent);
    border: 1px dashed color-mix(in srgb, var(--w4l-negative) 55%, transparent);
}

.mtp-chip--ok[b-sxd3lcfvpd] {
    color: var(--w4l-positive);
    background: color-mix(in srgb, var(--w4l-positive) 12%, transparent);
    border: 1px solid transparent;
}

/* Amount and (top-up) start year side by side (A2/A3). The container is the wrapper, not the row: a container query
   cannot match the element that declares container-type. */
.mtp-amountwrap[b-sxd3lcfvpd] {
    container-type: inline-size;
}

/* Same geometry as the card's .mbc-status (margin-top 0.25rem + the reserved height), so the next block starts on one line
   in both columns; the hints inside carry no margin of their own here. */
.mtp-status[b-sxd3lcfvpd] {
    min-height: var(--w4l-mtg-status-height);
    margin-top: 0.25rem;
    box-sizing: border-box;
}

.mtp-status .mtp-lock-hint[b-sxd3lcfvpd] {
    margin-top: 0;
}

.mtp-amountrow[b-sxd3lcfvpd] {
    display: grid;
    grid-template-columns: var(--w4l-mtg-amount-width) minmax(5.5rem, 7rem);
    gap: 0.75rem;
    align-items: start;
}
/* /Components/Application/Shared/ParticipationTransferSummary.razor.rz.scp.css */
/* ParticipationTransferSummary - read-only transfer step of a business holding (same grid as PropertyTransferSummary;
   a scoped stylesheet does not reach a child component, so the rules live here as well). */
.pts[b-phuddq5f3i] {
    display: block;
}

.w4l-sale-calc[b-phuddq5f3i] {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 10px;
    margin: 0 0 0.5rem 0;
    font-size: 0.82rem;
    font-variant-numeric: tabular-nums;
}

.w4l-sale-calc dt[b-phuddq5f3i] {
    color: var(--neutral-foreground-hint);
    min-width: 0;
    overflow-wrap: anywhere;
}

.w4l-sale-calc dd[b-phuddq5f3i] {
    margin: 0;
    text-align: right;
    font-weight: 600;
    white-space: nowrap;
}

/* A free-text value (the route): wraps under its label instead of starving the label track on a narrow viewport. */
.w4l-sale-calc dd.w4l-transfer-text[b-phuddq5f3i] {
    white-space: normal;
    font-weight: 400;
    grid-column: 1 / -1;
    text-align: left;
}
/* /Components/Application/Shared/PensionBuyInBarEditor.razor.rz.scp.css */
/* PensionBuyInBarEditor — pure HTML/SVG bar-per-year editor (FAST-leak-free). */

.bie-host[b-bcnxse7l00] {
    container-type: inline-size; /* the legend row below reserves more height when the editor itself is narrow (dock, phone) */
    /* Full available width: the host is a flex item in the parent's vertical
       FluentStack (align-items: start, not stretch). Without a definite width it
       shrinks to fit and the child SVG's width:100% collapses against an
       indefinite box — the editor then renders far narrower than its siblings
       (the KPI grid sets width:100% explicitly). Mirrors the note in
       PensionFundForm's .pf-panel rule. */
    width: 100%;
    box-sizing: border-box;
    border-radius: 8px;
}

/* SVG child elements do not carry the isolation scope attribute — reach them via ::deep. */
.bie-host[b-bcnxse7l00]  .bie-handle:focus-visible .bie-grip {
    stroke-width: 3;
}

/* The selected year's handle is emphasised (larger, opaque). */
.bie-host[b-bcnxse7l00]  .bie-handle--selected .bie-grip {
    r: 6.5;
    stroke-width: 3;
}

/* Hover affordance on always-visible handles (incl. empty years at the baseline). */
.bie-host[b-bcnxse7l00]  .bie-handle:hover .bie-grip {
    r: 6.5;
}

/* Touch: grip in hover size, since there is no hover (selected stays recognisable via stroke-width). The hit zone is a
   rect of exactly the column width (no overlap with the neighbour); below 16 px columns a hint points to the field. */
@media (pointer: coarse) {
    .bie-host[b-bcnxse7l00]  .bie-grip { r: 6.5px; }
}

.bie-hint[b-bcnxse7l00] {
    margin: 4px 0 0;
    font-size: 12px;
    color: var(--neutral-foreground-hint);
}

/* Open-WEF-balance step line (end-of-year levels, informational, aria-hidden). */
.bie-host[b-bcnxse7l00]  .bie-wef-line {
    stroke: var(--w4l-info);
    stroke-width: 1.5;
    stroke-dasharray: 4 3;
    fill: none;
}

/* Open-divorce-gap step line (person, end-of-year levels, informational, aria-hidden): dotted — the pattern, not the colour,
   tells it from the dashed WEF line. */
.bie-host[b-bcnxse7l00]  .bie-gap-line {
    stroke: var(--w4l-divorce-gap);
    stroke-width: 2;
    stroke-dasharray: 1 4;
    stroke-linecap: round;
    fill: none;
}

/* Limit curve (one solid line, a dot per buy-in year): the year's limit; replaces the former dashed cap strokes per bar. */
.bie-host[b-bcnxse7l00]  .bie-limit-line {
    stroke: var(--accent-foreground-rest);
    stroke-width: 1.5;
    stroke-linejoin: round;
    opacity: 0.85;
}

.bie-host[b-bcnxse7l00]  .bie-limit-dot {
    fill: var(--accent-foreground-rest);
    stroke: var(--neutral-fill-rest);
    stroke-width: 1;
}

/* The curve is a read-out: it must never swallow the click that selects the year under it. */
.bie-host[b-bcnxse7l00]  .bie-limit { pointer-events: none; }
.bie-host[b-bcnxse7l00]  .bie-limit-line,
.bie-host[b-bcnxse7l00]  .bie-limit-dot { pointer-events: none; }

/* Step layer (ShowExitSteps): the legend row below the chart has a fixed height, so it does not jump with the entries. */
.bie-exit-legend[b-bcnxse7l00] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 16px;
    min-height: 40px;
    padding-top: 6px;
    box-sizing: border-box;
    font-size: 12px;
    color: var(--neutral-foreground-hint);
}

.bie-exit-legend-item[b-bcnxse7l00] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.bie-exit-sw[b-bcnxse7l00] {
    display: inline-block;
    width: 14px;
    height: 10px;
    border-radius: 2px;
    flex: none;
}

.bie-exit-sw--capital[b-bcnxse7l00] { background: var(--w4l-exit-capital); }
.bie-exit-sw--annuity[b-bcnxse7l00] {
    /* Non-colour cue (WCAG 1.4.1): fine diagonal lines, as on the annuity chip in the chart. */
    background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--w4l-exit-ink) 35%, transparent) 0 1px, transparent 1px 5px), var(--w4l-exit-annuity);
}

.bie-exit-sw--lock[b-bcnxse7l00] {
    background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--w4l-warning) 55%, transparent) 0 1.5px, color-mix(in srgb, var(--w4l-warning) 8%, transparent) 1.5px 5px);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--w4l-warning) 30%, transparent);
}

.bie-exit-sw--revoked[b-bcnxse7l00] { background: var(--w4l-warning); opacity: 0.78; }

@container (max-width: 760px) {
    .bie-exit-legend[b-bcnxse7l00] { min-height: 52px; }
}

@container (max-width: 560px) {
    .bie-exit-legend[b-bcnxse7l00] { min-height: 76px; }
}
/* /Components/Application/Shared/PensionBuyInValueGrid.razor.rz.scp.css */
/* PensionBuyInValueGrid — five fixed columns, rows of constant height (spec 2026-10-28 §4.1). Nothing here changes a box size
   when a value, a tick or the year changes: single-line cells, ellipsis instead of wrapping. */
.vg-host[b-amvb6sgyjr] {
    container-type: inline-size;
    width: 100%;
}

.vg-p3-group[b-amvb6sgyjr] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.vg[b-amvb6sgyjr] {
    --vg-cols: 7.5rem minmax(0, 1.2fr) minmax(8rem, 10rem) minmax(7rem, 9rem) minmax(0, 2fr);
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
}

.vg-row[b-amvb6sgyjr] {
    display: grid;
    grid-template-columns: var(--vg-cols);
    align-items: center;
    column-gap: 12px;
    min-height: 40px;
}

.vg-c1[b-amvb6sgyjr] { grid-column: 1; }
.vg-c2[b-amvb6sgyjr] { grid-column: 2; }
.vg-c3[b-amvb6sgyjr] { grid-column: 3; }
.vg-c4[b-amvb6sgyjr] { grid-column: 4; }
.vg-c5[b-amvb6sgyjr] { grid-column: 5; }
/* A 3a row has no year stepper: its tick + account name take the empty column 1 as well. */
.vg-c12[b-amvb6sgyjr] { grid-column: 1 / 3; }

.vg-year[b-amvb6sgyjr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.vg-year-label[b-amvb6sgyjr] {
    min-width: 44px;
    text-align: center;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--neutral-foreground-rest);
}

.vg-nav[b-amvb6sgyjr] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    cursor: pointer;
}

.vg-nav:hover:not(:disabled)[b-amvb6sgyjr] { background: var(--neutral-fill-stealth-hover); }
.vg-nav:disabled[b-amvb6sgyjr] { opacity: 0.35; cursor: default; }

.vg-label[b-amvb6sgyjr] { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.vg-actions[b-amvb6sgyjr] { display: flex; align-items: center; gap: 4px; }

/* Cash label with the «follows the limit» pill beside it on the same line (vertically centred with the field); the pill only
   toggles visibility, so the line never changes. The label never shrinks, the pill gives way first. */
.vg-label-stack[b-amvb6sgyjr] { display: flex; flex-direction: row; align-items: center; min-width: 0; gap: 8px; }
.vg-label-stack .vg-label[b-amvb6sgyjr] { flex: 0 0 auto; max-width: 100%; }
.vg-pill[b-amvb6sgyjr] {
    flex: 0 1 auto;
    min-width: 0;
    padding: 0 6px;
    border-radius: 999px;
    font-size: 0.75rem;
    line-height: 1.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: var(--accent-fill-rest);
    color: var(--foreground-on-accent-rest);
}

.vg-heading[b-amvb6sgyjr] {
    margin-top: 4px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

.vg-note[b-amvb6sgyjr] {
    font-size: 0.8125rem;
    color: var(--neutral-foreground-rest);
}

.vg-account[b-amvb6sgyjr] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.vg-account label[b-amvb6sgyjr] {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Read-only «field»: looks like a disabled input, never takes focus. */
.vg-readonly[b-amvb6sgyjr] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 32px;
    padding: 0 10px;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 4px;
    background: var(--neutral-fill-secondary-rest);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--neutral-foreground-rest);
}

.vg-readonly--empty[b-amvb6sgyjr] { color: var(--neutral-foreground-hint); }


.vg-status[b-amvb6sgyjr] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    font-size: 0.8125rem;
    color: var(--neutral-foreground-rest);
    white-space: nowrap;
    overflow: hidden;
}

.vg-text[b-amvb6sgyjr],
.vg-badge[b-amvb6sgyjr] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Cash row, column 5: limit line + Art.-60a tail line, both always present (constant height, no truncation at 400-1920 px). */
.vg-statuspill[b-amvb6sgyjr] {
    display: inline-block;
    max-width: 100%;
    padding: 0 6px;
    border-radius: 999px;
    font-size: 0.75rem;
    line-height: 1.25rem;
    background: color-mix(in srgb, var(--w4l-warning) 14%, transparent);
    color: var(--neutral-foreground-rest);
    border: 1px solid color-mix(in srgb, var(--w4l-warning) 45%, transparent);
}

/* No pill: the line and its box stay (constant row height), only the ink goes. */
.vg-statuspill--none[b-amvb6sgyjr] { visibility: hidden; }

.vg-stack[b-amvb6sgyjr] { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.vg-limit[b-amvb6sgyjr] { min-height: 36px; }

.vg-badge[b-amvb6sgyjr] {
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--neutral-fill-secondary-rest);
    color: var(--neutral-foreground-rest);
    font-weight: 600;
}

.vg-link[b-amvb6sgyjr] {
    flex: 0 0 auto;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--accent-foreground-rest);
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}

.vg-approx[b-amvb6sgyjr] { display: inline-block; }
.vg-approx--settled[b-amvb6sgyjr] { opacity: 0; }

/* Narrow container (right dock open, tablets): the status word moves to a fixed second line of EVERY row — decided by the
   container's width, never by a tick, the year or a status, so the grid still does not jump. */
@container (max-width: 60rem) {
    .vg-row[b-amvb6sgyjr] { grid-template-columns: 7.5rem minmax(0, 1fr) minmax(8rem, 10rem) minmax(7rem, 9rem); row-gap: 2px; }
    /* The second line starts under the label column (cash row) / under the account name behind the tick (3a rows), not at the edge. */
    .vg-c5[b-amvb6sgyjr] { grid-column: 2 / -1; grid-row: 2; min-height: 24px; /* = badge height (line + 2 x 2px padding): a badge never grows the row */ }
    .vg-p3 .vg-c5[b-amvb6sgyjr] { grid-column: 1 / -1; padding-left: 24px; }
    .vg-c12[b-amvb6sgyjr] { grid-column: 1 / 3; }
    .vg-c5.vg-limit[b-amvb6sgyjr] { min-height: 36px; }
}

/* Phone width: the same five cells wrap into fixed lines (year/label, field/actions, status) — in every state alike. */
@media (max-width: 640px) {
    .vg-row[b-amvb6sgyjr] { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: 4px; }
    .vg-c1[b-amvb6sgyjr] { grid-column: 1; }
    .vg-c2[b-amvb6sgyjr] { grid-column: 2; }
    .vg-c3[b-amvb6sgyjr] { grid-column: 1; }
    .vg-c4[b-amvb6sgyjr] { grid-column: 2; }
    .vg-c5[b-amvb6sgyjr] { grid-column: 1 / -1; grid-row: auto; min-height: 24px; }
    .vg-c5[b-amvb6sgyjr], .vg-p3 .vg-c5[b-amvb6sgyjr] { padding-left: 24px; }
    .vg-label-stack[b-amvb6sgyjr] { flex-wrap: wrap; row-gap: 2px; }
    .vg-label-stack .vg-label[b-amvb6sgyjr] { flex: 0 1 auto; min-width: 0; }
    .vg-c5.vg-limit[b-amvb6sgyjr] { min-height: 36px; }
    .vg-p3 .vg-c12[b-amvb6sgyjr] { grid-column: 1 / -1; }
    /* Sichttest S4 M2: the pill may wrap instead of being cut; it is always rendered, so every state wraps alike. */
    .vg-pill[b-amvb6sgyjr] { white-space: normal; overflow: visible; flex: 0 0 auto; }
    .vg-label[b-amvb6sgyjr] { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.2; }
}
/* /Components/Application/Shared/PersonColorMenu.razor.rz.scp.css */
.pcm-trigger[b-6kf86wcyul] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
}
.pcm-trigger:hover[b-6kf86wcyul] {
    background: var(--neutral-fill-stealth-hover);
}
.pcm-trigger:focus-visible[b-6kf86wcyul] {
    outline: 2px solid var(--accent-fill-rest);
    outline-offset: 1px;
}
.pcm-trigger-dot[b-6kf86wcyul] {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--pcm-color);
    box-shadow: 0 0 0 2px var(--neutral-layer-1), 0 0 0 3px var(--neutral-stroke-rest);
}

.pcm-popover[b-6kf86wcyul] {
    margin: 0;
    padding: 10px;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 8px;
    background: var(--neutral-layer-floating, var(--neutral-layer-1));
    color: var(--neutral-foreground-rest);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
}
@supports (anchor-name: --a) {
    .pcm-popover[b-6kf86wcyul] {
        inset: auto;
        top: anchor(bottom);
        right: anchor(right);
        margin-top: 6px;
        position-try-fallbacks: flip-block, flip-inline;
    }
}

.pcm-grid[b-6kf86wcyul] {
    display: grid;
    grid-template-columns: repeat(3, 32px);
    gap: 8px;
}
.pcm-swatch[b-6kf86wcyul] {
    position: relative;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--pcm-color);
    cursor: pointer;
}
.pcm-swatch:hover[b-6kf86wcyul] {
    transform: scale(1.08);
}
.pcm-swatch:focus-visible[b-6kf86wcyul] {
    outline: 2px solid var(--accent-fill-rest);
    outline-offset: 2px;
}
.pcm-swatch--selected[b-6kf86wcyul] {
    box-shadow: 0 0 0 2px var(--neutral-layer-1), 0 0 0 4px var(--pcm-color);
}
.pcm-swatch--taken[b-6kf86wcyul] {
    opacity: 0.35;
    cursor: not-allowed;
}
.pcm-swatch--taken:hover[b-6kf86wcyul] {
    transform: none;
}
.pcm-swatch--taken[b-6kf86wcyul]::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 15%;
    height: 70%;
    width: 2px;
    background: var(--neutral-foreground-rest);
    transform: translateX(-50%) rotate(45deg);
}

@media (pointer: coarse) {
    .pcm-grid[b-6kf86wcyul] {
        grid-template-columns: repeat(3, 44px);
        gap: 10px;
    }
    .pcm-swatch[b-6kf86wcyul] {
        width: 44px;
        height: 44px;
    }
}
/* /Components/Application/Shared/PhaseFinancingTimeline.razor.rz.scp.css */
/* PhaseFinancingTimeline — scoped CSS. Phase bands in the upper tier carry a soft risk-colour wash
   (fill + border colour set inline per phase — the SAME colour that links the invest-start diamond and
   funding ramp to the phase; kept low-opacity so the lane stays distinct from the fully saturated
   Investment-Strategy lane), the selected phase's risk-tinted funding ramp + the ▲ invest-start markers
   in the lower tier. Knob classes match residenceHtmlTrack.js (.hrt-knob / .hrt-track-area), same as
   the sibling lanes. */

.pft[b-md7smxg4r3] {
    width: 100%;
}

.pft-bands[b-md7smxg4r3] {
    position: relative;
    width: 100%;
    align-self: stretch;
    min-height: 34px; /* two visual tiers: bands (top ~65%) + ramp/markers (bottom ~35%) */
}

/* Consumption-phase bands: upper tier. Fill + border colour are set inline per phase (risk-colour
   wash, zebra-alternating opacity); the values below are only fallbacks. */
.pft-band[b-md7smxg4r3] {
    position: absolute;
    top: 0;
    bottom: 32%;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    box-sizing: border-box;
    overflow: hidden;
    border: 1.4px solid var(--neutral-stroke-strong-rest);
    background: color-mix(in srgb, var(--neutral-foreground-hint) 10%, transparent);
    font-size: 0.72rem;
    font-weight: 400;
    color: var(--neutral-foreground-rest);
    cursor: pointer;
}

.pft-band:hover[b-md7smxg4r3] { filter: brightness(1.12); }

.pft-band-first[b-md7smxg4r3] { border-top-left-radius: 4px; border-bottom-left-radius: 4px; }
.pft-band-last[b-md7smxg4r3] { border-top-right-radius: 4px; border-bottom-right-radius: 4px; }

.pft-band-selected[b-md7smxg4r3] { outline: 2px solid var(--accent-fill-rest); outline-offset: -1px; z-index: 1; }

.pft-band-name[b-md7smxg4r3] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-variant-numeric: tabular-nums;
    font-size: 0.62rem;
}

/* Retirement anchor: dashed vertical line over the full lane height. */
.pft-marker[b-md7smxg4r3] {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 0;
    border-left: 1.5px dashed var(--neutral-foreground-hint);
    pointer-events: none;
    z-index: 0;
}

/* Invest-start markers: small ▲ ticks on the lane's bottom edge, tinted per phase risk band. */
.pft-fund-marker[b-md7smxg4r3] {
    position: absolute;
    bottom: 1px;
    width: 0;
    height: 0;
    transform: translateX(-50%);
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 8px solid; /* colour set inline (risk band) */
    opacity: 0.75;
    pointer-events: none;
    z-index: 1;
}

.pft-fund-marker-selected[b-md7smxg4r3] { opacity: 1; }

/* Funding ramp (selected phase only): lower tier, left→right opacity gradient in the risk colour. */
.pft-ramp[b-md7smxg4r3] {
    position: absolute;
    bottom: 2px;
    height: 26%;
    border-radius: 2px;
    pointer-events: none;
    z-index: 1;
}

/* Present-value label above the invest-start handle (selected phase only). */
.pft-fund-label[b-md7smxg4r3] {
    position: absolute;
    top: 1px;
    transform: translateX(-50%);
    font-size: 0.6rem;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    font-variant-numeric: tabular-nums;
    background: color-mix(in srgb, var(--neutral-layer-1) 75%, transparent);
    padding: 0 4px;
    border-radius: 3px;
    pointer-events: none;
    white-space: nowrap;
    z-index: 2;
}

/* ── Knobs (contract classes shared with residenceHtmlTrack.js). ── */
.hrt-knob[b-md7smxg4r3] { position: absolute; top: 0; bottom: 0; width: 0; cursor: ew-resize; z-index: 3; touch-action: none; }

/* Boundary knobs centre on the PHASE BAND (top 0..68% of the lane), not the full lane height. */
.hrt-knob-dot[b-md7smxg4r3] {
    position: absolute; left: 50%; top: 34%; width: 12px; height: 12px;
    transform: translate(-50%, -50%); border-radius: 50%;
    background: var(--neutral-layer-1); border: 1.5px solid var(--neutral-foreground-rest);
}

.hrt-knob:hover .hrt-knob-dot[b-md7smxg4r3] { transform: translate(-50%, -50%) scale(1.18); }

/* The invest-start knob is a DIAMOND (rotated square) riding the lower tier, tinted per phase —
   visually distinct from the round boundary knobs so the two drags cannot be confused. */
.pft-fund-knob .hrt-knob-dot.pft-fund-dot[b-md7smxg4r3] {
    top: 72%;
    border-radius: 2px;
    transform: translate(-50%, -50%) rotate(45deg);
    /* border colour set inline (risk band) */
}

.pft-fund-knob:hover .hrt-knob-dot.pft-fund-dot[b-md7smxg4r3] { transform: translate(-50%, -50%) rotate(45deg) scale(1.18); }

.hrt-bubble[b-md7smxg4r3] {
    position: absolute; left: 50%; top: -18px; transform: translateX(-50%); visibility: hidden;
    background: var(--neutral-foreground-rest); color: var(--neutral-layer-1);
    font-size: 0.7rem; font-weight: 600; padding: 1px 5px; border-radius: 4px; white-space: nowrap;
}

/* Touch: breitere unsichtbare Grab-Fläche (der width:0-Knob ist sonst nur über den Dot greifbar)
   + grössere Dots als sichtbare Affordance (Rund-Knob UND Fund-Diamant). */
@media (pointer: coarse) {
    .hrt-knob[b-md7smxg4r3]::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: -16px;
        right: -16px;
    }

    .hrt-knob-dot[b-md7smxg4r3] { width: 18px; height: 18px; }
}
/* /Components/Application/Shared/PillarThreeContributionsTimeline.razor.rz.scp.css */
/* PillarThreeContributionsTimeline — scoped CSS. Styles the contribution bands + split knobs
   injected into the shared GanttTimeline's Bar/Label templates. Mirrors InvestmentStrategyTimeline's
   band/knob look; the band tint is a cyan scaled by the segment's fill level. */

.p3c[b-y61okwisg2] {
    width: 100%;
}

/* In-bar contribution bands: absolutely positioned by percent of the lane span; the container
   doubles as the per-lane drag track for the split knobs. */
.p3c-bands[b-y61okwisg2] {
    position: relative;
    width: 100%;
    align-self: stretch;
}

.p3c-band[b-y61okwisg2] {
    position: absolute;
    top: 0;
    bottom: 0;
    /* left/width set inline (percent of the lane span — identical math to the split knob). */
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    box-sizing: border-box;
    overflow: hidden;
    border: 1.4px solid currentColor;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
}

.p3c-band:hover[b-y61okwisg2] { filter: brightness(1.08); }

.p3c-band-first[b-y61okwisg2] { border-top-left-radius: 4px; border-bottom-left-radius: 4px; }
.p3c-band-last[b-y61okwisg2] { border-top-right-radius: 4px; border-bottom-right-radius: 4px; }

.p3c-band-selected[b-y61okwisg2] { outline: 2px solid var(--accent-fill-rest); outline-offset: -1px; z-index: 1; }

.p3c-band-name[b-y61okwisg2] {
    color: inherit;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Split knob (draggable; class names match residenceHtmlTrack.js: .hrt-knob / .hrt-bubble). ── */
.hrt-knob[b-y61okwisg2] { position: absolute; top: 0; bottom: 0; width: 0; cursor: ew-resize; z-index: 3; touch-action: none; }

.hrt-knob-dot[b-y61okwisg2] {
    position: absolute; left: 50%; top: 50%; width: 12px; height: 12px;
    transform: translate(-50%, -50%); border-radius: 50%;
    background: var(--neutral-layer-1); border: 1.5px solid var(--neutral-foreground-rest);
}

.hrt-knob:hover .hrt-knob-dot[b-y61okwisg2] { transform: translate(-50%, -50%) scale(1.18); }

.hrt-bubble[b-y61okwisg2] {
    position: absolute; left: 50%; top: -18px; transform: translateX(-50%); visibility: hidden;
    background: var(--neutral-foreground-rest); color: var(--neutral-layer-1);
    font-size: 0.7rem; font-weight: 600; padding: 1px 5px; border-radius: 4px; white-space: nowrap;
}

/* Touch: breitere unsichtbare Grab-Fläche (der width:0-Knob ist sonst nur über den Dot greifbar)
   + grösserer Dot als sichtbare Affordance. */
@media (pointer: coarse) {
    .hrt-knob[b-y61okwisg2]::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: -16px;
        right: -16px;
    }

    .hrt-knob-dot[b-y61okwisg2] { width: 18px; height: 18px; }
}
/* /Components/Application/Shared/PillarThreeDistributionStrip.razor.rz.scp.css */
/* PillarThreeDistributionStrip - same label gutter as the Gantt rows so the year columns line up with the phases above. */
.p3d[b-lqh96raw6r] {
    display: grid;
    grid-template-columns: var(--w4l-timeline-gutter, 220px) 1fr;
    align-items: stretch;
    min-height: 30px;
}

.p3d-label[b-lqh96raw6r] {
    padding: 0 8px;
    font-size: 0.75rem;
    color: var(--neutral-foreground-hint);
    align-self: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.p3d-track[b-lqh96raw6r] {
    position: relative;
    border-left: 1px solid var(--neutral-stroke-rest);
    border-right: 1px solid var(--neutral-stroke-divider-rest);
    background-image: linear-gradient(to right, var(--neutral-stroke-divider-rest) 1px, transparent 1px);
    background-size: calc(100% / var(--p3d-years)) 100%;
    background-position: left;
}

.p3d-col[b-lqh96raw6r] {
    position: absolute;
    top: 3px;
    bottom: 3px;
    display: flex;
    flex-direction: column-reverse;
    padding: 0 1px;
    box-sizing: border-box;
}

.p3d-seg[b-lqh96raw6r] {
    display: block;
    width: 100%;
    flex: 0 0 auto;
    min-height: 1px;
}

/* A share no open account could take: orange hatching, not a colour of any account. */
.p3d-seg--unplaced[b-lqh96raw6r] {
    background: repeating-linear-gradient(45deg, var(--w4l-warning) 0, var(--w4l-warning) 2px, transparent 2px, transparent 5px);
    border: 1px solid var(--w4l-warning);
    box-sizing: border-box;
}
/* /Components/Application/Shared/PropertySaleSteps.razor.rz.scp.css */
/* PropertySaleSteps — the shared sale sequence of HomeForm/RentalForm (spec 2026-09-23 home-sale §4). */

/* ── No-sale state notice (in-kind transfer / end-of-life, no engine settlement yet) ──────── */
/* B1-7: the notice itself is a FluentMessageBar Warning (UI review Q4); this wrapper only spaces it. */
.w4l-sale-state[b-izpusjzcxb] {
    margin-bottom: 0.75rem;
}

/* ── Read-only sale-date row above the price field ─────────────────────────────────────────── */
.w4l-sale-readonly[b-izpusjzcxb] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
    font-size: 0.85rem;
}

.w4l-sale-readonly > span:first-child[b-izpusjzcxb] {
    color: var(--neutral-foreground-hint);
}

.w4l-sale-readonly > span:nth-child(2)[b-izpusjzcxb] {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* ── Hint under a field (validation-carrying, not decorative — CSS-toggled per Standing Rule) ─ */
.w4l-sale-hint[b-izpusjzcxb] {
    margin-top: 0.3rem;
    font-size: 0.78rem;
    color: var(--neutral-foreground-rest);
}

/* The hint carries its step chip's state colour (B1-7 Must 1), same tokens as .fss-chip--bad/--warn. */
/* The replacement-link confirmation is the last line of its block: keep it off the next field's label
   (Sichttest 2026-09-28 — it sat flush against «Grundstückgewinnsteuer»). */
.w4l-sale-hint--confirm[b-izpusjzcxb] {
    margin-bottom: 0.75rem;
}

.w4l-sale-hint--bad[b-izpusjzcxb] {
    color: var(--w4l-negative);
}

.w4l-sale-hint--warn[b-izpusjzcxb] {
    color: var(--warning-foreground-rest, var(--w4l-warning));
}

/* A Bad input (manual-mode rental without a sale price): the field itself shows the error border
   (B1-7 Should 6), the same padding-box/border-box gradient as the global .ym-row.invalid. */
.w4l-sale-field--bad[b-izpusjzcxb]  .ym-row {
    background:
        padding-box linear-gradient(var(--neutral-fill-input-rest), var(--neutral-fill-input-rest)),
        border-box var(--w4l-negative);
}

/* ── Right column: fixed label/value row set, same grid as StandardFinancingPanel's
   .fin-breakdown — the sale section's own scope keeps this component free of a cross-component
   ::deep dependency; UI review Q3 flags this as the fourth copy worth lifting to utilities.css. ── */
.w4l-sale-calc[b-izpusjzcxb] {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 10px;
    margin: 0;
    font-size: 0.82rem;
    font-variant-numeric: tabular-nums;
}

/* The amount never breaks (at 390 px «573'314 CHF» split mid-number); the label wraps instead. */
.w4l-sale-calc dt[b-izpusjzcxb] {
    color: var(--neutral-foreground-hint);
    min-width: 0;
    overflow-wrap: anywhere;
}

.w4l-sale-calc dd[b-izpusjzcxb] {
    margin: 0;
    text-align: right;
    font-weight: 600;
    white-space: nowrap;
}

/* ── Per-account breakdown row inside .w4l-sale-calc (⑥ Pension: one row per booked PK/FZK) ──── */
.w4l-sale-calc dt.w4l-sale-subrow[b-izpusjzcxb],
.w4l-sale-calc dd.w4l-sale-subrow[b-izpusjzcxb] {
    padding-left: 0.75rem;
    font-size: 0.76rem;
    font-weight: 400;
    color: var(--neutral-foreground-hint);
}

/* ── Sub-heading inside a step's left column (e.g. "Real estate transfer tax" above its field) ─ */
.w4l-sale-subhead[b-izpusjzcxb] {
    margin-top: 0.75rem;
    margin-bottom: 0.3rem;
    font-size: 0.85rem;
    font-weight: 600;
}

/* ── Instant-value "≈" marker (Standing Rule 5 / PensionBuyInForm.Approx pattern) ─────────────
   Space is always reserved: settling only fades the marker out, the number never shifts. */
.bi-approx[b-izpusjzcxb] {
    opacity: 1;
    transition: opacity 0.25s ease;
}

.bi-approx--settled[b-izpusjzcxb] {
    opacity: 0;
}
/* /Components/Application/Shared/PropertyTransferSummary.razor.rz.scp.css */
/* PropertyTransferSummary — read-only transfer tab (spec 2026-10-04 property-transfer-tab §4–§5).
   Scoped copies of the sale sequence's right-column grid (a scoped stylesheet does not reach a child component). */
.w4l-transfer[b-wulwz33c6l] {
    display: block;
}

.w4l-chip[b-wulwz33c6l] {
    /* May wrap onto its own row at phone width instead of forcing a horizontal scroll (UI review S6). */
    flex: 0 1 auto;
    max-width: 100%;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    border: 1px solid var(--neutral-stroke-rest);
    /* Carries "Annahme: ..." text, so full-contrast foreground rather than the hint tone (UI review M2). */
    color: var(--neutral-foreground-rest);
    white-space: normal;
}

.w4l-sale-calc[b-wulwz33c6l] {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 10px;
    margin: 0 0 0.5rem 0;
    font-size: 0.82rem;
    font-variant-numeric: tabular-nums;
}

.w4l-sale-calc dt[b-wulwz33c6l] {
    color: var(--neutral-foreground-hint);
    min-width: 0;
    overflow-wrap: anywhere;
}

.w4l-sale-calc dd[b-wulwz33c6l] {
    margin: 0;
    text-align: right;
    font-weight: 600;
    white-space: nowrap;
}

/* A free-text value (status sentence): wraps instead of running out of the column. */
.w4l-sale-calc dd.w4l-transfer-text[b-wulwz33c6l] {
    white-space: normal;
    font-weight: 400;
    /* Under its label on its own row: in the 1fr/auto grid the sentence's max-content would otherwise starve the
       label track and break it letter by letter on a narrow viewport (UI review I1). */
    grid-column: 1 / -1;
    text-align: left;
}

.w4l-sale-hint[b-wulwz33c6l] {
    margin-top: 0.3rem;
    margin-bottom: 0.5rem;
    font-size: 0.78rem;
    color: var(--neutral-foreground-rest);
}

.w4l-transfer-text-block[b-wulwz33c6l] {
    margin: 0 0 0.5rem 0;
    font-size: 0.82rem;
}

/* The approx marker always reserves its space, settling only fades it (PensionBuyInForm.Approx pattern). */
.bi-approx[b-wulwz33c6l] {
    opacity: 1;
    transition: opacity 0.25s ease;
}

.bi-approx--settled[b-wulwz33c6l] {
    opacity: 0;
}

/* E9 line under the payment row: severity dot, colours from the finding tokens only. */
.w4l-e9-dot[b-wulwz33c6l] {
    display: inline-block;
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    margin-right: 0.35rem;
}

.w4l-e9-dot.red[b-wulwz33c6l] { background: var(--w4l-finding-red); }
.w4l-e9-dot.amber[b-wulwz33c6l] { background: var(--w4l-finding-amber); }
/* /Components/Application/Shared/RatingStars.razor.rz.scp.css */
/* Two stacked copies of the same glyph run: the track in a muted tone, the fill clipped to the
   score. Because both use identical text, the fill lines up exactly without any per-star markup. */
.w4l-stars[b-ls5h3j0jtv] {
    position: relative;
    display: inline-block;
    white-space: nowrap;
    line-height: 1;
    font-size: 14px;
    letter-spacing: 1px;
    vertical-align: middle;
}

.w4l-stars--sm[b-ls5h3j0jtv] {
    font-size: 12px;
    letter-spacing: 0.5px;
}

.w4l-stars-track[b-ls5h3j0jtv] {
    color: var(--neutral-stroke-rest);
}

.w4l-stars-fill[b-ls5h3j0jtv] {
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    overflow: hidden;
    color: var(--w4l-rating-star, #e8a33d);
}
/* /Components/Application/Shared/RenovationFinancingBlock.razor.rz.scp.css */
.rfb[b-amed4d6qo6] { display: flex; flex-direction: column; gap: var(--w4l-space-xs); }

/* Native toggle head, 36px touch target; the summary stays visible open and closed. */
.rfb-head[b-amed4d6qo6] {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--w4l-space-xs);
    width: 100%; min-height: 36px; padding: 0 4px;
    background: none; border: none; border-radius: 4px; cursor: pointer;
    font: inherit; text-align: start; color: inherit;
}
.rfb-head:hover[b-amed4d6qo6] { background: var(--neutral-fill-stealth-hover); }
.rfb-head:focus-visible[b-amed4d6qo6] { outline: 2px solid var(--focus-stroke-outer); outline-offset: 1px; }
.rfb-title[b-amed4d6qo6] { font-weight: 600; }
.rfb-summary[b-amed4d6qo6] { font-size: 0.8125rem; color: var(--neutral-foreground-hint); }
.rfb-trim[b-amed4d6qo6] { font-size: 0.8125rem; color: var(--w4l-warning); }

.rfb-body[b-amed4d6qo6] { display: flex; flex-direction: column; gap: var(--w4l-space-xs); padding: 0 4px var(--w4l-space-xs); }

.rfb-energy[b-amed4d6qo6] { display: flex; flex-wrap: wrap; align-items: center; gap: var(--w4l-space-xs); min-height: 36px; }
.rfb-note[b-amed4d6qo6] { font-size: 0.8125rem; color: var(--neutral-foreground-hint); }

.rfb-group[b-amed4d6qo6] { display: flex; flex-direction: column; gap: 4px; }
.rfb-person[b-amed4d6qo6] { font-size: 0.8125rem; font-weight: 600; color: var(--neutral-foreground-hint); }
.rfb-reason[b-amed4d6qo6], .rfb-empty[b-amed4d6qo6] { margin: 0; font-size: 0.8125rem; color: var(--neutral-foreground-hint); }

/* Label | amount | reason. The label keeps full opacity; only the input is dimmed (by the disabled field). */
.rfb-src[b-amed4d6qo6] {
    display: grid; grid-template-columns: minmax(0, 1fr) 150px minmax(0, 1fr);
    gap: var(--w4l-space-xs); align-items: center;
}
.rfb-label[b-amed4d6qo6] { overflow-wrap: anywhere; }
.rfb-why[b-amed4d6qo6] { font-size: 0.8125rem; color: var(--neutral-foreground-hint); overflow-wrap: anywhere; }

.rfb-line[b-amed4d6qo6] { display: block; font-size: 0.875rem; }
.rfb-status[b-amed4d6qo6] { display: flex; flex-direction: column; gap: 4px; }
.rfb-clamp[b-amed4d6qo6] { display: flex; gap: 6px; align-items: flex-start; margin: 0; font-size: 0.8125rem; color: var(--w4l-warning); }

@media (max-width: 639px) {
    .rfb-src[b-amed4d6qo6] { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .rfb-label[b-amed4d6qo6] { grid-column: 1 / -1; }
    .rfb-why[b-amed4d6qo6] { grid-column: 1 / -1; }
}
/* /Components/Application/Shared/RenovationProjectList.razor.rz.scp.css */
.rpl[b-xbtbbi215b] { display: flex; flex-direction: column; gap: var(--w4l-space-xs); }

/* One shared grid template for the header and every row's field strip: Name | Year | Amount in equal
   thirds, then the trash icon. */
.rpl-header[b-xbtbbi215b], .rpl-cells[b-xbtbbi215b] {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) 36px;
    gap: var(--w4l-space-xs); align-items: center;
}
.rpl-header[b-xbtbbi215b] { padding: 2px 0 4px; border-bottom: 1px solid var(--neutral-stroke-rest); }
.rpl-hd[b-xbtbbi215b] { font-size: 0.75rem; font-weight: 600; color: var(--neutral-foreground-hint); }

/* Discreet delete (BlackoutRowList convention), native button so no FAST element per row; 36px touch target. */
.rpl-del[b-xbtbbi215b] {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; padding: 0;
    background: none; border: none; border-radius: 4px; cursor: pointer;
    opacity: 0.7;
}
.rpl-del:hover[b-xbtbbi215b], .rpl-del:focus-visible[b-xbtbbi215b] { opacity: 1; background: var(--neutral-fill-stealth-hover); }

.rpl-rows[b-xbtbbi215b] { display: flex; flex-direction: column; }
.rpl-row[b-xbtbbi215b] {
    display: flex; flex-direction: column; gap: var(--w4l-space-xs);
    border-bottom: 1px solid var(--neutral-stroke-divider-rest); padding: var(--w4l-space-xs) 0 var(--w4l-space-s);
}
.rpl-row--muted .rpl-cells[b-xbtbbi215b], .rpl-row--muted .rpl-split[b-xbtbbi215b], .rpl-row--muted .rpl-sliders[b-xbtbbi215b] { opacity: 0.6; }
.rpl-hint[b-xbtbbi215b] { color: var(--w4l-warning); font-size: 0.8125rem; }

/* Both sliders side by side; they stack on narrow screens. */
.rpl-sliders[b-xbtbbi215b] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--w4l-space-s); }

.rpl-actions[b-xbtbbi215b] { display: flex; justify-content: flex-end; }
.rpl-link[b-xbtbbi215b] {
    background: none; border: none; padding: 0; cursor: pointer; font: inherit; font-size: 0.8125rem;
    color: var(--accent-foreground-rest); text-decoration: underline;
}

.rpl-summary[b-xbtbbi215b] { display: flex; flex-direction: column; gap: 4px; padding-top: var(--w4l-space-xs); }
.rpl-note[b-xbtbbi215b] {
    display: flex; gap: var(--w4l-space-xs); align-items: flex-start;
    margin-top: var(--w4l-space-xs); padding: 8px 12px;
    border: 1px solid var(--neutral-stroke-divider-rest); border-radius: 6px;
    font-size: 0.8125rem; color: var(--neutral-foreground-hint);
}
.rpl-note[b-xbtbbi215b]  svg, .rpl-note svg[b-xbtbbi215b] { flex-shrink: 0; margin-top: 1px; }
.rpl-summary-label[b-xbtbbi215b] { font-size: 0.75rem; font-weight: 600; color: var(--neutral-foreground-hint); }

/* <= 639px: every row becomes a filled card (same treatment as .w4l-edit-panel, Docs/DesignBacklog.md §1);
   the header strip is hidden, the fields reflow to name+trash / year+amount, sliders stack. */
@media (max-width: 639px) {
    .rpl-header[b-xbtbbi215b] { display: none; }

    .rpl-rows[b-xbtbbi215b] { gap: var(--w4l-space-xs); }
    .rpl-row[b-xbtbbi215b] {
        background: color-mix(in srgb, var(--neutral-fill-secondary-rest) 50%, transparent);
        border-radius: 8px;
        border-bottom: none;
        padding: var(--w4l-space-xs);
    }

    .rpl-cells[b-xbtbbi215b] {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 36px;
        grid-template-areas:
            "name   name   del"
            "year   amount amount";
        row-gap: var(--w4l-space-xs);
    }

    .rpl-name[b-xbtbbi215b] { grid-area: name; }
    .rpl-year[b-xbtbbi215b] { grid-area: year; }
    .rpl-amount[b-xbtbbi215b] { grid-area: amount; }
    .rpl-del[b-xbtbbi215b] { grid-area: del; }

    .rpl-sliders[b-xbtbbi215b] { grid-template-columns: minmax(0, 1fr); }
}

/* Finanzierung block + hint foot (home form only). */
.rpl-fin[b-xbtbbi215b] { border-top: 1px dashed var(--neutral-stroke-divider-rest); padding-top: 2px; }
.rpl-hints[b-xbtbbi215b] { display: flex; flex-direction: column; gap: 4px; padding-top: var(--w4l-space-xs); align-items: flex-start; }
.rpl-hints-body[b-xbtbbi215b] { margin: 0; padding-inline-start: 1.25rem; font-size: 0.8125rem; color: var(--neutral-foreground-hint); display: flex; flex-direction: column; gap: 2px; }
.rpl-topup[b-xbtbbi215b] { margin: 0; display: flex; flex-wrap: wrap; gap: 0.5em; font-size: 0.8125rem; color: var(--neutral-foreground-hint); }
/* /Components/Application/Shared/RenovationSplitBar.razor.rz.scp.css */
.rsb[b-y258dve782] { display: flex; flex-direction: column; gap: 4px; min-width: 0; }

.rsb-bar[b-y258dve782] {
    display: flex; height: 8px; border-radius: 4px; overflow: hidden;
    background: var(--neutral-fill-secondary-rest);
}
.rsb-seg[b-y258dve782] { height: 100%; min-width: 0; }

/* Value-preserving is the neutral baseline; value-adding takes the accent (it raises the cost basis),
   energy & environment the positive green. */
.rsb-maint[b-y258dve782] { background: var(--neutral-foreground-hint); }
.rsb-energy[b-y258dve782] { background: var(--w4l-positive); }
.rsb-value[b-y258dve782] { background: var(--accent-fill-rest); }

.rsb-legend[b-y258dve782] {
    display: flex; flex-wrap: wrap; column-gap: 12px; row-gap: 2px;
    font-size: 0.75rem; color: var(--neutral-foreground-hint);
    font-variant-numeric: tabular-nums;
}
.rsb-legend span[b-y258dve782] { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.rsb-dot[b-y258dve782] { display: inline-block; width: 8px; height: 8px; border-radius: 2px; }
/* /Components/Application/Shared/RentalScorecard.razor.rz.scp.css */
/* ── fin-*-Anatomie (StatCards): kopiert aus RentalForm.razor.css / EffectiveAffordabilitySection
   (scoped CSS ist komponentengebunden — Duplikat nötig). ─────────────────── */
.fin-stats[b-oeso14958j] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-content: flex-start;
    margin-top: 0.5rem;
}

.fin-stat-card[b-oeso14958j] {
    flex: 1 1 0;
    min-width: 130px;
    padding: 8px 10px;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 6px;
    background: var(--neutral-layer-1);
}

.fin-stat-label[b-oeso14958j] {
    font-size: 11px;
    color: var(--neutral-foreground-hint);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    text-align: center;
}

.fin-stat-value[b-oeso14958j] {
    font-size: 22px;
    font-weight: 700;
    margin-top: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.fin-stat-sub[b-oeso14958j] {
    font-size: 0.7rem;
    color: var(--neutral-foreground-hint);
    text-align: center;
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
}

.fit-good[b-oeso14958j]    { color: var(--w4l-positive); }
.fit-caution[b-oeso14958j] { color: var(--w4l-negative); }

/* ── Responsive: KPI-Karten 4 → 2×2 (sm) → 1 Spalte (xs). ────────────────── */
@media (max-width: 639px) {
    .fin-stats .fin-stat-card[b-oeso14958j] {
        flex-basis: calc(50% - 4px);
    }
}

@media (max-width: 479px) {
    .fin-stats .fin-stat-card[b-oeso14958j] {
        flex-basis: 100%;
    }
}
/* /Components/Application/Shared/ReportPreviewDialog.razor.rz.scp.css */
/* Fills the dialog body; the framed document brings its own (print-style) layout. */
.report-preview-frame[b-93ivgwo0vq] {
    width: 100%;
    height: 100%;
    min-height: 60vh;
    border: 0;
    display: block;
    background: var(--neutral-layer-1);
}
/* /Components/Application/Shared/ReportTemplateEditor.razor.rz.scp.css */
/* ReportTemplateEditor — per-tenant report structure editor (chapters, cover, header/footer,
   contact lines) with a resolved-order preview list. Native HTML only (FAST-leak rule). */

.rte[b-n0h99mhu2g] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);
    gap: 24px;
    font-size: var(--type-ramp-base-font-size);
}

.rte-title[b-n0h99mhu2g] {
    margin: 0 0 12px 0;
    font-size: var(--type-ramp-plus-1-font-size);
    color: var(--neutral-foreground-rest);
}

.rte-subtitle[b-n0h99mhu2g] {
    margin: 20px 0 8px 0;
    font-size: var(--type-ramp-base-font-size);
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

.rte-field[b-n0h99mhu2g] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 10px;
}

.rte-label[b-n0h99mhu2g] {
    font-size: var(--type-ramp-minus-1-font-size);
    color: var(--neutral-foreground-hint);
}

.rte-toggle[b-n0h99mhu2g] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    cursor: pointer;
    color: var(--neutral-foreground-rest);
}

.rte-text[b-n0h99mhu2g],
.rte-textarea[b-n0h99mhu2g] {
    padding: 6px 10px;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 6px;
    background: var(--neutral-fill-input-rest);
    color: var(--neutral-foreground-rest);
    font: inherit;
    width: 100%;
    box-sizing: border-box;
}

.rte-textarea[b-n0h99mhu2g] {
    resize: vertical;
}

.rte-table[b-n0h99mhu2g] {
    width: 100%;
    border-collapse: collapse;
}

.rte-row[b-n0h99mhu2g] {
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
}

.rte-row--appendix[b-n0h99mhu2g] {
    background: var(--neutral-fill-secondary-rest);
}

.rte-cell-check[b-n0h99mhu2g] {
    width: 24px;
    padding: 6px 4px;
}

.rte-cell-label[b-n0h99mhu2g] {
    padding: 6px 8px;
    color: var(--neutral-foreground-rest);
}

.rte-cell-move[b-n0h99mhu2g] {
    width: 56px;
    padding: 6px 4px;
    white-space: nowrap;
    text-align: right;
}

.rte-badge[b-n0h99mhu2g] {
    margin-left: 8px;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: var(--type-ramp-minus-2-font-size);
    font-weight: 600;
    background: var(--neutral-fill-secondary-rest);
    color: var(--neutral-foreground-hint);
}

.rte-move-btn[b-n0h99mhu2g] {
    border: 1px solid var(--neutral-stroke-rest);
    background: transparent;
    color: var(--neutral-foreground-rest);
    border-radius: 4px;
    width: 22px;
    height: 22px;
    line-height: 1;
    font-size: var(--type-ramp-minus-2-font-size);
    cursor: pointer;
}

.rte-move-btn:hover[b-n0h99mhu2g] {
    border-color: var(--accent-stroke-control-rest);
    color: var(--accent-foreground-rest);
}

.rte-actions[b-n0h99mhu2g] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
}

.rte-btn[b-n0h99mhu2g] {
    padding: 6px 16px;
    border-radius: 6px;
    border: 1px solid var(--neutral-stroke-rest);
    background: transparent;
    color: var(--neutral-foreground-rest);
    font: inherit;
    cursor: pointer;
}

.rte-btn--primary[b-n0h99mhu2g] {
    border-color: var(--accent-fill-rest);
    background: var(--accent-fill-rest);
    color: var(--foreground-on-accent-rest);
}

.rte-saved[b-n0h99mhu2g] {
    font-size: var(--type-ramp-minus-1-font-size);
    color: var(--neutral-foreground-hint);
}

.rte-preview[b-n0h99mhu2g] {
    border-left: 1px solid var(--neutral-stroke-divider-rest);
    padding-left: 20px;
}

.rte-preview-list[b-n0h99mhu2g] {
    margin: 0;
    padding-left: 20px;
    color: var(--neutral-foreground-rest);
}

.rte-preview-item[b-n0h99mhu2g] {
    padding: 3px 0;
    font-size: var(--type-ramp-minus-1-font-size);
}

.rte-preview-item--appendix[b-n0h99mhu2g] {
    color: var(--neutral-foreground-hint);
}
/* /Components/Application/Shared/ReserveCorridorHint.razor.rz.scp.css */
.rch[b-y66hqdgt31] {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--neutral-stroke-divider-rest);
    border-radius: 6px;
    overflow: hidden;
    font-size: 0.72rem;
    color: var(--neutral-foreground-hint);
}

.rch-zone[b-y66hqdgt31] {
    display: flex;
    align-items: center;
    padding: 3px 10px;
    min-height: 20px;
    background: var(--neutral-fill-stealth-rest);
}

.rch-zone--band[b-y66hqdgt31] {
    background: transparent;
}

/* The two actionable zones, faint by default … */
.rch-zone--surplus[b-y66hqdgt31] {
    background: color-mix(in srgb, #4b9e6a 8%, transparent);
}

.rch-zone--shortfall[b-y66hqdgt31] {
    background: color-mix(in srgb, #dc2626 6%, transparent);
}

/* … and emphasised on the side the hosting form acts on (same tints as the Gantt lanes). */
.rch-zone--hl-invest[b-y66hqdgt31] {
    background: color-mix(in srgb, #4b9e6a 22%, transparent);
    color: var(--neutral-foreground-rest);
}

.rch-zone--hl-withdraw[b-y66hqdgt31] {
    background: color-mix(in srgb, #dc2626 18%, transparent);
    color: var(--neutral-foreground-rest);
}

.rch-line[b-y66hqdgt31] {
    display: flex;
    align-items: center;
    height: 0;
    border-top: 1px dashed var(--neutral-stroke-strong, var(--neutral-stroke-rest));
    position: relative;
}

.rch-linelabel[b-y66hqdgt31] {
    position: absolute;
    right: 8px;
    top: -0.62em;
    padding: 0 4px;
    background: var(--neutral-layer-2, var(--fill-color, transparent));
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--neutral-foreground-hint);
    line-height: 1.2;
}

.rch-zonetext[b-y66hqdgt31] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* /Components/Application/Shared/RiskFitTimeline.razor.rz.scp.css */
.rf[b-mgmhrnc17d] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
}

.rf-lane[b-mgmhrnc17d] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.rf-legend[b-mgmhrnc17d] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 6px;
    font-size: 12px;
    color: var(--neutral-foreground-hint);
}

.rf-legend-item[b-mgmhrnc17d] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.rf-swatch[b-mgmhrnc17d] {
    width: 16px;
    height: 0;
    display: inline-block;
}

.rf-swatch-port[b-mgmhrnc17d] {
    border-top: 2px solid var(--neutral-foreground-rest);
}

.rf-swatch-prof[b-mgmhrnc17d] {
    border-top: 2px dashed var(--neutral-foreground-hint);
}

.rf-swatch-fit[b-mgmhrnc17d] {
    width: 11px;
    height: 11px;
    border-radius: 2px;
    opacity: 0.55;
}

.rf-plot-row[b-mgmhrnc17d] {
    display: flex;
    align-items: stretch;
    width: 100%;
}

.rf-yaxis[b-mgmhrnc17d] {
    position: relative;
    flex: 0 0 22px;
    width: 22px;
}

.rf-ytick[b-mgmhrnc17d] {
    position: absolute;
    right: 4px;
    transform: translateY(-50%);
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
}

.rf-svg-wrap[b-mgmhrnc17d] {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}

.rf-svg-wrap svg[b-mgmhrnc17d] {
    display: block;
    width: 100%;
}

.rf-grid[b-mgmhrnc17d] {
    stroke: var(--neutral-stroke-rest);
    stroke-width: 1;
    opacity: 0.35;
}

.rf-line[b-mgmhrnc17d] {
    fill: none;
}

.rf-line-port[b-mgmhrnc17d] {
    stroke: var(--neutral-foreground-rest);
    stroke-width: 2.5;
    stroke-linejoin: round;
}

.rf-line-prof[b-mgmhrnc17d] {
    stroke: var(--neutral-foreground-hint);
    stroke-width: 2;
    stroke-dasharray: 5 4;
    stroke-linejoin: round;
}

.rf-xaxis[b-mgmhrnc17d] {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: var(--neutral-foreground-hint);
    margin-top: 2px;
}
/* /Components/Application/Shared/RiskModePills.razor.rz.scp.css */
/* Three standalone mode pills (separate, not a joined segmented control). */
.w4l-mode-pills[b-zxw3od21on] {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.w4l-mode-pill[b-zxw3od21on] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 999px;
    background: var(--neutral-fill-stealth-rest);
    color: var(--neutral-foreground-rest);
    font-size: 0.85rem;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
    white-space: nowrap;
}

/* 44 px touch target on coarse pointers (S6-7 ui-ux F-10, Sichttest S-7: measured 30 px high). */
@media (pointer: coarse) { .w4l-mode-pill[b-zxw3od21on] { min-height: 44px; } }

.w4l-mode-pill:hover[b-zxw3od21on] {
    background: var(--neutral-fill-stealth-hover);
}

.w4l-mode-pill--selected[b-zxw3od21on] {
    background: color-mix(in srgb, var(--accent-fill-rest) 14%, transparent);
    border-color: var(--accent-fill-rest);
    color: var(--accent-foreground-rest);
    font-weight: 600;
    cursor: default;
}
/* /Components/Application/Shared/RiskProfileTimeline.razor.rz.scp.css */
/* RiskProfileTimeline — scoped CSS. Styles the bands + split knobs injected into the shared
   GanttTimeline's Bar/Label templates. Mirrors GanttResidenceTimeline's band/knob look. */

.rp[b-konj5wepsd] {
    width: 100%;
}

.rp-owner-chip[b-konj5wepsd] {
    flex-shrink: 0;
    font-size: 0.7rem;
    color: var(--chip, var(--neutral-foreground-hint));
    line-height: 1;
}

/* In-bar risk bands: absolutely positioned by percent of the lane span; the container doubles as
   the per-lane drag track for the split knobs. */
.rp-bands[b-konj5wepsd] {
    position: relative;
    width: 100%;
    align-self: stretch;
}

.rp-band[b-konj5wepsd] {
    position: absolute;
    top: 0;
    bottom: 0;
    /* left/width set inline (percent of the lane span — identical math to the split knob). */
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    box-sizing: border-box;
    overflow: hidden;
    border: 1.4px solid var(--neutral-stroke-strong-rest); /* subtle, closer to text; theme-adaptive */
    font-size: 0.75rem;
    font-weight: 400;
    cursor: pointer;
}

.rp-band:hover[b-konj5wepsd] { filter: brightness(1.08); }

/* Round only outer corners so internal joins read as crisp dividers under the knobs. */
.rp-band-first[b-konj5wepsd] { border-top-left-radius: 4px; border-bottom-left-radius: 4px; }
.rp-band-last[b-konj5wepsd] { border-top-right-radius: 4px; border-bottom-right-radius: 4px; }

.rp-band-selected[b-konj5wepsd] { outline: 2px solid var(--accent-fill-rest); outline-offset: -1px; z-index: 1; }

/* Capacity not yet computed (no simulation) → dashed, slightly muted. */
.rp-band-pending[b-konj5wepsd] { border-style: dashed; opacity: 0.85; }

/* Small filled dot signalling the risk-band heat colour (frame + text stay neutral). */
.rp-band-dot[b-konj5wepsd] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.rp-band-name[b-konj5wepsd] {
    color: inherit;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Split knob (draggable; class names match residenceHtmlTrack.js: .hrt-knob / .hrt-bubble). ── */
.hrt-knob[b-konj5wepsd] { position: absolute; top: 0; bottom: 0; width: 0; cursor: ew-resize; z-index: 3; touch-action: none; }

.hrt-knob-dot[b-konj5wepsd] {
    position: absolute; left: 50%; top: 50%; width: 12px; height: 12px;
    transform: translate(-50%, -50%); border-radius: 50%;
    background: var(--neutral-layer-1); border: 1.5px solid var(--neutral-foreground-rest);
}

.hrt-knob:hover .hrt-knob-dot[b-konj5wepsd] { transform: translate(-50%, -50%) scale(1.18); }

.hrt-bubble[b-konj5wepsd] {
    position: absolute; left: 50%; top: -18px; transform: translateX(-50%); visibility: hidden;
    background: var(--neutral-foreground-rest); color: var(--neutral-layer-1);
    font-size: 0.7rem; font-weight: 600; padding: 1px 5px; border-radius: 4px; white-space: nowrap;
}

/* Touch: breitere unsichtbare Grab-Fläche (der width:0-Knob ist sonst nur über den Dot greifbar)
   + grösserer Dot als sichtbare Affordance. */
@media (pointer: coarse) {
    .hrt-knob[b-konj5wepsd]::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: -16px;
        right: -16px;
    }

    .hrt-knob-dot[b-konj5wepsd] { width: 18px; height: 18px; }
}
/* /Components/Application/Shared/ScheduleActionRail.razor.rz.scp.css */
/* Side panel in the exact /Sharing fm-col recipe: quiet tint running the FULL scroll-body height
   (negative top/bottom margins reclaim the page-body padding so the tint spans from the IconTitle
   line to the footer), flush to the work-area edge on the right. The host grid must use gap:0 +
   align-items:stretch + grid-template-rows:1fr for the stretch to reach the footer.
   All colors are theme tokens / color-mix (raw-hex lint). */
.rail-root[b-195rcxg5um] {
    --sc-panel-bg: color-mix(in srgb, var(--neutral-fill-secondary-rest) 50%, transparent);
    display: flex; flex-direction: column; gap: 18px; min-width: 0;
    background: var(--sc-panel-bg);
    margin-top: -1.625rem; margin-bottom: -1.5rem; margin-right: -1rem;
    padding: 1.625rem 16px 1.5rem 14px;
}
@media (min-width: 900px) {
    .rail-root[b-195rcxg5um] { margin-right: -1.5rem; }
}
@media (max-width: 859px) {
    .rail-root[b-195rcxg5um] { background: none; margin: 0; padding: 0 0 14px; }
}

/* Section header — the /Sharing .fm-col-head recipe. min-height 32px aligns the first header's
   divider with the Calendar|Availability tab strip's bottom border in the main column
   (tab: 6px pad + ~17px line + 6px pad + 2px border + 1px strip border ≈ 32px). */
.rail-col-head[b-195rcxg5um] { flex: none; display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 0.95rem;
                 color: var(--neutral-foreground-rest); padding-bottom: 10px; margin-bottom: 10px;
                 border-bottom: 1px solid var(--neutral-stroke-divider-rest);
                 min-height: 32px; box-sizing: border-box; }
.rail-col-head > span[b-195rcxg5um] { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.rail-section[b-195rcxg5um] { display: flex; flex-direction: column; min-width: 0; }

.rail-upcoming[b-195rcxg5um] { display: flex; flex-direction: column; gap: 4px; }
.rail-up-row[b-195rcxg5um] { display: flex; align-items: center; gap: 8px; border: none; background: transparent; cursor: pointer; padding: 4px 2px; font: inherit; font-size: 0.82rem; color: var(--neutral-foreground-rest); text-align: left; border-radius: 6px; min-width: 0; }
.rail-up-row:hover[b-195rcxg5um] { background: color-mix(in srgb, var(--accent-fill-rest) 8%, transparent); }
.rail-up-row:focus-visible[b-195rcxg5um] { outline: 2px solid var(--accent-fill-rest); outline-offset: 1px; }
.rail-up-dot[b-195rcxg5um] { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--accent-fill-rest); }
.rail-up-dot.is-approval[b-195rcxg5um] { background: var(--w4l-warning); }
.rail-up-when[b-195rcxg5um] { font-variant-numeric: tabular-nums; white-space: nowrap; }
.rail-up-who[b-195rcxg5um] { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--neutral-foreground-hint); }
.rail-up-mode[b-195rcxg5um] { flex: none; font-size: 0.8rem; }

.rail-selection[b-195rcxg5um] { min-height: 40px; margin-bottom: 10px; }

.rail-cards[b-195rcxg5um] { margin-top: 8px; }
.rail-cards-summary[b-195rcxg5um] { cursor: pointer; font-size: 0.85rem; color: var(--neutral-foreground-hint); list-style: none; padding: 4px 0; }
.rail-cards-summary[b-195rcxg5um]::-webkit-details-marker { display: none; }
.rail-cards-body[b-195rcxg5um] { display: flex; flex-direction: column; gap: 10px; max-height: 50vh; overflow-y: auto; padding-top: 4px; }

@media (max-width: 859px) {
    .rail-cards-body[b-195rcxg5um] { max-height: none; }
}
/* /Components/Application/Shared/SchedulerWeekGrid.razor.rz.scp.css */
/* SchedulerWeekGrid — isolated (Blazor CSS scoping applies automatically to this file).
   PE5: the only breakpoint on /Schedule is 860px — no second value introduced here. */

.swg-root[b-x1hztyj2lc] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.swg-grid[b-x1hztyj2lc] {
    display: grid;
    grid-template-columns: 56px repeat(7, minmax(32px, 1fr));
    max-height: 480px;
    overflow-y: auto;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 6px;
}

.swg-corner[b-x1hztyj2lc] {
    position: sticky;
    top: 0;
    left: 0;
    z-index: 2;
    background: var(--neutral-layer-1);
}

.swg-daylabel[b-x1hztyj2lc] {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--neutral-layer-1);
    border: none;
    border-bottom: 1px solid var(--neutral-stroke-rest);
    font: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 4px 2px;
    cursor: pointer;
    color: var(--neutral-foreground-rest);
}

.swg-daylabel:hover[b-x1hztyj2lc],
.swg-daylabel:focus-visible[b-x1hztyj2lc] {
    color: var(--accent-fill-rest);
}

.swg-timelabel[b-x1hztyj2lc] {
    font-size: 0.72rem;
    color: var(--neutral-foreground-hint);
    padding: 0 6px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    font-variant-numeric: tabular-nums;
    border-top: 1px solid var(--neutral-stroke-rest);
}

.swg-cell[b-x1hztyj2lc] {
    height: 20px;
    border-top: 1px solid var(--neutral-stroke-rest);
    border-left: 1px solid var(--neutral-stroke-rest);
    background: var(--neutral-fill-secondary-rest);
    cursor: pointer;
    touch-action: none; /* the pointer-capture paint gesture owns this axis, not page scroll */
    user-select: none;
}

.swg-cell.is-on[b-x1hztyj2lc] {
    background: var(--accent-fill-rest);
}

.swg-legend[b-x1hztyj2lc] {
    font-size: 0.78rem;
    color: var(--neutral-foreground-hint);
    display: flex;
    align-items: center;
    gap: 6px;
}

.swg-legend i[b-x1hztyj2lc] {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 2px;
    background: var(--neutral-fill-secondary-rest);
}

.swg-legend i.is-on[b-x1hztyj2lc] {
    background: var(--accent-fill-rest);
}

.swg-legend i + i[b-x1hztyj2lc] {
    margin-left: 10px;
}

/* ── ≤860px alternative + keyboard path ──────────────────────────────────────────────────
   Both trees always render; only `display` toggles — never @if (Docs/BlazorFastLeaks.md). */

.swg-mobile[b-x1hztyj2lc] {
    display: none;
}

@media (max-width: 860px) {
    .swg-mobile[b-x1hztyj2lc] {
        display: block;
    }
    .swg-grid[b-x1hztyj2lc],
    .swg-legend[b-x1hztyj2lc] {
        display: none;
    }
}

/* Keyboard path: Enter on a day header forces the list open regardless of viewport width. */
.swg-mobile.is-kb-open[b-x1hztyj2lc] {
    display: block;
}

.swg-kb-close[b-x1hztyj2lc] {
    display: block;
    margin-bottom: 6px;
    border: 1px dashed var(--neutral-stroke-rest);
    background: transparent;
    border-radius: 6px;
    font: inherit;
    font-size: 0.78rem;
    cursor: pointer;
    color: var(--neutral-foreground-hint);
    padding: 2px 8px;
}

.swg-kb-close:hover[b-x1hztyj2lc] {
    border-color: var(--accent-fill-rest);
    color: var(--neutral-foreground-rest);
}

.swg-day-row[b-x1hztyj2lc] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.swg-day-name[b-x1hztyj2lc] {
    flex: none;
    width: 34px;
    font-weight: 600;
    font-size: 0.85rem;
}

.swg-ranges[b-x1hztyj2lc] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.swg-range[b-x1hztyj2lc] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.85rem;
}

.swg-range-sep[b-x1hztyj2lc] {
    color: var(--neutral-foreground-hint);
}

.swg-range-del[b-x1hztyj2lc],
.swg-range-add[b-x1hztyj2lc] {
    border: 1px dashed var(--neutral-stroke-rest);
    background: transparent;
    border-radius: 6px;
    font: inherit;
    font-size: 0.78rem;
    cursor: pointer;
    color: var(--neutral-foreground-hint);
    padding: 2px 8px;
}

.swg-range-del:hover[b-x1hztyj2lc],
.swg-range-add:hover[b-x1hztyj2lc] {
    border-color: var(--accent-fill-rest);
    color: var(--neutral-foreground-rest);
}
/* /Components/Application/Shared/SettlementFlow.razor.rz.scp.css */
/* SettlementFlow — P1 fixed left, P2 fixed right; a colored double chevron next to
   the amount carries the direction (no underline/line — nothing to overlap text).
   Person colors arrive theme-resolved via inline styles. */

.sf[b-4epely663e] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 4px 0 6px;
}

/* Person: neutral text + discreet identity-color chip on the left. */
.sf-party[b-4epely663e] {
    flex: 0 1 auto;
    max-width: 34%;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--neutral-foreground-rest);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sf-party--right[b-4epely663e] {
    text-align: right;
}

.sf-chip[b-4epely663e] {
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    border-radius: 2px;
}

.sf-mid[b-4epely663e] {
    flex: 1 1 auto;
    min-width: 40px;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 6px;
}

.sf-chevron[b-4epely663e] {
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: -2px;
    line-height: 1;
    align-self: center;
}

.sf--bound .sf-chevron[b-4epely663e] {
    opacity: 0.65;
}

.sf-amount[b-4epely663e] {
    font-weight: 700;
    font-size: 1rem;
    font-variant-numeric: tabular-nums;
    color: var(--neutral-foreground-rest);
    white-space: nowrap;
}

.sf-detail[b-4epely663e] {
    font-weight: 500;
    font-size: 0.8rem;
    opacity: 0.7;
}

.sf-none[b-4epely663e] {
    font-weight: 500;
    font-size: 0.85rem;
    opacity: 0.7;
    text-align: center;
}

/* Mobile: stays one row — stacking would destroy the left/right semantics. */
@media (max-width: 639px) {
    .sf[b-4epely663e] {
        gap: 8px;
    }

    .sf-party[b-4epely663e] {
        font-size: 0.85rem;
    }
}
/* /Components/Application/Shared/ShareBar.razor.rz.scp.css */
/* ShareBar — 100 % bar of one paying rank with boundary handles, plus a legend of pills.
   Colours come from theme tokens or from the per-segment custom property --sb-seg (the rotation palette);
   rest segments are hatched with a repeating gradient built from that colour — no raw hex. */

.sb[b-srr7gl9n9l] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* 26 px like the ValueSlider track and P3FillBar (utilities.css). Room above for the drag bubble. */
.sb__track[b-srr7gl9n9l] {
    position: relative;
    height: 26px;
    margin-top: 28px;
    border-radius: 4px;
    border: 1px solid var(--neutral-stroke-divider-rest);
    background: var(--neutral-layer-2);
    user-select: none;
    touch-action: none;
    cursor: pointer;
}

.sb--readonly .sb__track[b-srr7gl9n9l] {
    margin-top: 0;
    cursor: default;
}

.sb__seg[b-srr7gl9n9l] {
    position: absolute;
    top: 0;
    bottom: 0;
    box-sizing: border-box;
    border-right: 1px solid var(--neutral-layer-1);
    transition: left 0.18s ease, width 0.18s ease;
}

.sb__seg:first-child[b-srr7gl9n9l] {
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
}

.sb__seg--last[b-srr7gl9n9l] {
    border-right: none;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
}

/* Every share fully coloured in the person's colour (fixed or rest makes no visible difference). */
.sb__seg[b-srr7gl9n9l] {
    background: var(--sb-seg);
}

.sb__seg--hl[b-srr7gl9n9l] {
    box-shadow: inset 0 0 0 2px var(--neutral-foreground-rest);
}

/* Handles sit on the boundary; the hit area is the same 16 px as the site-wide grips. */
.sb__handle[b-srr7gl9n9l] {
    position: absolute;
    top: -5px;
    bottom: -5px;
    width: 16px;
    margin-left: -8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: ew-resize;
    touch-action: none;
    z-index: 2;
    transition: left 0.18s ease;
}

.sb__handle[b-srr7gl9n9l]::before {
    content: "";
    width: 12px;
    height: 12px;
    border-radius: 50%;
    box-sizing: border-box;
    background: var(--neutral-layer-1);
    border: 1.5px solid var(--neutral-foreground-rest);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--neutral-layer-1) 70%, transparent);
    transition: transform 0.1s ease;
}

.sb__handle:hover[b-srr7gl9n9l]::before,
.sb__handle:focus-visible[b-srr7gl9n9l]::before {
    transform: scale(1.18);
}

.sb__handle:focus-visible[b-srr7gl9n9l] {
    outline: 2px solid var(--accent-fill-rest);
    outline-offset: -1px;
    border-radius: 50%;
}

@media (pointer: coarse) {
    .sb__handle[b-srr7gl9n9l] {
        width: 32px;
        margin-left: -16px;
    }
}

/* While a handle moves, the preview must follow the pointer without easing. */
.sb__track--dragging .sb__seg[b-srr7gl9n9l],
.sb__track--dragging .sb__handle[b-srr7gl9n9l] {
    transition: none;
}

.sb__bubble[b-srr7gl9n9l] {
    position: absolute;
    bottom: calc(100% + 8px);
    transform: translateX(-50%);
    white-space: nowrap;
    pointer-events: none;
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    padding: 2px 8px;
    border-radius: 4px;
    background: var(--neutral-foreground-rest);
    color: var(--neutral-layer-1);
    z-index: 3;
}

.sb__bubble--clamp[b-srr7gl9n9l] {
    background: var(--w4l-negative);
}

/* ── Legend pills ── */
.sb__pills[b-srr7gl9n9l] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.sb__pills[b-srr7gl9n9l]  .sb__pill,
.sb__pill[b-srr7gl9n9l] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 28px;
    padding: 2px 10px;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 999px;
    background: var(--neutral-layer-1);
    color: var(--neutral-foreground-rest);
    font-variant-numeric: tabular-nums;
}

.sb:not(.sb--readonly) .sb__pill[b-srr7gl9n9l] {
    cursor: pointer;
}

.sb__pill:hover[b-srr7gl9n9l] {
    border-color: var(--accent-fill-rest);
}

.sb__pill-name[b-srr7gl9n9l] {
    font-weight: 500;
}

/* Room for "100 %" so a pill never changes its width while the shares move. */
.sb__pill-pct[b-srr7gl9n9l] {
    color: var(--neutral-foreground-hint);
    min-width: 3.4em;
    text-align: right;
}

.sb__swatch[b-srr7gl9n9l] {
    flex: none;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    background: var(--sb-seg);
}

.sb__swatch--external[b-srr7gl9n9l] {
    background: var(--neutral-fill-strong-rest);
}

/* Pills and pill actions the caller renders (PillAction / Additions) carry no scope attribute of this component. */
.sb__pills[b-srr7gl9n9l]  .sb__pill--add {
    border-style: dashed;
    color: var(--neutral-foreground-hint);
    background: transparent;
    font: inherit;
    cursor: pointer;
}

.sb__pills[b-srr7gl9n9l]  .sb__pill--add:hover {
    color: var(--accent-fill-rest);
    border-color: var(--accent-fill-rest);
}

.sb__pills[b-srr7gl9n9l]  .sb__pill-x {
    border: 0;
    background: none;
    padding: 0 0 0 2px;
    margin-right: -4px;
    font: inherit;
    font-size: 1rem;
    line-height: 1;
    color: var(--neutral-foreground-hint);
    cursor: pointer;
    min-width: 20px;
    min-height: 20px;
}

.sb__pills[b-srr7gl9n9l]  .sb__pill-x:hover {
    color: var(--w4l-negative);
}

.sb__pills[b-srr7gl9n9l]  .sb__pill-x:focus-visible,
.sb__pills[b-srr7gl9n9l]  .sb__pill--add:focus-visible {
    outline: 2px solid var(--accent-fill-rest);
    outline-offset: 1px;
    border-radius: 999px;
}

.sb__lock[b-srr7gl9n9l] {
    display: inline-flex;
    color: var(--neutral-foreground-hint);
}

@media (pointer: coarse) {
    .sb__pill[b-srr7gl9n9l] {
        min-height: 36px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sb__seg[b-srr7gl9n9l],
    .sb__handle[b-srr7gl9n9l] {
        transition: none;
    }
}

.sb--readonly .sb__handle[b-srr7gl9n9l] {
    display: none;
}
/* /Components/Application/Shared/StandardFinancingPanel.razor.rz.scp.css */
/* ── CSS-Balken (leak-frei, theme-aware via FluentUI-Tokens) ─────────────
   Seit dem Split in Section-Komponenten (CollateralValue-/MinimumRequirements-/
   EquitySourcesSection) leben die fin-*-Elemente in Kind-Komponenten — alle Regeln
   laufen deshalb über ::deep unterhalb des .fin-flow-Wrappers (Single Source,
   keine Duplikation in den Kind-CSS-Dateien). */
.fin-flow[b-3820nzjr7w]  .fin-chart-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    margin-bottom: 0.2rem;
}

.fin-flow[b-3820nzjr7w]  .fin-row-label {
    font-size: 0.7rem;
    color: var(--neutral-foreground-hint, #707a87);
    margin: 0.3rem 0 0.15rem;
    font-variant-numeric: tabular-nums;
}

.fin-flow[b-3820nzjr7w]  .fin-bar {
    position: relative;
    display: flex;
    width: 100%;
    height: 26px;
    border-radius: 4px;
    overflow: hidden;
    background: var(--neutral-layer-2);
    border: 1px solid var(--neutral-stroke-rest);
}

/* ── Tragbarkeits-Bar: der Bruttolohn ist die helle Hintergrund-Zone,
      die Kostensegmente liegen als Layer darüber und "verbrauchen" den Lohn. ── */
.fin-flow[b-3820nzjr7w]  .fin-afford-bar {
    height: 30px;
}

.fin-flow[b-3820nzjr7w]  .fin-income-zone {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    background: color-mix(in srgb, var(--w4l-income-accent) 16%, transparent);
    border-right: 2px solid var(--w4l-income-accent);
}

.fin-flow[b-3820nzjr7w]  .fin-segs {
    position: absolute;
    inset: 0;
    display: flex;
}

.fin-flow[b-3820nzjr7w]  .fin-ok   { color: var(--w4l-positive); }
.fin-flow[b-3820nzjr7w]  .fin-over { color: var(--w4l-negative); }

.fin-flow[b-3820nzjr7w]  .fin-dot-income {
    background: color-mix(in srgb, var(--w4l-income-accent) 25%, transparent);
    border: 1px solid var(--w4l-income-accent);
}

.fin-flow[b-3820nzjr7w]  .fin-bar .seg {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.68rem;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    min-width: 0;
}

/* Tragbarkeit: grau = Kostenkomponenten */
.fin-flow[b-3820nzjr7w]  .seg-int { background: var(--w4l-bar-strong); }
.fin-flow[b-3820nzjr7w]  .seg-amo { background: var(--w4l-bar-mid); }
.fin-flow[b-3820nzjr7w]  .seg-mnt { background: var(--w4l-bar-soft); }

.fin-flow[b-3820nzjr7w]  .fin-bar.under { box-shadow: inset 0 0 0 1px rgba(16, 185, 129, 0.5); }
.fin-flow[b-3820nzjr7w]  .fin-bar.over { box-shadow: inset 0 0 0 1px rgba(239, 68, 68, 0.6); }

.fin-flow[b-3820nzjr7w]  .fin-marker {
    position: absolute;
    top: -2px;
    bottom: -2px;
    width: 0;
    border-left: 2px dashed var(--neutral-foreground-rest);
    pointer-events: none;
}

.fin-flow[b-3820nzjr7w]  .fin-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem 0.85rem;
    margin-top: 0.25rem;
    font-size: 0.72rem;
    color: var(--neutral-foreground-rest);
}

.fin-flow[b-3820nzjr7w]  .fin-legend .dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    margin-right: 0.25rem;
    vertical-align: middle;
}

.fin-flow[b-3820nzjr7w]  .fin-legend-marker { opacity: 0.8; }

/* ── StatCards (Pattern: StrategyForm .stat-card) — Struktur + Conclusions ── */
.fin-flow[b-3820nzjr7w]  .fin-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-content: flex-start;
    margin-top: 0.5rem;
}

.fin-flow[b-3820nzjr7w]  .fin-stat-card {
    flex: 1 1 0;
    /* 180 px: at phone width (panel ~306 px) the cards stack one per row instead of squeezing the
       label/amount breakdown into ~130 px, where a «333'000» line broke apart (start brief C12). */
    min-width: 180px;
    padding: 8px 10px;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 6px;
    background: var(--neutral-layer-1);
}

/* Liquiditäts-Warnung: frei verfügbare Mittel decken das Mindest-Eigenkapital nicht. */
.fin-flow[b-3820nzjr7w]  .fin-stat-card--warn {
    border-color: var(--warning-foreground-rest, #b8860b);
    background: color-mix(in srgb, var(--warning-foreground-rest, #b8860b) 9%, var(--neutral-layer-1));
}

.fin-flow[b-3820nzjr7w]  .fin-stat-label {
    font-size: 11px;
    color: var(--neutral-foreground-hint);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    text-align: center;
}

.fin-flow[b-3820nzjr7w]  .fin-stat-value {
    font-size: 22px;
    font-weight: 700;
    margin-top: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.fin-flow[b-3820nzjr7w]  .fit-good    { color: var(--w4l-positive); }
.fin-flow[b-3820nzjr7w]  .fit-caution { color: var(--w4l-negative); }

/* Gedämpfte Zusatzzeile unter dem Stat-Value (z.B. «min. income …»). */
.fin-flow[b-3820nzjr7w]  .fin-stat-sub {
    font-size: 0.7rem;
    color: var(--neutral-foreground-hint);
    text-align: center;
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
}

/* Imputed-cost-Aufschlüsselung (Unterhalt / Zins / Amortisation) in der ersten Card. */
.fin-flow[b-3820nzjr7w]  .fin-breakdown {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2px 10px;
    margin-top: 4px;
    font-size: 0.74rem;
    font-variant-numeric: tabular-nums;
}

/* The amount never breaks (at 390 px «573'314 CHF» split mid-number); the label wraps instead. */
.fin-flow[b-3820nzjr7w]  .fin-breakdown > span:nth-child(odd) {
    color: var(--neutral-foreground-hint);
    min-width: 0;
    overflow-wrap: anywhere;
    /* keeps the colour dot beside its text when the label wraps */
    display: flex;
    align-items: baseline;
}

.fin-flow[b-3820nzjr7w]  .fin-breakdown > span:nth-child(even) {
    text-align: right;
    font-weight: 600;
    white-space: nowrap;
}

.fin-flow[b-3820nzjr7w]  .fin-breakdown > span.fin-bd-total {
    border-top: 1px solid var(--neutral-stroke-divider-rest);
    margin-top: 2px;
    padding-top: 3px;
    font-weight: 700;
    color: var(--neutral-foreground-rest);
}

.fin-flow[b-3820nzjr7w]  .fin-breakdown .dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    margin-right: 0.3rem;
    vertical-align: middle;
}

/* 100 % Eigenkapital: Tragbarkeits-Elemente sind nicht relevant → gedimmt */
.fin-flow[b-3820nzjr7w]  .fin-muted {
    opacity: 0.35;
    filter: grayscale(0.7);
    pointer-events: none;
    user-select: none;
}

/* Icon-only Reset-Button rechts neben dem Section-Titel (HeaderActions der Steps). */
.fin-flow[b-3820nzjr7w]  .fin-reset-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0.2rem;
    border-radius: 6px;
    color: var(--neutral-foreground-hint);
    flex: none;
}

.fin-flow[b-3820nzjr7w]  .fin-reset-btn:hover {
    background: var(--neutral-fill-stealth-hover);
    color: var(--neutral-foreground-rest);
}

.fin-flow[b-3820nzjr7w]  .fin-reset-btn:focus-visible {
    outline: 2px solid var(--accent-fill-rest);
    outline-offset: 1px;
}
/* /Components/Application/Shared/StartExamplesSection.razor.rz.scp.css */
/* StartExamplesSection — the example-household grid.
   Colours come from tokens only (Docs/Css.md, W4L.Test/Theming/RawHexLintTests). */

/* Why not FluentGrid: it is `display: flex; flex-wrap: wrap`, and a flex row can only equalise the
   TOTAL height of its cards. Inside a card the preview is the flexible remainder, so a card whose
   difference lines wrap one line more than its neighbours' pays for that line out of its own
   preview — Martina's card (its longest line is 69 characters against the neighbours' 63 and 59)
   shrank first as the window narrowed. A real grid hands its four rows — axis, switch, story,
   preview — down to every card via subgrid, so all four align across the band and the preview row
   is the same height in every card at every width, without truncating a single word.

   Geometry is deliberately identical to the FluentGrid (Spacing=3, xs=12 sm=6 md=4) it replaces:
   Fluent's breakpoints are 600 and 960 px, and its 12px item padding against a -12px container
   margin yields the same 24px gutter and the same card width as `repeat(n, 1fr)` with a 24px
   column gap. Anything else would make this section's columns disagree with the user's own
   scenario grid directly above it.

   A browser without subgrid support drops the `subgrid` declaration; the card stays a grid, its
   four blocks stack one per implicit row, and only the cross-card alignment is lost — which is
   exactly where this section stood before. The card states its own 8px gap for that case, because
   the gap a subgrid borrows from its parent goes away with the subgrid. */
.w4l-examples-grid[b-bkkhi82hse] {
    display: grid;
    grid-template-columns: 1fr;
    column-gap: 24px;
    /* The card's four rows sit 8px apart — the same gap `.w4l-pair` used to carry itself, and the
       value it restates for the no-subgrid case. The extra air between two bands of cards comes
       from the cards' own margin-bottom. */
    row-gap: 8px;
    width: 100%;
}

@media (min-width: 600px) {
    .w4l-examples-grid[b-bkkhi82hse] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 960px) {
    .w4l-examples-grid[b-bkkhi82hse] {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* An unpaired example is a plain preview card: it spans the band so the paired cards beside it
   keep their four-row structure, but it has no rows of its own to align. */
.w4l-examples-single[b-bkkhi82hse] {
    grid-row: span 4;
    margin-bottom: 16px;
}
/* /Components/Application/Shared/StartToolsSection.razor.rz.scp.css */
/* Kachel-Optik der Rechner-Schnellzugriffe auf /Start.
   Bewusst identisch zu den borderless Scenario-Cards (ScenarioPreviewCard):
   gerundete, subtil gefüllte Fläche statt Kasten — kein Rahmen, kein Schatten.
   Anders als dort gibt es keinen Selektionszustand: die Kacheln navigieren nur,
   deshalb auch <a href> statt onclick (leak-frei, mittelklick-/tastaturfähig). */
.w4l-tool-tile[b-93avjxplib] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 20px;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border-radius: 8px;
    background: color-mix(in srgb, var(--neutral-fill-secondary-rest) 50%, transparent);
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.w4l-tool-tile:hover[b-93avjxplib],
.w4l-tool-tile:focus-visible[b-93avjxplib] {
    background: color-mix(in srgb, var(--neutral-fill-secondary-hover) 60%, transparent);
}

.w4l-tool-tile:focus-visible[b-93avjxplib] {
    outline: 2px solid var(--accent-fill-rest);
    outline-offset: -2px;
}

.w4l-tool-tile-head[b-93avjxplib] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.w4l-tool-tile-title[b-93avjxplib] {
    font-weight: 700;
}

.w4l-tool-tile-teaser[b-93avjxplib] {
    font-size: 0.85rem;
    color: var(--neutral-foreground-hint);
}
/* /Components/Application/Shared/WithdrawTimeline.razor.rz.scp.css */
/* WithdrawTimeline — scoped CSS. Mirror of InvestTimeline.razor.css (the .hrt-knob CSS must
   live in THIS component's scope — CSS isolation does not share it across components). Bands fill the flex
   bar height via align-self: stretch + top/bottom anchoring (NOT height:100%, which collapses). */

.cwt[b-knzy2ge2bl] {
    width: 100%;
}

.cwt-bands[b-knzy2ge2bl] {
    position: relative;
    width: 100%;
    align-self: stretch;
}

.cwt-band[b-knzy2ge2bl] {
    position: absolute;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3px 8px;
    box-sizing: border-box;
    overflow: hidden;
    border: 1.4px solid var(--neutral-stroke-strong-rest); /* subtle, closer to text; theme-adaptive */
    font-size: 0.75rem;
    font-weight: 400;
    cursor: pointer;
}

.cwt-band:hover[b-knzy2ge2bl] { filter: brightness(1.08); }

.cwt-band-first[b-knzy2ge2bl] { border-top-left-radius: 4px; border-bottom-left-radius: 4px; }
.cwt-band-last[b-knzy2ge2bl] { border-top-right-radius: 4px; border-bottom-right-radius: 4px; }

.cwt-band-selected[b-knzy2ge2bl] { outline: 2px solid var(--accent-fill-rest); outline-offset: -1px; z-index: 1; }

.cwt-band-name[b-knzy2ge2bl] {
    color: inherit;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-variant-numeric: tabular-nums;
    position: relative; /* stays above the per-year tint cells */
    z-index: 1;
}

/* Per-year tint cell: absolute slice of the band, red alpha scales with the CHF withdrawn that
   year (inline background); the band's overflow:hidden clips it to the rounded corners. */
.cwt-yearcell[b-knzy2ge2bl] {
    position: absolute;
    top: 0;
    bottom: 0;
}

/* ── Split knob (draggable; class names match residenceHtmlTrack.js: .hrt-knob / .hrt-bubble). ── */
.hrt-knob[b-knzy2ge2bl] { position: absolute; top: 0; bottom: 0; width: 0; cursor: ew-resize; z-index: 3; touch-action: none; }

.hrt-knob-dot[b-knzy2ge2bl] {
    position: absolute; left: 50%; top: 50%; width: 12px; height: 12px;
    transform: translate(-50%, -50%); border-radius: 50%;
    background: var(--neutral-layer-1); border: 1.5px solid var(--neutral-foreground-rest);
}

.hrt-knob:hover .hrt-knob-dot[b-knzy2ge2bl] { transform: translate(-50%, -50%) scale(1.18); }

.hrt-bubble[b-knzy2ge2bl] {
    position: absolute; left: 50%; top: -18px; transform: translateX(-50%); visibility: hidden;
    background: var(--neutral-foreground-rest); color: var(--neutral-layer-1);
    font-size: 0.7rem; font-weight: 600; padding: 1px 5px; border-radius: 4px; white-space: nowrap;
}

/* Touch: breitere unsichtbare Grab-Fläche (der width:0-Knob ist sonst nur über den Dot greifbar)
   + grösserer Dot als sichtbare Affordance. */
@media (pointer: coarse) {
    .hrt-knob[b-knzy2ge2bl]::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: -16px;
        right: -16px;
    }

    .hrt-knob-dot[b-knzy2ge2bl] { width: 18px; height: 18px; }
}
/* /Components/Application/Shared/YearCardHeader.razor.rz.scp.css */
.ych-head[b-3vnvdqn74o] {
    margin-bottom: 12px;
}

/* Native close button (same recipe as the former per-card ✕ buttons; FAST-free). */
.ych-close[b-3vnvdqn74o] {
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: var(--type-ramp-plus-1-font-size);
    line-height: 1;
    color: var(--neutral-foreground-hint);
    padding: 4px 6px;
    border-radius: calc(var(--control-corner-radius) * 1px);
    flex-shrink: 0;
}

.ych-close:hover[b-3vnvdqn74o] {
    background: var(--neutral-fill-secondary-rest);
    color: var(--neutral-foreground-rest);
}
/* /Components/Application/Shared/ZeroWorkloadCoverNotices.razor.rz.scp.css */
.zwn[b-ze18ac6exy] { border-left: 3px solid var(--accent-fill-rest); padding: 4px 12px; margin: 8px 0; }
.zwn-line[b-ze18ac6exy] { margin: 4px 0; color: var(--neutral-foreground-rest); }
/* /Components/Cookies/CookieConsent.razor.rz.scp.css */
#cookieconsent[b-lyytcutyn1] {
    position: relative;
    display: flex;
    z-index: 998;
    width: 100%;
    justify-content: space-between;
    text-align: left;
    background-color: var(--neutral-layer-2);
    font-size: 13px;
    line-height: var(--type-ramp-minus-1-line-height);
}

[b-lyytcutyn1] .info {
    margin: 0;
    padding-left: 5% !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

[b-lyytcutyn1] .infoicon {
    display: table-cell !important;
    padding: 12px !important;
    width: 24px !important;
    height: 24px !important;
}

[b-lyytcutyn1] .infomessage {
    display: table-cell !important;
    vertical-align: middle !important;
    padding: 0 !important;
    font-size: 13px;
    line-height: var(--type-ramp-minus-1-line-height);
}

[b-lyytcutyn1] .buttons {
    display: inline-block;
    margin-left: 5%;
    margin-right: 5%;
    min-width: 40%;
    min-width: calc((150px + 3 * 4px) * 2 + 150px);
    min-width: fit-content;
    align-self: center;
    position: relative;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

[b-lyytcutyn1] .button {
    min-width: 150px;
}

@media (max-width: 899px) {

    [b-lyytcutyn1] .info,
    [b-lyytcutyn1] .buttons {
        padding-top: 8px;
        padding-bottom: 12px;
        padding-left: 3.75%;
        padding-right: 3.75%;
        margin: 0;
        width: 92.5%;
    }

    [b-lyytcutyn1] .button {
        width: 100%;
    }
}

/* /Components/Cookies/ManageCookies.razor.rz.scp.css */
dl[b-5pxstyzg6x] {
    margin-top: 36px;
    margin-bottom: 0;
    padding: 0;
    list-style: none;
    text-transform: none;
}

dt[b-5pxstyzg6x] {
    margin-top: 20px;
    float: none;
    font-family: Segoe UI, SegoeUI, Arial, sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 24px;
    list-style: none;
}

dt > h4[b-5pxstyzg6x] {
    margin: 0;
    padding: 0;
}

form[b-5pxstyzg6x] {
    height: 446px;
    overflow: auto;
}

.explainer[b-5pxstyzg6x], .choices[b-5pxstyzg6x] {
    margin-bottom: 13px;
}

.buttons[b-5pxstyzg6x] {
    display: inline-block;
    margin-left: 5%;
    margin-right: 5%;
    min-width: 40%;
    min-width: calc((150px + 3 * 4px) * 2 + 150px);
    min-width: fit-content;
    align-self: center;
    position: relative;
}

.button[b-5pxstyzg6x] {
    min-width: 150px;
}

/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-904d5ntfjs],
.components-reconnect-repeated-attempt-visible[b-904d5ntfjs],
.components-reconnect-failed-visible[b-904d5ntfjs],
.components-pause-visible[b-904d5ntfjs],
.components-resume-failed-visible[b-904d5ntfjs],
.components-rejoining-animation[b-904d5ntfjs] {
    display: none;
}

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


#components-reconnect-modal[b-904d5ntfjs] {
    background-color: var(--fill-color);
    color: var(--neutral-foreground-rest);
    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-904d5ntfjs 0.5s both;
}

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


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

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

#components-reconnect-modal p[b-904d5ntfjs] {
    margin: 0;
    text-align: center;
    color: var(--neutral-foreground-rest);
}

#components-reconnect-modal button[b-904d5ntfjs] {
    border: 0;
    background-color: var(--accent-fill-rest);
    color: var(--foreground-on-accent-rest);
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-904d5ntfjs] {
        background-color: var(--accent-fill-hover);
    }

    #components-reconnect-modal button:active[b-904d5ntfjs] {
        background-color: var(--accent-fill-active);
    }

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

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

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

@keyframes components-rejoining-animation-b-904d5ntfjs {
    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/SidePanelHost.razor.rz.scp.css */
/* Rechtes Side-Dock (BotChat / Live-Chat / Help) — ersetzt die frühere
   DialogService-Panel-Chrome. Kein Backdrop, keine pointer-events-Tricks: nur dieser
   Streifen belegt Bildschirm, alles daneben bleibt bedienbar.

   Die Breite kommt aus --w4l-panel-width (tokens.css / base.css) — DIESELBE Quelle, aus
   der der Content-Push sein padding-right zieht. Der Fallback greift nur, falls die Regel
   `body:has(.w4l-sidepanel)` je verloren geht: dann ist das Dock lieber sichtbar (und
   überdeckt) als 0px breit. */
.w4l-sidepanel[b-dpobdl29qv] {
    position: fixed;
    top: 0;
    right: 0;
    height: 100dvh;
    width: var(--w4l-panel-width, min(480px, 100vw));
    z-index: 999; /* same layer the DialogService panels used (ZIndex.Dialog) */
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    background: var(--fill-color);
    border-left: 1px solid var(--neutral-stroke-divider-rest);
    /* Schwebende Ebene über dem Content → Schatten. Im Push-Modus (s.u.) fällt er weg. */
    box-shadow: -6px 0 18px rgba(0, 0, 0, 0.18);
}

/* Ab 1760px schiebt das Dock den Content, statt ihn zu überdecken (base.css; darüber
   geht sich die 2-Spalten-Preview neben dem Dock noch aus). Damit ist es keine schwebende
   Ebene mehr, sondern eine Shell-Region wie Navigation und Preview — und Shell-Regionen
   tragen in dieser Sprache eine Linie, keinen Schatten (Docs/DesignBacklog.md: «Linien
   statt Karten»). Der Schatten bleibt nur im Overlay-Modus darunter, wo er die Ebenen
   tatsächlich trennt. */
@media (min-width: 1760px) {
    .w4l-sidepanel[b-dpobdl29qv] {
        box-shadow: none;
    }
}

/* Maximized video dock: the strip grows to the full viewport width and overlays the whole app,
   nav included. The content push (base.css ≥1760px) still pads by --w4l-panel-width, but the
   content sits entirely behind the overlay anyway. */
.w4l-sidepanel-max[b-dpobdl29qv] {
    width: 100vw;
    border-left: none;
}

/* Minimized video dock (screen-share): a small floating pill bottom-right instead of the full
   strip. Content comes from VideoDock's .vd-pill; this wrapper only positions it. */
.w4l-sidepanel-video-pill[b-dpobdl29qv] {
    position: fixed;
    bottom: 16px;
    right: 16px;
    z-index: 999;
}
/* /Components/Layout/ThemeSwitcher.razor.rz.scp.css */
/* ThemeSwitcher verwendet die gleichen Styles wie LanguageSelector via .header.language-select-no-arrow */
/* /Components/Public/Pages/Blog/BlogIndex.razor.rz.scp.css */
/* Blog index — marketing-styled listing (Hero + card band + footer, like Product/About).
   Cards sit on a --neutral-layer-1 band. Each is a bordered tile that reads well WITH or
   WITHOUT an image (v1 has no cover upload, so many posts carry none): an eyebrow meta line,
   a strong title, a clamped lead preview and a quiet "Read article →" cue that nudges on hover.
   Colours via tokens; the only literals are the low-opacity hover shadow and the transparent
   accent tint (allowed exceptions per W4L.Web/CLAUDE.md + Docs/Css.md). */

/* Fill the viewport below the header so a short page still reaches the bottom — the band
   (flex:1) absorbs the slack and keeps the page footer pinned down. On long pages the div
   simply grows past the fold and the marketing wrapper scrolls as before.

   `flex: 1 0 auto` — grow, but NEVER shrink — is load-bearing, not decoration: this div is
   itself a flex item of the fixed-height .marketing-layout-wrapper (column flex, height =
   100dvh - header). With the default flex-shrink of 1 plus an explicit min-height (which
   replaces a flex item's automatic minimum size), the div collapsed to exactly the wrapper
   height while its content kept painting past the box — and the copyright line, laid out
   right underneath the collapsed box, landed in the middle of the card band.
   The grow half also makes the header-height token unnecessary: the free space the wrapper
   has left over after the copyright line is exactly what this div should fill. */
.w4l-blog-page[b-lnqqjy6oad] {
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
}

.w4l-blog-band[b-lnqqjy6oad] {
    flex: 1 0 auto;
}

.w4l-blog-index[b-lnqqjy6oad] {
    max-width: var(--w4l-content-max-width);
    margin: 0 auto;
    /* Responsive side inset so cards never touch the band edges — same clamp rhythm as the
       marketing sections (e.g. UseCasesSection "By your side…"). border-box keeps the padding
       inside the width instead of overflowing it. */
    padding-inline: clamp(16px, 4vw, 40px);
    box-sizing: border-box;
}

.w4l-blog-cards[b-lnqqjy6oad] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 28px;
    width: 100%;
    /* Uniform card height: every row shares the tallest card's height (1fr) and each card
       stretches to fill it, so preview cards are always equally tall regardless of title
       length or whether a cover image is present. The body absorbs the slack and pins the
       read cue to the bottom (see .w4l-blog-card-body / -cue). */
    grid-auto-rows: 1fr;
    align-items: stretch;
}

.w4l-blog-card[b-lnqqjy6oad] {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 14px;
    background: var(--neutral-layer-2);
    text-decoration: none;
    color: var(--neutral-foreground-rest);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.w4l-blog-card:hover[b-lnqqjy6oad] {
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.10);
}

.w4l-blog-card:focus-visible[b-lnqqjy6oad] {
    outline: 2px solid var(--accent-fill-rest);
    outline-offset: 2px;
}

/* Image banner (optional). object-fit keeps aspect regardless of source size. */
.w4l-blog-card-media[b-lnqqjy6oad] {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--neutral-layer-3);
}

.w4l-blog-card-media img[b-lnqqjy6oad] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.w4l-blog-card:hover .w4l-blog-card-media img[b-lnqqjy6oad] {
    transform: scale(1.04);
}

.w4l-blog-card-body[b-lnqqjy6oad] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 22px 22px 24px;
    /* Grow to fill the (equal-height) card so cards without a cover image match those with one. */
    flex: 1;
}

/* Meta as an eyebrow above the title. */
.w4l-blog-meta[b-lnqqjy6oad] {
    font-size: 0.78rem;
    letter-spacing: 0.02em;
    color: var(--neutral-foreground-hint);
}

.w4l-blog-card h2[b-lnqqjy6oad] {
    font-size: 1.35rem;
    line-height: 1.3;
    margin: 0;
    color: var(--neutral-foreground-rest);
}

/* Lead preview — clamped to three lines so uneven teasers keep the grid tidy. */
.w4l-blog-card-lead[b-lnqqjy6oad] {
    margin: 0;
    line-height: 1.6;
    color: var(--neutral-foreground-hint);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Quiet read cue — the card's one accent flourish; the arrow slides on hover. */
.w4l-blog-card-cue[b-lnqqjy6oad] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    /* Pin to the bottom of the (stretched) body so uneven teasers still line the cue up. */
    margin-top: auto;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--accent-fill-rest);
}

.w4l-blog-card-arrow[b-lnqqjy6oad] {
    transition: transform 0.18s ease;
}

.w4l-blog-card:hover .w4l-blog-card-arrow[b-lnqqjy6oad] {
    transform: translateX(4px);
}

.w4l-blog-empty[b-lnqqjy6oad] {
    padding: 48px 0;
    text-align: center;
    font-size: 1.05rem;
    color: var(--neutral-foreground-hint);
}

@media (prefers-reduced-motion: reduce) {
    .w4l-blog-card[b-lnqqjy6oad],
    .w4l-blog-card-media img[b-lnqqjy6oad],
    .w4l-blog-card-arrow[b-lnqqjy6oad] {
        transition: none;
    }

    .w4l-blog-card:hover[b-lnqqjy6oad] {
        transform: none;
    }

    .w4l-blog-card:hover .w4l-blog-card-media img[b-lnqqjy6oad],
    .w4l-blog-card:hover .w4l-blog-card-arrow[b-lnqqjy6oad] {
        transform: none;
    }
}

.w4l-blog-pager[b-lnqqjy6oad] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-top: 24px;
    font-size: 0.92rem;
    color: var(--neutral-foreground-hint);
}

.w4l-blog-pager a[b-lnqqjy6oad] {
    font-weight: 600;
    color: var(--accent-fill-rest);
    text-decoration: none;
}

/* Language hint on a card that is only available in another language. A neutral marker, not a
   verdict: no traffic-light colour. */
.w4l-blog-lang-badge[b-lnqqjy6oad] {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 6px;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 10px;
    font-size: 0.75rem;
    color: var(--neutral-foreground-hint);
    white-space: nowrap;
}
/* /Components/Public/Pages/Blog/BlogPostPage.razor.rz.scp.css */
/* Reading layout (Docs/Blog.md §7) — public-page-only chrome.

   The shared parts (the .w4l-blog-prose measure column and the rules for the injected
   article body) live globally in wwwroot/css/utilities.css, because the author preview
   (BlogPostEdit.razor) and the admin review preview (BlogAdmin.razor) render the same
   class without CSS isolation. One source of truth, no ::deep copies to drift.

   Everything below belongs to this page's own markup only, so it is scoped and needs
   no ::deep. */

/* Two-column reading frame: article + an in-flow author section, capped and centred with a
   symmetric responsive side inset so the text is indented on BOTH edges, not just the left. */
.w4l-blog-article[b-v01mp187c1] {
    max-width: 1120px;
    margin: 0 auto;
    padding: 24px clamp(16px, 4vw, 40px) 64px;
    box-sizing: border-box;
}

.w4l-blog-back[b-v01mp187c1] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--accent-fill-rest);
    text-decoration: none;
}

.w4l-blog-back-arrow[b-v01mp187c1] {
    transition: transform 0.18s ease;
}

.w4l-blog-back:hover .w4l-blog-back-arrow[b-v01mp187c1] {
    transform: translateX(-4px);
}

.w4l-blog-layout[b-v01mp187c1] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
    gap: clamp(32px, 4vw, 56px);
    /* stretch (not start) so the author column runs the full article height — its divider
       line then spans top to bottom and gives the article a clear right boundary, even where
       the author content itself is short. Room below is a hook for a future right rail
       (related articles, …). */
    align-items: stretch;
}

/* min-width:0 lets a wide child (code block, table, image) shrink instead of blowing the
   grid track out and crowding the author column. */
.w4l-blog-main[b-v01mp187c1] {
    min-width: 0;
}

/* Left column holds the article. Override the global prose centring so the text fills the
   column between the page inset and the author divider. The prose lives inside the
   BlogArticleView child component, so pierce with ::deep. */
.w4l-blog-main[b-v01mp187c1]  .w4l-blog-prose {
    max-width: none;
    margin: 0;
    padding: 0;
}

/* Author section — an in-flow column to the right of the article, set off by a single
   divider line (not a floating card). It scrolls with the article's flow layout. */
.w4l-blog-aside[b-v01mp187c1] {
    border-left: 1px solid var(--neutral-stroke-rest);
    padding-left: clamp(24px, 3vw, 40px);
}

.w4l-blog-author-card[b-v01mp187c1] {
    display: flex;
    flex-direction: column;
}

.w4l-blog-author-eyebrow[b-v01mp187c1] {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--neutral-foreground-hint);
}

.w4l-blog-author-name[b-v01mp187c1] {
    margin: 6px 0 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--neutral-foreground-rest);
}

.w4l-blog-author-headline[b-v01mp187c1] {
    margin: 4px 0 0;
    font-size: 0.95rem;
    color: var(--neutral-foreground-rest);
}

.w4l-blog-author-affiliation[b-v01mp187c1] {
    margin: 4px 0 0;
    font-size: 0.88rem;
    color: var(--neutral-foreground-hint);
}

.w4l-blog-author-bio[b-v01mp187c1] {
    margin-top: 12px;
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--neutral-foreground-hint);
}

/* Stack on narrow screens: article first, author section below — the divider line moves
   from the left edge to the top so it still reads as a set-off section. */
@media (max-width: 860px) {
    .w4l-blog-layout[b-v01mp187c1] {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .w4l-blog-aside[b-v01mp187c1] {
        border-left: none;
        border-top: 1px solid var(--neutral-stroke-rest);
        padding-left: 0;
        padding-top: 28px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .w4l-blog-back-arrow[b-v01mp187c1] {
        transition: none;
    }

    .w4l-blog-back:hover .w4l-blog-back-arrow[b-v01mp187c1] {
        transform: none;
    }
}

.w4l-blog-author-avatar[b-v01mp187c1] {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 12px;
    border: 1px solid var(--neutral-stroke-rest);
}
/* /Components/Public/Pages/Business/BusinessCtaSection.razor.rz.scp.css */
.biz-cta-wrapper[b-tl6tzn4v7n] {
    max-width: var(--w4l-content-max-width, 1910px);
    margin: 0 auto;
    padding: 0 40px;
    width: 100%;
}

.biz-cta-box[b-tl6tzn4v7n] {
    /* rgba/color-mix background keeps text fully opaque (no opacity on parent) */
    background: color-mix(in srgb, var(--accent-fill-focus) 90%, transparent);
    color: var(--neutral-fill-active);
    border-radius: 16px;
    padding: 60px 48px;
    text-align: center;
    max-width: 860px;
    margin: 0 auto;
}

.biz-cta-box h2[b-tl6tzn4v7n] {
    font-size: clamp(1.6rem, 4vw, 2.5rem);
    font-weight: 700;
    margin: 0 0 24px 0;
}

.biz-cta-box p[b-tl6tzn4v7n] {
    font-size: clamp(1rem, 2vw, 1.2rem);
    opacity: 0.85;
    max-width: 600px;
    margin: 0 auto 40px auto;
}

.biz-cta-buttons[b-tl6tzn4v7n] {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: center;
}

@media (max-width: 899px) {
    .biz-cta-wrapper[b-tl6tzn4v7n] {
        padding: 0 20px;
    }

    .biz-cta-box[b-tl6tzn4v7n] {
        padding: 40px 24px;
    }
}
/* /Components/Public/Pages/Business/BusinessHero.razor.rz.scp.css */
.biz-hero[b-x9sxauvnng] {
    background: var(--neutral-layer-3);
    width: 100%;
}

.biz-hero-inner[b-x9sxauvnng] {
    text-align: center;
    /*max-width: 860px;*/
    margin: 0 auto;
}

.biz-hero-title[b-x9sxauvnng] {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    color: var(--accent-fill-rest);
    margin-bottom: 1rem;
}

.biz-hero-sub[b-x9sxauvnng] {
    font-size: 1.25rem;
    color: var(--neutral-foreground-rest);
    line-height: 1.6;
}
/* /Components/Public/Pages/Business/BusinessHowItWorksSection.razor.rz.scp.css */
.biz-how-root[b-qnch7ygib7] {
    width: 100%;
    padding: 0 clamp(6px, 2vw, 32px);
}

.biz-how-badge[b-qnch7ygib7] {
    display: inline-block;
    background: var(--accent-fill-rest);
    color: var(--neutral-fill-rest);
    padding: 12px 24px;
    border-radius: 100px;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 2px;
    margin-bottom: 24px;
    width: fit-content;
}

.biz-how-copy[b-qnch7ygib7] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

.biz-how-title[b-qnch7ygib7] {
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 800;
    line-height: 1.15;
    margin: 0 0 20px 0;
    letter-spacing: -0.02em;
}

.biz-how-subtitle[b-qnch7ygib7] {
    font-size: clamp(1rem, 2vw, 1.15rem);
    line-height: 1.7;
    margin: 0 0 32px 0;
    color: var(--neutral-foreground-hint);
}

/* The list carries the sequence; the numbers below are the visible half of the same fact,
   which is why list-style is off rather than the numbers being decorative duplicates. */
.biz-how-steps[b-qnch7ygib7] {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 28px;
    margin: 0;
    padding: 0;
}

.biz-how-step[b-qnch7ygib7] {
    padding-left: 20px;
    border-left: 2px solid var(--accent-fill-rest);
}

.biz-how-step-label[b-qnch7ygib7] {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 8px;
}

.biz-how-step-number[b-qnch7ygib7] {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--accent-fill-rest);
    letter-spacing: 2px;
}

.biz-how-step-divider[b-qnch7ygib7] {
    color: var(--accent-fill-rest);
    opacity: 0.5;
}

.biz-how-step-title[b-qnch7ygib7] {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--neutral-foreground-rest);
}

.biz-how-step-body[b-qnch7ygib7] {
    color: var(--neutral-foreground-hint);
    font-size: 1rem;
    line-height: 1.7;
    margin: 0;
}

/* Top-aligned, not centred: the tile starts level with the headline, the way the video sits
   opposite the copy in WhatIsWealth4Life on the life host. */
.biz-how-video[b-qnch7ygib7] {
    display: block;
}
/* /Components/Public/Pages/Business/BusinessMomentsSection.razor.rz.scp.css */
.biz-moments-root[b-joea0xhrsy] {
    width: 100%;
    min-width: 100%;
}

.biz-moments-header[b-joea0xhrsy] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    padding: 0 clamp(6px, 2vw, 32px);
}

.biz-moments-badge[b-joea0xhrsy] {
    display: inline-block;
    background: var(--accent-fill-rest);
    color: var(--neutral-fill-rest);
    padding: 12px 24px;
    border-radius: 100px;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 2px;
    margin-bottom: 24px;
    width: fit-content;
}

.biz-moments-title[b-joea0xhrsy] {
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 800;
    line-height: 1.15;
    margin: 0 0 12px 0;
    letter-spacing: -0.02em;
}

/* Same side inset as the header (and as the B2C FeaturesSection card grid). */
.biz-moments-cards[b-joea0xhrsy] {
    padding: 0 clamp(6px, 2vw, 32px);
}

[b-joea0xhrsy] .biz-moment-card {
    padding: 36px;
    height: 100%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

[b-joea0xhrsy] .biz-moment-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.13);
}

[b-joea0xhrsy] .biz-moment-card:focus-visible {
    outline: 2px solid var(--accent-fill-rest);
    outline-offset: 2px;
}

.biz-moment-icon[b-joea0xhrsy] {
    width: 64px;
    height: 64px;
    background: var(--accent-fill-rest);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.biz-moment-title[b-joea0xhrsy] {
    margin: 0 0 12px 0;
    font-size: 1.25rem;
    font-weight: 700;
}

.biz-moment-body[b-joea0xhrsy] {
    color: var(--neutral-foreground-hint);
    font-size: 1rem;
    line-height: 1.7;
    margin: 0;
}
/* /Components/Public/Pages/Business/BusinessTeaser.razor.rz.scp.css */
.biz-teaser-bleed[b-w6zepqadbx] {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    position: relative;
}

.biz-teaser[b-w6zepqadbx] {
    position: relative;
    width: 100%;
    min-height: 50vh;
    overflow: hidden;
    /* Dark base derived from the accent token — shows through until the slide images have loaded. */
    background:
        radial-gradient(120% 90% at 85% 10%, color-mix(in srgb, var(--accent-fill-rest) 38%, transparent) 0%, transparent 60%),
        linear-gradient(155deg,
            color-mix(in srgb, var(--accent-fill-rest) 40%, black) 0%,
            color-mix(in srgb, var(--accent-fill-rest) 16%, black) 55%,
            black 100%);
}

.biz-teaser-slide[b-w6zepqadbx] {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: opacity 3s ease-in-out;
}

.biz-teaser-overlay[b-w6zepqadbx] {
    position: relative;
    z-index: 5;
    width: 100%;
    min-height: 50vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* Light scrim: just enough to carry the white type over the bright photos — darker where the
       text sits (top for the headline, bottom for the caption, plus a soft left wash), and nearly
       clear across the middle so the image stays visible. */
    background:
        linear-gradient(to bottom,
            rgba(0, 0, 0, 0.32) 0%,
            rgba(0, 0, 0, 0.10) 35%,
            rgba(0, 0, 0, 0.14) 62%,
            rgba(0, 0, 0, 0.42) 100%),
        linear-gradient(to right,
            rgba(0, 0, 0, 0.25) 0%,
            rgba(0, 0, 0, 0.04) 55%,
            rgba(0, 0, 0, 0) 100%);
}

.biz-teaser-top[b-w6zepqadbx] {
    max-width: var(--w4l-content-max-width, 1910px);
    margin: 0 auto;
    width: 100%;
}

.biz-teaser-content[b-w6zepqadbx] {
    color: white;
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7);
    padding: clamp(16px, 4vw, 40px);
    padding-left: clamp(20px, 6vw, 60px);
    max-width: 1100px;
}

.biz-teaser-headline[b-w6zepqadbx] {
    font-size: clamp(2rem, 5vw, 4.5rem);
    font-weight: 800;
    line-height: 1.1;
    margin: 0;
}

.biz-teaser-subheadline[b-w6zepqadbx] {
    font-size: clamp(1rem, 2.5vw, 1.6rem);
    font-weight: 400;
    margin: 20px 0 0 0;
    opacity: 0.9;
    max-width: 760px;
    line-height: 1.5;
}

.biz-teaser-captions[b-w6zepqadbx] {
    text-align: center;
    color: white;
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7);
    padding: 20px clamp(16px, 4vw, 40px) 100px;
    width: 100%;
}

.biz-teaser-caption[b-w6zepqadbx] {
    font-size: clamp(1.3rem, 3.5vw, 2.2rem);
    font-weight: 700;
    line-height: 1.2;
    width: 100%;
    transition: opacity 1.2s ease-in-out;
}

@media (max-width: 639px) {
    .biz-teaser-captions[b-w6zepqadbx] {
        padding-bottom: 88px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .biz-teaser-slide[b-w6zepqadbx],
    .biz-teaser-caption[b-w6zepqadbx] {
        transition: none;
    }
}
/* /Components/Public/Pages/Business/BusinessTrustSection.razor.rz.scp.css */
.biz-trust-root[b-9hzgufqkiw] {
    max-width: var(--w4l-content-max-width, 1910px);
    margin: 0 auto;
    width: 100%;
    padding: clamp(40px, 6vw, 80px) clamp(20px, 4vw, 48px);
}

.biz-trust-header[b-9hzgufqkiw] {
    text-align: center;
    margin-bottom: clamp(32px, 5vw, 56px);
}

.biz-trust-title[b-9hzgufqkiw] {
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 800;
    line-height: 1.15;
    margin: 0 0 20px 0;
    letter-spacing: -0.02em;
}

.biz-trust-subtitle[b-9hzgufqkiw] {
    font-size: clamp(1rem, 2vw, 1.15rem);
    line-height: 1.7;
    margin: 0 auto;
    color: var(--neutral-foreground-hint);
}

.biz-trust-item[b-9hzgufqkiw] {
    height: 100%;
    text-align: center;
    padding: 12px;
}

.biz-trust-icon[b-9hzgufqkiw] {
    width: 56px;
    height: 56px;
    background: var(--accent-fill-rest);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px auto;
}

.biz-trust-item-title[b-9hzgufqkiw] {
    margin: 0 0 10px 0;
    font-size: 1.15rem;
    font-weight: 700;
}

.biz-trust-item-body[b-9hzgufqkiw] {
    color: var(--neutral-foreground-hint);
    font-size: 0.95rem;
    line-height: 1.7;
    margin: 0;
}
/* /Components/Public/Pages/Business/ForBusinessSection.razor.rz.scp.css */
.biz-pill-group[b-1acentbyr3] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 16px;
}

.biz-pill[b-1acentbyr3] {
    background: var(--neutral-layer-2);
    padding: 10px 20px;
    border-radius: 100px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.biz-feature-list[b-1acentbyr3] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.biz-feature[b-1acentbyr3] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 20px;
}

.biz-feature.biz-feature-last[b-1acentbyr3] {
    margin-bottom: 0;
}

.biz-feature p[b-1acentbyr3] {
    margin: 4px 0 0 0;
    font-size: 0.9rem;
    color: var(--neutral-foreground-hint);
    line-height: 1.5;
}

/* /Components/Public/Pages/PaymentReturn.razor.rz.scp.css */
.payment-return[b-tvoowtu2bd] {
    max-width: 720px;
    margin: 2rem auto 4rem;
    padding: 0 1rem;
}

.payment-return-wait[b-tvoowtu2bd],
.payment-return-text[b-tvoowtu2bd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 3rem 0;
    text-align: center;
}

.payment-return-text p[b-tvoowtu2bd] {
    margin: 0 0 0.5rem;
    color: var(--neutral-foreground-hint);
}

.payment-return-text h2[b-tvoowtu2bd] {
    margin: 0;
}
/* /Components/Public/Pages/Purchase/PaymentFailurePanel.razor.rz.scp.css */
.payment-failed[b-q98ia9vg39] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    padding: 2rem 1rem;
}
.payment-failed-hint[b-q98ia9vg39] { color: var(--neutral-foreground-hint); font-size: 0.85rem; margin: 0; }
.payment-failed-actions[b-q98ia9vg39] { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
@media (max-width: 479px) {
    .payment-failed-actions[b-q98ia9vg39] { flex-direction: column; width: 100%; }
    .payment-failed-actions[b-q98ia9vg39]  fluent-button { width: 100%; }
}
/* /Components/Public/Pages/Purchase/PaymentStatusPanel.razor.rz.scp.css */
.payment-status-timeout[b-tn7b6k82dw] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 8px;
    font-size: var(--type-ramp-minus-1-font-size, 12px);
    color: var(--neutral-foreground-hint);
    text-align: center;
}

.payment-status-recheck[b-tn7b6k82dw] {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: var(--accent-foreground-rest);
    text-decoration: underline;
    cursor: pointer;
}

.payment-status-timeout[hidden][b-tn7b6k82dw] {
    display: none;
}
/* /Components/Public/Pages/Purchase/PaymentStep.razor.rz.scp.css */
.payment-step[b-g4wrngiwfl] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}

.payment-summary[b-g4wrngiwfl] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 20px;
    border-radius: calc(var(--control-corner-radius, 4) * 1px);
    background: var(--neutral-fill-secondary-rest);
}

.payment-row[b-g4wrngiwfl] {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    font-size: var(--type-ramp-base-font-size, 14px);
}

.payment-row--credit[b-g4wrngiwfl] {
    color: var(--w4l-positive);
}

.payment-row--total[b-g4wrngiwfl] {
    margin-top: 4px;
    padding-top: 8px;
    border-top: 1px solid var(--neutral-stroke-rest);
    font-weight: 700;
    font-size: 1.05rem;
}

.payment-row--subscription[b-g4wrngiwfl] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 16px;
    align-items: baseline;
}

.payment-row-label[b-g4wrngiwfl] {
    color: var(--neutral-foreground-hint);
}

.payment-row-desc[b-g4wrngiwfl] {
    text-align: right;
}

.payment-row--voucher[b-g4wrngiwfl] {
    display: grid;
    grid-template-columns: auto minmax(160px, 220px);
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.payment-voucher-input[b-g4wrngiwfl] {
    font-family: var(--body-font, "Segoe UI", sans-serif);
    font-size: var(--type-ramp-base-font-size, 14px);
    height: 32px;
    width: 100%;
    box-sizing: border-box;
    padding: 0 8px;
    border: calc(var(--stroke-width, 1) * 1px) solid var(--neutral-stroke-rest);
    border-radius: calc(var(--control-corner-radius, 4) * 1px);
    background-color: var(--neutral-fill-input-rest);
    color: var(--neutral-foreground-rest);
    outline: none;
    text-transform: uppercase;
}

.payment-voucher-input:hover[b-g4wrngiwfl] { border-color: var(--neutral-stroke-hover); }

.payment-voucher-input:focus[b-g4wrngiwfl] {
    border-color: var(--accent-fill-rest);
    box-shadow: 0 0 0 1px var(--accent-fill-rest);
}

.payment-voucher-input[aria-invalid="true"][b-g4wrngiwfl] { border-color: var(--w4l-negative); }

.payment-voucher-status[b-g4wrngiwfl],
.payment-voucher-error[b-g4wrngiwfl] {
    font-size: var(--type-ramp-minus-1-font-size, 12px);
    text-align: right;
}

.payment-voucher-status[b-g4wrngiwfl] { color: var(--neutral-foreground-hint); }
.payment-voucher-error[b-g4wrngiwfl]  { color: var(--w4l-negative); font-weight: 600; }

.payment-note[b-g4wrngiwfl] {
    font-size: var(--type-ramp-minus-1-font-size, 12px);
    color: var(--neutral-foreground-hint);
    margin: 0;
}

.payment-term-note[b-g4wrngiwfl] {
    font-size: var(--type-ramp-minus-1-font-size, 12px);
    color: var(--neutral-foreground-hint);
}

@media (max-width: 479px) {
    .payment-row--subscription[b-g4wrngiwfl] { grid-template-columns: 1fr auto; }
    .payment-row--subscription .payment-row-desc[b-g4wrngiwfl] { grid-column: 1 / -1; text-align: left; font-size: var(--type-ramp-minus-1-font-size, 12px); color: var(--neutral-foreground-hint); }
    .payment-row--voucher[b-g4wrngiwfl] { grid-template-columns: 1fr; }
}
/* /Components/Public/Pages/Purchase/PurchaseReceiptCard.razor.rz.scp.css */
.purchase-receipt-head h2[b-y8p256m87d] { margin: 0 0 0.75rem 0; }
.purchase-receipt-head p[b-y8p256m87d]  { margin: 0; max-width: 480px; color: var(--neutral-foreground-hint); }

.purchase-receipt-facts[b-y8p256m87d] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    max-width: 380px;
    text-align: left;
}
.purchase-receipt-facts > div[b-y8p256m87d] {
    display: flex;
    justify-content: space-between;
    gap: 16px;
}
.purchase-receipt-facts > div > span:first-child[b-y8p256m87d] { color: var(--neutral-foreground-hint); }
.purchase-receipt-facts > div > span:last-child[b-y8p256m87d]  { font-weight: 600; text-align: right; word-break: break-word; }
.purchase-receipt-discount > span:last-child[b-y8p256m87d] { color: var(--w4l-positive); }

.purchase-receipt-footnote[b-y8p256m87d] {
    margin: 0;
    max-width: 480px;
    font-size: 0.8rem;
    color: var(--neutral-foreground-hint);
}

/* FluentCard MinimalStyle renders div.fluent-card-minimal-style; the scoped wrapper selector
   (0,3,0) outranks the library's own scoped padding (0,2,0). */
.purchase-receipt[b-y8p256m87d]  .fluent-card-minimal-style {
    padding: 2.5rem 3rem;
    border-radius: 16px;
    text-align: center;
}

.purchase-receipt[b-y8p256m87d]  .purchase-pay-button {
    width: 100%;
    max-width: 380px;
}

@media (max-width: 600px) {
    .purchase-receipt[b-y8p256m87d]  .fluent-card-minimal-style { padding: 1.5rem; }
}
/* /Components/Public/Pages/Purchase/TermsAcceptance.razor.rz.scp.css */
.terms-row[b-6dihdrv0wb] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
}

.terms-links[b-6dihdrv0wb] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--type-ramp-minus-1-font-size, 12px);
    color: var(--neutral-foreground-hint);
}

.terms-link[b-6dihdrv0wb] {
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    font: inherit;
    color: var(--accent-foreground-rest);
    text-decoration: underline;
    cursor: pointer;
}

.terms-link:hover[b-6dihdrv0wb] { color: var(--accent-foreground-hover); }
.terms-link:focus-visible[b-6dihdrv0wb] { outline: 2px solid var(--focus-stroke-outer); outline-offset: 2px; }

@media (max-width: 479px) {
    .terms-links[b-6dihdrv0wb] { padding-left: 28px; }
}
/* /Components/Public/Pages/Rechner/Shared/AffordabilityLadder.razor.rz.scp.css */
/* Price ladder (B1). Zone colours come from the semantic --w4l-ladder-* tokens in tokens.css
   (light + dark); no raw hex here, per Docs/Css.md. */

.lad[b-3mazl0t8e9] {
    display: flex;
    flex-direction: column;
    gap: var(--w4l-space-xs, 8px);
    font-variant-numeric: tabular-nums;
}

/* ── Axis: needle label, zone track, scale ─────────────────────────────────── */

.lad-axis[b-3mazl0t8e9] {
    position: relative;
    padding-top: 24px; /* room for the needle label above the track */
}

.lad-track[b-3mazl0t8e9] {
    display: flex;
    gap: 2px;
    height: 46px;
    border-radius: 4px;
    overflow: hidden;
}

.lad-zone[b-3mazl0t8e9] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    padding: 0 8px;
    overflow: hidden;
}

/* The out-of-reach zone soaks up whatever is left of the axis. */
.lad-zone--out[b-3mazl0t8e9] {
    flex: 1 1 auto;
}

.lad-zone--comfort[b-3mazl0t8e9] {
    background: var(--w4l-ladder-comfort-bg);
    color: var(--w4l-ladder-comfort-ink);
}

.lad-zone--stretch[b-3mazl0t8e9] {
    background: var(--w4l-ladder-stretch-bg);
    color: var(--w4l-ladder-stretch-ink);
}

.lad-zone--out[b-3mazl0t8e9] {
    background: var(--w4l-ladder-out-bg);
    color: var(--w4l-ladder-out-ink);
}

.lad-zone-label[b-3mazl0t8e9],
.lad-zone-sub[b-3mazl0t8e9] {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lad-zone-label[b-3mazl0t8e9] {
    font-size: 0.8rem;
    font-weight: 600;
}

.lad-zone-sub[b-3mazl0t8e9] {
    font-size: 0.7rem;
    opacity: 0.85;
}

/* ── Needle ────────────────────────────────────────────────────────────────── */

.lad-needle[b-3mazl0t8e9] {
    position: absolute;
    top: 0;
    height: 70px; /* label row + full track height */
    border-left: 2px solid var(--neutral-foreground-rest);
    pointer-events: none;
}

.lad-needle-label[b-3mazl0t8e9] {
    position: absolute;
    top: 0;
    left: 0;
    transform: translateX(-50%);
    white-space: nowrap;
    padding: 0 6px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

.lad-needle.is-start > .lad-needle-label[b-3mazl0t8e9] {
    transform: translateX(0);
}

.lad-needle.is-end > .lad-needle-label[b-3mazl0t8e9] {
    transform: translateX(-100%);
}

/* ── Scale row ─────────────────────────────────────────────────────────────── */

.lad-scale[b-3mazl0t8e9] {
    position: relative;
    height: 36px;
    margin-top: 4px;
}

.lad-tick[b-3mazl0t8e9] {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    white-space: nowrap;
    font-size: 0.72rem;
    color: var(--neutral-foreground-hint);
}

.lad-tick.is-start[b-3mazl0t8e9] {
    transform: translateX(0);
}

.lad-tick.is-end[b-3mazl0t8e9] {
    transform: translateX(-100%);
}

.lad-tick--max[b-3mazl0t8e9] {
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

.lad-bound[b-3mazl0t8e9] {
    display: block;
    font-weight: 400;
    font-size: 0.7rem;
    color: var(--neutral-foreground-hint);
}

/* ── Needle detail ─────────────────────────────────────────────────────────── */

.lad-detail[b-3mazl0t8e9] {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.45;
    color: var(--neutral-foreground-rest);
}

/* ── Requirements table ────────────────────────────────────────────────────── */

.lad-req > summary[b-3mazl0t8e9] {
    cursor: pointer;
    font-size: 0.8rem;
    color: var(--neutral-foreground-hint);
}

.lad-req-scroll[b-3mazl0t8e9] {
    overflow-x: auto;
    margin-top: 8px;
}

.lad-req-table[b-3mazl0t8e9] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
}

.lad-req-table th[b-3mazl0t8e9],
.lad-req-table td[b-3mazl0t8e9] {
    padding: 6px 8px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
    white-space: nowrap;
}

.lad-req-table thead th[b-3mazl0t8e9] {
    font-weight: 600;
    color: var(--neutral-foreground-hint);
}

.lad-req-table tbody th[b-3mazl0t8e9] {
    font-weight: 400;
    white-space: normal;
}

.lad-req-table .num[b-3mazl0t8e9] {
    text-align: right;
}

.lad-req-note[b-3mazl0t8e9] {
    display: block;
    font-size: 0.68rem;
    font-weight: 400;
    color: var(--neutral-foreground-hint);
}

@media (max-width: 639px) {
    .lad-zone-sub[b-3mazl0t8e9] {
        display: none;
    }

    .lad-track[b-3mazl0t8e9] {
        height: 38px;
    }

    .lad-needle[b-3mazl0t8e9] {
        height: 62px;
    }
}
/* /Components/Public/Sections/IntroVideoSection.razor.rz.scp.css */
/* Poster tile — keeps the 16:9 box the placeholder used, so the two-column layout of
   WhatIsWealth4Life does not shift when the video becomes available. */
.w4l-intro-video[b-xneyr2g65p] {
    width: 100%;
}

.w4l-intro-video-tile[b-xneyr2g65p] {
    position: relative;
    display: block;
    width: 100%;
    padding: 0 0 56.25% 0;
    border: none;
    border-radius: 20px;
    overflow: hidden;
    background-color: var(--neutral-layer-1);
    background-size: cover;
    background-position: center;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
    cursor: pointer;
}

.w4l-intro-video-tile-static[b-xneyr2g65p] {
    cursor: default;
}

.w4l-intro-video-play[b-xneyr2g65p] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--accent-fill-rest);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.w4l-intro-video-tile:hover .w4l-intro-video-play[b-xneyr2g65p],
.w4l-intro-video-tile:focus-visible .w4l-intro-video-play[b-xneyr2g65p] {
    transform: translate(-50%, -50%) scale(1.15);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
}

.w4l-intro-video-tile:focus-visible[b-xneyr2g65p] {
    outline: 2px solid var(--accent-fill-rest);
    outline-offset: 3px;
}

/* Lightbox, built as a window: the dialog is the chrome, the video is its content area, and
   the close button lives in the header band like a window control. Exactly one edge differs:
   the header at the top is generous enough to carry the control, the other three are the same
   narrow bezel, so the picture keeps the space.

   Because this is a window and not a passepartout, the outer radius is uniform and does NOT
   follow the concentric rule (outer = inner + frame): with two different frame widths that
   rule would demand a different radius on the top corners than on the bottom ones, which is
   exactly what makes an asymmetric frame look accidental.

   A click on the chrome reports target === dialog exactly like a click on ::backdrop, so
   videoModal.js dismisses on it unchanged -- and the dismiss zone grows by the frame width on
   every side, which matters on a phone in landscape where the real backdrop is ~23px tall. */
.w4l-intro-video-modal[b-xneyr2g65p] {
    --w4l-chrome-top: 40px;
    --w4l-chrome-side: 14px;

    box-sizing: border-box;
    max-width: 92vw;
    max-height: 88vh;
    padding: var(--w4l-chrome-top) var(--w4l-chrome-side) var(--w4l-chrome-side);
    border: none;
    border-radius: 14px;
    /* Nothing overflows, but a clipped focus ring on the close button would. */
    overflow: visible;
    background: rgba(255, 255, 255, 0.1);
    /* Hairline plus drop shadow are what read as "window" rather than "padded box". */
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08),
                0 30px 80px rgba(0, 0, 0, 0.5);
}

.w4l-intro-video-modal[b-xneyr2g65p]::backdrop {
    background: rgba(0, 0, 0, 0.78);
}

/* The sizing maths lives here, not on the dialog: with aspect-ratio on the outer box it is the
   OUTER contour that becomes 16:9, and the video inside would be off-ratio.

   All three budgets are expressed as a WIDTH so the height stays derived from the ratio. A
   max-height would clamp the height while leaving the width alone: the box then turns wider
   than 16:9 and the video letterboxes inside it -- invisible on a black dialog, but inside a
   frame it means the frame wraps black bars instead of the picture. Reproduce with a phone in
   landscape (844x390), where the height budget wins. */
.w4l-intro-video-frame[b-xneyr2g65p] {
    box-sizing: border-box;
    width: min(calc(92vw - 2 * var(--w4l-chrome-side)),
               calc(1400px - 2 * var(--w4l-chrome-side)),
               calc((88vh - var(--w4l-chrome-top) - var(--w4l-chrome-side)) * 16 / 9));
    aspect-ratio: 16 / 9;
    border-radius: 6px;
    overflow: hidden;
    background: #000;
}

.w4l-intro-video-frame video[b-xneyr2g65p] {
    display: block;
    width: 100%;
    height: 100%;
    background: #000;
}

/* Vertically centred in the header band; horizontally the GLYPH right-aligns with the right
   edge of the picture, so the control sits on the same line as the content instead of drifting
   into the narrow side margin. Hence half a glyph width past the side chrome, minus half the
   hit box. The 44px box is hit area only; the visible mark is the glyph. */
.w4l-intro-video-close[b-xneyr2g65p] {
    position: absolute;
    top: calc(var(--w4l-chrome-top) / 2 - 22px);
    right: calc(var(--w4l-chrome-side) + 10px - 22px);
    z-index: 1;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    background: transparent;
    color: #fff;
    cursor: pointer;
}

/* ::deep because FluentIcon renders the svg, so it carries no scope attribute of ours. */
.w4l-intro-video-close[b-xneyr2g65p]  svg {
    width: 20px;
    height: 20px;
    opacity: 0.7;
    transition: opacity 0.15s ease;
}

.w4l-intro-video-close:hover[b-xneyr2g65p]  svg,
.w4l-intro-video-close:focus-visible[b-xneyr2g65p]  svg {
    opacity: 1;
}

.w4l-intro-video-close:focus-visible[b-xneyr2g65p] {
    outline: 2px solid #fff;
    outline-offset: 2px;
    border-radius: 50%;
}

/* Chrome costs picture width, which is scarce on a phone. Keep the asymmetry, shrink it. */
@media (max-width: 640px) {
    .w4l-intro-video-modal[b-xneyr2g65p] {
        --w4l-chrome-top: 32px;
        --w4l-chrome-side: 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .w4l-intro-video-play[b-xneyr2g65p],
    .w4l-intro-video-tile:hover .w4l-intro-video-play[b-xneyr2g65p],
    .w4l-intro-video-tile:focus-visible .w4l-intro-video-play[b-xneyr2g65p] {
        transition: none;
        transform: translate(-50%, -50%);
    }

    .w4l-intro-video-close[b-xneyr2g65p]  svg {
        transition: none;
    }
}
/* /Components/Public/Sections/PricingSection.razor.rz.scp.css */
/* Promotion display on a plan card. The rest of this component's CSS still lives in the inline
   <style> block above the markup; only the new promotion bits are scoped. */

/* The base price a running promotion replaces. Muted and struck through, on its own line so the
   promotional price keeps the card's usual price weight. */
.w4l-price-was[b-qtqeillw5i] {
    display: block;
    font-size: 1.1rem;
    font-weight: 600;
    text-decoration: line-through;
    color: var(--neutral-foreground-hint);
    margin-bottom: 2px;
}

/* Campaign label next to the price, e.g. "Weihnachtsangebot". Operator-authored text of unknown
   length, so it wraps rather than stretching the card. */
.w4l-promo-badge[b-qtqeillw5i] {
    display: block;
    width: fit-content;
    margin-top: 10px;
    padding: 4px 12px;
    border-radius: 100px;
    background: var(--accent-fill-rest);
    color: var(--neutral-fill-rest);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    line-height: 1.4;
    max-width: 100%;
    overflow-wrap: anywhere;
}
/* /Components/Public/Sections/ProductStorySections.razor.rz.scp.css */
/* Story strip on /Product. Mobile-first: every row stacks with the question/text FIRST and the
   media below it - a document-length screenshot before any context reads as a wall of pixels on
   a phone. From 900px a row becomes two columns; the zigzag side and the presentation variant
   (standard/wide/tall/portrait) are explicit classes set in the .razor, chosen per screenshot
   aspect ratio. Colours are FluentUI tokens only - no raw hex (theming lint). */

/* Badge, title and subtitle share one measure so they read as a single block. Without the cap the
   title runs nearly the full container width while the subtitle breaks at its own 70ch, which
   leaves the subtitle looking like a half-width column stranded on the left. */
.pss-header[b-mrt14ypdzn] {
    display: flex;
    flex-direction: column;
    padding: 0 clamp(6px, 2vw, 32px);
    max-width: 1180px;
}

.pss-badge[b-mrt14ypdzn] {
    display: inline-block;
    width: fit-content;
    background: var(--accent-fill-rest);
    color: var(--neutral-fill-rest) !important;
    padding: 12px 24px;
    border-radius: 100px;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 2px;
    margin-bottom: 24px;
}

.pss-title[b-mrt14ypdzn] {
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 0 0 20px 0;
}

.pss-subtitle[b-mrt14ypdzn] {
    font-size: clamp(1rem, 2vw, 1.15rem);
    line-height: 1.7;
    color: var(--neutral-foreground-hint);
    margin: 0 0 32px 0;
    /* Wide enough to break at roughly the same point as the wrapped title above it - at 70ch it
       ended near half the title width and read as a stranded column. */
    max-width: min(100%, 1000px);
}

.pss-headline[b-mrt14ypdzn] {
    font-size: clamp(1.35rem, 2.6vw, 1.9rem);
    font-weight: 700;
    line-height: 1.25;
    margin: 0 0 14px 0;
}

.pss-body[b-mrt14ypdzn] {
    font-size: clamp(0.98rem, 1.6vw, 1.08rem);
    line-height: 1.75;
    color: var(--neutral-foreground-hint);
    margin: 0 0 18px 0;
    max-width: 65ch;
}

.pss-points[b-mrt14ypdzn] {
    list-style: none;
    margin: 0 0 18px 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pss-points li[b-mrt14ypdzn] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.98rem;
    line-height: 1.5;
}

/* Intro block: the clip runs beside the copy. Mobile keeps the text first, same as every
   story row. */
.pss-intro[b-mrt14ypdzn] {
    padding: 0 clamp(6px, 2vw, 32px);
    margin-bottom: clamp(48px, 8vw, 96px);
}

.pss-intro-row[b-mrt14ypdzn] {
    display: flex;
    flex-direction: column;
    gap: clamp(20px, 3vw, 40px);
}

/* The collaboration block closes the intro as its own beat - accent-tinted like the premium
   boxes, so it reads as a set-off endpoint rather than trailing body text. */
.pss-comm[b-mrt14ypdzn] {
    margin-top: 28px;
    padding: 20px clamp(16px, 3vw, 28px);
    border-radius: 16px;
    background: color-mix(in srgb, var(--accent-fill-rest) 7%, var(--neutral-layer-2));
    border: 1px solid color-mix(in srgb, var(--accent-fill-rest) 22%, transparent);
}

.pss-comm-body[b-mrt14ypdzn] {
    font-size: 0.98rem;
    line-height: 1.7;
    color: var(--neutral-foreground-hint);
    margin: 0 0 16px 0;
    max-width: 70ch;
}

.pss-comm-icons[b-mrt14ypdzn] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 28px;
    margin-bottom: 14px;
}

.pss-comm-icons span[b-mrt14ypdzn] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
    font-weight: 600;
}

.pss-comm-link[b-mrt14ypdzn] {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--accent-foreground-rest);
    text-decoration: none;
}

.pss-comm-link:hover[b-mrt14ypdzn] { text-decoration: underline; }

/* The box spans the row, but its text breaks at 70ch for readability - which left a wide empty
   band on the right. Rather than shrinking the box, the two halves are put side by side: the
   copy keeps its measure and the channels fill the space that was empty. */
@media (min-width: 900px) {
    .pss-comm[b-mrt14ypdzn] {
        display: grid;
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
        grid-template-rows: auto auto;
        align-items: center;
        column-gap: clamp(32px, 4vw, 64px);
    }

    /* Explicit placement: the three children would otherwise flow in source order and scatter
       across the two columns. Copy and its call to action stay together on the left, the four
       channels fill the right column across both rows. */
    .pss-comm-body[b-mrt14ypdzn] {
        grid-column: 1;
        grid-row: 1;
    }

    .pss-comm-link[b-mrt14ypdzn] {
        grid-column: 1;
        grid-row: 2;
        justify-self: start;
    }

    .pss-comm-icons[b-mrt14ypdzn] {
        grid-column: 2;
        grid-row: 1 / span 2;
        flex-direction: column;
        gap: 12px;
        margin-bottom: 0;
    }
}

/* One question per row. Text before media on mobile (media order 2). */
.pss-story[b-mrt14ypdzn] {
    display: flex;
    flex-direction: column;
    gap: clamp(20px, 3vw, 40px);
    padding: 0 clamp(6px, 2vw, 32px);
    margin-bottom: clamp(56px, 9vw, 110px);
}

.pss-media[b-mrt14ypdzn] {
    min-width: 0;
    order: 2;
}

/* Every story shot is an element crop at roughly 712 CSS px native width (1424 device px at
   DPR 2) - cap at that so the UI text never upscales soft, even on retina. */
.pss-story .pss-media[b-mrt14ypdzn] {
    width: 100%;
    max-width: 712px;
}

/* The intro clip is encoded at 1600x1000, so 800 CSS px is its native width at DPR 2. The cap
   is what makes the encode size decidable at all: the content container goes up to 2250px, and
   without it the required resolution would follow the visitor's monitor. */
.pss-intro .pss-media[b-mrt14ypdzn] {
    width: 100%;
    max-width: 800px;
    justify-self: center;
}

/* Captions sit under left-aligned screenshots - align them with the image edge, not centered. */
.pss-media[b-mrt14ypdzn]  .ts-caption,
.pss-intro[b-mrt14ypdzn]  .ts-caption {
    text-align: left;
}

/* Top-aligned, not centred: each row's copy starts at the image's top edge, so the question
   and the visual answer read as one unit regardless of how tall either side is. */
.pss-text[b-mrt14ypdzn] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.pss-step[b-mrt14ypdzn] {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--accent-foreground-rest);
    margin-bottom: 10px;
}

.pss-kicker[b-mrt14ypdzn] {
    font-size: clamp(1rem, 1.9vw, 1.15rem);
    font-style: italic;
    line-height: 1.5;
    color: var(--neutral-foreground-rest);
    margin-bottom: 12px;
}

.pss-premium[b-mrt14ypdzn] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 6px;
    padding: 14px 16px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--accent-fill-rest) 7%, var(--neutral-layer-2));
    border: 1px solid color-mix(in srgb, var(--accent-fill-rest) 22%, transparent);
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--neutral-foreground-hint);
}

.pss-cta[b-mrt14ypdzn] {
    text-align: center;
    padding: clamp(28px, 5vw, 56px) clamp(16px, 4vw, 48px);
    border-radius: 20px;
    background: var(--neutral-layer-2);
    margin: 0 clamp(6px, 2vw, 32px);
}

.pss-cta .pss-body[b-mrt14ypdzn] { margin: 0 auto 24px auto; }

.pss-cta-buttons[b-mrt14ypdzn] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

@media (min-width: 900px) {
    /* Intro: copy left, clip right. The clip column is given more room than the text - the
       totale has to stay readable as a whole application, and the copy is deliberately short.
       Top-aligned rather than centred: the copy is much shorter than the clip is tall, and
       centring it leaves a band of empty space above the headline that reads as a mistake. */
    .pss-intro-row[b-mrt14ypdzn] {
        display: grid;
        grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
        align-items: start;
        gap: clamp(32px, 4vw, 64px);
    }

    /* Top-aligned like the intro row: text and image start on the same line. */
    .pss-story[b-mrt14ypdzn] {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: start;
        gap: clamp(32px, 4vw, 64px);
    }

    /* Zigzag: the side is an explicit per-row class assigned in the .razor loop. The media
       keeps order 2 (right column) unless the row pulls it left. */
    .pss-story--media-left .pss-media[b-mrt14ypdzn] { order: -1; }
}
/* /Components/Shared/CantonPicker.razor.rz.scp.css */
/* CantonPicker — input-styled trigger (reuses global .ym-field/.ym-label/.ym-row
   from app.css so label + focus underline match the other form fields) plus a
   popover of small Wappen chips. Native elements only (no <FluentCard>/FAST) →
   leak-free in the 26-item loop. Flag-chip styles duplicated here (scoped CSS does
   not cross components — kept in sync with the Tax-page picker). */

/* Anchor for the absolutely-positioned popover. */
.canton-anchor[b-kxhzybsvek] {
    position: relative;
    display: block;
}

/* ── Trigger: a <button> wearing the shared .ym-row input chrome ──── */
.canton-row[b-kxhzybsvek] {
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
    cursor: pointer;
    gap: 8px;
    padding: 0 11px;
    font: inherit;
    color: inherit;
    text-align: left;
}

.canton-row-flag[b-kxhzybsvek] {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    object-fit: contain;
    border-radius: 2px;
    box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.15);
}

.canton-row-text[b-kxhzybsvek] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: var(--type-ramp-base-font-size, 14px);
    color: var(--neutral-foreground-rest);
}

/* Empty state (no canton selected yet): placeholder text in the muted hint colour. */
.canton-row-placeholder[b-kxhzybsvek] {
    color: var(--neutral-foreground-hint);
}

.canton-row-caret[b-kxhzybsvek] {
    width: 12px;
    height: 12px;
    flex: 0 0 auto;
    color: var(--neutral-foreground-hint);
}

/* ── Popover (overlay — like a dropdown but not a native <select>) ──── */
.canton-backdrop[b-kxhzybsvek] {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: transparent;
}

.canton-popover[b-kxhzybsvek] {
    position: absolute;
    z-index: 50;
    top: calc(100% + 4px);
    left: 0;
    padding: 10px;
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

/* Opt-in right-edge anchoring (AlignEnd) — for triggers in a narrow right-hand
   column, where the wider chip grid would otherwise overflow the container. */
.canton-popover-end[b-kxhzybsvek] {
    left: auto;
    right: 0;
}

/* Fixed x-y grid — all 26 cantons visible at once, no scrollbar (6 × 5). */
.flag-chip-wrap[b-kxhzybsvek] {
    display: grid;
    grid-template-columns: repeat(6, 56px);
    gap: 6px;
}

@media (max-width: 479px) {
    .flag-chip-wrap[b-kxhzybsvek] {
        grid-template-columns: repeat(4, 56px);
    }
}

/* ── Flag-chips (exact Tax-page dimensions: 56px chip, 24px Wappen) ─── */
.flag-chip[b-kxhzybsvek] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    width: 56px;
    box-sizing: border-box;
    padding: 4px 2px;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 5px;
    background: var(--neutral-fill-stealth-rest);
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.flag-chip:hover[b-kxhzybsvek] {
    background: var(--neutral-fill-secondary-hover);
}

.flag-chip:focus-visible[b-kxhzybsvek] {
    outline: 2px solid var(--accent-fill-rest);
    outline-offset: 2px;
}

.flag-chip img[b-kxhzybsvek] {
    width: 24px;
    height: 24px;
    object-fit: contain;
    border-radius: 2px;
    box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.15);
}

.flag-chip span[b-kxhzybsvek] {
    font-size: 0.625rem;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

.flag-chip-selected[b-kxhzybsvek] {
    border-color: var(--accent-fill-rest);
    background: color-mix(in srgb, var(--accent-fill-rest) 12%, transparent);
    box-shadow: 0 0 0 1px var(--accent-fill-rest);
}
/* /Components/Shared/GanttTimeline.razor.rz.scp.css */
/* GanttTimeline — Scoped CSS */

/* Shared column layout for header + data rows */
.gantt-container[b-ptko59m834] {
    /* Gutter aus dem globalen Token (tokens.css) — Charts, die sich an den Lanes
       ausrichten (YAxisWidthPx), pinnen denselben Wert als int. */
    --gantt-label-width: var(--w4l-timeline-gutter, 220px);
    width: 100%;
    font-size: 0.8125rem;
}

/* ── Header: year axis ── */
.gantt-header[b-ptko59m834] {
    display: grid;
    grid-template-columns: var(--gantt-label-width) 1fr;
    /* Headroom so a raised marker label (e.g. the marriage marker) sits ABOVE the year numbers
       instead of overlapping them. Grows by 13px per extra stagger row when labels collide. */
    padding-top: calc(16px + var(--gantt-marker-rows, 0) * 13px);
}

.gantt-header-label[b-ptko59m834] {
    /* Empty spacer, same width as label column */
}

.gantt-header-axis[b-ptko59m834] {
    display: flex;
    position: relative;
    border-left: 1px solid var(--neutral-stroke-rest);
    border-right: 1px solid var(--neutral-stroke-divider-rest);
    /*height: 18px;*/
    align-items: flex-end;
    /* Same tick-line background as .gantt-timeline for pixel-perfect alignment */
    background-image: linear-gradient(
        to right,
        var(--neutral-stroke-divider-rest) 1px,
        transparent 1px
    );
    background-size: calc(100% / var(--gantt-total-years)) 100%;
    background-position: left bottom;
    background-repeat: repeat-x;
}

.gantt-axis-cell[b-ptko59m834] {
    flex: 1;
    min-width: 0;
    position: relative;
    height: 5px;
    align-self: flex-end;
}


.gantt-axis-label[b-ptko59m834] {
    position: absolute;
    bottom: 100%;
    left: 0;
    transform: translateX(-50%);
    font-size: 0.625rem;
    font-weight: 600;
    color: var(--neutral-foreground-hint);
    white-space: nowrap;
    user-select: none;
    line-height: 1;
    padding-bottom: 2px;
}

/* ── Data rows: label + timeline ── */
.gantt-row[b-ptko59m834] {
    display: grid;
    grid-template-columns: var(--gantt-label-width) 1fr;
    align-items: center;
    min-height: 36px;
    cursor: pointer;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
    transition: background-color 0.15s ease;
}

.gantt-row:hover[b-ptko59m834] {
    background-color: var(--neutral-fill-secondary-hover);
}

/* Non-interactive row (CanSelectItem → false): no pointer, no hover highlight. */
.gantt-row-static[b-ptko59m834] {
    cursor: default;
}
.gantt-row-static:hover[b-ptko59m834] {
    background-color: transparent;
}

/* Empty-canvas placeholder lane (ShowEmptyScale, no items yet): keep the tick-grid timeline but
   drop the between-rows hairline — there's no peer below it to separate. Stretch the cells to the
   full lane height (the row default centers them, which would collapse the empty timeline cell to
   just its padding → stunted ticks); a touch of extra height so it reads as an intentional canvas. */
.gantt-row-empty[b-ptko59m834] {
    border-bottom: none;
    align-items: stretch;
    min-height: 48px;
}

/* Full-height tick grid + centered hint on the empty canvas. */
.gantt-row-empty .gantt-timeline[b-ptko59m834] {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Muted, non-interactive empty-state hint sitting over the tick grid. */
.gantt-empty-hint[b-ptko59m834] {
    font-size: 0.75rem;
    font-style: italic;
    color: var(--neutral-foreground-hint);
    text-align: center;
    padding: 0 16px;
    user-select: none;
    pointer-events: none;
}

.gantt-row-selected[b-ptko59m834] {
    background-color: var(--neutral-fill-secondary-active);
}

/* ── Label (left column) ── */
.gantt-label[b-ptko59m834] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px 4px 4px;
    font-size: 0.75rem;
    color: var(--neutral-foreground-rest);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Timeline area (right column) ── */
.gantt-timeline[b-ptko59m834] {
    position: relative;
    padding: 4px 0;
    border-left: 1px solid var(--neutral-stroke-rest);
    /* Vertical tick lines at year boundaries via repeating background */
    background-image: linear-gradient(
        to right,
        var(--neutral-stroke-divider-rest) 1px,
        transparent 1px
    );
    background-size: calc(100% / var(--gantt-total-years)) 100%;
    background-position: left;
    border-right: 1px solid var(--neutral-stroke-divider-rest);
}

/* ── Marker line (e.g. marriage snapshot) ── */
.gantt-marker[b-ptko59m834] {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 0;
    border-left: 2px dashed var(--accent-fill-rest);
    pointer-events: none;
    z-index: 1;
}

.gantt-marker-label[b-ptko59m834] {
    position: absolute;
    /* Raised one row above the year labels (which sit at bottom: 100% of the axis
       cells) so the marriage marker never overlaps the year numbers. */
    bottom: calc(100% + 13px);
    transform: translateX(-50%);
    font-size: 0.625rem;
    font-weight: 700;
    color: var(--accent-fill-rest);
    white-space: nowrap;
    user-select: none;
    line-height: 1;
    padding-bottom: 2px;
}

/* ── Bar ── */
/* Slider-style phase (unselected): transparent inner fill + a neutral/grey frame that matches the
   multi-lane phase bands (.cdt-band / .ist-band use the same --neutral-stroke-strong-rest), so a
   standard single-item lane reads consistently with the segmented lanes. Selecting a phase both
   raises the inner fill AND restores the accent/custom-coloured border (see .gantt-bar-selected) so
   the active/being-edited phase reads as stronger/more prominent — but it stays a bit translucent. */
.gantt-bar[b-ptko59m834] {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border-radius: 4px;
    background-color: color-mix(in srgb, var(--accent-fill-rest) 20%, transparent);
    /* Neutral, theme-adaptive frame (same as the multi-lane bands). Custom-coloured bars that set
       their own inline `border-color` (e.g. SolidBar) still win; those that only set `color:` fall
       back to this grey frame when unselected and light up (currentColor) once selected. */
    border: 1.4px solid var(--neutral-stroke-strong-rest);
    color: var(--accent-fill-rest);
    font-size: 0.75rem;
    font-weight: 500;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    min-height: 24px;
    transition: background-color 0.15s ease, color 0.15s ease;
    user-select: none;
    box-sizing: border-box;
}

/* Sehr kurze Segmente (echte Breite < 2% der Skala): der horizontale Padding-Sockel entfällt,
   sonst erzwingt box-sizing:border-box (padding 2×8px + border) ~19px Mindestbreite und ein
   1-Monats-Segment (z.B. abgeleitete ALV-Lücke) läse sich auf einer Jahrzehnte-Skala als ganzer
   Jahresblock. min-width hält ein kleines Klickziel. */
.gantt-bar-narrow[b-ptko59m834] {
    padding-left: 0;
    padding-right: 0;
    min-width: 6px;
}

/* Mit sichtbaren Grips (selektiert + draggable) braucht der schmale Balken wieder Griff-Fläche —
   beide 12px-Knöpfe auf 6px würden vollständig überlappen. */
.gantt-bar-narrow.gantt-bar-draggable[b-ptko59m834] {
    min-width: 18px;
}

.gantt-bar:hover[b-ptko59m834] {
    background-color: color-mix(in srgb, var(--accent-fill-rest) 32%, transparent);
}

.gantt-bar-selected[b-ptko59m834] {
    background-color: color-mix(in srgb, var(--accent-fill-rest) 60%, transparent);
    /* Selection lights the frame back up to the bar's accent/custom colour (currentColor), so the
       active phase stands out against the neutral unselected frames — unchanged from before. */
    border-color: currentColor;
}

.gantt-bar-selected:hover[b-ptko59m834] {
    background-color: color-mix(in srgb, var(--accent-fill-rest) 70%, transparent);
}

/* ── Drag/Resize (opt-in via Draggable) ── */
/* Only the selected, drag-enabled bar carries these. Grips sit inset at the bar edges;
   the bar body itself is the move target. Pure HTML/CSS — no FAST components. */
.gantt-bar-draggable[b-ptko59m834] {
    position: relative;
    /* Let the round knobs straddle the edges and the bubble sit above without being clipped
       by the bar's overflow:hidden. Draggable bars (opt-in) carry no inline text content. */
    overflow: visible;
}

/* ── End marker (opt-in via GetEndMarker) ── */
/* The icon sits just after the bar end, as a child of the bar so it travels with the drag ghost.
   The offset is constant (clear of the 16px end grip that straddles the edge by 8px) so selecting a
   bar never makes the icon jump. Bars with a marker carry no inline text, so no clipping is needed. */
.gantt-bar-has-end-marker[b-ptko59m834] {
    position: relative;
    overflow: visible;
    --gantt-end-marker-gap: 12px;
}

.gantt-end-marker[b-ptko59m834] {
    position: absolute;
    top: 50%;
    left: calc(100% + var(--gantt-end-marker-gap));
    transform: translateY(-50%);
    display: inline-flex;
    line-height: 1;
    color: var(--neutral-foreground-hint);
    pointer-events: auto;
}

.gantt-bar:hover .gantt-end-marker[b-ptko59m834],
.gantt-bar-selected .gantt-end-marker[b-ptko59m834],
.gantt-row-selected .gantt-end-marker[b-ptko59m834] {
    color: var(--neutral-foreground-rest);
}

/* Optional visible text next to the end icon (e.g. «PK 01/2026»); the aria-label of the marker carries the full text. */
.gantt-end-marker-text[b-ptko59m834] {
    margin-left: 2px;
    font-size: 11px;
    font-weight: 600;
    color: var(--neutral-foreground-rest); /* hint grey was too dim in dark mode */
    white-space: nowrap;
}

/* On a phone-width timeline the text would run past the scale: icon only (aria-label/title keep the text). */
@media (max-width: 600px) {
    .gantt-end-marker-text[b-ptko59m834] { display: none; }
}

/* Bar ending in the scale's overhang: no room after it — the icon moves inside the bar end. */
.gantt-end-marker--inside[b-ptko59m834] {
    left: auto;
    right: 4px;
}

/* A narrow bar has no room inside either: place the icon before the bar end instead. */
.gantt-bar-narrow .gantt-end-marker--inside[b-ptko59m834] {
    right: calc(100% + 4px);
}

/* Stored end of a bar shown shortened (3a account closed by a transfer): dashed outline behind the bar end. */
.gantt-shadow[b-ptko59m834] {
    position: absolute;
    top: 4px;
    bottom: 4px;
    box-sizing: border-box;
    border: 1.4px dashed var(--neutral-stroke-strong-rest);
    border-left: none;
    border-radius: 0 4px 4px 0;
    opacity: 0.7;
}

/* Whole-bar move is only offered when both edges are inside the scale. */
.gantt-bar-movable[b-ptko59m834] {
    cursor: grab;
}

.gantt-bar-movable:active[b-ptko59m834] {
    cursor: grabbing;
}

.gantt-grip[b-ptko59m834] {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: ew-resize;
    z-index: 2;
    touch-action: none;
}

/* Small round knob, consistent with the Residence/Domicile boundary handles. */
.gantt-grip[b-ptko59m834]::before {
    content: "";
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: var(--neutral-layer-1);
    border: 1.5px solid var(--neutral-foreground-rest);
    box-sizing: border-box;
    transition: transform 0.1s ease;
}

.gantt-grip:hover[b-ptko59m834]::before,
.gantt-grip:focus-visible[b-ptko59m834]::before {
    transform: scale(1.18);
}

.gantt-grip:focus-visible[b-ptko59m834] {
    outline: 2px solid var(--accent-fill-rest);
    outline-offset: -1px;
    border-radius: 50%;
}

/* The knobs straddle the bar edges (half outside) like a typical handle. */
.gantt-grip-start[b-ptko59m834] {
    left: -8px;
}

.gantt-grip-end[b-ptko59m834] {
    right: -8px;
}

/* Live date readout during drag (toggled visible by ganttDrag.js). One bubble per handle,
   sitting ABOVE the corresponding round knob: resize shows the moving one, move shows both. */
.gantt-bubble[b-ptko59m834] {
    position: absolute;
    bottom: calc(100% + 7px);
    padding: 1px 6px;
    border-radius: 4px;
    /* Neutral readout (consistent with the Residence boundary bubble), not accent-coloured. */
    background-color: var(--neutral-foreground-rest);
    color: var(--neutral-layer-1);
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
    pointer-events: none;
    z-index: 3;
}

.gantt-bubble-start[b-ptko59m834] {
    left: 0;
    transform: translateX(-50%);
}

.gantt-bubble-end[b-ptko59m834] {
    right: 0;
    transform: translateX(50%);
}

/* ── Diamond (event) mode: one lane, one point-marker per item ── */
.gantt-diamond-lane[b-ptko59m834] {
    min-height: 44px;
    cursor: default;
}

/* Give the lane's timeline a real height so the absolutely-positioned diamonds have a
   vertical reference (top:50%) — absolute children contribute no height themselves. */
.gantt-diamond-lane .gantt-timeline[b-ptko59m834] {
    min-height: 40px;
}

/* Each diamond is a .gantt-bar, but absolutely positioned on the shared lane (margin-left = its
   month position, kept in sync by ganttDrag.settleBar). The rotated square is a ::before so the
   bar's own drag-transform never fights the diamond's rotation. min-width gives a comfortable
   grab/click target even though the point event spans a single month. */
.gantt-diamond[b-ptko59m834] {
    position: absolute;
    top: 50%;
    /* Vertical centering via margin (NOT transform): ganttDrag sets the bar's inline
       transform:translateX during a move, which would otherwise clobber a translateY. */
    margin-top: -10px;
    min-width: 20px;
    height: 20px;
    padding: 0;
    background-color: transparent !important;
    border: none !important;
    overflow: visible;
}

.gantt-diamond[b-ptko59m834]::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 14px;
    height: 14px;
    transform: translate(-50%, -50%) rotate(45deg);
    background-color: color-mix(in srgb, var(--accent-fill-rest) 70%, transparent);
    border: 1.5px solid var(--accent-fill-rest);
    border-radius: 2px;
    pointer-events: none;
    transition: transform 0.1s ease;
}

.gantt-diamond:hover[b-ptko59m834]::before {
    background-color: var(--accent-fill-rest);
}

.gantt-diamond-selected[b-ptko59m834]::before {
    background-color: var(--accent-fill-rest);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-fill-rest) 30%, transparent);
}

/* Custom diamond content (DiamondTemplate): the rotated square gives way to the caller's
   glyph (emoji / count badge). Centered like the ::before; pointer-events stay on the bar. */
.gantt-diamond--custom[b-ptko59m834]::before {
    display: none;
}

.gantt-diamond[b-ptko59m834]  .gantt-diamond-content {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    line-height: 1;
}

/* Touch: breitere Grips (16px-Hit ist für Finger zu klein) + grösserer Knob; Diamanten bekommen
   eine unsichtbare Hit-Erweiterung (::after, symmetrisch — min-width würde nur nach rechts wachsen). */
@media (pointer: coarse) {
    .gantt-grip[b-ptko59m834] { width: 32px; }
    .gantt-grip-start[b-ptko59m834] { left: -16px; }
    .gantt-grip-end[b-ptko59m834] { right: -16px; }
    .gantt-bar-has-end-marker[b-ptko59m834] { --gantt-end-marker-gap: 20px; }

    .gantt-grip[b-ptko59m834]::before { width: 16px; height: 16px; }

    .gantt-diamond[b-ptko59m834]::after {
        content: "";
        position: absolute;
        inset: -8px;
    }
}

/* ── Utilities for LabelTemplate / BarTemplate content ── */
.gantt-label[b-ptko59m834]  .gantt-label-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.gantt-label[b-ptko59m834]  .gantt-label-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}

.gantt-label[b-ptko59m834]  .gantt-label-amount {
    flex-shrink: 0;
    opacity: 0.7;
    font-size: 0.6875rem;
}

/* Kompakte Lebensphasen-Tag-Icons (Eigenheim, Kinder, Auszeit, Rolle …) */
.gantt-label[b-ptko59m834]  .gantt-label-tags {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 3px;
    opacity: 0.65;
}

.gantt-label[b-ptko59m834]  .gantt-label-tags svg {
    width: 14px;
    height: 14px;
}

.gantt-label[b-ptko59m834]  .gantt-tag {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    font-size: 0.625rem;
    line-height: 1;
}

.gantt-bar[b-ptko59m834]  .gantt-bar-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.gantt-bar[b-ptko59m834]  .gantt-bar-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}

.gantt-bar[b-ptko59m834]  .gantt-bar-amount {
    flex-shrink: 0;
    opacity: 0.85;
    font-size: 0.6875rem;
}

/* Kantonswappen + Ort INNERHALB des Balkens (Housing-Lane). Eigenes overflow:hidden, damit der
   Inhalt auch dann sauber clippt, wenn der selektierte Balken für die Drag-Griffe overflow:visible
   trägt (der flex:1 / min-width:0 Wrapper wird trotzdem auf die Balkenbreite begrenzt). */
.gantt-bar[b-ptko59m834]  .gantt-bar-content {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.gantt-bar[b-ptko59m834]  .gantt-bar-flag {
    flex-shrink: 0;
    width: 15px;
    height: 11px;
    object-fit: contain;
    border-radius: 2px;
    box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.25);
}

.gantt-bar[b-ptko59m834]  .gantt-bar-place {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    font-size: 0.6875rem;
}
/* /Components/Shared/NumberSpinner.razor.rz.scp.css */
/* ==========================================================================
   NumberSpinner — native numeric input + Fluent-style chevron buttons.
   Scoped styles. The surrounding chrome (border, focus underline) is owned
   by the composer (.ym-row in app.css). This file only styles the input
   and the spinner glyphs.
   ========================================================================== */

.ns-host[b-90hrdw5vag] {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
}

/* native input — transparent; equivalent to FAST .control */
.ns-input[b-90hrdw5vag] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: textfield;
    box-sizing: border-box;
    margin: 0;
    padding: 0 2px;
    border: 0;
    outline: none;
    background: transparent;
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

/* hide the browser's own spin buttons — replaced by .ns-controls */
.ns-input[b-90hrdw5vag]::-webkit-outer-spin-button,
.ns-input[b-90hrdw5vag]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.ns-disabled .ns-input[b-90hrdw5vag] {
    cursor: not-allowed;
}

/* fill mode — the input flex-grows to fill the host (single-number fields).
   The chevron stack is pinned as an absolute overlay at the right (see below) so it
   can never be pushed outside the field in narrow layouts (e.g. dense budget grids). */
.ns-fill[b-90hrdw5vag] {
    flex: 1 1 auto;
    position: relative;
    /* Let the host shrink below the <input>'s intrinsic width in narrow columns. Without this the
       flex item's automatic minimum (min-width:auto = content min-content) keeps a "hard" size and
       the spinner/reset get pushed outside the field. The input's own min-width:0 is not enough — the
       WRAPPER flex item needs it too. */
    min-width: 0;
}

.ns-fill .ns-input[b-90hrdw5vag] {
    flex: 1 1 0;
    min-width: 0;
    /* reserve room so right-aligned digits never slide under the overlaid spinner */
    padding-inline-end: 22px;
}

/* fill mode: chevrons overlay the right inner edge instead of reserving an in-flow slot.
   Anchored to the host, so the spinner is always inside the field regardless of width. */
.ns-fill .ns-controls[b-90hrdw5vag] {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 6px;
    height: auto;
    justify-content: center;
}

/* chevron stack — fixed-width slot, opacity-toggled so there is no layout
   shift when it reveals on hover (matches FAST .controls behaviour) */
.ns-controls[b-90hrdw5vag] {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    width: 16px;
    position: relative;
    top: -1px;
    z-index: 3;
    opacity: 0;
    pointer-events: none;
    transition: opacity .1s ease-in-out;
}

.ns-step[b-90hrdw5vag] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--neutral-foreground-rest);
    fill: currentcolor;
    cursor: pointer;
    line-height: 0;
}

.ns-step svg[b-90hrdw5vag] {
    display: block;
    width: 12px;
    height: 12px;
}

.ns-step:hover:not(:disabled)[b-90hrdw5vag] {
    color: var(--accent-fill-rest);
}

.ns-step:disabled[b-90hrdw5vag] {
    opacity: .35;
    cursor: default;
}
/* /Components/Shared/PersonChip.razor.rz.scp.css */
/* Schmaler vertikaler Personenfarb-Balken in der IconTitle-Titelzeile.
   order: -1 zieht den Balken im Flex-Container der Titelzeile VOR das
   Seiten-Icon, obwohl er im TitleBadge-Slot (nach dem Titel) deklariert ist.
   align-self: stretch lässt ihn auf die Höhe des Icons mitwachsen. */
.w4l-person-chip[b-7woyiren09] {
    order: -1;
    align-self: stretch;
    flex-shrink: 0;
    width: 5px;
    border-radius: 3px;
    margin: 2px 0;
}
/* /Components/Shared/ProductNewsNotice.razor.rz.scp.css */
/* Notice sentence and checkbox read as one block, directly under the terms row. */
.w4l-product-news[b-sz6j8fypnq] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.w4l-product-news-mode[b-sz6j8fypnq] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Author display:flex above beats the UA's [hidden]{display:none} regardless of specificity — pin it. */
.w4l-product-news-mode[hidden][b-sz6j8fypnq] {
    display: none;
}

.w4l-product-news-text[b-sz6j8fypnq] {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--neutral-foreground-hint);
}
/* /Components/Shared/ScreenSpotlight.razor.rz.scp.css */
.w4l-screenshot[b-rus55kw550] { margin: 0; }
/* overflow: hidden stays - it also clips .w4l-shot-marker's 4000px dimming veil to the picture
   (Fix round 1, 2026-09-21). The img's own border-radius still rounds its corners independently;
   harmless alongside the frame's own clip+radius. Auto inline margins centre a crop narrower
   than its column (the frame is capped at the capture's native width, owner 2026-09-23). */
.w4l-screenshot-frame[b-rus55kw550] { position: relative; border-radius: 12px; overflow: hidden;
    border: 1px solid var(--neutral-stroke-divider-rest); margin-inline: auto; }
.w4l-screenshot-frame img[b-rus55kw550] { display: block; width: 100%; max-width: 100%; height: auto; border-radius: 11px; }

/* The frame is a real button when zoomable: no button chrome, the image is the visual. */
.w4l-shot-frame-button[b-rus55kw550] { display: block; width: 100%; padding: 0; border: 1px solid var(--neutral-stroke-divider-rest);
    background: none; cursor: zoom-in; text-align: inherit; font: inherit; border-radius: 12px; }
.w4l-shot-frame-button:focus-visible[b-rus55kw550] { outline: 2px solid var(--accent-fill-rest); outline-offset: 2px; }
.w4l-shot-lightbox-close[b-rus55kw550] { position: absolute; top: 16px; right: 16px; border: 1px solid var(--neutral-stroke-rest);
    background: var(--neutral-fill-rest); color: var(--neutral-foreground-rest); border-radius: 6px; padding: 6px 12px; cursor: pointer; }

/* Both images sit in the DOM; only one is shown. Same :root[data-w4l-dark] hook as ThemedShot. */
.w4l-screenshot-frame img.w4l-shot-dark[b-rus55kw550] { display: none; }
:root[data-w4l-dark] .w4l-screenshot-frame img.w4l-shot-light[b-rus55kw550] { display: none; }
:root[data-w4l-dark] .w4l-screenshot-frame img.w4l-shot-dark[b-rus55kw550] { display: block; }

.w4l-shot-lightbox img.w4l-shot-dark[b-rus55kw550] { display: none; }
:root[data-w4l-dark] .w4l-shot-lightbox img.w4l-shot-light[b-rus55kw550] { display: none; }
:root[data-w4l-dark] .w4l-shot-lightbox img.w4l-shot-dark[b-rus55kw550] { display: block; }

.w4l-screenshot.zoomable .w4l-screenshot-frame[b-rus55kw550] { cursor: zoom-in; }
.w4l-shot-marker[b-rus55kw550] { position: absolute; z-index: 1; border: 2px solid var(--accent-fill-rest);
    border-radius: 8px; box-shadow: 0 0 0 4000px color-mix(in srgb, var(--neutral-layer-1) 18%, transparent); }
.w4l-shot-marker + .w4l-shot-marker[b-rus55kw550] { box-shadow: none; }

/* Owner 2026-09-23: discreet magnifier on zoomable images - always visible (touch has no hover),
   tokens only so it reads in both themes over arbitrary screenshot content. */
.w4l-shot-zoom-icon[b-rus55kw550] { position: absolute; right: 10px; bottom: 10px; z-index: 3; width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center; border-radius: 50%;
    background: color-mix(in srgb, var(--neutral-layer-1) 78%, transparent);
    border: 1px solid var(--neutral-stroke-divider-rest);
    box-shadow: 0 1px 3px color-mix(in srgb, var(--neutral-foreground-rest) 25%, transparent);
    pointer-events: none; }
/* Fixed 24px badge anchored OUTSIDE the zone's top-left corner (centre ~4px inside the corner,
   so ~8px overlaps the zone's border/padding, not its text). The inline style puts the badge's
   anchor at max(zone X/Y, 16px) of the frame and the -16px margins pull it back, so the badge
   never leaves the frame: the frame keeps overflow: hidden for the 4000px dimming veil, and a
   zone at the image edge (e.g. nav-areas at x = 0) would otherwise be clipped. Percent inside
   max() resolves against the frame, so no container query is needed (and the frame's sizing
   stays untouched). The ring separates the badge from screenshot content in both themes. */
.w4l-shot-badge[b-rus55kw550] { position: absolute; z-index: 2; margin: -16px 0 0 -16px; width: 24px; height: 24px;
    display: flex; align-items: center; justify-content: center; border-radius: 50%;
    background: var(--accent-fill-rest); color: var(--neutral-fill-rest);
    box-shadow: 0 0 0 2px var(--neutral-layer-1);
    font-size: 0.8rem; font-weight: 700; }
.w4l-shot-legend[b-rus55kw550] { margin: 8px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px;
    font-size: 0.9rem; color: var(--neutral-foreground-hint); }
.w4l-screenshot-missing[b-rus55kw550] { display: flex; align-items: center; justify-content: center;
    min-height: 220px; border: 1px dashed var(--neutral-stroke-divider-rest); border-radius: 12px;
    color: var(--neutral-foreground-hint); }
.w4l-shot-lightbox[b-rus55kw550] { position: fixed; inset: 0; z-index: 1000; display: flex;
    align-items: center; justify-content: center; cursor: zoom-out;
    background: color-mix(in srgb, var(--neutral-layer-1) 65%, transparent); }
.w4l-shot-lightbox img[b-rus55kw550] { max-width: 92vw; max-height: 92vh; border-radius: 12px; }
.w4l-shot-seq[b-rus55kw550] { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; }
.w4l-shot-seq-label[b-rus55kw550] { font-size: 0.9rem; color: var(--neutral-foreground-rest); }
.w4l-shot-seq-btns[b-rus55kw550] { display: flex; gap: 8px; }
.w4l-shot-seq-btn[b-rus55kw550] { border: 1px solid var(--neutral-stroke-rest); background: var(--neutral-fill-stealth-rest);
    border-radius: 6px; padding: 4px 12px; cursor: pointer; font-size: 0.85rem; color: var(--neutral-foreground-rest); }
.w4l-shot-seq-btn:disabled[b-rus55kw550] { opacity: 0.5; cursor: default; }
/* /Components/Shared/StaticAmount.razor.rz.scp.css */
/* Same box model as .ym-field > label + .ym-row (components.css): same height, border width, radius and border colour
   (--neutral-stroke-input-rest, a gradient, hence the masked pseudo-element instead of a border-color) - but no fill, no
   hover, no focus ring, no cursor. Only a frame, not a field. */
.sa-field[b-64hfdacb7z] {
    width: 100%;
    cursor: default;
    user-select: text;
}

.sa-label[b-64hfdacb7z] {
    margin-bottom: 4px;
    color: var(--neutral-foreground-hint, var(--neutral-foreground-rest));
    font-size: var(--type-ramp-base-font-size, 14px);
    line-height: var(--type-ramp-base-line-height, 20px);
}

/* Right-aligned like the CurrencyField. The transparent border keeps the box model equal to the input row's. */
.sa-row[b-64hfdacb7z] {
    position: relative;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.4rem;
    border: calc(var(--stroke-width, 1) * 1px) solid transparent;
    border-radius: calc(var(--control-corner-radius, 4) * 1px);
    height: calc((var(--base-height-multiplier, 8) + var(--density, 0)) * var(--design-unit, 4) * 1px);
    padding-inline: 10px 11px;
    color: var(--neutral-foreground-rest);
}

.sa-value[b-64hfdacb7z] {
    font-variant-numeric: tabular-nums;
    min-width: 0;
}

.sa-suffix[b-64hfdacb7z] {
    flex: 0 0 auto;
    color: var(--neutral-foreground-hint, var(--neutral-foreground-rest));
}

/* The frame: the stroke paints only the border ring (padding box punched out of the mask), the inside stays transparent. */
.sa-row[b-64hfdacb7z]::before {
    content: '';
    position: absolute;
    inset: calc(var(--stroke-width, 1) * -1px);
    border: calc(var(--stroke-width, 1) * 1px) solid transparent;
    border-radius: calc(var(--control-corner-radius, 4) * 1px);
    background: border-box var(--neutral-stroke-input-rest);
    -webkit-mask: linear-gradient(currentcolor 0 0) padding-box, linear-gradient(currentcolor 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(currentcolor 0 0) padding-box, linear-gradient(currentcolor 0 0);
    mask-composite: exclude;
    pointer-events: none;
}
/* /Components/Shared/ThemedClip.razor.rz.scp.css */
/* Mirrors ThemedShot's theme switch. Same caveat applies: the show/hide rules must out-specify
   `.tc-frame video` (class+type), so they repeat the element selector rather than using the
   class alone - otherwise both clips render stacked. Scoped CSS is fine even though :root sits
   outside the component, because Blazor appends the scope attribute to the LAST compound
   selector. */
.tc-clip[b-a321m70b55] { margin: 0; }

.tc-frame video[b-a321m70b55] {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    background: var(--neutral-layer-2);
}

.tc-frame video.tc-dark[b-a321m70b55] { display: none; }
:root[data-w4l-dark] .tc-frame video.tc-light[b-a321m70b55] { display: none; }
:root[data-w4l-dark] .tc-frame video.tc-dark[b-a321m70b55] { display: block; }

.tc-caption[b-a321m70b55] {
    font-size: 0.8rem;
    color: var(--neutral-foreground-hint);
    padding-top: 8px;
    text-align: center;
}

/* Zoomable clip. The trigger is a button that must look like nothing: any border, background or
   glyph of its own would sit on top of the animation, which is exactly what it must not do.
   The zoom-in cursor is the only visible affordance; :focus-visible restores one for keyboards. */
.tc-clip.zoomable .tc-zoom-trigger[b-a321m70b55] {
    display: block;
    width: 100%;
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    color: inherit;
    cursor: zoom-in;
}

.tc-clip.zoomable .tc-zoom-trigger:focus-visible[b-a321m70b55] {
    outline: 2px solid var(--accent-fill-rest);
    outline-offset: 3px;
    border-radius: 4px;
}

/* Overlay mirrors ThemedShot's ts-lightbox so a clip and a screenshot in the same story strip
   enlarge identically. */
.tc-lightbox[b-a321m70b55] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(16px, 4vw, 48px);
    background: rgba(0, 0, 0, 0.78);
    cursor: zoom-out;
}

.tc-lightbox video[b-a321m70b55] {
    max-width: 100%;
    max-height: 100%;
    border-radius: 8px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
}

.tc-lightbox video.tc-dark[b-a321m70b55] { display: none; }
:root[data-w4l-dark] .tc-lightbox video.tc-light[b-a321m70b55] { display: none; }
:root[data-w4l-dark] .tc-lightbox video.tc-dark[b-a321m70b55] { display: block; }
/* /Components/Shared/ThemedShot.razor.rz.scp.css */
/* Both images sit in the DOM; only one is shown. The switch is pure CSS over the global
   :root[data-w4l-dark] scope that themeMode.js toggles - the same hook /api/branding/theme.css
   uses - so it follows the header switcher without a re-render. Scoped CSS is fine here even
   though :root is outside the component: Blazor appends the scope attribute to the LAST
   compound selector, and the imgs belong to this component. */
.ts-shot[b-qv9dzw7owy] { margin: 0; }
/* Positioning context for the magnifier; auto inline margins centre a crop narrower than its
   column (the frame is capped at the capture's native width, owner 2026-09-23). */
.ts-frame[b-qv9dzw7owy] { position: relative; margin-inline: auto; }
.ts-frame img[b-qv9dzw7owy] { display: block; width: 100%; max-width: 100%; height: auto; border-radius: 8px; }

/* Owner 2026-09-23: discreet magnifier on zoomable images - always visible (touch has no hover),
   tokens only so it reads in both themes over arbitrary screenshot content. */
.ts-zoom-icon[b-qv9dzw7owy] { position: absolute; right: 10px; bottom: 10px; z-index: 3; width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center; border-radius: 50%;
    background: color-mix(in srgb, var(--neutral-layer-1) 78%, transparent);
    border: 1px solid var(--neutral-stroke-divider-rest);
    box-shadow: 0 1px 3px color-mix(in srgb, var(--neutral-foreground-rest) 25%, transparent);
    pointer-events: none; }

/* These must out-specify `.ts-frame img` above, which is class+type and would otherwise win and
   show BOTH images stacked. Hence the same img element selector rather than the class alone. */
.ts-frame img.ts-dark[b-qv9dzw7owy] { display: none; }
:root[data-w4l-dark] .ts-frame img.ts-light[b-qv9dzw7owy] { display: none; }
:root[data-w4l-dark] .ts-frame img.ts-dark[b-qv9dzw7owy] { display: block; }

.ts-lightbox img.ts-dark[b-qv9dzw7owy] { display: none; }
:root[data-w4l-dark] .ts-lightbox img.ts-light[b-qv9dzw7owy] { display: none; }
:root[data-w4l-dark] .ts-lightbox img.ts-dark[b-qv9dzw7owy] { display: block; }

.ts-shot.zoomable .ts-frame[b-qv9dzw7owy] { cursor: zoom-in; }

/* The frame is a real button when zoomable: no button chrome, the image is the visual. */
.ts-frame-button[b-qv9dzw7owy] { display: block; width: 100%; padding: 0; border: none; background: none; cursor: zoom-in; text-align: inherit; font: inherit; }
.ts-frame-button:focus-visible[b-qv9dzw7owy] { outline: 2px solid var(--accent-fill-rest); outline-offset: 2px; }
.ts-lightbox-close[b-qv9dzw7owy] { position: absolute; top: 16px; right: 16px; border: 1px solid var(--neutral-stroke-rest);
    background: var(--neutral-fill-rest); color: var(--neutral-foreground-rest); border-radius: 6px; padding: 6px 12px; cursor: pointer; }

.ts-caption[b-qv9dzw7owy] {
    font-size: 0.8rem;
    color: var(--neutral-foreground-hint);
    padding-top: 8px;
    text-align: center;
}

.ts-missing[b-qv9dzw7owy] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 220px;
    border: 1px dashed var(--neutral-stroke-divider-rest);
    border-radius: 12px;
    color: var(--neutral-foreground-hint);
}

.ts-lightbox[b-qv9dzw7owy] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: zoom-out;
    background: color-mix(in srgb, var(--neutral-layer-1) 65%, transparent);
}

.ts-lightbox img[b-qv9dzw7owy] { max-width: 92vw; max-height: 92vh; border-radius: 12px; }