/* ==========================================================================
   FOLIO · MODULE MAPPING
   --------------------------------------------------------------------------
   Maps the shared advisor module vocabulary emitted by core/ui.js onto the
   Folio system. Because the renderers produce clean semantic markup, a route
   migrates by adding `.folio` to its root — no JS rewrite, no per-page CSS.

   MAPPED
     .advisor-overview-module            -> a section with a surface register
       --open   -> Register A · rules only, on the canvas
       --paper  -> Register B · paper card
       --tint   -> Register B · a 9% accent wash
       --ledger -> Register B · recessed inset
     .advisor-figure / -group            -> the KPI band
     .advisor-module-state               -> loading / warning / error states

   TONE -> ACCENT
     gold -> gold · emerald -> emerald · critical -> red
     blue -> REMAPPED to grey. The blue tone sat at hue 206deg, outside both
     of the system's hue arcs; it is retired rather than reproduced.

   DEVICE
     Each module opens a section, so it carries D4 (ruled cap) per the device
     governance in folio-cards.css. Figures stay undecorated — the numbers
     are the emphasis.

   Load order: folio.css -> folio-cards.css -> folio-editor.css
               -> folio-modules.css -> folio-chrome.css
   ========================================================================== */

/* Task-domain controls and semantic state mapping. */
.folio .folio-eyebrow { margin: 0; color: var(--f-gold); font: 600 10px/1.3 var(--f-font-mono); letter-spacing: .14em; text-transform: uppercase; }
.folio .folio-button { min-height: 40px; padding: 9px 15px; border: 1px solid var(--f-line-strong); border-radius: 7px; background: var(--f-paper); color: var(--f-ink); font: 600 13px/1 var(--f-font-ui); text-decoration: none; cursor: pointer; }
.folio .folio-button--primary { border-color: var(--f-accent); background: var(--f-accent); color: white; }
.folio .folio-button--ghost { background: transparent; }
.folio .folio-button:disabled { opacity: .55; cursor: not-allowed; }

/* Household Budget keeps its purpose-built worksheet anatomy. This bridge
   moves that component family onto Folio tokens and controls without turning
   the ledger into a generic card grid. */
.folio .household-budget-folio {
    --book-bg: var(--f-canvas);
    --book-panel: var(--f-paper);
    --book-ink: var(--f-ink);
    --book-muted: var(--f-muted);
    --book-dim: var(--f-dim);
    --book-line: var(--f-line);
    --book-green: var(--f-green);
    --book-gold: var(--f-gold);
    --book-red: var(--f-red);
}
.folio .household-budget-folio .budget-ledger-group,
.folio .household-budget-folio .budget-ledger-notes,
.folio .household-budget-folio .budget-page-notice,
.folio .household-budget-folio .budget-share-panel { border-radius: var(--f-radius-lg); }
.folio .household-budget-folio .budget-category-row,
.folio .household-budget-folio .budget-category-breakdown,
.folio .household-budget-folio .budget-income-mode-options > label,
.folio .household-budget-folio .budget-linked-income,
.folio .household-budget-folio .budget-manual-income { border-radius: var(--f-radius); }
.folio .household-budget-folio .budget-ledger-group.essential {
    background: color-mix(in srgb, var(--f-paper) 76%, var(--f-slate-soft));
}
.folio .household-budget-folio .budget-ledger-group.discretionary {
    background: color-mix(in srgb, var(--f-paper) 70%, var(--f-inset));
}
.folio .household-budget-folio .budget-ledger-group.saving_investing {
    background: color-mix(in srgb, var(--f-paper) 76%, var(--f-gold-soft));
}
.folio .household-budget-folio .budget-save-actions { align-items: center; }
.folio .household-budget-folio .budget-save-state { margin-left: auto; }
.folio .household-budget-folio .budget-client-income-proposal-list button.folio-button {
    min-height: 34px;
    padding: 7px 11px;
    border-radius: 7px;
    font: 600 11px/1 var(--f-font-ui);
    letter-spacing: 0;
    text-transform: none;
}
.folio .household-budget-folio .household-budget-state {
    display: grid;
    gap: 14px;
    padding-block: 28px;
}
.folio .household-budget-folio .household-budget-state > .folio-button { justify-self: start; }
.folio .household-budget-folio .budget-category-disclose:focus-visible,
.folio .household-budget-folio .budget-item-remove:focus-visible { outline-offset: 2px; }

@media (max-width: 760px) {
    .folio .household-budget-folio .budget-save-state { margin-left: 0; }
}
@media (max-width: 520px) {
    .folio .household-budget-folio .budget-income-source-panel .panel-heading {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }
    .folio .household-budget-folio .budget-income-source-panel .panel-heading .folio-button {
        width: auto;
        justify-self: start;
    }
}
.folio .folio-segmented { position: relative; display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 5px; border: 0; border-radius: 999px; isolation: isolate; max-width: 100%; background: linear-gradient(180deg, rgba(255,255,255,.3), rgba(255,255,255,.08)); -webkit-backdrop-filter: blur(12px) saturate(180%); backdrop-filter: blur(12px) saturate(180%); box-shadow: 0 10px 26px rgba(16,35,28,.12), inset 0 0 16px rgba(255,255,255,.16); }
.folio .folio-segmented::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; background: linear-gradient(135deg, rgba(255,255,255,.95), rgba(255,255,255,.15) 35%, rgba(255,255,255,.05) 60%, rgba(255,255,255,.8)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.folio .folio-segmented button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 34px; padding: 8px 14px; border: 0; border-radius: 999px; background: transparent; color: var(--f-muted); font: 600 11.5px/1 var(--f-font-ui); cursor: pointer; }
.folio .folio-segmented button[aria-pressed="true"] { color: var(--f-emerald); background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.55)); box-shadow: 0 2px 6px rgba(16,35,28,.14), inset 0 1px 0 #fff; }
.folio .folio-segmented button:disabled { opacity: .45; cursor: not-allowed; }
.folio .folio-card .folio-segmented { background: var(--f-inset); box-shadow: inset 0 1px 2px rgba(66,49,20,.08); }
.folio .folio-card .folio-segmented::before { display: none; }
.folio .folio-card .folio-segmented button[aria-pressed="true"] { background: var(--f-paper); box-shadow: 0 1px 3px rgba(66,49,20,.16); }
.folio .folio-segmented__count { min-width: 18px; padding: 2px 5px; border-radius: 999px; background: rgba(78, 66, 43, .08); font: 650 10px/1 var(--f-font-mono); font-variant-numeric: tabular-nums; }
.folio .folio-segmented button[aria-pressed="true"] .folio-segmented__count { background: var(--f-accent-soft); color: var(--f-accent); }

@media (prefers-reduced-motion: reduce) {
    .folio .folio-work-item, .folio .folio-modal { scroll-behavior: auto; transition: none !important; animation: none !important; }
}

/* ==========================================================================
   A · MODULE
   ========================================================================== */

.folio .advisor-overview-module {
    --f-accent-c: var(--f-accent);
    position: relative;
    margin: 0 0 26px;
    padding: 22px 24px;
    border: 1px solid var(--f-line);
    border-radius: var(--f-radius-lg, 13px);
    background: var(--f-paper);
}

/* Register A · open — no surface at all, rules only. Maximum air. */
.folio .advisor-overview-module--open {
    padding-inline: 0;
    border: 0;
    border-top: 1px solid var(--f-line-strong);
    border-radius: 0;
    background: transparent;
}

/* Register B · paper */
.folio .advisor-overview-module--paper { background: var(--f-paper); }

/* Register B · tint — a 9% wash, chosen by tone */
.folio .advisor-overview-module--tint { background: var(--f-t-sage); border-color: rgba(74, 124, 89, 0.20); }
.folio .advisor-overview-module--tint.advisor-overview-module--gold { background: var(--f-t-gold); border-color: rgba(166, 119, 8, 0.20); }
.folio .advisor-overview-module--tint.advisor-overview-module--critical { background: var(--f-t-clay); border-color: rgba(168, 103, 77, 0.20); }
.folio .advisor-overview-module--tint.advisor-overview-module--blue { background: var(--f-t-grey); border-color: rgba(61, 92, 92, 0.34); }

/* Register B · ledger — recessed */
.folio .advisor-overview-module--ledger {
    border-color: rgba(78, 66, 43, 0.10);
    background: var(--f-inset);
}

/* tone -> accent colour */
.folio .advisor-overview-module--gold     { --f-accent-c: var(--f-gold); }
.folio .advisor-overview-module--emerald  { --f-accent-c: var(--f-accent); }
.folio .advisor-overview-module--critical { --f-accent-c: var(--f-red); }
/* retired hue: mapped to the neutral so nothing renders at 206deg */
.folio .advisor-overview-module--blue     { --f-accent-c: var(--f-teal); }

/* ---- head -------------------------------------------------------------- */

.folio .advisor-overview-module-head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 18px;
}

.folio .advisor-overview-module-head > div { flex: 1; min-width: 0; }

/* D4 · ruled cap. The module opens a section, so it takes the ORIENT device.
   It replaces the boxed icon badge, which read as generic app chrome. */
.folio .advisor-overview-module-head > div:not(.advisor-overview-module-actions)::before {
    display: block;
    width: 34px;
    height: 2px;
    margin-bottom: 12px;
    border-radius: 1px;
    background: var(--f-accent-c);
    content: "";
}

/* the icon survives as a quiet glyph, not a filled circle */
.folio .advisor-overview-module-icon {
    display: grid;
    flex: none;
    place-content: center;
    width: 22px;
    height: 22px;
    margin-top: 2px;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--f-accent-c);
    opacity: 0.75;
}
.folio .advisor-overview-module-icon svg { width: 17px; height: 17px; }

.folio .advisor-overview-module-head p {
    margin: 0 0 5px;
    color: var(--f-accent-c);
    font: 500 10px/1 var(--f-font-mono);
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.folio .advisor-overview-module-head :is(h2, h3, h4) {
    margin: 0;
    color: var(--f-ink);
    font: 400 21px/1.2 var(--f-font-display);
    letter-spacing: -0.01em;
}

.folio .advisor-overview-module-head > div > span {
    display: block;
    margin-top: 6px;
    max-width: 74ch;
    color: var(--f-muted);
    font: 400 12.5px/1.5 var(--f-font-ui);
}

.folio .advisor-overview-module-actions {
    display: flex;
    flex: none;
    gap: 8px;
    margin-top: 2px;
}

/* ==========================================================================
   B · FIGURE BAND
   --------------------------------------------------------------------------
   The production build broke here: a long figure wrapped mid-number
   ("$3,062,4 53") because the cell was allowed to wrap and the type never
   stepped down. Figures now never wrap; they scale with the viewport and the
   cell is permitted to shrink.
   ========================================================================== */

.folio .advisor-figure-group {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
    gap: 0;
}

.folio .advisor-figure {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;          /* lets the cell shrink instead of forcing a wrap */
    padding: 4px 22px 4px 0;
    position: relative;
}

/* hairline dividers between cells, never around them */
.folio .advisor-figure-group--ruled .advisor-figure + .advisor-figure,
.folio .advisor-figure-group--contained .advisor-figure + .advisor-figure {
    padding-left: 22px;
}
.folio .advisor-figure-group--ruled .advisor-figure + .advisor-figure::before,
.folio .advisor-figure-group--contained .advisor-figure + .advisor-figure::before {
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 0;
    width: 1px;
    background: var(--f-hair, rgba(78, 66, 43, 0.10));
    content: "";
}

.folio .advisor-figure > span {
    color: var(--f-dim);
    font: 500 9.5px/1.3 var(--f-font-mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.folio .advisor-figure > strong {
    color: var(--f-ink);
    font: 400 clamp(21px, 2.1vw, 30px)/1.05 var(--f-font-display);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.012em;
    white-space: nowrap;        /* a figure is one token; it never breaks */
    overflow: hidden;
    text-overflow: ellipsis;
}

.folio .advisor-figure > small {
    color: var(--f-muted);
    font: 400 11.5px/1.4 var(--f-font-ui);
}

/* tone lands on the figure, never on its container */
.folio .advisor-figure--positive > strong { color: var(--f-green); }
.folio .advisor-figure--negative > strong { color: var(--f-red); }
.folio .advisor-figure--attention > strong { color: var(--f-bronze); }
.folio .advisor-figure--muted > strong { color: var(--f-faint); }

.folio .advisor-figure-group--compact .advisor-figure > strong { font-size: clamp(18px, 1.6vw, 23px); }
.folio .advisor-figure-group--compact .advisor-figure { padding-block: 2px; }

/* ==========================================================================
   C · MODULE STATES
   ========================================================================== */

.folio .advisor-module-state {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 18px 20px;
    border-radius: var(--f-radius, 9px);
    background: var(--f-inset);
}

.folio .advisor-module-state-mark {
    flex: none;
    width: 8px;
    height: 8px;
    margin-top: 5px;
    border-radius: 50%;
    background: var(--f-faint);
}

.folio .advisor-module-state strong {
    display: block;
    font: 500 13.5px/1.35 var(--f-font-ui);
}

.folio .advisor-module-state p {
    margin: 4px 0 0;
    color: var(--f-muted);
    font: 400 12.5px/1.5 var(--f-font-ui);
}

.folio .advisor-module-state > div > span {
    display: block;
    margin-bottom: 4px;
    color: var(--f-dim);
    font: 500 9.5px/1 var(--f-font-mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

/* One ring, centred on its own square box and on the title beside it. The
   legacy component also draws a ring in ::after; inside Folio the mark itself
   is the only ring, so the pseudo-element is removed. */
.folio .advisor-module-state-mark::after { content: none; }

.folio .advisor-module-state--loading .advisor-module-state-mark {
    display: block;
    width: 14px;
    height: 14px;
    margin-top: 0;
    border: 1.5px solid var(--f-line-strong);
    border-top-color: var(--f-accent);
    background: transparent;
    animation: folio-spin 0.7s linear infinite;
}

/* loading is a hatch, matching pending everywhere else in the system */
.folio .advisor-module-state--loading {
    align-items: center;
    background-image: repeating-linear-gradient(-45deg,
        transparent 0 6px, rgba(78, 66, 43, 0.04) 6px 7px);
}

.folio .advisor-module-state--warning { background: var(--f-t-gold); }
.folio .advisor-module-state--warning .advisor-module-state-mark { background: var(--f-gold-bright); }

.folio .advisor-module-state--error { background: var(--f-red-soft); }
.folio .advisor-module-state--error .advisor-module-state-mark { background: var(--f-red); }

.folio .advisor-module-state--ready .advisor-module-state-mark { background: var(--f-green); }

@media (prefers-reduced-motion: reduce) {
    .folio .advisor-module-state--loading .advisor-module-state-mark { animation-duration: 2.4s; }
}

/* ==========================================================================
   D · BUTTONS emitted by advisorButton()
   ========================================================================== */

.folio .advisor-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 34px;
    padding: 0 15px;
    border: 1px solid transparent;
    border-radius: var(--f-radius-pill, 999px);
    background: transparent;
    color: var(--f-ink);
    font: 500 12.5px/1 var(--f-font-ui);
    white-space: nowrap;
    cursor: pointer;
    transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}

.folio .advisor-button--secondary { border-color: var(--f-line-strong); background: var(--f-paper); }
.folio .advisor-button--secondary:hover { border-color: var(--f-dim); background: var(--f-inset); }

.folio .advisor-button--primary { background: var(--f-accent); color: #fff; }
.folio .advisor-button--primary:hover { background: var(--f-accent-bright); }

.folio .advisor-button--ghost { color: var(--f-muted); }
.folio .advisor-button--ghost:hover { background: var(--f-inset); color: var(--f-ink); }

.folio .advisor-button--danger { border-color: var(--f-red); color: var(--f-red); }
.folio .advisor-button--danger:hover { background: var(--f-red-soft); }

.folio .advisor-button--small { height: 30px; padding: 0 13px; font-size: 12px; }

.folio .advisor-button:disabled { opacity: 0.5; cursor: not-allowed; }

/* ==========================================================================
   E · SHARED RENDERERS
   --------------------------------------------------------------------------
   These are emitted by core/ui.js across most household tabs, so mapping them
   here migrates many routes at once rather than one page at a time.
   ========================================================================== */

/* ---- advisorSection ---------------------------------------------------- */

.folio .advisor-section { margin: 0 0 30px; }

.folio .advisor-section--card {
    padding: 20px 22px;
    border: 1px solid var(--f-line);
    border-radius: var(--f-radius-lg, 13px);
    background: var(--f-paper);
    box-shadow: var(--f-shadow);
}

.folio .advisor-section-header {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 16px;
}
.folio .advisor-section-header > div { flex: 1; min-width: 0; }

.folio .advisor-section-header .eyebrow {
    margin: 0 0 5px;
    color: var(--f-bronze);
    font: 500 9.5px/1 var(--f-font-mono);
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.folio .advisor-section-header h2 {
    margin: 0;
    font: 400 clamp(18px, 1.8vw, 22px)/1.2 var(--f-font-display);
}
.folio .advisor-section-header > div > p:not(.eyebrow) {
    margin: 6px 0 0;
    max-width: 74ch;
    color: var(--f-muted);
    font: 400 12.5px/1.5 var(--f-font-ui);
}
.folio .advisor-section-actions { display: flex; flex: none; gap: 8px; }

/* ---- advisorMetric / advisorMetricBand --------------------------------- */

.folio :is(.advisor-metric-band, .metric-band) {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    overflow: hidden;
    border: 1px solid var(--f-line);
    border-radius: var(--f-radius, 9px);
    background: var(--f-paper);
}

.folio :is(.advisor-metric, .metric-tile) {
    position: relative;
    padding: 14px 16px;
    border-right: 1px solid var(--f-line);
    min-width: 0;
}
.folio :is(.advisor-metric, .metric-tile):last-child { border-right: 0; }

.folio :is(.advisor-metric, .metric-tile) .mini-heading {
    display: block;
    margin-bottom: 5px;
    color: var(--f-dim);
    font: 500 9px/1.3 var(--f-font-mono);
    letter-spacing: 0.13em;
    text-transform: uppercase;
}
.folio :is(.advisor-metric, .metric-tile) > strong {
    display: block;
    font: 400 clamp(19px, 1.7vw, 25px)/1.05 var(--f-font-display);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;          /* a figure is one token — never breaks */
    overflow: hidden;
    text-overflow: ellipsis;
}
.folio :is(.advisor-metric, .metric-tile) > em {
    display: block;
    margin-top: 4px;
    color: var(--f-muted);
    font: 400 11px/1.4 var(--f-font-ui);
    font-style: normal;
}

/* Tone lands on the figure, never on the tile.
   The vocabulary is the one advisorSparklinePoints() recognises -- up, down,
   warn, risk -- not the positive/negative names used elsewhere. Both are
   covered so a caller cannot silently lose its tone. */
.folio :is(.advisor-metric, .metric-tile):is(.up, .positive) > strong { color: var(--f-green); }
.folio :is(.advisor-metric, .metric-tile):is(.down, .negative, .risk) > strong { color: var(--f-red); }
.folio :is(.advisor-metric, .metric-tile):is(.warn, .attention) > strong { color: var(--f-bronze); }
.folio :is(.advisor-metric, .metric-tile):is(.muted, .flat) > strong { color: var(--f-faint); }

.folio .metric-sparkline { display: block; width: 100%; height: 20px; margin-top: 8px; }
.folio .metric-sparkline polyline {
    fill: none;
    stroke: var(--f-accent);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.folio .advisor-metric:is(.down, .negative, .risk) .metric-sparkline polyline { stroke: var(--f-red); }
.folio .advisor-metric:is(.warn, .attention) .metric-sparkline polyline { stroke: var(--f-bronze); }
.folio .advisor-metric:is(.muted, .flat) .metric-sparkline polyline { stroke: var(--f-faint); }

/* ---- advisorEmptyState ------------------------------------------------- */

.folio :is(.advisor-empty-state, .empty-state) {
    padding: 26px 22px;
    border-radius: var(--f-radius, 9px);
    background: var(--f-inset);
    text-align: center;
}
.folio :is(.advisor-empty-state, .empty-state) strong {
    display: block;
    margin-bottom: 5px;
    font: 500 13.5px/1.35 var(--f-font-ui);
}
.folio :is(.advisor-empty-state, .empty-state) span {
    color: var(--f-muted);
    font: 400 12.5px/1.5 var(--f-font-ui);
}

/* ---- advisorSegmentedControl ------------------------------------------- */

.folio .advisor-segmented {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    border-radius: var(--f-radius-pill, 999px);
    background: var(--f-inset);
}
.folio .advisor-segmented button {
    padding: 6px 14px;
    border: 0;
    border-radius: var(--f-radius-pill, 999px);
    background: transparent;
    color: var(--f-muted);
    font: 500 12px/1 var(--f-font-ui);
    white-space: nowrap;
    cursor: pointer;
    transition: background 140ms ease, color 140ms ease;
}
.folio .advisor-segmented button:hover { color: var(--f-ink); }

/* advisorSegmentedControl renders its options through
   advisorButton({ variant: "segment" }), so the segment variant must not
   inherit the pill treatment the other button variants use. */
.folio .advisor-button--segment {
    height: 30px;
    padding: 0 14px;
    border: 0;
    background: transparent;
    color: var(--f-muted);
    font: 500 12px/1 var(--f-font-ui);
}
.folio .advisor-button--segment:hover { background: transparent; color: var(--f-ink); }

.folio .advisor-segmented :is(button, .advisor-button)[aria-pressed="true"],
.folio .advisor-segmented :is(button, .advisor-button).is-selected,
.folio .advisor-segmented :is(button, .advisor-button).is-active,
.folio .advisor-segmented :is(button, .advisor-button).active {
    background: var(--f-paper);
    color: var(--f-ink);
    box-shadow: var(--f-shadow);
}

/* ---- advisorPlanningHero -> the hero (Register A, no surface) ----------- */

.folio .advisor-planning-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(240px, 1fr);
    gap: 40px;
    align-items: start;
    padding: 38px 0 32px;
    border-bottom: 1px solid var(--f-line);
    /* the hero carries NO surface — it is the page's largest moment and the
       canvas is what makes it land */
    background: transparent;
}

.folio .advisor-planning-hero-main { min-width: 0; }

.folio .advisor-planning-hero .eyebrow {
    margin: 0 0 10px;
    color: var(--f-bronze);
    font: 500 10px/1 var(--f-font-mono);
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.folio .advisor-planning-hero-value {
    display: block;
    color: var(--f-green);
    font: 400 clamp(36px, 4.8vw, 58px)/1 var(--f-font-display);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.025em;
    white-space: nowrap;
}
.folio .advisor-planning-hero.negative .advisor-planning-hero-value { color: var(--f-red); }
.folio .advisor-planning-hero.neutral .advisor-planning-hero-value { color: var(--f-ink); }

.folio .advisor-planning-hero-main :is(h1, h2) {
    margin: 10px 0 0;
    font: 400 clamp(18px, 1.9vw, 23px)/1.2 var(--f-font-display);
}

.folio .advisor-planning-hero-description {
    margin: 10px 0 0;
    max-width: 62ch;
    color: var(--f-muted);
    font: 400 13px/1.55 var(--f-font-ui);
}

.folio .advisor-planning-hero-meta {
    margin: 9px 0 0;
    color: var(--f-dim);
    font: 400 10.5px/1.5 var(--f-font-mono);
    letter-spacing: 0.08em;
}

/* the aside is a quiet inset, never a card competing with the hero figure */
.folio .advisor-planning-hero-aside {
    padding: 17px 19px;
    border-radius: var(--f-radius, 9px);
    background: var(--f-inset);
}
.folio .advisor-planning-hero-actions { display: flex; gap: 8px; margin-top: 14px; }

.folio .advisor-planning-hero-supporting {
    grid-column: 1 / -1;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--f-hair, rgba(78, 66, 43, 0.10));
}

/* ---- advisorBandStack / advisorScopeBar -------------------------------- */

.folio .advisor-band-stack {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    min-width: 0;
}
.folio .advisor-band-stack > .advisor-band,
.folio .advisor-band-stack > .advisor-band > .advisor-band-body {
    min-width: 0;
}

.folio .advisor-scope-bar {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 22px;
    padding: 10px 0;
    border-bottom: 1px solid var(--f-line);
}
.folio .advisor-scope-bar.is-sticky {
    position: sticky;
    top: 60px;
    z-index: 20;
    background: transparent;
}
.folio .advisor-scope-bar.is-stuck {
    margin-inline: -12px;
    padding: 10px 12px;
    border: 1px solid rgba(216, 201, 173, 0.76);
    border-radius: var(--f-radius, 9px);
    background: rgba(255, 253, 248, 0.92);
    box-shadow: 0 10px 28px rgba(54, 43, 29, 0.09);
    backdrop-filter: blur(16px) saturate(1.04);
}
.folio .advisor-scope-bar-controls { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.folio .advisor-scope-bar-status {
    margin-left: auto;
    color: var(--f-dim);
    font: 500 10px/1.4 var(--f-font-mono);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* ==========================================================================
   F · RECORD ROWS
   The row vocabulary the account, holding and member tabs share.
   ========================================================================== */

/* accounts overview: one financial statement, then history and ledger detail */
.folio .accounts-overview {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    margin-bottom: 26px;
}

.folio .accounts-overview-folio {
    gap: clamp(28px, 3.5vw, 46px);
}

.folio .accounts-overview-folio > .advisor-band:first-child,
.folio .accounts-overview-folio > .advisor-band:first-child > .advisor-band-body {
    padding: 0;
}

.folio .accounts-overview-folio .advisor-planning-hero {
    grid-template-columns: minmax(0, 1fr);
    padding-top: clamp(24px, 3.5vw, 46px);
}

.folio .accounts-overview-folio .advisor-planning-hero-description {
    max-width: 76ch;
}

.folio .accounts-filter-dock {
    margin: -20px 0 0;
    padding-block: 10px;
}

.folio .accounts-filter-dock.is-stuck {
    margin-inline: -12px;
}

.folio .accounts-filter-label {
    color: var(--f-dim);
    font: 500 9.5px/1 var(--f-font-mono);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.folio .accounts-filter-status {
    display: flex;
    align-items: center;
    gap: 9px;
}

.folio .accounts-filter-status b {
    color: var(--f-ink);
    font-weight: 600;
}

.folio .accounts-filter-status span {
    padding-left: 9px;
    border-left: 1px solid var(--f-line);
    color: var(--f-bronze);
}

.folio .account-history-coverage {
    display: flex;
    gap: 12px;
    align-items: baseline;
    margin: 15px 0 5px;
    padding: 10px 12px;
    border-left: 2px solid var(--f-gold);
    background: var(--f-t-gold);
}

.folio .account-history-coverage strong {
    flex: none;
    color: var(--f-bronze);
    font: 600 10px/1.3 var(--f-font-mono);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.folio .account-history-coverage span {
    color: var(--f-muted);
    font: 400 11px/1.45 var(--f-font-ui);
}

.folio .account-value-chart {
    display: block;
    width: 100%;
    min-height: 240px;
    padding-top: 12px;
}
.folio .account-value-chart svg { display: block; width: 100%; height: auto; overflow: hidden; }
.folio .account-value-chart :is(path, polyline) { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.folio .account-chart-grid line { stroke: var(--f-line); }
.folio .account-chart-grid text { fill: var(--f-dim); font: 400 10px/1 var(--f-font-mono); }
.folio .account-chart-area { fill: rgba(166, 119, 8, 0.08); }
.folio .account-chart-line { stroke: var(--f-bronze); stroke-width: 2.2; }
.folio .account-chart-end { fill: var(--f-bronze); stroke: var(--f-paper); stroke-width: 3; }

.folio .account-chart-note {
    display: flex;
    gap: 14px;
    align-items: center;
    justify-content: space-between;
    margin: 5px 0 0;
    padding-top: 12px;
    border-top: 1px solid var(--f-line);
    color: var(--f-dim);
    font: 400 10px/1.4 var(--f-font-ui);
}

.folio .account-chart-note strong {
    color: var(--f-green);
    font: 600 11px/1.2 var(--f-font-mono);
    white-space: nowrap;
}

.folio .account-history-empty {
    min-height: 116px;
}

.folio .account-category-list {
    display: grid;
    gap: clamp(18px, 2.5vw, 28px);
}

.folio .account-management-breakdown {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
    padding: 10px 18px;
    border-bottom: 1px solid var(--f-line);
    background: var(--f-canvas);
}

.folio .account-management-breakdown > span {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    gap: 8px;
    align-items: center;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--f-muted);
    font: 400 10px/1.35 var(--f-font-ui);
}

.folio .account-management-breakdown i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--f-green);
}
.folio .account-management-breakdown i.client { background: var(--f-gold); }
.folio .account-management-breakdown b,
.folio .account-management-breakdown strong { color: var(--f-ink); font-weight: 600; }
.folio .account-management-breakdown em { color: var(--f-dim); font-style: normal; text-align: right; }

.folio .account-review-label {
    color: var(--f-bronze);
    font: 500 9.5px/1.3 var(--f-font-ui);
}

/* Accounts now composes the same shared figures, modules and records used by
   Household Overview. These rules only arrange the account-specific content
   inside those components; they do not recreate a parallel card system. */
.folio .accounts-hero-position {
    margin-top: 8px;
}

.folio .accounts-range-label {
    display: inline-flex;
    padding: 5px 8px;
    border: 1px solid var(--f-line);
    border-radius: var(--f-radius-pill);
    color: var(--f-bronze);
    font: 500 9.5px/1 var(--f-font-mono);
    letter-spacing: 0.08em;
}

.folio .account-value-panel {
    margin: 0;
}

.folio .account-value-panel .advisor-overview-module-body {
    padding-top: 2px;
}

.folio .accounts-account-group {
    margin: 0;
}

.folio .accounts-account-group + .accounts-account-group {
    margin-top: 18px;
}

.folio .accounts-group-total {
    display: grid;
    gap: 5px;
    min-width: 150px;
    text-align: right;
}

.folio .accounts-group-total > strong {
    color: var(--f-ink);
    font: 400 21px/1 var(--f-font-display);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.folio .accounts-group-total > span {
    color: var(--f-green);
    font: 500 9.5px/1.25 var(--f-font-mono);
}

.folio .accounts-group-total > span.down {
    color: var(--f-red);
}

.folio .accounts-account-list {
    border-top: 1px solid var(--f-line);
}

.folio .accounts-account-record.advisor-record {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(150px, auto);
    gap: 22px;
    align-items: center;
    margin: 0;
    padding: 17px 2px;
    border: 0;
    border-bottom: 1px solid var(--f-line);
    border-radius: 0;
    background: transparent;
}

.folio .accounts-account-record.advisor-record:last-child {
    border-bottom: 0;
}

.folio .accounts-account-record .advisor-record-main {
    min-width: 0;
}

.folio .accounts-account-record .advisor-record-main > .eyebrow {
    display: block;
    margin-bottom: 5px;
    color: var(--f-bronze);
    font: 500 8.5px/1 var(--f-font-mono);
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.folio .accounts-account-record .advisor-record-main > strong {
    display: block;
    overflow: hidden;
    color: var(--f-ink);
    font: 500 13.5px/1.3 var(--f-font-ui);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.folio .accounts-account-record .advisor-record-main > p {
    margin: 4px 0 0;
    overflow: hidden;
    color: var(--f-dim);
    font: 400 9.5px/1.35 var(--f-font-mono);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.folio .accounts-account-evidence {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    align-items: center;
    margin-top: 9px;
}

.folio .accounts-account-trend {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 11px;
}

.folio .accounts-account-trend svg {
    width: 72px;
    height: 25px;
}

.folio .accounts-account-trend polyline {
    fill: none;
    stroke: var(--f-green);
    stroke-width: 1.8;
}

.folio .accounts-account-trend.down polyline {
    stroke: var(--f-red);
}

.folio .accounts-account-trend > span {
    display: grid;
    gap: 3px;
}

.folio .accounts-account-trend strong {
    color: var(--f-green);
    font: 500 10px/1.2 var(--f-font-mono);
}

.folio .accounts-account-trend.down strong {
    color: var(--f-red);
}

.folio .accounts-account-trend.is-pending strong {
    color: var(--f-muted);
    font-family: var(--f-font-ui);
}

.folio .accounts-account-trend small {
    color: var(--f-dim);
    font: 400 9px/1.3 var(--f-font-ui);
}

.folio .accounts-account-record .advisor-record-trailing {
    display: grid;
    gap: 7px;
    justify-items: end;
    min-width: 0;
    text-align: right;
}

.folio .accounts-account-record .advisor-record-trailing > strong {
    color: var(--f-ink);
    font: 400 20px/1 var(--f-font-display);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.folio .accounts-account-record.negative .advisor-record-trailing > strong {
    color: var(--f-red);
}

.folio .accounts-account-asof {
    color: var(--f-dim);
    font: 400 9px/1.3 var(--f-font-ui);
}

.folio .balance-sheet { margin-top: 4px; }
.folio .balance-row.total {
    border-top: 1.5px solid var(--f-line-strong);
    border-bottom: 0;
    font-weight: 500;
}

.folio :is(.data-panel, .account-value-panel) {
    padding: 19px 21px;
    border: 1px solid var(--f-line);
    border-radius: var(--f-radius-lg, 13px);
    background: var(--f-paper);
    box-shadow: var(--f-shadow);
}

.folio .panel-heading {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin: 0 0 14px;
    font: 400 17px/1.2 var(--f-font-display);
}

.folio .account-type-group { margin-bottom: 22px; }
.folio .account-type-group > h3,
.folio .account-type-group > .eyebrow {
    margin: 0 0 8px;
    color: var(--f-dim);
    font: 500 9.5px/1 var(--f-font-mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.folio :is(.account-row, .balance-row, .member-row) {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 12px 0;
    border-bottom: 1px solid var(--f-line);
    min-width: 0;
}
.folio :is(.account-row, .balance-row, .member-row):last-child { border-bottom: 0; }

.folio .account-type-icon {
    display: grid;
    flex: none;
    place-content: center;
    width: 26px;
    height: 26px;
    border: 1px solid rgba(166, 119, 8, 0.28);
    border-radius: 6px;
    background: var(--f-t-gold);
    color: var(--f-bronze);
    font-size: 12px;
}

.folio .money-cell {
    margin-left: auto;
    font: 500 13px/1.3 var(--f-font-ui);
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}
.folio .money-cell.negative { color: var(--f-red); }
.folio .money-cell.positive { color: var(--f-green); }

.folio :is(.source-chip, .account-status) {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border: 1px solid rgba(154, 144, 129, 0.30);
    border-radius: var(--f-radius-pill, 999px);
    background: var(--f-t-grey);
    color: var(--f-muted);
    font: 500 9.5px/1.4 var(--f-font-mono);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
}
.folio .account-status.connected {
    border-color: rgba(74, 124, 89, 0.30);
    background: var(--f-t-sage);
    color: var(--f-sage);
}
.folio .account-status.pending {
    border-color: rgba(166, 119, 8, 0.30);
    background: var(--f-t-gold);
    color: var(--f-bronze);
}

@media (max-width: 860px) {
    .folio .advisor-overview-module { padding: 18px 16px; }
    .folio .advisor-planning-hero { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .folio .advisor-overview-module-head { flex-wrap: wrap; }
    .folio .advisor-overview-module-actions { order: 3; width: 100%; margin-top: 10px; }
    .folio .advisor-figure-group--ruled .advisor-figure + .advisor-figure::before { display: none; }
    .folio .advisor-figure-group--ruled .advisor-figure + .advisor-figure { padding-left: 0; }
    .folio .accounts-filter-dock {
        align-items: flex-start;
    }

    .folio .accounts-filter-dock .advisor-scope-bar-status {
        width: 100%;
        margin-left: 0;
    }

    .folio .account-history-coverage,
    .folio .account-chart-note {
        align-items: flex-start;
        flex-direction: column;
    }

    .folio .account-management-breakdown {
        grid-template-columns: 1fr;
    }

    .folio .accounts-account-group .advisor-overview-module-head {
        flex-wrap: wrap;
    }

    .folio .accounts-account-group .advisor-overview-module-actions {
        width: 100%;
    }

    .folio .accounts-group-total {
        min-width: 0;
        text-align: left;
    }
}

@media (max-width: 620px) {
    .folio .accounts-overview-folio {
        gap: 26px;
    }

    .folio .accounts-filter-dock {
        top: 54px;
    }

    .folio .accounts-filter-label {
        width: 100%;
    }

    .folio .accounts-filter-dock .advisor-segmented {
        max-width: 100%;
        overflow-x: auto;
    }

    .folio .account-history-empty {
        align-items: flex-start;
        flex-direction: column;
    }

    .folio .account-value-chart {
        min-height: 0;
        overflow-x: auto;
        padding-bottom: 6px;
    }

    .folio .account-value-chart svg {
        min-width: 620px;
    }

    .folio .accounts-account-record.advisor-record {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .folio .accounts-account-record .advisor-record-trailing {
        justify-items: start;
        text-align: left;
    }

    .folio .accounts-account-record .advisor-record-main > strong,
    .folio .accounts-account-record .advisor-record-main > p {
        white-space: normal;
    }
}

/* ── Household · Savings Capacity ───────────────────────────────────────── */
.folio .folio-savings-capacity { --savings-chapter-line: rgba(48, 72, 59, .2); }
.folio .folio-savings-workspace-section .folio-section__body { padding-top: 8px; }
.folio .folio-savings-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: start; container-type: inline-size; }
.folio .folio-savings-decision, .folio .folio-savings-workspace-section { min-width: 0; }
.folio .folio-savings-sources-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; margin-bottom: 16px; }
.folio .folio-savings-sources-heading h3 { margin: 0; font: 500 27px/1.2 var(--f-font-display); }
.folio .folio-savings-waterfall { min-width: 0; padding: 0; }
.folio .folio-savings-waterfall > header { display: flex; justify-content: space-between; gap: 18px; align-items: baseline; padding-bottom: 12px; }
.folio .folio-savings-waterfall > header > span { color: var(--f-muted); font-size: 11px; }
.folio .folio-savings-waterfall__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 9px 0; border-top: 1px solid var(--f-line); }
.folio .folio-savings-waterfall__row > span { display: grid; gap: 2px; min-width: 0; }
.folio .folio-savings-waterfall__row strong { font-size: 12px; line-height: 1.4; font-weight: 500; }
.folio .folio-savings-waterfall__row small { color: var(--f-muted); font-size: 11px; line-height: 1.4; }
.folio .folio-savings-waterfall__row b { font: 500 12px/1.3 var(--f-font-ui); font-variant-numeric: tabular-nums; white-space: nowrap; }
.folio .folio-savings-waterfall__row.tax b { color: var(--f-clay); }
.folio .folio-savings-waterfall__row.subtotal { margin-top: 3px; border-top-color: var(--f-line-strong); }
.folio .folio-savings-waterfall__row.subtotal strong,
.folio .folio-savings-waterfall__row.subtotal b { color: var(--f-accent); }
.folio .folio-savings-disclosure > summary:focus-visible { outline: 2px solid var(--f-accent); outline-offset: 3px; }
.folio .folio-savings-inspection { padding: 20px 24px; margin-top: 16px; border: 1px solid var(--f-line); border-radius: 8px; background: var(--f-paper); }
.folio .folio-savings-inspection[hidden], .folio [data-savings-inspection-panel][hidden] { display: none; }
.folio [data-savings-inspection-panel] > header { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 14px; }
.folio [data-savings-inspection-panel] h3 { margin: 0; font: 500 24px/1.2 var(--f-font-display); }
.folio [data-savings-inspection-panel] > .folio-savings-plan-help { margin-top: 12px; }
.folio [data-savings-inspection-panel] > .folio-button { margin-top: 14px; }
.folio .folio-savings-provenance { display: flex; flex-wrap: wrap; gap: 5px 18px; margin: 14px 0 0; padding: 12px 0 0; border-top: 1px solid var(--f-line); color: var(--f-muted); font-size: 11px; }
.folio .folio-savings-provenance span:not(:last-child)::after { content: "·"; margin-left: 18px; color: var(--f-line-strong); }
.folio .folio-savings-decision > .tax-state-alert,
.folio .folio-savings-decision > .folio-tax-state-alert,
.folio .folio-savings-decision > .folio-alert { margin-top: 16px; }

.folio .folio-savings-people { display: grid; gap: 18px; min-width: 0; }
.folio .folio-savings-person-sheet { min-width: 0; border: 1px solid var(--f-line); border-radius: 12px; background: rgba(255, 253, 248, .76); box-shadow: 0 10px 28px rgba(45, 38, 26, .025); overflow: hidden; }
.folio .folio-savings-person-sheet > summary { display: grid; grid-template-columns: auto minmax(180px, 1fr) auto auto; gap: 20px; align-items: center; min-width: 0; padding: 20px 24px; cursor: pointer; list-style: none; }
.folio .folio-savings-person-sheet > summary::-webkit-details-marker { display: none; }
.folio .folio-savings-person-sheet > summary:focus-visible { outline: 2px solid var(--f-accent); outline-offset: -3px; }
.folio .folio-savings-person-sheet__mark { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px 12px 12px 4px; background: var(--f-ink); color: var(--f-paper); font: 600 9px/1 var(--f-font-mono); letter-spacing: .06em; }
.folio .folio-savings-person-sheet__identity { display: grid; gap: 4px; min-width: 0; }
.folio .folio-savings-person-sheet__identity strong { overflow-wrap: anywhere; font: 500 clamp(20px, 2vw, 27px)/1 var(--f-font-display); }
.folio .folio-savings-person-sheet__identity small { color: var(--f-muted); font-size: 11px; overflow-wrap: anywhere; }
.folio .folio-savings-person-sheet__metric { display: grid; gap: 5px; min-width: 120px; padding-left: 16px; border-left: 1px solid var(--f-line); text-align: right; }
.folio .folio-savings-person-sheet__metric small { color: var(--f-muted); font: 500 9px/1.2 var(--f-font-mono); letter-spacing: .07em; text-transform: uppercase; }
.folio .folio-savings-person-sheet__metric strong { font: 500 19px/1 var(--f-font-display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.folio .folio-savings-person-sheet__toggle { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--f-line-strong); border-radius: 999px; transition: transform .18s ease; }
.folio .folio-savings-person-sheet[open] .folio-savings-person-sheet__toggle { transform: rotate(180deg); }
.folio .folio-savings-person-sheet__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--f-line); }
.folio .folio-savings-source-cell { display: grid; align-content: start; min-width: 0; padding: 22px 24px; }
.folio .folio-savings-source-cell:not(:last-child) { border-right: 1px solid var(--f-line); }
.folio .folio-savings-equity-editor { margin-top: 14px; border-top: 1px solid var(--f-line); padding-top: 10px; min-width: 0; }
.folio .folio-savings-equity-editor > summary { cursor: pointer; font-size: 12px; color: var(--f-accent); }
.folio .folio-savings-equity-editor > div { display: grid; gap: 12px; padding-top: 14px; }
.folio .folio-savings-equity-editor label { display: grid; gap: 6px; font-size: 12px; }
.folio .folio-savings-equity-editor label[hidden] { display: none; }
.folio .folio-savings-equity-editor input, .folio .folio-savings-equity-editor select { width: 100%; min-width: 0; border: 1px solid var(--f-line-strong); border-radius: 5px; background: var(--f-paper); color: var(--f-ink); padding: 8px; font: 400 12px/1.4 var(--f-font-ui); }
.folio .folio-savings-equity-editor p, .folio .folio-savings-plan-help { margin: 0; color: var(--f-muted); font-size: 12px; line-height: 1.5; }
.folio .folio-savings-equity-state { color: var(--f-accent); }
.folio .folio-savings-missing-member { display: flex; justify-content: space-between; gap: 14px; padding: 20px; border: 1px solid var(--f-line); border-radius: 12px; background: var(--f-paper); }
.folio .folio-savings-missing-member h4 { margin: 0; font: 500 24px/1.2 var(--f-font-display); }
.folio .folio-savings-missing-member p { margin: 6px 0 0; font-size: 12px; color: var(--f-muted); }
.folio .folio-savings-source-cell > header { display: flex; justify-content: space-between; gap: 12px; align-items: start; min-height: 60px; }
.folio .folio-savings-source-cell > header > div { min-width: 0; }
.folio .folio-savings-source-cell__rule { display: block; width: 28px; height: 2px; margin-bottom: 11px; background: var(--f-accent-c); }
.folio .folio-savings-source-cell__kicker { display: flex; gap: 7px; align-items: center; min-width: 0; color: var(--f-accent-c); }
.folio .folio-savings-source-cell__kicker .folio-eyebrow { min-width: 0; margin: 0; }
.folio .folio-savings-source-cell h4 { margin: 5px 0 0; color: var(--f-accent-c); font: 500 16px/1.15 var(--f-font-display); overflow-wrap: anywhere; }
.folio .folio-savings-source-cell__value { margin: 16px 0 0; font: 500 clamp(28px, 3vw, 34px)/1.1 var(--f-font-display); font-variant-numeric: tabular-nums; letter-spacing: -.02em; overflow-wrap: anywhere; }
.folio .folio-savings-source-cell__description { margin: 8px 0 20px; color: var(--f-muted); font-size: 12px; line-height: 1.5; }
.folio .folio-savings-source-cell dl { display: grid; gap: 10px; margin: 0; padding-top: 14px; border-top: 1px solid var(--f-line); }
.folio .folio-savings-source-cell dl > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; }
.folio .folio-savings-source-cell dt { color: var(--f-muted); font-size: 11px; }
.folio .folio-savings-source-cell dd { margin: 0; font: 600 11px/1.4 var(--f-font-ui); font-variant-numeric: tabular-nums; white-space: nowrap; }
.folio .folio-savings-source-cell dl small { grid-column: 1 / -1; color: var(--f-muted); font-size: 11px; line-height: 1.4; }
.folio .folio-savings-source-empty { display: grid; align-content: start; padding: 16px 0 4px; }
.folio .folio-savings-source-empty strong { font: 500 20px/1.1 var(--f-font-display); }
.folio .folio-savings-source-empty p { max-width: 34ch; margin: 7px 0 0; color: var(--f-muted); font-size: 12px; line-height: 1.5; }
.folio .folio-savings-person-sheet__footer { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; padding: 12px 24px; border-top: 1px solid var(--f-line); background: rgba(239, 232, 214, .18); }
.folio .folio-savings-person-sheet__footer p { margin: 0; color: var(--f-muted); font-size: 11px; }
.folio .folio-savings-benefit-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.folio .folio-savings-benefit-chip { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 7px 10px; border: 1px solid var(--f-line); border-radius: 7px; background: var(--f-paper); color: var(--f-ink); text-align: left; cursor: pointer; }
.folio .folio-savings-benefit-chip strong { font-size: 12px; font-variant-numeric: tabular-nums; }
.folio .folio-savings-disclosure { border-top: 1px solid var(--f-line); }
.folio .folio-savings-disclosure > summary { display: flex; align-items: center; gap: 14px; padding: 16px 0; cursor: pointer; list-style: none; }
.folio .folio-savings-disclosure > summary::-webkit-details-marker { display: none; }
.folio .folio-savings-disclosure > summary span { font-size: 12px; font-weight: 500; }
.folio .folio-savings-disclosure > summary small { flex: 1; color: var(--f-muted); font-size: 12px; }
.folio .folio-savings-disclosure > summary > span:last-child { transform: rotate(-90deg); }
.folio .folio-savings-disclosure[open] > summary > span:last-child { transform: rotate(180deg); }
.folio .folio-savings-plan-fields { display: grid; gap: 14px; }
.folio .folio-savings-plan-check { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 9px; align-items: start; }
.folio .folio-savings-plan-check span { display: grid; gap: 3px; }
.folio .folio-savings-plan-check strong { font-size: 10px; }
.folio .folio-savings-plan-check small { color: var(--f-muted); font-size: 8.5px; line-height: 1.4; }
.folio .folio-savings-reserve { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.folio .folio-savings-reserve output { min-width: 38px; font: 600 11px/1 var(--f-font-mono); text-align: right; }
.folio .folio-savings-refresh-warning,
.folio .folio-savings-source-warning { display: flex; justify-content: space-between; gap: 16px; align-items: center; margin-bottom: 16px; padding: 12px 14px; border-left: 3px solid var(--f-red); background: var(--f-red-soft); color: var(--f-red); font-size: 10px; }
.folio .folio-savings-empty-person { display: flex; justify-content: space-between; gap: 22px; align-items: center; padding: 26px; border: 1px dashed var(--f-line-strong); border-radius: 10px; }
.folio .folio-savings-empty-person h3 { margin: 4px 0; font: 500 23px/1.1 var(--f-font-display); }
.folio .folio-savings-empty-person p:not(.folio-eyebrow) { margin: 0; color: var(--f-muted); font-size: 10px; }
.folio .folio-savings-evidence > summary { display: flex; justify-content: space-between; gap: 18px; align-items: center; cursor: pointer; list-style: none; }
.folio .folio-savings-evidence > summary::-webkit-details-marker { display: none; }
.folio .folio-savings-evidence > summary > span:first-child { display: grid; gap: 4px; }
.folio .folio-savings-evidence > summary strong { font: 500 23px/1 var(--f-font-display); }
.folio .folio-savings-evidence > summary small,
.folio .folio-savings-evidence > summary > span:last-child { color: var(--f-muted); font-size: 9px; }
.folio .folio-savings-evidence > div { margin-top: 18px; }
.folio .folio-savings-source-modal { max-height: min(92vh, 920px); }
.folio .folio-savings-source-modal .folio-modal__body { overflow-y: auto; }
.folio .folio-savings-source-editor { border: 0; box-shadow: none; }
.folio .folio-savings-source-editor > .folio-editor__body { padding-inline: 0; }
.folio .folio-editor__state[data-state="denied"] { color: var(--f-red); }

@container (max-width: 1000px) {
    .folio .folio-savings-person-sheet__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .folio .folio-savings-source-cell:nth-child(2) { border-right: 0; }
    .folio .folio-savings-source-cell:nth-child(n+3) { border-top: 1px solid var(--f-line); }
    .folio .folio-savings-person-sheet__metric { display: none; }
    .folio .folio-savings-person-sheet > summary { grid-template-columns: auto minmax(0, 1fr) auto; }
}

@media (max-width: 860px) {
    .folio .folio-savings-person-sheet > summary { grid-template-columns: auto minmax(0, 1fr) auto; }
    .folio .folio-savings-person-sheet__metric { display: none; }
}

@media (max-width: 620px) {
    .folio .folio-savings-sources-heading { align-items: flex-start; flex-direction: column; }
    .folio .folio-savings-inspection { padding: 16px; }
    .folio [data-savings-inspection-panel] > header { align-items: flex-start; }
    .folio [data-savings-inspection-panel] > header .folio-button { flex-shrink: 0; }
    .folio .folio-savings-disclosure > summary { flex-wrap: wrap; gap: 6px 12px; }
    .folio .folio-savings-disclosure > summary small { flex-basis: 100%; order: 3; }
    .folio .folio-savings-person-sheet > summary { grid-template-columns: auto minmax(0, 1fr) auto; gap: 11px; padding-inline: 14px; }
    .folio .folio-savings-person-sheet__metric { display: none; }
    .folio .folio-savings-person-sheet__grid { grid-template-columns: minmax(0, 1fr); }
    .folio .folio-savings-source-cell { min-height: 0; }
    .folio .folio-savings-source-cell:not(:last-child) { border-right: 0; }
    .folio .folio-savings-source-cell:nth-child(n+2) { border-top: 1px solid var(--f-line); }
    .folio .folio-savings-person-sheet__footer,
    .folio .folio-savings-empty-person,
    .folio .folio-savings-evidence > summary { align-items: flex-start; flex-direction: column; }
    .folio .folio-savings-refresh-warning,
    .folio .folio-savings-source-warning { align-items: flex-start; flex-direction: column; }
}

@media (max-height: 700px) {
    .folio .folio-savings-capacity { overflow-y: visible; }
}

@media (prefers-reduced-motion: reduce) {
    .folio .folio-savings-capacity *,
    .folio .folio-savings-source-modal * { scroll-behavior: auto; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}
/* Task visual key keeps owner identity, timing exceptions, and priority
   separate and explicitly labelled. */
.folio .folio-task-key { margin: 0 0 14px; border-bottom: 1px solid var(--f-line); }
.folio .folio-task-key > summary { display: inline-flex; min-height: 34px; align-items: center; color: var(--f-accent); font: 600 12px/1 var(--f-font-ui); cursor: pointer; }
.folio .folio-task-key__groups { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 18px; padding: 4px 0 14px; }
.folio .folio-task-key h2 { margin: 0 0 8px; color: var(--f-dim); font: 600 9px/1.2 var(--f-font-mono); letter-spacing: .11em; text-transform: uppercase; }
.folio .folio-task-key p { margin: 7px 0 0; color: var(--f-dim); font-size: 11px; }
.folio .folio-task-key__items { display: flex; flex-wrap: wrap; gap: 7px 12px; align-items: center; }
.folio .folio-task-key__item { display: inline-flex; align-items: center; gap: 6px; color: var(--f-dim); font-size: 11px; }
/* The key shows the same chip the cards show, so the legend and the queue can
   never disagree about which colour belongs to which person. */
.folio .folio-task-key__item .folio-owner-chip { padding: 3px 10px 3px 3px; border: 1px solid var(--folio-owner-color, var(--f-line-strong)); border-radius: 999px; background: var(--f-paper); }
.folio .folio-task-key__item .folio-owner-chip__mark { width: 21px; height: 21px; font-size: 8.5px; }
.folio .folio-task-key__item .folio-owner-chip__name { font-size: 11.5px; }
.folio .folio-task-key__chip { display: inline-flex; padding: 4px 7px; border-radius: 4px; font: 650 9px/1 var(--f-font-mono); letter-spacing: .05em; text-transform: uppercase; }
.folio .folio-task-key__chip--overdue { background: var(--f-red-soft); color: var(--f-red); }
.folio .folio-task-key__chip--today,
.folio .folio-task-key__chip--upcoming { background: var(--f-t-gold); color: #795400; }
@media (max-width: 760px) { .folio .folio-task-key__groups { grid-template-columns: 1fr; } }

/* ==========================================================================
   H · PRACTICE OVERVIEW
   Bespoke composition for the #overview route: the hero's supporting strip,
   the one full-bleed attention band, and the closing trust line. Card and
   figure-grid content elsewhere on the page uses the shared Folio card
   system directly and needs no route-local mapping.
   ========================================================================== */

/* --------------------------------------------------------------------------
   LEGACY TOKEN BRIDGE

   styles/business-overview.css declares --practice-sage/-amber/-teal/... on
   `.business-overview-page`, the cockpit shell the Folio rebuild deleted. No
   renderer emits that class any more, so all 61 rules that paint from those
   tokens resolve to an invalid value and paint NOTHING -- an empty
   distribution rail, an outlined box with no fill. Two of them were fixed at
   the source; the rest belong to markup on practice pages that have not been
   rebuilt yet.

   Rather than leave them dead until each page is migrated, the tokens are
   re-declared here on the Folio root, mapped onto the Folio ramp. Teal and
   indigo sit on neither palette arc (rules section 4), so they resolve to
   bronze and grey rather than being carried over. This block is bridge, not
   architecture: delete each entry when its last consumer is rebuilt.
   -------------------------------------------------------------------------- */

.folio {
    --practice-sage: var(--f-accent);
    --practice-sage-soft: var(--f-accent-soft);
    --practice-amber: var(--f-gold);
    --practice-amber-soft: var(--f-gold-soft);
    --practice-terracotta: var(--f-red);
    --practice-terracotta-soft: var(--f-red-soft);
    --practice-teal: var(--f-bronze);
    --practice-teal-soft: var(--f-bronze-soft);
    --practice-indigo: var(--f-muted);
    --practice-indigo-soft: var(--f-inset);
}

/* --------------------------------------------------------------------------
   THE PRACTICE RAIL

   One persistent strip of chrome for all nine practice routes: the section
   tabs, and -- for a user who can read more than their own book -- the scope
   the whole route resolves at. It sticks under the topbar so the way out of a
   long page is always one click away, and it is the ONLY place scope is
   changed (it used to be the identity row on Overview and the nav bar
   everywhere else, which made "where do I switch books" a per-page fact).

   It is a rail, not a card: one hairline underneath, canvas ground, no
   border-radius and no shadow. The tabs are the only thing with weight.
   -------------------------------------------------------------------------- */

.folio .practice-rail {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: end;
    gap: 0 28px;
    min-width: 0;
    margin-bottom: 0;
}
.folio .practice-rail.has-scope { grid-template-columns: minmax(0, 1fr) auto; }

.folio .practice-rail__tabs {
    display: flex;
    align-items: stretch;
    gap: 26px;
    min-width: 0;
    padding: 0;
    border: 0;
    overflow-x: auto;
    overflow-y: hidden;
}
.folio .practice-rail__tabs .advisor-tab {
    position: relative;
    flex: none;
    min-height: 0;
    padding: 13px 1px 12px;
    border: 0;
    background: none;
    color: var(--f-muted);
    font: 500 12.5px/1 var(--f-font-ui);
    letter-spacing: 0;
    white-space: nowrap;
    cursor: pointer;
    transition: color 140ms ease;
}
.folio .practice-rail__tabs .advisor-tab:hover { color: var(--f-ink); }
.folio .practice-rail__tabs .advisor-tab.is-active { color: var(--f-ink); font-weight: 600; }
/* the underline sits ON the rail's hairline, not one pixel under it -- a
   pixel of vertical overflow in a horizontal scroller earns a scrollbar */
.folio .practice-rail__tabs .advisor-tab.is-active::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 2px;
    border-radius: 1px 1px 0 0;
    background: var(--f-accent);
    content: "";
}

/* The scope control reads as one compact statement -- "Scope: Firm aggregate"
   -- rather than a stacked form field, because it is chrome, not an input the
   reader is being asked to fill in. */
.folio .practice-rail__scope {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 0 6px;
}
.folio .practice-rail__scope .business-overview-advisor-filter {
    display: flex;
    align-items: baseline;
    gap: 9px;
    min-width: 0;
    width: auto;
}
.folio .business-overview-advisor-filter { display: grid; gap: 5px; min-width: 190px; }
.folio .business-overview-advisor-filter > span:first-child {
    color: var(--f-bronze);
    font: 500 9.5px/1 var(--f-font-mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.folio .business-overview-advisor-select { border-bottom-color: var(--f-line-strong); }
.folio .business-overview-advisor-select:focus-within { border-bottom-color: var(--f-accent); }
.folio .business-overview-advisor-filter select {
    color: var(--f-ink);
    font: 450 13px/1.35 var(--f-font-ui);
}
.folio .practice-rail__scope .business-overview-advisor-filter select {
    min-height: 26px;
    font-weight: 550;
}
.folio .business-overview-advisor-select-chevron { color: var(--f-muted); }

@media (max-width: 860px) {
    .folio .practice-rail,
    .folio .practice-rail.has-scope { grid-template-columns: minmax(0, 1fr); }
    .folio .practice-rail__scope { justify-content: flex-start; padding: 0 0 10px; }
}
.folio .practice-overview-relationship {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 26px;
    padding: 18px 0 26px;
    border-bottom: 1px solid var(--f-line);
}
.folio .practice-overview-relationship-head {
    display: grid;
    flex: none;
    gap: 2px;
    min-width: 170px;
}
.folio .practice-overview-relationship-head span {
    color: var(--f-ink);
    font: 600 12px/1.3 var(--f-font-ui);
}
.folio .practice-overview-relationship-head small {
    color: var(--f-dim);
    font-size: 11px;
}
.folio .practice-overview-relationship .practice-composition {
    flex: 1;
    min-width: 260px;
}

/* --------------------------------------------------------------------------
   THE DISTRIBUTION BAR

   Its colours used to come from --practice-sage/-amber/-teal, which are
   declared on `.business-overview-page` -- the old cockpit shell this route no
   longer renders. Every segment except the two with literal hex values
   resolved to an invalid colour and painted nothing, so a book of 129 active
   households drew an empty rail. The bar is data, so it states its own palette
   here, on the Folio ramp: grey (not yet ours) -> gold -> bronze -> green
   (arrived). Stage reads as progress without a legend.
   -------------------------------------------------------------------------- */

.folio .practice-composition { display: grid; gap: 9px; min-width: 0; }
.folio .practice-composition-track {
    display: flex;
    gap: 2px;
    width: 100%;
    height: 10px;
    overflow: hidden;
    border-radius: var(--f-radius-pill);
    background: var(--f-inset);
}
.folio .practice-composition-segment {
    min-width: 3px;
    border-radius: var(--f-radius-pill);
    background: var(--f-faint);
}
.folio .practice-composition-segment.is-prospects { background: var(--f-faint); }
.folio .practice-composition-segment.is-assessments { background: var(--f-gold-bright); }
.folio .practice-composition-segment.is-onboarding { background: var(--f-bronze); }
.folio .practice-composition-segment.is-active { background: var(--f-accent); }
.folio .practice-composition-segment.is-assets,
.folio .practice-composition-segment.is-open,
.folio .practice-composition-segment.is-due-soon { background: var(--f-gold-bright); }
.folio .practice-composition-segment.is-protection,
.folio .practice-composition-segment.is-missing,
.folio .practice-composition-segment.is-overdue { background: var(--f-red); }
.folio .practice-composition-segment.is-tax_benefits,
.folio .practice-composition-segment.is-reviewed,
.folio .practice-composition-segment.is-discussing { background: var(--f-bronze); }
.folio .practice-composition-segment.is-data { background: var(--f-faint); }
.folio .practice-composition-segment.is-current,
.folio .practice-composition-segment.is-pursuing { background: var(--f-accent); }
.folio .practice-composition-segment.is-empty { background: var(--f-line); }

.folio .practice-composition-legend { display: flex; flex-wrap: wrap; gap: 5px 16px; }
.folio .practice-composition-legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--f-muted);
    font: 450 11.5px/1.3 var(--f-font-ui);
}
.folio .practice-composition-legend b {
    color: var(--f-ink);
    font: 600 11.5px/1.3 var(--f-font-mono);
    font-variant-numeric: tabular-nums;
}
.folio .practice-composition-legend em {
    color: var(--f-dim);
    font-size: 11px;
    font-style: normal;
}
.folio .practice-composition-legend i {
    width: 7px;
    height: 7px;
    flex: none;
    border-radius: 50%;
    background: var(--f-faint);
}
.folio .practice-composition-legend i.is-prospects { background: var(--f-faint); }
.folio .practice-composition-legend i.is-assessments { background: var(--f-gold-bright); }
.folio .practice-composition-legend i.is-onboarding { background: var(--f-bronze); }
.folio .practice-composition-legend i.is-active { background: var(--f-accent); }
.folio .practice-composition-legend i.is-assets,
.folio .practice-composition-legend i.is-open,
.folio .practice-composition-legend i.is-due-soon { background: var(--f-gold-bright); }
.folio .practice-composition-legend i.is-protection,
.folio .practice-composition-legend i.is-missing,
.folio .practice-composition-legend i.is-overdue { background: var(--f-red); }
.folio .practice-composition-legend i.is-tax_benefits,
.folio .practice-composition-legend i.is-reviewed,
.folio .practice-composition-legend i.is-discussing { background: var(--f-bronze); }
.folio .practice-composition-legend i.is-data { background: var(--f-faint); }
.folio .practice-composition-legend i.is-current,
.folio .practice-composition-legend i.is-pursuing { background: var(--f-accent); }

.folio .practice-overview-evidence {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 22px;
    padding: 16px 0 0;
    color: var(--f-dim);
    font-size: 11.5px;
}
.folio .practice-overview-evidence strong { color: var(--f-ink); font-weight: 650; }
.folio .practice-overview-evidence span { display: inline-flex; align-items: center; gap: 6px; }
.folio .practice-overview-evidence .is-warning { color: var(--f-bronze); }
.folio .practice-overview-evidence .is-warning .practice-status-dot { background: var(--f-bronze); }
.folio .practice-overview-evidence .is-healthy { color: var(--f-accent); }
.folio .practice-overview-evidence .is-healthy .practice-status-dot { background: var(--f-accent); }

/* --------------------------------------------------------------------------
   THE ATTENTION QUEUE

   It was a full-bleed hard-cut band holding three parallel lanes of small
   text. The band is 3.3 lightness points under the canvas, so behind a column
   of 12px rows it read as a highlighter over content that was already there --
   the exact failure the band law warns about, and the section got skimmed.

   The tint is gone. Weight now comes from where the surface sits in the stack:
   one dark card (g-forest, "status weight") on the light canvas, carrying a
   single ranked queue. The rows are the only dark thing on the page, so the
   eye lands on them before anything else, and nothing else on the page had to
   get louder to make that happen.
   -------------------------------------------------------------------------- */

.folio .practice-queue {
    padding: 0;
    overflow: hidden;
    box-shadow: 0 20px 46px rgba(30, 40, 35, 0.16);
}

.folio .practice-queue__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 20px 36px;
    padding: 24px 26px 21px;
    border-bottom: 1px solid rgba(240, 232, 216, 0.12);
}
.folio .practice-queue__lead { min-width: 0; }
.folio .practice-queue__lead .eyebrow {
    margin: 0 0 9px;
    color: #8fc4a4;
    font: 500 9.5px/1 var(--f-font-mono);
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
/* The conclusion, not the count: how long the oldest thing has waited. The
   number of things waiting is real and stays, one line below and again in the
   three counters -- present, subordinate, one glance away. */
.folio .practice-queue__lead h3 {
    margin: 0;
    color: var(--f-on-dark);
    font: 400 clamp(20px, 1.9vw, 26px)/1.16 var(--f-font-display);
    letter-spacing: -0.012em;
}
.folio .practice-queue__lead p {
    max-width: 60ch;
    margin: 8px 0 0;
    color: var(--f-on-dark-dim);
    font: 400 12.5px/1.5 var(--f-font-ui);
}

.folio .practice-queue__counts { display: flex; flex: none; }
.folio .practice-queue__count {
    display: grid;
    gap: 7px;
    padding: 2px 0 2px 20px;
    margin-left: 20px;
    border: 0;
    border-left: 1px solid rgba(240, 232, 216, 0.14);
    background: transparent;
    text-align: left;
    cursor: pointer;
}
.folio .practice-queue__count:first-child { margin-left: 0; padding-left: 0; border-left: 0; }
.folio .practice-queue__count > span {
    color: rgba(240, 232, 216, 0.55);
    font: 500 8.5px/1.3 var(--f-font-mono);
    letter-spacing: 0.13em;
    text-transform: uppercase;
    white-space: nowrap;
}
/* A figure does not change colour with its status -- a zero is quieter than a
   non-zero, which is emphasis, not a status light. */
.folio .practice-queue__count > b {
    color: rgba(240, 232, 216, 0.38);
    font: 400 25px/1 var(--f-font-display);
    font-variant-numeric: tabular-nums;
}
.folio .practice-queue__count > b.is-open { color: var(--f-on-dark); }
.folio .practice-queue__count:hover > span { color: #8fc4a4; }

.folio .practice-queue__rows { margin: 0; padding: 0; list-style: none; }
.folio .practice-queue__row {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 4px 16px;
    padding: 13px 26px;
    border-bottom: 1px solid rgba(240, 232, 216, 0.07);
}
.folio .practice-queue__row:last-child { border-bottom: 0; }
/* how long it has waited leads the row, in tabular mono, so the list can be
   read as a ranking without reading a single title */
.folio .practice-queue__age {
    color: #8fc4a4;
    font: 500 12px/1 var(--f-font-mono);
    font-variant-numeric: tabular-nums;
    text-align: right;
}
.folio .practice-queue__body { display: grid; gap: 3px; min-width: 0; }
.folio .practice-queue__body b {
    color: var(--f-on-dark);
    font: 550 13.5px/1.35 var(--f-font-ui);
    overflow-wrap: anywhere;
}
.folio .practice-queue__body span {
    color: var(--f-on-dark-dim);
    font: 400 11.5px/1.4 var(--f-font-ui);
}
.folio .practice-queue__kind {
    flex: none;
    min-width: 78px;
    padding: 3px 9px 4px;
    text-align: center;
    border: 1px solid currentColor;
    border-radius: var(--f-radius-pill);
    font: 500 8.5px/1.3 var(--f-font-mono);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
}
.folio .practice-queue__kind.is-red { color: #e79a86; }
.folio .practice-queue__kind.is-clay { color: #dcb094; }
.folio .practice-queue__kind.is-gold { color: #ddc078; }
.folio .practice-queue__kind.is-bronze { color: #c4b28d; }

.folio .practice-queue .folio-cardlink {
    border-color: rgba(240, 232, 216, 0.22);
    color: rgba(240, 232, 216, 0.82);
}
.folio .practice-queue .folio-cardlink:hover {
    border-color: #8fc4a4;
    background: rgba(240, 232, 216, 0.07);
    color: var(--f-on-dark);
}

.folio .practice-queue__more {
    margin: 0;
    padding: 13px 26px 0;
    color: var(--f-on-dark-dim);
    font: 400 11.5px/1.4 var(--f-font-ui);
}
.folio .practice-queue__foot {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    padding: 16px 26px 19px;
}
.folio .practice-queue__foot .folio-cardlink { margin-left: 0; }

/* --------------------------------------------------------------------------
   THE 14-DAY AGENDA

   No longer a titled section of its own directly under the queue -- two
   sections built from the same three record types, one after the other, read
   as the page asking the same question twice. It is the second half of the
   attention queue: what is late, then what is next. A dated list, so it is
   ruled like one, and leaving a row is navigation, never a commit button.
   -------------------------------------------------------------------------- */

.folio .practice-agenda { margin-top: 32px; }
.folio .practice-agenda__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px 26px;
    padding-bottom: 13px;
}
.folio .practice-agenda__head .eyebrow {
    margin: 0 0 5px;
    color: var(--f-bronze);
    font: 500 9.5px/1 var(--f-font-mono);
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.folio .practice-agenda__head h3 {
    margin: 0;
    color: var(--f-ink);
    font: 400 19px/1.2 var(--f-font-display);
    letter-spacing: -0.01em;
}
.folio .practice-event-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
}

/* --------------------------------------------------------------------------
   A CARD'S READING

   One figure and the sentence that says what it means, above whatever the card
   draws. It replaces the four-cell figure grid that used to sit on top of the
   trajectory chart, which reprinted the hero's glance grid verbatim: the card
   looked full and told the reader nothing new.
   -------------------------------------------------------------------------- */

.folio .practice-reading {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 14px;
    margin: 0 0 17px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--f-line);
}
.folio .practice-reading > b {
    color: var(--f-ink);
    font: 400 clamp(25px, 2.5vw, 32px)/1 var(--f-font-display);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    white-space: nowrap;
}
.folio .practice-reading > b.pos { color: var(--f-green); }
.folio .practice-reading > b.neg { color: var(--f-red); }
.folio .practice-reading > span {
    flex: 1;
    min-width: 190px;
    color: var(--f-muted);
    font: 400 12px/1.45 var(--f-font-ui);
}

/* --------------------------------------------------------------------------
   VALUE LANES

   Deployable cash, savings shortfall, uncaptured employer match and unvested
   equity used to be three separate evenly weighted cards printing two figures
   each. They are four readings of one question, so they are four rules of one
   list: label, amount, and the sentence naming the threshold the amount is
   measured against. None of these numbers means anything without it.
   -------------------------------------------------------------------------- */

.folio .practice-lanes { margin: 0; padding: 0; list-style: none; }
.folio .practice-lane {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0 16px;
    padding: 16px 0;
    border-top: 1px solid var(--f-line);
}
.folio .practice-lane:first-child { padding-top: 2px; border-top: 0; }
.folio .practice-lane > span {
    grid-column: 1;
    grid-row: 1;
    color: var(--f-bronze);
    font: 500 9.5px/1 var(--f-font-mono);
    letter-spacing: 0.13em;
    text-transform: uppercase;
}
.folio .practice-lane > b {
    grid-column: 1;
    grid-row: 2;
    margin-top: 6px;
    color: var(--f-ink);
    font: 400 24px/1.05 var(--f-font-display);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.015em;
}
.folio .practice-lane > b.gold { color: var(--f-bronze); }
.folio .practice-lane > b.neg { color: var(--f-red); }
.folio .practice-lane > small {
    grid-column: 1 / -1;
    grid-row: 3;
    margin-top: 7px;
    color: var(--f-dim);
    font: 400 11.5px/1.5 var(--f-font-ui);
}
.folio .practice-lane > .folio-cardlink {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
}

/* --------------------------------------------------------------------------
   THE HOUSEHOLD BOARD

   Every figure above this point is a firm-level aggregate, and an advisor's
   next action is always household-scoped. idle_cash.items and
   savings_realization.largest_shortfalls both name the household and the page
   used to render only their counts. Joined and ranked, they answer the one
   question the aggregates cannot: who do I call.

   It is ruled rows on the canvas rather than a third card -- the section
   already carries two, and a third of the same weight is the stacked-card
   failure mode.
   -------------------------------------------------------------------------- */

.folio .practice-board { margin-top: 30px; }
.folio .practice-board__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 8px 30px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--f-line-strong);
}
.folio .practice-board__head .eyebrow {
    margin: 0 0 5px;
    color: var(--f-bronze);
    font: 500 9.5px/1 var(--f-font-mono);
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.folio .practice-board__title {
    margin: 0;
    color: var(--f-ink);
    font: 400 19px/1.2 var(--f-font-display);
    letter-spacing: -0.01em;
}
.folio .practice-board__note {
    max-width: 48ch;
    margin: 0;
    color: var(--f-dim);
    font: 400 11.5px/1.45 var(--f-font-ui);
    text-align: right;
}
.folio .practice-board__rows { margin: 0; padding: 0; list-style: none; }
.folio .practice-board__row {
    display: grid;
    grid-template-columns: minmax(190px, 300px) 210px 210px minmax(0, 1fr);
    align-items: center;
    gap: 10px 26px;
    padding: 15px 0;
    border-bottom: 1px solid var(--f-line);
}
.folio .practice-board__id { min-width: 0; }
.folio .practice-board__id b {
    display: block;
    color: var(--f-ink);
    font: 500 15px/1.2 var(--f-font-display);
    letter-spacing: -0.008em;
}
.folio .practice-board__id em {
    display: block;
    margin-top: 3px;
    color: var(--f-dim);
    font: 400 10.5px/1.3 var(--f-font-ui);
    font-style: normal;
}
.folio .practice-board__fig { display: grid; gap: 3px; min-width: 0; }
.folio .practice-board__fig i {
    color: var(--f-dim);
    font: 500 8.5px/1.3 var(--f-font-mono);
    font-style: normal;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.folio .practice-board__fig b {
    color: var(--f-ink);
    font: 400 17px/1.1 var(--f-font-display);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.folio .practice-board__fig b.neg { color: var(--f-red); }
.folio .practice-board__fig em {
    color: var(--f-dim);
    font: 400 10.5px/1.35 var(--f-font-ui);
    font-style: normal;
}
.folio .practice-board__foot,
.folio .practice-board--empty p {
    margin: 13px 0 0;
    color: var(--f-dim);
    font: 400 11px/1.55 var(--f-font-ui);
}

.folio .practice-overview-section--value .folio-cols--2 { align-items: start; }

@media (max-width: 1040px) {
    .folio .practice-board__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .folio .practice-board__id { grid-column: 1 / -1; }
    .folio .practice-board__row > .folio-cardlink { grid-column: 2; justify-self: end; }
}

@media (max-width: 860px) {
    .folio .practice-queue__head { grid-template-columns: minmax(0, 1fr); }
    .folio .practice-queue__counts { flex-wrap: wrap; gap: 14px 0; }
    .folio .practice-queue__row {
        grid-template-columns: 40px minmax(0, 1fr) auto;
        padding-inline: 18px;
    }
    .folio .practice-queue__row > .folio-cardlink { grid-column: 2 / -1; justify-self: start; margin-left: 0; }
    .folio .practice-queue__head,
    .folio .practice-queue__foot,
    .folio .practice-queue__more { padding-inline: 18px; }
    .folio .practice-board__note { text-align: left; }
}

@media (max-width: 620px) {
    .folio .practice-board__row { grid-template-columns: minmax(0, 1fr); }
    .folio .practice-board__row > .folio-cardlink { grid-column: 1; justify-self: start; }
    .folio .practice-lane { grid-template-columns: minmax(0, 1fr); }
    .folio .practice-lane > .folio-cardlink { grid-column: 1; grid-row: 4; margin: 9px 0 0; }
}

/* --------------------------------------------------------------------------
   COMPACT STATES

   These were a bordered box whose fill came from --practice-teal-soft, a token
   that died with the old cockpit shell: the color-mix() resolved to nothing,
   leaving an empty outlined rectangle that read as a failed load. A healthy
   result ("no idle cash") and an unavailable one are both statements, not
   alerts, so they are set as quiet text on the card ground -- the healthy one
   led by the same status dot the evidence footer uses.
   -------------------------------------------------------------------------- */

.folio :is(.practice-compact-state, .practice-trust-banner) {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    min-height: 0;
    padding: 12px 0 2px;
    border: 0;
    border-top: 1px solid var(--f-line);
    border-radius: 0;
    background: transparent;
}
.folio :is(.practice-compact-state, .practice-trust-banner) > div { display: grid; gap: 3px; min-width: 0; }
.folio :is(.practice-compact-state, .practice-trust-banner) strong {
    color: var(--f-ink);
    font: 550 13px/1.35 var(--f-font-ui);
}
.folio :is(.practice-compact-state, .practice-trust-banner) small {
    color: var(--f-dim);
    font: 400 11.5px/1.45 var(--f-font-ui);
}
.folio :is(.practice-compact-state, .practice-trust-banner).is-healthy strong { color: var(--f-accent); }
.folio .practice-compact-state .practice-status-dot {
    width: 7px;
    height: 7px;
    margin-top: 5px;
    flex: none;
    border-radius: 50%;
    background: var(--f-accent);
}

/* Momentum: two cards of honestly different length. Stretching the shorter one
   to match the chart card just moved the emptiness inside its border. */
.folio .practice-overview-section--momentum .folio-cols--2 { align-items: start; }

/* --------------------------------------------------------------------------
   THE 14-DAY AGENDA
   A dated list, so it is ruled like one: the date leads in tabular mono, the
   kind of event is an eyebrow over its title, and leaving a row is navigation
   (.folio-cardlink), never a button that looks like it commits something.
   -------------------------------------------------------------------------- */

.folio .practice-event-list {
    display: grid;
    gap: 0;
    border-top: 1px solid var(--f-line);
}
.folio .practice-event-row {
    display: grid;
    grid-template-columns: minmax(96px, auto) minmax(0, 1fr) auto;
    gap: 8px 22px;
    align-items: baseline;
    padding: 13px 0;
    border-bottom: 1px solid var(--f-line);
}
.folio .practice-event-row time {
    color: var(--f-ink);
    font: 500 11.5px/1.5 var(--f-font-mono);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.folio .practice-event-row > div { display: grid; gap: 3px; min-width: 0; }
.folio .practice-event-row > div > span {
    color: var(--f-bronze);
    font: 500 9px/1 var(--f-font-mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.folio .practice-event-row > div > strong {
    color: var(--f-ink);
    font: 550 14px/1.35 var(--f-font-ui);
    overflow-wrap: anywhere;
}
.folio .practice-event-row > div > small { color: var(--f-dim); font-size: 11.5px; }
.folio .practice-event-row .folio-cardlink { align-self: center; }

@media (max-width: 860px) {
    .folio .practice-event-row {
        grid-template-columns: minmax(0, 1fr) auto;
    }
    .folio .practice-event-row time { grid-column: 1 / -1; }
}

/* ==========================================================================
   HOUSEHOLD CASHFLOW
   --------------------------------------------------------------------------
   The route composes Folio hero, scope, section, card, figure, band, and
   evidence primitives. Domain selectors below own only charts, the dense
   account disclosure, and the transaction ledger anatomy.
   ========================================================================== */

.folio .household-cashflow-folio {
    --cashflow-green: var(--f-sage);
    --cashflow-green-soft: var(--f-t-sage);
    --cashflow-red: var(--f-clay);
    --cashflow-red-soft: var(--f-t-clay);
    --cashflow-blue: var(--f-teal);
    --cashflow-blue-soft: var(--f-t-grey);
    --cashflow-gold: var(--f-gold);
    --cashflow-gold-soft: var(--f-t-gold);
}

.folio .household-cashflow-folio > .folio-hero { padding-bottom: 24px; }
.folio .household-cashflow-folio .cashflow-filter-dock { top: var(--advisor-topbar-height, 76px); margin-bottom: 0; }
.folio .household-cashflow-folio .cashflow-filter-groups,
.folio .household-cashflow-folio .cashflow-filter-context,
.folio .household-cashflow-folio .cashflow-custom-dates,
.folio .household-cashflow-folio .cashflow-scope-status { display: flex; align-items: center; gap: 9px; }
.folio .household-cashflow-folio .cashflow-filter-context:empty { display: none; }
.folio .household-cashflow-folio .cashflow-filter-divider { width: 1px; height: 26px; background: var(--f-line-strong); }
.folio .household-cashflow-folio .cashflow-custom-dates label { display: flex; align-items: center; gap: 6px; color: var(--f-dim); font: 550 10px/1 var(--f-font-mono); letter-spacing: .08em; text-transform: uppercase; }
.folio .household-cashflow-folio .cashflow-custom-dates .advisor-date-picker { min-width: 148px; }
.folio .household-cashflow-folio .cashflow-scope-status { gap: 8px; }
.folio .household-cashflow-folio .cashflow-scope-status b { color: var(--f-ink); font: 600 11px/1.3 var(--f-font-ui); }
.folio .household-cashflow-folio .cashflow-scope-status span { color: var(--f-dim); font: 500 9.5px/1.3 var(--f-font-mono); letter-spacing: .06em; text-transform: uppercase; }
.folio .household-cashflow-folio .cashflow-active-chip { border-color: var(--f-gold); background: var(--f-t-gold); color: var(--f-bronze-deep); }
.folio .household-cashflow-folio .cashflow-retry { margin-top: 12px; }

.folio .household-cashflow-folio .cashflow-trust-grid { align-items: stretch; }
.folio .household-cashflow-folio .cashflow-trust-grid > .folio-card { height: 100%; }
.folio .household-cashflow-folio .cashflow-card-lede { max-width: 74ch; margin: -2px 0 15px; color: var(--f-dim); font: 400 12px/1.55 var(--f-font-ui); }
.folio .household-cashflow-folio .cashflow-coverage-panel .folio-chip { margin-left: auto; }
.folio .household-cashflow-folio .cashflow-coverage-panel .folio-figgrid { margin-bottom: 14px; }
.folio .household-cashflow-folio .cashflow-coverage-reasons { display: grid; gap: 0; margin: 0 0 14px; padding: 0; border-top: 1px solid var(--f-line); list-style: none; }
.folio .household-cashflow-folio .cashflow-coverage-reasons li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 9px; align-items: baseline; padding: 9px 0; border-bottom: 1px solid var(--f-line); }
.folio .household-cashflow-folio .cashflow-coverage-reasons li > span { width: 7px; height: 7px; border-radius: 50%; background: var(--f-teal); }
.folio .household-cashflow-folio .cashflow-coverage-reasons li.warning > span { background: var(--f-gold); }
.folio .household-cashflow-folio .cashflow-coverage-reasons li.critical > span { background: var(--f-red); }
.folio .household-cashflow-folio .cashflow-coverage-reasons p { margin: 0; color: var(--f-muted); font: 400 11px/1.45 var(--f-font-ui); }
.folio .household-cashflow-folio .cashflow-coverage-panel .folio-cardlink { margin: 0; }
.folio .household-cashflow-folio .cashflow-movement-card .total-rule { margin-top: 15px; }

.folio .household-cashflow-folio :is(.cashflow-monthly-panel, .cashflow-sankey-panel) { overflow: hidden; padding: 0; border-color: var(--f-line-strong); border-radius: var(--f-radius-lg); background: var(--f-paper); box-shadow: var(--f-shadow); }
.folio .household-cashflow-folio :is(.cashflow-monthly-panel, .cashflow-sankey-panel) > .folio-ch { margin: 0; padding: 18px 20px 13px; border-bottom: 1px solid var(--f-line); }
.folio .household-cashflow-folio :is(.cashflow-monthly-panel, .cashflow-sankey-panel) > .cashflow-card-lede { margin: 0; padding: 13px 20px 4px; }
.folio .household-cashflow-folio .cashflow-observed-only { margin-left: auto; color: var(--f-sage); font: 600 9px/1 var(--f-font-mono); letter-spacing: .12em; text-transform: uppercase; }
.folio .household-cashflow-folio .cashflow-monthly-legend { display: flex; justify-content: flex-end; gap: 16px; padding: 8px 20px 0; color: var(--f-dim); font: 600 8.5px/1 var(--f-font-mono); letter-spacing: .08em; text-transform: uppercase; }
.folio .household-cashflow-folio .cashflow-monthly-legend span { display: inline-flex; align-items: center; gap: 6px; }
.folio .household-cashflow-folio .cashflow-monthly-legend span::before { width: 14px; height: 4px; border-radius: 999px; background: var(--f-teal); content: ""; }
.folio .household-cashflow-folio .cashflow-monthly-legend .inflow::before { background: var(--f-sage); }
.folio .household-cashflow-folio .cashflow-monthly-legend .outflow::before { background: var(--f-clay); }
.folio .household-cashflow-folio .cashflow-monthly-legend .net::before { height: 2px; background: var(--f-ink); }
.folio .household-cashflow-folio .cashflow-monthly-legend .average::before { height: 0; border-top: 2px dashed var(--f-gold); border-radius: 0; background: transparent; }
.folio .household-cashflow-folio .cashflow-monthly-chart { min-height: 360px; overflow-x: auto; padding: 0 12px 10px; }
.folio .household-cashflow-folio .cashflow-monthly-chart svg { display: block; width: 100%; min-width: 820px; height: auto; }
.folio .household-cashflow-folio .cashflow-monthly-grid line { stroke: var(--f-line); }
.folio .household-cashflow-folio .cashflow-monthly-grid path { display: none; }
.folio .household-cashflow-folio .cashflow-monthly-zero { stroke: var(--f-faint); stroke-width: 1; }
.folio .household-cashflow-folio .cashflow-monthly-bar.inflow { fill: var(--f-sage); opacity: .78; }
.folio .household-cashflow-folio .cashflow-monthly-bar.outflow { fill: var(--f-clay); opacity: .72; }
.folio .household-cashflow-folio .cashflow-monthly-line { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.folio .household-cashflow-folio .cashflow-monthly-line.net { stroke: var(--f-ink); stroke-width: 2.2; }
.folio .household-cashflow-folio .cashflow-monthly-line.average { stroke: var(--f-gold); stroke-width: 2; stroke-dasharray: 5 4; }
.folio .household-cashflow-folio .cashflow-monthly-net-point { fill: var(--f-paper); stroke: var(--f-ink); stroke-width: 1.5; }
.folio .household-cashflow-folio .cashflow-monthly-axis :is(path, line) { stroke: var(--f-line-strong); }
.folio .household-cashflow-folio .cashflow-monthly-axis text { fill: var(--f-dim); font: 600 9px/1 var(--f-font-mono); }

.folio .household-cashflow-folio .cashflow-sankey-panel .advisor-segmented { margin-left: auto; }
.folio .household-cashflow-folio .cashflow-sankey-legend { display: grid; grid-template-columns: repeat(3, 1fr); padding: 10px 28px 5px; color: var(--f-dim); font: 600 9px/1 var(--f-font-mono); letter-spacing: .1em; text-transform: uppercase; }
.folio .household-cashflow-folio .cashflow-sankey-legend .inflow { color: var(--f-sage); }
.folio .household-cashflow-folio .cashflow-sankey-legend .account { color: var(--f-gold); text-align: center; }
.folio .household-cashflow-folio .cashflow-sankey-legend .outflow { color: var(--f-clay); text-align: right; }
.folio .household-cashflow-folio .cashflow-sankey-chart { min-height: 440px; overflow-x: auto; padding: 0 12px; }
.folio .household-cashflow-folio .cashflow-sankey-chart svg { display: block; width: 100%; min-width: 860px; height: auto; }
.folio .household-cashflow-folio .cashflow-sankey-links path { fill: none; stroke-opacity: .42; transition: stroke-opacity 140ms ease; }
.folio .household-cashflow-folio .cashflow-sankey-links path:hover { stroke-opacity: .7; }
.folio .household-cashflow-folio .cashflow-sankey-links path.interactive,
.folio .household-cashflow-folio .cashflow-sankey-node.interactive { cursor: pointer; }
.folio .household-cashflow-folio .cashflow-sankey-node.interactive rect { stroke: var(--f-paper); stroke-width: 1px; }
.folio .household-cashflow-folio .cashflow-sankey-node.interactive:is(:hover, :focus) rect { stroke: var(--f-ink); stroke-width: 2px; }
.folio .household-cashflow-folio .cashflow-sankey-label { fill: var(--f-ink); font: 650 11px/1 var(--f-font-ui); }
.folio .household-cashflow-folio .cashflow-sankey-amount { fill: var(--f-dim); font: 550 10px/1 var(--f-font-mono); }
.folio .household-cashflow-folio .cashflow-sankey-leader { stroke: var(--f-line-strong); stroke-width: 1; stroke-dasharray: 2 2; }
.folio .household-cashflow-folio .cashflow-chart-note { margin: 0; padding: 11px 20px 14px; border-top: 1px solid var(--f-line); }
.folio .household-cashflow-folio .cashflow-chart-note summary { width: fit-content; color: var(--f-muted); cursor: pointer; font: 600 11px/1.3 var(--f-font-ui); }
.folio .household-cashflow-folio .cashflow-chart-note p { max-width: 82ch; margin: 8px 0 0; color: var(--f-dim); font: 400 11px/1.5 var(--f-font-ui); }

.folio .household-cashflow-folio .cashflow-recurring-intro { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; margin-bottom: 12px; }
.folio .household-cashflow-folio .cashflow-recurring-intro p { max-width: 72ch; margin: 0; color: var(--f-dim); }
.folio .household-cashflow-folio .cashflow-recurring-intro > span { flex: none; color: var(--f-bronze); font: 600 9px/1 var(--f-font-mono); letter-spacing: .1em; text-transform: uppercase; }
.folio .household-cashflow-folio .cashflow-recurring-list { border-top: 1px solid var(--f-line-strong); }
.folio .household-cashflow-folio .cashflow-recurring-record { display: grid; grid-template-columns: minmax(220px, 1.3fr) minmax(120px, .45fr) minmax(330px, 1fr); gap: 22px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--f-line); }
.folio .household-cashflow-folio .cashflow-recurring-record__identity { display: grid; gap: 3px; min-width: 0; }
.folio .household-cashflow-folio .cashflow-recurring-record__identity > span { color: var(--f-bronze); font: 600 8.5px/1 var(--f-font-mono); letter-spacing: .1em; text-transform: uppercase; }
.folio .household-cashflow-folio .cashflow-recurring-record__identity > strong { overflow: hidden; color: var(--f-ink); font: 560 13px/1.35 var(--f-font-ui); text-overflow: ellipsis; white-space: nowrap; }
.folio .household-cashflow-folio .cashflow-recurring-record__identity > small { color: var(--f-dim); font: 400 10px/1.35 var(--f-font-ui); }
.folio .household-cashflow-folio .cashflow-recurring-record__amount { display: grid; gap: 2px; }
.folio .household-cashflow-folio .cashflow-recurring-record__amount strong { font: 400 21px/1.1 var(--f-font-display); white-space: nowrap; }
.folio .household-cashflow-folio .cashflow-recurring-record__amount span { color: var(--f-dim); font: 500 8.5px/1 var(--f-font-mono); letter-spacing: .08em; text-transform: uppercase; }
.folio .household-cashflow-folio .cashflow-recurring-record dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; }
.folio .household-cashflow-folio .cashflow-recurring-record dl > div { min-width: 0; }
.folio .household-cashflow-folio .cashflow-recurring-record dt { color: var(--f-faint); font: 600 8px/1 var(--f-font-mono); letter-spacing: .08em; text-transform: uppercase; }
.folio .household-cashflow-folio .cashflow-recurring-record dd { margin: 4px 0 0; color: var(--f-ink); font: 550 10.5px/1.3 var(--f-font-ui); white-space: nowrap; }

.folio .household-cashflow-folio .cashflow-evidence-stack { display: grid; gap: 22px; }
.folio .household-cashflow-folio .cashflow-account-list { display: grid; gap: 9px; }
.folio .household-cashflow-folio .cashflow-account-card { overflow: hidden; padding: 0; border-color: var(--f-line-strong); box-shadow: none; }
.folio .household-cashflow-folio .cashflow-account-card > summary { display: grid; grid-template-columns: minmax(230px, 1.2fr) minmax(380px, 1fr) auto; gap: 22px; align-items: center; padding: 15px 18px; cursor: pointer; list-style: none; }
.folio .household-cashflow-folio .cashflow-account-card > summary::-webkit-details-marker { display: none; }
.folio .household-cashflow-folio .cashflow-account-card[open] > summary { border-bottom: 1px solid var(--f-line); background: var(--f-quiet); }
.folio .household-cashflow-folio .cashflow-account-identity { display: flex; align-items: center; gap: 12px; min-width: 0; }
.folio .household-cashflow-folio .cashflow-account-icon { display: grid; width: 34px; height: 34px; flex: none; place-items: center; border: 1px solid var(--f-line-strong); border-radius: 7px; background: var(--f-t-grey); color: var(--f-teal); }
.folio .household-cashflow-folio .cashflow-account-icon--cash { background: var(--f-t-sage); color: var(--f-sage); }
.folio .household-cashflow-folio .cashflow-account-icon--investment { background: var(--f-t-grey); color: var(--f-teal); }
.folio .household-cashflow-folio .cashflow-account-icon--liability { background: var(--f-t-clay); color: var(--f-clay); }
.folio .household-cashflow-folio .cashflow-account-icon--real-estate,
.folio .household-cashflow-folio .cashflow-account-icon--insurance { background: var(--f-t-gold); color: var(--f-bronze); }
.folio .household-cashflow-folio .cashflow-account-icon--other { background: var(--f-t-grey); color: var(--f-grey); }
.folio .household-cashflow-folio .cashflow-account-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.65; }
.folio .household-cashflow-folio .cashflow-account-identity > div { display: grid; gap: 3px; min-width: 0; }
.folio .household-cashflow-folio .cashflow-account-identity strong { overflow: hidden; color: var(--f-ink); font: 560 13px/1.3 var(--f-font-ui); text-overflow: ellipsis; white-space: nowrap; }
.folio .household-cashflow-folio .cashflow-account-identity span { color: var(--f-dim); font: 500 9px/1.35 var(--f-font-mono); letter-spacing: .05em; text-transform: uppercase; }
.folio .household-cashflow-folio .cashflow-account-totals { display: grid; grid-template-columns: repeat(4, minmax(72px, 1fr)); gap: 12px; }
.folio .household-cashflow-folio .cashflow-account-totals > span { display: grid; gap: 3px; text-align: right; }
.folio .household-cashflow-folio .cashflow-account-totals em { color: var(--f-faint); font: 600 8px/1 var(--f-font-mono); letter-spacing: .08em; text-transform: uppercase; }
.folio .household-cashflow-folio .cashflow-account-totals strong { font: 560 11px/1.2 var(--f-font-ui); white-space: nowrap; }
.folio .household-cashflow-folio :is(.cashflow-account-totals strong.positive, .cashflow-amount.positive) { color: var(--f-green); }
.folio .household-cashflow-folio :is(.cashflow-account-totals strong.negative, .cashflow-amount.negative) { color: var(--f-red); }
.folio .household-cashflow-folio .cashflow-account-expand { display: inline-flex; align-items: center; gap: 6px; color: var(--f-muted); font: 550 10px/1 var(--f-font-ui); white-space: nowrap; }
.folio .household-cashflow-folio .cashflow-account-expand svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; transition: transform 120ms ease; }
.folio .household-cashflow-folio .cashflow-account-card[open] .cashflow-account-expand svg { transform: rotate(180deg); }
.folio .household-cashflow-folio .cashflow-account-detail { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.folio .household-cashflow-folio .cashflow-category-column { padding: 16px 18px; border-right: 1px solid var(--f-line); }
.folio .household-cashflow-folio .cashflow-category-column:last-child { border-right: 0; }
.folio .household-cashflow-folio .cashflow-category-column header { display: flex; justify-content: space-between; gap: 10px; padding-bottom: 9px; border-bottom: 1px solid var(--f-line); }
.folio .household-cashflow-folio .cashflow-category-column header span { color: var(--f-dim); font: 600 8px/1 var(--f-font-mono); letter-spacing: .08em; text-transform: uppercase; }
.folio .household-cashflow-folio .cashflow-category-column header strong { font: 600 10.5px/1 var(--f-font-ui); }
.folio .household-cashflow-folio .cashflow-category-column ul { display: grid; margin: 7px 0 0; padding: 0; list-style: none; }
.folio .household-cashflow-folio .cashflow-category-column li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--f-line); }
.folio .household-cashflow-folio .cashflow-category-column li:last-child { border-bottom: 0; }
.folio .household-cashflow-folio .cashflow-category-column li > span { display: grid; gap: 2px; color: var(--f-ink); font: 500 10.5px/1.3 var(--f-font-ui); }
.folio .household-cashflow-folio .cashflow-category-column li em { color: var(--f-dim); font: 400 8.5px/1.3 var(--f-font-ui); }
.folio .household-cashflow-folio .cashflow-category-column li strong { font: 600 10.5px/1.3 var(--f-font-ui); }
.folio .household-cashflow-folio .cashflow-account-card > footer { display: flex; align-items: center; gap: 14px; padding: 9px 18px; border-top: 1px solid var(--f-line); color: var(--f-dim); font: 500 8.5px/1.3 var(--f-font-mono); letter-spacing: .05em; text-transform: uppercase; }
.folio .household-cashflow-folio .cashflow-account-card > footer .folio-cardlink { margin-left: auto; text-transform: none; }

.folio .household-cashflow-folio .cashflow-transactions-panel { overflow: hidden; padding: 0; border-color: var(--f-line-strong); box-shadow: none; }
.folio .household-cashflow-folio .cashflow-table-toolbar { display: flex; align-items: center; gap: 18px; min-height: 66px; padding: 13px 16px 13px 19px; border-bottom: 1px solid var(--f-line); background: var(--f-quiet); }
.folio .household-cashflow-folio .cashflow-table-title { display: grid; grid-template-columns: auto auto; align-items: baseline; gap: 3px 8px; flex: none; }
.folio .household-cashflow-folio .cashflow-table-title p { grid-column: 1 / -1; margin: 0; color: var(--f-bronze); font: 600 8px/1 var(--f-font-mono); letter-spacing: .1em; text-transform: uppercase; }
.folio .household-cashflow-folio .cashflow-table-title h3 { margin: 0; font: 400 19px/1.15 var(--f-font-display); }
.folio .household-cashflow-folio .cashflow-table-title > span { color: var(--f-dim); font: 500 9px/1 var(--f-font-mono); }
.folio .household-cashflow-folio .cashflow-table-actions,
.folio .household-cashflow-folio .cashflow-table-filters { display: flex; flex: 1; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; }
.folio .household-cashflow-folio .cashflow-search { flex: 1 1 300px; max-width: 420px; }
.folio .household-cashflow-folio .cashflow-search input,
.folio .household-cashflow-folio .cashflow-table-filters select { width: 100%; min-height: 38px; padding: 8px 11px; border: 1px solid var(--f-line-strong); border-radius: 7px; background: var(--f-paper); color: var(--f-ink); font: 500 12px/1.2 var(--f-font-ui); }
.folio .household-cashflow-folio .cashflow-filter-toggle { min-height: 38px; border-radius: 999px; }
.folio .household-cashflow-folio .cashflow-filter-toggle span { display: inline-grid; min-width: 18px; min-height: 18px; margin-left: 4px; place-items: center; border-radius: 999px; background: var(--f-accent); color: white; font: 600 9px/1 var(--f-font-mono); }
.folio .household-cashflow-folio .cashflow-filter-drawer { padding: 12px 16px; border-bottom: 1px solid var(--f-line); background: var(--f-inset); }
.folio .household-cashflow-folio .cashflow-filter-drawer[hidden] { display: none; }
.folio .household-cashflow-folio .cashflow-table-filters label { display: grid; flex: 0 1 170px; gap: 5px; min-width: 0; }
.folio .household-cashflow-folio .cashflow-table-filters label > span { color: var(--f-dim); font: 600 8px/1 var(--f-font-mono); letter-spacing: .09em; text-transform: uppercase; }
.folio .household-cashflow-folio .cashflow-filter-reset { min-height: 38px; align-self: end; border-radius: 999px; }
.folio .household-cashflow-folio .cashflow-table-wrap { overflow-x: auto; }
.folio .household-cashflow-folio .cashflow-transaction-table { width: 100%; min-width: 720px; border-collapse: collapse; }
.folio .household-cashflow-folio .cashflow-transaction-table th { padding: 0; background: var(--f-quiet); text-align: left; }
.folio .household-cashflow-folio .cashflow-transaction-table th button { display: flex; width: 100%; justify-content: space-between; gap: 8px; padding: 11px 14px; border: 0; background: transparent; color: var(--f-dim); font: 600 9.5px/1 var(--f-font-mono); cursor: pointer; }
.folio .household-cashflow-folio .cashflow-transaction-table th button[aria-pressed="true"] { color: var(--f-sage); }
.folio .household-cashflow-folio .cashflow-transaction-table td { padding: 12px 14px; border-top: 1px solid var(--f-line); color: var(--f-ink); font: 500 11px/1.4 var(--f-font-ui); vertical-align: middle; }
.folio .household-cashflow-folio .cashflow-transaction-table td > strong { display: block; max-width: 290px; overflow: hidden; font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }
.folio .household-cashflow-folio .cashflow-transaction-table td > span { display: block; margin-top: 3px; color: var(--f-dim); font-size: 9px; }
.folio .household-cashflow-folio .cashflow-transaction-table td.cashflow-amount { text-align: right; font-weight: 650; white-space: nowrap; }
.folio .household-cashflow-folio .cashflow-transaction-table tr[data-quality="needed"] { background: var(--f-t-gold); }
.folio .household-cashflow-folio :is(.cashflow-kind-pill, .cashflow-source-type, .cashflow-insurance-match) { display: inline-flex !important; width: fit-content; margin: 3px 0 0 !important; padding: 4px 7px; border-radius: 999px; background: var(--f-t-grey); color: var(--f-teal) !important; font: 600 8px/1 var(--f-font-mono) !important; letter-spacing: .05em; text-transform: uppercase; }
.folio .household-cashflow-folio .cashflow-kind-pill.inflow { background: var(--f-t-sage); color: var(--f-sage) !important; }
.folio .household-cashflow-folio .cashflow-kind-pill.outflow { background: var(--f-t-clay); color: var(--f-clay) !important; }
.folio .household-cashflow-folio .cashflow-kind-pill.unknown { background: var(--f-t-gold); color: var(--f-bronze) !important; }
.folio .household-cashflow-folio .cashflow-table-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 18px; border-top: 1px solid var(--f-line); color: var(--f-dim); font: 500 9.5px/1.3 var(--f-font-ui); }
.folio .household-cashflow-folio .cashflow-table-footer label,
.folio .household-cashflow-folio .cashflow-table-footer > div { display: flex; align-items: center; gap: 8px; }
.folio .household-cashflow-folio .cashflow-table-footer select,
.folio .household-cashflow-folio .cashflow-table-footer button { min-height: 30px; padding: 5px 9px; border: 1px solid var(--f-line-strong); border-radius: 7px; background: var(--f-paper); color: var(--f-ink); font: 550 10px/1 var(--f-font-ui); }
.folio .household-cashflow-folio .cashflow-table-footer button:disabled { opacity: .45; cursor: not-allowed; }

@media (max-width: 1080px) {
    .folio .household-cashflow-folio .cashflow-trust-grid { grid-template-columns: 1fr; }
    .folio .household-cashflow-folio .cashflow-recurring-record { grid-template-columns: minmax(220px, 1fr) auto; }
    .folio .household-cashflow-folio .cashflow-recurring-record dl { grid-column: 1 / -1; }
    .folio .household-cashflow-folio .cashflow-account-card > summary { grid-template-columns: minmax(220px, 1fr) auto; }
    .folio .household-cashflow-folio .cashflow-account-totals { grid-column: 1 / -1; grid-row: 2; }
    .folio .household-cashflow-folio .cashflow-account-expand { grid-column: 2; grid-row: 1; }
    .folio .household-cashflow-folio .cashflow-account-detail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .folio .household-cashflow-folio .cashflow-category-column:nth-child(2) { border-right: 0; }
    .folio .household-cashflow-folio .cashflow-category-column:nth-child(-n+2) { border-bottom: 1px solid var(--f-line); }
}

@media (max-width: 860px) {
    .folio .household-cashflow-folio .cashflow-filter-dock { position: static; align-items: stretch; }
    .folio .household-cashflow-folio .cashflow-filter-groups { width: 100%; overflow-x: auto; }
    .folio .household-cashflow-folio .cashflow-filter-context { width: 100%; }
    .folio .household-cashflow-folio .cashflow-scope-status { justify-content: space-between; width: 100%; }
    .folio .household-cashflow-folio .cashflow-table-toolbar { align-items: stretch; flex-direction: column; }
    .folio .household-cashflow-folio .cashflow-table-actions { width: 100%; }
    .folio .household-cashflow-folio .cashflow-search { max-width: none; }
    .folio .household-cashflow-folio .cashflow-table-filters { flex-wrap: wrap; justify-content: flex-start; }
    .folio .household-cashflow-folio .cashflow-table-filters label { flex: 1 1 210px; }
}

@media (max-width: 620px) {
    .folio .household-cashflow-folio .cashflow-filter-groups { align-items: stretch; flex-direction: column; overflow: visible; }
    .folio .household-cashflow-folio .cashflow-filter-divider { display: none; }
    .folio .household-cashflow-folio .cashflow-segmented { width: 100%; overflow-x: auto; }
    .folio .household-cashflow-folio .cashflow-segmented button { flex: 1 0 auto; }
    .folio .household-cashflow-folio .cashflow-filter-context,
    .folio .household-cashflow-folio .cashflow-custom-dates { align-items: stretch; flex-direction: column; }
    .folio .household-cashflow-folio .cashflow-custom-dates label { justify-content: space-between; }
    .folio .household-cashflow-folio .cashflow-custom-dates .advisor-date-picker { min-width: 0; }
    .folio .household-cashflow-folio :is(.cashflow-monthly-panel, .cashflow-sankey-panel) > .folio-ch { align-items: flex-start; flex-wrap: wrap; }
    .folio .household-cashflow-folio .cashflow-sankey-panel .advisor-segmented { width: 100%; margin-left: 0; }
    .folio .household-cashflow-folio .cashflow-monthly-legend { justify-content: flex-start; flex-wrap: wrap; }
    .folio .household-cashflow-folio .cashflow-recurring-intro,
    .folio .household-cashflow-folio .cashflow-table-footer { align-items: flex-start; flex-direction: column; }
    .folio .household-cashflow-folio .cashflow-recurring-record { grid-template-columns: 1fr; gap: 12px; }
    .folio .household-cashflow-folio .cashflow-recurring-record dl { grid-column: auto; grid-template-columns: 1fr; }
    .folio .household-cashflow-folio .cashflow-account-card > summary { grid-template-columns: minmax(0, 1fr) auto; gap: 12px; }
    .folio .household-cashflow-folio .cashflow-account-totals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .folio .household-cashflow-folio .cashflow-account-totals > span { text-align: left; }
    .folio .household-cashflow-folio .cashflow-account-expand > span { display: none; }
    .folio .household-cashflow-folio .cashflow-account-detail { grid-template-columns: 1fr; }
    .folio .household-cashflow-folio .cashflow-category-column { border-right: 0; border-bottom: 1px solid var(--f-line); }
    .folio .household-cashflow-folio .cashflow-category-column:last-child { border-bottom: 0; }
    .folio .household-cashflow-folio .cashflow-account-card > footer { align-items: flex-start; flex-wrap: wrap; }
    .folio .household-cashflow-folio .cashflow-account-card > footer .folio-cardlink { width: 100%; margin-left: 0; justify-content: center; }
    .folio .household-cashflow-folio .cashflow-table-actions { align-items: stretch; flex-direction: column; }
    .folio .household-cashflow-folio .cashflow-filter-toggle { width: 100%; }
    .folio .household-cashflow-folio .cashflow-table-filters label { flex-basis: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .folio .household-cashflow-folio .cashflow-sankey-links path,
    .folio .household-cashflow-folio .cashflow-account-expand svg { transition: none; }
}
.folio .practice-trust-line {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
    margin: 0 0 10px;
    color: var(--f-muted);
    font-size: 13px;
    line-height: 1.6;
}
.folio .practice-trust-line:last-child { margin-bottom: 0; }

.folio .practice-card-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin-top: 4px;
}

/* ==========================================================================
   SHARED · VERDICT, LEDGER, MATRIX

   Three shapes the library was missing, added because three different pages
   kept reaching for a KPI row when the question was not "how many".
   ========================================================================== */

/* D · VERDICT — Register A. No surface, because the page's largest moment
   should be carried by type and space, not by a box drawn around it. */
.folio .folio-verdict {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr);
    gap: 20px 56px;
    align-items: end;
    padding: 42px 0 34px;
}
.folio .folio-verdict__lead { min-width: 0; }
.folio .folio-verdict__eyebrow {
    margin: 0 0 14px;
    color: var(--f-bronze);
    font: 500 9.5px/1 var(--f-font-mono);
    letter-spacing: .16em;
    text-transform: uppercase;
}
/* A figure is one token. It never wraps: `$3,062,4 53` was a real shipped bug. */
/* Every Folio hero figure is --f-green. A figure that changes colour with its
   status turns the page's largest element into a status light, and the reader
   then reads the colour instead of the number. Status is carried by the
   statement underneath, which can say what it actually means. */
.folio .folio-verdict__figure {
    margin: 0;
    color: var(--f-green);
    font: 400 clamp(46px, 6.2vw, 78px)/.92 var(--f-font-display);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.03em;
    white-space: nowrap;
}
.folio .folio-verdict__figlabel {
    margin: 9px 0 0;
    color: var(--f-dim);
    font: 500 10px/1 var(--f-font-mono);
    letter-spacing: .12em;
    text-transform: uppercase;
}
/* The conclusion, in a sentence. This is what the reader came for. */
.folio .folio-verdict__statement {
    position: relative;
    max-width: 30ch;
    margin: 18px 0 0;
    padding-left: 15px;
    color: var(--f-ink);
    font: 400 clamp(21px, 2.1vw, 28px)/1.2 var(--f-font-display);
    letter-spacing: -.014em;
}
/* D5 · a marginal tick against the text column. This is where status lives. */
.folio .folio-verdict__statement::before {
    content: "";
    position: absolute;
    top: .28em;
    bottom: .22em;
    left: 0;
    width: 2px;
    border-radius: 2px;
    background: var(--f-green);
}
.folio .folio-verdict--neg .folio-verdict__statement::before { background: var(--f-red); }
.folio .folio-verdict--warn .folio-verdict__statement::before { background: var(--f-gold); }
.folio .folio-verdict--unknown .folio-verdict__statement::before { background: var(--f-line-strong); }
.folio .folio-verdict__qualifier {
    max-width: 62ch;
    margin: 11px 0 0;
    color: var(--f-muted);
    font: 400 12.5px/1.62 var(--f-font-ui);
}
.folio .folio-verdict__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 22px;
}

/* Counts live here: real, wanted, and subordinate to the conclusion. Bordered
   as one measured block rather than four floating tiles. */
.folio .folio-verdict__stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    margin: 0;
    border: 1px solid var(--f-line);
    border-radius: var(--f-radius);
    background: var(--f-paper);
}
.folio .folio-verdict__stats > div {
    min-width: 0;
    padding: 13px 15px 14px;
    border-right: 1px solid var(--f-line);
    border-bottom: 1px solid var(--f-line);
}
.folio .folio-verdict__stats > div:nth-child(2n) { border-right: 0; }
.folio .folio-verdict__stats > div:nth-last-child(-n+2) { border-bottom: 0; }
.folio .folio-verdict__stats dt {
    color: var(--f-dim);
    font: 500 9px/1.2 var(--f-font-mono);
    letter-spacing: .13em;
    text-transform: uppercase;
}
.folio .folio-verdict__stats dd {
    margin: 6px 0 0;
    color: var(--f-ink);
    font: 400 20px/1.05 var(--f-font-display);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.folio .folio-verdict__stats > div.is-muted dd { color: var(--f-faint); }
.folio .folio-verdict__stats span {
    display: block;
    margin-top: 5px;
    color: var(--f-dim);
    font: 400 11px/1.35 var(--f-font-ui);
}

/* D1 · LEDGER — periods down, a balance carried forward, a rule under the
   total. Figures are mono and tabular so the columns can be read down. */
.folio .folio-ledger {
    border: 1px solid var(--f-line);
    border-radius: var(--f-radius);
    background: var(--f-paper);
}
.folio .folio-ledger__scroll { overflow-x: auto; }
.folio .folio-ledger__table {
    width: 100%;
    border-collapse: collapse;
    font: 400 13px/1.4 var(--f-font-ui);
}
.folio .folio-ledger__table thead th {
    padding: 11px 16px;
    border-bottom: 1px solid var(--f-line-strong);
    color: var(--f-dim);
    font: 500 9px/1 var(--f-font-mono);
    letter-spacing: .13em;
    text-transform: uppercase;
    text-align: left;
    white-space: nowrap;
}
.folio .folio-ledger__table th.end,
.folio .folio-ledger__cell.end { text-align: right; }
.folio .folio-ledger__row > * {
    padding: 12px 16px;
    border-bottom: 1px solid var(--f-line);
    vertical-align: baseline;
}
.folio .folio-ledger__head {
    color: var(--f-ink);
    font: 500 13.5px/1.3 var(--f-font-ui);
    text-align: left;
    white-space: nowrap;
}
/* Scoped away from .folio-ledger__chip: a blanket `span` rule inside a cell
   flattened the status chip to display:block and stretched it across the
   column. Structural label rules stay off nested components. */
.folio .folio-ledger__head span:not(.folio-ledger__caret),
.folio .folio-ledger__cell span:not(.folio-ledger__chip):not(.folio-state) {
    display: block;
    margin-top: 3px;
    color: var(--f-faint);
    font: 400 10.5px/1.3 var(--f-font-ui);
}
.folio .folio-ledger__cell {
    color: var(--f-ink);
    white-space: nowrap;
}
.folio .folio-ledger__cell.num {
    font-family: var(--f-font-mono);
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
}
.folio .folio-ledger__chip {
    display: inline-block;
    padding: 2px 9px 3px;
    border: 1px solid currentColor;
    border-radius: var(--f-radius-pill);
    font: 500 8.5px/1.4 var(--f-font-mono);
    letter-spacing: .1em;
    text-transform: uppercase;
}
.folio .folio-ledger__cell.pos { color: var(--f-green); }
.folio .folio-ledger__cell.neg { color: var(--f-red); }
.folio .folio-ledger__cell.dim { color: var(--f-faint); }
/* A short month is marked in the gutter, not by tinting the whole row: a
   filled row reads as a status the reader cannot act on. */
.folio .folio-ledger__row.is-neg > :first-child { box-shadow: inset 2px 0 0 var(--f-red); }
.folio .folio-ledger__row.is-dim .folio-ledger__head { color: var(--f-dim); }

.folio .folio-ledger__toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
}
.folio .folio-ledger__caret {
    width: 0;
    height: 0;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 5px solid var(--f-faint);
    transition: transform 140ms ease;
}
.folio .folio-ledger__toggle[aria-expanded="true"] .folio-ledger__caret { transform: rotate(90deg); }
.folio .folio-ledger__toggle:hover { color: var(--f-accent); }
.folio .folio-ledger__toggle:focus-visible { outline: 2px solid var(--f-accent); outline-offset: 3px; }

.folio .folio-ledger__detail > td {
    padding: 0 16px 14px;
    border-bottom: 1px solid var(--f-line);
    background: var(--f-quiet, #fcf9f1);
}
/* D1 · the accountant's rule. A double rule concludes; it does not decorate. */
.folio .folio-ledger__total > * {
    padding: 13px 16px 15px;
    border-top: 2px solid var(--f-ink);
    color: var(--f-ink);
    font: 500 13px/1.3 var(--f-font-ui);
    text-align: right;
    white-space: nowrap;
}
.folio .folio-ledger__total > th {
    font: 500 9.5px/1 var(--f-font-mono);
    letter-spacing: .13em;
    text-transform: uppercase;
    text-align: left;
}
.folio .folio-ledger__total .folio-ledger__cell.num { font-size: 13.5px; }
.folio .folio-ledger__foot {
    margin: 0;
    padding: 12px 16px 13px;
    border-top: 1px solid var(--f-line);
    color: var(--f-dim);
    font: 400 11.5px/1.55 var(--f-font-ui);
}
.folio .folio-ledger--empty { padding: 22px; }

/* D7 · MATRIX — subjects down, the compared thing across. Colour ranks the
   states; every cell also says what it is in words. */
.folio .folio-matrix {
    border: 1px solid var(--f-line);
    border-radius: var(--f-radius);
    background: var(--f-paper);
}
.folio .folio-matrix__scroll { overflow-x: auto; }
/* Fixed layout so every need column is exactly the same width. With auto
   layout the columns sized to their content, so "Permanent & cash value" grew
   and "Life" shrank, and two people's rows stopped being comparable -- which is
   the entire job of a matrix. */
.folio .folio-matrix__table {
    width: 100%;
    min-width: 720px;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
}
.folio .folio-matrix__table col.folio-matrix__subject-col { width: 232px; }
.folio .folio-matrix__table thead th {
    padding: 11px 14px;
    border-bottom: 1px solid var(--f-line-strong);
    color: var(--f-dim);
    font: 500 9px/1.25 var(--f-font-mono);
    letter-spacing: .12em;
    text-transform: uppercase;
    text-align: left;
    vertical-align: bottom;
}
.folio .folio-matrix__corner { width: 232px; }
.folio .folio-matrix__subject {
    padding: 14px 16px;
    border-bottom: 1px solid var(--f-line);
    border-right: 1px solid var(--f-line-strong);
    background: var(--f-quiet, #fcf9f1);
    text-align: left;
    vertical-align: middle;
}
.folio .folio-matrix__subject > span { display: flex; align-items: center; gap: 11px; }
.folio .folio-matrix__mark {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    flex: none;
    border: 1px solid var(--f-line-strong);
    border-radius: 50%;
    color: var(--f-bronze);
    font: 500 10px/1 var(--f-font-mono);
    letter-spacing: .04em;
}
.folio .folio-matrix__subject-text { min-width: 0; }
/* The person is the anchor of the row, so it is set in the display face and
   carries real weight. Everything in the row is read relative to this name. */
.folio .folio-matrix__subject b {
    display: block;
    color: var(--f-ink);
    font: 500 15px/1.2 var(--f-font-display);
    letter-spacing: -.008em;
}
.folio .folio-matrix__subject em {
    display: block;
    margin-top: 3px;
    color: var(--f-dim);
    font: 400 10.5px/1.3 var(--f-font-ui);
    font-style: normal;
}
/* Every cell is the same three-row shape at the same height, whether or not it
   has an amount or a note. Ragged cell heights were what made the grid read as
   a pile of boxes instead of a table you can scan down. */
.folio .folio-matrix__cell {
    height: 86px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--f-line);
    border-right: 1px solid var(--f-line);
    vertical-align: top;
}
.folio .folio-matrix__cell > * { display: block; }
.folio .folio-matrix__cell:last-child { border-right: 0; }
.folio .folio-matrix__table tbody tr:last-child > * { border-bottom: 0; }
.folio .folio-matrix__state {
    display: inline-block;
    padding: 2px 8px 3px;
    border: 1px solid var(--f-line-strong);
    border-radius: var(--f-radius-pill);
    background: var(--f-paper);
    color: var(--f-dim);
    font: 500 8.5px/1.35 var(--f-font-mono);
    letter-spacing: .09em;
    text-transform: uppercase;
    white-space: nowrap;
}
.folio .folio-matrix__value {
    margin-top: 8px;
    color: var(--f-ink);
    font: 400 19px/1.05 var(--f-font-display);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.folio .folio-matrix__note {
    margin-top: 4px;
    color: var(--f-dim);
    font: 400 10.5px/1.3 var(--f-font-ui);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* Grounds are existing accents washed over paper -- never a mid-saturation
   fill, which reads as a status the user cannot act on. */
/* Three ranks, and they are readable without the colour: an inset top rule
   marks the state, the chip names it, and the ground only reinforces. */
.folio .folio-matrix__cell.is-covered {
    background: var(--f-accent-soft);
    box-shadow: inset 0 2px 0 var(--f-accent);
}
.folio .folio-matrix__cell.is-covered .folio-matrix__state { border-color: var(--f-accent); color: var(--f-accent); }
.folio .folio-matrix__cell.is-covered .folio-matrix__value { color: var(--f-emerald); }
.folio .folio-matrix__cell.is-expiring,
.folio .folio-matrix__cell.is-unverified,
.folio .folio-matrix__cell.is-amount_unknown {
    background: var(--f-gold-soft);
    box-shadow: inset 0 2px 0 var(--f-gold);
}
.folio .folio-matrix__cell.is-expiring .folio-matrix__state,
.folio .folio-matrix__cell.is-unverified .folio-matrix__state,
.folio .folio-matrix__cell.is-amount_unknown .folio-matrix__state { border-color: var(--f-gold); color: var(--f-bronze); }
.folio .folio-matrix__cell.is-gap,
.folio .folio-matrix__cell.is-inactive_only {
    background: var(--f-inset);
    box-shadow: inset 0 2px 0 var(--f-line-strong);
}
.folio .folio-matrix__cell.is-gap .folio-matrix__state,
.folio .folio-matrix__cell.is-inactive_only .folio-matrix__state {
    border-style: dashed;
    background: transparent;
}
.folio .folio-matrix__cell.is-pending {
    background: var(--f-quiet, #fcf9f1);
    box-shadow: inset 0 2px 0 var(--f-line-strong);
}

.folio .folio-matrix__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 20px;
    margin: 0;
    padding: 11px 14px;
    border-top: 1px solid var(--f-line);
    list-style: none;
}
.folio .folio-matrix__legend li {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--f-dim);
    font: 400 11px/1.4 var(--f-font-ui);
}
.folio .folio-matrix__legend i {
    width: 11px;
    height: 11px;
    border: 1px solid var(--f-line-strong);
    border-radius: 3px;
}
.folio .folio-matrix__legend .is-covered i { background: var(--f-accent-soft); border-color: var(--f-accent); }
.folio .folio-matrix__legend .is-unverified i,
.folio .folio-matrix__legend .is-expiring i { background: var(--f-gold-soft); border-color: var(--f-gold); }
.folio .folio-matrix__legend .is-gap i { background: var(--f-inset); border-style: dashed; }
.folio .folio-matrix__foot {
    margin: 0;
    padding: 0 14px 13px;
    color: var(--f-faint);
    font: 400 11px/1.5 var(--f-font-ui);
}
.folio .folio-matrix--empty { padding: 22px; }

.folio .folio-matrix__cell.is-na-merged {
    background: repeating-linear-gradient(135deg, transparent 0 7px, color-mix(in srgb, var(--f-line-strong) 45%, transparent) 7px 8px), var(--f-quiet, #fcf9f1);
    box-shadow: inset 0 2px 0 var(--f-line);
    vertical-align: middle;
}
.folio .folio-attention-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 16px; }
.folio .folio-attention-group { border: 1px solid var(--f-line); border-radius: 12px; background: var(--f-paper); overflow: hidden; min-width: 0; }
.folio .folio-attention-group header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--f-line); }
.folio .folio-attention-group h3 { margin: 0; font: 400 17px/1.2 var(--f-font-display); }
.folio .folio-attention-group header span { font-size: 12px; color: var(--f-dim); }
.folio .folio-attention-group ul { margin: 0; padding: 0; list-style: none; }
.folio .folio-attention-group li + li { border-top: 1px solid var(--f-line); }
.folio .folio-attention-group__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 11px 16px; font-size: 13px; }
.folio .folio-attention-group__row > span { flex: 1 1 220px; min-width: 0; overflow-wrap: anywhere; }
.folio .folio-attention-group small { display: block; margin-top: 3px; color: var(--f-dim); font-size: 12px; }
.folio .folio-attention-group .folio-cardlink { flex: none; }
.folio .folio-attention-group__empty { margin: 0; padding: 14px 16px; color: var(--f-dim); font-size: 13px; }

/* --------------------------------------------------------------------------
   Household Insurance

   Four questions, four shapes: a verdict on funding, a matrix of who is
   protected, a ledger of six months against the cash reserve, and a policy
   book that leads each record with the figure that is its point.

   What this replaced, and why: a hero that led with a policy COUNT, and a book
   of twelve-row label/value grids in which "product type: whole life" carried
   the same weight as "$1,231,273". Nothing on it could be scanned, and the
   loudest signal on the page was eight gold "Not recorded" labels per card.
   -------------------------------------------------------------------------- */

.folio .folio-insurance-book-note {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    margin: 0 0 20px;
    padding: 11px 15px;
    border-left: 2px solid var(--f-gold);
    background: var(--f-gold-soft);
    color: var(--f-muted);
    font: 400 12.5px/1.55 var(--f-font-ui);
}
.folio .folio-insurance-book-note strong { color: var(--f-bronze); }

/* The policy editor carries its history in a rail: read while editing, not
   hunted for afterwards. The default modal is 820px, which cannot hold a form
   and a rail side by side, so this one is wider. */
.folio .folio-modal.folio-insurance-modal { width: min(1140px, 100%); }
/* Queried on the BODY, not the viewport: the rail has to stack when the modal
   is narrow, which is not the same question as whether the window is. */
.folio .folio-insurance-modal .folio-modal__body { container-type: inline-size; }
.folio .folio-insurance-modal__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
    gap: 28px;
    align-items: start;
}
.folio .folio-insurance-modal__layout.is-single { grid-template-columns: minmax(0, 1fr); }
.folio .folio-insurance-modal__main { min-width: 0; }
@container (max-width: 820px) {
    .folio .folio-insurance-modal__layout { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}
.folio .folio-insurance-modal__rail {
    min-width: 0;
    padding: 16px 18px;
    border-radius: 6px;
    background: var(--f-inset);
}
.folio .folio-insurance-rail__title {
    margin: 0 0 4px;
    font: 500 11px var(--f-font-mono);
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--f-muted);
}
/* Edit history: attribution first, then the values that moved. */
.folio .folio-insurance-lastedit {
    margin: 0 0 14px;
    color: var(--f-muted);
    font: 400 12px/1.5 var(--f-font-ui);
}
.folio .folio-insurance-history-block { margin-top: 18px; }
.folio .folio-insurance-history-note {
    margin: 10px 0 0;
    color: var(--f-muted);
    font: 400 12.5px/1.55 var(--f-font-ui);
}
.folio .folio-insurance-history {
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}
.folio .folio-insurance-history > li {
    padding: 12px 0;
    border-top: 1px solid var(--f-line);
}
.folio .folio-insurance-history > li:first-child { border-top: 0; }
.folio .folio-insurance-history__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
}
.folio .folio-insurance-history__head strong { font: 500 13px var(--f-font-ui); }
.folio .folio-insurance-history__head span,
.folio .folio-insurance-history__head time {
    color: var(--f-muted);
    font: 400 11.5px var(--f-font-ui);
}
.folio .folio-insurance-history__changes {
    margin: 7px 0 0;
    padding: 0;
    list-style: none;
}
.folio .folio-insurance-history__changes > li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 3px 8px;
    padding: 2px 0;
    font: 400 12.5px/1.5 var(--f-font-ui);
}
/* In the rail the diff stacks: label above, old → new below, so a long account
   name or carrier does not force the column wider than the rail. */
.folio .folio-insurance-history__changes b {
    display: block;
    width: 100%;
    color: var(--f-muted);
    font-weight: 400;
}
.folio .folio-insurance-history__changes i {
    color: var(--f-faint);
    font-style: normal;
}
.folio .folio-insurance-history__changes span:last-of-type { font-weight: 500; }

/* Why a missing draft amount matters, shown where it can be fixed. */
.folio .folio-insurance-draft-note {
    margin: 10px 0 0;
    padding: 10px 14px;
    border-left: 2px solid var(--f-gold);
    background: var(--f-gold-soft);
    color: var(--f-muted);
    font: 400 12.5px/1.55 var(--f-font-ui);
}

/* B · Coverage ------------------------------------------------------------ */

.folio .folio-insurance-coverage {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}
.folio .folio-insurance-coverage__summary { margin: 0; color: var(--f-muted); font: 400 14px/1.5 var(--f-font-ui); }

.folio .folio-insurance-coverage__orphan {
    grid-column: 1 / -1;
    margin: 0;
    padding: 11px 15px;
    border-left: 2px solid var(--f-gold);
    background: var(--f-gold-soft);
    color: var(--f-muted);
    font: 400 12.5px/1.55 var(--f-font-ui);
}
.folio .folio-insurance-coverage__orphan strong { color: var(--f-bronze); }

/* C · Funding ------------------------------------------------------------- */

.folio .folio-insurance-funding { display: grid; gap: 18px; }
.folio .folio-insurance-reserve-accounts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
    gap: 14px;
}
/* The account panel carries the verification, because the ledger below is only
   as trustworthy as the claim that these premiums draft from this account. */
.folio .folio-insurance-reserve-account {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) auto;
    gap: 14px 20px;
    padding: 16px 18px 17px;
    border: 1px solid var(--f-line);
    border-radius: var(--f-radius);
    background: var(--f-paper);
}
.folio .folio-insurance-reserve-account.is-verified { border-left: 2px solid var(--f-accent); }
.folio .folio-insurance-reserve-account.is-unverified { border-left: 2px solid var(--f-gold); }
.folio .folio-insurance-reserve-account.is-empty {
    grid-template-columns: minmax(0, 1fr);
    border-left: 2px solid var(--f-line-strong);
}
.folio .folio-insurance-reserve-account__id { min-width: 0; }
.folio .folio-insurance-reserve-account__id p {
    margin: 0 0 5px;
    color: var(--f-bronze);
    font: 500 9px/1 var(--f-font-mono);
    letter-spacing: .13em;
    text-transform: uppercase;
}
.folio .folio-insurance-reserve-account__id b {
    display: block;
    color: var(--f-ink);
    font: 400 17px/1.2 var(--f-font-display);
}
.folio .folio-insurance-reserve-account__id span {
    display: block;
    margin-top: 4px;
    color: var(--f-dim);
    font: 400 11.5px/1.5 var(--f-font-ui);
}
.folio .folio-insurance-reserve-account__balance { text-align: right; }
.folio .folio-insurance-reserve-account__balance span {
    display: block;
    color: var(--f-dim);
    font: 500 9px/1 var(--f-font-mono);
    letter-spacing: .12em;
    text-transform: uppercase;
}
.folio .folio-insurance-reserve-account__balance b {
    display: block;
    margin-top: 6px;
    color: var(--f-ink);
    font: 400 24px/1 var(--f-font-display);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.folio .folio-insurance-reserve-account__source {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    padding-top: 13px;
    border-top: 1px solid var(--f-line);
}
.folio .folio-insurance-reserve-account__when {
    flex: 1 1 200px;
    min-width: 0;
    color: var(--f-dim);
    font: 400 11.5px/1.45 var(--f-font-ui);
}

/* The runway: six segments, one per month, tinted by whether that month is
   covered, with the draft weight drawn inside. Small on purpose -- the ledger
   underneath is the section's substance; this is the glance that tells you
   which row to read. */
.folio .folio-insurance-runway {
    margin: 0;
    padding: 15px 18px 14px;
    border: 1px solid var(--f-line);
    border-radius: var(--f-radius);
    background: var(--f-paper);
}
.folio .folio-insurance-runway__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 18px;
    margin-bottom: 13px;
}
.folio .folio-insurance-runway__head p {
    margin: 0 0 4px;
    color: var(--f-bronze);
    font: 500 9px/1 var(--f-font-mono);
    letter-spacing: .13em;
    text-transform: uppercase;
}
.folio .folio-insurance-runway__head b {
    color: var(--f-ink);
    font: 400 17px/1.2 var(--f-font-display);
}
.folio .folio-insurance-runway__head > span {
    color: var(--f-dim);
    font: 400 11.5px/1.45 var(--f-font-ui);
}
.folio .folio-insurance-runway__track {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 5px;
}
.folio .folio-insurance-runway__month {
    padding: 7px 8px 8px;
    border-radius: var(--f-radius-sm);
    background: var(--f-accent-soft);
    text-align: center;
}
.folio .folio-insurance-runway__month.is-short { background: var(--f-red-soft); }
.folio .folio-insurance-runway__month.is-unknown { background: var(--f-inset); }
.folio .folio-insurance-runway__bar {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: 34px;
    margin-bottom: 7px;
}
.folio .folio-insurance-runway__bar i {
    width: 60%;
    min-height: 5px;
    border-radius: 2px 2px 0 0;
    background: var(--f-accent);
}
.folio .folio-insurance-runway__month.is-short .folio-insurance-runway__bar i { background: var(--f-red); }
.folio .folio-insurance-runway__month.is-unknown .folio-insurance-runway__bar i { background: var(--f-line-strong); }
/* An exhausted month is an empty track with a red ground, not a zero-height
   bar that looks like a rendering failure. */
.folio .folio-insurance-runway__month.is-short .folio-insurance-runway__bar { border-bottom: 2px solid var(--f-red); }
.folio .folio-insurance-runway__month.is-short span { color: var(--f-red); }
.folio .folio-insurance-runway__foot {
    margin: 11px 0 0;
    color: var(--f-faint);
    font: 400 11px/1.5 var(--f-font-ui);
}
.folio .folio-insurance-runway__month b {
    display: block;
    color: var(--f-ink);
    font: 500 10px/1 var(--f-font-mono);
    letter-spacing: .06em;
    text-transform: uppercase;
}
.folio .folio-insurance-runway__month span {
    display: block;
    margin-top: 3px;
    color: var(--f-muted);
    font: 400 10.5px/1.2 var(--f-font-mono);
    font-variant-numeric: tabular-nums;
}

.folio .folio-insurance-ledger-detail {
    display: grid;
    gap: 7px;
    margin: 0;
    padding: 12px 0 2px;
    list-style: none;
}
.folio .folio-insurance-ledger-detail li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 14px;
}
.folio .folio-insurance-ledger-detail__date {
    min-width: 78px;
    color: var(--f-dim);
    font: 400 11px/1.4 var(--f-font-mono);
}
.folio .folio-insurance-ledger-detail__policy { flex: 1 1 220px; min-width: 0; }
.folio .folio-insurance-ledger-detail__policy b {
    color: var(--f-ink);
    font: 500 12.5px/1.35 var(--f-font-ui);
}
.folio .folio-insurance-ledger-detail__policy em {
    display: block;
    color: var(--f-faint);
    font: 400 10.5px/1.35 var(--f-font-ui);
    font-style: normal;
}
.folio .folio-insurance-ledger-detail__flag {
    padding: 2px 8px 3px;
    border: 1px solid var(--f-line-strong);
    border-radius: var(--f-radius-pill);
    color: var(--f-dim);
    font: 500 8.5px/1.4 var(--f-font-mono);
    letter-spacing: .09em;
    text-transform: uppercase;
    white-space: nowrap;
}
.folio .folio-insurance-ledger-detail__flag.is-confirmed { border-color: var(--f-accent); color: var(--f-accent); }
.folio .folio-insurance-ledger-detail__flag.is-unlinked { border-color: var(--f-gold); color: var(--f-bronze); }
.folio .folio-insurance-ledger-detail__amount {
    margin-left: auto;
    color: var(--f-ink);
    font: 400 12.5px/1.4 var(--f-font-mono);
    font-variant-numeric: tabular-nums;
}
.folio .folio-insurance-ledger-detail__empty {
    margin: 0;
    padding: 12px 0 2px;
    color: var(--f-faint);
    font: 400 11.5px/1.5 var(--f-font-ui);
}
.folio .folio-insurance-funding__notes {
    display: grid;
    gap: 7px;
    padding: 12px 15px;
    border-left: 2px solid var(--f-gold);
    background: var(--f-gold-soft);
}
.folio .folio-insurance-funding__notes p {
    margin: 0;
    color: var(--f-muted);
    font: 400 12px/1.55 var(--f-font-ui);
}
.folio .folio-insurance-funding__notes strong { color: var(--f-bronze); }

/* D · Policy book --------------------------------------------------------- */

/* Two books per row so each has room for a real card, and each book is the same
   height with its own scroll -- one person having eleven policies must not push
   the other person's book off the screen. */
.folio .folio-insurance-owner-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    /* Stretch, so two books in a row share one top and one bottom edge and the
       tabs line up. Each book scrolls inside that shared height. */
    align-items: stretch;
}
.folio .folio-insurance-owner {
    display: flex;
    flex-direction: column;
    max-height: 720px;
    min-width: 0;
    border: 1px solid var(--f-line);
    border-radius: var(--f-radius);
    background: var(--f-paper);
}
.folio .folio-insurance-owner__head {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: none;
    padding: 17px 20px 15px;
    border-bottom: 1px solid var(--f-line);
}
.folio .folio-insurance-owner__avatar {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    flex: none;
    border: 1px solid var(--f-line-strong);
    border-radius: 50%;
    background: var(--f-quiet, #fcf9f1);
    color: var(--f-bronze);
    font: 500 11px/1 var(--f-font-mono);
}
.folio .folio-insurance-owner__head div { flex: 1 1 auto; min-width: 0; }
.folio .folio-insurance-owner__head p {
    margin: 0 0 3px;
    color: var(--f-bronze);
    font: 500 8.5px/1 var(--f-font-mono);
    letter-spacing: .14em;
    text-transform: uppercase;
}
.folio .folio-insurance-owner__head h3 {
    margin: 0;
    color: var(--f-ink);
    font: 400 20px/1.15 var(--f-font-display);
    letter-spacing: -.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.folio .folio-insurance-owner__count {
    flex: none;
    color: var(--f-dim);
    font: 400 10.5px/1 var(--f-font-mono);
}

.folio .folio-insurance-tabs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    flex: none;
    border-bottom: 1px solid var(--f-line-strong);
    background: var(--f-quiet, #fcf9f1);
}
.folio .folio-insurance-tabs button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 6px 9px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: none;
    color: var(--f-dim);
    font: 500 10.5px/1.2 var(--f-font-ui);
    cursor: pointer;
}
.folio .folio-insurance-tabs button span {
    padding: 1px 6px 2px;
    border-radius: var(--f-radius-pill);
    background: var(--f-inset);
    color: var(--f-dim);
    font: 500 9px/1.4 var(--f-font-mono);
}
.folio .folio-insurance-tabs button:hover { color: var(--f-ink); }
.folio .folio-insurance-tabs button.active {
    border-bottom-color: var(--f-accent);
    background: var(--f-paper);
    color: var(--f-ink);
}
.folio .folio-insurance-tabs button.active span { background: var(--f-accent-soft); color: var(--f-accent); }
.folio .folio-insurance-tabs button:focus-visible { outline: 2px solid var(--f-accent); outline-offset: -3px; }

.folio .folio-insurance-owner__panel {
    flex: 1 1 auto;
    min-height: 0;
    padding: 4px 16px 16px;
    overflow-y: auto;
    scrollbar-width: thin;
}
.folio .folio-insurance-owner__panel:focus-visible { outline: 2px solid var(--f-accent); outline-offset: -3px; }

/* D4 · ruled cap. Product type is the grouping, and the groups are always in
   the same order, so two people's books can be read against each other. */
.folio .folio-insurance-type__cap {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 16px 0 9px;
    color: var(--f-dim);
    font: 500 9px/1 var(--f-font-mono);
    letter-spacing: .15em;
    text-transform: uppercase;
}
.folio .folio-insurance-type__cap::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--f-line);
}
.folio .folio-insurance-type__cap span { order: 3; color: var(--f-faint); }

.folio .folio-insurance-policy {
    padding: 12px 14px 13px;
    border: 1px solid var(--f-line);
    border-radius: var(--f-radius-sm);
    background: var(--f-paper);
}
.folio .folio-insurance-policy + .folio-insurance-policy { margin-top: 9px; }
.folio .folio-insurance-policy.is-outside { background: var(--f-quiet, #fcf9f1); }
.folio .folio-insurance-policy.is-inactive { border-style: dashed; }
.folio .folio-insurance-policy__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 4px 12px;
    align-items: start;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--f-line);
}
.folio .folio-insurance-policy__id { min-width: 0; }
.folio .folio-insurance-policy__id h5 {
    margin: 0;
    color: var(--f-ink);
    font: 500 13.5px/1.25 var(--f-font-ui);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.folio .folio-insurance-policy__id p {
    margin: 3px 0 0;
    color: var(--f-faint);
    font: 400 10.5px/1.35 var(--f-font-ui);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* The one figure that is the point of this contract, right-aligned so a column
   of cards can be read down. */
.folio .folio-insurance-policy__figure { text-align: right; }
.folio .folio-insurance-policy__figure b {
    display: block;
    color: var(--f-ink);
    font: 400 18px/1 var(--f-font-display);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.folio .folio-insurance-policy__figure span {
    display: block;
    margin-top: 4px;
    color: var(--f-faint);
    font: 500 8px/1.2 var(--f-font-mono);
    letter-spacing: .1em;
    text-transform: uppercase;
}
.folio .folio-insurance-policy__figure.is-muted b { color: var(--f-faint); font-size: 13px; }
.folio .folio-insurance-policy__edit {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border: 1px solid var(--f-line);
    border-radius: 50%;
    background: transparent;
    color: var(--f-dim);
    cursor: pointer;
}
.folio .folio-insurance-policy__edit:hover { border-color: var(--f-accent); color: var(--f-accent); }
.folio .folio-insurance-policy__edit:focus-visible { outline: 2px solid var(--f-accent); outline-offset: 2px; }

.folio .folio-insurance-policy__flags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 6px;
    margin: 9px 0 0;
    padding: 0;
    list-style: none;
}
.folio .folio-insurance-policy__flags span {
    padding: 1px 7px 2px;
    border: 1px solid var(--f-line-strong);
    border-radius: var(--f-radius-pill);
    color: var(--f-dim);
    font: 500 8px/1.5 var(--f-font-mono);
    letter-spacing: .08em;
    text-transform: uppercase;
}
.folio .folio-insurance-policy__flags span.is-needs { border-color: var(--f-gold); color: var(--f-bronze); }

/* Two columns, label above value, so a fact is one block and a long carrier or
   member name cannot push its own label off the row. */
.folio .folio-insurance-policy__facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px 14px;
    margin: 11px 0 0;
}
.folio .folio-insurance-policy__facts > div { min-width: 0; }
.folio .folio-insurance-policy__facts dt {
    color: var(--f-faint);
    font: 500 8px/1.2 var(--f-font-mono);
    letter-spacing: .11em;
    text-transform: uppercase;
}
.folio .folio-insurance-policy__facts dd {
    margin: 4px 0 0;
    color: var(--f-ink);
    font: 400 12px/1.35 var(--f-font-ui);
    font-variant-numeric: tabular-nums;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.folio .folio-insurance-policy__facts dd.is-muted { color: var(--f-faint); }
/* Gold only where the gap actually blocks something -- an undated schedule
   keeps the policy out of the reserve projection. */
.folio .folio-insurance-policy__facts > div.is-needs dt { color: var(--f-bronze); }
.folio .folio-insurance-policy__facts > div.is-needs dd { color: var(--f-bronze); font-weight: 500; }

.folio .folio-insurance-owner__empty {
    display: grid;
    gap: 3px;
    margin: 16px 0 4px;
    padding: 16px;
    border: 1px dashed var(--f-line-strong);
    border-radius: var(--f-radius-sm);
    text-align: center;
}
.folio .folio-insurance-owner__empty strong { color: var(--f-ink); font: 500 12.5px/1.3 var(--f-font-ui); }
.folio .folio-insurance-owner__empty span { color: var(--f-dim); font: 400 11.5px/1.45 var(--f-font-ui); }

/* E · Evidence ------------------------------------------------------------ */

.folio .folio-insurance-evidence-grid { align-items: start; }
.folio .folio-insurance-attestation { display: grid; gap: 12px; }
.folio .folio-insurance-attestation__status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}
.folio .folio-insurance-attestation__status p,
.folio .folio-insurance-attestation > p {
    margin: 0;
    color: var(--f-muted);
    font: 400 12px/1.55 var(--f-font-ui);
}
.folio .folio-insurance-attestation blockquote {
    margin: 0;
    padding-left: 12px;
    border-left: 2px solid var(--f-line-strong);
    color: var(--f-muted);
    font: 400 12px/1.6 var(--f-font-ui);
}
.folio .folio-insurance-attestation__editor { display: grid; gap: 12px; justify-items: start; }
.folio .folio-insurance-caution {
    margin: 0 0 12px;
    color: var(--f-dim);
    font: 400 11.5px/1.5 var(--f-font-ui);
}
.folio .folio-insurance-review-list { display: grid; gap: 10px; }
.folio .folio-insurance-review-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 14px;
    padding: 12px 0;
    border-bottom: 1px solid var(--f-line);
}
.folio .folio-insurance-review-row:last-child { border-bottom: 0; }
.folio .folio-insurance-review-row__identity strong {
    display: block;
    color: var(--f-ink);
    font: 500 12.5px/1.35 var(--f-font-ui);
}
.folio .folio-insurance-review-row__identity span,
.folio .folio-insurance-review-row__identity small {
    display: block;
    color: var(--f-faint);
    font: 400 11px/1.4 var(--f-font-ui);
}
.folio .folio-insurance-review-row__amount { text-align: right; }
.folio .folio-insurance-review-row__amount strong {
    display: block;
    color: var(--f-ink);
    font: 400 15px/1.1 var(--f-font-display);
    font-variant-numeric: tabular-nums;
}
.folio .folio-insurance-review-row__amount span {
    display: block;
    margin-top: 3px;
    color: var(--f-faint);
    font: 400 10.5px/1.3 var(--f-font-ui);
}
.folio .folio-insurance-review-row__actions {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.folio .folio-insurance-review-foot {
    margin: 12px 0 0;
    color: var(--f-dim);
    font: 400 11.5px/1.5 var(--f-font-ui);
}
.folio .folio-insurance-modal { width: min(900px, calc(100vw - 32px)); }
.folio .folio-insurance-modal .folio-modal__body { display: grid; gap: 16px; }
.folio .folio-insurance-modal .folio-modal__context { margin: 0; }

/* The policy editor is numeric-first: paired fields read as one decision per
   row, which is why it is two columns and not a single stack. */
.folio .folio-insurance-form + .folio-insurance-form { margin-top: 2px; }
.folio .folio-insurance-form .folio-editor { margin: 0; }
.folio .folio-insurance-form .folio-editor__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.folio .folio-insurance-form .folio-editor__row--single .folio-editor__fields { grid-template-columns: minmax(0, 1fr); }

/* The route root. The verdict opens the page, so it owns the top rhythm rather
   than inheriting a titled section's padding, and the closing section keeps the
   page's bottom breathing room. */
.folio .household-insurance-folio .folio-verdict { padding-top: 34px; }
.folio .household-insurance-folio .folio-insurance-evidence-section { padding-bottom: 78px; }

@media (max-width: 1120px) {
    .folio .folio-verdict,
    .folio .folio-insurance-coverage,
    .folio .folio-insurance-owner-grid { grid-template-columns: minmax(0, 1fr); }
    .folio .folio-verdict { gap: 26px; align-items: start; }
    .folio .folio-insurance-owner { max-height: 620px; }
}

@media (max-width: 720px) {
    .folio .folio-insurance-form .folio-editor__fields { grid-template-columns: minmax(0, 1fr); }
    .folio .folio-verdict__stats { grid-template-columns: minmax(0, 1fr); }
    .folio .folio-verdict__stats > div { border-right: 0; }
    .folio .folio-verdict__stats > div:nth-last-child(-n+2) { border-bottom: 1px solid var(--f-line); }
    .folio .folio-verdict__stats > div:last-child { border-bottom: 0; }
    .folio .folio-insurance-reserve-account { grid-template-columns: minmax(0, 1fr); }
    .folio .folio-insurance-reserve-account__balance { text-align: left; }
    .folio .folio-insurance-runway__track { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .folio .folio-insurance-policy__head { grid-template-columns: minmax(0, 1fr) auto; }
    .folio .folio-insurance-policy__figure { grid-column: 1; text-align: left; }
    .folio .folio-insurance-policy__facts { grid-template-columns: minmax(0, 1fr); }
    .folio .folio-insurance-modal { width: 100%; }
}

/* Practice Assets composition lives in styles/tabs/practice-assets.css. */

/* --------------------------------------------------------------------------
   Practice Insurance

   Six questions, six shapes: a funding verdict, protection reach as a ranked
   list, an ordered agenda, a runway and ledger on the page's one band, ranked
   concentration, and evidence meters. It replaced ten `advisor-card` sections
   stacked in a `module-grid`, all at one weight.
   -------------------------------------------------------------------------- */

/* The --insurance-* palette was hosted on .practice-insurance-template, the
   page shell this redesign replaced, so every legacy rule still painting from
   it silently lost its colour. They are re-hosted on the route root and mapped
   onto Folio tokens rather than restated as a parallel palette: the values were
   near-duplicates of the system's, and --insurance-slate belonged to neither
   Folio hue arc (see design rules, palette law). */
.folio .practice-insurance-folio {
    --insurance-green: var(--f-green);
    --insurance-green-soft: var(--f-green-soft);
    --insurance-gold: var(--f-gold);
    --insurance-gold-soft: var(--f-gold-soft);
    --insurance-red: var(--f-red);
    --insurance-slate: var(--f-grey, #9a9081);
}

.folio .practice-insurance-folio .folio-verdict { padding-top: 26px; }

.folio .practice-insurance-filter-dock {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
    padding: 13px 16px;
    border: 1px solid var(--f-line);
    border-radius: var(--f-radius);
    background: var(--f-paper);
}
.folio .practice-insurance-filter-context { min-width: 0; }
.folio .practice-insurance-filter-context span {
    color: var(--f-bronze);
    font: 500 9px/1 var(--f-font-mono);
    letter-spacing: .13em;
    text-transform: uppercase;
}
.folio .practice-insurance-filter-context strong {
    display: block;
    margin: 4px 0 2px;
    color: var(--f-ink);
    font: 400 16px/1.2 var(--f-font-display);
}
.folio .practice-insurance-filter-context em {
    color: var(--f-faint);
    font: 400 11px/1.4 var(--f-font-ui);
    font-style: normal;
}
.folio .practice-insurance-filter-groups { display: flex; flex-wrap: wrap; gap: 10px 20px; }
.folio .practice-insurance-filter-groups > div > span {
    display: block;
    margin-bottom: 5px;
    color: var(--f-dim);
    font: 500 8.5px/1 var(--f-font-mono);
    letter-spacing: .13em;
    text-transform: uppercase;
}
.folio .practice-insurance-segmented,
.folio .practice-insurance-measure-toggle {
    display: inline-flex;
    padding: 2px;
    border: 1px solid var(--f-line);
    border-radius: var(--f-radius-pill);
    background: var(--f-quiet, #fcf9f1);
}
.folio .practice-insurance-segmented button,
.folio .practice-insurance-measure-toggle button {
    padding: 5px 12px 6px;
    border: 0;
    border-radius: var(--f-radius-pill);
    background: none;
    color: var(--f-dim);
    font: 500 11px/1.2 var(--f-font-ui);
    cursor: pointer;
}
.folio .practice-insurance-segmented button[aria-pressed="true"],
.folio .practice-insurance-measure-toggle button[aria-pressed="true"] {
    background: var(--f-paper);
    box-shadow: var(--f-shadow);
    color: var(--f-ink);
}
.folio .practice-insurance-segmented button:focus-visible,
.folio .practice-insurance-measure-toggle button:focus-visible { outline: 2px solid var(--f-accent); outline-offset: 1px; }

/* Reach ------------------------------------------------------------------- */

.folio .practice-insurance-reach-lead {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 18px;
    margin: 0 0 16px;
}
.folio .practice-insurance-reach-lead b {
    color: var(--f-green);
    font: 400 clamp(34px, 4vw, 46px)/1 var(--f-font-display);
    font-variant-numeric: tabular-nums;
}
.folio .practice-insurance-reach-lead span {
    flex: 1 1 320px;
    color: var(--f-muted);
    font: 400 12.5px/1.6 var(--f-font-ui);
}
.folio .practice-insurance-section-boundary {
    margin: 12px 0 0;
    color: var(--f-faint);
    font: 400 11px/1.55 var(--f-font-ui);
}
.folio .practice-insurance-compact-empty {
    margin: 0;
    color: var(--f-faint);
    font: 400 12px/1.55 var(--f-font-ui);
}

/* Agenda ------------------------------------------------------------------ */

.folio .practice-insurance-agenda {
    margin: 0;
    padding: 0;
    border: 1px solid var(--f-line);
    border-radius: var(--f-radius);
    background: var(--f-paper);
    list-style: none;
}
.folio .practice-insurance-agenda li + li { border-top: 1px solid var(--f-line); }
.folio .practice-insurance-agenda button {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 6px 18px;
    align-items: center;
    width: 100%;
    padding: 13px 16px;
    border: 0;
    background: none;
    text-align: left;
    cursor: pointer;
}
.folio .practice-insurance-agenda button:hover { background: var(--f-quiet, #fcf9f1); }
.folio .practice-insurance-agenda button:focus-visible { outline: 2px solid var(--f-accent); outline-offset: -2px; }
.folio .practice-insurance-agenda__what { min-width: 0; }
.folio .practice-insurance-agenda__what b {
    display: block;
    color: var(--f-ink);
    font: 500 13px/1.3 var(--f-font-ui);
}
.folio .practice-insurance-agenda__what em {
    display: block;
    margin-top: 3px;
    color: var(--f-dim);
    font: 400 11.5px/1.4 var(--f-font-ui);
    font-style: normal;
}
.folio .practice-insurance-agenda__kind {
    padding: 2px 8px 3px;
    border: 1px solid var(--f-line-strong);
    border-radius: var(--f-radius-pill);
    color: var(--f-dim);
    font: 500 8.5px/1.4 var(--f-font-mono);
    letter-spacing: .09em;
    text-transform: uppercase;
    white-space: nowrap;
}
.folio .practice-insurance-agenda time {
    color: var(--f-muted);
    font: 400 11.5px/1.3 var(--f-font-mono);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
/* D5 · marginal tick. Severity is a gutter mark, never a filled row. */
.folio .practice-insurance-agenda li.is-critical button,
.folio .practice-insurance-agenda li.is-urgent button { box-shadow: inset 2px 0 0 var(--f-red); }
.folio .practice-insurance-agenda li.is-attention button { box-shadow: inset 2px 0 0 var(--f-gold); }
.folio .practice-insurance-agenda-clear {
    margin: 0;
    color: var(--f-muted);
    font: 400 12.5px/1.6 var(--f-font-ui);
}
.folio .practice-insurance-agenda-clear strong { color: var(--f-ink); }

/* Commitments ------------------------------------------------------------- */

.folio .practice-insurance-commitments-stack { display: grid; gap: 18px; }
.folio .practice-insurance-schedule-setup {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(220px, .6fr);
    gap: 20px;
    padding: 20px 22px;
    border: 1px solid var(--f-line);
    border-radius: var(--f-radius);
    background: var(--f-paper);
}
.folio .practice-insurance-schedule-setup p {
    margin: 0 0 6px;
    color: var(--f-bronze);
    font: 500 9px/1 var(--f-font-mono);
    letter-spacing: .13em;
    text-transform: uppercase;
}
.folio .practice-insurance-schedule-setup b {
    display: block;
    color: var(--f-ink);
    font: 400 20px/1.2 var(--f-font-display);
}
.folio .practice-insurance-schedule-setup span {
    display: block;
    margin: 7px 0 12px;
    color: var(--f-muted);
    font: 400 12.5px/1.6 var(--f-font-ui);
}
.folio .practice-insurance-schedule-setup aside {
    align-self: start;
    padding: 14px 16px;
    border-radius: var(--f-radius-sm);
    background: var(--f-inset);
}
.folio .practice-insurance-schedule-setup aside span {
    margin: 0;
    color: var(--f-dim);
    font: 500 8.5px/1.2 var(--f-font-mono);
    letter-spacing: .12em;
    text-transform: uppercase;
}
.folio .practice-insurance-schedule-setup aside b { margin-top: 6px; font-size: 22px; }
.folio .practice-insurance-schedule-setup aside em {
    display: block;
    margin-top: 5px;
    color: var(--f-faint);
    font: 400 10.5px/1.4 var(--f-font-ui);
    font-style: normal;
}
.folio .practice-insurance-funding-gaps h3,
.folio .practice-insurance-composition-grid h3,
.folio .practice-insurance-evidence-grid h3 {
    margin: 0 0 11px;
    color: var(--f-dim);
    font: 500 9px/1 var(--f-font-mono);
    letter-spacing: .15em;
    text-transform: uppercase;
}
.folio .practice-insurance-funding-gaps {
    padding: 16px 18px 18px;
    border: 1px solid var(--f-line);
    border-radius: var(--f-radius);
    background: var(--f-paper);
}
.folio .practice-insurance-funding-clear {
    margin: 0;
    padding: 13px 16px;
    border-left: 2px solid var(--f-accent);
    background: var(--f-accent-soft);
    color: var(--f-muted);
    font: 400 12.5px/1.55 var(--f-font-ui);
}

/* Composition and evidence ------------------------------------------------ */

.folio .practice-insurance-composition-grid,
.folio .practice-insurance-evidence-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    align-items: start;
}
.folio .practice-insurance-composition-grid > section,
.folio .practice-insurance-evidence-grid > section {
    min-width: 0;
    padding: 16px 18px 18px;
    border: 1px solid var(--f-line);
    border-radius: var(--f-radius);
    background: var(--f-paper);
}
.folio .practice-insurance-composition-grid > section.is-wide { grid-column: 1 / -1; }
.folio .practice-insurance-evidence-grid > section.practice-insurance-findings {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 20px;
    background: var(--f-emerald);
    border-color: var(--f-emerald);
}
.folio .practice-insurance-findings h3 { color: var(--f-gold-lumen); }
.folio .practice-insurance-findings p {
    flex: 1 1 320px;
    margin: 0;
    color: rgba(223, 233, 226, .82);
    font: 400 12.5px/1.55 var(--f-font-ui);
}
.folio .practice-insurance-findings p b { color: #eef3ef; font: 400 20px/1 var(--f-font-display); }
.folio .practice-insurance-findings .folio-cardlink {
    border-color: rgba(239, 211, 122, .38);
    color: var(--f-gold-lumen);
}
.folio .practice-insurance-findings .folio-cardlink:hover { border-color: var(--f-gold-lumen); background: rgba(239, 211, 122, .1); }

.folio .practice-insurance-typed-values { display: grid; gap: 12px; margin: 0; }
.folio .practice-insurance-typed-values dt {
    color: var(--f-faint);
    font: 500 8.5px/1.2 var(--f-font-mono);
    letter-spacing: .11em;
    text-transform: uppercase;
}
.folio .practice-insurance-typed-values dd {
    margin: 4px 0 0;
    color: var(--f-ink);
    font: 400 19px/1.05 var(--f-font-display);
    font-variant-numeric: tabular-nums;
}
.folio .practice-insurance-typed-values span {
    display: block;
    margin-top: 3px;
    color: var(--f-faint);
    font: 400 10.5px/1.35 var(--f-font-ui);
}
.folio .practice-insurance-unclassified-value {
    display: grid;
    gap: 4px;
    width: 100%;
    margin-top: 14px;
    padding: 12px 14px;
    border: 1px solid var(--f-gold);
    border-radius: var(--f-radius-sm);
    background: var(--f-gold-soft);
    text-align: left;
    cursor: pointer;
}
.folio .practice-insurance-unclassified-value span {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}
.folio .practice-insurance-unclassified-value em {
    color: var(--f-bronze);
    font: 500 8.5px/1.2 var(--f-font-mono);
    letter-spacing: .11em;
    text-transform: uppercase;
    font-style: normal;
}
.folio .practice-insurance-unclassified-value b {
    color: var(--f-ink);
    font: 400 17px/1 var(--f-font-display);
    font-variant-numeric: tabular-nums;
}
.folio .practice-insurance-unclassified-value small { color: var(--f-muted); font: 400 11px/1.4 var(--f-font-ui); }
.folio .practice-insurance-evidence-meters { display: grid; gap: 13px; }
.folio .practice-insurance-evidence-note {
    margin: 13px 0 0;
    color: var(--f-faint);
    font: 400 11px/1.55 var(--f-font-ui);
}
.folio .practice-insurance-scale {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 32px;
    margin: 0 0 14px;
    padding-bottom: 13px;
    border-bottom: 1px solid var(--f-line);
}
.folio .practice-insurance-scale dt {
    color: var(--f-faint);
    font: 500 8.5px/1.2 var(--f-font-mono);
    letter-spacing: .11em;
    text-transform: uppercase;
}
.folio .practice-insurance-scale dd {
    margin: 5px 0 0;
    color: var(--f-ink);
    font: 400 20px/1 var(--f-font-display);
    font-variant-numeric: tabular-nums;
}
.folio .practice-insurance-scale p {
    flex: 1 1 260px;
    margin: 0;
    align-self: end;
    color: var(--f-dim);
    font: 400 11px/1.5 var(--f-font-ui);
}

.folio .practice-insurance-evidence-lede {
    margin: 0 0 14px;
    max-width: 76ch;
    color: var(--f-muted);
    font: 400 12.5px/1.6 var(--f-font-ui);
}
/* Panels size to their own content; a three-row list must not inherit the
   height of a five-row one beside it. */
.folio .practice-insurance-composition-grid > section { align-self: start; }

.folio .practice-insurance-carrier-context {
    margin: 0;
    color: var(--f-muted);
    font: 400 12.5px/1.6 var(--f-font-ui);
}
.folio .practice-insurance-carrier-context strong { color: var(--f-ink); }
.folio .practice-insurance-refreshing,
.folio .practice-insurance-error {
    margin: 14px 0 0;
    color: var(--f-dim);
    font: 400 12px/1.5 var(--f-font-ui);
}
.folio .practice-insurance-error { color: var(--f-red); }

@media (max-width: 1120px) {
    .folio .practice-insurance-composition-grid,
    .folio .practice-insurance-evidence-grid,
    .folio .practice-insurance-schedule-setup { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
    .folio .practice-insurance-agenda button { grid-template-columns: minmax(0, 1fr); }
}

/* Book statistics ---------------------------------------------------------
   Three groups, each answering one question. Size lives here rather than in
   the hero: a principal checks it, they do not act on it. */
.folio .practice-insurance-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    border: 1px solid var(--f-line);
    border-radius: var(--f-radius);
    background: var(--f-paper);
}
.folio .practice-insurance-stats > section {
    min-width: 0;
    padding: 16px 20px 18px;
    border-right: 1px solid var(--f-line);
}
.folio .practice-insurance-stats > section:last-child { border-right: 0; }
.folio .practice-insurance-stats h3 {
    margin: 0 0 14px;
    color: var(--f-bronze);
    font: 500 9px/1 var(--f-font-mono);
    letter-spacing: .15em;
    text-transform: uppercase;
}
.folio .practice-insurance-stats dl { display: grid; gap: 14px; margin: 0; }
.folio .practice-insurance-stats dt {
    color: var(--f-faint);
    font: 500 8.5px/1.2 var(--f-font-mono);
    letter-spacing: .11em;
    text-transform: uppercase;
}
.folio .practice-insurance-stats dd {
    margin: 5px 0 0;
    color: var(--f-ink);
    font: 400 22px/1.02 var(--f-font-display);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.folio .practice-insurance-stats span {
    display: block;
    margin-top: 4px;
    color: var(--f-dim);
    font: 400 11px/1.4 var(--f-font-ui);
}
.folio .practice-insurance-stats .is-muted dd { color: var(--f-faint); font-size: 17px; }

/* Ninety-day horizon ------------------------------------------------------
   A rail positioned by date, so clustering is visible, over a list carrying
   the detail. The scale is labelled: a plot without one says nothing about
   magnitude, and here the magnitude is time. */
.folio .practice-insurance-horizon { display: grid; gap: 18px; }
.folio .practice-insurance-horizon__rail {
    position: relative;
    height: 44px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--f-line-strong);
    background:
        linear-gradient(90deg, var(--f-line) 1px, transparent 1px) 33.33% 0 / 33.33% 100% no-repeat,
        linear-gradient(90deg, var(--f-line) 1px, transparent 1px) 66.66% 0 / 66.66% 100% no-repeat;
}
.folio .practice-insurance-horizon__rail i {
    position: absolute;
    bottom: -5px;
    width: 9px;
    height: 9px;
    margin-left: -4.5px;
    border: 1.5px solid var(--f-paper);
    border-radius: 50%;
    background: var(--f-gold);
}
.folio .practice-insurance-horizon__rail i.is-critical { background: var(--f-red); }
.folio .practice-insurance-horizon__rail i.is-watch { background: var(--f-line-strong); }
.folio .practice-insurance-horizon__scale {
    display: flex;
    justify-content: space-between;
    padding-top: 4px;
}
.folio .practice-insurance-horizon__scale b {
    color: var(--f-faint);
    font: 500 8.5px/1 var(--f-font-mono);
    letter-spacing: .11em;
    text-transform: uppercase;
}
.folio .practice-insurance-horizon__window h3 {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 8px;
    color: var(--f-dim);
    font: 500 9px/1 var(--f-font-mono);
    letter-spacing: .15em;
    text-transform: uppercase;
}
.folio .practice-insurance-horizon__window h3::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--f-line);
}
.folio .practice-insurance-horizon__window h3 span { order: 3; color: var(--f-faint); }
.folio .practice-insurance-horizon__window ol {
    margin: 0;
    padding: 0;
    border: 1px solid var(--f-line);
    border-radius: var(--f-radius);
    background: var(--f-paper);
    list-style: none;
}
.folio .practice-insurance-horizon__window li + li { border-top: 1px solid var(--f-line); }
.folio .practice-insurance-horizon__window button {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr) auto;
    gap: 6px 16px;
    align-items: center;
    width: 100%;
    padding: 12px 16px;
    border: 0;
    background: none;
    text-align: left;
    cursor: pointer;
}
.folio .practice-insurance-horizon__window button:hover { background: var(--f-quiet, #fcf9f1); }
.folio .practice-insurance-horizon__window button:focus-visible { outline: 2px solid var(--f-accent); outline-offset: -2px; }
.folio .practice-insurance-horizon__window time {
    color: var(--f-ink);
    font: 400 12px/1.3 var(--f-font-mono);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.folio .practice-insurance-horizon__what { min-width: 0; }
.folio .practice-insurance-horizon__what b {
    display: block;
    color: var(--f-ink);
    font: 500 13px/1.3 var(--f-font-ui);
}
.folio .practice-insurance-horizon__what em {
    display: block;
    margin-top: 3px;
    color: var(--f-dim);
    font: 400 11.5px/1.4 var(--f-font-ui);
    font-style: normal;
}
.folio .practice-insurance-horizon__kind {
    padding: 2px 8px 3px;
    border: 1px solid var(--f-line-strong);
    border-radius: var(--f-radius-pill);
    color: var(--f-dim);
    font: 500 8.5px/1.4 var(--f-font-mono);
    letter-spacing: .09em;
    text-transform: uppercase;
    white-space: nowrap;
}
/* D5 · the gutter carries severity; the row is never filled. */
.folio .practice-insurance-horizon__window li.is-critical button { box-shadow: inset 2px 0 0 var(--f-red); }
.folio .practice-insurance-horizon__window li.is-attention button { box-shadow: inset 2px 0 0 var(--f-gold); }
.folio .practice-insurance-horizon__undated {
    margin: 0;
    color: var(--f-faint);
    font: 400 11.5px/1.5 var(--f-font-ui);
}

@media (max-width: 1120px) {
    .folio .practice-insurance-stats { grid-template-columns: minmax(0, 1fr); }
    .folio .practice-insurance-stats > section { border-right: 0; border-bottom: 1px solid var(--f-line); }
    .folio .practice-insurance-stats > section:last-child { border-bottom: 0; }
}
@media (max-width: 720px) {
    .folio .practice-insurance-horizon__window button { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   New household — the directory's manual create form.
   The modal stacks three bands: identity, service profile, then the people
   list, which repeats. Scoped under .folio because the form renders into
   #household-directory-overlay-root, which carries that class.
   ========================================================================== */
.folio .household-create-form {
    display: grid;
    gap: 18px;
}
.folio .household-create-service {
    padding-top: 16px;
    border-top: 1px solid var(--f-line);
}
.folio .household-create-people {
    display: grid;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid var(--f-line);
}
.folio .household-create-people__head h3 {
    margin: 0;
    color: var(--f-ink);
    font: 600 13px/1.3 var(--f-font-ui);
}
.folio .household-create-people__head p {
    margin: 3px 0 0;
    color: var(--f-dim);
    font: 400 11.5px/1.45 var(--f-font-ui);
}
.folio .household-create-person {
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--f-line);
    border-radius: var(--f-radius);
    background: var(--f-inset);
}
.folio .household-create-person__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}
.folio .household-create-person__head strong {
    color: var(--f-muted);
    font: 600 10.5px/1 var(--f-font-ui);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.folio .household-create-person__remove {
    padding: 0;
    border: 0;
    background: none;
    color: var(--f-dim);
    font: 500 11.5px/1 var(--f-font-ui);
    cursor: pointer;
}
.folio .household-create-person__remove:hover { color: var(--f-red); }
.folio .household-create-add { justify-self: start; }
.folio .folio-ledger--instrument { padding: 24px 26px 22px; border: 0; border-radius: var(--f-radius-lg); background: radial-gradient(120% 90% at 100% 0%, #3d3123 0%, #2c2318 60%); color: #efe7d6; box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 22px 44px rgba(51,41,29,.24); container-type: inline-size; }
.folio .folio-ledger__instrument-head { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 14px; align-items: end; padding-bottom: 16px; border-bottom: 1px solid rgba(239,231,214,.18); }
.folio .folio-ledger__instrument-head p { margin: 0 0 8px; font: 500 10px/1.4 var(--f-font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--f-gold-lumen); }
.folio .folio-ledger__instrument-head strong { display: block; font: 400 40px/1.1 var(--f-font-display); font-variant-numeric: tabular-nums; color: #fbf6ea; overflow-wrap: anywhere; }
.folio .folio-ledger--instrument .folio-ledger__instrument-head > span { max-width: 12ch; font: 400 12px/1.4 var(--f-font-ui); color: #c4bba9; text-align: right; }
.folio .folio-ledger__instrument-rows { margin: 6px 0 0; }
.folio .folio-ledger__instrument-rows > div { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 16px; padding: 9px 0; }
.folio .folio-ledger__instrument-rows dt { font: 500 10px/1.4 var(--f-font-mono); letter-spacing: .08em; text-transform: uppercase; color: #c4bba9; }
.folio .folio-ledger__instrument-rows dt small { display: block; margin-top: 4px; font: 400 11px/1.4 var(--f-font-ui); letter-spacing: 0; text-transform: none; }
.folio .folio-ledger__instrument-rows dd { position: relative; margin: 0; padding-left: 16px; border-left: 1px solid rgba(239,231,214,.18); text-align: right; font: 400 20px/1.3 var(--f-font-display); font-variant-numeric: tabular-nums; color: #fbf6ea; white-space: nowrap; }
.folio .folio-ledger__instrument-rows dd.pos { color: #a9d6ba; }
.folio .folio-ledger__instrument-rows dd.neg { color: #f0a58f; }
.folio .folio-ledger__instrument-rows dd.dim { color: #c4bba9; }
.folio .folio-ledger__scale { position: relative; height: 48px; margin-top: 18px; }
.folio .folio-ledger__scale::before { content: ""; position: absolute; left: 0; right: 0; top: 10px; height: 8px; background: repeating-linear-gradient(90deg,rgba(239,231,214,.35) 0 1px,transparent 1px 10%), linear-gradient(90deg,rgba(95,179,147,.5),rgba(95,179,147,.5)) left bottom / var(--folio-scale) 2px no-repeat; }
.folio .folio-ledger__scale > i { position: absolute; top: 0; left: var(--folio-scale); transform: translateX(-1px); width: 2px; height: 22px; border-radius: 1px; background: var(--f-gold-lumen); box-shadow: 0 0 10px rgba(239,211,122,.6); }
.folio .folio-ledger__scale > div { position: absolute; left: 0; right: 0; top: 26px; display: flex; justify-content: space-between; gap: 8px; font: 500 9px/1.4 var(--f-font-mono); color: #c4bba9; }
.folio .folio-ledger__scale > div > :last-child { text-align: right; }
.folio .folio-ledger--instrument .folio-ledger__scale span { color: inherit; font: inherit; }
.folio .folio-ledger--instrument .folio-ledger__foot { color: #c4bba9; border: 0; margin: 10px 0 0; }
@container (max-width: 330px) {
    .folio .folio-ledger__instrument-head { grid-template-columns: minmax(0,1fr); }
    .folio .folio-ledger--instrument .folio-ledger__instrument-head > span { max-width: none; text-align: left; }
    .folio .folio-ledger__instrument-head strong { font-size: 34px; }
    .folio .folio-ledger__instrument-rows > div { grid-template-columns: minmax(0,1fr); gap: 4px; }
    .folio .folio-ledger__instrument-rows dd { padding-left: 0; border-left: 0; text-align: left; }
}
/* D17 / BG1 compound-field worksheet, promoted from the approved composition. */
.folio .folio-worksheet { margin-top: 30px; border: 1px solid var(--f-line); border-radius: var(--f-radius-lg); background: var(--f-paper); box-shadow: var(--f-shadow); container-type: inline-size; }
.folio .folio-worksheet > header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--f-line); }
.folio .folio-worksheet > header h3 { margin: 0; font: 500 10px/1.4 var(--f-font-mono); letter-spacing: .13em; text-transform: uppercase; color: var(--f-bronze); }
.folio .folio-worksheet > header p { margin: 4px 0 0; font: 400 12px/1.5 var(--f-font-ui); color: var(--f-dim); }
.folio .folio-worksheet > header > strong { font: 400 21px/1.4 var(--f-font-display); font-variant-numeric: tabular-nums; }
.folio .folio-worksheet__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 280px) 148px; gap: 16px; align-items: center; padding: 14px 20px; }
.folio .folio-worksheet__row.has-disclosure { grid-template-columns: 26px minmax(0, 1fr) minmax(240px, 280px) 148px; }
.folio .folio-worksheet__disclosure { grid-column: 1; grid-row: 1; display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 1px solid var(--f-line-strong); border-radius: var(--f-radius-sm); background: var(--f-paper); color: var(--f-dim); cursor: pointer; }
.folio .folio-worksheet__disclosure::before { content: "›"; font: 400 18px/1 var(--f-font-ui); }
.folio .folio-worksheet__disclosure[aria-expanded="true"]::before { transform: rotate(90deg); }
.folio .folio-worksheet__disclosure:focus-visible { outline: 2px solid var(--f-accent); outline-offset: 2px; }
.folio .folio-worksheet__copy { min-width: 0; }
.folio .folio-worksheet__copy > strong { display: block; font: 600 14px/1.5 var(--f-font-ui); }
.folio .folio-worksheet__copy > small, .folio .folio-worksheet__control > small { display: block; margin-top: 2px; font: 400 12px/1.5 var(--f-font-ui); color: var(--f-dim); }
.folio .folio-worksheet__control { min-width: 0; }
.folio .folio-worksheet__equivalent { text-align: right; font-variant-numeric: tabular-nums; }
.folio .folio-worksheet__equivalent strong { display: block; font: 600 14px/1.5 var(--f-font-ui); }
.folio .folio-worksheet__equivalent small { display: block; margin-top: 3px; font: 400 11.5px/1.5 var(--f-font-ui); color: var(--f-dim); }
.folio .folio-worksheet__entry + .folio-worksheet__entry { border-top: 1px solid var(--f-line); }
.folio .folio-worksheet .folio-worksheet__entry.is-dirty > .folio-worksheet__row { background: color-mix(in srgb, var(--f-gold-soft) 45%, var(--f-paper)); }
.folio .folio-worksheet__copy > input { width: 100%; min-width: 0; }
.folio .folio-worksheet__actions { grid-column: 1 / -1; justify-self: end; }
.folio .folio-worksheet [hidden] { display: none !important; }
@container (max-width: 760px) {
    .folio .folio-worksheet__row { grid-template-columns: minmax(0,1fr) 148px; gap: 10px 16px; }
    .folio .folio-worksheet__row.has-disclosure { grid-template-columns: 26px minmax(0,1fr); }
    .folio .folio-worksheet__row.has-disclosure .folio-worksheet__control { grid-column: 2; }
    .folio .folio-worksheet__row.has-disclosure .folio-worksheet__equivalent { grid-column: 2; }
    .folio .folio-worksheet__copy { grid-column: 1 / -1; }
    .folio .folio-worksheet__row.has-disclosure .folio-worksheet__copy { grid-column: 2; }
    .folio .folio-worksheet__equivalent { text-align: left; }
}
@container (max-width: 420px) {
    .folio .folio-worksheet__row { grid-template-columns: minmax(0,1fr); padding: 14px 12px; }
    .folio .folio-worksheet__row.has-disclosure { grid-template-columns: 26px minmax(0,1fr); gap: 10px; }
    .folio .folio-worksheet__control, .folio .folio-worksheet__equivalent { grid-column: 1 / -1; }
    .folio .folio-worksheet__row.has-disclosure .folio-worksheet__control, .folio .folio-worksheet__row.has-disclosure .folio-worksheet__equivalent { grid-column: 1 / -1; }
}


/* Approved D8d pay statement, RE1 property cards and MT2 chronology. */
.folio .folio-pay-statement { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); border-block:1px solid var(--f-line); }
.folio .folio-statement { min-width:0; padding:18px 24px 20px; }
.folio .folio-pay-statement > section + section { border-left:1px solid var(--f-line); background:color-mix(in srgb,var(--f-accent-soft) 22%,var(--f-paper)); }
.folio .folio-statement h4 { margin:0 0 10px; font:500 10px/1.4 var(--f-font-mono); letter-spacing:.13em; text-transform:uppercase; color:var(--f-bronze); }
.folio .folio-statement__line { display:grid; grid-template-columns:minmax(0,auto) minmax(8px,1fr) auto; gap:8px; align-items:baseline; padding:6px 0; font-size:13.5px; }
.folio .folio-statement__line small { display:block; margin-top:2px; font-size:11.5px; color:var(--f-dim); }
.folio .folio-statement__line i { align-self:end; margin-bottom:4px; border-bottom:1px dotted var(--f-line-strong); }
.folio .folio-statement__line strong { position:relative; font:500 14px/1.3 var(--f-font-ui); font-variant-numeric:tabular-nums; white-space:nowrap; }
.folio .folio-statement__line strong.neg { color:var(--f-red); }
.folio .folio-statement__line strong.pos { color:var(--f-green); }
.folio .folio-statement__line--subtotal { border-top:1px solid var(--f-line); padding-top:9px; margin-top:4px; }
.folio .folio-statement__line--total { border-top:1px solid var(--f-line); padding-top:10px; margin-top:6px; }
.folio .folio-statement__line--total strong { font:400 24px/1.2 var(--f-font-display); padding-bottom:3px; border-bottom:3px double var(--f-ink); }
.folio .folio-statement__line .folio-state-icon { position:static; display:inline-flex; margin-left:5px; }
.folio .folio-statement__note { font-size:12px; line-height:1.5; color:var(--f-muted); }
.folio .folio-pay-statement__plans { padding:12px 0; }
.folio .folio-pay-statement__plans > summary { cursor:pointer; color:var(--f-accent); }
.folio .income-benefits-root { display:block; }
.folio .employment-register-panel { padding:0; border:0; box-shadow:none; background:transparent; }
.folio .household-meetings-shell .meeting-workspace { border:0; box-shadow:none; background:transparent; }
.folio .folio-chronology-frame { container-type:inline-size; }
.folio .income-person-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:16px; }
.folio .income-person-card { border:1px solid var(--f-line); border-radius:14px; background:var(--f-paper); box-shadow:var(--f-shadow); overflow:hidden; }
.folio .income-person-card > header { display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; align-items:center; padding:18px 24px; }
.folio .income-person-card > header h3 { margin:0; font:400 22px/1.2 var(--f-font-display); }
.folio .income-person-card > header > span { text-align:right; }
.folio .income-person-card > header > span strong,.folio .income-person-card > header > span em { display:block; }
.folio .income-person-employments .employment-card { border:0; border-radius:0; box-shadow:none; background:transparent; padding:0; }
.folio .income-person-employments .employment-card-heading,.folio .income-person-employments .employment-workplace-row { padding:16px 24px; }
.folio .folio-property-list { display:grid; gap:14px; }
.folio .holdings-ledger .folio-ledger__table { min-width:640px; }
.folio .holdings-workspace { grid-template-columns:minmax(0,1fr); }
.folio .holdings-workspace > * { min-width:0; }
.folio .holdings-ledger .folio-ledger__row > :is(th,td) { height:46px; }
.folio .holdings-ledger .folio-ledger__cell > span:not(.folio-state) { white-space:normal; }
.folio .folio-ledger__cell > .folio-state { display:inline-grid; }
.folio .holdings-position-ledger { padding-top:20px; }
.folio .balance-sheet-statement .folio-state { vertical-align:middle; margin-left:5px; }
.folio .folio-property-list, .folio .employment-card { container-type:inline-size; }
.folio .folio-property { display:grid; grid-template-columns:200px minmax(0,1fr); border:1px solid var(--f-line); border-radius:14px; background:var(--f-paper); box-shadow:var(--f-shadow); overflow:hidden; container-type:inline-size; }
.folio .folio-property__identity { padding:18px 20px; border-right:1px solid var(--f-line); background:var(--f-quiet); }
.folio .folio-property__identity h3 { margin:0; font:400 19px/1.2 var(--f-font-display); }
.folio .folio-property__identity p { font-size:12.5px; color:var(--f-dim); }
.folio .folio-property__identity .folio-property__type { font:500 10px/1.4 var(--f-font-mono); text-transform:uppercase; color:var(--f-bronze); }
.folio .folio-property__ownership { padding-top:10px; border-top:1px solid var(--f-line); }
.folio .folio-property__body { min-width:0; }
.folio .folio-property .folio-figgrid { grid-template-columns:repeat(4,minmax(0,1fr)); border:0; border-radius:0; box-shadow:none; margin:0; }
.folio .folio-property .folio-figgrid > div { padding:14px 18px; }
.folio .folio-property .folio-figgrid strong { font-size:24px; }
.folio .folio-property__scale { display:flex; height:8px; margin:12px 18px; border-radius:4px; overflow:hidden; }
.folio .folio-property__scale i { width:var(--folio-debt); background:color-mix(in srgb,var(--f-red) 55%,var(--f-paper)); }
.folio .folio-property__scale b { flex:1; background:#0a8768; }
.folio .folio-property footer { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; padding:10px 18px; font-size:12.5px; color:var(--f-muted); }
.folio .folio-chronology { position:relative; padding-left:132px; }
.folio .folio-chronology::before { content:""; position:absolute; left:105px; inset-block:12px; width:2px; background:var(--f-line-strong); }
.folio .folio-chronology__item { position:relative; margin-bottom:14px; }
.folio .folio-chronology__item::before { content:""; position:absolute; left:-32px; top:30px; width:12px; height:12px; border-radius:50%; background:var(--f-paper); box-shadow:0 0 0 2px var(--f-line-strong); }
.folio .folio-chronology__item.is-next::before { background:var(--f-accent); box-shadow:0 0 0 4px var(--f-accent-soft); }
.folio .folio-chronology__when { position:absolute; left:-132px; top:18px; width:88px; text-align:right; }
.folio .folio-chronology__when strong { font:400 17px/1.3 var(--f-font-display); }
.folio .folio-chronology__when small { display:block; margin-top:4px; font-size:11.5px; color:var(--f-dim); }
.folio .folio-chronology__body .meeting-card { background:var(--f-paper); border:1px solid var(--f-line); border-radius:12px; }
.folio .folio-chronology__item.is-next .meeting-card { border-color:var(--f-accent); box-shadow:0 10px 26px rgba(16,60,46,.12); }
.folio .folio-chronology__item.is-past .meeting-card { background:var(--f-quiet); }
@container (max-width:800px) { .folio .folio-property .folio-figgrid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@container (max-width:860px) { .folio .folio-pay-statement { grid-template-columns:minmax(0,1fr); } .folio .folio-pay-statement > section + section { border-left:0; border-top:1px solid var(--f-line); } }
@container (max-width:620px) { .folio .folio-chronology { padding-left:20px; } .folio .folio-chronology::before { left:3px; } .folio .folio-chronology__item::before { left:-22px; } .folio .folio-chronology__when { position:static; width:auto; text-align:left; padding:6px 0; } .folio .folio-chronology__when small { display:inline-block; margin:0 8px; } }
@container (max-width:620px) { .folio .employment-benefit-heading { flex-direction:column; align-items:stretch; min-width:0; } }
@container (max-width:620px) { .folio .folio-property { grid-template-columns:minmax(0,1fr); } .folio .folio-property__identity { border-right:0; border-bottom:1px solid var(--f-line); } .folio .folio-property .folio-figgrid .is-unknown strong { font-size:17px; } .folio .folio-statement__line { grid-template-columns:minmax(0,1fr) auto; } .folio .folio-statement__line i { display:none; } .folio .folio-statement__line--total { grid-template-columns:minmax(0,1fr); } }
@media (max-width:860px) { .folio .folio-pay-statement { grid-template-columns:minmax(0,1fr); } .folio .folio-pay-statement > section + section { border-left:0; border-top:1px solid var(--f-line); } }
@media (max-width:620px) {
 .folio .folio-property { grid-template-columns:minmax(0,1fr); }
 .folio .folio-property__identity { border-right:0; border-bottom:1px solid var(--f-line); }
 .folio .folio-statement { padding:16px 14px; }
 .folio .folio-statement__line { grid-template-columns:minmax(0,1fr) auto; }
 .folio .folio-statement__line i { display:none; }
 .folio .folio-statement__line--total { grid-template-columns:minmax(0,1fr); }
 .folio .folio-chronology { padding-left:20px; }
 .folio .folio-chronology::before { left:3px; }
 .folio .folio-chronology__item::before { left:-22px; }
 .folio .folio-chronology__when { position:static; width:auto; text-align:left; padding:6px 0; }
 .folio .folio-chronology__when small { display:inline-block; margin:0 8px; }
}

/* Funding workspace: the shared facts grid, kept compact above the live map. */
.folio .funding-plan-v2 .funding-workspace-summary:has(.folio-funding-summary) { display:block; max-width:none; padding:12px 16px; }
.folio-funding-summary { container-type:inline-size; }
.folio-funding-pools { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.folio .folio-funding-pool h3 { margin:0 0 8px; font:500 14px/1.4 var(--f-font-ui); }
.folio .folio-funding-pool h3 small { font-size:12px; font-weight:400; color:var(--f-muted); margin-left:8px; }
.folio .folio-funding-summary .folio-funding-figures { grid-template-columns:repeat(3,minmax(0,1fr)); border:0; border-radius:0; box-shadow:none; margin:0; background:transparent; }
.folio .folio-funding-summary .folio-funding-figures > div { padding:0 12px; border-bottom:0; border-right:1px solid var(--f-line); }
.folio .folio-funding-summary .folio-funding-figures > div:last-child { border-right:0; }
.folio .folio-funding-summary .folio-funding-figures > div:first-child { padding-left:0; }
.folio .folio-funding-summary .folio-funding-figures strong { font-size:26px; }
.folio .folio-funding-summary .folio-funding-figures .is-unknown strong { font:500 14px/1.4 var(--f-font-ui); white-space:normal; }
.folio .folio-funding-summary .folio-funding-figures small { font-size:11px; }
.folio .funding-plan-v2 .folio-funding-summary-actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px 20px; margin-top:12px; }
.folio .folio-funding-summary-actions > span { font-size:12px; color:var(--f-muted); margin-right:auto; }
/* Full screen is the working view: the same facts, tighter, so the map keeps
   the height. Label, figure and note all stay. */
.folio .funding-plan-v2.is-fullscreen .funding-workspace-summary:has(.folio-funding-summary) { padding:8px 16px; }
.folio .funding-plan-v2.is-fullscreen .folio-funding-pool h3 { margin-bottom:4px; font-size:13px; }
.folio .funding-plan-v2.is-fullscreen .folio-funding-summary .folio-funding-figures strong { font-size:19px; }
.folio .funding-plan-v2.is-fullscreen .folio-funding-summary .folio-funding-figures small { font-size:10.5px; }
.folio .funding-plan-v2.is-fullscreen .folio-funding-summary-actions { margin-top:6px; }
@container (max-width:680px) {
    .folio-funding-pools { grid-template-columns:minmax(0,1fr); gap:16px; }
    .folio .folio-funding-summary .folio-funding-figures strong { font-size:20px; }
    .folio .folio-funding-summary .folio-funding-figures > div { padding-inline:6px; }
    .folio .folio-funding-summary .folio-funding-figures > div:first-child { padding-left:0; }
}

.folio .funding-plan-v2 .funding-product-tabs { display:flex; gap:20px; }

.folio .funding-plan-v2 .funding-product-tabs button { flex:0 0 auto; }

/* Keep a usable canvas after the compact controls and facts on phone. The
   fullscreen and inspector modes retain their existing viewport ownership. */
@media (max-width:620px) {
    .folio .funding-plan-v2[data-funding-product="map"][data-funding-view="map"]:not(.is-fullscreen):not(:has(.fundingmap-inspector:not([hidden]))):not(:has(> [data-funding-re-suggest]:not([hidden]))) {
        height:max(980px,calc(100dvh - 120px));
    }
    .folio .funding-plan-v2[data-funding-product="map"][data-funding-view="map"]:not(.is-fullscreen):not(:has(.fundingmap-inspector:not([hidden]))):has(> [data-funding-re-suggest]:not([hidden])) {
        height:auto;
        grid-template-rows:auto auto minmax(840px,1fr);
    }
}

/* Evidence composes the shared hero and dense, expandable source ledger. */
.folio .household-evidence-folio { min-width:0; }
.folio .folio-evidence-ledger > .folio-field { max-width:340px; margin-bottom:20px; }
.folio .folio-evidence-table .folio-ledger__table { min-width:860px; }
.folio .folio-evidence-table .folio-ledger__scroll { overflow:auto; }
.folio .folio-evidence-table .folio-ledger__detail .advisor-key-values { max-width:800px; }
.folio .folio-evidence-table .advisor-key-value-row dd { overflow-wrap:anywhere; }
.folio .folio-evidence-pagination { flex-wrap:wrap; margin-block:16px; }
.folio .folio-evidence-pagination > span { margin-right:auto; }
.folio .household-evidence-folio .folio-hero-facts > div:first-child > strong { font:500 18px/1.4 var(--f-font-ui); white-space:normal; }

/* RE2 (approved Oct 6) · suggestion strip: a light tinted region (not a card)
   of compact paper items from another tab; never added automatically. */
.folio .folio-suggest { margin: 16px 0; padding: 12px 14px 14px; border-radius: 14px; background: color-mix(in srgb, var(--f-accent-soft) 55%, transparent); }
.folio .folio-suggest header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 10px; }
.folio .folio-suggest header > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin-right: auto; }
.folio .folio-suggest h2 { margin: 0; font: 400 17px/1.2 var(--f-font-display); }
.folio .folio-suggest__eyebrow, .folio .folio-suggest__type { margin: 0; color: var(--f-bronze); font: 500 10px/1.4 var(--f-font-mono); letter-spacing: .1em; text-transform: uppercase; }
.folio .folio-suggest ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.folio .folio-suggest ul + ul { margin-top: 10px; }
.folio .folio-suggest li { display: grid; align-content: space-between; gap: 10px; padding: 11px 12px; border: 1px solid var(--f-line); border-radius: 10px; background: var(--f-paper); }
.folio .folio-suggest li.is-muted { background: transparent; }
.folio .folio-suggest li > div:first-child { display: grid; gap: 1px; min-width: 0; }
.folio .folio-suggest li b { font-size: 14px; font-weight: 600; }
.folio .folio-suggest li small { color: var(--f-dim); font-size: 12px; }
.folio .folio-suggest__actions { display: flex; flex-wrap: wrap; gap: 6px; }

/* A comparison's one-sentence conclusion (same voice as College Planning). */
.folio .folio-finding { margin: 0 0 16px; max-width: 72ch; color: var(--f-muted); font-size: 14.5px; line-height: 1.5; }
.folio .folio-finding span { color: var(--f-ink); font-weight: 600; }