/* ============================================================================
   utilities.css — geteilte, wiederverwendbare Bausteine
   ----------------------------------------------------------------------------
   Klassen, die von mehreren Komponenten benutzt werden und deshalb NICHT in
   eine scoped .razor.css gehören. Prefix: `.w4l-`.

   Aktuell:
   - Geteilte Toggle-Pill-Bar (.w4l-pill*) — genutzt von OwnerPillBar,
     AssetOverviewPillBar, IncomeOverviewPillBar, ActionPlanFilterBar.
   ============================================================================ */

/* ── Objekt-Level-Deep-Link Flash ──────────────────────────────────────────
   Kurzes Hervorheben eines per ?focus=<guid> angesprungenen Objekts (id="obj-<guid>").
   Global, weil das Ziel auf beliebigen Seiten liegt (Mirror von .ap-group-flash). */
.w4l-nav-flash { animation: w4lNavFlash 1.6s ease; }
@keyframes w4lNavFlash {
    0% { box-shadow: 0 0 0 2px var(--accent-fill-rest); }
    100% { box-shadow: 0 0 0 2px transparent; }
}

/* ── Toggle-Pill-Bar ───────────────────────────────────────────────────────
   Farbcodierte An/Aus-Pills. Die Identitäts-/Kategoriefarbe wird pro Pill inline
   als `--pill-color` gesetzt. Komponenten-spezifische Extras (Combine-/Reset-
   Buttons, Spacer, nicht-schrumpfender Container) bleiben in der jeweiligen
   scoped .razor.css. */
.w4l-pillbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.w4l-pill {
    --pill-color: var(--neutral-stroke-rest);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 11px;
    border-radius: 999px;
    border: 1.5px solid var(--pill-color);
    background: transparent;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
    transition: background-color 0.15s ease, opacity 0.15s ease;
}

/* Aktiv — gefüllter Tint der Identitätsfarbe. */
.w4l-pill--on {
    background: color-mix(in srgb, var(--pill-color) 18%, transparent);
    color: var(--neutral-foreground-rest);
}

/* Inaktiv — gedämpfter Umriss. */
.w4l-pill--off {
    color: color-mix(in srgb, var(--neutral-foreground-rest) 78%, var(--neutral-foreground-hint));
    opacity: 0.72;
}

.w4l-pill:hover {
    background: color-mix(in srgb, var(--pill-color) 28%, transparent);
}

.w4l-pill-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--pill-color);
    flex-shrink: 0;
}

/* Hohler Punkt, wenn ausgeblendet. */
.w4l-pill--off .w4l-pill-dot {
    background: transparent;
    border: 1.5px solid var(--pill-color);
}

.w4l-pill-divider {
    width: 1px;
    align-self: stretch;
    margin: 2px 4px;
    background: var(--neutral-stroke-divider-rest);
}

/* ── Admin-Tabellen ────────────────────────────────────────────────────────
   Schlichte HTML-Tabellen auf den internen Admin-Seiten (NewsletterAdmin,
   UserManager). Ersetzt die früher pro Zelle wiederholten Inline-Styles. Die
   Rahmenfarben sind theme-aware via FluentUI-Tokens (die alten #ddd/#eee waren
   nicht dark-mode-tauglich). */
.w4l-table-scroll {
    overflow-x: auto;
}

.w4l-admin-table {
    width: 100%;
    border-collapse: collapse;
}

.w4l-admin-table thead tr {
    border-bottom: 1px solid var(--neutral-stroke-rest);
}

.w4l-admin-table tbody tr {
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
}

.w4l-admin-table th {
    text-align: left;
    padding: 8px;
}

.w4l-admin-table td {
    padding: 8px;
}

/* Zellen, die reine Zahlen/Zeitstempel tragen — gleiche Ziffernbreite, damit
   Spalten untereinander fluchten. */
.w4l-admin-table .num {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Filterleiste über einer Admin-Liste: Suchfeld + Selects + Zähler. Sitzt direkt
   unter dem sticky IconTitle-Header, deshalb kein eigener Rahmen — nur Abstand. */
.w4l-admin-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 0.75rem;
}

.w4l-admin-filters .grow {
    flex: 1 1 220px;
    min-width: 180px;
}

.w4l-admin-filters .w4l-select {
    width: auto;
    min-width: 150px;
}

/* Two-column key/value list for detail cards. */
.w4l-kv {
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: 16px;
    row-gap: 6px;
    margin: 0;
}
.w4l-kv dt { color: var(--neutral-foreground-hint); font-size: 12px; }
.w4l-kv dd { margin: 0; }

.w4l-admin-count {
    font-size: 12px;
    color: var(--neutral-foreground-hint);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Status-Pille in Admin-Tabellen. Ersetzt den früher pro Seite kopierten
   Inline-<style>-Block (AdvisorApplications). Farben ausschliesslich über
   Tokens — kein Hex, damit Dark Mode trägt. */
.w4l-admin-status {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    white-space: nowrap;
    background: var(--neutral-fill-secondary-rest);
    color: var(--neutral-foreground-rest);
}

.w4l-admin-status.is-positive {
    background: color-mix(in srgb, var(--w4l-positive) 18%, transparent);
    color: var(--w4l-positive);
}

.w4l-admin-status.is-pending {
    background: color-mix(in srgb, var(--w4l-warning) 18%, transparent);
    color: var(--w4l-warning);
}

.w4l-admin-status.is-negative {
    background: color-mix(in srgb, var(--w4l-negative) 18%, transparent);
    color: var(--w4l-negative);
}

/* Aktionszelle: Buttons ohne Umbruch, rechtsbündig am Zeilenende. */
.w4l-admin-actions {
    display: flex;
    gap: 4px;
    justify-content: flex-end;
    white-space: nowrap;
}

/* Textlink in einer Aktionszelle — optisch auf der Höhe der XS-Buttons daneben. */
.w4l-admin-link {
    display: inline-flex;
    align-items: center;
    padding: 0 6px;
    font-size: 12px;
    color: var(--accent-fill-rest);
    text-decoration: none;
    white-space: nowrap;
}

.w4l-admin-link:hover {
    text-decoration: underline;
}

/* Pager unter einer Liste. */
.w4l-admin-pager {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 0.75rem;
}

/* Gestapelte Kleinliste in einer Zelle (Qualifikationen, Dokument-Links). */
.w4l-admin-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.85rem;
}

.w4l-admin-list a {
    color: var(--accent-fill-rest);
    text-decoration: none;
}

.w4l-admin-list a:hover {
    text-decoration: underline;
}

/* Freitext-Notiz in einer Zelle (Bewerber-Notiz, Review-Begründung). */
.w4l-admin-note {
    margin-top: 6px;
    font-size: 0.8rem;
    color: var(--neutral-foreground-hint);
    max-width: 320px;
    white-space: pre-wrap;
}

/* Zweitzeile unter einem Primärwert in einer Zelle (E-Mail unter dem Namen). */
.w4l-admin-sub {
    font-size: 0.82rem;
    color: var(--neutral-foreground-hint);
}

/* Bereichs-Kacheln der /Admin-Übersicht. Native <button>, kein FAST-Element —
   die Übersicht wird bei jedem Wechsel in den Admin-Modus neu gemountet. */
.w4l-admin-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 10px;
}

.w4l-admin-tile {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 14px 16px;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 6px;
    background: var(--neutral-layer-1);
    color: var(--neutral-foreground-rest);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.w4l-admin-tile:hover {
    background: var(--neutral-fill-stealth-hover);
    border-color: var(--neutral-stroke-hover);
}

.w4l-admin-tile-title {
    font-weight: 600;
}

.w4l-admin-tile-meta {
    font-size: 12px;
    color: var(--neutral-foreground-hint);
    font-variant-numeric: tabular-nums;
}

/* Empty-State einer Admin-Liste (trägt einen Zustand, kein Hilfstext). */
.w4l-admin-empty {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--neutral-foreground-hint);
}

/* ── Native <select> — Fluent-styled Ersatz (vermeidet fluent-option FAST-Leaks)
   + schlichte Kennzahl-Tabelle. Verschoben aus components.css. ─────────────── */
.w4l-select-label {
    display: block;
    font-size: var(--type-ramp-minus-1-font-size, 12px);
    color: var(--neutral-foreground-rest, #242424);
    margin-bottom: 4px;
}

/* ── Dashed "ghost add" button — the generic add-row affordance (Sharing tree,
   blackout list, …). Was previously .fm-tree-add, defined only in Sharing's page
   <style>, so components rendering it outside /Sharing fell back to browser
   default chrome. ─────────────────────────────────────────────────────────────── */
.w4l-add-dashed {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    padding: 5px 8px;
    border-radius: 6px;
    border: 1px dashed var(--neutral-stroke-rest);
    background: transparent;
    color: var(--neutral-foreground-hint);
    font: inherit;
    font-size: 0.8rem;
    cursor: pointer;
}

.w4l-add-dashed:hover {
    border-color: var(--accent-fill-rest);
    color: var(--neutral-foreground-rest);
}

.w4l-neb-table {
    /* Volle Panel-Breite: die Tabelle führt die NEB-Karte an, die Kacheln fassen sie darunter
       zusammen — eine auf 520px geklemmte Tabelle liess das Panel rechts leer wirken. */
    width: 100%;
    border-collapse: collapse;
    font-size: var(--type-ramp-base-font-size, 14px);
}

.w4l-neb-table th,
.w4l-neb-table td {
    padding: 4px 8px;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest, #e0e0e0);
}

.w4l-neb-table tfoot td {
    border-bottom: none;
    border-top: 2px solid var(--neutral-stroke-rest, #d1d1d1);
}

.w4l-select {
    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;
    cursor: pointer;
}

.w4l-select:hover {
    border-color: var(--neutral-stroke-hover, #a1a1a1);
}

.w4l-select:focus {
    border-color: var(--accent-fill-rest, #0078d4);
    box-shadow: 0 0 0 1px var(--accent-fill-rest, #0078d4);
}

/* ── Generisches 2-Spalten-Seiten-Layout (Contact, Account/Forgot/Reset/Confirm…)
   Verschoben aus components.css (inkl. der gekoppelten Media-Overrides). ────── */
.two-col-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 60px;
    max-width: 1100px;
    width: 100%;
    margin: 0 auto;
    align-items: start;
}

.hint-box {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 1.25rem;
    background: var(--neutral-layer-2);
    border-radius: 12px;
    border-left: 3px solid var(--accent-fill-rest);
    margin-bottom: 1rem;
}

/* Two fields side by side (e.g. Name+Email, Password+Confirm) */
.form-row-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* Tablet: context on top, form below */
@media (max-width: 899px) {
    .two-col-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .two-col-context {
        max-width: 600px;
    }
}

/* Mobile: side-by-side fields stacked again */
@media (max-width: 639px) {
    .form-row-2col {
        grid-template-columns: 1fr;
    }
}

/* ── Allocation board (shared: divorce custody grid, asset-takeover board on
      Relationship AND LastWill). Extracted from DivorceCustodyGrid.razor so the
      board renders on any page. Column accent via --col-accent custom property. ── */
.w4l-alloc-board {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
    align-items: start;
}

.w4l-alloc-board--two {
    grid-template-columns: 1fr 1fr;
}

.w4l-alloc-col {
    --col-accent: var(--neutral-stroke-strong-rest);
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    border-radius: 8px;
    /* Subtle identity tint: keep-columns lean toward their person's color. */
    background: color-mix(in srgb, var(--col-accent) 6%, var(--neutral-layer-2));
    border-top: 3px solid var(--col-accent);
    min-height: 64px;
}

.w4l-alloc-col--tray {
    background: var(--neutral-layer-1);
    border-top-style: dashed;
}

.w4l-alloc-col-head {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    /* Neutraler Text — die Identität trägt der Akzent (Top-Border/Tint), nicht die Schrift. */
    color: var(--neutral-foreground-rest);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.w4l-alloc-col-head .w4l-alloc-col-count {
    opacity: 0.6;
    font-weight: 600;
}

.w4l-alloc-col-empty {
    font-size: 0.8rem;
    opacity: 0.45;
    padding: 6px 0;
}

.w4l-alloc-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 10px;
    border-radius: 6px;
    background: color-mix(in srgb, var(--col-accent) 4%, var(--neutral-fill-rest));
    border: 1px solid var(--neutral-stroke-rest);
    border-left: 3px solid var(--col-accent);
}

.w4l-alloc-card-title {
    font-weight: 600;
    font-size: 0.92rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.w4l-alloc-card-facts {
    font-size: 0.8rem;
    opacity: 0.7;
    font-variant-numeric: tabular-nums;
}

.w4l-alloc-card-hint {
    font-size: 0.75rem;
    opacity: 0.6;
    font-style: italic;
}


.w4l-alloc-col-foot {
    margin-top: 2px;
    padding-top: 6px;
    border-top: 1px dashed var(--neutral-stroke-divider-rest);
    font-size: 0.78rem;
    font-weight: 600;
    opacity: 0.75;
    font-variant-numeric: tabular-nums;
}

/* Ergebnis-Streifen unter dem Board (Buy-out / Erben-Ausgleich), drei Zustände:
   neutral (Zahlung), balanced, .w4l-alloc-summary--warn (Kinder würden schulden). */
.w4l-alloc-summary {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding: 8px 12px;
    border-radius: 6px;
    background: var(--neutral-layer-2);
    font-size: 0.82rem;
    font-variant-numeric: tabular-nums;
}

.w4l-alloc-summary--warn {
    border-left: 3px solid var(--w4l-warning);
    background: color-mix(in srgb, var(--w4l-warning) 8%, var(--neutral-layer-2));
}

@media (max-width: 639px) {
    .w4l-alloc-board,
    .w4l-alloc-board--two { grid-template-columns: 1fr; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   Divorce settlement — shared, page-level styling for the three topic sections
   (Vermögen / Vorsorge / Unterhalt) and their result idioms. Consolidated here
   (formerly inline <style> in MatrimonialSettlementSummaryCard) so every split
   settlement component + DivorceSupportSummary shares ONE definition, independent
   of which component renders. Colours are tokens only (Docs/Css.md).
   ───────────────────────────────────────────────────────────────────────────── */

/* Directional money flows render via the shared SettlementFlow component
   (P1 fixed left, P2 fixed right — scoped CSS in SettlementFlow.razor.css). */

/* Parallel result-row treatment, shared by all divorce settlement results. */
.w4l-divorce-result {
    border-top: 1px solid var(--neutral-stroke-rest);
    margin-top: 16px;
    padding-top: 14px;
}
.w4l-divorce-result--first {
    border-top: none;
    margin-top: 0;
    padding-top: 0;
}
.w4l-divorce-result-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
}
.w4l-divorce-result-label {
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    opacity: 0.7;
}
.w4l-divorce-result-cite {
    font-size: 0.75rem;
    opacity: 0.55;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.w4l-divorce-result-sub {
    font-weight: 600;
    font-size: 0.95rem;
    font-variant-numeric: tabular-nums;
    margin: 2px 0;
}
.w4l-divorce-result-sub .w4l-divorce-result-sublabel {
    font-weight: 400;
    opacity: 0.7;
    margin-right: 6px;
}
.w4l-divorce-result-foot {
    opacity: 0.6;
    font-size: 0.8rem;
    margin-top: 6px;
}

/* Small chart caption inside a divorce result card (labels the chart below it). */
.w4l-divorce-result-sublabel-line {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    opacity: 0.55;
    margin-top: 14px;
}

/* ==========================================================================
   Side-panel dock chrome (SidePanelHost + BotPanel / ChatDock / HelpCenterPanel)
   Ersetzt FluentDialogHeader/FluentDialogBody der früheren DialogService-Panels:
   fixer Header oben, scrollender Body darunter. Der Host (.w4l-sidepanel,
   scoped in SidePanelHost.razor.css) ist eine fixe Flex-Spalte rechts.
   ========================================================================== */
.w4l-dock-header {
    flex: 0 0 auto;
    padding: 12px 16px 8px 16px;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
}

.w4l-dock-body {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 8px 16px 12px 16px;
    box-sizing: border-box;
    overflow-y: auto;
}

/* ==========================================================================
   Arbeitsbereich-Struktur (Pilot: /Income)
   --------------------------------------------------------------------------
   Zwei Ebenen statt überall gleicher Karten:

   .w4l-section     — gliedert NUR durch Überschrift + Weissraum. Keine Fläche,
                      kein Rand, kein Radius: liegt direkt auf dem Seitengrund.
   .w4l-edit-panel  — das kontextuelle Panel zum selektierten Objekt. Leicht gefüllte,
                      inset liegende Fläche (Radius + Padding), die es vom Seitengrund
                      abhebt — dieselbe Farbe wie die Folder-Spalten auf /Sharing.

   Bewusst NICHT gemacht: ein farbiger Herkunftsbalken (Personenfarbe) am Panel.
   Waagrecht las er sich nur als weiterer Divider, senkrecht hätte er eine zusätzliche
   vertikale Linie in einen Bereich gebracht, der bereits von den Regionslinien
   (Nav/Preview) strukturiert wird — verworfen 2026-07-14.
   ========================================================================== */

.w4l-section {
    display: block;
    /* .w4l-page-body setzt gap:10px — zusammen ergibt das den Sektionsabstand,
       der die weggefallenen Kartenränder als Gliederung ersetzt. */
    margin-bottom: 1.25rem;
}

/* Das Panel ist eine leicht gefüllte, INSET liegende Fläche (Radius + rundum-Padding),
   die das selektierte Objekt vom Seitengrund abhebt. Hintergrundfarbe = dieselbe wie
   die Folder-Spalten auf /Sharing (--fm-panel-bg), theme-neutral: --neutral-fill-
   secondary flippt selbst mit Light/Dark, deshalb kein prefers-color-scheme nötig.

   Historie: früher ein rahmenloses BAND mit zwei 2px-Begrenzern (keine Fläche). Die
   Fläche liest sich ruhiger und trennt zwei gestapelte Panels (z.B. AutoBudget) besser
   als die reine Linie. Bewusst KEIN Schatten (als „schlecht" verworfen 2026-07-15) und
   KEINE volle Breite: die Fläche liegt durch das rundum-Padding im Inhaltsfluss, endet
   also weit vor der scrollenden Preview-Kante — die alte Scrollbar-Clipping-Sorge (eine
   randlose Vollfüllung bricht ein paar Pixel vor der Kante ab) trifft die inset Fläche
   nicht. Verschachtelung wäre das einzige Risiko (Fläche in Fläche), kommt aber nicht
   vor: kein Panel-Formular bettet ein anderes ein. */
.w4l-edit-panel {
    display: block;
    box-sizing: border-box;
    background: color-mix(in srgb, var(--neutral-fill-secondary-rest) 50%, transparent);
    border-radius: 8px;
    padding: 1.25rem 1.25rem 1.5rem 1.25rem;
}

/* Verschachteltes Edit-Panel (Panel im Panel — z. B. Tranche im Home-Panel, Domizil-Segment im
   Residence-Panel): die EINE erlaubte Verschachtelungsebene bekommt statt einer zweiten,
   dunkler gestapelten Füllung den BASIS-Seitengrund — das Inset hebt sich HELL vom gefüllten
   Eltern-Panel ab (Sichttest-Entscheid 2026-07-16, Tranche/Mortgage in HomeForm; als Regel
   verallgemeinert 2026-07-17). Zusatzklasse ZU .w4l-edit-panel, überschreibt nur die Füllung. */
.w4l-edit-panel-nested {
    background: var(--fill-color);
}

/* Wiederholte Listen-Zeile INNERHALB des Panels (Hypotheken, wertvermehrende
   Investitionen, Tranchen …). Früher je eine <FluentCard Style="padding:.5rem">.

   Auch hier gilt die Liniensprache: eine Zeile ist keine Karte. Gleichrangige,
   gestapelte Peers trennt eine Haarlinie ZWISCHEN ihnen (`+`-Selektor) — nicht ein
   Rahmen UM jede. Ein Kasten pro Zeile hätte in einem Panel, das selbst schon von
   zwei Begrenzern gehalten wird, ein drittes Rahmensystem eingeführt.

   Nebeneffekt: <fluent-card> im @foreach ist das dokumentierte Leak-Muster
   (eine $fastController-Retention PRO ZEILE, Docs/BlazorFastLeaks.md).

   Die Zeilen müssen dafür ADJAZENTE Geschwister sein — deshalb der eigene
   .w4l-rows-Container statt direkt im FluentStack (dessen gap sonst zusätzlich
   zwischen Linie und Inhalt stünde und die Trennlinie freistellen würde). */
.w4l-rows {
    display: block;
    width: 100%;
}

.w4l-row {
    display: block;
    box-sizing: border-box;
    padding: 0.5rem 0;
}

.w4l-row + .w4l-row {
    border-top: 1px solid var(--neutral-stroke-rest);
}

/* ── KPI-Kacheln ──────────────────────────────────────────────────────────────
   Reine ANZEIGE-Werte innerhalb eines Panels — Docs/DesignBacklog.md §2: berechnete
   Grössen werden als Kachel gerendert, NICHT als disabled Input-Feld (ein graues
   Eingabefeld lädt zum Tippen ein und verspricht Editierbarkeit, die es nicht gibt).

   Muster stammt aus <LiabilitiesKpiRow>; es war danach dreimal als scoped CSS kopiert
   (.lkr-*, .dus-*, .hf-afford-*). Hier einmal global, weil Blazor-Scoped-CSS sich nicht
   teilen lässt und die Kopien visuell auseinanderzulaufen begannen. Neue Kachel-Reihen
   verwenden diese Klassen; die verbleibenden Altkopien (.lkr-*, .hf-afford-*) ziehen
   separat nach. */
.w4l-kpi {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-content: flex-start;
}

.w4l-kpi-card {
    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);
}

/* Für Kacheln mit langem Wert (z. B. eine Periode «03.2036 – 12.2037»). */
.w4l-kpi-card--wide {
    min-width: 175px;
}

.w4l-kpi-label {
    font-size: 11px;
    color: var(--neutral-foreground-hint);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    text-align: center;
}

.w4l-kpi-value {
    font-size: 18px;
    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;
}

.w4l-kpi-sub {
    font-size: 0.7rem;
    color: var(--neutral-foreground-hint);
    text-align: center;
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
}

/* Kleine Zwischenüberschrift, die den Eingabe- vom Resultatteil eines Panels trennt.
   Trägt den Trenner selbst (border-top) — kein zusätzliches Divider-Element nötig. */
.w4l-kpi-caption {
    border-top: 1px solid var(--neutral-stroke-divider-rest);
    padding-top: 0.75rem;
    margin-bottom: 0.5rem;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--neutral-foreground-hint);
}

/* ── Header-Aktions-Icons der Panel-Kopfzeile ─────────────────────────────────
   Gehört zu <PanelHeaderActions> (Components/Application/Shared) — die Komponente
   ist die einzige Stelle, die diese Klassen setzt; siehe Docs/DesignBacklog.md §3.

   Reihenfolge: [Toggles] [Extras] [Duplicate] [Delete] │ Haarlinie │ [X].
   Die Haarlinie trennt die Objekt-Aktionen von der Panel-Aktion (und schafft
   Abstand zwischen Delete und X gegen Fehlklicks).

   ≤639px (sm): die Objekt-Aktionen wandern ins Three-Dot-Menü, das X bleibt
   sichtbar. Umschalten per display:none statt @if — FAST-Komponenten dürfen nicht
   branch-getoggelt werden (Docs/BlazorFastLeaks.md). */
.w4l-header-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.w4l-header-actions__desktop {
    display: flex;
    align-items: center;
    gap: 4px;
}

.w4l-header-actions__sep {
    width: 1px;
    height: 20px;
    background: var(--neutral-stroke-divider-rest);
    margin: 0 4px;
}

.w4l-header-actions .w4l-header-actions__mobile {
    display: none;
}

@media (max-width: 639px) {
    .w4l-header-actions__desktop { display: none; }
    .w4l-header-actions .w4l-header-actions__mobile { display: inline-flex; }
}

/* Delete ist ein Einzelklick (der Bestätigungsdialog des Hosts IST der Confirm-Schritt) —
   Rot ist nur ein Hover-Hinweis, kein Zustand, den ein Klick umschaltet. */
.w4l-header-actions__delete:hover svg,
.w4l-header-actions__delete:focus-visible svg {
    color: var(--error, #ef4444);
    fill: var(--error, #ef4444);
}

/* ── Vertikaler Formular-Stack ────────────────────────────────────────────────
   Container für gestapelte Formularblöcke INNERHALB einer (Sub-)Sektion: der
   Abstand kommt deklarativ aus `gap` statt aus <VerticalSpacer>-Ketten zwischen
   den Blöcken. Vorteile: der Rhythmus steht an EINER Stelle, und gap kollabiert
   nicht unter flex-shrink (die Spacer-Falle, siehe `.w4l-page-body > *` in
   components.css). Migration opportunistisch beim nächsten Anfassen einer Seite —
   kein Big-Bang (Docs/Css.md «Vertikale Abstände»).
   Abstände an STRUKTURGRENZEN (Divider-Titel, Section, Edit-Panel) gehören
   weiterhin der Struktur selbst — ein .w4l-stack endet an ihnen. */
.w4l-stack {
    display: flex;
    flex-direction: column;
    gap: var(--w4l-space-s, 16px);
    width: 100%;
}

.w4l-stack--tight {
    gap: var(--w4l-space-xs, 8px);
}

/* ── Titel-Spalte (IconTitle + IconTitleEdit) ─────────────────────────────────
   Titelzeile plus optionale Meta-Zeile darunter. Das ist der Ersatz für den
   verworfenen Farbbalken: die Zugehörigkeit des Panels wird über INHALT getragen
   (der Zeitraum spiegelt den selektierten Gantt-Balken), nicht über Rahmenwerk.

   Die Meta-Zeile ist optional; ohne sie rendert die Spalte identisch zum früheren
   Flach-Layout (ein einziges Kind → kein sichtbarer Unterschied). */

/* Äusserer Flex-Container der Titelzeile (Icon | Titel-Spalte | TitleBadge).
   WICHTIG: der PersonChip-Balken wird im TitleBadge-Slot deklariert, zieht sich aber per
   `order: -1` (PersonChip.razor.css) vor das Icon — er MUSS deshalb ein direktes Kind
   dieses Containers bleiben. Läge er in .w4l-title-col, wäre das ein anderer
   Flex-Container und `order` verschöbe ihn nur noch innerhalb der Titelzeile. */
.w4l-title-host {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 1;
    min-width: 0;
}

/* Mit Meta-Zeile ist der Titelblock zweizeilig. Icon (und Personen-Balken, sofern er nicht
   ohnehin `align-self: stretch` trägt) oben ausrichten statt gegen beide Zeilen zentrieren —
   zentriert schwebte das Icon sonst auf Höhe der Lücke zwischen Titel und Meta. */
.w4l-title-host--meta {
    align-items: flex-start;
}

/* Innenabstand der Preview-Inhalte. Pane, Card und die beiden Body-Wrapper sind bewusst
   padding-frei — nur so beginnt die Kopfzeile voll-bleed ganz oben UND kann das scrollende
   FindingsPanel bis an alle Kanten reichen (seine Scrollbar läuft dadurch von der
   Titel-Trennlinie bis zum unteren Rand, bündig rechts). Den Abstand tragen deshalb die
   Inhalts-Container selbst — dieser hier für Charts und Tabellen, das FindingsPanel bringt
   seinen eigenen mit. */
.w4l-preview-pad {
    padding: 1rem;
    box-sizing: border-box;
}

.w4l-title-col {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.w4l-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

/* Spiegelt, was der selektierte Gantt-Balken geometrisch zeigt (Typ · Zeitraum ·
   Pensum) — dadurch ist die Zuordnung überprüfbar statt bloss räumlich unterstellt.
   tabular-nums, damit die Datumszahlen nicht zappeln. */
.w4l-title-meta {
    font-size: var(--type-ramp-minus-1-font-size, 12px);
    line-height: 1.35;
    color: var(--neutral-foreground-hint);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ──────────────────────────────────────────────────────────────────────────
   Öffentlicher «Rechner»-Hub + /rechner/*-Rechner (SEO-Teaser, Free Tools).
   Linien-Sprache: Bänder statt Karten, Haarlinien zwischen Zeilen, keine Fläche.
   ────────────────────────────────────────────────────────────────────────── */
/* Rechner-Seiten laufen im App-Shell (ContentLayout → .layout-content trägt bereits
   Scroll + Padding). Kein eigenes max-width/margin/Padding mehr — der Content füllt die
   Arbeitsbreite wie jede andere App-Seite (vorher: stark eingerückt). */
.w4l-rechner {
    display: block;
    padding-bottom: 1.5rem;
}

/* Native, leak-freie Zahleneingabe — Optik parallel zu .w4l-select. */
.w4l-number-input {
    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;
}
.w4l-number-input:hover { border-color: var(--neutral-stroke-hover, #a1a1a1); }
.w4l-number-input:focus {
    border-color: var(--accent-fill-rest, #0078d4);
    box-shadow: 0 0 0 1px var(--accent-fill-rest, #0078d4);
}

/* Native, leak-freie Text-/Datum-/Zeit-Eingabe — Optik parallel zu .w4l-select / .w4l-number-input.
   Deckt <input type="text|date|time"> + <textarea> ab (u.a. Scheduler-Formen: Booking-Panel,
   Blockers, Availability-Header). BEWUSST OHNE width:100% — die Klasse sitzt sowohl in
   flex-column-Panels (dort streckt align-items:stretch die Felder ohnehin auf volle Breite) als
   auch in inline-Zeilen (Blockers, Wochenraster, Propose-Zeile), wo 100% das Layout brechen würde. */
.w4l-text-input {
    font-family: var(--body-font, "Segoe UI", sans-serif);
    font-size: var(--type-ramp-base-font-size, 14px);
    height: 32px;
    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;
}
textarea.w4l-text-input { height: auto; min-height: 52px; padding: 6px 8px; resize: vertical; line-height: 1.35; }
.w4l-text-input::placeholder { color: var(--neutral-foreground-hint, #616161); }
.w4l-text-input:hover { border-color: var(--neutral-stroke-hover, #a1a1a1); }
.w4l-text-input:focus {
    border-color: var(--accent-fill-rest, #0078d4);
    box-shadow: 0 0 0 1px var(--accent-fill-rest, #0078d4);
}
.w4l-text-input:disabled { opacity: 0.6; cursor: not-allowed; }

/* Zwei Spalten: Eingaben | Ergebnis. Stapelt unter 860px. */
.w4l-rechner-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--w4l-space-m, 32px);
    align-items: start;
    margin-top: var(--w4l-space-m, 32px);
}
@media (max-width: 859px) {
    .w4l-rechner { padding-left: 20px; padding-right: 20px; }
    .w4l-rechner-grid { grid-template-columns: 1fr; }
}

/* Eingabe-/Ergebnisspalte als Band (border-top/-bottom, keine Karte). */
.w4l-rechner-panel {
    border-top: 2px solid var(--neutral-stroke-rest, #d1d1d1);
    padding-top: var(--w4l-space-s, 16px);
    display: flex;
    flex-direction: column;
    gap: var(--w4l-space-s, 16px);
}
.w4l-rechner-field { display: block; }
.w4l-rechner-hint {
    display: block;
    font-size: var(--type-ramp-minus-1-font-size, 12px);
    color: var(--neutral-foreground-hint);
    margin-top: 4px;
}
.w4l-rechner-checkline {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--type-ramp-base-font-size, 14px);
}
.w4l-rechner-actions { margin-top: var(--w4l-space-xs, 8px); }
.w4l-rechner-error {
    color: var(--w4l-negative, #ef4444);
    font-size: var(--type-ramp-minus-1-font-size, 12px);
}
/* Field-adjacent variant: the message sits under the offending input, not by the submit button. */
.w4l-rechner-field > .w4l-rechner-error { display: block; margin-top: 4px; }

/* Ergebnis: eine grosse Zahl (KPI) + Haarlinien-Aufschlüsselung. */
.w4l-rechner-kpi { display: block; margin-bottom: var(--w4l-space-s, 16px); }
.w4l-rechner-kpi-label {
    display: block;
    font-size: var(--type-ramp-minus-1-font-size, 12px);
    color: var(--neutral-foreground-hint);
    margin-bottom: 2px;
}
.w4l-rechner-kpi-value {
    display: block;
    font-size: clamp(1.8rem, 4vw, 2.4rem);
    font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    color: var(--neutral-foreground-rest, #242424);
}
.w4l-rechner-kpi-sub {
    display: block;
    font-size: var(--type-ramp-minus-1-font-size, 12px);
    color: var(--neutral-foreground-hint);
    margin-top: 2px;
}
.w4l-rechner-kpi-value.is-positive { color: var(--w4l-positive, #10b981); }
.w4l-rechner-kpi-value.is-negative { color: var(--w4l-negative, #ef4444); }

.w4l-rechner-breakdown { display: flex; flex-direction: column; }
.w4l-rechner-breakrow {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 8px 0;
    font-size: var(--type-ramp-base-font-size, 14px);
    font-variant-numeric: tabular-nums;
}
.w4l-rechner-breakrow + .w4l-rechner-breakrow {
    border-top: 1px solid var(--neutral-stroke-rest, #d1d1d1);
}
.w4l-rechner-breakrow .label { color: var(--neutral-foreground-hint); }
/* Mini-heading inside a breakdown: separates co-existing decompositions of the same total
   (e.g. by tax base vs by authority) so the numbers are not read as one chain. */
.w4l-rechner-breakhead {
    font-size: var(--type-ramp-minus-1-font-size, 12px);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--neutral-foreground-hint);
    padding: 12px 0 4px;
}
.w4l-rechner-breakdown > .w4l-rechner-breakhead:first-child { padding-top: 0; }

.w4l-rechner-placeholder {
    color: var(--neutral-foreground-hint);
    font-size: var(--type-ramp-base-font-size, 14px);
    padding: var(--w4l-space-m, 32px) 0;
}
.w4l-rechner-note {
    font-size: var(--type-ramp-minus-1-font-size, 12px);
    color: var(--neutral-foreground-hint);
    line-height: 1.4;
}
.w4l-rechner-notes { margin: 8px 0 0 0; padding-left: 18px; }
.w4l-rechner-notes li { margin-bottom: 4px; }

/* Upgrade-Bridge (Momentaufnahme → Film) — dezentes Band, keine Karte. */
.w4l-rechner-bridge {
    margin-top: var(--w4l-space-xl, 48px);
    border-top: 2px solid var(--accent-fill-rest, #0078d4);
    padding-top: var(--w4l-space-m, 32px);
}
.w4l-rechner-bridge h2 {
    font-size: clamp(1.2rem, 2.5vw, 1.6rem);
    font-weight: 700;
    margin: 0 0 8px 0;
}
.w4l-rechner-bridge p {
    color: var(--neutral-foreground-hint);
    max-width: 640px;
    margin: 0 0 20px 0;
    line-height: 1.5;
}

/* Rechner result visuals - parts-of-a-whole in a sequential accent-tint ramp (one hue,
   strong to light). Identity is carried by the labeled breakdown rows + legend dots,
   never by hue alone, so the ramp also works decolored (white-label accents derive
   every step from --accent-fill-rest via color-mix; the plain line above each
   color-mix line is the pre-color-mix browser fallback). */
.w4l-rechner-seg-1 { background: var(--accent-fill-rest, #0078d4); }
.w4l-rechner-seg-2 { background: var(--accent-fill-rest, #0078d4); background: color-mix(in srgb, var(--accent-fill-rest, #0078d4) 72%, transparent); }
.w4l-rechner-seg-3 { background: var(--accent-fill-rest, #0078d4); background: color-mix(in srgb, var(--accent-fill-rest, #0078d4) 48%, transparent); }
.w4l-rechner-seg-4 { background: var(--accent-fill-rest, #0078d4); background: color-mix(in srgb, var(--accent-fill-rest, #0078d4) 28%, transparent); }
.w4l-rechner-seg-5 { background: var(--accent-fill-rest, #0078d4); background: color-mix(in srgb, var(--accent-fill-rest, #0078d4) 14%, transparent); }
.w4l-rechner-seg-pos { background: var(--w4l-positive, #10b981); }
.w4l-rechner-seg-rest { background: var(--neutral-fill-secondary-rest, #f0f0f0); }

/* Legend dot inside a breakdown-row label - ties the row to its bar segment. */
.w4l-rechner-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    margin-right: 6px;
}

/* Horizontal parts-of-a-whole bar (RechnerResultBar). 2px surface gaps between fills. */
.w4l-rechner-bar {
    display: flex;
    gap: 2px;
    height: 28px;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: var(--w4l-space-s, 16px);
}
.w4l-rechner-bar > div { min-width: 2px; }

/* AHV pension scale strip: neutral track from minimum to maximum full pension,
   accent fill up to the computed pension. */
.w4l-ahvscale { margin-bottom: var(--w4l-space-s, 16px); }
.w4l-ahvscale-track {
    height: 12px;
    border-radius: 4px;
    background: var(--neutral-fill-secondary-rest, #f0f0f0);
    overflow: hidden;
}
.w4l-ahvscale-fill {
    height: 100%;
    background: var(--accent-fill-rest, #0078d4);
}
.w4l-ahvscale-ticks {
    display: flex;
    justify-content: space-between;
    margin-top: 4px;
    font-size: var(--type-ramp-minus-1-font-size, 12px);
    color: var(--neutral-foreground-hint);
    font-variant-numeric: tabular-nums;
}

/* Quiet scenario bridge link (the band itself is the existing .w4l-rechner-bridge). */
.w4l-rechner-bridge-link {
    font-weight: 600;
    color: var(--accent-fill-rest, #0078d4);
    text-decoration: none;
}
.w4l-rechner-bridge-link:hover { text-decoration: underline; }

/* Hub tile: icon row + decorative mini result preview. */
.w4l-rechner-tile-head {
    display: flex;
    align-items: center;
    gap: 8px;
}
.w4l-rechner-tile-mini {
    display: flex;
    gap: 2px;
    height: 10px;
    border-radius: 2px;
    overflow: hidden;
    margin-top: 6px;
}
.w4l-rechner-tile-mini > span { min-width: 2px; }

/* FIDLEG-Disclaimer. */
.w4l-rechner-disclaimer {
    margin-top: var(--w4l-space-m, 32px);
    font-size: var(--type-ramp-minus-1-font-size, 12px);
    color: var(--neutral-foreground-hint);
    line-height: 1.45;
    border-top: 1px solid var(--neutral-stroke-rest, #d1d1d1);
    padding-top: var(--w4l-space-s, 16px);
}

/* Hub-Kachelraster. */
.w4l-rechner-hubgrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--w4l-space-s, 16px);
    margin-top: var(--w4l-space-m, 32px);
}
.w4l-rechner-tile {
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-decoration: none;
    color: inherit;
    border: 1px solid var(--neutral-stroke-rest, #d1d1d1);
    border-radius: calc(var(--control-corner-radius, 4) * 1px);
    padding: 20px;
    transition: border-color 0.12s ease, transform 0.12s ease;
}
.w4l-rechner-tile:hover {
    border-color: var(--accent-fill-rest, #0078d4);
    transform: translateY(-1px);
}
.w4l-rechner-tile-title {
    font-size: var(--type-ramp-plus-1-font-size, 16px);
    font-weight: 700;
}
.w4l-rechner-tile-teaser {
    font-size: var(--type-ramp-minus-1-font-size, 12px);
    color: var(--neutral-foreground-hint);
    line-height: 1.4;
    flex: 1;
}
.w4l-rechner-tile-cta {
    font-size: var(--type-ramp-minus-1-font-size, 12px);
    font-weight: 600;
    color: var(--accent-fill-rest, #0078d4);
}

/* ── Checkbox ────────────────────────────────────────────────────────────────
   Shared look for the native <input type="checkbox">. Native on purpose: the
   FluentUI/FAST checkbox leaks its controller on every DOM removal, and these
   boxes live in repeatedly rebuilt lists (action-plan rows, recurring chips).
   Styling is therefore CSS-only — never swap this for a component. */
.w4l-check {
    appearance: none;
    -webkit-appearance: none;
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    margin: 0;
    display: inline-grid;
    place-content: center;
    border: 1px solid var(--neutral-stroke-strong-rest, #8a8a8a);
    border-radius: 3px;
    background: var(--neutral-fill-input-rest, transparent);
    cursor: pointer;
    transition: background-color 0.12s ease, border-color 0.12s ease;
}
.w4l-check:hover {
    border-color: var(--accent-fill-rest, #0078d4);
}
/* Checkmark drawn as a scaled-in glyph so the transition has something to animate. */
.w4l-check::before {
    content: "";
    width: 9px;
    height: 9px;
    transform: scale(0);
    transition: transform 0.12s ease-in-out;
    background: var(--foreground-on-accent-rest, #fff);
    clip-path: polygon(14% 47%, 0 61%, 39% 100%, 100% 22%, 85% 8%, 38% 71%);
}
.w4l-check:checked {
    background: var(--accent-fill-rest, #0078d4);
    border-color: var(--accent-fill-rest, #0078d4);
}
.w4l-check:checked::before {
    transform: scale(1);
}
/* Outline (not box-shadow) so the ring is never clipped by the rounded corners
   or by an ancestor's overflow. */
.w4l-check:focus-visible {
    outline: 2px solid var(--accent-fill-rest, #0078d4);
    outline-offset: 2px;
}
.w4l-check:disabled {
    cursor: default;
    opacity: 0.4;
}

/* ── Blog author UI (/Account/Manage/Blog) ────────────────────────────────
   Leak-free native buttons + state texts, shared by the post list and the
   editor page. Colours via tokens only. */
.w4l-blog-btn {
    font: inherit;
    font-size: var(--type-ramp-minus-1-font-size, 12px);
    padding: 5px 12px;
    border-radius: calc(var(--control-corner-radius, 4) * 1px);
    cursor: pointer;
    background: transparent;
    border: calc(var(--stroke-width, 1) * 1px) solid var(--neutral-stroke-rest, #d1d1d1);
    color: var(--neutral-foreground-rest, #242424);
}

.w4l-blog-btn:hover:not(:disabled) {
    border-color: var(--neutral-stroke-hover, #a1a1a1);
}

.w4l-blog-btn:disabled {
    opacity: 0.5;
    cursor: default;
}

.w4l-blog-btn.is-primary {
    border-color: var(--accent-fill-rest, #0078d4);
    color: var(--accent-fill-rest, #0078d4);
}

/* Rejection reason in plain text below the status pill. */
.w4l-blog-review-note {
    font-size: var(--type-ramp-minus-1-font-size, 12px);
    color: var(--neutral-foreground-hint);
    margin-top: 4px;
    white-space: pre-wrap;
}

.w4l-blog-error {
    font-size: var(--type-ramp-minus-1-font-size, 12px);
    color: var(--w4l-negative);
}

.w4l-blog-note {
    font-size: var(--type-ramp-minus-1-font-size, 12px);
    color: var(--neutral-foreground-hint);
}

/* blog prose (shared with public reading layout) — single source of truth for the
   article body. Used by the public page (/blog/{slug}), the author preview and the
   admin review preview; those two render outside CSS isolation, so these rules are
   global rather than scoped. Line length is capped near 70ch — the biggest single
   readability lever. */
.w4l-blog-prose {
    max-width: 70ch;
    margin: 0 auto;
    padding: 32px 16px 64px;
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--neutral-foreground-rest);
    /* Defensive: user-generated content can carry unbreakable runs (a long URL, or —
       as seen in pasted articles — non-breaking spaces between every word). "anywhere"
       forces such runs to wrap inside the column instead of overflowing past the layout,
       and keeps the min-content size from blowing out the grid track. */
    overflow-wrap: anywhere;
}

.w4l-blog-prose h1 {
    font-size: 2.1rem;
    line-height: 1.2;
    margin: 0 0 8px;
}

.w4l-blog-lead {
    font-size: 1.2rem;
    color: var(--neutral-foreground-hint);
    margin: 0 0 12px;
}

.w4l-blog-prose h2 { font-size: 1.5rem; margin: 1.6em 0 0.5em; line-height: 1.3; }
.w4l-blog-prose h3 { font-size: 1.2rem; margin: 1.4em 0 0.4em; line-height: 1.3; }
.w4l-blog-prose p { margin: 0 0 1em; }

.w4l-blog-prose ul,
.w4l-blog-prose ol { margin: 0 0 1em; padding-left: 1.4em; }

.w4l-blog-prose blockquote {
    margin: 1.2em 0;
    padding: 0.2em 0 0.2em 1em;
    border-left: 3px solid var(--accent-fill-rest);
    color: var(--neutral-foreground-hint);
}

.w4l-blog-prose img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    margin: 1.2em 0;
}

.w4l-blog-prose figcaption {
    font-size: 0.85rem;
    color: var(--neutral-foreground-hint);
    text-align: center;
    margin-top: -0.8em;
    margin-bottom: 1.2em;
}

.w4l-blog-prose pre {
    background: var(--neutral-fill-secondary-rest);
    padding: 12px;
    border-radius: 6px;
    overflow-x: auto;
    margin: 0 0 1em;
}

.w4l-blog-prose code { font-family: monospace; font-size: 0.9em; }

.w4l-blog-prose table {
    border-collapse: collapse;
    width: 100%;
    margin: 0 0 1em;
}

.w4l-blog-prose th,
.w4l-blog-prose td {
    border: 1px solid var(--neutral-stroke-rest);
    padding: 6px 10px;
    text-align: left;
}

.w4l-blog-header {
    margin-bottom: 32px;
}

.w4l-blog-hero {
    width: 100%;
    max-height: 400px;
    object-fit: cover;
    border-radius: 8px;
    margin: 0 0 32px;
}

.w4l-blog-byline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    font-size: 0.9rem;
    color: var(--neutral-foreground-hint);
}

.w4l-blog-byline-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
}

.w4l-blog-attribution {
    margin-top: 48px;
    padding-top: 12px;
    border-top: 1px solid var(--neutral-stroke-rest);
    font-size: 0.85rem;
    color: var(--neutral-foreground-hint);
}

/* ── Derived estimates (B34/B5) ───────────────────────────────────────────
   Marks a prefilled value that is still the tool's estimate (it equals its
   persisted seed). Two surfaces, one visual language:
     .w4l-estimate-hint — the wizard's line under an estimate-bearing field
     .w4l-estimate-chip — the editor's inline chip, with an optional refresh
                          button when the driver has moved underneath
   Native span/button only: both appear and disappear per keystroke, and a
   FAST element toggled that way leaks a controller (Docs/BlazorFastLeaks.md). */

.w4l-estimate-hint {
    display: inline-block;
    margin-top: 2px;
    font-size: 0.78rem;
    color: var(--neutral-foreground-hint);
}

.w4l-estimate-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    color: var(--neutral-foreground-hint);
}

.w4l-estimate-chip__refresh {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: var(--accent-foreground-rest);
    text-decoration: underline;
    cursor: pointer;
}

.w4l-estimate-chip__refresh:hover {
    color: var(--accent-foreground-hover);
}

/* ── Example-scenario read-only interaction block ────────────────────────────
   Wraps @Body in WorkspaceLayout.razor (and any other host of a system-owned
   example scenario, ScenarioState.IsReadOnly) whenever one is loaded. Blocks
   pointer interaction on data-entry controls; ScenarioState additionally
   reverts anything that slips through (keyboard), and the repository write
   guard is the authoritative backstop. Navigation/links stay usable. */
.w4l-example-readonly :is(input, select, textarea,
    fluent-text-field, fluent-number-field, fluent-text-area, fluent-select, fluent-combobox,
    fluent-checkbox, fluent-switch, fluent-slider, fluent-radio-group, fluent-radio) {
    pointer-events: none;
    opacity: 0.75;
}