@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/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;
}
/* /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;
}
/* /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] { opacity: 0.7; font-size: 0.85rem; padding: 1.2rem 0; }
.dct-stale[b-4s735dm8tu] { opacity: 0.45; transition: none; }
/* C-2: columns from age MaxEntryAge + 1 are dimmed; the boundary line and the tooltip note carry the meaning, not the tone. */
.dct-aged[b-4s735dm8tu] { opacity: .6; }
.dct-stale .dct-aged[b-4s735dm8tu] { opacity: 1; }
.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-swatch--line[b-4s735dm8tu] { height: 0; border-top: 1px solid var(--neutral-foreground-hint); border-radius: 0; }
.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; } }
/* /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/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/DeathRiskInsuranceRow.razor.rz.scp.css */
.drr-row[b-4p2hhpycug] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

/* Flex, not grid, same reasoning as DisabilityInsuranceRow (.dir-head): a nowrap summary blows
   the ~770px work area past the name column's fair share. Here the DOM already sits in the
   desired visual order (name, trash, summary), so no `order` juggling is needed — the summary's
   flex-basis:100% alone forces it onto its own line below name + trash. */
.drr-head[b-4p2hhpycug] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.8rem;
}

.drr-summary[b-4p2hhpycug] {
    flex: 1 1 100%;
    font-size: 0.85rem;
    color: var(--neutral-foreground-hint);
    white-space: normal;
}

.drr-field[b-4p2hhpycug] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.drr-name[b-4p2hhpycug] {
    flex: 1 1 12rem;
    min-width: 12rem;
}

/* The trash button is a <FluentButton> (a child component, not an element WE render), so its
   root class needs ::deep to cross that component boundary — see the gap-button comment below
   for the same rule; without it this selector never matches anything. */
[b-4p2hhpycug] .drr-remove-btn {
    flex: 0 0 auto;
}

.drr-label[b-4p2hhpycug] {
    font-size: 0.75rem;
    opacity: 0.7;
}

.drr-input[b-4p2hhpycug] {
    width: 100%;
    height: 32px;
    padding: 0 8px;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 4px;
    background: var(--neutral-fill-input-rest);
    color: var(--neutral-foreground-rest);
    min-width: 0;
}

/* Basis and Deckung side by side; Prämie full width below them (spec §5.4, ruling 2). */
.drr-groups[b-4p2hhpycug] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
        "basis cover"
        "premium premium";
    gap: 1rem;
}

.drr-group[b-4p2hhpycug] {
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.drr-basis[b-4p2hhpycug] {
    grid-area: basis;
}

.drr-cover[b-4p2hhpycug] {
    grid-area: cover;
}

/* Prämie is full width below Basis/Deckung, so its own fields may flow in a row instead of
   stacking (ruling 2). */
.drr-premium[b-4p2hhpycug] {
    grid-area: premium;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
}

.drr-premium > .drr-legend[b-4p2hhpycug] {
    flex-basis: 100%;
}

.drr-legend[b-4p2hhpycug] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    padding: 0;
}

.drr-hint[b-4p2hhpycug] {
    font-size: 0.72rem;
    opacity: 0.7;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    flex-wrap: wrap;
}

/* The gap/bridge helper button ("Lücke übernehmen: CHF …") carries its explanation as VISIBLE
   text (spec §5.5 — the label IS the accessible name), so on narrow viewports it must wrap
   instead of overflowing the row or clipping. FluentButton renders its label inside the
   "control" shadow part; ::deep crosses the FluentButton component boundary, ::part then
   reaches into its shadow root. Both the host (fixed 32px height by default) AND the "control"
   part must grow together, with vertical padding on the control so the text doesn't sit flush
   against the border (see DisabilityInsuranceRow.razor.css for the fix-round history). */
[b-4p2hhpycug] .drr-gap-btn {
    max-width: 100%;
    height: auto;
    min-height: 32px;
}

[b-4p2hhpycug] .drr-gap-btn::part(control) {
    white-space: normal;
    height: auto;
    min-height: 32px;
    padding-top: 6px;
    padding-bottom: 6px;
    text-align: left;
}

@media (max-width: 720px) {
    .drr-groups[b-4p2hhpycug] {
        grid-template-columns: 1fr;
        grid-template-areas:
            "basis"
            "cover"
            "premium";
    }
}
/* /Components/Application/Forms/DisabilityGapExplainer.razor.rz.scp.css */
.dge[b-ujch8nv000] {
    container-type: inline-size;
}

.dge--stale[b-ujch8nv000] {
    opacity: .55;
}

.dge-summary[b-ujch8nv000] {
    cursor: pointer;
    white-space: normal;
}

.dge-figures[b-ujch8nv000] {
    color: var(--neutral-foreground-hint);
    margin-left: .5rem;
}

.dge-facts[b-ujch8nv000] {
    display: grid;
    grid-template-columns: 1fr;
    gap: .15rem 1rem;
    margin: .6rem 0 0;
}

.dge-facts dt[b-ujch8nv000] {
    font-weight: 600;
    margin-top: .4rem;
}

.dge-facts dd[b-ujch8nv000] {
    margin: 0;
}

@container (min-width: 30rem) {
    .dge-facts[b-ujch8nv000] {
        grid-template-columns: 11rem 1fr;
    }

    .dge-facts dt[b-ujch8nv000] {
        margin-top: 0;
    }
}

.dge-note[b-ujch8nv000] {
    font-size: .8125rem;
    color: var(--neutral-foreground-hint);
    margin: .4rem 0 0;
}
/* /Components/Application/Forms/DisabilityInsuranceRow.razor.rz.scp.css */
/* The row is its own size container: the two columns follow the panel's width (≈770 px with the
   preview open, ≈1000 px without), which a viewport media query cannot see. Precedent:
   CapitalEventsLane / BudgetPhaseLane. */
.dir-row[b-zekmm9kudh] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    container-type: inline-size;
}

/* Delete in IconTitleEdit's action slot: a native button (no FAST element in a list row). */
.dir-remove[b-zekmm9kudh] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-left: auto;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    cursor: pointer;
}

.dir-remove:hover[b-zekmm9kudh] {
    background: var(--neutral-fill-stealth-hover);
}

.dir-remove:focus-visible[b-zekmm9kudh],
.dir-reset:focus-visible[b-zekmm9kudh] {
    outline: 2px solid var(--accent-fill-rest);
    outline-offset: 1px;
}

/* One column by default; two (policy | premium) once the row is wide enough. */
.dir-groups[b-zekmm9kudh] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@container (min-width: 600px) {
    .dir-groups[b-zekmm9kudh] {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 2rem;
    }

    /* A quiet divider between benefit and cost — no second surface (DesignBacklog: nested
       panels only for sub-objects). */
    .dir-col--cost[b-zekmm9kudh] {
        border-inline-start: 1px solid var(--neutral-stroke-divider-rest);
        padding-inline-start: 2rem;
        margin-inline-start: -1rem;
    }
}

/* Term (from/to) and cause side by side under the title; they wrap on a narrow row. */
.dir-terms[b-zekmm9kudh] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.8rem 1.5rem;
}

.dir-period[b-zekmm9kudh] {
    flex: 1 1 18rem;
    min-width: 0;
    max-width: 26rem;
}

.dir-col[b-zekmm9kudh] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

.dir-group[b-zekmm9kudh] {
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.dir-legend[b-zekmm9kudh] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    padding: 0;
    margin-bottom: 0.25rem;
}

.dir-field[b-zekmm9kudh] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

/* Waiting period and (daily allowance only) duration side by side. */
.dir-inline[b-zekmm9kudh] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
}

.dir-inline > .dir-field[b-zekmm9kudh] {
    flex: 1 1 9rem;
}

.dir-label[b-zekmm9kudh] {
    font-size: 0.75rem;
    opacity: 0.7;
}

.dir-input[b-zekmm9kudh] {
    width: 100%;
    height: 32px;
    padding: 0 8px;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 4px;
    background: var(--neutral-fill-input-rest);
    color: var(--neutral-foreground-rest);
    min-width: 0;
}

/* Premium field + reset icon (or the quiet estimate word) on one line, aligned to the input. */
.dir-premium-line[b-zekmm9kudh] {
    display: flex;
    align-items: flex-end;
    gap: 0.4rem;
}

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

.dir-reset:hover[b-zekmm9kudh] {
    background: var(--neutral-fill-stealth-hover);
}

.dir-hint[b-zekmm9kudh] {
    font-size: 0.72rem;
    opacity: 0.7;
    padding-bottom: 8px;
}

/* The gap helper's label is only the amount now, but a narrow column can still wrap it: the
   fluent-button host defaults to a fixed 32 px height, so host and "control" part must grow
   together (::deep crosses the FluentButton boundary, ::part reaches its shadow root). */
[b-zekmm9kudh] .dir-gap-btn {
    align-self: flex-start;
    max-width: 100%;
    height: auto;
    min-height: 32px;
}

[b-zekmm9kudh] .dir-gap-btn::part(control) {
    white-space: normal;
    height: auto;
    min-height: 32px;
    padding-top: 6px;
    padding-bottom: 6px;
    text-align: left;
}

/* State words next to a field (bridge relation, zero benefit, no estimate): quiet, wrapping. */
.dir-hint--state[b-zekmm9kudh] {
    padding-bottom: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

/* No estimate above the entry age: a state, not a hint, so full opacity (spec section 8 e). */
.dir-hint--solid[b-zekmm9kudh] {
    opacity: 1;
}

.dir-premium-line[b-zekmm9kudh] {
    flex-wrap: wrap;
}

/* Native details for the rarely changed terms (pattern ChildrenForm). */
.dir-more[b-zekmm9kudh] {
    border-top: 1px solid var(--neutral-stroke-divider-rest);
    padding-top: 0.4rem;
}

.dir-more-summary[b-zekmm9kudh] {
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 600;
}

.dir-more-body[b-zekmm9kudh] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 0.8rem;
    padding-top: 0.5rem;
}
/* /Components/Application/Forms/DisabilityPresetNotes.razor.rz.scp.css */
.dpn[b-irbewe9eos] {
    display: flex;
    gap: .5rem;
    align-items: flex-start;
}

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

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

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

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

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

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

.dpn-dismiss:hover[b-irbewe9eos] {
    background: var(--neutral-fill-stealth-hover);
}
/* /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); }
/* /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-hint);
    margin-top: 4px;
}
/* /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/PensionBuyInForm.razor.rz.scp.css */
/* PensionBuyInForm — KPI cards + bar-per-year editor + selected-year panel. */

/* ── KPI result cards ────────────────────────────────────────────────
   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.
   Scoped to the KPI cards only — the shared OpenWefBalanceCard.CardStyle is left
   untouched (it is reused by the Interest-rate and Home-Ownership cards). */
.bi-kpi-card[b-tkf5cr3uuc] {
    min-height: 78px;
    justify-content: center;
}

/* ── 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 — constant-layout status card ─────────────────
   ALWAYS occupies its full space: the row set is fixed (values flip to «—»),
   the chip strip reserves its height, and the empty state hides content via
   visibility (NOT display) — 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] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 14px;
    /* Full available width: flex item in the parent's vertical FluentStack
       (align-items: start) — without a definite width it shrinks to fit. */
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--neutral-stroke-divider-rest, rgba(0, 0, 0, 0.1));
    border-radius: 8px;
    background: var(--neutral-layer-1, rgba(0, 0, 0, 0.015));
    overflow-anchor: none;
}

/* Empty state: keep the reserved space (placeholder), hide the content and
   show a centred, localized hint instead. The hint used to be CSS generated
   content (`::after { content: "..." }`) — invisible to both the resx
   pipeline and the German-literal lint, since neither scans .razor.css, so
   it shipped as a permanent English literal even in the de-CH UI. It is now
   a real element (`.bi-sel-empty-hint` in the markup) routed through T(),
   and therefore excluded from the blanket hide rule below. */
.bi-sel--empty > *:not(.bi-sel-empty-hint)[b-tkf5cr3uuc] {
    visibility: hidden;
}

.bi-sel--empty[b-tkf5cr3uuc] {
    border-style: dashed;
}

.bi-sel-empty-hint[b-tkf5cr3uuc] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 16px;
    font-size: 0.8rem;
    color: var(--neutral-foreground-hint, #717171);
}

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

/* Amount field + Max button side by side (button aligned to the field's baseline). */
.bi-sel-amount-row[b-tkf5cr3uuc] {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

/* Rebuy after divorce — always-rendered row under the amount row (spec 2026-10-02 §4.9). */
.bi-sel-rebuy-row[b-tkf5cr3uuc] {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

/* Status facts — fixed two-column grid (label | value), rows never disappear.
   Full column width so the value edge lines up with the breakdown table. */
.bi-facts-grid[b-tkf5cr3uuc] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2px 16px;
    font-size: 0.8rem;
    color: var(--neutral-foreground-rest, var(--w4l-chrome-axis-text));
}

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

/* Status chips — the strip reserves one chip line even when no chip shows,
   so a chip appearing mid-drag does not change the panel height. */
.bi-chips[b-tkf5cr3uuc] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 4px 6px;
    /* Two lines: with the rebuy chip up to five chips are possible; a third line would grow the panel mid-drag. */
    min-height: 52px;
}

.bi-chip[b-tkf5cr3uuc] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.72rem;
    line-height: 1.4;
    white-space: nowrap;
    cursor: help;
}

.bi-chip--warn[b-tkf5cr3uuc] {
    color: var(--w4l-warning, #b7791f);
    border: 1px solid var(--w4l-warning, #b7791f);
}

.bi-chip--info[b-tkf5cr3uuc] {
    color: var(--neutral-foreground-rest, var(--w4l-chrome-axis-text));
    border: 1px solid var(--w4l-info, #3b82f6);
}

/* Rule W (spec 2026-09-28 wef-parking-buyin-lock): "not booked (advance parked)" — a neutral
   factual state, deliberately NOT in the amber warn family (nothing was attempted wrong, the
   tool just can't book it right now). Fallback matches the sibling .bi-sel-empty-hint rule
   above (same token, applied before FluentDesignTheme lands). */
.bi-chip--muted[b-tkf5cr3uuc] {
    color: var(--neutral-foreground-hint, #717171);
    border: 1px solid var(--neutral-foreground-hint, #717171);
}

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

.bi-breakdown[b-tkf5cr3uuc] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
}

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

.bi-breakdown td:last-child[b-tkf5cr3uuc] {
    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;
}

.bi-split-row .bi-split-amount[b-tkf5cr3uuc] {
    margin-left: auto;
}

/* «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, #3b82f6); }
.bi-dot--deductible[b-tkf5cr3uuc] { background: var(--w4l-positive, #10b981); }
/* Same token as deductible: the bar editor draws a rebuy as deductible (green). */
.bi-dot--rebuy[b-tkf5cr3uuc] { background: var(--w4l-positive); }
.bi-dot--blocked[b-tkf5cr3uuc] { background: var(--w4l-warning, #b7791f); }
.bi-dot--none[b-tkf5cr3uuc] { background: transparent; }

/* Slice 2a E-3 — Herkunft der Einkäufe: one row, the details takes the width, the badges are siblings. */
.bi-origin[b-tkf5cr3uuc] {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    width: 100%;
}

.bi-origin-details[b-tkf5cr3uuc] {
    flex: 1 1 auto;
    min-width: 0;
}

.bi-origin-details > summary[b-tkf5cr3uuc] {
    cursor: pointer;
    font-size: 0.85rem;
    user-select: none;
}

.bi-origin-details[open] > summary[b-tkf5cr3uuc] {
    margin-bottom: 6px;
}

.bi-origin-usage[b-tkf5cr3uuc] {
    margin-top: 4px;
    font-size: 0.8rem;
    color: var(--neutral-foreground-hint);
}
/* /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/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/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-hint);
    margin-top: 4px;
}
/* /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; }

.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/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/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/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 */
/* /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);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

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

/* ── Gap segment (container rail runs through — no year-count label) ────────── */

.aps-gap[b-ztz9tixf0d] {
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: 0 10px;
    min-height: 22px;
}

/* 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;
    }
}
/* /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-empty[b-6846sjwozk] {
    padding: 0.45rem 0;
    color: var(--neutral-foreground-hint);
    font-size: var(--type-ramp-minus-1-font-size);
}

.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: none;
    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;
    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 live in ValueSlider's
   inline <style>, which is only present in the DOM when a ValueSlider happens to render on the
   same page — this control must not depend on that. 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;
    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%;
}

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

/* ── 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/ChecklistLibraryPanel.razor.rz.scp.css */
/* ChecklistLibraryPanel — browsable Swiss life-situation checklist library. */

.cl-lib[b-damzg3eqtz] { font-size: var(--type-ramp-base-font-size); }

.cl-search[b-damzg3eqtz] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.cl-search-input[b-damzg3eqtz] {
    flex: 1;
    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-size: var(--type-ramp-base-font-size);
}

.cl-count[b-damzg3eqtz] {
    font-size: var(--type-ramp-minus-1-font-size);
    color: var(--neutral-foreground-hint);
    white-space: nowrap;
}

.cl-notes[b-damzg3eqtz] {
    margin-bottom: 12px;
    padding: 6px 10px;
    border-radius: 6px;
    background: var(--neutral-fill-secondary-rest);
}

.cl-notes summary[b-damzg3eqtz],
.cl-theme summary[b-damzg3eqtz] {
    cursor: pointer;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    padding: 4px 0;
}

.cl-notes ul[b-damzg3eqtz] { margin: 6px 0 2px 0; padding-left: 18px; }
.cl-notes li[b-damzg3eqtz] { color: var(--neutral-foreground-hint); font-size: var(--type-ramp-minus-1-font-size); line-height: 1.4; }

.cl-theme[b-damzg3eqtz] {
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
    padding: 4px 0;
}

.cl-block[b-damzg3eqtz] { padding: 2px 0 6px 8px; }

.cl-block-title[b-damzg3eqtz] {
    font-weight: 600;
    font-size: var(--type-ramp-minus-1-font-size);
    color: var(--neutral-foreground-hint);
    margin: 4px 0 2px 0;
}

.cl-block ul[b-damzg3eqtz] { margin: 0; padding-left: 18px; list-style: disc; }

.cl-block li[b-damzg3eqtz] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    line-height: 1.4;
    padding: 2px 0;
}

.cl-item-text[b-damzg3eqtz] { flex: 1; color: var(--neutral-foreground-rest); }

.cl-add[b-damzg3eqtz] {
    flex-shrink: 0;
    border: 1px solid var(--accent-stroke-control-rest);
    background: transparent;
    color: var(--accent-foreground-rest);
    border-radius: 999px;
    font-size: var(--type-ramp-minus-2-font-size);
    font-weight: 600;
    padding: 1px 8px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.1s ease, background-color 0.1s ease;
}

.cl-block li:hover .cl-add[b-damzg3eqtz] { opacity: 1; }

.cl-add:hover[b-damzg3eqtz] { background: color-mix(in srgb, var(--accent-fill-rest) 14%, transparent); }

/* ── Theme opt-in (summary row) ──────────────────────────────────────────────
   A theme has three mutually exclusive states: already in the plan, addable for
   a chosen year, or covered by the model. The summary is a flex row so the
   controls sit right of the title without pushing the disclosure triangle. */
.cl-theme summary[b-damzg3eqtz] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cl-theme-title[b-damzg3eqtz] {
    flex: 1;
    min-width: 0;
}

.cl-theme-state[b-damzg3eqtz] {
    flex-shrink: 0;
    font-size: var(--type-ramp-minus-2-font-size);
    font-weight: 400;
    color: var(--neutral-foreground-hint);
    white-space: nowrap;
}

.cl-theme-state--on[b-damzg3eqtz] {
    color: var(--accent-foreground-rest);
    font-weight: 600;
}

.cl-theme-add[b-damzg3eqtz] {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.cl-theme-year[b-damzg3eqtz] {
    font-size: var(--type-ramp-minus-2-font-size);
    padding: 1px 4px;
    height: auto;
}

.cl-theme-remove[b-damzg3eqtz] {
    flex-shrink: 0;
    border: 1px solid var(--neutral-stroke-rest);
    background: transparent;
    color: var(--neutral-foreground-hint);
    border-radius: 999px;
    font-size: var(--type-ramp-minus-2-font-size);
    padding: 1px 8px;
    cursor: pointer;
}

.cl-theme-remove:hover[b-damzg3eqtz] {
    border-color: var(--neutral-stroke-strong-rest);
    color: var(--neutral-foreground-rest);
}
/* /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/EmployerBenefitsDigest.razor.rz.scp.css */
.eb-digest-title[b-1mgu8zo31y] {
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 0.4rem;
}
.eb-digest-empty[b-1mgu8zo31y] {
    font-size: 0.85rem;
    color: var(--neutral-foreground-hint);
}
.eb-digest ul[b-1mgu8zo31y] {
    list-style: none;
    margin: 0;
    padding: 0;
}
.eb-digest li[b-1mgu8zo31y] {
    padding: 0.6rem 0;
    border-top: 1px solid var(--neutral-stroke-divider-rest);
}
.eb-digest-head[b-1mgu8zo31y] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem 0.8rem;
    margin-bottom: 0.35rem;
}
.eb-digest-name[b-1mgu8zo31y] {
    font-weight: 600;
    font-size: 0.85rem;
}
.eb-digest-badge[b-1mgu8zo31y] {
    font-size: 0.72rem;
    padding: 0 0.45rem;
    border-radius: calc(var(--control-corner-radius) * 1px);
    background: var(--neutral-fill-secondary-rest);
    color: var(--neutral-foreground-rest);
}
.eb-digest-edit[b-1mgu8zo31y] {
    margin-left: auto;
    font-size: 0.8rem;
    color: var(--accent-foreground-rest);
}
.eb-digest dl[b-1mgu8zo31y] {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.2rem 1.2rem;
    margin: 0;
    font-size: 0.85rem;
}
.eb-digest dt[b-1mgu8zo31y] {
    color: var(--neutral-foreground-hint);
}
.eb-digest dd[b-1mgu8zo31y] {
    margin: 0;
    color: var(--neutral-foreground-rest);
}
.eb-digest-status[b-1mgu8zo31y] {
    margin-top: 0.3rem;
    font-size: 0.75rem;
    color: var(--neutral-foreground-hint);
}
.eb-digest-status--in[b-1mgu8zo31y] {
    color: var(--neutral-foreground-rest);
}
.eb-digest-info[b-1mgu8zo31y] { font-size: 0.8rem; color: var(--neutral-foreground-hint); margin-top: 0.2rem; }
.eb-digest li[data-feeds="false"] .eb-digest-name[b-1mgu8zo31y] { color: var(--neutral-foreground-hint); }
@media (max-width: 639px) {
    .eb-digest dl[b-1mgu8zo31y] {
        grid-template-columns: 1fr;
        gap: 0.1rem;
    }
    .eb-digest dd[b-1mgu8zo31y] {
        margin-bottom: 0.3rem;
    }
    .eb-digest-edit[b-1mgu8zo31y] {
        margin-left: 0;
    }
}
/* /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/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/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/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). 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. */

.hf-stepper[b-2njqoad3xc] {
    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: 60px;
    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: 60px;
    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);
}

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

/* 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/PensionBuyInBarEditor.razor.rz.scp.css */
/* PensionBuyInBarEditor — pure HTML/SVG bar-per-year editor (FAST-leak-free). */

.bie-host[b-bcnxse7l00] {
    /* 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: grössere unsichtbare Hit-Circles (CSS-r überstimmt das r=12-Attribut)
   + Grip in Hover-Grösse, da es kein Hover gibt (Selected bleibt via stroke-width erkennbar). */
@media (pointer: coarse) {
    .bie-host[b-bcnxse7l00]  .bie-handle circle:not(.bie-grip) { r: 16px; }
    .bie-host[b-bcnxse7l00]  .bie-grip { r: 6.5px; }
}

/* Open-WEF-balance step line (end-of-year levels, informational, aria-hidden). */
.bie-host[b-bcnxse7l00]  .bie-wef-line {
    stroke: var(--w4l-info, #3b82f6);
    stroke-width: 1.5;
    stroke-dasharray: 4 3;
    fill: none;
}
/* /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/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/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); }
}
/* /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/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/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(--accent-foreground-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/Layout/UsageErrorBoundary.razor.rz.scp.css */
/* Inline replacement for the page content after a caught circuit exception. Kept deliberately
   plain — no FluentUI component is created on this path (Docs/BlazorFastLeaks.md). */
.w4l-error-boundary[b-pmu31f31of] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin: 1rem;
    padding: 1rem 1.25rem;
    border: 1px solid color-mix(in srgb, var(--error, #d13438) 45%, var(--neutral-layer-floating));
    border-radius: calc(var(--control-corner-radius) * 1px);
    background-color: color-mix(in srgb, var(--error, #d13438) 12%, var(--neutral-layer-floating));
    color: var(--neutral-foreground-rest);
}

.w4l-error-boundary-reload[b-pmu31f31of] {
    color: var(--error, #d13438);
    font-weight: 600;
    text-decoration: underline;
}
/* /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/CategorySection.razor.rz.scp.css */
.cat-section + .cat-section[b-ggbvbr5mzf] {
    margin-top: 18px;
}

.cat-section__title[b-ggbvbr5mzf] {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--neutral-foreground-hint);
    margin: 0 0 8px 2px;
}

.cat-section__grid[b-ggbvbr5mzf] {
    display: grid;
    /* auto-fill + minmax keeps tiles squarish and bounded: more columns as the card widens,
       so a square never balloons on a wide screen. */
    grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
    gap: 8px;
}

/* Wizard areas mask: pills + deutsche Labels brauchen breitere Kacheln (Docs/Wizard.md §4). */
.cat-section__grid--wide[b-ggbvbr5mzf] {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}

/* Touch/coarse pointer: breitere Kacheln + mehr Gap gegen Fehl-Taps (Desktop-Dichte bleibt). */
@media (pointer: coarse) {
    .cat-section__grid[b-ggbvbr5mzf] {
        grid-template-columns: repeat(auto-fill, minmax(124px, 1fr));
        gap: 12px;
    }
}

/* Mobile: einspaltige Liste statt Grid (Touch-Targets, lange Labels). */
@media (max-width: 479px) {
    .cat-section__grid--wide[b-ggbvbr5mzf] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Shared/CategoryTile.razor.rz.scp.css */
.cat-tile-wrap[b-1b00zgp39q] {
    position: relative;
    width: 100%;
}

.cat-tile[b-1b00zgp39q] {
    position: relative;
    --cat-color: var(--w4l-category-default);
    /* Icon colour, state-driven. Off = muted/disabled; overridden on hover + when selected. */
    --cat-icon: var(--neutral-foreground-hint);
    width: 100%;
    /* Square tiles: height follows the grid column width instead of a fixed min-height. */
    aspect-ratio: 1 / 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 8px 5px;
    border-radius: 10px;
    border: 1.5px solid color-mix(in srgb, var(--neutral-stroke-rest) 60%, transparent);
    background: transparent;
    color: var(--neutral-foreground-rest);
    cursor: default;
    font: inherit;
    transition: background-color .15s ease, border-color .15s ease;
}

/* Hover (any state): icons + wash take the tile's own area hue (not accent), keeping the
   soft transparent look. */
.cat-tile:hover[b-1b00zgp39q] {
    --cat-icon: var(--cat-color);
    border-color: color-mix(in srgb, var(--cat-color) 55%, transparent);
    background: color-mix(in srgb, var(--cat-color) 8%, transparent);
}

.cat-tile--off[b-1b00zgp39q] {
    cursor: pointer;
}

/* Inactive (togglable, not gated): dashed border + muted label + a persistent "+" glyph so the
   "tap to add" affordance reads without hover — and stays visually distinct from a gated tile
   (which keeps a solid border + dim + PRO badge). */
.cat-tile--off:not(.cat-tile--gated)[b-1b00zgp39q] {
    border-style: dashed;
    border-color: color-mix(in srgb, var(--neutral-stroke-rest) 45%, transparent);
}

.cat-tile--off:not(.cat-tile--gated) .cat-tile__label[b-1b00zgp39q] {
    color: var(--neutral-foreground-hint);
}

.cat-tile--off:not(.cat-tile--gated)[b-1b00zgp39q]::after {
    content: "+";
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 16px;
    line-height: 1;
    font-weight: 600;
    color: var(--neutral-foreground-hint);
    pointer-events: none;
}

/* Navigation-only tiles have a clickable body (base .cat-tile is cursor:default). */
.cat-tile--nav[b-1b00zgp39q] {
    cursor: pointer;
}

.cat-tile:focus-visible[b-1b00zgp39q] {
    outline: 2px solid var(--cat-color);
    outline-offset: 2px;
}

/* Selected: hover-style (not solid-filled) — area-coloured icon + soft transparent area wash.
   The :hover variant keeps the area colour so selected tiles don't flip to accent on hover. */
.cat-tile--on[b-1b00zgp39q],
.cat-tile--on:hover[b-1b00zgp39q] {
    --cat-icon: var(--cat-color);
    border-color: color-mix(in srgb, var(--cat-color) 55%, transparent);
    background: color-mix(in srgb, var(--cat-color) 12%, transparent);
    color: var(--neutral-foreground-rest);
}

.cat-tile--gated[b-1b00zgp39q] {
    opacity: .55;
    cursor: not-allowed;
}

.cat-tile__label[b-1b00zgp39q] {
    /* 13px + the 112px grid minimum (CategorySection) are sized together: the longest single-word
       German labels (Wohneigentum, Renditeobjekte) must fit the tile's inner width. */
    font-size: 13px;
    font-weight: 600;
    line-height: 1.15;
    text-align: center;
    hyphens: auto;
    /* Square + narrow tiles can't fit long labels on one line — clamp to 2 lines. */
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Wizard mode (Docs/Wizard.md §4): pills below the body, hint line, ✨ badge ── */

.cat-tile--wizard[b-1b00zgp39q] {
    /* Pills sit below the button inside the wrap — no square constraint. */
    aspect-ratio: auto;
    min-height: 84px;
}

.cat-tile--interactive[b-1b00zgp39q] {
    cursor: pointer;
}

.cat-tile__hint[b-1b00zgp39q] {
    font-size: 11px;
    font-weight: 400;
    line-height: 1.2;
    color: var(--neutral-foreground-hint);
    text-align: center;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cat-tile__suggest[b-1b00zgp39q] {
    position: absolute;
    top: 6px;
    left: 6px;
    z-index: 1;
    font-size: 13px;
    line-height: 1;
    pointer-events: auto;
}


.cat-tile__feature[b-1b00zgp39q],
.cat-tile__close[b-1b00zgp39q] {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 1;
}
/* /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;
}

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