:root {
            --chart-net: var(--ui-success);
            --chart-net-fill: rgba(127, 168, 145, 0.15);
            --chart-income: var(--ui-success);
            --chart-expense: var(--ui-danger);
            --chart-spend: var(--ui-success);
        }

        html {
            overscroll-behavior-y: contain;
        }

        body {
            background: linear-gradient(180deg, #121519 0%, #0e1013 60%, #0c0e11 100%);
            color: var(--ui-text);
            overflow-x: clip; /* not hidden: hidden makes body a scroll container and breaks every position:sticky (2026-09-18) */
        }

        .app-shell {
            max-width: 1440px;
            margin: 0 auto;
            padding: 24px;
            width: 100%;
        }

        .topbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 1.5rem;
            padding: 20px 24px;
            border-radius: 22px;
            background: var(--ui-surface);
            border: 1px solid var(--ui-border);
            box-shadow: var(--ui-shadow-soft);
        }

        .health-banner {
            display: none;
            margin: 12px 0 0;
            padding: 0.75rem 1rem;
            border-radius: 14px;
            font-size: 0.9rem;
            font-weight: 600;
            border: 1px solid var(--ui-border);
            background: var(--ui-surface-2);
            color: var(--ui-text);
        }

        .health-banner.error {
            border-color: rgba(205, 138, 143, 0.4);
            background: rgba(205, 138, 143, 0.12);
            color: var(--ui-danger);
        }

        .health-banner.warning {
            border-color: rgba(201, 180, 135, 0.35);
            background: rgba(201, 180, 135, 0.12);
            color: var(--ui-warning);
        }

        /* The re-auth CTA used to be a bare underlined link inline in the
           banner sentence: 271x17px, well under the 36px tap floor, and
           fragile with it (its measured box depended on whether the
           sentence happened to wrap). Pulled onto its own row, alongside
           the existing dismiss button, so both are real min-36px controls
           instead of a link riding on incidental line-wrap. */
        .banner-text {
            display: block;
            max-width: 75ch;
        }

        .banner-actions {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 0.5rem;
            margin-top: 0.5rem;
        }

        .banner-cta {
            display: inline-flex;
            align-items: center;
            min-height: 36px;
            padding: 0.3rem 0.75rem;
            border-radius: 999px;
            border: 1px solid var(--ui-border);
            background: var(--ui-surface);
            color: inherit;
            font-weight: 700;
            text-decoration: none;
        }

        .banner-cta:hover {
            border-color: var(--ui-border-strong);
        }

        .pull-refresh-indicator {
            position: fixed;
            top: calc(10px + env(safe-area-inset-top, 0px));
            left: 50%;
            z-index: 5000;
            transform: translate(-50%, -72px);
            padding: 0.62rem 0.9rem;
            border-radius: 999px;
            border: 1px solid var(--ui-border);
            background: var(--ui-surface-2);
            color: var(--ui-text);
            box-shadow: var(--ui-shadow-soft);
            font-size: 0.84rem;
            font-weight: 700;
            line-height: 1;
            opacity: 0;
            pointer-events: none;
            transition: transform 160ms ease, opacity 160ms ease, border-color 160ms ease;
        }

        .pull-refresh-indicator.visible {
            opacity: 1;
            transform: translate(-50%, 0);
        }

        .pull-refresh-indicator.ready,
        .pull-refresh-indicator.syncing {
            border-color: var(--ui-accent);
            color: var(--ui-accent-strong);
        }

        @media (max-width: 800px) {
        }

        /* Progressive disclosure. The Advisor answers one question, and every
           supporting number below it was competing with the answer. Anything a
           reader needs only after deciding to dig now folds away. */
        .adv-more {
            margin-top: 0.6rem;
        }

        .adv-more > summary {
            cursor: pointer;
            font-size: 0.75rem;
            color: var(--ui-muted);
            list-style: none;
            padding: 0.3rem 0;
            user-select: none;
        }

        .adv-more > summary::-webkit-details-marker { display: none; }

        /* A closed <details> normally hides its content, but the UA rule loses
           to any author `display` on the child — and both panels inside these
           are `display: grid`. Without this the disclosure renders a caret that
           collapses nothing. */
        .adv-more:not([open]) > *:not(summary) {
            display: none !important;
        }

        .adv-more > summary::before {
            content: '▸ ';
            display: inline-block;
            transition: transform 0.12s ease;
        }

        .adv-more[open] > summary::before {
            content: '▾ ';
        }

        .adv-more > summary:hover {
            color: var(--ui-text);
        }

        /* The conversion recommendation, stated once, in a sentence. */
        .conv-headline {
            margin-top: 0.75rem;
            font-size: 0.95rem;
            line-height: 1.45;
            /* Prose wraps at a readable measure (~75ch); past that the eye
               loses the line it was on. Gated by mobile-ui-check.py. */
            max-width: 75ch;
        }

        .conv-headline-sub {
            margin-top: 0.2rem;
            font-size: 0.8rem;
            color: var(--ui-muted);
            max-width: 75ch;
        }

        /* Conversion comparison: a real table, because the whole point is
           reading DOWN a column to compare policies. Four columns on desktop,
           stacked label/value pairs on a phone. */
        /* The verdict outranks the status line: it is the sentence the page
           exists to produce, so it gets weight and colour while the status
           detail below stays muted. */
        .aa-verdict {
            margin-top: 0.3rem;
            font-size: 0.82rem;
            font-weight: 600;
            line-height: 1.35;
        }

        .aa-verdict.aa-good { color: var(--ui-success, #7ab295); }
        .aa-verdict.aa-warn { color: var(--ui-warning, #c9b487); }
        .aa-verdict.aa-bad  { color: var(--ui-danger, #cd8a8f); }

        /* Chart.js's own legend drew a strikethrough box that reads as a
           label, not a control — nothing said "you can turn these on", and the
           three FIRE lines it gated were the whole point of the tier inputs.
           ProjectionLab ships "quick dataset toggles" and Monarch makes every
           chart legend a real filter chip; this is that, with the tier's dollar
           value carried inline so the reader never has to scroll to the inputs
           to learn what "Medium FIRE" costs. */
        .proj-legend {
            display: flex;
            flex-wrap: wrap;
            gap: 0.4rem;
            margin: 0 0 0.6rem;
        }
        .proj-legend .pl-item {
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            /* 36px floor: the mobile gate rejects anything smaller. */
            min-height: 36px;
            padding: 0.3rem 0.6rem;
            border: 1px solid var(--ui-border);
            border-radius: 999px;
            background: var(--ui-surface-2);
            color: var(--ui-muted);
            font-size: 0.75rem;
            font-weight: 600;
            cursor: pointer;
            user-select: none;
            transition: border-color 0.12s ease, color 0.12s ease;
        }
        .proj-legend .pl-item:hover { border-color: var(--ui-accent); }
        .proj-legend .pl-item:focus-visible {
            outline: 2px solid var(--ui-accent);
            outline-offset: 2px;
        }
        .proj-legend .pl-item.is-on { color: var(--ui-text); }
        .proj-legend .pl-box {
            width: 13px;
            height: 13px;
            flex: 0 0 auto;
            border-radius: 3px;
            border: 1.5px solid currentColor;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 10px;
            line-height: 1;
            color: var(--ui-muted);
        }
        /* Checked state paints the swatch in the series colour and shows the
           tick, so colour identity and on/off are one glyph rather than two. */
        .proj-legend .pl-item.is-on .pl-box {
            background: var(--pl-color);
            border-color: var(--pl-color);
            color: #0b0f14;
        }
        .proj-legend .pl-item.is-on .pl-box::after { content: '\2713'; font-weight: 900; }
        .proj-legend .pl-value {
            font-family: var(--ui-font-mono);
            font-weight: 700;
            color: var(--ui-text);
        }
        .proj-legend .pl-item:not(.is-on) .pl-value { color: var(--ui-muted); }

        /* Retire-age comparison. The bridge column is the hero: it is the only
           money reachable before the 401k unlocks, so it is what actually
           decides the date. The other two columns are comfortable at every age
           and are supporting detail. */
        .retire-when-wrap { overflow-x: auto; }
        .retire-when {
            width: 100%;
            border-collapse: collapse;
            font-size: 0.8rem;
        }
        .retire-when th {
            text-align: right;
            font-size: 0.64rem;
            font-weight: 800;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            color: var(--ui-muted);
            padding: 0 0.6rem 0.4rem;
            white-space: nowrap;
        }
        .retire-when th:first-child, .retire-when td:first-child { text-align: left; }
        .retire-when td {
            text-align: right;
            padding: 0.45rem 0.6rem;
            font-family: var(--ui-font-mono);
            color: var(--ui-text);
            border-top: 1px solid var(--ui-border);
            white-space: nowrap;
        }
        .retire-when tbody tr { cursor: pointer; }
        .retire-when tbody tr:hover td { background: var(--ui-surface-2); }
        .retire-when tbody tr:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: -2px; }
        .retire-when .rw-age { font-weight: 800; }
        /* The bridge number decides the date, so it carries the weight. */
        .retire-when .rw-bridge { color: var(--ui-text); font-weight: 700; }
        .retire-when .rw-later { color: var(--ui-muted); }
        @media (min-width: 901px) {
            .retire-when td:nth-child(2)[data-label]::after,
            .retire-when td:nth-child(3)[data-label]::after {
                content: attr(data-label);
                display: block;
                color: var(--ui-muted);
                font: 11px var(--ui-font-sans);
            }
        }
        .retire-when tr.is-current td { background: var(--ui-surface-3); }
        .retire-when .rw-gap { color: var(--ui-danger); }
        .retire-when .rw-note {
            font-family: var(--ui-font-sans);
            font-size: 0.7rem;
            color: var(--ui-warning, #c9b487);
            text-align: left;
            max-width: 75ch;
        }
        @media (max-width: 560px) {
            /* A 4-column table has no fix at 390px (mobile-ui canon): rows
               become labelled cards instead of scrolling sideways. */
            .retire-when thead { display: none; }
            .retire-when, .retire-when tbody, .retire-when tfoot { display: block; width: 100%; }
            .retire-when tbody tr {
                display: flex;
                flex-wrap: wrap;
                gap: 0.15rem 0.8rem;
                border: 1px solid var(--ui-border);
                border-radius: 10px;
                padding: 0.5rem 0.65rem;
                margin: 0 0 0.5rem;
            }
            .retire-when tr.is-current { border-color: var(--ui-accent); background: var(--ui-surface-3); }
            .retire-when td {
                display: flex;
                flex-direction: column;
                gap: 0.1rem;
                flex: 1 1 42%;
                padding: 0;
                border-top: none;
                text-align: left;
                white-space: normal;
                font-size: 0.78rem;
            }
            .retire-when td.rw-age { flex-basis: 100%; font-size: 1rem; }
            .retire-when td[data-label]::before {
                content: attr(data-label);
                font-size: 0.7rem;
                font-weight: 800;
                letter-spacing: 0.04em;
                text-transform: uppercase;
                color: var(--ui-muted);
            }
            .retire-when td.rw-note { flex-basis: 100%; font-size: 0.72rem; }
        }

        .conv-table {
            margin-top: 0.75rem;
            display: grid;
            gap: 0.35rem;
        }

        .conv-row {
            display: grid;
            grid-template-columns: 1.4fr 1fr 0.8fr 1fr 1.3fr;
            gap: 0.75rem;
            align-items: baseline;
            padding: 0.5rem 0.7rem;
            border-radius: 10px;
            background: var(--ui-surface-2);
            border: 1px solid var(--ui-border-soft);
            font-size: 0.85rem;
            font-variant-numeric: tabular-nums;
        }

        .conv-row span:not(:first-child) {
            text-align: right;
        }

        .conv-head {
            background: none;
            border-color: transparent;
            padding-bottom: 0;
            font-size: 0.72rem;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            color: var(--ui-muted);
        }

        .conv-best {
            border-color: rgba(122, 178, 149, 0.5);
            background: rgba(122, 178, 149, 0.10);
        }

        .conv-best em,
        .conv-delta {
            font-style: normal;
            font-size: 0.72rem;
            color: var(--ui-success, #7ab295);
        }

        .conv-failed {
            opacity: 0.65;
        }

        @media (max-width: 640px) {
            .conv-row {
                grid-template-columns: 1fr 1fr;
                row-gap: 0.25rem;
            }
            .conv-head {
                display: none;
            }
            .conv-row span:first-child {
                grid-column: 1 / -1;
                font-weight: 600;
            }
            .conv-row span:not(:first-child) {
                text-align: left;
            }
        }

        .sync-dismiss-btn {
            margin-top: 0.35rem;
            padding: 0.25rem 0.55rem;
            border-radius: 999px;
            border: 1px solid var(--ui-border);
            background: var(--ui-surface);
            color: var(--ui-muted);
            font-size: 0.72rem;
            font-weight: 600;
            cursor: pointer;
        }

        .sync-dismiss-btn:hover {
            color: var(--ui-text);
            border-color: var(--ui-border-strong);
        }

        .advisor-status {
            margin-top: 0.65rem;
            padding: 0.75rem 1rem;
            border-radius: 14px;
            border: 1px solid var(--ui-border);
            background: var(--ui-surface-2);
            color: var(--ui-text);
            font-size: 0.9rem;
            display: none;
        }

        .advisor-status-neutral {
            border-color: rgba(185, 193, 204, 0.3);
            background: rgba(185, 193, 204, 0.08);
        }

        .advisor-status-error {
            border-color: rgba(205, 138, 143, 0.4);
            background: rgba(205, 138, 143, 0.12);
            color: var(--ui-danger);
        }

        .brand {
            display: flex;
            gap: 0.75rem;
            align-items: center;
        }

        .brand-logo {
            width: 42px;
            height: 42px;
            border-radius: 14px;
            box-shadow: 0 10px 24px rgba(185, 193, 204, 0.2);
            filter: drop-shadow(0 0 10px rgba(185, 193, 204, 0.25));
        }

        .brand-title {
            font-family: var(--ui-font-sans);
            font-size: 1.4rem;
            font-weight: 700;
            margin: 0;
        }

        .brand-subtitle {
            font-size: 0.85rem;
            color: var(--ui-muted);
            margin: 0;
        }

        .topbar-actions {
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        .last-sync {
            color: var(--ui-muted);
            font-size: 0.85rem;
        }

        .sync-btn {
            padding: 0.65rem 1.2rem;
            background: var(--ui-accent);
            color: white;
            border: none;
            border-radius: 999px;
            cursor: pointer;
            font-weight: 600;
            box-shadow: 0 12px 24px rgba(185, 193, 204, 0.25);
        }

        .sync-btn:hover { opacity: 0.9; }
        .sync-btn:disabled { opacity: 0.5; cursor: not-allowed; }

        .tabs {
            display: flex;
            gap: 1rem;
            padding: 14px 8px 4px;
            margin-top: 18px;
            overflow-x: auto;
            scrollbar-width: none;
            align-items: center;
            flex-wrap: wrap;
        }

        .tabs::-webkit-scrollbar { display: none; }

        .tabs-group {
            display: flex;
            align-items: center;
            gap: 0.6rem;
            padding: 0.2rem 0.25rem;
        }

        .tabs-group + .tabs-group {
            border-left: 1px solid var(--ui-border);
            padding-left: 0.9rem;
        }

        .tabs-group-label {
            font-size: 0.65rem;
            text-transform: uppercase;
            letter-spacing: 0.18em;
            color: var(--ui-muted);
            margin-right: 0.2rem;
        }

        .tax-year-bar {
            display: flex;
            align-items: center;
            gap: 0.6rem;
            padding: 0.8rem 1rem;
            border-radius: 14px;
            border: 1px solid var(--ui-border);
            background: var(--ui-surface);
            margin-bottom: 1rem;
            font-weight: 600;
            color: var(--ui-muted);
        }

        .tax-year-bar .range-btn {
            padding: 0.45rem 0.75rem;
            border-radius: 999px;
            background: var(--ui-surface-2);
            border: 1px solid var(--ui-border);
            color: var(--ui-text);
            font-weight: 600;
        }

        .tax-input {
            display: none !important;
        }

        .tab,
        .nav-section {
            padding: 0.55rem 1.1rem;
            cursor: pointer;
            border-radius: 999px;
            border: 1px solid var(--ui-border);
            background: var(--ui-surface);
            color: var(--ui-muted);
            font-weight: 600;
            white-space: nowrap;
            transition: all 0.15s ease;
        }

        .tab.active {
            color: var(--ui-accent-strong);
            border-color: var(--ui-accent);
            background: var(--ui-accent-soft);
            box-shadow: 0 8px 20px rgba(185, 193, 204, 0.12);
        }

        .page {
            padding-top: 12px;
        }

        .dashboard-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 1.4rem;
            padding: 1rem 0 0;
            width: 100%;
            align-items: start;
        }

        .card {
            background: var(--ui-surface);
            border-radius: var(--ui-radius);
            padding: 1.6rem;
            border: 1px solid var(--ui-border);
            box-shadow: var(--ui-shadow-soft);
            min-width: 0;
            overflow: hidden;
        }

        .card h3 {
            margin: 0 0 1rem 0;
            color: var(--ui-muted-2);
            font-size: 0.85rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.08em;
        }

        .big-number {
            font-size: 2.6rem;
            font-weight: 700;
            color: var(--ui-text);
            font-family: var(--ui-font-mono);
        }

        .big-number.positive { color: var(--ui-success); }
        .big-number.negative { color: var(--ui-danger); }

        .chart-container {
            position: relative;
            height: 200px;
            margin-top: 1rem;
            min-width: 0;
        }

        /* Fill the container immediately, before Chart.js has run: the raw
           <canvas> defaults to an intrinsic 300x150px box, and max-width only
           caps growth, it does not stretch to fill. Between DOMContentLoaded
           and the first /api fetch resolving, that left a tiny 300px-wide
           chart pinned in the corner of a full-width card (this is what
           "the graph doesn't stretch the page" bug report was) or, if the
           chart.js CDN load ever fails outright, permanently. width/height:
           100% of a container the CSS already sizes (fixed px height, 100%
           width) fixes both cases and is numerically identical to what
           Chart.js's own resize logic sets once it runs, so nothing changes
           post-load. */
        .chart-container canvas {
            width: 100% !important;
            height: 100% !important;
            max-width: 100%;
        }




        .full-width { grid-column: 1 / -1; }

        .account-list {
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
        }

        .account-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 0.9rem;
            padding: 0.75rem 1rem;
            background: var(--ui-surface-2);
            border-radius: 12px;
            border: 1px solid var(--ui-border-soft);
            transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
            cursor: pointer;
            text-align: left;
        }

        .account-item:hover {
            background: var(--ui-surface-3);
            border-color: var(--ui-border);
        }

        .account-item:focus-visible {
            outline: 2px solid var(--ui-accent);
            outline-offset: 2px;
        }

        .account-item.selected {
            background: var(--ui-accent-soft);
            border-color: rgba(185, 193, 204, 0.45);
            box-shadow: inset 3px 0 0 var(--ui-accent);
        }

        .account-main {
            min-width: 0;
        }

        .account-item .name {
            font-weight: 600;
            color: var(--ui-text);
            display: flex;
            align-items: center;
            gap: 0.45rem;
            flex-wrap: wrap;
        }

        .account-item .institution {
            font-size: 0.8rem;
            color: var(--ui-muted-2);
        }

        .account-item .account-sync {
            font-size: 0.75rem;
            color: var(--ui-muted);
            margin-top: 0.2rem;
        }

        .account-sync-row {
            display: flex;
            align-items: center;
            gap: 0.4rem;
            flex-wrap: wrap;
        }

        .account-sync-pills {
            display: flex;
            gap: 0.35rem;
            flex-wrap: wrap;
        }

        .account-flag-pill {
            display: inline-block;
            padding: 0.05rem 0.4rem;
            border-radius: 999px;
            font-size: 0.7rem;
            font-weight: 700;
        }

        .account-flag-auto { background: #5aa9c9; color: #0b1f28; }
        .account-flag-manual { background: #facc15; color: #1f2937; }

        .account-sync-pill {
            padding: 0.15rem 0.5rem;
            border-radius: 999px;
            font-size: 0.65rem;
            font-weight: 600;
            border: 1px solid var(--ui-border);
            background: var(--ui-surface);
            color: var(--ui-muted);
        }

        .account-sync-pill.stale {
            background: rgba(205, 138, 143, 0.12);
            color: var(--ui-danger);
            border-color: rgba(205, 138, 143, 0.35);
        }

        /* Re-auth is the one pill that names an action the user must take, so
           it carries the danger colour at full strength rather than the muted
           tint the informational pills use. */
        .account-sync-pill.reauth {
            background: rgba(205, 138, 143, 0.22);
            color: var(--ui-danger);
            border-color: rgba(205, 138, 143, 0.55);
        }

        .account-sync-pill.never {
            background: rgba(201, 180, 135, 0.16);
            color: var(--ui-warning);
            border-color: rgba(201, 180, 135, 0.35);
        }

        .account-sync-pill.manual {
            background: rgba(185, 193, 204, 0.12);
            color: var(--ui-accent);
            border-color: rgba(185, 193, 204, 0.35);
        }

        .account-sync-pill.auto {
            background: rgba(142, 166, 196, 0.14);
            color: var(--ui-info);
            border-color: rgba(142, 166, 196, 0.35);
        }

        .account-edit {
            margin-left: 0.5rem;
            border: none;
            background: transparent;
            color: var(--ui-muted-2);
            font-size: 0.7rem;
            cursor: pointer;
        }

        .account-edit:hover {
            color: var(--ui-accent);
        }

        .account-item .balance {
            font-weight: 600;
            font-size: 1.05rem;
            font-family: var(--ui-font-mono);
            color: var(--ui-text);
            white-space: nowrap;
            text-align: right;
        }

        .account-item .balance.liability { color: var(--ui-danger); }

        .account-action-hint {
            margin-top: 0.25rem;
            font-size: 0.72rem;
            color: var(--ui-muted);
        }

        .account-detail-backdrop {
            position: fixed;
            inset: 0;
            z-index: 180;
            background: rgba(14, 16, 19, 0.35);
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.18s ease;
        }

        .account-detail-backdrop.open {
            opacity: 1;
            pointer-events: auto;
        }

        .account-detail-panel {
            position: fixed;
            top: 1rem;
            right: 1rem;
            bottom: 1rem;
            z-index: 190;
            display: none;
            width: min(520px, calc(100vw - 2rem));
            overflow: auto;
            transform: translateX(calc(100% + 1.5rem));
            transition: transform 0.2s ease;
        }

        .account-detail-panel.open {
            display: block;
            transform: translateX(0);
        }

        .account-detail-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 1rem;
            flex-wrap: wrap;
            margin-bottom: 1rem;
        }

        .account-detail-kicker {
            color: var(--ui-muted-2);
            font-size: 0.75rem;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            margin-bottom: 0.35rem;
        }

        .account-detail-name {
            color: var(--ui-text);
            font-size: 1.25rem;
            font-weight: 700;
            line-height: 1.25;
        }

        .account-detail-meta {
            color: var(--ui-muted);
            font-size: 0.85rem;
            margin-top: 0.35rem;
        }

        .account-detail-balance-row {
            display: flex;
            align-items: baseline;
            justify-content: space-between;
            gap: 1rem;
            padding: 0.9rem 0;
            border-top: 1px solid var(--ui-border-soft);
            border-bottom: 1px solid var(--ui-border-soft);
            margin-bottom: 0.75rem;
        }

        .account-detail-balance-label {
            color: var(--ui-muted-2);
            font-size: 0.8rem;
            font-weight: 600;
        }

        .account-detail-balance {
            font-family: var(--ui-font-mono);
            font-size: 1.45rem;
            font-weight: 700;
            color: var(--ui-text);
        }

        .account-detail-balance.liability {
            color: var(--ui-danger);
        }

        .account-detail-actions {
            display: flex;
            gap: 0.5rem;
            flex-wrap: wrap;
        }

        .account-detail-close {
            width: 2rem;
            height: 2rem;
            border-radius: 999px;
            border: 1px solid var(--ui-border);
            background: var(--ui-surface);
            color: var(--ui-muted);
            cursor: pointer;
            font-size: 1.15rem;
            line-height: 1;
        }

        .account-detail-close:hover {
            color: var(--ui-text);
            border-color: var(--ui-accent);
        }

        .manual-balance-form {
            display: none;
            gap: 0.75rem;
            padding: 0.9rem;
            margin-bottom: 0.75rem;
            border: 1px solid var(--ui-border-soft);
            border-radius: 12px;
            background: var(--ui-surface-2);
        }

        .manual-balance-fields {
            display: grid;
            grid-template-columns: minmax(130px, 1fr) minmax(180px, 2fr);
            gap: 0.6rem;
            align-items: end;
        }

        .manual-balance-mode {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 0.5rem;
        }

        .manual-balance-mode label {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.4rem;
            padding: 0.55rem 0.65rem;
            border: 1px solid var(--ui-border);
            border-radius: 8px;
            background: var(--ui-surface);
            color: var(--ui-muted);
            font-size: 0.82rem;
            font-weight: 700;
        }

        .manual-balance-mode input {
            accent-color: var(--ui-accent);
        }

        .manual-recurring-fields {
            display: none;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 0.6rem;
            align-items: end;
        }

        .manual-recurring-fields.open {
            display: grid;
        }

        .manual-balance-submit {
            display: flex;
            justify-content: flex-end;
        }

        .manual-balance-field {
            display: flex;
            flex-direction: column;
            gap: 0.25rem;
        }

        .manual-balance-field label {
            color: var(--ui-muted-2);
            font-size: 0.72rem;
            font-weight: 700;
            text-transform: uppercase;
        }

        .manual-balance-field input {
            width: 100%;
            min-width: 0;
            padding: 0.55rem 0.65rem;
            border: 1px solid var(--ui-border);
            border-radius: 8px;
            background: var(--ui-surface);
            color: var(--ui-text);
            font: inherit;
        }

        .manual-balance-status {
            min-height: 1rem;
            color: var(--ui-muted);
            font-size: 0.78rem;
        }

        .ui-button {
            padding: 0.45rem 0.9rem;
            border-radius: 999px;
            border: 1px solid var(--ui-border);
            background: var(--ui-surface);
            color: var(--ui-text);
            cursor: pointer;
            font-size: 0.85rem;
            font-weight: 600;
        }

        .ui-button:hover {
            border-color: var(--ui-accent);
            color: var(--ui-accent-strong);
        }

        /* One row shape at every width (2026-08-19). The old three-column grid
           (90px date | 1fr | auto) gave the description a ~115px column on a
           390px phone, so merchant names wrapped to three lines and the account
           name clipped. Flex + a wrapping meta line lets every field wrap
           instead of overflow, and keeps the row near 76px on mobile. */
        .transaction-item {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            padding: 0.75rem 0.9rem;
            border-bottom: 1px solid var(--ui-border-soft);
        }

        .transaction-item:last-child { border-bottom: none; }

        /* min-width: 0 is load-bearing: without it a flex child refuses to
           shrink below its content and pushes the amount off screen. */
        .transaction-item .tx-main {
            flex: 1;
            min-width: 0;
        }

        .transaction-item .tx-meta {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 0.3rem 0.5rem;
            margin-top: 0.25rem;
            min-width: 0;
        }

        .transaction-item .tx-acct {
            font-size: 0.78rem;
            color: var(--ui-muted-2);
            overflow-wrap: anywhere;
        }

        .transaction-item .date {
            color: var(--ui-muted-2);
            font-size: 0.78rem;
            font-family: var(--ui-font-mono);
            white-space: nowrap;
        }

        .transaction-item .desc {
            font-weight: 600;
            color: var(--ui-text);
            overflow-wrap: anywhere;
        }

        /* Category picker inside the meta line: a real 36px tap target that
           still reads as a chip. */
        .transaction-item .tx-cat {
            padding: 0.2rem 0.5rem;
            border-radius: 999px;
            border: 1px solid var(--ui-border);
            background: var(--ui-surface);
            color: var(--ui-text);
            font-size: 0.75rem;
            max-width: 100%;
        }

        /* One reserved feedback area keeps transaction rows stationary. */
        .tx-edit-panel {
            position: sticky;
            top: 0;
            z-index: 3;
            padding: 0.5rem 0;
            margin-bottom: 0.5rem;
            background: var(--ui-surface);
            border-bottom: 1px solid var(--ui-border);
            font-size: 0.8rem;
            line-height: 1.5;
        }
        #tx-edit-status {
            min-height: 4.5em;
            margin: 0;
            color: var(--ui-muted);
        }
        .tx-edit-actions {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 0.5rem;
        }
        .tx-edit-actions button { min-width: 0; min-height: 36px; }
        .tx-edit-actions [aria-disabled="true"], .tx-cat[aria-disabled="true"] { opacity: 0.5; cursor: wait; }
        .tx-cat[aria-invalid="true"] { border-style: dashed; }

        .tx-badge {
            display: inline-block;
            padding: 0.1rem 0.4rem;
            border-radius: 4px;
            font-size: 0.7rem;
            font-weight: 700;
            margin-left: 0.4rem;
            white-space: nowrap;
        }

        .tx-badge-recurring {
            background: var(--ui-info);
            color: var(--ui-bg);
        }

        .tx-badge-transfer {
            border: 1px solid var(--ui-border);
            color: var(--text-secondary);
            font-weight: 600;
        }

        /* Split-transaction chip + sub-lines: a split parent shows a static
           chip instead of the category select, with each split rendered as
           an indented sub-line underneath -- calm on purpose, same rationale
           as the save-edit-as-rule prompt above (no modal, no animation,
           this sits inside a list being actively scanned). */
        .tx-split-chip {
            display: inline-block;
            padding: 0.2rem 0.5rem;
            border-radius: 999px;
            border: 1px solid var(--ui-border);
            background: var(--ui-surface-2);
            color: var(--ui-muted);
            font-size: 0.75rem;
            font-weight: 600;
        }

        .tx-splits {
            display: flex;
            flex-direction: column;
            gap: 0.2rem;
            margin-top: 0.35rem;
            padding-left: 0.75rem;
            border-left: 2px solid var(--ui-border-soft);
        }

        .tx-split-line {
            display: flex;
            flex-wrap: wrap;
            align-items: baseline;
            gap: 0.3rem 0.5rem;
            font-size: 0.78rem;
            color: var(--ui-muted-2);
        }

        .tx-split-line .tx-split-desc {
            color: var(--ui-text);
            overflow-wrap: anywhere;
        }

        .tx-split-line .tx-split-cat {
            text-transform: capitalize;
            color: var(--ui-muted);
        }

        .tx-split-line .tx-split-amt {
            font-family: var(--ui-font-mono);
            margin-left: auto;
            white-space: nowrap;
        }

        /* Label + slider + value: on a 320px screen the three refuse to share
           one line, so the row wraps and the slider takes the full width. */
        .large-tx-controls {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 0.5rem 0.75rem;
            margin-bottom: 0.75rem;
        }

        .large-tx-controls input[type="range"] {
            flex: 1 1 160px;
            min-width: 0;
            accent-color: var(--accent-color, #6366f1);
        }

        /* Collapsible cards: only on a phone, and only for the supporting
           cards (see setupMobileCollapse). */
        .collapse-toggle {
            display: none;
            margin-left: auto;
            min-height: 36px;
            padding: 0.35rem 0.8rem;
            border: 1px solid var(--ui-border);
            border-radius: 999px;
            background: var(--ui-surface-2);
            color: var(--ui-muted);
            font-size: 0.8rem;
            font-weight: 600;
            cursor: pointer;
        }

        .card.is-collapsible > h3 {
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }

        .card.is-collapsible .collapse-toggle {
            display: inline-flex;
            align-items: center;
        }

        .card.is-collapsible:not(.is-open) > .collapse-body {
            display: none;
        }

        .tx-show-more {
            display: block;
            width: 100%;
            margin-top: 0.5rem;
            padding: 0.75rem 1rem;
            min-height: 44px;
            border: 1px solid var(--ui-border);
            border-radius: 12px;
            background: var(--ui-surface-2);
            color: var(--ui-text);
            font-size: 0.85rem;
            font-weight: 600;
            cursor: pointer;
        }

        /* A bare 16px checkbox is an unhittable target on a phone; the label
           wraps it in a 40px box so the box itself stays visually small. */
        .tx-select {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 40px;
            min-height: 40px;
            margin: -0.4rem;
            cursor: pointer;
        }

        .transaction-item .category {
            font-size: 0.7rem;
            color: var(--ui-muted);
            background: var(--ui-surface-2);
            padding: 3px 8px;
            border-radius: 999px;
            display: inline-block;
            margin-top: 4px;
            text-transform: capitalize;
        }

        .transaction-item .amount {
            font-weight: 600;
            text-align: right;
            font-family: var(--ui-font-mono);
            white-space: nowrap;
            flex-shrink: 0;
        }

        .transaction-item .amount.income { color: var(--ui-success); }
        .transaction-item .amount.expense { color: var(--ui-text); }
        .transaction-item[style*="cursor: pointer"]:hover { background: var(--ui-surface-2); }

        .transaction-item.interactive {
            cursor: pointer;
            border-radius: 10px;
        }

        .transaction-item.interactive:hover {
            background: var(--ui-surface-2);
        }

        .transaction-account {
            font-size: 0.75rem;
            color: var(--ui-muted-2);
        }

        .recurring-list {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }

        .recurring-item {
            display: flex;
            justify-content: space-between;
            padding: 0.75rem;
            background: var(--ui-surface-2);
            border-radius: 12px;
        }

        .recurring-item .freq {
            font-size: 0.8rem;
            color: var(--ui-muted-2);
        }

        .tab-content { display: none; }
        .tab-content.active { display: block; }

        .spending-bar {
            display: flex;
            align-items: center;
            gap: 1rem;
            padding: 0.5rem 0;
        }

        .spending-bar .label {
            width: 120px;
            text-transform: capitalize;
            color: var(--ui-muted);
            font-weight: 600;
        }

        .spending-bar .bar-container {
            flex: 1;
            height: 18px;
            background: var(--ui-surface-2);
            border-radius: 999px;
            overflow: hidden;
        }

        .spending-bar .bar {
            height: 100%;
            background: var(--ui-accent);
            border-radius: 999px;
        }

        .spending-bar .amount {
            width: 100px;
            text-align: right;
            font-weight: 600;
            color: var(--ui-text);
        }

        .totals-breakdown {
            margin-top: 1rem;
            padding-top: 1rem;
            border-top: 1px solid var(--border-color);
            max-width: 520px;
        }

        .totals-breakdown-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
            gap: 0.5rem 1.5rem;
        }

        .totals-breakdown-row {
            display: flex;
            justify-content: space-between;
            font-size: 0.85rem;
        }

        .insights-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 1rem;
            align-items: start;
        }

        .insight-item {
            background: var(--ui-surface-2);
            border: 1px solid var(--ui-border-soft);
            border-radius: 12px;
            padding: 0.9rem 1rem;
            display: flex;
            flex-direction: column;
            gap: 0.35rem;
        }

        .insight-label {
            font-size: 0.75rem;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: var(--ui-muted);
        }

        .insight-value {
            font-size: 1.4rem;
            font-weight: 700;
            color: var(--ui-text);
            font-family: var(--ui-font-mono);
        }

        .insight-sub {
            font-size: 0.75rem;
            color: var(--ui-muted-2);
        }

        /* Advisor — high-signal layout. One hero number, one status line,
           supporting numbers as compact label/value strips. Prose captions are
           deliberately absent: a stat grid of paragraphs reads as a wall of
           text, so anything that needs a sentence lives in an alert or in
           Assumptions, never repeated under every tile. */
        /* h2, not h3: the card title is the top section under the page h1, and
           the level jump was the only structural a11y failure on this tab.
           Carries the .card h3 look explicitly so nothing else restyles. */
        .advisor-title {
            margin: 0;
            color: var(--ui-muted);
            font-size: 0.78rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.06em;
        }
        .advisor-top {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 1.25rem;
            flex-wrap: wrap;
        }
        .advisor-answer {
            text-align: right;
            min-width: 0;
            max-width: 100%;
        }
        .advisor-answer .aa-value {
            font-size: clamp(1.35rem, 6.5vw, 2rem);
            overflow-wrap: anywhere;
            font-weight: 800;
            font-family: var(--ui-font-mono);
            line-height: 1.05;
            letter-spacing: -0.01em;
            margin-top: 0.1rem;
        }
        .advisor-answer .aa-unit {
            font-size: 0.9rem;
            font-weight: 700;
            color: var(--ui-muted);
            /* The unit carries a phrase now ("of 104 historical retirements"),
               not just "/yr", so it needs a gap from the number and its own
               normal letter-spacing back after .aa-value's negative tracking. */
            margin-left: 0.3rem;
            letter-spacing: 0;
            font-family: var(--ui-font-sans);
        }
        /* Overfunded: the plan clears every cycle, which is a signal to spend
           more, not a win to celebrate. Same amber as overdrawing — both say
           "change the plan". */
        .advisor-answer .aa-value.aa-warn { color: var(--ui-warning, #c9b487); }
        /* Three income phases stacked, each "how much · for how long". The
           value column is monospace so the figures line up vertically; the
           window is muted because the money is the answer and the age range
           is the qualifier. */
        /* ONE grid for all three rows, not a flex row each: per-row flex made
           every line size to its own content, so "$70.1K" and "$192.4K" ended
           at different x positions and the column of figures read as ragged.
           Two shared tracks — figures right-aligned in theirs, windows
           left-aligned in theirs — so the decimal points line up and the age
           ranges start together. `display: contents` lets each .aa-phase hand
           its two spans straight to the grid. */
        .advisor-answer .aa-phases {
            margin-top: 0.15rem;
            display: grid;
            grid-template-columns: max-content max-content;
            justify-content: end;
            column-gap: 0.6rem;
            row-gap: 0.15rem;
            align-items: baseline;
        }
        .advisor-answer .aa-phase { display: contents; }
        .advisor-answer .aa-phase-v {
            font-family: var(--ui-font-mono);
            /* tabular figures: proportional digits make 1s narrower than 8s
               and the column wobbles even when right-aligned. */
            font-variant-numeric: tabular-nums;
            font-size: clamp(1.05rem, 4.4vw, 1.45rem);
            font-weight: 800;
            letter-spacing: -0.01em;
            line-height: 1.2;
            text-align: right;
        }
        .advisor-answer .aa-phase-w {
            font-size: 0.78rem;
            font-weight: 700;
            color: var(--ui-muted);
            white-space: nowrap;
            text-align: left;
        }
        .advisor-answer .aa-phases.aa-bad .aa-phase-v { color: var(--ui-danger); }
        .advisor-answer .aa-phases.aa-warn .aa-phase-v { color: var(--ui-warning, #c9b487); }

        /* The qualifier that keeps the phase figures from being read as
           spending money. Muted and small, but never omitted. */
        .advisor-answer .aa-taxnote {
            max-width: 75ch;
            margin-top: 0.35rem;
            font-size: 0.7rem;
            font-weight: 600;
            color: var(--ui-warning, #c9b487);
        }
        .advisor-answer .aa-label {
            font-size: 0.7rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.07em;
            color: var(--ui-muted);
            max-width: 75ch;
        }
        .advisor-answer .aa-status {
            max-width: 75ch;
            font-size: 0.8rem;
            color: var(--ui-muted);
            margin-top: 0.3rem;
        }
        .advisor-answer .aa-status::before {
            content: '';
            display: inline-block;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            margin-right: 0.4rem;
            vertical-align: 0.1em;
            background: var(--ui-success);
        }
        .advisor-answer .aa-status.aa-bad::before { background: var(--ui-danger); }
        .advisor-answer .aa-status.aa-bad { color: var(--ui-muted); }
        /* One alert band carries every caveat that used to be a stacked
           sub-line (bridge gap, unfunded spend). Empty = invisible. */
        .adv-alert {
            margin-top: 0.85rem;
            padding: 0.5rem 0.7rem;
            border: 1px solid rgba(205, 138, 143, 0.3);
            border-left: 3px solid var(--ui-danger);
            border-radius: 10px;
            background: rgba(205, 138, 143, 0.07);
            color: var(--ui-text);
            font-size: 0.8rem;
        }
        .adv-alert.warn {
            border-color: rgba(201, 180, 135, 0.3);
            border-left-color: var(--ui-warning);
            background: rgba(201, 180, 135, 0.06);
        }
        .adv-alert:empty { display: none; }
        /* "What age 55 can reach" — the rule-of-55 assumption made visible.
           Deliberately quiet: this is a disclosure, not a headline. The
           exclusion list is the part that earns its space, so it gets the
           readable treatment and wraps cleanly on a phone. */
        .r55-line { margin: 0 0 0.5rem; color: var(--ui-muted); font-size: 0.82rem; line-height: 1.45; }
        .r55-line.r55-in { color: var(--ui-text); }
        .r55-line strong { color: var(--ui-accent); }
        .r55-excluded { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
        .r55-excluded li {
            display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.5rem;
            padding: 0.5rem 0.6rem; border: 1px solid var(--ui-border);
            border-radius: 8px; background: var(--ui-surface-2);
        }
        .r55-x-acct { font-weight: 700; font-size: 0.8rem; color: var(--ui-text); min-width: 0; overflow-wrap: anywhere; }
        .r55-x-amt { font-size: 0.8rem; color: var(--ui-muted); font-variant-numeric: tabular-nums; }
        /* The reason is the whole point, so it gets its own full line rather
           than being squeezed to the right of the amount on a narrow screen. */
        .r55-x-why { flex-basis: 100%; font-size: 0.74rem; color: var(--ui-muted); line-height: 1.4; }

        .adv-section {
            margin-top: 1.4rem;
            padding-top: 1.1rem;
            border-top: 1px solid var(--ui-border-soft);
        }
        .adv-section-head {
            display: flex;
            align-items: baseline;
            justify-content: space-between;
            gap: 0.75rem;
            flex-wrap: wrap;
            margin: 0 0 0.7rem;
        }
        /* Outranks the generic `.card h3` rule further down the sheet — equal
           specificity would let the card title style win by source order. */
        .card .adv-section-head h3 {
            margin: 0;
            font-size: 0.7rem;
            font-weight: 800;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: var(--ui-muted);
        }
        .adv-section-note {
            font-size: 0.78rem;
            color: var(--ui-muted);
            font-family: var(--ui-font-mono);
        }
        /* Supporting numbers: label + value, nothing else. */
        .stat-strip {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(152px, 1fr));
            gap: 0.7rem 1.25rem;
            align-items: start;
        }
        .stat-strip > div { min-width: 0; }
        .stat-strip .strip-label {
            font-size: 0.64rem;
            font-weight: 800;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            color: var(--ui-muted);
        }
        .stat-strip .strip-value {
            margin-top: 0.15rem;
            font-family: var(--ui-font-mono);
            font-size: 0.95rem;
            font-weight: 700;
            color: var(--ui-text);
            overflow-wrap: break-word;
        }
        /* σ must not be uppercased (CSS turns it into Σ), so this strip keeps
           its labels as typed — the only one that carries a symbol. */
        #outcome-range .strip-label {
            text-transform: none;
            letter-spacing: 0.03em;
            font-size: 0.68rem;
        }
        .stat-strip .strip-empty { color: var(--ui-muted-2); }
        /* The sigma/odds annotation under an outcome tile. Muted and small on
           purpose: "Bad" is what the reader acts on, "−1σ · 1 in 6" is what
           makes the claim checkable. 11px is the fleet's text floor. */
        .stat-strip .strip-sub {
            margin-top: 0.1rem;
            font-size: 0.6875rem;
            color: var(--ui-muted-2);
            white-space: nowrap;
        }
        .stat-strip .strip-unit {
            font-size: 0.7rem;
            font-weight: 700;
            color: var(--ui-muted);
        }
        .advisor-answer .aa-split {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 0.75rem;
            min-width: min(100%, 320px);
        }
        .advisor-answer .aa-split-item {
            min-width: 0;
        }
        .advisor-answer .aa-split-value {
            display: block;
            font-family: var(--ui-font-mono);
            font-size: 1.45rem;
            font-weight: 800;
            line-height: 1.05;
        }
        .advisor-answer .aa-split-label {
            display: block;
            margin-top: 0.12rem;
            font-size: 0.68rem;
            font-weight: 800;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            color: var(--ui-muted-2);
        }
        .advisor-answer .aa-ok { color: var(--ui-success); }
        .advisor-answer .aa-bad { color: var(--ui-danger); }
        /* Assumption chips: the four levers that move the number, plus a
           warning chip only when the data behind one is thin. Everything else
           lives in Assumptions & levers. */
        /* A checkbox lever, laid out like the other advisor-input fields but
           with the control inline before its label instead of above it. */
        .advisor-input-check { gap: 0.15rem; }
        .advisor-input-check > span:first-child {
            display: inline-flex;
            align-items: center;
            gap: 0.45rem;
            /* 36px floor: the mobile gate rejects smaller tap targets. */
            min-height: 36px;
            font-weight: 600;
        }
        .advisor-input-check input[type="checkbox"] { width: 16px; height: 16px; }

        .advisor-quick-facts {
            display: flex;
            flex-wrap: wrap;
            gap: 0.4rem;
            margin-top: 0.75rem;
        }
        .advisor-quick-facts span {
            border: 1px solid var(--ui-border-soft);
            border-radius: 999px;
            padding: 0.22rem 0.6rem;
            color: var(--ui-muted);
            background: var(--ui-surface-2);
            font-size: 0.72rem;
            white-space: nowrap;
        }
        .advisor-quick-facts span.qf-warn {
            border-color: rgba(201, 180, 135, 0.35);
            color: var(--ui-warning);
        }
        .advisor-quick-facts strong {
            color: var(--ui-text);
            font-family: var(--ui-font-mono);
            font-weight: 700;
        }
        .advisor-phases {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
            gap: 0.6rem;
        }
        /* Each card is a real <button>: clicking (or Enter/Space) scrubs the
           whole panel to that phase, so the strip is navigation, not decoration.
           Button chrome is reset; the card styling is the affordance. */
        .phase-card {
            display: block;
            width: 100%;
            text-align: left;
            font: inherit;
            color: inherit;
            cursor: pointer;
            border: 1px solid var(--ui-border-soft);
            border-radius: 12px;
            padding: 0.7rem 0.8rem;
            background: var(--ui-surface-2);
            border-top: 2px solid var(--ui-border);
            min-width: 0;
        }
        .phase-card:hover { border-color: var(--ui-border); background: var(--ui-surface-3); }
        .phase-card:focus-visible {
            outline: 2px solid var(--ui-accent);
            outline-offset: 2px;
        }
        .phase-card.accumulation { border-top-color: var(--ui-success); }
        .phase-card.drawdown { border-top-color: var(--ui-info); }
        .phase-card.gap { border-top-color: var(--ui-danger); }
        /* The phase containing the selected age. A quiet border + surface lift,
           no motion — it ties the chart position to the phase it lands in. */
        .phase-card.is-active {
            border-color: var(--ui-accent);
            background: var(--ui-surface-3);
        }
        .phase-card .pc-index {
            font-size: 0.62rem;
            font-weight: 800;
            letter-spacing: 0.09em;
            text-transform: uppercase;
            color: var(--ui-muted);
            margin-bottom: 0.2rem;
        }
        .phase-card.is-active .pc-index { color: var(--ui-accent); }
        .phase-card .pc-label {
            font-weight: 700;
            font-size: 0.82rem;
            line-height: 1.25;
        }
        .phase-card .pc-age {
            margin-top: 0.1rem;
            font-size: 0.7rem;
            color: var(--ui-muted);
            font-family: var(--ui-font-mono);
        }
        .phase-card .pc-income {
            font-size: 1.15rem;
            font-weight: 800;
            font-family: var(--ui-font-mono);
            margin-top: 0.45rem;
            line-height: 1.1;
        }
        .phase-card .pc-income .pc-unit {
            font-size: 0.68rem;
            font-weight: 700;
            color: var(--ui-muted);
        }
        .phase-card .pc-split {
            font-size: 0.7rem;
            color: var(--ui-muted);
            font-family: var(--ui-font-mono);
            margin-top: 0.2rem;
        }
        .phase-card .pc-source {
            margin-top: 0.35rem;
            font-size: 0.74rem;
            color: var(--ui-muted);
        }
        .phase-card .pc-gap-note {
            font-size: 0.72rem;
            font-weight: 700;
            color: var(--ui-danger);
            margin-top: 0.35rem;
        }
        /* Typical month. Group hues validated for the dark surface
           (OKLCH band, chroma floor, CVD + normal-vision separation); each
           group also carries a text header, so identity is never color-alone. */

        /* Budget pane, consolidated 2026-09-18: one headline strip (5 stat
           tiles, budget-focus-grid below), one category table beside a side
           column of the ranked/set-aside/review/recurring lists. */
        /* The hero gets two shares so its basis/pace lines wrap to two rows
           instead of five; that one tile set the strip's height and left
           the category table two rows tall (2026-09-18). */
        .budget-focus-grid.budget-headline-grid {
            grid-template-columns: 2fr repeat(4, 1fr);
            margin-top: 0.6rem;
        }
        .budget-headline-grid .budget-focus-sub {
            font-size: 0.8rem;
            line-height: 1.4;
        }
        /* Compact tiles for the headline strip specifically -- five tiles at
           the full .budget-focus-card padding/value size (tuned for a
           single hero tile elsewhere) left no room under it for the table +
           side column without a page scroll. */
        .budget-headline-grid .budget-focus-card {
            padding: 0.7rem 0.9rem;
        }
        .budget-headline-grid .budget-focus-value {
            font-size: 1.5rem;
        }
        #budget-headline-card { padding: 0 1.4rem 1.1rem; }
        /* Table gets 2/3 of the row, side column 1/3 -- same 12-col
           .dashboard-grid every other pane composes cards on (span 4 = a
           third), not a competing grid system. */
        /* min-height: 0 overrides the grid item default of min-height: auto
           (= max-content), which otherwise forces the card to its content's
           full intrinsic height and defeats fitBudgetPanels' max-height +
           overflow-y: auto entirely -- a long "Where to save"/Label-review
           list was growing the PAGE instead of scrolling in its own panel. */
        #budget-table-card { grid-column: span 8; min-height: 0; }
        #budget-side-card { grid-column: span 4; min-height: 0; }
        @media (max-width: 900px) {
            .budget-headline-grid { grid-template-columns: repeat(2, 1fr); }
            #budget-table-card, #budget-side-card { grid-column: 1 / -1; }
        }
        /* The table scrolls inside its own panel ("fits one page, no scrolling"
           applies to the pane, not necessarily every internal list) so the headline strip and side column never leave the
           viewport even when a busy month's category list is long. */
        .budget-table-panel {
            max-height: 60vh;
            overflow-y: auto;
        }
        /* Pace bar (MTD vs typical pro-rated to today): colour only when
           over -- neutral fill otherwise, matching the "colour is
           functional" rule. Its own class (not .tm-bar) so it never
           inherits that class's per-group tint, which would fight the
           over/under signal here. */
        .bt-pace-bar {
            grid-column: 1 / -1;
            height: 4px;
            border-radius: 2px;
            background: var(--ui-border-soft);
            overflow: hidden;
        }
        .bt-pace-fill {
            display: block;
            height: 100%;
            border-radius: 2px;
            background: var(--ui-muted-2);
        }
        .bt-pace-fill.bt-pace-over { background: var(--ui-danger); }
        .tm-row.bt-row { cursor: pointer; }
        .tm-group { margin-bottom: 1rem; }

        /* Desktop shows every category; the phone disclosure is opt-in below. */
        .tm-more-btn { display: none; }

        .tm-group-head {
            display: flex;
            justify-content: space-between;
            align-items: baseline;
            gap: 0.5rem;
            padding-bottom: 0.3rem;
            border-bottom: 1px solid var(--ui-border);
        }
        .tm-group-title {
            font-size: 0.78rem;
            font-weight: 700;
            letter-spacing: 0.02em;
        }
        .tm-group-title::before {
            content: "";
            display: inline-block;
            width: 8px; height: 8px;
            border-radius: 2px;
            margin-right: 0.4rem;
            background: var(--ui-muted-2);
        }
        .tm-group.lifestyle .tm-group-title::before { background: #3aa876; }
        .tm-group.fixed .tm-group-title::before { background: #5b93d6; }
        .tm-group.ending .tm-group-title::before { background: #bd8018; }
        .tm-group-total {
            font-family: var(--ui-font-mono);
            font-weight: 800;
            font-size: 0.86rem;
            white-space: nowrap;
        }
        .tm-group-note {
            font-size: 0.7rem;
            color: var(--ui-muted-2);
            margin: 0.15rem 0 0.4rem;
        }
        .tm-row {
            display: grid;
            grid-template-columns: 1fr auto;
            gap: 0.3rem 0.75rem;
            padding: 0.3rem 0;
            font-size: 0.82rem;
            align-items: baseline;
        }
        .tm-row .tm-cat { font-weight: 600; min-width: 0; }
        .tm-row .tm-amt {
            font-family: var(--ui-font-mono);
            font-weight: 700;
            white-space: nowrap;
        }
        .tm-bar {
            grid-column: 1 / -1;
            height: 4px;
            border-radius: 2px;
            background: var(--ui-border-soft);
            overflow: hidden;
        }
        .tm-bar span {
            display: block;
            height: 100%;
            border-radius: 2px;
            background: var(--ui-muted-2);
        }
        .tm-group.lifestyle .tm-bar span { background: #3aa876; }
        .tm-group.fixed .tm-bar span { background: #5b93d6; }
        .tm-group.ending .tm-bar span { background: #bd8018; }
        .tm-meta {
            grid-column: 1 / -1;
            font-size: 0.7rem;
            color: var(--ui-muted-2);
            margin-top: -0.1rem;
        }
        .tm-lever {
            border: 1px solid var(--ui-border-soft);
            border-left: 3px solid #3aa876;
            padding: 0.55rem 0.7rem;
            margin: 0 0 0.55rem;
            background: var(--ui-surface-2);
            border-radius: 0 10px 10px 0;
            font-size: 0.8rem;
        }
        .tm-lever.visibility { border-left-color: #5b93d6; }
        .tm-lever.audit { border-left-color: #bd8018; }
        .tm-lever-head {
            display: flex;
            justify-content: space-between;
            gap: 0.6rem;
            align-items: baseline;
        }
        .tm-lever-title { font-weight: 700; }
        .tm-lever-impact {
            font-family: var(--ui-font-mono);
            font-weight: 800;
            white-space: nowrap;
            color: #5cc79a;
        }
        .tm-lever.visibility .tm-lever-impact { color: #7fb2ea; }
        .tm-lever.audit .tm-lever-impact { color: #d9a34a; }
        .tm-lever-nest {
            font-family: var(--ui-font-mono);
            font-size: 0.72rem;
            color: var(--ui-muted);
            margin-top: 0.15rem;
        }
        .tm-lever-detail {
            color: var(--ui-muted);
            font-size: 0.74rem;
            margin-top: 0.2rem;
        }
        .tm-sub { font-size: 0.7rem; color: var(--ui-muted-2); max-width: 75ch; }
        /* Pace states are text labels first; color is reinforcement. */
        .tm-pace-on_track { color: #5cc79a; }
        .tm-pace-over_pace { color: #d9a34a; }
        .tm-pace-over { color: #d08a8a; }
        /* Spending-tab section intro line (groups History cards without a card wrapper). */
        .spending-section-title {
            margin: 0.4rem 0 0.75rem;
            color: var(--ui-muted-2);
            font-size: 0.85rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.08em;
        }
        /* Lifestyle-group accent, matching the Typical month hero/lever/bar treatment. */
        .budget-focus-card.lifestyle-accent,
        .merchant-item.lifestyle-accent { border-left: 3px solid #3aa876; }
        .tm-target-btn {
            font: inherit;
            font-size: 0.72rem;
            font-weight: 700;
            color: var(--ui-text);
            background: var(--ui-surface-3, rgba(255,255,255,0.06));
            border: 1px solid var(--ui-border);
            border-radius: 999px;
            padding: 0.15rem 0.6rem;
            margin-top: 0.3rem;
            cursor: pointer;
        }
        .tm-target-btn:disabled { opacity: 0.55; cursor: default; }
        .advisor-assumptions {
            margin-top: 1.25rem;
            border-top: 1px solid var(--ui-border-soft);
            padding-top: 0.5rem;
        }
        .advisor-assumptions > summary {
            cursor: pointer;
            font-weight: 700;
            font-size: 0.9rem;
            color: var(--ui-muted);
            padding: 0.35rem 0;
            list-style: revert;
        }
        .advisor-assumptions[open] > summary { color: var(--ui-text); }
        .advisor-header {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 1rem;
            flex-wrap: wrap;
        }
        .advisor-meta {
            font-size: 0.8rem;
            color: var(--ui-muted);
            display: flex;
            gap: 0.6rem;
            flex-wrap: wrap;
        }
        .advisor-inputs {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
            gap: 0.8rem;
        }
        .advisor-input {
            display: flex;
            flex-direction: column;
            gap: 0.35rem;
            font-size: 0.75rem;
            color: var(--ui-muted);
        }
        .advisor-input input {
            padding: 0.55rem 0.65rem;
            border-radius: 10px;
            border: 1px solid var(--ui-border);
            background: var(--ui-surface-2);
            color: var(--ui-text);
            font-size: 0.9rem;
        }
        /* Four headline numbers for the selected age; the rest of that year's
           balance sheet drops into the strip below, unlabelled by prose. */
        .projection-point-details {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 0.6rem;
            align-items: stretch;
        }
        .projection-detail-item {
            min-width: 0;
            padding: 0.7rem 0.8rem;
            border: 1px solid var(--ui-border-soft);
            border-radius: 12px;
            background: var(--ui-surface-2);
        }
        .projection-detail-label {
            font-size: 0.64rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            color: var(--ui-muted);
        }
        .projection-detail-value {
            margin-top: 0.25rem;
            font-family: var(--ui-font-mono);
            font-size: 1.35rem;
            font-weight: 800;
            color: var(--ui-text);
            line-height: 1.1;
            overflow-wrap: anywhere;
        }
        .projection-detail-value .pd-unit {
            font-size: 0.68rem;
            font-weight: 700;
            color: var(--ui-muted);
        }
        .projection-detail-value.ri-ok,
        .projection-detail-value.ri-bad {
            font-family: var(--ui-font-sans);
        }
        .advisor-slider-row {
            display: flex;
            align-items: center;
            gap: 0.6rem;
        }
        .advisor-slider-row input[type="range"] {
            flex: 1;
            accent-color: var(--ui-accent);
        }
        .advisor-slider-row span {
            min-width: 36px;
            text-align: right;
            font-weight: 600;
            color: var(--ui-text);
        }
        .advisor-actions {
            margin-top: 0.8rem;
            display: flex;
            gap: 0.6rem;
            flex-wrap: wrap;
            align-items: center;
        }
        .advisor-mix {
            display: flex;
            flex-direction: column;
            gap: 0.8rem;
        }
        .advisor-mix-row {
            display: grid;
            grid-template-columns: 120px 1fr 140px;
            gap: 0.8rem;
            align-items: center;
        }
        .advisor-mix-bar {
            height: 10px;
            border-radius: 999px;
            background: var(--ui-surface-3);
            overflow: hidden;
        }
        .advisor-mix-fill {
            height: 100%;
            border-radius: 999px;
        }
        .advisor-mix-values {
            font-size: 0.85rem;
            color: var(--ui-muted-2);
            text-align: right;
        }
        .advisor-mix-target {
            grid-column: 2 / -1;
            font-size: 0.72rem;
            color: var(--ui-muted);
        }
        .advisor-list {
            display: grid;
            gap: 0.75rem;
        }
        .advisor-item {
            padding: 0.85rem;
            border-radius: 14px;
            border: 1px solid var(--ui-border);
            background: var(--ui-surface-2);
        }
        .advisor-item .title {
            font-weight: 600;
            color: var(--ui-text);
        }
        .advisor-item .detail {
            font-size: 0.85rem;
            color: var(--ui-muted);
            margin-top: 0.35rem;
        }
        .advisor-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 0.9rem;
        }
        .advisor-table th,
        .advisor-table td {
            padding: 0.6rem 0.4rem;
            text-align: left;
            border-bottom: 1px solid var(--ui-border);
        }
        .advisor-knowledge {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 0.8rem;
        }
        .advisor-knowledge-card {
            padding: 0.85rem;
            border-radius: 14px;
            border: 1px solid var(--ui-border);
            background: var(--ui-surface-2);
        }
        .advisor-knowledge-card.focus {
            border-color: var(--ui-accent);
            box-shadow: 0 8px 20px rgba(185, 193, 204, 0.12);
        }
        .advisor-knowledge-card .title {
            font-weight: 600;
            margin-bottom: 0.35rem;
        }
        .advisor-knowledge-card .summary {
            font-size: 0.85rem;
            color: var(--ui-muted);
        }
        .advisor-knowledge-card .details {
            font-size: 0.75rem;
            color: var(--ui-muted-2);
            margin-top: 0.4rem;
        }

        .advisor-action-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
            gap: 0.8rem;
            margin-top: 0.8rem;
        }

        .advisor-action-card {
            background: var(--ui-surface-2);
            border: 1px solid var(--ui-border);
            border-radius: 14px;
            padding: 0.9rem 1rem;
            display: flex;
            flex-direction: column;
            gap: 0.35rem;
        }

        .advisor-action-card[data-priority="0"] {
            border-color: rgba(127, 168, 145, 0.6);
            box-shadow: 0 10px 24px rgba(127, 168, 145, 0.12);
        }

        .advisor-action-card[data-priority="1"] {
            border-color: rgba(201, 180, 135, 0.5);
        }

        .advisor-action-card .meta {
            font-size: 0.7rem;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: var(--ui-muted);
        }

        .advisor-action-card .impact {
            font-size: 1.05rem;
            font-weight: 700;
        }

        .advisor-action-card .detail {
            font-size: 0.82rem;
            color: var(--ui-muted);
        }

        .advisor-trajectory {
            display: grid;
            gap: 0.4rem;
            margin-top: 0.75rem;
            max-height: 500px;
            overflow-y: auto;
            padding-right: 0.5rem;
        }

        .advisor-trajectory-row {
            display: grid;
            grid-template-columns: 90px 1fr 1fr;
            gap: 0.8rem;
            align-items: center;
            padding: 0.5rem 0.75rem;
            border-radius: 8px;
            border: 1px solid var(--ui-border-soft);
            background: var(--ui-surface-2);
            font-size: 0.82rem;
        }

        .advisor-trajectory-row.highlight {
            background: rgba(127, 168, 145, 0.08);
            border-color: var(--ui-accent);
        }

        .advisor-trajectory-row.retirement {
            background: rgba(127, 168, 145, 0.15);
            border-color: var(--ui-accent-strong);
            border-width: 2px;
        }

        .advisor-trajectory-row .label {
            font-weight: 600;
            color: var(--ui-text);
        }

        .advisor-trajectory-row .value {
            font-weight: 600;
            color: var(--ui-text);
        }

        .advisor-trajectory-row .sub {
            color: var(--ui-muted);
            font-size: 0.72rem;
        }

        .advisor-milestones {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            margin-top: 0.6rem;
        }

        @media (max-width: 600px) {
            .advisor-trajectory-row {
                grid-template-columns: 1fr;
                align-items: flex-start;
            }
        }

        .advisor-levers {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            margin-top: 0.75rem;
        }

        .advisor-lever {
            border: 1px solid var(--ui-border);
            border-radius: 999px;
            padding: 0.4rem 0.7rem;
            font-size: 0.75rem;
            color: var(--ui-text);
            background: var(--ui-surface);
        }

        .advisor-lever strong {
            color: var(--ui-accent-strong);
        }

        .advisor-swap-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 0.8rem;
            margin-top: 0.8rem;
        }

        .advisor-swap-card {
            background: var(--ui-surface-2);
            border: 1px solid var(--ui-border-soft);
            border-radius: 12px;
            padding: 0.8rem 1rem;
            display: flex;
            flex-direction: column;
            gap: 0.3rem;
        }

        .advisor-swap-card .label {
            font-size: 0.75rem;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: var(--ui-muted);
        }

        .advisor-swap-card .value {
            font-size: 1.2rem;
            font-weight: 700;
        }

        .advisor-swap-card .value.positive { color: var(--ui-success); }
        .advisor-swap-card .value.negative { color: var(--ui-danger); }

        .advisor-swap-note {
            font-size: 0.8rem;
            color: var(--ui-muted);
            margin-top: 0.6rem;
        }

        .advisor-chat {
            display: flex;
            gap: 0.75rem;
            flex-wrap: wrap;
            align-items: flex-start;
        }

        .advisor-chat textarea {
            flex: 1;
            min-height: 96px;
            padding: 0.6rem 0.75rem;
            border: 1px solid var(--ui-border);
            border-radius: 12px;
            background: var(--ui-surface);
            font-family: var(--ui-font-sans);
            font-size: 0.95rem;
        }

        .advisor-chat-response {
            margin-top: 0.75rem;
            white-space: pre-line;
            background: var(--ui-surface-2);
            border: 1px solid var(--ui-border-soft);
            border-radius: 12px;
            padding: 0.8rem 1rem;
            font-size: 0.9rem;
        }

        .advisor-chat-sources {
            margin-top: 0.5rem;
            font-size: 0.75rem;
            color: var(--ui-muted);
        }

        .advisor-chat-thread {
            margin-top: 0.75rem;
            display: flex;
            flex-direction: column;
            gap: 0.6rem;
        }

        .advisor-chat-message {
            padding: 0.7rem 0.9rem;
            border-radius: 12px;
            border: 1px solid var(--ui-border-soft);
            white-space: pre-line;
            font-size: 0.9rem;
        }

        .advisor-chat-message.user {
            align-self: flex-end;
            background: var(--ui-accent-soft);
            border-color: rgba(185, 193, 204, 0.15);
        }

        .advisor-chat-message.assistant {
            background: var(--ui-surface-2);
        }

        .advisor-chat-message .meta {
            display: block;
            margin-top: 0.35rem;
            font-size: 0.75rem;
            color: var(--ui-muted);
        }

        .text-asset {
            color: var(--success-color);
        }

        .text-liability {
            color: var(--error-color);
        }

        .account-total {
            font-size: 0.85rem;
            font-weight: 600;
            margin-left: 0.25rem;
        }

        .accounts-section {
            display: grid;
            gap: 1rem;
        }

        .accounts-section-title {
            font-size: 0.85rem;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: var(--ui-muted-2);
        }

        .accounts-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
            gap: 1rem;
            align-items: start;
        }

        .accounts-layout {
            display: grid;
            grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
            gap: 1.5rem;
            align-items: start;
        }

        .totals-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 1rem;
            align-items: start;
        }

        .total-card {
            background: var(--ui-surface-2);
            border-radius: 16px;
            padding: 1rem 1.2rem;
            border: 1px solid var(--ui-border-soft);
        }

        .total-card .label {
            font-size: 0.75rem;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: var(--ui-muted-2);
        }

        .total-card .value {
            font-size: 1.8rem;
            font-weight: 700;
            font-family: var(--ui-font-mono);
        }

        .total-card.asset .value { color: var(--ui-success); }
        .total-card.liability .value { color: var(--ui-danger); }

        .no-data {
            text-align: center;
            padding: 3rem;
            color: var(--ui-muted);
        }

        .trajectory-badge {
            padding: 0.3rem 0.75rem;
            border-radius: 999px;
            font-size: 0.75rem;
            font-weight: 600;
            border: 1px solid var(--ui-border);
            background: var(--ui-surface-2);
            color: var(--ui-muted);
        }

        .trajectory-badge.positive {
            background: rgba(127, 168, 145, 0.12);
            color: var(--ui-success);
            border-color: rgba(127, 168, 145, 0.2);
        }

        .trajectory-badge.negative {
            background: rgba(205, 138, 143, 0.12);
            color: var(--ui-danger);
            border-color: rgba(205, 138, 143, 0.2);
        }

        .range-btn {
            padding: 0.35rem 0.7rem;
            border: 1px solid var(--ui-border);
            border-radius: 999px;
            background: var(--ui-surface);
            color: var(--ui-muted);
            cursor: pointer;
            font-size: 0.75rem;
            font-weight: 600;
            transition: all 0.15s ease;
        }

        .range-btn:hover {
            background: var(--ui-surface-2);
        }

        .range-btn.active {
            background: var(--ui-accent);
            color: white;
            border-color: var(--ui-accent);
            box-shadow: 0 8px 16px rgba(185, 193, 204, 0.2);
        }

        /* Transactions direction toggle (All / Income / Expense[/ Investment]):
           same filled-pill .range-btn as every other range/period control, in
           its own row so it reads as one control group. Reserved height so
           picking a pill never shifts the query bar under it. */
        .tx-direction-bar {
            display: flex;
            gap: 0.4rem;
            flex-wrap: wrap;
            align-items: center;
            min-height: 2.25rem;
        }

        .nw-period-row {
            display: flex;
            gap: 0.5rem;
            margin: 1rem 0 0.5rem;
            flex-wrap: wrap;
            align-items: center;
        }

        .nw-category-row {
            display: flex;
            gap: 0.5rem;
            margin: 0 0 0.75rem;
            flex-wrap: wrap;
            align-items: center;
        }

        .nw-category-row {
            flex-direction: column;
            align-items: flex-start;
        }
        /* Consistent control taxonomy: every chart-control label (Time
           period, Category, Project forward) sits on its own line above
           its chips. Mobile keeps its own treatment (labels hidden,
           period strip scrolls). */
        .nw-period-row .nw-row-label,
        .nw-projection-row .nw-row-label {
            flex-basis: 100%;
        }
        .nw-cat-group {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 0.4rem;
            width: 100%;
        }
        .nw-cat-group-label {
            font-size: 0.75rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: var(--ui-muted);
            min-width: 4.2rem;
        }
        .nw-projection-row {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            flex-wrap: wrap;
            margin: 0 0 0.75rem;
        }

        .nw-options-toggle {
            display: none;
        }

        /* One label style for all three control rows, so time period,
           category and projection read as the same kind of choice. */
        .nw-row-label {
            flex: none;
            min-width: 6.5rem;
            font-size: 0.72rem;
            font-weight: 700;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            color: var(--ui-muted-2);
        }

        .fire-tier-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 0.75rem;
        }
        .fire-tier {
            padding: 1rem;
            border: 1px solid var(--ui-border-soft);
            border-radius: 12px;
            background: var(--ui-surface-2);
        }
        .fire-tier .tier-name {
            font-size: 0.72rem;
            font-weight: 800;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            color: var(--ui-muted-2);
        }
        .fire-tier .tier-age {
            margin-top: 0.3rem;
            font-family: var(--ui-font-mono);
            font-size: 1.5rem;
            font-weight: 800;
        }
        .fire-tier.reached .tier-age { color: var(--ui-success); }
        .fire-tier .tier-sub { margin-top: 0.2rem; color: var(--ui-muted); font-size: 0.78rem; }
        .fire-tier .tier-bar {
            margin-top: 0.6rem;
            height: 6px;
            border-radius: 6px;
            background: var(--ui-border-soft);
            overflow: hidden;
        }
        .fire-tier .tier-bar > span {
            display: block;
            height: 100%;
            border-radius: 6px;
            background: var(--ui-accent);
        }

        .ri-ok { color: var(--ui-success); }
        .ri-bad { color: var(--ui-danger); }

        .advisor-chart {
            height: clamp(400px, 52vh, 540px) !important;
            min-height: 400px;
        }

        .setup-card {
            max-width: 600px;
            margin: 2rem auto;
            text-align: center;
        }

        .setup-card code {
            display: block;
            background: var(--ui-surface-2);
            padding: 1rem;
            border-radius: 10px;
            margin: 1rem 0;
            word-break: break-all;
        }

        .sankey-wrap {
            width: 100%;
            min-height: 600px;
            position: relative;
            background: var(--ui-surface-2);
            border: 1px solid var(--ui-border);
            border-radius: 16px;
            padding: 1rem;
        }

        .sankey-wrap svg {
            width: 100%;
            height: 100%;
            overflow: visible;
        }

        .sankey-node rect {
            rx: 8px;
            ry: 8px;
            cursor: pointer;
        }

        .sankey-label {
            font-size: 0.85rem;
            font-weight: 600;
            fill: var(--ui-text);
            pointer-events: auto;
            text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8), 0 0 8px rgba(0, 0, 0, 0.5);
        }

        .sankey-label-sub {
            font-size: 0.75rem;
            font-weight: 500;
            fill: var(--ui-muted);
            text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
        }

        .sankey-tooltip {
            position: absolute;
            background: var(--ui-surface);
            border: 1px solid var(--ui-border);
            border-radius: 8px;
            padding: 0.5rem 0.6rem;
            font-size: 0.75rem;
            color: var(--ui-text);
            box-shadow: var(--ui-shadow-soft);
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.1s ease;
        }

        .sankey-legend {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            margin-top: 0.5rem;
        }

        .sankey-legend-item {
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
            padding: 0.18rem 0.35rem;
            border-radius: 999px;
            font-size: 0.75rem;
            color: var(--ui-muted);
        }

        .sankey-legend-item.clickable {
            cursor: pointer;
            transition: background 0.15s ease, color 0.15s ease;
        }

        .sankey-legend-item.clickable:hover,
        .sankey-legend-item.clickable:focus-visible {
            background: var(--ui-surface-3);
            color: var(--ui-text);
            outline: none;
        }

        .sankey-legend-swatch {
            width: 10px;
            height: 10px;
            border-radius: 999px;
        }

        .flow-note {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            align-items: center;
            font-size: 0.8rem;
            color: var(--ui-muted);
        }

        .flow-note button {
            padding: 0.25rem 0.6rem;
            border-radius: 999px;
            border: 1px solid var(--ui-border);
            background: var(--ui-surface);
            cursor: pointer;
            font-size: 0.75rem;
        }

        .budget-summary {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
            gap: 1rem;
            margin-bottom: 1.5rem;
        }

        .budget-focus-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 1rem;
            margin-top: 1rem;
        }

        .budget-focus-card {
            background: var(--ui-surface-2);
            border-radius: 16px;
            padding: 1rem 1.2rem;
            border: 1px solid var(--ui-border-soft);
        }

        .budget-focus-label {
            font-size: 0.75rem;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: var(--ui-muted-2);
            margin-bottom: 0.35rem;
        }

        .budget-focus-value {
            font-size: 2rem;
            font-weight: 700;
            font-family: var(--ui-font-mono);
            color: var(--ui-text);
        }

        .budget-focus-sub {
            margin-top: 0.5rem;
            font-size: 0.85rem;
            color: var(--ui-muted);
        }

        /* One Flex Number hero: biggest number in the Steer card, static
           (no animation), colored green/yellow/red by store.ComputeFlexRemaining.
           Single call site since 2026-08-31 (the Home tab's compact mirror
           tile was cut — it read poorly out of
           context, and the number belongs with the rest of Spending) but
           computeFlexHero()/paintFlexHero() stay pure functions rather than
           being inlined back into loadBudgets(). */
        .flex-hero-card {
            border-width: 2px;
            border-color: var(--ui-border-soft);
        }
        .flex-hero-value {
            font-size: 2.6rem;
        }
        .flex-hero-value.flex-green { color: #5cc79a; }
        .flex-hero-value.flex-yellow { color: #d9a34a; }
        .flex-hero-value.flex-red { color: #d08a8a; }
        .flex-hero-card.flex-green { border-color: #3aa876; }
        .flex-hero-card.flex-yellow { border-color: #bd8018; }
        .flex-hero-card.flex-red { border-color: #a85a5a; }
        .flex-hero-basis {
            color: var(--ui-muted);
        }

        /* Slim progress bar under the hero value: spent/budget fraction,
           same pace color as the value, width capped at 100% even when
           overspent — color alone signals "over", the dollar amount is
           stated once, in the pace sub-line below (paintFlexHero never
           prints the same figure twice). The mark is a static tick at the
           right edge marking the budget boundary itself. No animation
           (dark-calm). */
        .flex-hero-bar {
            position: relative;
            height: 6px;
            margin: 0.6rem 0 0.5rem;
            border-radius: 999px;
            background: var(--ui-surface);
            overflow: hidden;
        }
        .flex-hero-bar-fill {
            height: 100%;
            width: 0%;
            border-radius: 999px;
        }
        .flex-hero-bar-fill.flex-green { background: #5cc79a; }
        .flex-hero-bar-fill.flex-yellow { background: #d9a34a; }
        .flex-hero-bar-fill.flex-red { background: #d08a8a; }
        .flex-hero-bar-mark {
            position: absolute;
            top: 0;
            right: 0;
            width: 2px;
            height: 100%;
            background: var(--ui-border);
        }

        /* .needs-you-chip: was the needs-you strip's chip style (Overview
           pane), now the Accounts pane's Source-audit chip style
           (the strip and its .home-top-strip/.needs-you-strip wrappers are
           gone with it, this is the one survivor). */
        .needs-you-chip {
            display: inline-flex;
            align-items: center;
            min-height: 36px;
            box-sizing: border-box;
            padding: 0.4rem 0.8rem;
            border-radius: 999px;
            border: 1px solid var(--ui-border-soft);
            background: var(--ui-surface-2);
            color: var(--ui-text);
            font-size: 0.8rem;
            text-decoration: none;
            cursor: pointer;
            max-width: 100%;
            overflow-wrap: anywhere;
        }

        .trend-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 1rem;
        }

        .trend-card {
            background: var(--ui-surface-2);
            border-radius: 16px;
            padding: 1rem 1.2rem;
            border: 1px solid var(--ui-border-soft);
        }

        .trend-title {
            font-size: 0.8rem;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: var(--ui-muted-2);
            margin-bottom: 0.5rem;
        }

        .trend-chart {
            height: 220px;
        }

        .budget-summary-card {
            background: var(--ui-surface-2);
            border-radius: 16px;
            padding: 1rem 1.2rem;
            border: 1px solid var(--ui-border-soft);
        }

        .budget-summary-label {
            font-size: 0.75rem;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: var(--ui-muted-2);
            margin-bottom: 0.35rem;
        }

        .budget-summary-value {
            font-size: 1.8rem;
            font-weight: 700;
            font-family: var(--ui-font-mono);
            color: var(--ui-text);
        }

        .budget-summary-sub {
            font-size: 0.85rem;
            color: var(--ui-muted);
            margin-top: 0.35rem;
        }

        .budget-note {
            margin-top: 0.5rem;
            font-size: 0.8rem;
            color: var(--ui-muted-2);
            max-width: 75ch;
        }

        .budget-meter {
            margin-top: 0.75rem;
            height: 10px;
            background: var(--ui-surface-3);
            border-radius: 999px;
            overflow: hidden;
        }

        .budget-meter-fill {
            height: 100%;
            width: 0%;
            background: linear-gradient(90deg, var(--ui-accent), var(--ui-highlight));
            border-radius: 999px;
            transition: width 0.3s ease;
        }

        .budget-progress-list {
            display: flex;
            flex-direction: column;
            gap: 0.9rem;
        }

        .budget-row {
            padding: 0.9rem 1rem;
            border-radius: 14px;
            border: 1px solid var(--ui-border-soft);
            background: var(--ui-surface);
            box-shadow: var(--ui-shadow-soft);
        }

        .budget-row-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 1rem;
        }

        .budget-row-title {
            font-weight: 600;
            text-transform: capitalize;
        }

        .budget-row-meta {
            display: flex;
            gap: 0.5rem;
            align-items: center;
            flex-wrap: wrap;
            color: var(--ui-muted);
            font-size: 0.8rem;
        }

        .budget-row-badge {
            padding: 0.2rem 0.6rem;
            border-radius: 999px;
            background: var(--ui-surface-2);
            border: 1px solid var(--ui-border);
            font-size: 0.7rem;
            text-transform: uppercase;
            letter-spacing: 0.06em;
        }

        .budget-row-bar {
            margin-top: 0.6rem;
            height: 12px;
            background: var(--ui-surface-2);
            border-radius: 999px;
            overflow: hidden;
        }

        .budget-row-bar-fill {
            height: 100%;
            border-radius: 999px;
            transition: width 0.3s ease;
        }

        .budget-row-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 0.45rem;
            font-size: 0.8rem;
            color: var(--ui-muted);
            gap: 1rem;
            flex-wrap: wrap;
        }

        .budget-sparkline {
            width: 120px;
            height: 32px;
        }

        .alert-list, .merchant-list {
            display: flex;
            flex-direction: column;
            gap: 0.6rem;
        }

        .alert-item, .merchant-item {
            padding: 0.75rem;
            border-radius: 12px;
            background: var(--ui-surface-2);
            border: 1px solid var(--ui-border-soft);
        }

        .alert-item strong {
            display: block;
            font-weight: 600;
            margin-bottom: 0.25rem;
        }

        .merchant-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 0.5rem;
        }

        .merchant-item.clickable {
            cursor: pointer;
            transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
        }

        .merchant-item.clickable:hover,
        .merchant-item.clickable:focus-visible {
            background: var(--ui-surface-3);
            border-color: rgba(185, 193, 204, 0.34);
            transform: translateY(-1px);
            outline: none;
        }

        .merchant-item span {
            font-size: 0.85rem;
            color: var(--ui-muted);
        }

        .tx-chip {
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
            padding: 0.25rem 0.6rem;
            border-radius: 999px;
            border: 1px solid var(--ui-border);
            background: var(--ui-surface-2);
            font-size: 0.75rem;
            color: var(--ui-muted);
        }

        .tx-chip button {
            border: none;
            background: transparent;
            color: var(--ui-muted);
            cursor: pointer;
            font-size: 0.75rem;
        }

        .reports-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 1rem;
            flex-wrap: wrap;
            padding: 0.5rem 0 1rem;
        }

        .reports-tabs {
            display: flex;
            gap: 0.75rem;
            align-items: center;
        }

        .report-tab {
            border: none;
            background: none;
            font-weight: 600;
            color: var(--ui-muted);
            padding: 0.35rem 0;
            border-bottom: 2px solid transparent;
            cursor: pointer;
        }

        .report-tab.active {
            color: var(--ui-accent-strong);
            border-bottom-color: var(--ui-accent);
        }

        .reports-select {
            padding: 0.5rem 0.8rem;
            border-radius: 999px;
            border: 1px solid var(--ui-border);
            background: var(--ui-surface);
            color: var(--ui-text);
            font-weight: 600;
        }

        .report-panel {
            display: none;
        }

        .report-panel.active {
            display: block;
        }

        .report-metric {
            text-align: center;
        }

        .report-metric-label {
            font-size: 0.75rem;
            color: var(--ui-muted);
            text-transform: uppercase;
            letter-spacing: 0.08em;
        }

        .report-metric-value {
            font-size: 1.6rem;
            font-weight: 700;
            margin-top: 0.35rem;
        }

        .report-split {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 1rem;
            flex-wrap: wrap;
        }

        .report-spending-layout {
            display: grid;
            grid-template-columns: minmax(240px, 320px) 1fr;
            gap: 1.5rem;
            align-items: center;
        }

        .report-category-list {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
            gap: 0.75rem;
        }

        .report-category-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.5rem;
            padding: 0.6rem 0.75rem;
            border-radius: 12px;
            background: var(--ui-surface-2);
            border: 1px solid var(--ui-border-soft);
            font-size: 0.85rem;
        }

        .report-category-item span {
            color: var(--ui-muted);
        }

        .report-donut {
            min-width: 240px;
        }

        .report-donut canvas {
            width: 100% !important;
            height: 240px !important;
        }

        .report-income-summary {
            display: flex;
            gap: 2rem;
            flex-wrap: wrap;
            margin-top: 1rem;
        }

        .mobile-stack {
            display: flex;
            gap: 0.5rem;
            flex-wrap: wrap;
        }

        * {
            box-sizing: border-box;
        }

        body {
            background: linear-gradient(180deg, #121519 0%, #0e1013 60%, #0c0e11 100%);
            color: var(--ui-text);
            font-family: var(--ui-font-sans);
            letter-spacing: 0;
        }

        /* Shell (2026-09-18): the 226px sidebar is gone. One top bar —
           brand, the four sections as pills, sync + settings as icons —
           and the content owns the full width beneath it. */
        .app-shell {
            max-width: 1480px;
        }

        .health-banner {
            margin: 0 0 16px;
            border-radius: 14px;
            color: var(--ui-warning);
        }

        .health-banner.error {
            color: var(--ui-danger);
        }

        .health-banner.warning {
            color: var(--ui-warning);
        }

        .brand-logo {
            width: 34px;
            height: 34px;
            border-radius: 10px;
            box-shadow: 0 10px 26px rgba(185, 193, 204, 0.18);
            filter: none;
        }

        .brand-title {
            font-family: var(--ui-font-sans);
            font-size: 1.15rem;
            letter-spacing: 0;
            margin: 0;
        }

        .last-sync {
            color: var(--ui-muted);
            font-size: 0.78rem;
            white-space: nowrap;
        }

        .tabs {
            position: sticky;
            top: 12px;
            z-index: 20;
            display: flex;
            flex-direction: row;
            align-items: center;
            flex-wrap: wrap;
            gap: 0.75rem 1.25rem;
            margin: 0 0 18px;
            padding: 0.55rem 0.9rem;
            border-radius: 18px;
            background: rgba(22, 25, 29, 0.86);
            border: 1px solid rgba(42, 47, 56, 0.16);
            box-shadow: var(--ui-shadow-soft);
            backdrop-filter: blur(16px);
        }

        .nav-brand {
            display: flex;
            align-items: center;
            gap: 0.6rem;
            padding: 0;
            margin: 0;
            border: 0;
            background: none;
            border-radius: 10px;
            cursor: pointer;
        }

        .nav-brand:focus-visible {
            outline: 2px solid var(--ui-accent, #7fa891);
            outline-offset: 2px;
        }

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

        .tabs-group {
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 0.3rem;
            padding: 0;
        }

        .nav-section {
            width: auto;
            display: flex;
            align-items: center;
            border-radius: 999px;
            border-color: transparent;
            background: transparent;
            color: var(--ui-muted);
            font-size: 0.9rem;
            padding: 0.5rem 0.95rem;
            min-height: 38px;
        }

        .nav-section:hover {
            color: var(--ui-text);
            background: var(--ui-surface-2);
        }

        .nav-section.active {
            color: var(--ui-accent-strong);
            border-color: rgba(185, 193, 204, 0.18);
            background: var(--ui-accent-soft);
            box-shadow: none;
        }

        .nav-actions {
            margin-left: auto;
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 0.35rem;
            padding: 0;
            border: 0;
        }

        /* Sync and Settings are icon buttons, top right.
           The label lives in aria-label + title; the sync icon spins while
           a sync is in flight instead of swapping its text. */
        .icon-btn {
            width: 38px;
            height: 38px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0;
            border-radius: 999px;
            border: 1px solid var(--ui-border);
            background: rgba(28, 32, 38, 0.88);
            color: var(--ui-text);
            cursor: pointer;
            box-shadow: none;
            transition: background 0.15s ease, color 0.15s ease;
        }

        .icon-btn:hover { background: var(--ui-surface-2); }
        .icon-btn:disabled { opacity: 0.6; cursor: progress; }
        .icon-btn[aria-expanded="true"] { color: var(--ui-accent-strong); border-color: var(--ui-accent); }
        .icon-btn svg { width: 18px; height: 18px; stroke-width: 1.8; }
        .icon-btn.syncing svg { animation: icon-spin 1s linear infinite; }
        @keyframes icon-spin { to { transform: rotate(360deg); } }
        @media (prefers-reduced-motion: reduce) {
            .icon-btn.syncing svg { animation: none; opacity: 0.6; }
        }

        .page {
            min-width: 0;
            padding-top: 0;
        }

        .dashboard-grid {
            grid-template-columns: repeat(12, minmax(0, 1fr));
            gap: 1rem;
            padding-top: 0;
        }

        .dashboard-grid > .card {
            grid-column: span 4;
        }

        .dashboard-grid > .card.full-width,
        .full-width {
            grid-column: 1 / -1;
        }

        .card {
            border-radius: var(--ui-radius);
            background: rgba(22, 25, 29, 0.92);
            border-color: rgba(42, 47, 56, 0.16);
            box-shadow: var(--ui-shadow-soft);
        }

        .card h3 {
            color: var(--ui-muted);
            letter-spacing: 0.06em;
            font-size: 0.78rem;
        }

        .big-number {
            color: var(--ui-text);
            letter-spacing: 0;
        }

        .big-number.positive {
            color: var(--ui-text);
        }

        .trajectory-badge,
        .range-btn,
        .tx-chip,
        .category,
        .category-pill,
        .account-sync-pill {
            border-radius: 999px;
            border-color: var(--ui-border-soft);
            background: var(--ui-surface-2);
            color: var(--ui-muted);
        }

        .range-btn.active,
        .trajectory-badge.positive {
            background: var(--ui-accent-soft);
            color: var(--ui-accent-strong);
            border-color: rgba(185, 193, 204, 0.24);
        }

        .budget-focus-card,
        .insight-item,
        .tracking-summary-item,
        .total-card,
        .report-category-item {
            background: var(--ui-surface-2) !important;
            border: 1px solid var(--ui-border-soft);
            border-radius: 14px !important;
        }

        .quick-total-card {
            cursor: pointer;
            transition: none;
        }

        /* .account-open is the mouse target for an account row; styled to
           disappear so the row's own chrome is the affordance. */
        .account-open {
            appearance: none;
            background: none;
            border: 0;
            padding: 0;
            margin: 0;
            font: inherit;
            color: inherit;
            text-align: left;
            cursor: pointer;
        }
        .account-open:focus-visible {
            outline: 2px solid var(--ui-accent);
            outline-offset: 2px;
            border-radius: 4px;
        }

        .quick-total-card:hover,
        .quick-total-card:focus-visible {
            border-color: rgba(185, 193, 204, 0.34);
            background: var(--ui-surface-2) !important;
            outline: none;
        }

        /* .ui-muted / .muted are generic colour utilities used inline in
           dozens of places (chips, labels, table cells) -- giving them a
           max-width would corrupt that layout. This is the dedicated
           opt-in for the handful of long-prose elements among them; apply
           it only where a paragraph of text actually needs capping. */
        .prose-measure {
            max-width: 75ch;
        }

        /* These render inside .advisor-details-body as well as .advisor-answer,
           so the cap is unscoped rather than tied to one container. */
        .aa-taxnote,
        .aa-status {
            max-width: 75ch;
        }

        /* max-width does nothing on an inline box or a table cell, so the
           span form needs an explicit block. The p, div and h3 users are
           already block and are unaffected. */
        span.prose-measure {
            display: block;
        }

        /* Same split, drawn in the category button row. */
        .nw-cat-sep {
            align-self: stretch;
            width: 1px;
            margin: 0.15rem 0.35rem;
            background: var(--ui-border-soft);
        }

        .accounts-layout {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .accounts-grid {
            grid-template-columns: 1fr;
        }

        .accounts-section-title {
            color: var(--ui-muted);
            letter-spacing: 0.12em;
        }

        /* Marks the section you just jumped to. This used to PULSE — an
           expanding box-shadow ring — which the calm-UI rule forbids outright
           (no pulsing, no attention-grabbing motion). A static emphasis says
           the same thing: the class is removed and re-applied on every jump,
           so the marker follows you instead of flashing at you. */
        .account-section-highlight {
            border-color: rgba(185, 193, 204, 0.5) !important;
            box-shadow: var(--ui-glow), var(--ui-shadow-soft);
        }

        /* The rows behind the number you just clicked. Emphasis, not animation:
           the calm-UI rule forbids pulsing and attention-grabbing motion, so
           this is a single 120ms fade in, held while you look, then faded out —
           and skipped entirely under prefers-reduced-motion. The stagger is
           what makes it read as "these ones, in this order" rather than a
           block of colour appearing at once. */
        .account-item.account-item-match {
            border-color: rgba(185, 193, 204, 0.55);
            background: var(--ui-surface-3);
            transition: background-color 120ms ease, border-color 120ms ease;
        }

        @media (prefers-reduced-motion: reduce) {
            .account-item.account-item-match { transition: none; }
        }

        .account-item {
            border-radius: 14px;
            background: var(--ui-surface);
            border-color: var(--ui-border-soft);
        }

        .account-item:hover {
            background: var(--ui-surface-3);
            border-color: rgba(185, 193, 204, 0.28);
        }

        .account-item.selected {
            background: var(--ui-accent-soft);
            border-color: rgba(185, 193, 204, 0.34);
        }

        .account-action-hint {
            display: none;
        }

        .account-detail-balance-row,
        .transaction-item {
            border-color: var(--ui-border-soft);
        }

        .transaction-list {
            overflow: hidden;
            border-radius: 14px;
            border: 1px solid var(--ui-border-soft);
            background: var(--ui-surface);
        }

        .transaction-item {
            padding: 0.85rem 1rem;
        }

        .transaction-item.interactive:hover,
        .transaction-item[style*="cursor: pointer"]:hover {
            background: var(--ui-surface-2);
        }

        input,
        select,
        textarea {
            color: var(--ui-text);
            background: var(--ui-surface) !important;
            border-color: var(--ui-border) !important;
        }

        button,
        .ui-button {
            font-family: var(--ui-font-sans);
        }

        .ui-button,
        .tx-filter-toggle,
        #tx-filters-detail button {
            background: var(--ui-surface) !important;
            color: var(--ui-text);
            border-color: var(--ui-border);
        }

        .no-data {
            padding: 1.25rem;
            color: var(--ui-muted);
        }

        @media (max-width: 900px) {
            .app-shell {
                display: block;
                padding: 16px;
            }

            .topbar {
                position: static;
                flex-direction: column;
                align-items: flex-start;
            }

            .topbar-actions {
                width: 100%;
                justify-content: space-between;
            }

            .tabs {
                position: static;
                gap: 0.5rem 0.75rem;
                padding: 0.5rem 0.65rem;
            }

            .tabs-group {
                flex-wrap: wrap;
            }

            .nav-actions .last-sync { display: none; }

            .tabs-group + .tabs-group {
                border-top: 0;
                padding: 0;
                margin-top: 0;
            }

            .tabs-group-label {
                width: 100%;
            }

            .dashboard-grid {
                grid-template-columns: 1fr;
            }

            .dashboard-grid > .card {
                grid-column: 1 / -1;
            }

            .transaction-item {
                gap: 0.75rem;
            }

            .account-item {
                flex-direction: column;
                align-items: flex-start;
                gap: 0.35rem;
            }

            .budget-row-header {
                flex-direction: column;
                align-items: flex-start;
            }

            .budget-row-footer {
                flex-direction: column;
                align-items: flex-start;
            }

            .report-spending-layout {
                grid-template-columns: 1fr;
            }

            .reports-tabs {
                flex-wrap: wrap;
            }

            .accounts-layout {
                grid-template-columns: 1fr;
            }

            /* Net worth card: collapse the category + projection filter rows
               behind an "Options" toggle so the chart stays above the fold;
               the time-period strip becomes a single scrollable row. */
            /* Was a nowrap strip with a hidden scrollbar: on a 390px screen
               four of the ten presets sat off-screen with no affordance saying
               so. Wrapping costs one extra 44px line and shows all of them. */
            .nw-period-row {
                flex-wrap: wrap;
                overflow-x: visible;
                gap: 0.35rem;
            }

            .nw-period-row .nw-row-label {
                display: none;
            }

            .nw-category-row,
            .nw-projection-row {
                display: none;
            }

            #net-worth-card.nw-options-open .nw-category-row,
            #net-worth-card.nw-options-open .nw-projection-row {
                display: flex;
            }

            .nw-options-toggle {
                display: inline-flex;
                align-items: center;
                margin: 0 0 0.75rem;
            }

            /* Quick-facts chips (projection assumptions) were one per row at
               390px. Two columns roughly halves the vertical space; the chip
               font/padding step down enough that most chips still fit on one
               line inside their narrower column (long ones wrap internally
               rather than overflow). */
            .advisor-quick-facts {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 0.25rem;
            }

            /* 0.5625rem (9px) was below anything readable at arm's length;
               11px is the floor the mobile UI check enforces. */
            .advisor-quick-facts span {
                white-space: normal;
                font-size: 0.6875rem;
                padding: 0.14rem 0.4rem;
            }
        }

        @media (max-width: 600px) {
            .topbar { padding: 16px; }
            .brand-title { font-size: 1.2rem; }
            /* Two columns of supporting numbers instead of one long column —
               same signal, half the scroll. */
            .stat-strip { grid-template-columns: 1fr 1fr; }
            .card { padding: 1.1rem; }
            .big-number { font-size: 2rem; }
            .chart-container { height: 220px; }
            .sankey-wrap { min-height: 550px; }
            .tabs { gap: 0.4rem; }
            .transaction-item { padding: 0.6rem; }
            .reports-select { width: 100%; }
            .report-income-summary { flex-direction: column; gap: 0.75rem; }

            .mobile-stack {
                flex-direction: column;
                align-items: stretch;
            }

            .trend-chart {
                height: 200px;
            }

            .mobile-stack > * {
                width: 100% !important;
            }

            #ck-script {
                max-height: none !important;
                overflow: visible !important;
                white-space: pre-wrap !important;
                word-break: break-word !important;
            }

            .setup-card code {
                white-space: pre-wrap;
                word-break: break-word;
            }
        }

        /* Income by Provider */
        .income-year-row {
            margin-bottom: 1.5rem;
        }
        .income-year-row:last-child { margin-bottom: 0; }
        .income-year-header {
            display: flex;
            justify-content: space-between;
            align-items: baseline;
            margin-bottom: 0.75rem;
        }
        .income-year-header .year {
            font-weight: 700;
            font-size: 1.1rem;
            color: var(--ui-text);
        }
        .income-year-header .total {
            font-family: var(--ui-font-mono);
            font-weight: 600;
            color: var(--ui-accent);
        }
        .income-year-header .yoy {
            font-size: 0.85rem;
            margin-left: 0.5rem;
        }
        .income-bars {
            display: flex;
            gap: 0.5rem;
            flex-direction: column;
        }
        .income-bar-row {
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }
        .income-bar-label {
            width: 60px;
            font-size: 0.85rem;
            font-weight: 500;
            color: var(--ui-muted);
        }
        .income-bar-track {
            flex: 1;
            height: 24px;
            background: var(--ui-surface-2);
            border-radius: 6px;
            overflow: hidden;
        }
        .income-bar-fill {
            height: 100%;
            border-radius: 6px;
            transition: width 0.3s ease;
        }
        .income-bar-fill.other { background: var(--ui-muted-2); }
        .income-bar-value {
            width: 80px;
            text-align: right;
            font-family: var(--ui-font-mono);
            font-size: 0.9rem;
            font-weight: 500;
            color: var(--ui-text);
        }

        .tracking-summary {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 1rem;
        }

        .tracking-summary-item {
            padding: 1rem;
            border-radius: 14px;
            background: var(--bg-secondary);
            border: 1px solid var(--ui-border);
        }

        .tracking-summary-label {
            font-size: 0.75rem;
            color: var(--ui-muted);
            text-transform: uppercase;
            letter-spacing: 0.08em;
        }

        .tracking-summary-value {
            font-size: 1.35rem;
            font-weight: 700;
            margin-top: 0.35rem;
        }

        .tracking-form {
            display: flex;
            gap: 0.6rem;
            flex-wrap: wrap;
            margin: 0.75rem 0 1rem;
        }

        .tracking-form input,
        .tracking-form select,
        .tracking-form textarea {
            padding: 0.5rem 0.65rem;
            background: var(--bg-secondary);
            color: var(--text-primary);
            border: 1px solid var(--border-color);
            border-radius: 8px;
            font-size: 0.85rem;
        }

        .tracking-form textarea {
            min-width: 220px;
            min-height: 42px;
        }

        .tracking-form button {
            padding: 0.5rem 1rem;
            background: var(--accent-color);
            color: white;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-weight: 600;
        }

        .tracking-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 0.85rem;
            min-width: 760px;
        }

        .tracking-table-wrap {
            border: 1px solid var(--ui-border);
            border-radius: 14px;
            overflow-x: auto;
            background: var(--ui-surface-2);
        }

        /* Data & import blocks in the Settings pane. #ck-script keeps its
           `display: none` inline -- money.js toggles it by exact-matching that
           string (showCKScript). */
        .settings-note {
            color: var(--text-secondary);
            margin-bottom: 1rem;
        }

        .settings-list {
            text-align: left;
            color: var(--text-secondary);
            font-size: 0.9rem;
        }

        .settings-file-input {
            margin-bottom: 1rem;
        }

        .settings-btn {
            padding: 0.5rem 1rem;
            background: var(--accent-color);
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        .settings-btn--mt {
            margin-top: 0.5rem;
        }

        .settings-btn-secondary {
            padding: 0.5rem 1rem;
            background: var(--bg-secondary);
            color: var(--text-primary);
            border: 1px solid var(--border-color);
            border-radius: 4px;
            cursor: pointer;
            margin: 1rem 0;
        }

        .settings-script {
            background: var(--bg-secondary);
            padding: 1rem;
            border-radius: 4px;
            font-size: 0.75rem;
            overflow-x: auto;
            max-height: 200px;
        }

        .settings-textarea {
            width: 100%;
            height: 100px;
            margin-top: 1rem;
            background: var(--bg-secondary);
            color: var(--text-primary);
            border: 1px solid var(--border-color);
            border-radius: 4px;
            padding: 0.5rem;
            font-family: monospace;
        }

        .settings-result {
            margin-top: 1rem;
        }

        .settings-input {
            padding: 0.5rem;
            background: var(--bg-secondary);
            color: var(--text-primary);
            border: 1px solid var(--border-color);
            border-radius: 4px;
        }

        .settings-input--wide {
            width: 150px;
        }

        .settings-row {
            gap: 1rem;
        }

        @media (max-width: 900px) {
            .tracking-table {
                min-width: 680px;
            }
        }

        .tracking-table th,
        .tracking-table td {
            text-align: left;
            padding: 0.55rem 0.6rem;
            border-bottom: 1px solid var(--ui-border);
            vertical-align: top;
        }

        .tracking-table th {
            color: var(--ui-muted);
            text-transform: uppercase;
            font-size: 0.7rem;
            letter-spacing: 0.08em;
        }

        .tracking-table input,
        .tracking-table select {
            background: var(--ui-surface-2);
            color: var(--ui-text);
            border: 1px solid var(--ui-border);
            border-radius: 6px;
            padding: 0.35rem 0.45rem;
            font-size: 0.8rem;
        }

        .tracking-table input[type="date"] {
            min-width: 130px;
        }

        .tracking-table input[type="number"] {
            width: 120px;
            text-align: right;
        }

        .tracking-table input[type="text"] {
            min-width: 140px;
        }

        .tracking-table button {
            background: none;
            border: none;
            color: var(--ui-muted);
            cursor: pointer;
            padding: 0.2rem 0.35rem;
        }

        .tracking-empty {
            padding: 0.75rem;
            color: var(--ui-muted);
            font-size: 0.9rem;
        }

        /* ===== MOBILE BOTTOM NAV ===== */
        .bottom-nav {
            display: none;
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            z-index: 1000;
            background: var(--ui-surface);
            border-top: 1px solid var(--ui-border);
            padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
            gap: 2px;
            justify-content: space-around;
            box-shadow: 0 -8px 24px rgba(0,0,0,0.3);
            backdrop-filter: blur(16px);
        }

        /* Spending is one page: the analysis reads first, the transactions it
           is computed FROM sit underneath. The panes are in the other order in
           the document (transactions predates the spending tab), and ordering
           them here beats moving a 2,500-line block — the visible section owns
           the whole column, so nothing else is affected. */
        .page {
            display: flex;
            flex-direction: column;
        }

        #budgets { order: 1; }
        #income { order: 2; }
        #transactions { order: 3; }

        /* Pane switcher for the active section — the same control on a phone
           and on a desktop, because the app has one taxonomy now. Hidden by
           the [hidden] attribute when the section has a single pane. */
        .section-switcher {
            display: flex;
            gap: 0.35rem;
            margin: 0 0 1rem;
            padding: 0.25rem;
            border: 1px solid var(--ui-border);
            border-radius: 999px;
            background: var(--ui-surface);
            max-width: 26rem;
        }

        .section-switcher[hidden] {
            display: none;
        }

        .section-switcher .tab[hidden] {
            display: none;
        }

        .section-switcher .tab {
            flex: 1 1 0;
            min-width: 0;
            min-height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0.45rem 0.9rem;
            border-radius: 999px;
            color: var(--ui-muted);
            font-size: 0.85rem;
            font-weight: 600;
            cursor: pointer;
            white-space: nowrap;
        }

        .section-switcher .tab.active {
            background: var(--ui-accent-soft);
            color: var(--ui-accent);
        }

        .bottom-nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 2px;
            padding: 6px 4px;
            min-width: 48px;
            border-radius: 12px;
            color: var(--ui-muted-2);
            font-size: 0.6rem;
            font-weight: 600;
            letter-spacing: 0.02em;
            cursor: pointer;
            transition: color 0.15s ease, background 0.15s ease;
            -webkit-tap-highlight-color: transparent;
        }

        .bottom-nav-item svg {
            width: 22px;
            height: 22px;
            stroke-width: 1.8;
        }

        .bottom-nav-item.active {
            color: var(--ui-accent);
            background: var(--ui-accent-soft);
        }

        .bottom-nav {
            background: rgba(22, 25, 29, 0.94);
            border-top-color: var(--ui-border-soft);
            box-shadow: 0 -14px 28px rgba(0, 0, 0, 0.12);
        }

        /* ===== MOBILE-SPECIFIC OVERRIDES ===== */
        @media (max-width: 768px) {
            /* Safe area support */
            .app-shell {
                padding: 12px 12px calc(80px + env(safe-area-inset-bottom, 0px)) 12px;
            }

            /* Compact topbar */
            .topbar {
                padding: 12px 14px;
                border-radius: 16px;
                gap: 0.75rem;
            }

            .brand-logo {
                width: 32px;
                height: 32px;
                border-radius: 10px;
            }

            .brand-title {
                font-size: 1.1rem;
            }

            .brand-subtitle {
                display: none;
            }

            .topbar-actions {
                gap: 0.5rem;
            }

            .last-sync {
                display: none;
            }

            .sync-btn {
                padding: 0.5rem 0.9rem;
                font-size: 0.8rem;
            }

            /* Cards */
            .card {
                padding: 1rem;
                border-radius: 16px;
            }

            .card h3 {
                font-size: 0.75rem;
                margin-bottom: 0.6rem;
            }

            /* Numbers */
            .big-number {
                font-size: 1.8rem;
            }

            /* Charts - fluid height */
            .chart-container {
                height: 200px !important;
            }

            /* Dashboard grid */
            .dashboard-grid {
                gap: 0.75rem;
                padding: 0.5rem 0 0;
            }

            /* Accounts layout */
            .accounts-layout {
                grid-template-columns: 1fr;
                gap: 0.75rem;
            }

            /* Transaction items - mobile-optimized layout.
               The row itself never wraps: description + amount hold line one,
               everything else wraps inside .tx-meta. */
            .transaction-item {
                gap: 0.5rem;
                padding: 0.7rem 0.5rem;
            }

            .transaction-item .tx-checkbox,
            .transaction-item input[type="checkbox"] {
                width: 18px;
                height: 18px;
                min-height: 18px;
            }

            .transaction-item .date {
                font-size: 0.75rem;
                min-width: auto;
            }

            .transaction-item .desc {
                font-size: 0.88rem;
            }

            .transaction-item .amount {
                font-size: 0.92rem;
            }

            /* Collapsible transaction filters on mobile */
            .tx-filter-toggle {
                display: inline-block !important;
            }

            .tx-filters-detail:not([open]) {
                display: none;
            }

            .tx-filters-detail {
                margin-top: 0.5rem;
            }

            .tx-filters-detail .mobile-stack {
                flex-direction: column !important;
                align-items: stretch !important;
            }

            .tx-filters-detail select,
            .tx-filters-detail button {
                width: 100%;
                padding: 0.5rem 0.6rem !important;
                font-size: 0.85rem;
            }

            .tx-filters-detail input[type="range"] {
                width: 100%;
            }

            /* Account items */
            .account-item {
                padding: 0.75rem 0.5rem;
            }

            .manual-balance-fields {
                grid-template-columns: 1fr;
                align-items: stretch;
            }

            .manual-recurring-fields,
            .manual-recurring-fields.open {
                grid-template-columns: 1fr;
            }

            .manual-balance-mode {
                grid-template-columns: 1fr;
            }

            .account-detail-panel {
                top: auto;
                left: 0.6rem;
                right: 0.6rem;
                bottom: 0.6rem;
                width: auto;
                max-height: calc(100vh - 4.5rem);
                transform: translateY(calc(100% + 1rem));
            }

            .account-detail-panel.open {
                transform: translateY(0);
            }

            /* Range buttons */
            .range-btn {
                padding: 0.5rem 0.8rem;
                font-size: 0.8rem;
                min-height: 44px;
                display: inline-flex;
                align-items: center;
            }

            /* The three control rows stack their label above the chips rather
               than reserving a 6.5rem gutter on a 412px screen. */
            .nw-row-label {
                min-width: 0;
                width: 100%;
                margin-bottom: 0.1rem;
            }

            /* A vertical rule between wrapped chip groups reads as a stray mark;
               make it a full-width gap instead. */
            .nw-cat-sep {
                width: 100%;
                height: 0;
                margin: 0.1rem 0;
                background: transparent;
            }

            /* Recurring items */
            .recurring-item {
                padding: 0.6rem 0.25rem;
                font-size: 0.85rem;
            }

            /* Budget rows */
            .budget-row-header {
                flex-direction: column;
                align-items: flex-start;
                gap: 0.25rem;
            }

            .budget-row-footer {
                flex-direction: column;
                align-items: flex-start;
            }

            /* Report layout */
            .report-spending-layout {
                grid-template-columns: 1fr;
            }

            /* Tracking tables become stacked cards (2026-08-19).
               A 7-column editable table can only ever be a 1,200px-wide
               sideways scroll on a 390px screen: the header scrolls out of
               view, so you edit unlabelled inputs. Each row becomes a card and
               each cell carries its own label, so nothing scrolls sideways. */
            .tracking-table-wrap {
                border: none;
                background: transparent;
                overflow-x: visible;
            }

            .tracking-table,
            .tracking-table tbody,
            .tracking-table tr,
            .tracking-table td {
                display: block;
                width: 100%;
                min-width: 0;
            }

            .tracking-table thead {
                display: none;
            }

            .tracking-table tr {
                border: 1px solid var(--ui-border);
                border-radius: 14px;
                background: var(--ui-surface-2);
                padding: 0.5rem 0.7rem;
                margin-bottom: 0.6rem;
                position: relative;
            }

            .tracking-table td {
                display: grid;
                grid-template-columns: 5.5rem minmax(0, 1fr);
                align-items: center;
                gap: 0.6rem;
                padding: 0.3rem 0;
                border-bottom: none;
            }

            /* The delete button floats in the card's top-right corner, so the
               first field reserves that space instead of sliding under it. */
            .tracking-table td:first-child {
                padding-right: 2.6rem;
            }

            .tracking-table td::before {
                content: attr(data-label);
                font-size: 0.7rem;
                letter-spacing: 0.06em;
                text-transform: uppercase;
                color: var(--ui-muted);
            }

            .tracking-table td:not([data-label]) {
                display: block;
            }

            .tracking-table td input,
            .tracking-table td select {
                width: 100%;
                min-width: 0;
                min-height: 40px;
                font-size: 16px;
            }

            .tracking-table td input[type="number"] {
                width: 100%;
            }

            /* Delete sits in the card's top-right corner rather than eating a
               full labelled row. */
            .tracking-table td.tracking-actions {
                position: absolute;
                top: 0.35rem;
                right: 0.5rem;
                padding: 0;
                width: auto;
            }

            .tracking-table td.tracking-actions button {
                min-width: 38px;
                min-height: 38px;
                border-radius: 10px;
            }

            .tracking-table td[data-label="Notes"] input,
            .tracking-table td[data-label="Description"] input {
                min-width: 0;
            }

            .tracking-empty {
                display: block;
                padding: 0.75rem;
            }

            /* The add-entry form is a wrapping row of fixed-width inputs on
               desktop; on a phone one field per line is the only readable
               shape. */
            .tracking-form {
                display: grid;
                grid-template-columns: 1fr;
                gap: 0.5rem;
            }

            .tracking-form input,
            .tracking-form select,
            .tracking-form textarea,
            .tracking-form button {
                width: 100%;
                min-width: 0;
                min-height: 42px;
            }

            .tracking-show-more {
                display: block;
                width: 100%;
                margin: 0.25rem 0 0.5rem;
                padding: 0.7rem 1rem;
                min-height: 44px;
                border: 1px solid var(--ui-border);
                border-radius: 12px;
                background: var(--ui-surface-2);
                color: var(--ui-text);
                font-size: 0.85rem;
                font-weight: 600;
                cursor: pointer;
            }

            /* Advisor */
            .advisor-trajectory-row {
                grid-template-columns: 1fr;
            }

            /* Health banner */
            .health-banner {
                margin-top: 8px;
                font-size: 0.82rem;
            }

            /* Modals */
            .modal-content {
                width: calc(100% - 24px) !important;
                max-height: calc(100vh - 120px);
                margin: 12px;
                border-radius: 20px;
            }

            /* Touch target minimum. Height alone was never enough: a 16px
               checkbox and an 18px "✕" both passed a height-only rule while
               being unhittable with a thumb, so width is floored too and the
               small icon buttons get real padding. */
            button, .tab, select, input[type="checkbox"] {
                min-height: 36px;
            }

            /* Text fields at 40px, and 16px text inside them: iOS Safari zooms
               the whole page when you focus a field whose font is under 16px,
               which then leaves the page scrolled sideways. */
            input, select, textarea {
                min-height: 40px;
                font-size: 16px;
            }

            input[type="range"] {
                min-height: 36px;
            }

            button, select {
                min-width: 36px;
            }

            input[type="checkbox"], input[type="radio"] {
                min-width: 20px;
                width: 20px;
                height: 20px;
            }

            /* Legibility floor: 11px. Every selector below rendered between 9
               and 10.9px on a 390px screen -- decoration-sized text carrying
               real numbers (projection units, strip labels, sync status).
               The mobile UI check fails the build if anything drops under it
               again. */
            .account-sync-pill,
            .account-flag-pill,
            .tabs-group-label,
            .phase-card .pc-index,
            .phase-card .pc-income .pc-unit,
            .projection-detail-value .pd-unit,
            .projection-detail-label,
            .stat-strip .strip-label,
            #outcome-range .strip-label,
            .advisor-quick-facts span,
            .tx-badge {
                font-size: 0.6875rem;
            }

            /* Compact in-content segmented control, not a second nav bar:
               the bottom nav is the only destination
               nav on a phone, so this switcher must read as "view options
               for this page", never as a nav bar of its own. Drop the outer
               bordered pill/card and the full-width equal-split tabs; keep
               the fleet's 36px tap floor via the tab's own min-height, and
               let unselected tabs sit as plain text on the ground -- only
               the active pane gets a filled pill (.tab.active, base rule). */
            .section-switcher {
                margin: 0 0 0.6rem;
                max-width: none;
                padding: 0;
                border: none;
                background: transparent;
                border-radius: 0;
                gap: 0.3rem;
                flex-wrap: wrap;
            }

            .section-switcher .tab {
                flex: 0 0 auto;
                min-height: 36px;
                padding: 0.3rem 0.7rem;
                font-size: 0.8125rem;
                background: transparent;
            }

            /* A review row is a question plus two answers. Side by side they
               need 342px inside a 332px card, so on a phone the question owns
               its line and the two verdict buttons share the next one. */
            .review-row {
                display: block;
            }

            .review-row .tm-cat {
                display: block;
                overflow-wrap: anywhere;
            }

            .review-actions {
                display: flex;
                flex-wrap: wrap;
                gap: 0.4rem;
                margin-top: 0.35rem;
            }

            .review-actions .tm-target-btn {
                flex: 1 1 auto;
                min-height: 40px;
            }

            /* Typical-month rows are the densest list in the app (three
               groups x up to 30 categories). On a phone the row keeps the two
               numbers that answer "where does it go" -- category and monthly
               -- plus its bar; the txns/mo + trend footnote is desktop detail
               and costs 20px x 18 rows here. */
            .tm-row {
                padding: 0.2rem 0;
                gap: 0.2rem 0.6rem;
            }

            .tm-row .tm-meta {
                display: none;
            }

            .tm-group:not(.show-all-cats) .tm-meta {
                display: none;
            }

            /* Typical-month categories: six per group on a phone, the rest
               behind a disclosure. */
            .tm-group:not(.show-all-cats) .tm-row-extra {
                display: none;
            }

            .tm-more-btn {
                display: block;
                width: 100%;
                margin: 0.35rem 0 0.25rem;
                padding: 0.55rem 0.75rem;
                min-height: 40px;
                border: 1px solid var(--ui-border);
                border-radius: 10px;
                background: var(--ui-surface-2);
                color: var(--ui-muted);
                font-size: 0.8rem;
                font-weight: 600;
                cursor: pointer;
            }

            /* Sankey legend entries are clickable filters, so they are tap
               targets, not captions. */
            .sankey-legend-item.clickable {
                min-height: 36px;
                padding-top: 0.35rem;
                padding-bottom: 0.35rem;
            }

            .transaction-item .tx-cat {
                min-height: 36px;
            }

            /* Long unbroken strings (file paths, merchant slugs, account
               labels) must wrap rather than push their card sideways. */
            .card p,
            .card li,
            .ui-muted,
            .desc,
            .tx-acct,
            .account-name,
            .no-data {
                overflow-wrap: anywhere;
            }

        }

        /* Extra small phones (iPhone SE, etc) */
        @media (max-width: 380px) {
            .app-shell {
                padding: 8px 8px calc(80px + env(safe-area-inset-bottom, 0px)) 8px;
            }

            .big-number {
                font-size: 1.5rem;
            }

            .card {
                padding: 0.8rem;
            }

            .bottom-nav-item {
                min-width: 40px;
                font-size: 0.7rem;
            }

            .bottom-nav-item svg {
                width: 20px;
                height: 20px;
            }
        }

        body {
            background: linear-gradient(180deg, #121519 0%, #0e1013 60%, #0c0e11 100%) !important;
            color: var(--ui-text);
        }

        .topbar,
        .tabs,
        .card {
            background: rgba(22, 25, 29, 0.88) !important;
            border-color: var(--ui-border) !important;
        }

        .bottom-nav {
            background: rgba(22, 25, 29, 0.94) !important;
            border-top-color: var(--ui-border) !important;
            box-shadow: 0 -14px 28px rgba(0, 0, 0, 0.34);
        }

        .quick-total-card,
        .budget-focus-card,
        .insight-item,
        .tracking-summary-item,
        .total-card,
        .report-category-item,
        .account-item,
        .merchant-item,
        .transaction-list,
        .tracking-table-wrap {
            background: var(--ui-surface-2) !important;
            border-color: var(--ui-border-soft) !important;
        }

        .quick-total-card:hover,
        .quick-total-card:focus-visible,
        .merchant-item.clickable:hover,
        .merchant-item.clickable:focus-visible,
        .account-item:hover {
            background: var(--ui-surface-3) !important;
            border-color: rgba(185, 193, 204, 0.34) !important;
        }

        .account-item.selected {
            background: var(--ui-accent-soft) !important;
        }

        input,
        select,
        textarea,
        .ui-button,
        .tx-filter-toggle,
        #tx-filters-detail button,
        #settings-btn {
            background: var(--ui-surface-2) !important;
            color: var(--ui-text) !important;
            border-color: var(--ui-border) !important;
        }

        .sync-btn:not(.nav-secondary) {
            background: var(--ui-button-primary-bg) !important;
            border: 1px solid var(--ui-button-primary-border) !important;
            color: var(--ui-button-primary-text) !important;
            box-shadow: var(--ui-button-primary-shadow);
            opacity: 1;
            transition:
                background-color 0.15s ease,
                border-color 0.15s ease,
                box-shadow 0.15s ease,
                transform 0.15s ease;
        }

        .sync-btn:not(.nav-secondary):hover {
            background: var(--ui-button-primary-bg-hover) !important;
            border-color: var(--ui-button-primary-bg-hover) !important;
            color: var(--ui-button-primary-text) !important;
            box-shadow: 0 14px 28px rgba(0, 0, 0, 0.32);
            opacity: 1;
            transform: translateY(-1px);
        }

        .sync-btn:not(.nav-secondary):focus-visible {
            background: var(--ui-button-primary-bg-hover) !important;
            border-color: var(--ui-button-primary-border) !important;
            color: var(--ui-button-primary-text) !important;
            box-shadow: var(--ui-button-primary-shadow), 0 0 0 4px var(--ui-focus);
        }

        .sync-btn:not(.nav-secondary):disabled,
        .sync-btn:not(.nav-secondary):disabled:hover {
            background: var(--ui-button-primary-disabled-bg) !important;
            border-color: var(--ui-border) !important;
            color: var(--ui-button-primary-disabled-text) !important;
            box-shadow: none;
            cursor: not-allowed;
            opacity: 1;
            transition: none;
            transform: none;
        }

        .health-banner.warning {
            background: rgba(201, 180, 135, 0.12) !important;
            color: var(--ui-warning) !important;
        }

        .health-banner.error {
            background: rgba(205, 138, 143, 0.12) !important;
            color: var(--ui-danger) !important;
        }

        @media (max-width: 768px) {
            html,
            body {
                width: 100%;
                max-width: 100%;
                overflow-x: clip;
            }

            .app-shell {
                width: 100%;
                max-width: 100%;
                padding: 12px 12px calc(84px + env(safe-area-inset-bottom, 0px)) 12px;
            }

            .topbar {
                display: grid;
                grid-template-columns: 1fr auto;
                align-items: center;
                gap: 0.75rem;
            }

            .brand {
                min-width: 0;
            }

            .topbar-actions {
                width: auto;
                justify-content: flex-end;
                flex-wrap: wrap;
            }

            .card {
                width: 100%;
                min-width: 0;
                overflow: hidden;
            }

            .big-number {
                font-size: clamp(2.1rem, 9.2vw, 2.75rem);
                line-height: 1.05;
                overflow-wrap: anywhere;
            }

            .budget-focus-grid,
            .insights-grid,
            .totals-breakdown-grid,
            .tracking-summary {
                grid-template-columns: minmax(0, 1fr) !important;
            }

            .quick-total-card,
            .budget-focus-card {
                min-width: 0;
                width: 100%;
            }

            .budget-focus-value,
            .tracking-summary-value {
                font-size: clamp(1.35rem, 8vw, 1.9rem) !important;
                overflow-wrap: anywhere;
            }

            /* Stays the biggest number in the Steer card even stacked. */
            .budget-focus-value.flex-hero-value {
                font-size: clamp(1.7rem, 9.5vw, 2.3rem) !important;
            }

            .chart-container {
                min-width: 0;
                overflow: hidden;
            }

            .advisor-table {
                display: block;
                width: 100%;
                max-width: 100%;
                overflow-x: auto;
                white-space: nowrap;
                border: 1px solid var(--ui-border-soft);
                border-radius: 12px;
            }

            .advisor-table tbody,
            .advisor-table thead,
            .advisor-table tr {
                width: max-content;
                min-width: 100%;
            }

            .bottom-nav {
                overflow-x: hidden;
                justify-content: space-between;
                scrollbar-width: none;
            }

            .bottom-nav::-webkit-scrollbar {
                display: none;
            }

            .bottom-nav-item {
                flex: 1 1 0;
                min-width: 0;
                padding: 6px 2px;
                font-size: 0.75rem;
                letter-spacing: 0;
                white-space: nowrap;
            }

            .bottom-nav-item svg {
                width: 19px;
                height: 19px;
            }

            /* Four groups instead of seven tabs (2026-08-19) retired the
               shrink-to-fit hack this rule used to be: labels were clamped
               down to ~7.4px so "Transactions" would fit a 50px item. Each
               group now owns ~97px, so the label is simply readable. */
            .bottom-nav-item span {
                display: block;
                align-self: stretch;
                max-width: 100%;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                text-align: center;
                font-size: 0.75rem;
            }
        }

        @media (max-width: 768px) {
            .advisor-answer {
                width: 100%;
                text-align: left;
            }
            .advisor-answer .aa-split {
                min-width: 0;
            }
            .advisor-answer .aa-split-value {
                font-size: 1.25rem;
            }
            .advisor-chart {
                height: 340px !important;
                min-height: 0;
            }
        }

        /* ==== Advisor mobile usability pass (2026-09-03) ====
           Everything below is scoped to <=768px (or narrower); nothing here
           changes the desktop advisor layout. */

        /* 1. Retire/sunset steppers, reachable without dragging the chart or
           opening Assumptions & levers. */
        .advisor-mobile-levers { display: none; }
        @media (max-width: 768px) {
            .advisor-mobile-levers {
                display: flex;
                flex-wrap: wrap;
                gap: 0.5rem;
                margin: 0.75rem 0;
            }
            /* flex-wrap above means a too-narrow screen stacks these instead
               of clipping the buttons -- the 140px basis only matters for
               deciding WHEN to stack, tap targets stay 40px either way. */
            .aml-lever {
                flex: 1 1 140px;
                min-width: 140px;
                display: flex;
                flex-direction: column;
                gap: 0.3rem;
                padding: 0.5rem 0.5rem;
                border: 1px solid var(--ui-border);
                border-radius: 10px;
                background: var(--ui-surface-2);
            }
            .aml-lever-label {
                font-size: 0.75rem;
                font-weight: 800;
                letter-spacing: 0.05em;
                text-transform: uppercase;
                color: var(--ui-muted);
            }
            .aml-lever-controls {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 0.3rem;
            }
            .aml-lever-btn {
                flex: 0 0 auto;
                width: 40px;
                height: 40px;
                min-width: 40px;
                min-height: 40px;
                border-radius: 8px;
                border: 1px solid var(--ui-border);
                background: var(--ui-surface-3);
                color: var(--ui-text);
                font-size: 1.15rem;
                font-weight: 700;
                line-height: 1;
                cursor: pointer;
            }
            .aml-lever-btn:active { background: var(--ui-surface); }
            .aml-lever-value {
                flex: 1 1 auto;
                min-width: 0;
                text-align: center;
                font-family: var(--ui-font-mono);
                font-size: 1.05rem;
                font-weight: 700;
                color: var(--ui-text);
            }
        }

        /* 2. "When can I go?" shows a window around the selected age on a
           phone (selecting a row still works everywhere); desktop keeps
           every row with no toggle at all. */
        .rw-toggle-btn {
            display: none;
            width: 100%;
            margin-top: 0.5rem;
            padding: 0.6rem 1rem;
            min-height: 40px;
            border-radius: 10px;
            border: 1px solid var(--ui-border);
            background: var(--ui-surface-2);
            color: var(--ui-text);
            font-size: 0.85rem;
            font-weight: 700;
            cursor: pointer;
        }
        @media (max-width: 768px) {
            .rw-toggle-btn:not([hidden]) { display: block; }
            #retire-when:not(.rw-show-all) tbody tr.rw-extra { display: none; }
        }

        /* 3. "Selected" is a text pill at every width (the desktop dot it
           replaced read as a stray character). */
        .rw-selected-badge { display: inline-block; }
        @media (max-width: 560px) {
            .rw-selected-badge {
                align-self: flex-start;
                margin-top: 0.15rem;
                padding: 0.05rem 0.45rem;
                border-radius: 999px;
                font-size: 0.72rem;
                font-weight: 800;
                letter-spacing: 0.05em;
                text-transform: uppercase;
                background: var(--ui-accent);
                color: #0b0f14;
                vertical-align: middle;
            }
        }

        /* 4. A section label and its trailing note run into the card's right
           edge at phone widths; stack them instead of squeezing both onto one
           line. The card's own padding still applies -- only the head's own
           flex axis changes. */
        @media (max-width: 600px) {
            .adv-section-head {
                flex-direction: column;
                align-items: flex-start;
                gap: 0.25rem;
            }
        }

        /* 5. Outcome range / Roth conversion window collapse behind their own
           header on a phone, which already carries the section's one-line
           note (the adv-section-head moved into <summary>). Desktop forces
           the body open regardless of the details' [open] attribute, so nothing
           there changes -- this needs no new JS state. */
        .adv-collapsible > summary {
            cursor: pointer;
            list-style: none;
        }
        .adv-collapsible > summary::-webkit-details-marker { display: none; }
        @media (max-width: 768px) {
            .adv-collapsible > summary {
                position: relative;
                padding-right: 1.1rem;
            }
            .adv-collapsible > summary::after {
                content: '▸';
                position: absolute;
                right: 0;
                top: 0;
                color: var(--ui-muted);
            }
            .adv-collapsible[open] > summary::after { content: '▾'; }
        }
        @media (min-width: 769px) {
            .adv-collapsible-body { display: block !important; }
            .adv-collapsible > summary { cursor: default; }
        }

        /* 5b. Spending's "Typical month" card is four stacked analyses under
           one headline; at 320px that was 8,459px of scroll and the only view
           still failing the fleet height cap. The ranked levers, recurring,
           true expenses and label review collapse behind their own headings on
           a phone -- the hero and the monthly-average table, which are the
           answer to "where does the money go", stay open. Desktop forces every
           body open, so nothing there changes and no new JS state exists. */
        .tm-collapsible > summary {
            cursor: pointer;
            list-style: none;
        }
        .tm-collapsible > summary::-webkit-details-marker { display: none; }
        .tm-h4 {
            font-size: 0.95rem;
            font-weight: 700;
            color: var(--ui-text);
            margin: 1rem 0 0.5rem;
        }
        .tm-collapsible:first-child > .tm-h4 { margin-top: 0; }
        @media (max-width: 768px) {
            .tm-collapsible > summary {
                position: relative;
                padding: 0.5rem 1.1rem 0.5rem 0;
                min-height: 36px;
            }
            .tm-collapsible > summary::after {
                content: '\u25B8';
                position: absolute;
                right: 0;
                top: 0.5rem;
                color: var(--ui-muted);
            }
            .tm-collapsible[open] > summary::after { content: '\u25BE'; }
        }
        @media (min-width: 769px) {
            .tm-collapsible-body { display: block !important; }
            .tm-collapsible > summary { cursor: default; }
        }

        /* 6. Fixed-width grids sized for a desktop card. */
        @media (max-width: 600px) {
            .advisor-mix-row {
                grid-template-columns: 1fr;
                gap: 0.3rem;
            }
            .advisor-mix-target {
                grid-column: 1 / -1;
            }
            .advisor-answer .aa-split {
                min-width: 100%;
            }
        }

        /* 7. iOS Safari zooms the whole page on focus below 16px text; every
           advisor form field clears that floor on a phone. */
        @media (max-width: 768px) {
            .advisor-input input,
            .advisor-input select,
            .advisor-chat textarea {
                font-size: 16px;
            }
        }

        /* ==== Advisor polish (2026-09-06) ====
           Three type sizes (eyebrow 11px, body 13px, stat 28px/24px), one
           accent, spacing on an 8px grid. Scoped to #advisor so the sidebar
           and every other tab are untouched; these override the older
           advisor rules above rather than rewriting them. */
        #advisor {
            --adv-eyebrow: 11px;
            --adv-body: 13px;
            --adv-stat: 28px;
        }
        @media (max-width: 560px) {
            #advisor { --adv-stat: 24px; }
        }
        /* Eyebrow: every section starts with this. */
        #advisor .adv-eyebrow,
        #advisor .advisor-title,
        #advisor .card .adv-section-head h3,
        #advisor .phase-card .pc-index,
        #advisor .aa-phase-w,
        #advisor .retire-when th,
        #advisor .advisor-assumptions > summary,
        #advisor .advisor-assumptions h3 {
            margin: 0;
            font-family: inherit;
            font-size: var(--adv-eyebrow);
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: var(--ui-muted);
            line-height: 16px;
        }
        /* Body: everything that is not an eyebrow or a stat. */
        #advisor .aa-label,
        #advisor .aa-assume,
        #advisor .advisor-details-body,
        #advisor .adv-more > summary,
        #advisor .adv-caption,
        #advisor .adv-section-note,
        #advisor .adv-alert,
        #advisor .proj-legend .pl-item,
        #advisor .advisor-quick-facts span,
        #advisor .retire-when,
        #advisor .retire-when td,
        #advisor .retire-when .rw-note,
        #advisor .rw-toggle-btn,
        #advisor .phase-card .pc-label,
        #advisor .phase-card .pc-split,
        #advisor .phase-card .pc-source,
        #advisor .phase-card .pc-gap-note,
        #advisor .r55-line,
        #advisor .r55-x-acct,
        #advisor .r55-x-amt,
        #advisor .r55-x-why,
        #advisor .advisor-phases > p {
            font-size: var(--adv-body);
            line-height: 20px;
        }

        /* (1) Decision header. */
        #advisor .advisor-head { display: flex; flex-direction: column; gap: 8px; }
        #advisor .advisor-answer { width: 100%; text-align: left; }
        #advisor .aa-label {
            font-weight: 600;
            text-transform: none;
            letter-spacing: 0;
            color: var(--ui-text);
        }
        #advisor .aa-phases {
            margin: 8px 0 0;
            display: grid;
            /* Equal columns that wrap instead of clipping: 104px is what the
               widest compact figure ("$228.6K" at 24px mono) needs at 390px. */
            grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
            justify-content: start;
            align-items: start;
            column-gap: 16px;
            row-gap: 16px;
            max-width: 560px;
        }
        /* The tone lives in the verdict line, not the numbers: amber on all
           three stats made "overfunded" the loudest thing on the page. A real
           blocker (bridge gap) still paints them. */
        #advisor .aa-phases.aa-warn .aa-phase-v { color: var(--ui-text); }
        #advisor .aa-phase { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
        #advisor .aa-phase-v,
        #advisor .aa-value {
            font-size: var(--adv-stat);
            font-weight: 700;
            line-height: 32px;
            letter-spacing: -0.01em;
            text-align: left;
            font-variant-numeric: tabular-nums;
        }
        #advisor .aa-phase-w { white-space: normal; text-align: left; }
        #advisor .aa-assume { margin-top: 8px; color: var(--ui-muted); }
        #advisor .aa-assume .aa-verdict { display: inline; margin: 0; font-size: inherit; line-height: inherit; }
        #advisor .advisor-details { margin: 0; }
        #advisor .adv-more > summary { padding: 8px 0; min-height: 36px; display: flex; align-items: center; }
        #advisor .advisor-details-body { color: var(--ui-muted); }
        #advisor .advisor-details-body p,
        #advisor .advisor-details-body .aa-status,
        #advisor .advisor-details-body .aa-taxnote { margin: 0 0 4px; font-weight: 400; font-size: inherit; line-height: inherit; }
        #advisor .advisor-details-body .aa-status::before { display: none; }
        #advisor .advisor-details-body .aa-taxnote { color: var(--ui-muted); }
        #advisor .advisor-facts, #advisor .advisor-replay-facts { margin: 0; }
        #advisor .advisor-facts > div, #advisor .advisor-replay-facts > div {
            display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
            gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--ui-border);
        }
        #advisor .advisor-facts dd, #advisor .advisor-replay-facts dd {
            margin: 0; color: var(--ui-text); text-align: right;
            font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
        }
        #advisor .advisor-facts small { display: block; color: var(--ui-muted); font-size: 12px; }
        #advisor .advisor-method-note { max-width: 65ch; padding-top: 8px; }
        #advisor .adv-alert { margin-top: 16px; border-radius: 8px; }
        #advisor .advisor-mobile-levers { margin: 16px 0 0; }

        /* (2) Chart: one segmented legend row above, caption + inputs strip below. */
        #advisor .adv-chart-block { margin-top: 24px; }
        #advisor .proj-legend {
            display: flex;
            flex-wrap: wrap;
            gap: 1px;
            width: fit-content;
            max-width: 100%;
            margin: 0 0 16px;
            padding: 0;
            border: 1px solid var(--ui-border);
            border-radius: 8px;
            background: var(--ui-border);
            overflow: hidden;
        }
        #advisor .proj-legend .pl-item {
            flex: 1 0 auto;
            justify-content: center;
            gap: 8px;
            min-height: 36px;
            padding: 0 12px;
            border: 0;
            border-radius: 0;
            background: var(--ui-surface-2);
            color: var(--ui-muted);
            font-weight: 600;
        }
        #advisor .proj-legend .pl-item:hover { background: var(--ui-surface-3); }
        #advisor .proj-legend .pl-item.is-on { background: var(--ui-surface-3); color: var(--ui-text); }
        #advisor .proj-legend .pl-item:focus-visible { outline-offset: -2px; }
        #advisor .proj-legend .pl-value { font-weight: 600; }
        #advisor .adv-caption { margin: 8px 0 0; color: var(--ui-muted); max-width: 75ch; }
        #advisor .adv-inputs-strip { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
        #advisor .advisor-quick-facts { display: flex; flex-wrap: wrap; margin: 0; gap: 8px; }
        #advisor .advisor-quick-facts span {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            min-height: 32px;
            padding: 0 12px;
            border: 1px solid var(--ui-border);
            border-radius: 8px;
            background: var(--ui-surface-2);
            color: var(--ui-muted);
            white-space: nowrap;
        }
        #advisor .advisor-quick-facts span.qf-warn { border-color: rgba(201, 180, 135, 0.35); color: var(--ui-warning); }
        #advisor .advisor-quick-facts strong { font-weight: 600; }
        #advisor .qf-prov {
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            padding: 1px 5px;
            border-radius: 999px;
            margin-left: 6px;
            border: 1px solid var(--ui-border-soft);
            color: var(--ui-muted);
        }
        #advisor .qf-prov-measured { color: var(--ui-success); border-color: rgba(127, 168, 145, 0.3); }
        #advisor .qf-prov-override { color: var(--ui-warning, #c9b487); }
        @media (max-width: 768px) {
            /* A phone cannot fit "Spend basis: $313.4K/yr from 10.2mo" on one
               line; let a chip wrap rather than clip at the card edge. */
            #advisor .advisor-quick-facts span { white-space: normal; padding: 6px 12px; line-height: 18px; }
        }

        /* Sections: 24px between, 16px inside, one head style. */
        #advisor .adv-section { margin-top: 24px; padding-top: 16px; }
        #advisor .adv-section-head { margin: 0 0 8px; gap: 8px 16px; }
        #advisor .adv-section-note { font-family: inherit; color: var(--ui-muted); }
        #advisor .adv-section-head + .adv-caption { margin: 0 0 16px; }

        /* (3) When can I go: a real table, numbers right, selected row lit. */
        #advisor .retire-when th {
            padding: 0 12px 8px;
            border-bottom: 1px solid var(--ui-border);
            text-align: right;
        }
        #advisor .retire-when td {
            padding: 8px 12px;
            text-align: right;
            font-variant-numeric: tabular-nums;
        }
        #advisor .retire-when th:first-child,
        #advisor .retire-when td:first-child { text-align: left; }
        #advisor .retire-when .rw-age { font-weight: 600; }
        #advisor .retire-when .rw-bridge { font-weight: 600; }
        #advisor .retire-when tr.is-current td { background: var(--ui-surface-3); }
        #advisor .retire-when tr.is-current td:first-child { box-shadow: inset 3px 0 0 var(--ui-accent); }
        #advisor .rw-selected-badge {
            margin: 0 0 0 8px;
            padding: 0 8px;
            border-radius: 999px;
            font-size: var(--adv-eyebrow);
            font-weight: 700;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            line-height: 18px;
            background: var(--ui-accent);
            color: #0b0f14;
            vertical-align: middle;
        }
        #advisor .retire-when .rw-note {
            font-family: inherit;
            color: var(--ui-muted);
            text-align: left;
            white-space: normal;
            padding-top: 12px;
            border-top: 1px solid var(--ui-border);
        }
        #advisor .rw-toggle-btn { margin-top: 8px; border-radius: 8px; font-weight: 600; }
        @media (max-width: 560px) {
            #advisor .retire-when tbody tr { gap: 4px 16px; border-radius: 8px; padding: 8px 12px; margin: 0 0 8px; }
            #advisor .retire-when tr.is-current td:first-child { box-shadow: none; }
            #advisor .retire-when td.rw-age { font-size: var(--adv-body); }
            #advisor .retire-when td[data-label]::before { font-size: var(--adv-eyebrow); letter-spacing: 0.08em; }
            #advisor .retire-when tfoot tr { display: block; padding: 0; }
            #advisor .retire-when .rw-note { border-top: 0; padding-top: 0; }
        }

        /* (4) Rule of 55 + life phases: two cards side by side, stacked on a phone. */
        #advisor .adv-duo {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
            gap: 16px;
            align-items: start;
            margin-top: 24px;
        }
        #advisor .adv-duo > .adv-section {
            margin-top: 0;
            padding: 16px;
            border: 1px solid var(--ui-border);
            border-radius: 12px;
            background: var(--ui-surface-2);
            min-width: 0;
        }
        #advisor .adv-duo .advisor-phases {
            grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
            gap: 8px;
        }
        #advisor .phase-card {
            display: flex;
            flex-direction: column;
            gap: 4px;
            padding: 12px;
            border: 1px solid var(--ui-border);
            border-top-color: var(--ui-border);
            border-radius: 8px;
            background: var(--ui-surface);
        }
        #advisor .phase-card:hover { background: var(--ui-surface-3); }
        #advisor .phase-card.is-active { border-color: var(--ui-accent); background: var(--ui-surface-3); }
        #advisor .phase-card.is-active .pc-index { color: var(--ui-accent); }
        #advisor .phase-card .pc-label { font-weight: 600; color: var(--ui-text); }
        #advisor .phase-card .pc-income {
            margin-top: 4px;
            font-size: var(--adv-stat);
            font-weight: 700;
            line-height: 32px;
            font-variant-numeric: tabular-nums;
        }
        #advisor .phase-card .pc-income .pc-unit {
            margin-left: 4px;
            font-size: var(--adv-eyebrow);
            font-weight: 600;
            letter-spacing: 0.04em;
        }
        #advisor .phase-card .pc-split,
        #advisor .phase-card .pc-source,
        #advisor .phase-card .pc-gap-note { margin: 0; color: var(--ui-muted); }
        #advisor .phase-card .pc-gap-note { color: var(--ui-danger); font-weight: 600; }
        #advisor .r55-line { margin: 0 0 8px; }
        #advisor .r55-excluded { gap: 8px; }
        #advisor .r55-excluded li {
            padding: 8px 12px;
            gap: 4px 8px;
            border-radius: 8px;
            background: var(--ui-surface);
        }
        #advisor .r55-x-acct { font-weight: 600; }
        #advisor .r55-x-why { line-height: 18px; }

        /* Assumptions & levers: same eyebrow, still a 36px tap target. */
        #advisor .advisor-assumptions { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--ui-border-soft); }
        #advisor .advisor-assumptions > summary { display: flex; align-items: center; min-height: 36px; padding: 0; cursor: pointer; }
        #advisor .advisor-assumptions[open] > summary { color: var(--ui-text); }
        #advisor .advisor-assumptions h3 { margin: 24px 0 8px; }
        #advisor .advisor-inputs { gap: 16px 16px; }

        /* Tax year projection card (Tax tab, first card). Reuses .card/.big-number;
           these rules only add what is specific to this one card. */

        #advisor-model-status:empty { display:none; }
        #advisor-model-status { font-size:12px; max-width:75ch; }
        #advisor[data-model-state="error"] #advisor-answer,
        #advisor[data-model-state="error"] .advisor-details,
        #advisor[data-model-state="error"] .adv-chart-block,
        #advisor[data-model-state="error"] .adv-section,
        #advisor[data-model-state="error"] #advisor-alert { display:none; }
        #tax-records > summary { min-height:40px; padding:10px 0; cursor:pointer; }
        /* Panel focus moves the reading position; interactive controls retain rings. */
        .tab-content:focus { outline:none; }
        @media(max-width:900px) {
            body:has(#projection-form:focus-within) .bottom-nav { display:none; }
        }
        .projection-heading, .projection-actions, .projection-history { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
        .projection-heading { justify-content:space-between; }
        .projection-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; margin:20px 0; }
        .projection-metrics .big-number { font-size:clamp(20px,3vw,32px); overflow-wrap:anywhere; }
        .projection-number { font:600 24px var(--ui-font-mono); }
        .projection-metrics .is-due { color:var(--ui-warning); }
        #tax-projection-card details { border-top:1px solid var(--ui-border); padding:10px 0; }
        #tax-projection-card summary { min-height:36px; cursor:pointer; padding:8px 0; }
        .projection-form { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; padding:12px 0; }
        .projection-form label { display:flex; flex-direction:column; gap:8px; color:var(--ui-muted); font-size:12px; }
        #tax-projection-card input, #tax-projection-card select, #tax-projection-card button { background:var(--ui-surface); color:var(--ui-text); border:1px solid var(--ui-border); border-radius:8px; min-height:40px; padding:8px 12px; font:inherit; max-width:100%; min-width:0; }
        .projection-actions { grid-column:1/-1; }
        .projection-scenarios { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
        .projection-scenario { padding:12px; border:1px solid var(--ui-border); border-radius:8px; }
        .projection-scenario .tax-year-row { flex-wrap:wrap; margin-top:10px; }
        #projection-source-inputs .tax-year-row { gap:20px; margin:8px 0; }
        #projection-source-inputs .tax-year-row-value { overflow-wrap:anywhere; min-width:0; }
        #projection-warnings { max-width:75ch; padding-left:20px; color:var(--ui-muted); font-size:12px; }
        #projection-warnings li { margin:8px 0; }
        .projection-history { border-top:1px solid var(--ui-border); padding-top:12px; font-size:12px; }
        #projection-status, #projection-freshness { font-size:12px; max-width:75ch; }
        @media(max-width:700px) { .projection-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); } .projection-scenarios, .projection-form { grid-template-columns:1fr; } .projection-number { font-size:22px; } }

        .tax-year-headline.is-due { color: var(--ui-warning); }
        .tax-year-headline-label { margin-top: 2px; }
        .tax-year-rows { margin-top: 1rem; display: flex; flex-direction: column; gap: 0.5rem; }
        .tax-year-row {
            display: flex;
            justify-content: space-between;
            align-items: baseline;
            gap: 0.75rem;
            font-size: 0.85rem;
        }
        .tax-year-row-label { color: var(--ui-muted); }
        .tax-year-row-value {
            font-family: var(--ui-font-mono);
            color: var(--ui-text);
            text-align: right;
        }
        .tax-year-row-value.is-warn { color: var(--ui-warning); }
        .tax-year-whatif {
            margin-top: 1rem;
            padding-top: 0.85rem;
            border-top: 1px solid var(--ui-border-soft, var(--ui-border));
        }
        .tax-year-whatif label {
            display: block;
            font-size: 0.8rem;
            color: var(--ui-muted);
            margin-bottom: 0.35rem;
        }
        .tax-year-whatif input {
            width: 100%;
            min-height: 36px;
            font-size: 16px;
            font-family: var(--ui-font-mono);
            color: var(--ui-text);
            background: var(--ui-surface-2);
            border: 1px solid var(--ui-border);
            border-radius: 6px;
            padding: 0.4rem 0.6rem;
            box-sizing: border-box;
        }
        .tax-year-whatif-result {
            margin-top: 0.5rem;
            font-size: 0.85rem;
            min-height: 1.2em;
        }
        .tax-year-whatif-result .tax-year-row-value { font-size: 0.85rem; }

/* Net worth card: cards, then controls, then chart. The compact Totals/Assets/Debts cards
   ARE the total selector -- clicking one highlights it (filled, like a
   selected pill) and drives the chart -- so the old big-number header and
   the Components pill row are both gone; the period + project-ahead pills
   share one row below the cards; the chart takes whatever room is left. */
.qt-cards-wrap { margin: 0 0 .25rem; }
.qt-group-label {
    font-size: 11px;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ui-muted);
    margin: .4rem 0 .2rem;
}

.qt-group-label:first-child { margin-top: 0; }
/* One shared column count for Totals/Assets/Debts (assets and debts each get
   their own line) so the 4 Asset and 3 Debt cards line up
   under the 6 Totals cards above them instead of stretching to fill a row of
   their own; unused columns just stay empty. */
.qt-cards-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .3rem; }

/* Each card is a pill: value + delta live here always (independent of
   selection), the active one is filled solid like a selected range-btn.
   role="button" (not <button>) because it nests a real jump button --
   two native buttons cannot nest. */
.qt-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1px;
    min-height: 64px;
    padding: 6px 8px;
    border: 1px solid var(--ui-border);
    border-radius: 10px;
    background: var(--ui-surface);
    cursor: pointer;
    text-align: left;
}
.qt-card:hover { border-color: rgba(185, 193, 204, 0.34); }
.qt-card:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 2px; }
.qt-card-label { font-size: 11px; color: var(--ui-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qt-card-value { font-family: var(--ui-font-mono); font-weight: 700; font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qt-card-metric { display: flex; flex-wrap: wrap; column-gap: 2px; align-content: center; min-height: 16px; color: var(--ui-muted); }
.qt-card-metric .qt-metric-label { font-family: var(--ui-font-sans); white-space: nowrap; }
.qt-card-metric .qt-metric-value { font-family: var(--ui-font-mono); white-space: nowrap; }
.qt-card-metric.positive .qt-metric-value { color: var(--ui-success); }
.qt-card-metric.negative .qt-metric-value { color: var(--ui-danger); }
.qt-card.is-active { background: var(--ui-accent-soft); border-color: rgba(185, 193, 204, 0.24); }
.qt-card.is-active .qt-card-label,
.qt-card.is-active .qt-card-value { color: var(--ui-accent-strong); }
.qt-card.is-active .qt-card-delta:not(.positive):not(.negative) { color: var(--ui-accent-strong); }
/* Selecting a total highlights what it's made of -- assets green, debts red
   -- reusing the chart's own asset/liability tint. Border COLOR only (the
   1px width is already reserved on every card), so this never shifts
   layout. */
.qt-card.is-asset-member { border-color: rgba(127, 168, 145, 0.5); background: rgba(127, 168, 145, 0.08); }
.qt-card.is-debt-member { border-color: rgba(205, 138, 143, 0.5); background: rgba(205, 138, 143, 0.08); }
/* The jump-to-accounts affordance: out of the way until hovered/focused so
   it never competes with the value it sits on top of. */
.qt-card-jump {
    position: absolute;
    top: 2px;
    right: 2px;
    padding: 2px 3px;
    font-size: 10px;
    line-height: 1;
    border: 0;
    background: transparent;
    color: inherit;
    opacity: 0;
    cursor: pointer;
}
.qt-card-cell { position: relative; min-width: 0; display: flex; }
.qt-card-cell > .qt-card { flex: 1; min-width: 0; }
.qt-card-cell:hover .qt-card-jump,
.qt-card-cell:focus-within .qt-card-jump,
.qt-card-jump:focus-visible { opacity: .8; }
.qt-card.is-active + .qt-card-jump { color: var(--ui-accent-strong); }

@media (max-width: 768px) {
    /* 4 columns, not 3: Totals (6) still wraps to 2 rows either way, but
       Assets (4) drops from 2 rows to exactly 1 -- one fewer row height in
       a budget that has none to spare (the no-scroll rule covers phone too).
       Cards go to 2 lines (label, then value +
       delta together) instead of 3 -- ~52px tall including padding. */
    .qt-cards-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
    .qt-card {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        column-gap: 4px;
        align-items: baseline;
        min-height: 0;
        padding: 4px 6px;
        line-height: 1.2;
    }
    .qt-card-label { grid-column: 1 / -1; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    /* Value and delta stack: side by side, real 7-digit balances collided
       ("$1.$87.5K") in a quarter-width card (live check, 2026-09-18). */
    .qt-card-value { grid-column: 1 / -1; font-size: .74rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .qt-card-delta { grid-column: 1 / -1; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; justify-self: start; }
    .qt-card-jump { display: none; }
    .qt-group-label { margin: .15rem 0 .05rem; }
    /* Caption sits inline-left of its pill row instead of above it -- one
       fewer line per control. */
    .nw-control-row { gap: .08rem .4rem; margin: .08rem 0; }
    .nw-control { flex-direction: row; align-items: center; flex-wrap: wrap; gap: .3rem; }
    .nw-control .qt-group-label { flex: none; margin: 0; white-space: nowrap; }
    .nw-pill-row { gap: .2rem; }
    /* min-height 36px (not the app's usual 44px range-btn floor) -- still
       the fleet's stated tap-target minimum. border-radius shrinks from the
       999px capsule to a compact rounded rect: at 36px square (a global
       `button{min-width:36px}` mobile rule floors every pill's width too)
       a 999px radius reads as a circle, not a pill. */
    .nw-pill-row .range-btn { padding: .2rem .4rem; font-size: .68rem; min-height: 36px; border-radius: 8px; }
    .nw-chart-caption { font-size: .68rem; margin-bottom: .04rem; min-height: .95rem; }

    /* Keep every history range reachable on a phone. The row wraps at the
       36px tap floor; its height stays stable when the selection changes. */
    /* Project ahead: Off/5Y/10Y/30Y -- the horizons actually looked at;
       1Y/3Y/20Y stay desktop-only. */
    #nw-project .range-btn[data-value="1"],
    #nw-project .range-btn[data-value="3"],
    #nw-project .range-btn[data-value="20"] {
        display: none;
    }
}

/* The Net worth card's no-scroll budget on phone depends on the chrome
   ABOVE it too: the re-auth banner and needs-you
   chips used to stack to 2-3 lines each -- 280px+ before the card even
   starts. Collapsed to one row each: text truncates with an ellipsis,
   action buttons stay >=36px tap targets, and a chip that does not fit
   is clipped rather than wrapped (no horizontal scroll, per house style). */
/* Full/short text swap (banner message, CTA, dismiss button): the phone
   banner shows the short variant and lets long institution names wrap.
   Buttons keep complete labels (no ellipsis-cut button labels). Desktop
   shows the full sentence/label it always has. */
.banner-msg-short, .banner-cta-short, .dismiss-short { display: none; }
@media (max-width: 768px) {
    .health-banner {
        /* !important: showHealthBanner()/renderHealthBanner() set an inline
           style.display to show/hide the banner, which otherwise beats any
           stylesheet rule here. */
        display: flex !important;
        align-items: center;
        flex-wrap: nowrap;
        gap: .5rem;
        padding: 6px 10px;
    }
    .health-banner .banner-text {
        flex: 1 1 auto;
        min-width: 0;
        white-space: normal;
        margin: 0;
    }
    .health-banner .banner-actions {
        flex: none;
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: .3rem;
        margin: 0;
    }
    .health-banner .banner-cta {
        white-space: nowrap;
        padding: 0 8px;
        min-height: 36px;
        display: inline-flex;
        align-items: center;
    }
    .health-banner .sync-dismiss-btn {
        min-width: 36px;
        padding: 0 8px;
    }
    .banner-msg-full, .banner-cta-full, .dismiss-full { display: none; }
    .banner-msg-short, .banner-cta-short, .dismiss-short { display: inline; }
    .needs-you-chip {
        flex: 0 1 auto;
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 42vw;
    }
}

/* Period + Project ahead share one row now that the cards above are the
   total selector -- each a fixed block, so selecting a pill never resizes
   it or moves the chart. */
.nw-control-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: .4rem .75rem; margin: .4rem 0; }
.nw-control { display: flex; flex-direction: column; gap: .4rem; min-width: 0; margin: 0; }
.nw-pill-row { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
@media (min-width: 769px) { .nw-pill-row .range-btn { min-height: 32px; } }

/* One line above the chart: selected total, period delta, projection
   target. Fixed min-height reserves its space so turning a projection on
   never shifts the chart below it. */
.nw-chart-caption {
    min-height: 1.1rem;
    margin-bottom: .25rem;
    font-size: .78rem;
    font-family: var(--ui-font-mono);
    color: var(--ui-muted);
    overflow-wrap: anywhere;
}
.nw-chart-caption.positive { color: var(--ui-success); }
.nw-chart-caption.negative { color: var(--ui-danger); }
.nw-chart-empty {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 1rem;
    color: var(--ui-muted);
    font-size: 12px;
    text-align: center;
}
.nw-chart-empty[hidden] { display: none; }

/* Overview, desktop (>= 769px): the whole page is bound to the viewport
   with flex, not a JS pixel guess. body only gets this treatment while
   #overview is the active pane (:has() scoping) -- every other tab
   (Accounts list, Budget, etc.) keeps ordinary document flow and its own,
   legitimate page scroll (an account list is a legitimate list). Inside that
   bound, everything above the chart keeps
   its natural height (flex-shrink:0) and the chart region is the one item
   that grows to fill whatever is left -- the chart canvas already fills
   its .chart-container at height:100% (see the comment above the
   .chart-container canvas rule), so the whole chain from viewport down to
   pixels has no hardcoded number in it. min-height is a floor only, for a
   window too short to fit the cards at all; it is not expected to bind
   at 1920x1080 or 990x1050. */
@media (min-width: 769px) {
    body:has(#overview.tab-content.active) {
        height: 100dvh;
        overflow-y: auto;
    }
    body:has(#overview.tab-content.active) .app-shell {
        height: 100%;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }
    body:has(#overview.tab-content.active) .app-shell > #health-banner,
    body:has(#overview.tab-content.active) .app-shell > #pull-refresh-indicator,
    body:has(#overview.tab-content.active) nav.tabs {
        flex: 0 0 auto;
    }
    body:has(#overview.tab-content.active) .page {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow: visible;
    }
    body:has(#overview.tab-content.active) .page > .section-switcher {
        flex: 0 0 auto;
    }
    #overview.tab-content.active {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
    }
    #overview .dashboard-grid {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        flex: 1 1 auto;
        min-height: 0;
    }
    #net-worth-card {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: min-content;
    }
    #net-worth-card .qt-cards-wrap,
    #net-worth-card .nw-control-row,
    #net-worth-card .nw-chart-caption {
        flex: 0 0 auto;
    }
    #net-worth-card .chart-container {
        flex: 1 1 auto;
        height: auto;
        min-height: 200px;
    }
}

/* Budget: detected recurring charges beside the hand-tracked bills. */
.recurring-split { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.25rem; }
@media (max-width:768px) { .recurring-split { grid-template-columns:1fr; gap:1rem; } }

/* Income: top merchants use the full row, several per line on a desktop. */
.merchant-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:.5rem; }
.merchant-grid .merchant-item { margin:0; }

/* Tracking ledgers: one headline number above each form. */
.tracking-headline { margin:.5rem 0 1rem; }

#last-sync.is-stale { color:var(--ui-warning); }

/* Accounts pane header (title + Source audit chip) stays pinned while the
   account list below it scrolls -- a long list is a legitimate scroll
   but the header/totals should not scroll away with it. top:76px clears the sticky .tabs bar (top:12px, ~61px tall); phone
   has no .tabs (bottom-nav instead), so it sticks to the very top there. */
.accounts-header-card { position: sticky; top: 76px; z-index: 15; background: var(--ui-surface); }
@media (max-width: 768px) { .accounts-header-card { top: 0; } }

/* Phone chrome budget (2026-09-18): banner, slim top bar and section
   switcher took 236px above the Overview card and left the chart 59px at
   390x844 (20px at 320x568). Tighten the chrome, not the data. `body`
   prefix: several older phone rules above set these at equal specificity.
   Also the mobile gate's floors: 11px text on card deltas / pills, 36px
   taps on budget rows. */
@media (max-width: 768px) {
    body .app-shell { padding-top: 8px; }
    body .health-banner { margin-bottom: 8px; }
    body nav.tabs { padding: 4px 8px; margin-bottom: 8px; top: 4px; }
    body .section-switcher { margin-bottom: 8px; }
    body #net-worth-card { margin-top: 0; }
    body .qt-card-delta,
    body #net-worth-card .range-btn { font-size: 11px; }
    body .tm-row.bt-row { min-height: 36px; }
}

/* The Accounts header is pinned (sticky top 76px desktop / 0 phone, ~90px
   tall); jumps and scrollIntoView to a section must land below it, not
   under it (2026-09-18). */
#accounts [id^="account-section-"] { scroll-margin-top: 180px; }
@media (max-width: 768px) { #accounts [id^="account-section-"] { scroll-margin-top: 104px; } }

/* Product reading hierarchy: shared font families, a small type scale,
   comfortable controls, and intentional disclosure instead of dense forms. */
body { background: var(--ui-bg); font-size: 14px; line-height: 1.5; }
body .app-shell { max-width: 1440px; padding: 20px 24px; }
body .card { padding: 20px 24px; border: 1px solid var(--ui-border); border-radius: 14px; box-shadow: none; }
body .card h3, body .advisor-title { font-size: 16px; font-weight: 600; line-height: 1.4; letter-spacing: 0; text-transform: none; color: var(--ui-text); }
body .card h3 { margin-bottom: 16px; }
body .card h4 { font-size: 14px; letter-spacing: 0; text-transform: none; }
body button, body input, body select, body textarea { font-family: var(--ui-font-sans); }
body .range-btn, body .icon-btn, body .nav-section { box-shadow: none; }
body .range-btn { min-height: 36px; font-size: 12px; }
body .section-switcher { border: 0; background: transparent; box-shadow: none; padding: 0; margin: 16px 0; gap: 8px; }
body .section-switcher .tab { border-radius: 8px; min-height: 40px; padding: 8px 16px; font-size: 14px; box-shadow: none; }
body nav.tabs { border-radius: 12px; box-shadow: none; }
body .health-banner { padding: 10px 14px; border-radius: 10px; font-weight: 500; font-size: 13px; }
body .health-banner .banner-actions { margin-top: 4px; }
body .health-banner button, body .health-banner a { font: 500 12px var(--ui-font-sans); min-height: 36px; }
body .qt-group-label { font-size: 12px; font-weight: 600; text-transform: none; letter-spacing: 0; margin: 10px 0 6px; line-height: 1.3; }
body .qt-group-label:first-child { margin-top: 0; }
body .qt-cards-grid { gap: 8px; }
body .qt-card { padding: 8px 12px; gap: 1px; border-radius: 8px; line-height: 1.3; }
body .qt-card-label { font-size: 12px; white-space: normal; overflow: visible; text-overflow: clip; }
body .qt-card-value { font-size: 17px; font-weight: 600; }
body .qt-card-delta { font-size: 12px; }
body .qt-card-monthly, body .qt-card-projection { font-size: 11px; line-height: 16px; }
body .qt-card-projection { min-height: 16px; }
body .nw-control-row { margin: 12px 0 8px; gap: 12px; }
body .nw-control .qt-group-label { margin: 0; }
body .nw-control { gap: 6px; }
body .nw-chart-caption { font: 500 12px/1.5 var(--ui-font-sans); min-height: 20px; margin: 0; }
.nw-projection-readout { flex: 0 0 auto; min-height: 52px; padding: 4px 0; font-size: 12px; color: var(--ui-muted); }
.nw-projection-readout:has(#nw-projection-basis:empty) { display: none; }
.nw-projection-details summary { min-height: 36px; display: flex; align-items: center; cursor: pointer; color: var(--ui-text); }
.nw-projection-details summary::after { content: ' +'; margin-left: 8px; }
.nw-projection-details[open] summary::after { content: ' −'; }
.nw-projection-details p { max-width: 75ch; margin: 4px 0 12px; }
body:has(.nw-projection-details[open]) { overflow-y: auto; }
body:has(.nw-projection-details[open]) .page { overflow: visible; }
body:has(.nw-projection-details[open]) #net-worth-card { min-height: min-content; }
body .tx-filter-toggle { display: inline-flex !important; align-items: center; min-height: 40px; font-size: 14px !important; }
body .tx-filters-detail:not([open]) { display: none; }
body .tx-filters-wrap { width: 100%; }
body #tx-search { min-height: 44px; font-size: 16px; }
body #transactions .report-split { gap: 16px; }
body #tx-filters-detail .mobile-stack { padding: 12px; border: 1px solid var(--ui-border); border-radius: 8px; }
body #tx-edit-panel { min-height: 80px; padding: 8px 0; }
body .tx-edit-actions { justify-content: flex-end; }
body .tx-edit-actions button { flex: 0 1 auto; width: auto; padding: 8px 12px; }
body #tx-edit-status { margin: 0 0 8px; font-size: 12px; }
body .transaction-item { padding: 14px 16px; }
body .budget-headline-grid { gap: 12px; }
body .budget-headline-grid .budget-focus-card { background: transparent; border: 0; border-left: 1px solid var(--ui-border); border-radius: 0; padding: 8px 16px; }
body .budget-headline-grid .flex-hero-card { border-left: 0; padding-left: 0; }
body .budget-headline-grid .flex-hero-value { font-size: 30px; }
body .budget-focus-label { font-size: 12px; letter-spacing: 0; text-transform: none; }
body .budget-focus-sub { font-size: 12px; line-height: 1.5; }
body .tm-collapsible > summary { min-height: 44px; display: flex; align-items: center; font-weight: 500; font-size: 14px; }
body .tm-collapsible > summary::after { content: '+'; margin-left: auto; }
body .tm-collapsible[open] > summary::after { content: '−'; }
body .tracking-headline { margin: 16px 0 20px; }
body .tracking-summary-label { font-size: 12px; text-transform: none; letter-spacing: 0; }
body .tracking-summary-value { font: 600 30px/1.4 var(--ui-font-mono); }
body .tracking-headline .ui-muted { font-size: 13px; }
.entry-disclosure { border-top: 1px solid var(--ui-border); border-bottom: 1px solid var(--ui-border); margin-bottom: 16px; }
.entry-disclosure > summary { min-height: 44px; padding: 10px 0; cursor: pointer; font-weight: 500; }
.entry-disclosure:not([open]) > .tracking-form { display: none; }
body .tracking-form { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; padding: 12px 0 20px; }
body .tracking-form :is(input,select,button) { min-height: 44px; min-width: 0; font-size: 16px; }
.tracking-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.tracking-toolbar h4 { margin: 0; }
.tracking-edit-toggle { min-height: 40px; padding: 8px 12px; border: 1px solid var(--ui-border); border-radius: 8px; background: var(--ui-surface-2); color: var(--ui-text); }
.tab-content:not(.is-editing) .tracking-table :is(input,select,.tracking-delete) { display: none; }
.tab-content.is-editing .tracking-cell-text { display: none; }
.tracking-cell-text { display: block; overflow-wrap: anywhere; font-size: 13px; line-height: 1.5; padding: 4px 0; }
body .tracking-table td { vertical-align: top; padding: 10px; }
body .tracking-table td[data-label="Amount"] .tracking-cell-text { font-family: var(--ui-font-mono); text-align: right; }
body .is-collapsible:not(.is-open) > .collapse-body { display: none; }
body .is-collapsible .collapse-toggle { display: inline-flex; min-height: 36px; align-items: center; }
body .projection-metrics { gap: 24px; margin: 24px 0; }
body #advisor .adv-chart-block { margin-top: 20px; }
body #advisor .adv-section-head h3 { font-size: 16px; text-transform: none; letter-spacing: 0; }
@media (min-width: 769px) {
    body #net-worth-card { padding: 16px 20px; }
    body #net-worth-card .chart-container { min-height: 150px; contain: size; }
    body #net-worth-card .range-btn { min-height: 36px; }
}
@media (max-width: 1050px) and (min-width: 769px) {
    body .qt-card { padding: 8px; }
    body .qt-card-value { font-size: 14px; }
    body .qt-card-label { font-size: 11px; }
}
@media (max-width: 768px) {
    body .app-shell { padding: 12px 12px 92px; }
    body .card { padding: 18px 16px; border-radius: 12px; }
    body .card h3 { font-size: 16px; }
    body .section-switcher { margin: 12px 0 16px; gap: 6px; }
    body .section-switcher .tab { padding: 8px 12px; font-size: 13px; }
    body .qt-cards-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
    body .qt-card { display: flex; padding: 10px; min-height: 98px; gap: 3px; }
    body .qt-card-label { font-size: 13px; min-height: 20px; }
    body .qt-card-value { font-size: 18px; }
    body .qt-card-delta { font-size: 12px; }
    body .qt-group-label { margin: 16px 0 8px; }
    body #net-worth-card .chart-container { height: 240px !important; }
    body .nw-control-row { margin: 16px 0 12px; gap: 16px; }
    body .nw-control { flex-direction: column; align-items: flex-start; gap: 8px; }
    body #net-worth-card .range-btn { font-size: 12px; min-height: 40px; padding: 8px; }
    body .nw-chart-caption { min-height: 36px; }
    body .nw-projection-readout { min-height: 100px; }
    body .tracking-form { grid-template-columns: 1fr; }
    body .tracking-table td { padding: 6px 0; }
    body .tracking-table td::before { font-size: 12px; }
    body .tracking-cell-text { font-size: 14px; }
    body .budget-focus-grid.budget-headline-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
    body .budget-headline-grid .budget-focus-value { font-size: 22px !important; }
    body .budget-headline-grid .flex-hero-card { grid-column: 1 / -1; }
    body .budget-headline-grid .budget-focus-card { border: 0; padding: 8px 0; }
    body .tx-edit-actions button { flex: 1; font-size: 12px; }
    body #tx-filters-detail :is(input,select,button) { font-size: 16px; }
    body .bottom-nav-item { font-size: 12px; }
}
@media (max-width: 360px) {
    /* Keep the monthly line readable at 320px; the projected value may wrap.
       Its second line is reserved even when projection is off. */
    body .qt-card { padding: 5px; }
    body .qt-card-projection { min-height: 32px; }
}

body .health-banner:empty { display: none !important; }
body .tm-collapsible:not([open]) > .tm-collapsible-body { display: none !important; }
body .tm-collapsible > summary { cursor: pointer; }
body #budget-headline-card { padding: 20px 24px; }
@media (min-width: 769px) {
    body .health-banner:not(:empty) { display: flex !important; align-items: center; justify-content: space-between; gap: 16px; }
    body .health-banner .banner-text { flex: 1; min-width: 0; }
    body .health-banner .banner-actions { flex: none; margin: 0; }
    body .health-banner .sync-dismiss-btn { min-width: 36px; }
}

.product-disclosure { border-top: 1px solid var(--ui-border); margin-top: 20px; }
.product-disclosure > summary { cursor: pointer; min-height: 44px; padding: 12px 0; font-size: 14px; }
.product-disclosure:not([open]) > :not(summary) { display: none !important; }

.entry-field { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--ui-muted); min-width: 0; }
.entry-field :is(input,select) { width: 100%; }
body #net-worth-card .range-btn.active { box-shadow: none; }
body .budget-headline-grid .budget-focus-card { background: transparent !important; }

/* Navigation keeps the same hierarchy on every screen. Multi-page sections
   share a consistent child row; single-page destinations open directly. */
body .app-navigation {
    flex: 0 0 auto;
    position: sticky;
    top: 12px;
    z-index: 20;
    margin-bottom: 16px;
    border: 1px solid var(--ui-border);
    border-radius: 12px;
    background: var(--ui-surface);
}
body .app-navigation nav.tabs {
    position: static;
    display: grid;
    grid-template-columns: 36px minmax(0, 640px) minmax(80px, 1fr);
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 8px 12px;
    border: 0;
    border-radius: 12px 12px 0 0;
    background: transparent;
    backdrop-filter: none;
}
body .app-navigation .tabs-group {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 4px;
    min-width: 0;
    width: 100%;
}
body .app-navigation .nav-section,
body .app-navigation .section-switcher .tab {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 44px;
    min-height: 44px;
    padding: 0 8px;
    margin: 0;
    border: 1px solid transparent;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    white-space: normal;
    text-align: center;
    box-shadow: none;
}
body .app-navigation .nav-section.active {
    background: var(--ui-surface-2);
    color: var(--ui-text);
    border-color: var(--ui-border);
    font-weight: 600;
}
body .app-navigation .subnav-panel {
    padding: 0 12px 0 60px;
    border-top: 1px solid var(--ui-border);
    background: var(--ui-bg);
    border-radius: 0 0 12px 12px;
}
body .app-navigation .section-switcher {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 4px;
    max-width: 640px;
    padding: 6px 0;
    margin: 0;
    border: 0;
    background: transparent;
}
body .app-navigation .section-switcher .tab {
    color: var(--ui-muted);
    border-radius: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
}
body .app-navigation .section-switcher .tab.active {
    color: var(--ui-text);
    border-bottom-color: var(--ui-text);
    font-weight: 600;
}
body .app-navigation .section-switcher .tab[hidden] { display: none; }
body .app-navigation :is(.tab, .nav-section):focus-visible {
    outline: 2px solid var(--ui-text);
    outline-offset: -3px;
}
body .accounts-header-card { top: 132px; }
#accounts [id^="account-section-"] { scroll-margin-top: 236px; }
@media (max-width: 768px) {
    body .app-shell { padding-bottom: 20px; }
    body .app-navigation { top: 0; margin-bottom: 16px; }
    body .app-navigation nav.tabs {
        grid-template-columns: 36px minmax(0, 1fr);
        gap: 6px;
        padding: 6px 8px;
    }
    body .app-navigation .nav-actions { grid-column: 2; grid-row: 1; }
    body .app-navigation .tabs-group { grid-column: 1 / -1; grid-row: 2; }
    body .app-navigation .nav-section,
    body .app-navigation .section-switcher .tab { padding: 0 4px; font-size: 13px; }
    body .app-navigation .subnav-panel { padding: 0 8px; }
    body .app-navigation .section-switcher {
        grid-template-columns: repeat(var(--view-count, 2), minmax(0, 1fr));
        max-width: none;
    }
    body .accounts-header-card { top: 167px; }
    #accounts [id^="account-section-"] { scroll-margin-top: 276px; }
}

@media (max-width: 359px) {
    body .app-navigation .nav-section,
    body .app-navigation .section-switcher .tab { font-size: 12px; padding: 0 1px; }
    body .app-navigation .tabs-group { gap: 2px; }
}

body .app-navigation .last-sync.is-preview {
    display: inline;
    color: var(--ui-muted);
    font-size: 12px;
}

body .app-navigation .nav-actions { min-width: 0; max-width: 100%; }
body .app-navigation .nav-actions .icon-btn { flex: 0 0 38px; }
body .app-navigation .last-sync.is-preview {
    min-width: 0;
    white-space: normal;
    text-align: right;
    line-height: 1.2;
}

body .app-navigation .subnav-panel[hidden] { display: none; }

/* The retirement workspace owns fixed tracks. Recalculation replaces their
   contents; it must never move the chart, controls, or the document scroll. */
body #advisor .advisor-card { padding: 20px; }
body #advisor .advisor-workspace {
    display: grid;
    grid-template-rows: 36px 16px 76px 100px 36px minmax(100px,1fr);
    gap: 6px;
    height: calc(100svh - 162px);
    min-height: 340px;
    overflow-anchor: none;
}
body #advisor .advisor-head {
    position: relative;
    display: grid;
    grid-template-rows: 16px 78px 16px;
    gap: 0;
    min-width: 0;
}
body #advisor .advisor-title { font-size: 12px; line-height: 16px; margin: 0; }
body #advisor .advisor-answer { height: 78px; min-height: 0; }
body #advisor .aa-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}
body #advisor .aa-phases {
    height: 42px;
    margin: 0;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    max-width: 640px;
}
body #advisor .aa-phase { gap: 0; }
body #advisor .aa-phase-v { font-size: 24px; line-height: 26px; }
body #advisor .aa-phase-w { font-size: 11px; line-height: 16px; letter-spacing: 0; }
body #advisor .aa-value { height: 42px; margin: 0; line-height: 26px; }
body #advisor .aa-assume {
    height: 36px;
    margin: 0;
    font-size: 12px;
    line-height: 18px;
}
body #advisor .aa-assume .aa-verdict { font-size: inherit; line-height: inherit; }
body #advisor .advisor-answer.has-alert .aa-assume { visibility: hidden; }
body #advisor #advisor-alert {
    position: absolute;
    top: 58px;
    inset-inline: 0;
    height: 36px;
    overflow-y: auto;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ui-danger);
    font-size: 12px;
    line-height: 18px;
}
body #advisor #advisor-model-status {
    display: block;
    height: 16px;
    margin: 0;
    max-width: none;
    font-size: 11px;
    line-height: 16px;
}
body #advisor #advisor-model-retry { position: absolute; top: 38px; right: 0; }
body #advisor .advisor-mobile-levers {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
    max-width: 420px;
}
body #advisor .aml-lever { min-width: 0; padding: 0; border: 0; background: transparent; gap: 0; }
body #advisor .aml-lever-label { font-size: 11px; line-height: 16px; color: var(--ui-muted); }
body #advisor .aml-lever-controls { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
body #advisor .aml-lever-btn { border-radius: 8px; border: 1px solid var(--ui-border); background: var(--ui-surface-3); color: var(--ui-text); width: 36px; height: 36px; min-width: 36px; min-height: 36px; padding: 0; }
body #advisor .aml-lever-value { min-width: 28px; text-align: center; font-variant-numeric: tabular-nums; }
body #advisor button.aml-lever-value { width: 40px; min-width: 40px; height: 36px; min-height: 36px; padding: 0 2px; border: 1px solid var(--ui-border); border-radius: 6px; background: var(--ui-surface-3); color: var(--ui-text); font: inherit; cursor: pointer; }
body #advisor button.aml-lever-value[data-sunset-active="true"]::after { content: "×"; margin-left: 2px; color: var(--ui-muted); }
@media (max-width: 389px) {
    body #advisor .advisor-workspace .advisor-mobile-levers { grid-template-columns: minmax(0, 1fr); }
    body #advisor .aml-lever-controls .aml-lever-btn { width: 36px; min-width: 36px; }
}
body #advisor .adv-chart-block { min-height: 0; margin: 0; }
body #advisor .advisor-chart { height: 100% !important; min-height: 0; margin: 0; }
body #advisor #advisor-analysis { margin: 0; padding: 0; border-top: 1px solid var(--ui-border); }
body #advisor #advisor-analysis > summary { min-height: 36px; padding: 8px 0; font-size: 13px; }
body #advisor .advisor-analysis-body { padding-top: 12px; }
body #advisor[data-model-state="error"] .advisor-answer,
body #advisor[data-model-state="error"] .adv-chart-block { display: block; visibility: hidden; }
body #advisor[data-model-state="error"] #advisor-model-status { position: absolute; top: 58px; height: 36px; }
@media (max-width: 768px) {
    body #advisor .advisor-card { padding: 12px; }
    body #advisor .advisor-workspace { height: calc(100svh - 184px); }
    body #advisor .aa-phase-v { font-size: 20px; }
}
@media (max-width: 359px) {
    body #advisor .aa-phase-v { font-size: 16px; }
}

body #advisor #projection-legend {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%; max-width: 640px; height: 36px; margin: 0; gap: 1px;
}
body #advisor #projection-legend .pl-item { min-width: 0; padding: 0 4px; gap: 4px; font-size: 11px; line-height: 14px; }
body #advisor #projection-legend .pl-label { white-space: normal; }
body #advisor #projection-legend .pl-box { width: 8px; height: 8px; flex: 0 0 8px; }

/* Keep confirmed connection errors actionable without inserting a banner
   above the fixed planning workspace. Other sections retain the full banner. */
body .advisor-data-alert { display: none; }
body:has(#advisor.active) .app-shell > #health-banner { display: none !important; }
body:has(#advisor.active):has(#health-banner:not(:empty)) #last-sync { display: none; }
body:has(#advisor.active):has(#health-banner:not(:empty)) .advisor-data-alert {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 4px;
    color: var(--ui-warning);
    font-size: 12px;
    white-space: nowrap;
}

/* Plan settings dialog: the only part of Advisor that scrolls. */
body #advisor #advisor-settings {
    width: min(900px,calc(100% - 24px)); max-height: calc(100svh - 32px);
    margin: auto; padding: 16px; border: 1px solid var(--ui-border); border-radius: 12px;
    background: var(--ui-surface); color: var(--ui-text); overflow-y: auto; overscroll-behavior: contain;
}
body #advisor #advisor-settings::backdrop { background: rgb(0 0 0 / 70%); }
body:has(#advisor-settings[open]) { overflow: hidden; }
body #advisor .advisor-dialog-heading { display: flex; align-items: center; gap: 12px; justify-content: space-between; margin-bottom: 16px; }
body #advisor .advisor-dialog-heading h2 { font-size: 18px; margin: 0; }
body #advisor .advisor-dialog-heading button { min-width: 44px; min-height: 36px; }
body #advisor .advisor-plan-controls { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; min-width: 0; margin-bottom: 16px; }
body #advisor .advisor-plan-controls .advisor-input { min-width: 0; font-size: 12px; line-height: 18px; gap: 0; }
body #advisor .advisor-plan-controls input { width: 100%; min-width: 0; height: 36px; padding: 4px 8px; font-size: 16px; border-radius: 8px; }
body #advisor .advisor-mobile-levers { max-width: none; gap: 12px; }
body #advisor :is(.advisor-settings-button,#advisor-model-retry,.advisor-dialog-heading button) { background: var(--ui-surface-2); color: var(--ui-text); border: 1px solid var(--ui-border); border-radius: 8px; }
@media (max-width: 768px) {
    body #advisor .advisor-plan-controls { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
    body #advisor .advisor-mobile-levers { grid-column: 1 / -1; }
    body #advisor #advisor-settings .advisor-inputs { grid-template-columns: repeat(2,minmax(0,1fr)); }
    body #advisor #advisor-settings .advisor-input { min-width: 0; }
    body #advisor #advisor-settings :is(input,select) { min-width: 0; max-width: 100%; font-size: 16px; }
}
@media (max-width: 389px) {
    body #advisor .advisor-plan-controls { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

/* Advisor reads top to bottom as one story: the plan and its verdict, then
   three cards that each answer one question (what the household lives on,
   what it holds at the selected age, how much market luck moves that), then
   the chart. Every track is fixed, so hovering, pinning and recalculating
   replace contents without moving the chart or the page. */
body #advisor .advisor-workspace {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: 56px 148px 36px minmax(120px, 1fr);
    grid-template-areas:
        "verdict verdict verdict"
        "spend   bal     bal"
        "fire    fire    legend"
        "chart   chart   chart";
    gap: 12px;
    min-height: 420px;
}
body #advisor .advisor-panels { display: contents; }
body #advisor .advisor-view-switch { display: none; }
body #advisor .advisor-verdict { grid-area: verdict; }
body #advisor #advisor-spending { grid-area: spend; }
body #advisor #advisor-balances { grid-area: bal; }
body #advisor #advisor-fire { grid-area: fire; }
body #advisor #projection-legend { grid-area: legend; }
body #advisor .adv-chart-block { grid-area: chart; min-height: 0; margin: 0; }

/* Verdict row: plan on the left, one headline number on the right. */
body #advisor .advisor-verdict {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas: "plan funded actions";
    align-items: center;
    gap: 16px;
    min-width: 0;
}
body #advisor .advisor-plan-heading { grid-area: plan; display: grid; min-width: 0; }
body #advisor #advisor-plan-title { margin: 0; font-size: 20px; line-height: 24px; font-weight: 600; }
body #advisor #advisor-plan-scenario { font-size: 12px; line-height: 16px; max-height: 32px; color: var(--ui-muted); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
body #advisor .advisor-funding-summary { grid-area: funded; display: grid; justify-items: end; min-width: 0; }
body #advisor #advisor-funded { display: block; font-size: 12px; line-height: 24px; font-weight: 400; color: var(--ui-muted); white-space: nowrap; }
body #advisor #advisor-funded b { font-family: var(--ui-font-mono); font-size: 20px; font-weight: 700; color: var(--ui-text); margin-right: 4px; }
body #advisor #advisor-level-note { font-size: 11px; line-height: 14px; color: var(--ui-muted); white-space: nowrap; }
body #advisor #advisor-level-note:empty { display: none; }
body #advisor #advisor-model-status { display: block; height: 16px; margin: 0; font-size: 11px; line-height: 16px; color: var(--ui-warning); white-space: nowrap; }
body #advisor #advisor-model-status:empty { display: none; }
body #advisor .advisor-actions { grid-area: actions; display: flex; gap: 8px; }
body #advisor :is(.advisor-settings-button,#advisor-model-retry) { position: static; min-height: 36px; padding: 4px 12px; font-size: 12px; white-space: nowrap; }

/* Cards: one surface step above the panel, 1px border, no nested chrome. */
body #advisor .advisor-card-panel {
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid var(--ui-border);
    border-radius: 10px;
    background: var(--ui-surface-2);
    overflow: hidden;
}
body #advisor .advisor-card-panel h3,
body #advisor .advisor-card-panel .advisor-range-heading h3 { margin: 0; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--ui-text); }
body #advisor .advisor-card-panel h3 span,
body #advisor .advisor-range-heading > span,
body #advisor #projection-point-context { font-size: 11px; line-height: 18px; font-weight: 400; color: var(--ui-muted); }

/* Living on: one row per phase, label left, figure right. */
body #advisor #advisor-spending { display: grid; grid-template-rows: 18px 1fr; gap: 4px; }
body #advisor #advisor-spending-phases { display: grid; grid-template-rows: repeat(3, minmax(0, 1fr)); min-height: 0; }
body #advisor #advisor-spending-phases .spend-phase {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "label value" "note note";
    column-gap: 8px;
    align-content: center;
    min-width: 0;
    border-top: 1px solid var(--ui-border);
}
body #advisor #advisor-spending-phases .spend-phase:first-child { border-top: 0; }
body #advisor #advisor-spending-phases .spend-phase > span { grid-area: label; font-size: 12px; line-height: 16px; color: var(--ui-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body #advisor #advisor-spending-phases small { grid-area: note; font-size: 11px; line-height: 14px; color: var(--ui-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body #advisor #advisor-spending-phases strong { grid-area: value; align-self: center; font-family: var(--ui-font-mono); font-size: 15px; line-height: 18px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
body #advisor #advisor-selected-spending { display: none; }

/* At age N and Market luck share the middle two columns. */
body #advisor #advisor-balances { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; min-width: 0; }
body #advisor .advisor-age-picture { display: grid; grid-template-rows: 18px 1fr; gap: 6px; }
body #advisor .advisor-age-heading { display: flex; align-items: baseline; gap: 8px; min-width: 0; white-space: nowrap; overflow: hidden; }
body #advisor #projection-point-heading { flex: none; }
body #advisor #projection-point-context { overflow: hidden; text-overflow: ellipsis; }
body #advisor .projection-point-details { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 6px 10px; height: auto; min-height: 0; }
body #advisor .projection-detail-item { display: grid; align-content: center; min-width: 0; padding: 0; border: 0; border-radius: 0; background: none; }
body #advisor .projection-detail-label { font-size: 11px; line-height: 14px; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--ui-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body #advisor .projection-detail-value { margin: 0; font-size: 15px; line-height: 20px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

body #advisor #outcome-range-section { display: grid; grid-template-rows: 18px 1fr 14px; gap: 6px; margin: 0; }
body #advisor .advisor-range-heading { display: flex; align-items: baseline; gap: 8px; min-width: 0; white-space: nowrap; overflow: hidden; }
body #advisor #outcome-range { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; align-items: center; min-height: 0; }
body #advisor #outcome-range[data-mode="single"] { grid-template-columns: minmax(0, 1fr); }
body #advisor #outcome-range > div { min-width: 0; padding: 0; border: 0; }
body #advisor #outcome-range .strip-label { font-size: 11px; line-height: 14px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ui-muted); }
body #advisor #outcome-range .strip-value { margin: 0; font-size: 14px; line-height: 20px; font-weight: 700; color: var(--ui-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
body #advisor #outcome-range [data-percentile="50"] .strip-value { color: var(--ui-text); }
body #advisor #outcome-range .strip-single .strip-value { font-size: 18px; line-height: 22px; color: var(--ui-text); }
body #advisor #outcome-range .strip-single .strip-empty { color: var(--ui-muted-2); }
body #advisor #outcome-range .strip-single .strip-sub { margin: 0; font-size: 11px; line-height: 14px; color: var(--ui-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body #advisor #outcome-range-context { margin: 0; font-size: 11px; line-height: 14px; color: var(--ui-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Chart toggles: filled pill when on, outline when off; the swatch carries
   the series colour and is the only colour in the row. */
body #advisor #advisor-fire { display: flex; align-items: center; gap: 12px; min-width: 0; }
body #advisor #advisor-fire > h3 { flex: none; margin: 0; font-size: 12px; line-height: 16px; font-weight: 600; }
body #advisor #advisor-fire > h3 span { font-size: 11px; font-weight: 400; color: var(--ui-muted); }
body #advisor :is(#projection-target-legend, #projection-legend) { display: flex; align-items: center; gap: 6px; min-width: 0; width: auto; height: 36px; max-width: none; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; overflow: visible; }
body #advisor #projection-legend { justify-content: flex-end; }
body #advisor :is(#projection-target-legend, #projection-legend) .pl-item {
    display: inline-flex; align-items: center; gap: 6px;
    flex: none; justify-content: flex-start;
    min-width: 0; min-height: 36px; height: 36px; padding: 0 12px;
    border: 1px solid var(--ui-border); border-radius: 999px;
    background: transparent; color: var(--ui-muted);
    font-size: 12px; line-height: 16px; font-weight: 500; white-space: nowrap; text-align: left;
}
body #advisor :is(#projection-target-legend, #projection-legend) .pl-item.is-on { background: var(--ui-surface-3); color: var(--ui-text); border-color: var(--ui-surface-3); }
body #advisor :is(#projection-target-legend, #projection-legend) .pl-box { width: 10px; height: 10px; flex: 0 0 10px; }
body #advisor #projection-target-legend .pl-value { font-family: var(--ui-font-mono); font-size: 12px; font-weight: 600; }
body #advisor #projection-target-legend .pl-target { font-size: 11px; color: var(--ui-muted); }
body #advisor #projection-legend .pl-label { white-space: nowrap; }

body #advisor[data-model-state="error"] :is(#advisor-spending,#advisor-balances,#advisor-fire,#advisor-funded) { visibility: hidden; }

/* Mid-width desktop: the FIRE chips and series toggles each get a full row. */
@media (min-width: 769px) and (max-width: 1400px) {
    body #advisor .advisor-workspace {
        grid-template-rows: 56px 148px 36px 36px minmax(120px, 1fr);
        grid-template-areas:
            "verdict verdict verdict"
            "spend   bal     bal"
            "fire    fire    fire"
            "legend  legend  legend"
            "chart   chart   chart";
        row-gap: 8px;
    }
    body #advisor #projection-legend { justify-content: flex-start; }
}

/* Phones: the verdict stays, one card shows at a time behind the view
   switch, and the chart keeps the rest of the fixed screen. */
@media (max-width: 768px) {
    body #advisor .advisor-workspace {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: 68px 36px 116px 36px minmax(96px, 1fr);
        grid-template-areas: "verdict" "switch" "panels" "legend" "chart";
        gap: 4px;
        min-height: 380px;
    }
    body #advisor .advisor-verdict {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-rows: 36px 28px;
        grid-template-areas: "plan actions" "funded funded";
        gap: 4px 8px;
    }
    body #advisor #advisor-plan-title { font-size: 16px; line-height: 20px; }
    body #advisor #advisor-plan-scenario { font-size: 11px; line-height: 14px; max-height: 14px; -webkit-line-clamp: 1; }
    body #advisor .advisor-funding-summary { justify-items: start; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 8px; }
    body #advisor #advisor-funded { font-size: 11px; line-height: 20px; }
    body #advisor #advisor-funded b { font-size: 16px; }
    body #advisor #advisor-model-status { overflow: hidden; text-overflow: ellipsis; }
    body #advisor #advisor-level-note { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
    body #advisor .advisor-view-switch { grid-area: switch; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
    body #advisor .advisor-view-switch button { min-height: 36px; padding: 0 4px; border: 1px solid var(--ui-border); border-radius: 6px; background: var(--ui-surface); color: var(--ui-muted); font-size: 13px; }
    body #advisor .advisor-view-switch button[aria-pressed="true"] { color: var(--ui-text); background: var(--ui-surface-3); font-weight: 600; }
    body #advisor .advisor-panels { grid-area: panels; display: block; min-width: 0; height: 116px; }
    body #advisor :is(#advisor-spending, #advisor-balances, #advisor-fire) { display: none; height: 116px; overflow: hidden; }
    body #advisor .advisor-panels[data-view="spending"] #advisor-spending,
    body #advisor .advisor-panels[data-view="fire"] #advisor-fire { display: block; }
    body #advisor .advisor-panels[data-view="balances"] #advisor-balances { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 54px 58px; gap: 4px; }
    body #advisor .advisor-card-panel { padding: 0; border: 0; border-radius: 0; background: none; }

    body #advisor #advisor-spending > h3 { display: none; }
    body #advisor #advisor-spending-phases { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: none; gap: 4px; }
    body #advisor #advisor-spending-phases .spend-phase { grid-template-columns: minmax(0, 1fr); grid-template-areas: "label" "value" "note"; align-content: start; padding: 0 4px; border-top: 0; border-left: 2px solid var(--ui-border); }
    body #advisor #advisor-spending-phases .spend-phase > span { font-size: 11px; line-height: 14px; height: 28px; white-space: normal; color: var(--ui-muted); }
    body #advisor #advisor-spending-phases strong { align-self: start; min-height: 40px; font-size: 14px; line-height: 20px; white-space: normal; }
    body #advisor #advisor-spending-phases small { white-space: normal; }
    body #advisor #advisor-spending-phases small .why { display: none; }
    body #advisor #advisor-selected-spending { display: block; margin: 4px 0 0; font-size: 11px; line-height: 14px; color: var(--ui-muted); }

    body #advisor .advisor-age-picture { grid-template-rows: 16px 1fr; gap: 2px; }
    body #advisor .advisor-card-panel h3 { font-size: 12px; line-height: 16px; }
    body #advisor .projection-point-details { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr); gap: 4px; }
    body #advisor .projection-detail-item:nth-child(-n+2) { display: none; }
    body #advisor .projection-detail-value { font-size: 13px; line-height: 18px; }
    body #advisor #outcome-range-section { grid-template-rows: 16px 1fr; gap: 2px; }
    body #advisor #outcome-range-context { display: none; }
    body #advisor #outcome-range .strip-value { font-size: 13px; line-height: 18px; }
    body #advisor #outcome-range .strip-single .strip-value { font-size: 15px; line-height: 20px; }

    body #advisor #advisor-fire > h3 { margin: 0 0 4px; }
    body #advisor #projection-target-legend { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); height: auto; gap: 4px; }
    body #advisor #projection-target-legend .pl-item { display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: 2px 6px; height: auto; min-height: 88px; padding: 6px 8px; border-radius: 8px; white-space: normal; align-content: start; }
    body #advisor #projection-target-legend :is(.pl-value, .pl-target) { grid-column: 2; }
    body #advisor #projection-target-legend .pl-value { font-size: 13px; }

    body #advisor #projection-legend { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
    body #advisor #projection-legend .pl-item { justify-content: center; padding: 0 4px; border-radius: 6px; font-size: 11px; }
    body #advisor #projection-legend .pl-label { white-space: normal; line-height: 13px; }
}

/* Advisor: chart first, selected-year numbers beside it, then phase context. */
body #advisor .advisor-workspace {
    height: auto;
    min-height: 0;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto clamp(320px, 42svh, 480px) auto auto auto;
    grid-template-areas: "verdict" "levers" "legend" "chart" "bal" "spend" "fire";
    gap: 14px;
}
body #advisor .advisor-mobile-levers {
    grid-area: levers; display: grid; grid-template-columns: repeat(2,minmax(0,210px));
    gap: 8px; width: 100%; max-width: 440px; margin: 0;
}
body #advisor .aml-lever { display: grid; gap: 4px; min-width: 0; padding: 8px 10px; border: 1px solid var(--ui-border); border-radius: 9px; background: var(--ui-surface-2); }
body #advisor .aml-lever-label { font-size: 14px; line-height: 18px; font-weight: 600; }
body #advisor .aml-lever-value { font-size: 18px; font-weight: 700; }
body #advisor .aml-lever-btn { width: 40px; height: 40px; min-width: 40px; min-height: 40px; font-size: 20px; }
body #income .income-advisor-bridge a { display: inline-flex; align-items: center; min-height: 40px; font-size: 15px; line-height: 22px; justify-self: start; }
body #income .income-advisor-bridge p { font-size: 15px; line-height: 22px; }
body #account-source-audit[hidden] { display: none; }
body #transactions #transactions-context { font-size: 15px !important; line-height: 21px; }
body #transactions .tx-chip { font-size: 14px; }
body #income .flow-note { font-size: 14px; line-height: 20px; }
body #income .sankey-label,
body #income .sankey-label-sub { font-size: 14px; }
.tab-content:not(.is-editing) .tracking-table td.is-empty { display: none; }
body :is(.budget-focus-label,.budget-focus-sub,.tracking-summary-label,.tracking-headline .ui-muted) { font-size: 14px; line-height: 1.45; }
body :is(#spending-as-of,#flow-range-label) { font-size: 14px !important; }
body #tax-projection-card :is(.projection-form label,#projection-warnings) { font-size: 14px; line-height: 1.45; }
body #advisor-model-status { font-size: 14px; }
@media (max-width: 600px) {
    body #tax-projection-card .projection-metrics > div:first-child { grid-column: 1 / -1; }
    body #tax-projection-card .projection-metrics .big-number { font-size: 24px; overflow-wrap: normal; }
    body #tax-projection-card .projection-metrics .projection-number { font-size: 20px; }
    body #tax-projection-card .projection-form label,
    body #tax-projection-card #projection-warnings { font-size: 14px; line-height: 20px; }
    body :is(.qt-card-label,.qt-card-delta),
    body .tracking-table td::before { font-size: 14px; }
}
body #advisor .advisor-view-switch { display: none; }
body #advisor .advisor-panels { display: contents; }
body #advisor #advisor-spending { grid-area: spend; display: grid; grid-template-rows: auto auto; gap: 8px; padding: 16px; }
body #advisor #advisor-spending > h3,
body #advisor .advisor-card-panel h3 { display: block; font-size: 18px; line-height: 24px; }
body #advisor .advisor-sample-label { display: inline-block; margin-right: 8px; padding: 2px 7px; border: 1px solid var(--ui-warning); border-radius: 5px; color: var(--ui-warning); font-size: 14px; line-height: 18px; vertical-align: middle; }
body #advisor .advisor-card-panel h3 span { display: inline; margin-left: 8px; font-size: 14px; line-height: 20px; }
body #advisor #advisor-spending-phases { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: auto; gap: 10px; }
body #advisor #advisor-spending-phases .spend-phase {
    display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "label" "value" "note" "condition";
    align-content: center; gap: 5px; height: 260px; width: 100%; padding: 12px;
    text-align: left; border: 1px solid var(--ui-border); border-radius: 9px;
    background: var(--ui-surface-3); color: var(--ui-text); cursor: pointer;
}
body #advisor #advisor-spending-phases .spend-phase:hover,
body #advisor #advisor-spending-phases .spend-phase:focus-visible { border-color: var(--ui-accent); }
body #advisor #advisor-spending-phases .spend-phase:disabled { opacity: .55; cursor: default; }
body #advisor #advisor-spending-phases .spend-phase > span,
body #advisor #advisor-spending-phases .spend-phase strong,
body #advisor #advisor-spending-phases .spend-phase small,
body #advisor #advisor-spending-phases .spend-phase em { white-space: normal; overflow: visible; text-overflow: clip; height: auto; }
body #advisor #advisor-spending-phases .spend-phase > span { font-size: 16px; line-height: 20px; font-weight: 600; }
body #advisor #advisor-spending-phases .spend-phase strong { font-size: 23px; line-height: 28px; }
body #advisor #advisor-spending-phases .spend-phase small,
body #advisor #advisor-spending-phases .spend-phase em { font-size: 14px; line-height: 19px; color: var(--ui-muted); font-style: normal; }
body #advisor #advisor-spending-phases .spend-phase em { color: var(--ui-warning); }
body #advisor #advisor-balances { grid-area: bal; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .6fr); gap: 12px; }
body #advisor .advisor-age-picture { display: grid; grid-template-rows: auto auto; gap: 10px; padding: 16px; min-height: 228px; }
body #advisor .advisor-age-heading { overflow: visible; white-space: normal; flex-wrap: wrap; }
body #advisor #projection-point-context { font-size: 14px; line-height: 20px; overflow: visible; white-space: normal; }
body #advisor .projection-point-details { grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: repeat(2, auto); gap: 12px; }
body #advisor .projection-detail-item:nth-child(-n+2) { display: grid; }
body #advisor .projection-detail-label { font-size: 14px; line-height: 18px; white-space: normal; }
body #advisor .projection-detail-value { font-size: 20px; line-height: 25px; white-space: normal; }
body #advisor #outcome-range-section { display: grid; grid-template-rows: auto auto auto; gap: 10px; padding: 16px; min-height: 228px; }
body #advisor .advisor-range-heading { white-space: normal; flex-wrap: wrap; }
body #advisor .advisor-range-heading > span,
body #advisor #outcome-range-context { font-size: 14px; line-height: 19px; white-space: normal; overflow: visible; }
body #advisor #outcome-range { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
body #advisor #outcome-range .strip-label { font-size: 14px; line-height: 18px; }
body #advisor #outcome-range .strip-value { font-size: 17px; line-height: 22px; }
body #advisor #advisor-fire { grid-area: fire; flex-wrap: wrap; }
body #advisor #advisor-fire > h3,
body #advisor #advisor-fire > h3 span { font-size: 14px; line-height: 20px; }
body #advisor .advisor-range-heading h3 { font-size: 16px; line-height: 21px; }
body #advisor #projection-legend { grid-area: legend; justify-self: start; }
body #advisor .adv-chart-block { grid-area: chart; height: clamp(320px, 42svh, 480px); }
body #advisor .advisor-chart { height: 100% !important; }
body #advisor #advisor-plan-title { font-size: 22px; line-height: 28px; }
body #advisor #advisor-plan-scenario,
body #advisor #advisor-level-note,
body #advisor #advisor-model-status { font-size: 14px; line-height: 19px; white-space: normal; }
body #advisor #advisor-funded { font-size: 14px; }
body #advisor #advisor-funded b { font-size: 22px; }
body #advisor :is(.advisor-settings-button,#advisor-model-retry,#advisor-housing-toggle) { font-size: 14px; min-height: 40px; }
body #advisor .advisor-funding-summary { justify-items: start; }
body #advisor #advisor-funded { white-space: normal; line-height: 24px; }
body #advisor :is(#projection-target-legend, #projection-legend) .pl-item,
body #advisor #projection-target-legend .pl-value,
body #advisor #projection-target-legend .pl-target { font-size: 14px; }
body #advisor #advisor-settings .advisor-input,
body #advisor #advisor-settings .ui-muted { font-size: 15px; }
body #advisor #advisor-settings :is(small,summary,.advisor-method-note,.advisor-facts dt,.advisor-facts dd,.advisor-replay-facts dt,.advisor-replay-facts dd) { font-size: 14px; line-height: 1.45; }

@media (max-width: 1100px) {
    body #advisor .advisor-workspace { grid-template-rows: auto auto auto clamp(320px, 42svh, 480px) auto auto auto; grid-template-areas: "verdict" "levers" "legend" "chart" "bal" "spend" "fire"; }
    body #advisor #advisor-balances { grid-template-columns: minmax(0, 1fr); }
    body #advisor #advisor-spending-phases { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    body #advisor .projection-point-details { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto; }
    body #advisor #projection-legend { grid-area: legend; justify-self: start; }
}
@media (max-width: 768px) {
    body #advisor .advisor-workspace { height: auto; min-height: 0; grid-template-rows: auto auto auto clamp(300px, 40svh, 380px) auto auto auto; gap: 12px; }
    body #advisor .advisor-mobile-levers { grid-template-columns: repeat(2,minmax(0,1fr)); max-width: none; }
    body #advisor .advisor-verdict {
        display: grid; grid-template-columns: minmax(0, 1fr) auto;
        grid-template-rows: auto auto;
        grid-template-areas: "plan actions" "funded funded";
        gap: 8px;
        min-height: 0;
    }
    body #advisor .advisor-funding-summary { display: block; min-width: 0; }
    body #advisor #advisor-funded,
    body #advisor #advisor-level-note { display: block; min-width: 0; overflow: visible; text-overflow: clip; white-space: normal; }
    body #advisor #advisor-plan-scenario { min-height: 76px; max-height: none; white-space: normal; overflow: visible; display: block; }
    body #advisor #advisor-spending,
    body #advisor #advisor-balances,
    body #advisor #advisor-fire { display: grid; height: auto; overflow: visible; }
    body #advisor .advisor-card-panel { padding: 14px; border: 1px solid var(--ui-border); border-radius: 10px; background: var(--ui-surface-2); }
    body #advisor #advisor-spending-phases { grid-template-columns: minmax(0, 1fr); }
    body #advisor #advisor-spending-phases .spend-phase { height: 210px; padding: 10px; }
    body #advisor #advisor-spending-phases .spend-phase strong { font-size: 20px; line-height: 25px; }
    body #advisor .projection-point-details { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto; }
    body #advisor .advisor-age-picture { grid-template-rows: auto auto; min-height: 382px; }
    body #advisor #outcome-range-section { grid-template-rows: auto auto auto; }
    body #advisor #outcome-range-context { display: block; }
    body #advisor #projection-target-legend,
    body #advisor #projection-legend { display: flex; flex-wrap: wrap; height: auto; }
    body #advisor :is(#projection-target-legend, #projection-legend) .pl-item { min-height: 40px; height: auto; font-size: 14px; }
    body #advisor .adv-chart-block { height: clamp(300px, 40svh, 380px); }
}
@media (max-width: 360px) {
    body #advisor .advisor-verdict { min-height: 200px; }
    body #advisor #advisor-plan-scenario { min-height: 95px; }
    body #advisor .advisor-age-picture { min-height: 428px; }
    body #advisor #outcome-range-section { min-height: 273px; }
}

/* Advisor controls follow the age timeline; targets stay in sight above it. */
body #advisor .advisor-workspace {
    grid-template-columns: minmax(0, 440px) minmax(0, 1fr);
    grid-template-rows: auto auto auto minmax(420px, 55svh) auto auto;
    grid-template-areas: "verdict verdict" "levers legend" "fire fire" "chart chart" "bal bal" "spend spend";
    min-height: 100svh;
}
body #advisor .advisor-mobile-levers { max-width: none; grid-template-columns: repeat(2, minmax(0, 1fr)); }
body #advisor #projection-legend { align-self: center; justify-self: end; }
body #advisor #advisor-fire { align-items: center; }
body #advisor #projection-target-legend { flex: 1 1 650px; }
body #advisor .adv-chart-block { height: max(420px, 55svh); }
body #advisor #advisor-spending { scroll-margin-top: 96px; }
body #advisor #advisor-spending-phases .spend-phase {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: none;
    align-content: start;
    gap: 9px;
    height: auto;
    min-height: 320px;
    padding: 14px;
}
body #advisor #advisor-spending-phases .spend-phase > span,
body #advisor #advisor-spending-phases .spend-phase > small,
body #advisor #advisor-spending-phases .spend-phase > strong,
body #advisor #advisor-spending-phases .spend-phase > em,
body #advisor #advisor-spending-phases .spend-phase > dl,
body #advisor #advisor-spending-phases .spend-phase > div { grid-area: auto; min-width: 0; }
body #advisor #advisor-spending-phases .spend-phase .phase-name { font-size: 17px; line-height: 22px; }
body #advisor #advisor-spending-phases .phase-range { font-size: 14px; line-height: 19px; }
body #advisor #advisor-spending-phases .phase-numbers { display: grid; gap: 7px; margin: 0; }
body #advisor #advisor-spending-phases .phase-numbers > div { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 5px; align-items: baseline; }
body #advisor #advisor-spending-phases .phase-numbers dt { color: var(--ui-muted); font-size: 14px; line-height: 19px; }
body #advisor #advisor-spending-phases .phase-numbers dd { margin: 0; font-size: 20px; line-height: 25px; font-weight: 700; font-variant-numeric: tabular-nums; }
body #advisor #advisor-spending-phases .phase-composition { display: grid; gap: 4px; font-size: 14px; line-height: 19px; }
body #advisor #advisor-spending-phases .phase-composition b { font-weight: 600; }
body #advisor #advisor-spending-phases .phase-composition > span { color: var(--ui-muted); }
body #advisor #advisor-spending-phases .phase-other-funding,
body #advisor #advisor-spending-phases .phase-start-balances {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px; margin: 0;
}
body #advisor #advisor-spending-phases .phase-other-funding > div,
body #advisor #advisor-spending-phases .phase-start-balances > div { min-width: 0; }
body #advisor #advisor-spending-phases .phase-other-funding dt,
body #advisor #advisor-spending-phases .phase-start-balances dt { color: var(--ui-muted); }
body #advisor #advisor-spending-phases .phase-other-funding dd,
body #advisor #advisor-spending-phases .phase-start-balances dd {
    margin: 0; font-weight: 700; font-variant-numeric: tabular-nums;
}
body #advisor #advisor-spending-phases .phase-start-balances::before {
    content: "At phase start"; grid-column: 1 / -1; color: var(--ui-muted);
}
body #advisor #advisor-spending-phases .phase-plus { padding: 0 4px; }
body #advisor #advisor-spending-phases .phase-tax-note { font-size: 13px; line-height: 18px; }
body #advisor #advisor-spending-phases .spend-phase em { font-size: 13px; line-height: 18px; }
@media (max-width: 1100px) {
    body #advisor .advisor-workspace {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto auto auto auto minmax(360px, 50svh) auto auto;
        grid-template-areas: "verdict" "levers" "legend" "fire" "chart" "bal" "spend";
    }
    body #advisor #projection-legend { justify-self: start; }
    body #advisor .adv-chart-block { height: max(360px, 50svh); }
}
@media (max-width: 768px) {
    body #advisor .advisor-workspace { min-height: 0; gap: 10px; }
    body #advisor .advisor-verdict { min-height: 200px; }
    body #advisor .adv-chart-block { height: max(320px, 42svh); }
    body #advisor #advisor-spending-phases { gap: 6px; }
    body #advisor #advisor-spending-phases .spend-phase { min-height: 250px; }
    body #advisor #advisor-spending-phases .spend-phase:disabled { min-height: 120px; }
}
@media (max-width: 360px) {
    body #advisor .advisor-verdict { min-height: 257px; }
}

/* Advisor is a single viewport: the chart, selected age, and five income
   phases each span the page in chronological reading order. */
@media (min-width: 901px) {
    body:has(#advisor.tab-content.active) .app-shell { padding-bottom: 0; }
    body:has(#advisor.tab-content.active) .page { padding-bottom: 0; }
    body #advisor .dashboard-grid { padding-top: 12px; }
    body #advisor .advisor-card { padding: 14px 18px; }
    body #advisor .advisor-workspace {
        height: calc(100svh - 190px);
        min-height: 600px;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-rows: 70px 72px 42px minmax(0, 1fr) 94px 220px;
        grid-template-areas:
            "verdict verdict"
            "levers legend"
            "fire fire"
            "chart chart"
            "bal bal"
            "spend spend";
        gap: 8px 14px;
    }
    body #advisor .advisor-verdict { gap: 12px; }
    body #advisor #advisor-plan-scenario { max-width: 55ch; }
    body #advisor .advisor-mobile-levers { align-self: stretch; }
    body #advisor .aml-lever { padding: 4px 8px; gap: 2px; }
    body #advisor #projection-legend { align-self: center; justify-self: end; }
    body #advisor #advisor-fire { min-height: 0; }
    body #advisor .adv-chart-block { height: 100%; min-height: 0; }
    body #advisor #advisor-balances {
        min-height: 0; height: 100%; grid-template-columns: minmax(0, 1fr) minmax(210px, .25fr);
        grid-template-rows: minmax(0, 1fr); gap: 6px;
    }
    body #advisor .advisor-age-picture,
    body #advisor #outcome-range-section { min-height: 0; height: 100%; padding: 8px; gap: 4px; }
    body #advisor .advisor-age-picture {
        grid-template-columns: 100px minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr);
        align-items: center;
    }
    body #advisor .projection-point-details { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 2px 8px; }
    body #advisor .projection-detail-label { font-size: 13px; line-height: 17px; }
    body #advisor .projection-detail-value { font-size: 17px; line-height: 20px; }
    body #advisor #outcome-range { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3px; }
    body #advisor #outcome-range .strip-label { font-size: 13px; line-height: 17px; }
    body #advisor #outcome-range .strip-value { font-size: 16px; line-height: 20px; }
    body #advisor #outcome-range-context { display: none; }
    body #advisor .advisor-range-heading > span { display: none; }
    body #advisor #outcome-range-section { grid-template-rows: auto minmax(0, 1fr); }
    body #advisor #advisor-spending {
        min-height: 0; height: 100%; padding: 8px 10px;
        grid-template-rows: auto minmax(0, 1fr); gap: 4px;
    }
    body #advisor #advisor-spending > h3 { font-size: 17px; line-height: 21px; }
    body #advisor #advisor-spending > h3 span { display: inline; margin-left: 8px; font-size: 14px; line-height: 19px; }
    body #advisor #advisor-spending-phases {
        min-height: 0; grid-template-columns: repeat(5, minmax(0, 1fr));
        grid-template-rows: minmax(0, 1fr); gap: 6px;
    }
    body #advisor #advisor-spending-phases .spend-phase,
    body #advisor #advisor-spending-phases .spend-phase:disabled {
        min-height: 0; height: 100%; padding: 4px 7px;
        display: grid; grid-template-columns: minmax(0, 1fr) auto;
        grid-template-rows: auto auto auto auto;
        grid-template-areas: "name range" "numbers numbers" "composition composition" "opening opening";
        align-content: start; align-items: start; row-gap: 1px;
        overflow: hidden;
    }
    body #advisor #advisor-spending-phases .spend-phase > .phase-name { grid-area: name; font-size: 15px; line-height: 19px; white-space: nowrap; }
    body #advisor #advisor-spending-phases .spend-phase > .phase-range { grid-area: range; text-align: left; font-size: 13px; line-height: 18px; white-space: nowrap; }
    body #advisor #advisor-spending-phases .phase-range-prefix { display: none; }
    body #advisor #advisor-spending-phases .spend-phase > .phase-numbers {
        grid-area: numbers; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; min-width: 0;
    }
    body #advisor #advisor-spending-phases .phase-numbers > div {
        display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; white-space: nowrap;
    }
    body #advisor #advisor-spending-phases .phase-numbers dt { font-size: 13px; line-height: 17px; white-space: nowrap; }
    body #advisor #advisor-spending-phases .phase-numbers dd { font-size: 17px; line-height: 20px; white-space: nowrap; }
    body #advisor #advisor-spending-phases .spend-phase > .phase-composition {
        grid-area: composition; display: block;
        font-size: 13px; line-height: 16px; white-space: normal;
    }
    body #advisor #advisor-spending-phases .phase-composition > b { display: none; }
    body #advisor #advisor-spending-phases .phase-income-mix {
        display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px;
        margin: 0;
    }
    body #advisor #advisor-spending-phases .phase-income-mix > div { display: grid; gap: 0; min-width: 0; }
    body #advisor #advisor-spending-phases .phase-income-mix dt,
    body #advisor #advisor-spending-phases .phase-income-mix dd {
        margin: 0; font-size: 13px; line-height: 16px; white-space: nowrap;
    }
    body #advisor #advisor-spending-phases .phase-income-mix dt { color: var(--ui-muted); }
    body #advisor #advisor-spending-phases .phase-income-mix dd { font-weight: 700; font-variant-numeric: tabular-nums; }
    body #advisor #advisor-spending-phases .phase-other-funding {
        display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 2px; margin: 0; font-size: 13px; line-height: 16px;
    }
    body #advisor #advisor-spending-phases .phase-other-funding > div { display: flex; gap: 3px; min-width: 0; white-space: nowrap; }
    body #advisor #advisor-spending-phases .phase-other-funding dt { color: var(--ui-muted); }
    body #advisor #advisor-spending-phases .phase-other-funding dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
    body #advisor #advisor-spending-phases .phase-other-funding:empty { display: none; }
    body #advisor #advisor-spending-phases .spend-phase > .phase-start-balances {
        grid-area: opening; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0; margin: 0; padding-top: 0; border-top: 1px solid var(--ui-border);
    }
    body #advisor #advisor-spending-phases .phase-start-balances::before {
        content: "At phase start"; grid-column: 1 / -1;
        color: var(--ui-muted); font-size: 13px; line-height: 15px;
    }
    body #advisor #advisor-spending-phases .phase-start-balances > div {
        display: grid; gap: 0; min-width: 0;
    }
    body #advisor #advisor-spending-phases .phase-start-balances dt,
    body #advisor #advisor-spending-phases .phase-start-balances dd {
        margin: 0; font-size: 13px; line-height: 16px; white-space: nowrap;
    }
    body #advisor #advisor-spending-phases .phase-start-balances dt { color: var(--ui-muted); }
    body #advisor #advisor-spending-phases .phase-start-balances dd { font-weight: 700; font-variant-numeric: tabular-nums; }
    body #advisor #advisor-spending-phases .phase-tax-note,
    body #advisor #advisor-spending-phases .spend-phase em { display: none; }
    body #advisor #advisor-spending-phases .spend-phase:disabled { grid-template-areas: "name name" "numbers numbers" "composition composition"; }
    body #advisor #advisor-spending-phases .spend-phase > strong { grid-area: numbers; font-size: 17px; line-height: 21px; }
    body #advisor #advisor-spending-phases .spend-phase > strong + small { grid-area: composition; text-align: left; }
}
@media (min-width: 901px) and (max-height: 850px) {
    body:has(#advisor.tab-content.active) .app-shell { padding-top: 12px; }
    body #advisor .dashboard-grid { padding-top: 6px; }
    body #advisor .advisor-card { padding: 10px 18px; }
    body #advisor .advisor-workspace {
        height: calc(100svh - 168px);
        min-height: 0;
        grid-template-rows: 65px 42px 36px minmax(0, 1fr) 94px 202px;
        gap: 6px 14px;
    }
    body #advisor .advisor-verdict { gap: 8px; }
    body #advisor .advisor-mobile-levers { gap: 6px; }
    body #advisor .aml-lever { display: flex; align-items: center; justify-content: space-between; padding: 2px 8px; }
    body #advisor .aml-lever-controls { width: min(180px, 70%); }
    body #advisor .aml-lever-btn { width: 36px; height: 36px; min-width: 36px; min-height: 36px; }
    body #advisor #advisor-spending { padding: 6px; gap: 2px; }
    body #advisor #advisor-spending-phases { gap: 4px; }
    body #advisor #advisor-spending > h3 span { display: inline; }
    body #advisor #advisor-spending-phases .spend-phase,
    body #advisor #advisor-spending-phases .spend-phase:disabled { padding: 4px 6px; row-gap: 0; }
    body #advisor #advisor-spending-phases .spend-phase > .phase-composition { line-height: 15px; }
    body #advisor .advisor-age-picture,
    body #advisor #outcome-range-section { padding: 8px; }
    body #advisor #advisor-balances { grid-template-rows: minmax(0, 1fr); gap: 4px; }
    body #advisor .projection-point-details { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 0 4px; }
    body #advisor .projection-detail-value { font-size: 16px; line-height: 20px; }
    body #advisor #outcome-range-section { padding: 3px 6px; grid-template-rows: minmax(0, 1fr); }
    body #advisor .advisor-range-heading { display: none; }
    body #advisor #outcome-range .strip-label { font-size: 12px; line-height: 15px; }
    body #advisor #outcome-range .strip-value { font-size: 15px; line-height: 18px; }
}
@media (min-width: 901px) and (max-width: 1100px) {
    body #advisor .advisor-workspace {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-rows: 80px 42px 36px minmax(0, 1fr) 94px 220px;
    }
    body #advisor #advisor-spending-phases .spend-phase,
    body #advisor #advisor-spending-phases .spend-phase:disabled {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-rows: auto auto auto auto;
        grid-template-areas: "name range" "numbers numbers" "composition composition" "opening opening";
    }
    body #advisor #advisor-spending-phases .spend-phase:disabled { grid-template-areas: "name name" "numbers numbers" "composition composition"; }
    body #advisor #advisor-spending-phases .spend-phase > .phase-name { white-space: normal; font-size: 14px; }
    body #advisor #advisor-spending-phases .phase-number { display: none; }
    body #advisor .aml-lever { display: flex; align-items: center; justify-content: space-between; }
    body #advisor .aml-lever-controls { width: min(180px, 70%); }
    body #advisor #advisor-plan-title { font-size: 20px; line-height: 24px; }
    body #advisor #advisor-plan-scenario {
        font-size: 13px; line-height: 17px; max-height: 51px;
        -webkit-line-clamp: 3;
    }
    body #advisor #advisor-fire > h3 span { display: none; }
    body #advisor #projection-target-legend .pl-item { padding-inline: 8px; font-size: 13px; }
}
@media (min-width: 901px) and (max-width: 1100px) and (max-height: 850px) {
    body #advisor .advisor-workspace { grid-template-rows: 80px 42px 36px minmax(0, 1fr) 94px 210px; }
}
/* The plan's source label can change as earnings assumptions change. Reserve
   its phone space so that selecting a phase never moves the chart. */
@media (min-width: 901px) {
    body #advisor #advisor-plan-scenario { max-height: 38px; }
}
@media (max-width: 768px) {
    body #advisor #advisor-plan-scenario { height: 84px; min-height: 84px; max-height: 84px; overflow: hidden; }
}
@media (max-width: 360px) {
    body #advisor #advisor-plan-scenario { height: 98px; min-height: 98px; max-height: 98px; }
}

/* The balance sheet is a tree: Assets minus Debts, with each branch's
   components inside it. Calculated views reuse those same components. */
#net-worth-card { --nw-total-width: max(200px,18%); display: flex; flex-direction: column; gap: 12px; }
#overview #qt-cards { display: contents; }
#net-worth-card .nw-control-row { order: 0; margin: 0; }
.nw-story { position: relative; order: 1; display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; min-height: 120px; }
#nw-headline { order: 2; flex: 0 0 auto; align-self: flex-start; width: var(--nw-total-width); }
body #nw-headline .qt-cards-grid { grid-template-columns: minmax(0,1fr); }
#net-worth-card .chart-container { flex: 1 1 auto; min-width: 0; min-height: 120px; }
#net-worth-card #nw-chart-caption { position: absolute; top: 0; left: 0; visibility: hidden; z-index: 1; padding: 0 4px; background: var(--ui-surface); }
#net-worth-card #nw-chart-caption.nw-chart-notice { visibility: visible; }
#nw-balance-tree { order: 3; display: grid; grid-template-columns: minmax(0,1fr); gap: 10px; flex: 0 0 auto; }
.nw-branch { min-width: 0; }
body .nw-branch-summary { grid-template-columns: minmax(0,1fr); }
.nw-components { margin: 8px 0 0 12px; padding-left: 12px; border-left: 1px solid var(--ui-border-strong); }
body .nw-components .qt-cards-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
#nw-liquidity { order: 4; flex: 0 0 auto; margin: 0; }
#nw-assets .nw-components { border-color: var(--ui-success); }
#nw-debts .nw-components { border-color: var(--ui-danger); }
body #nw-liquidity .qt-cards-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
body .qt-card-formula { font-size: 11px; line-height: 16px; color: var(--ui-muted); }
@media (min-width: 769px) {
    #overview .dashboard-grid { display: grid; grid-template-columns: minmax(0,1fr); grid-template-rows: 100%; grid-auto-rows: max-content; }
    #net-worth-card { min-height: 0; }
    .nw-branch { display: grid; grid-template-columns: var(--nw-total-width) minmax(0,1fr); gap: 0; }
    .nw-components { margin-top: 0; }
    body #nw-headline .qt-card, body #nw-balance-tree .qt-card, body #nw-liquidity .qt-card { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 2px 8px; }
    body #nw-headline .qt-card-label, body #nw-balance-tree .qt-card-label, body #nw-liquidity .qt-card-label { grid-column: 1; grid-row: 1; }
    body #nw-headline .qt-card-value, body #nw-balance-tree .qt-card-value, body #nw-liquidity .qt-card-value { grid-column: 2; grid-row: 1; }
    body #nw-headline .qt-card-delta, body #nw-balance-tree .qt-card-delta, body #nw-liquidity .qt-card-delta { grid-column: 1; grid-row: 3; }
    body #nw-headline .qt-card-monthly, body #nw-balance-tree .qt-card-monthly, body #nw-liquidity .qt-card-monthly { grid-column: 2; grid-row: 3; }
    body #nw-headline .qt-card-projection, body #nw-balance-tree .qt-card-projection, body #nw-liquidity .qt-card-projection { grid-column: 1 / -1; grid-row: 4; }
    body #nw-headline .qt-card-formula, body #nw-balance-tree .qt-card-formula, body #nw-liquidity .qt-card-formula { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 768px) {
    #net-worth-card .nw-control-row { flex-direction: column; }
    .nw-story { display: flex; flex-direction: column; min-height: 0; gap: 8px; flex: 0 0 auto; }
    #nw-headline { flex: 0 0 auto; }
    #net-worth-card .nw-chart-caption { min-height: 36px; }
    body .nw-components .qt-cards-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    body #nw-liquidity .qt-cards-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    body #nw-liquidity .qt-card-cell:last-child { grid-column: 1 / -1; }
}
@media (max-width: 360px) {
    /* An empty monthly change and a wrapped one occupy the same space. */
    body #nw-balance-tree .qt-card-delta,
    body #nw-balance-tree .qt-card-monthly,
    body #nw-liquidity .qt-card-delta,
    body #nw-liquidity .qt-card-monthly { min-height: 32px; }
}

/* One application layout: heading, controls, summary, then detail. Shared
   components own controls; this layer sets Money's content and density. */
.app-shell { --ui-control-height: 40px; }
.money-view-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 2px; margin: 0 0 12px; flex: 0 0 auto; }
.money-view-title { margin: 0; font: 600 20px/1.4 var(--ui-font-sans); color: var(--ui-text); }
.money-view-header .report-split { width: 100%; margin: 0; }
body .accounts-header-card { background: var(--ui-bg); border: 0; border-radius: 0; padding: 8px 2px; }
body .tab-content .card { border-radius: 12px; }
body .tab-content .card h3 { font: 600 16px/1.4 var(--ui-font-sans); letter-spacing: 0; text-transform: none; }
body .tab-content .card h4 { font: 600 14px/1.4 var(--ui-font-sans); }
body .tab-content .ui-kit-button { min-height: var(--ui-control-height); border-radius: 8px; padding: 8px 12px; font: 500 13px/1.4 var(--ui-font-sans); box-shadow: none; }
body .tab-content .range-btn { min-height: 36px; box-shadow: none; }
body .range-btn.active { background: var(--ui-accent-soft); border-color: var(--ui-border-strong); box-shadow: none; }
body .tab-content :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),select,textarea) { min-height: 40px; min-width: 0; max-width: 100%; font-size: 16px; border-radius: 8px; }
body .tab-content input[type="range"] { min-height: 36px; }
body .account-open, body .account-edit { min-height: 36px; min-width: 36px; }
body .account-sync-pill { font-size: 11px; }
body .account-item button[data-manual-delete] { min-height: 36px; min-width: 36px; }
body .sankey-legend-item.clickable { min-height: 36px; }
body .tab-content details > summary { min-height: 40px; font-size: 14px; }
body .money-summary-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
body .money-summary-grid .budget-focus-card { padding: 14px; border-radius: 8px; }
body .money-summary-grid .budget-focus-label { font-size: 12px; }
body .money-summary-grid .budget-focus-value { font-size: 26px; }
body .nav-section, body .section-switcher .tab { appearance: none; font-family: var(--ui-font-sans); cursor: pointer; }
body .section-switcher .tab { border-left: 0; border-right: 0; border-top: 0; border-radius: 0; background: transparent; }
body .nav-section:not(.active) { background: transparent; border-color: transparent; }
body :is(.nav-section,.section-switcher .tab,.ui-kit-button,.account-open,.account-edit):focus-visible { outline: 2px solid var(--ui-border-strong); outline-offset: 2px; }
@media (max-width: 768px) {
    .money-view-header { margin-bottom: 12px; }
    .money-view-title { font-size: 18px; }
    body .money-summary-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
    body .money-summary-grid .budget-focus-value { font-size: 22px !important; }
    body .money-summary-grid .budget-focus-card { min-width: 0; }
}

/* Age steppers share the compact control scale instead of oversized cards. */
body #advisor .advisor-mobile-levers { grid-template-columns: repeat(2,minmax(0,200px)); max-width: 408px; }
body #advisor .aml-lever { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0; border: 0; background: transparent; }
body #advisor .aml-lever-label { font-size: 12px; line-height: 16px; font-weight: 500; }
body #advisor .aml-lever-controls { width: auto; gap: 4px; }
body #advisor .aml-lever-btn { width: 36px; height: 36px; min-width: 36px; min-height: 36px; font-size: 16px; }
body #advisor .aml-lever-value { font-size: 13px; font-weight: 500; }
@media (max-width: 430px) {
    body #advisor .aml-lever { display: grid; gap: 4px; }
    body #advisor .aml-lever-controls { justify-content: flex-start; }
}

body #nw-assets .nw-branch-summary .qt-card-formula { color: var(--ui-success); }
body #nw-debts .nw-branch-summary .qt-card-formula { color: var(--ui-danger); }

/* Totals lead their component rows; the graph uses the space left over. */
@media (min-width: 769px) {
    .nw-story { min-height: 0; }
    body #net-worth-card .chart-container { min-height: 0; }
    body #nw-headline .qt-card-value,
    body .nw-branch-summary .qt-card-value { font-size: 20px; }
    body #nw-headline .qt-card-label,
    body .nw-branch-summary .qt-card-label { font-weight: 600; color: var(--ui-text); }
}
body .nw-branch-summary .qt-card { background: var(--ui-surface-2); }

/* Balance changes read top to bottom: total, yearly, monthly. Empty average
   slots stay reserved so range selections never move neighboring cards. */
body .qt-card-metric { column-gap: 4px; }
body .qt-card-yearly { min-height: 16px; font-size: 11px; line-height: 16px; }
@media (min-width: 769px) {
    #net-worth-card { gap: 8px; }
    body #net-worth-card { padding: 12px 16px; }
    body #qt-cards .qt-card { padding: 6px 8px; gap: 1px 6px; }
    body #qt-cards .qt-card-delta { grid-column: 1 / -1; grid-row: 3; }
    body #qt-cards .qt-card-yearly { grid-column: 1 / -1; grid-row: 4; }
    body #qt-cards .qt-card-monthly { grid-column: 1 / -1; grid-row: 5; }
    body #qt-cards .qt-card-projection { grid-column: 1 / -1; grid-row: 6; }
    body #qt-cards .qt-card-metric { min-height: 14px; line-height: 14px; font-size: 11px; }
    body #qt-cards .qt-card-formula { font-size: 11px; line-height: 14px; }
    body #nw-headline .qt-card-value, body .nw-branch-summary .qt-card-value { font-size: 18px; }
}
@media (min-width: 769px) and (max-width: 1100px) {
    body .nw-components .qt-card-label { grid-column: 1 / -1; }
    body .nw-components .qt-card-value { grid-column: 1 / -1; grid-row: 2; }
    body .app-navigation .last-sync { max-width: 155px; white-space: normal; font-size: 11px; line-height: 14px; text-align: right; }
    body .app-navigation .nav-section { padding: 0 8px; }
}

/* Keep visible change figures adjacent. Reserve unused metric space beneath
   the stack, so hiding Yearly never creates a hole between Total and Monthly. */
body .qt-card-changes { display: flex; flex-direction: column; min-height: 80px; gap: 0; }
body .qt-card-changes .qt-card-metric:empty { display: none; }
body .qt-card-changes .qt-card-metric { min-height: 16px; line-height: 16px; }
@media (min-width: 769px) {
    body #qt-cards .qt-card-changes { grid-column: 1 / -1; grid-row: 3; min-height: 56px; }
    body #qt-cards .qt-card-changes .qt-card-metric { min-height: 14px; line-height: 14px; }
}

/* Forecast assumptions use their existing disclosure rather than consuming
   an additional paragraph of the viewport on every projected chart. */
body .nw-projection-readout { min-height: 0; padding: 0; }
#nw-projection-basis { display: block; margin: 4px 0; }

@media (max-width: 768px) {
    /* Phone totals use the same compact label/value heading as desktop;
       leaf cards retain their readable two-column balance sheet. */
    #nw-headline { width: 100%; }
    body #qt-cards .qt-card { padding: 6px; }
    body .qt-card-changes { min-height: 64px; }
    body #qt-cards .qt-card-changes .qt-card-metric { min-height: 16px; }
    body #nw-headline .qt-card, body .nw-branch-summary .qt-card { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 2px 6px; }
    body #nw-headline .qt-card-label, body .nw-branch-summary .qt-card-label { grid-column: 1; grid-row: 1; }
    body #nw-headline .qt-card-value, body .nw-branch-summary .qt-card-value { grid-column: 2; grid-row: 1; }
    body #nw-headline .qt-card-formula, body .nw-branch-summary .qt-card-formula { grid-column: 1 / -1; grid-row: 2; }
    body #nw-headline .qt-card-changes, body .nw-branch-summary .qt-card-changes { grid-column: 1 / -1; grid-row: 3; }
    body .qt-card-projection .qt-metric-label { display: none; }
    body .qt-card-projection:not(:empty)::before { content: attr(data-short-label); color: var(--ui-muted); }
}

@media (max-width: 768px) {
    /* Compact the tree's whitespace, preserving the shared font/tap floors
       and all balances, averages and forecasts. */
    #net-worth-card { gap: 8px; }
    body #net-worth-card { padding: 12px; }
    body #net-worth-card .range-btn { min-height: 36px; padding: 6px; }
    body #qt-cards .qt-card { padding: 4px; }
    body #qt-cards .qt-card-label { min-height: 18px; }
    body .qt-card-changes { min-height: 56px; }
    body #qt-cards .qt-card-changes .qt-card-metric { min-height: 14px; line-height: 14px; }
    .nw-components { margin-top: 4px; }
    body .nw-components .qt-cards-grid { gap: 6px; }
    #nw-balance-tree { gap: 8px; }
    #nw-liquidity .qt-group-label { margin: 10px 0 6px; }
}

@media (max-width: 360px) {
    #net-worth-card { gap: 6px; }
    body #net-worth-card { padding: 10px; }
}

/* Desktop one-screen overview: Calculated views sit in the Net worth row,
   right of the Net worth card, on the same column grid as the component
   cards below. The label fills the first column so the three cards share
   the Net worth card's top edge. The chart shrinks to fit a short window but
   stops at 420px (its 16px top margin included in the 436px story); a tall
   window leaves the spare height below the card. Phones flatten .nw-sheet. */
.nw-sheet { display: contents; }
@media (min-width: 769px) {
    #net-worth-card { align-self: start; max-height: 100%; gap: 8px; }
    #net-worth-card .nw-story { flex: 1 1 436px; max-height: 436px; min-height: 0; }
    .nw-sheet {
        display: grid; order: 2; flex: 0 0 auto;
        grid-template-columns: var(--nw-total-width) minmax(0,1fr); gap: 8px 0;
    }
    #nw-headline { grid-column: 1; grid-row: 1; align-self: stretch; display: flex; width: auto; }
    #nw-headline > .qt-cards-grid { flex: 1 1 auto; }
    #nw-balance-tree { grid-column: 1 / -1; grid-row: 2; }
    #nw-liquidity {
        grid-column: 2; grid-row: 1;
        display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px;
        margin: 0 0 0 12px; padding-left: 12px; border-left: 1px solid var(--ui-border-strong);
    }
    #nw-liquidity > .qt-group-label { grid-column: 1; align-self: start; margin: 0; padding: 6px 0 0; }
    body #nw-liquidity > .qt-cards-grid { display: contents; }
    /* The slot holds the most any selection shows: Total, Yearly, Monthly and
       the Project ahead line. Selecting a range or horizon only fills it. */
    body #qt-cards .qt-card-changes { min-height: 56px; }
    /* Projection assumptions overlay the band above the chart instead of
       taking height, so choosing a horizon never resizes the chart. */
    #net-worth-card .nw-projection-readout { position: absolute; top: 0; right: 0; z-index: 2; margin: 0; }
    #net-worth-card .nw-projection-details summary { min-height: 16px; font-size: 12px; line-height: 16px; }
    #net-worth-card .nw-projection-details[open] {
        width: min(75ch,100%); padding: 0 12px 4px; background: var(--ui-surface-2);
        border: 1px solid var(--ui-border-strong); border-radius: 8px;
    }
}

/* One pane of glass. Overview spans the window; panes built around a reading width keep
   it. Top to bottom: controls; the chart, filling the height left over; a
   summary band -- Net worth, Total assets, Total debt -- in larger type; then
   uniform cards in Assets / Debts / Calculated rows, each leaf card listing
   its own accounts. */
body .app-shell { max-width: none; }
body .tab-content:not(#overview) { max-width: 1440px; margin-inline: auto; width: 100%; }
:root {
    --nw-chart-font: 11px;
    /* Used across this file but never defined by the shared kit, so every
       border that named it rendered as none: one step above --ui-border. */
    --ui-border-strong: #3d4552;
}
#net-worth-card { --nw-leaf-cols: 4; --nw-row-label: 96px; }
.nw-hero { display: contents; }
.nw-row-head { display: flex; flex-direction: column; gap: 2px; }
.nw-row-head .qt-card-label { font-weight: 600; color: var(--ui-muted); }
.nw-chart-label { min-height: 16px; font-size: 13px; line-height: 16px; color: var(--ui-muted); }
.nw-chart-label:empty { visibility: hidden; }

/* Totals row: same grid, size and card style as the rows beneath it. */
.nw-summary-cell { display: flex; min-width: 0; }
.nw-summary-cell > .qt-card-cell { flex: 1 1 auto; }
.nw-totals-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.nw-summary .needs-you-chip { align-self: flex-start; margin-top: 6px; }

/* Settings: manual assets and debts. */
.manual-assets-list { display: grid; gap: 0; margin-bottom: 12px; }
.manual-asset-row {
    display: grid; grid-template-columns: minmax(0,1fr) auto auto auto auto; align-items: center; gap: 8px 12px;
    min-height: 44px; border-bottom: 1px solid var(--ui-border);
}
.manual-asset-name { color: var(--ui-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.manual-asset-type { color: var(--ui-muted); font-size: 12px; }
.manual-asset-value { font-family: var(--ui-font-mono); }
.manual-asset-form { display: flex; flex-wrap: wrap; gap: 8px; }
.manual-asset-form :is(input,select) { min-height: 40px; font-size: 16px; }

/* Leaf and calculated cards: the card (selectable) and its account list read
   as one panel; dimming is opacity only, so nothing moves. */
body #net-worth-card :is(.nw-components,#nw-liquidity,.nw-totals-grid) .qt-card-cell {
    flex-direction: column; border: 1px solid var(--ui-border); border-radius: 12px;
    background: var(--ui-surface); transition: opacity 160ms ease; min-height: 0;
}
body #net-worth-card :is(.nw-components,#nw-liquidity,.nw-totals-grid) .qt-card { flex: 0 0 auto; border: 0; background: transparent; border-radius: 12px 12px 0 0; align-content: start; }
body #net-worth-card :is(.nw-components,#nw-liquidity,.nw-totals-grid) .qt-card-changes { min-height: 0; }
body #net-worth-card .qt-card-cell:has(> .qt-card.is-asset-member) { border-color: rgba(127, 168, 145, 0.5); background: rgba(127, 168, 145, 0.08); }
body #net-worth-card .qt-card-cell:has(> .qt-card.is-debt-member) { border-color: rgba(205, 138, 143, 0.5); background: rgba(205, 138, 143, 0.08); }
body #net-worth-card :is(.nw-components,#nw-liquidity,.nw-totals-grid) .qt-card-cell:has(> .qt-card.is-active) { border-color: rgba(185, 193, 204, 0.24); background: var(--ui-accent-soft); }
body #net-worth-card .qt-card-cell.is-dim { opacity: 0.45; }
.nw-acct-list { list-style: none; margin: 0 8px 6px; padding: 0; border-top: 1px solid var(--ui-border); overflow-y: auto; }
.nw-acct-row {
    display: grid; grid-template-columns: minmax(0,1fr) auto; column-gap: 8px; width: 100%; min-height: 36px;
    padding: 4px 0; border: 0; border-bottom: 1px solid var(--ui-border); background: transparent; color: inherit;
    font: inherit; text-align: left; cursor: pointer;
}
.nw-acct-list li:last-child .nw-acct-row { border-bottom: 0; }
.nw-acct-row:hover .nw-acct-name { text-decoration: underline; }
.nw-acct-row:focus-visible { outline: 2px solid var(--ui-border-strong); outline-offset: 1px; }
.nw-acct-name { font-size: 12px; line-height: 16px; color: var(--ui-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nw-acct-bal { font: 12px/16px var(--ui-font-mono); color: var(--ui-text); }
.nw-acct-inst { grid-column: 1 / -1; font-size: 11px; line-height: 14px; color: var(--ui-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nw-acct-inst .account-sync-pills { display: inline-flex; gap: 4px; margin-left: 6px; vertical-align: middle; }
.nw-acct-none { font-size: 12px; color: var(--ui-muted); padding: 6px 0; }

@media (max-width: 768px) {
    .nw-summary { order: 2; }
    .nw-row-head { margin: 10px 0 6px; }
    .nw-acct-list { max-height: 200px; }
}
@media (min-width: 769px) {
    body #overview #net-worth-card {
        display: grid; align-content: start; gap: 12px; grid-template-columns: minmax(0,1fr);
        border: 0; background: transparent; padding: 0; box-shadow: none; max-height: none; overflow: visible;
    }
    body #overview .dashboard-grid { grid-template-rows: auto; }
    body #net-worth-card .nw-sheet { display: contents; }
    /* Every row spans the pane; an older layer pinned #nw-liquidity to column 2,
       which silently created a second implicit column. */
    body #net-worth-card > :is(.nw-control-row,.nw-hero,.nw-summary),
    body #net-worth-card .nw-sheet > :is(#nw-balance-tree,#nw-liquidity) { grid-column: 1 / -1; }
    body #net-worth-card .nw-control-row { grid-row: 1; }
    body #net-worth-card .nw-hero {
        grid-row: 2; display: block; padding: 12px 14px;
        border: 1px solid var(--ui-border); border-radius: 12px; background: var(--ui-surface);
    }
    body #net-worth-card .nw-story { height: 320px; min-height: 0; max-height: none; margin: 0; padding: 0; border: 0; }
    body #net-worth-card .nw-summary { grid-row: 3; }
    body #net-worth-card #nw-headline { width: auto; }
    body #net-worth-card #nw-balance-tree { grid-row: 4; gap: 12px; }
    body #net-worth-card #nw-liquidity { grid-row: 5; margin: 0; padding: 0; border: 0; }
    /* One grid template for all three rows: a slim row label, then uniform cards. */
    body #net-worth-card :is(.nw-summary,.nw-branch,#nw-liquidity) { display: grid; grid-template-columns: var(--nw-row-label) minmax(0,1fr); gap: 12px; }
    body .nw-components { margin: 0; padding: 0; border: 0; }
    body #net-worth-card :is(.nw-components .qt-cards-grid,#nw-liquidity > .qt-cards-grid,.nw-totals-grid) {
        display: grid; grid-column: 2; grid-template-columns: repeat(var(--nw-leaf-cols),minmax(0,1fr));
        grid-auto-rows: auto; margin: 0; padding: 0; border: 0;
    }
    body #net-worth-card :is(.nw-summary,.nw-branch,#nw-liquidity) > .nw-row-head { grid-column: 1; padding-top: 12px; }
    /* Side colour on the two totals, as on their member cards. */
    body #net-worth-card #nw-summary [data-side="asset"] .qt-card-cell:not(:has(> .qt-card.is-active)) { border-color: rgba(127, 168, 145, 0.5); }
    body #net-worth-card #nw-summary [data-side="debt"] .qt-card-cell:not(:has(> .qt-card.is-active)) { border-color: rgba(205, 138, 143, 0.5); }
    body #net-worth-card .nw-acct-list { flex: 1 1 auto; min-height: 0; }
}
/* One type step for wide windows (a half-screen browser on an ultrawide is ~2458px). */
@media (min-width: 2000px) {
    :root { --nw-chart-font: 13px; }
    #net-worth-card { --nw-row-label: 120px; }
    body #qt-cards .qt-card { padding: 12px 14px; }
    body #qt-cards .qt-card-label { font-size: 14px; line-height: 18px; }
    body #qt-cards .qt-card-value { font-size: 24px; line-height: 30px; }
    body #qt-cards :is(.qt-card-delta,.qt-card-yearly,.qt-card-monthly,.qt-card-projection,.qt-card-formula,.qt-card-metric) { font-size: 13px; line-height: 18px; min-height: 18px; }
    .nw-acct-name, .nw-acct-bal { font-size: 14px; line-height: 18px; }
    .nw-acct-inst { font-size: 12px; line-height: 16px; }
    .nw-acct-row { min-height: 40px; }
    .nw-acct-list { margin: 0 14px 10px; }
    .nw-row-head .qt-card-label { font-size: 14px; line-height: 18px; }
    .nw-chart-label { font-size: 14px; line-height: 18px; }
}
/* The Overview pane is as tall as its content (fitNwChart sizes the chart
   from the window); the older one-screen rules shrank it to the leftover
   height, so an open Settings drawer slid under the cards. */
body:has(#overview.tab-content.active) .page { flex: 1 0 auto; }
body #overview.tab-content.active { flex: 0 0 auto; }
@media (min-width: 769px) {
    /* Totals cards use the leaf cards' layout: label left, value right. */
    body #nw-summary .qt-card { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 1px 6px; }
    body #nw-summary .qt-card-label { grid-column: 1; grid-row: 1; }
    body #nw-summary .qt-card-value { grid-column: 2; grid-row: 1; }
    body #nw-summary .qt-card-formula { grid-column: 1 / -1; grid-row: 2; }
    body #nw-summary .qt-card-changes { grid-column: 1 / -1; grid-row: 3; }
}
@media (min-width: 769px) {
    /* Net worth reads exactly like the other totals; only
       the selection fill, which any selected card gets, sets it apart. */
    body #qt-cards #nw-summary .qt-card .qt-card-label { font-weight: 400; color: var(--ui-muted); }
    body #qt-cards #nw-summary .qt-card.is-active .qt-card-label { color: var(--ui-text); }
}

/* No vertical page scroll. Cards are as tall as their content; fitNwChart gives the
   chart what is left and compacts cards only when the window is too short. */
@media (min-width: 769px) {
    body #net-worth-card :is(.nw-components,#nw-liquidity,.nw-totals-grid) .qt-card-cell { cursor: pointer; }

    body #net-worth-card.nw-fit-2 .nw-acct-list { max-height: 112px; }
    body #net-worth-card.nw-fit-3 .nw-acct-list { max-height: 72px; }
    body #net-worth-card.nw-fit-4 .nw-acct-list { max-height: 36px; }
    body #net-worth-card:is(.nw-fit-2,.nw-fit-3,.nw-fit-4) .nw-acct-row { min-height: 32px; padding: 2px 0; }
    /* Space between categories, and row labels that read as headings. */
    body #net-worth-card .nw-sheet > #nw-balance-tree { gap: 28px; }
    body #net-worth-card :is(.nw-summary,.nw-sheet > #nw-balance-tree,.nw-sheet > #nw-liquidity) { margin-top: 16px; }
    #net-worth-card { --nw-row-label: 128px; }
    body #net-worth-card :is(.nw-summary,.nw-branch,#nw-liquidity) > .nw-row-head { padding-top: 8px; }
    body #net-worth-card .nw-row-head .qt-card-label { font-size: 18px; line-height: 24px; font-weight: 600; color: var(--ui-text); }
}
@media (min-width: 2000px) {
    #net-worth-card { --nw-row-label: 160px; }
    body #net-worth-card .nw-row-head .qt-card-label { font-size: 22px; line-height: 28px; }
}
@media (max-width: 768px) {
    #net-worth-card .nw-row-head .qt-card-label { font-size: 16px; line-height: 22px; font-weight: 600; color: var(--ui-text); }
    #net-worth-card .nw-row-head { margin-top: 16px; }
}
@media (min-width: 769px) {
    /* The last two fit steps trade category spacing and label size for height. */
    body #net-worth-card:is(.nw-fit-3,.nw-fit-4) .nw-sheet > #nw-balance-tree { gap: 12px; }
    body #net-worth-card:is(.nw-fit-3,.nw-fit-4) :is(.nw-summary,.nw-sheet > #nw-balance-tree,.nw-sheet > #nw-liquidity) { margin-top: 4px; }
    body #net-worth-card.nw-fit-4 .nw-row-head .qt-card-label { font-size: 15px; line-height: 20px; }
    body #net-worth-card.nw-fit-4 .qt-card { padding-top: 4px; padding-bottom: 2px; }
    body #net-worth-card.nw-fit-4 .nw-hero { padding: 6px 10px; }
}
/* Accounts are the card total's subcategories: indented inside the card to
   show that the total is the sum of the rows below, behind a guide line. */
.nw-acct-list { margin: 2px 8px 8px 18px; padding-left: 10px; border-top: 0; border-left: 1px solid var(--ui-border-strong); }
@media (min-width: 2000px) {
    .nw-acct-list { margin: 4px 14px 10px 26px; padding-left: 14px; }
}

/* Design language: bigger text on totals, a clear visual hierarchy, and a
   line under the total above the accounts. Four levels, one step of size and
   weight each:
   row label > card total > metric table > accounts. */
#net-worth-card { --nw-pad-x: 12px; }
@media (min-width: 769px) {
    body #net-worth-card .qt-card { padding: 10px var(--nw-pad-x) 6px; }
    body #qt-cards #net-worth-card .qt-card .qt-card-label { font-size: 13px; line-height: 18px; font-weight: 400; color: var(--ui-muted); }
    body #qt-cards #net-worth-card .qt-card.is-active .qt-card-label { color: var(--ui-text); }
    body #qt-cards #net-worth-card .qt-card-value { font-size: 22px; line-height: 28px; font-weight: 600; color: var(--ui-text); font-variant-numeric: tabular-nums; }
    /* Row 2: what the total is made of ("5 accounts", a formula). */
    body #qt-cards #net-worth-card .qt-card-formula { grid-column: 1 / -1; grid-row: 2; min-height: 16px; font-size: 11px; line-height: 16px; color: var(--ui-muted); }
    /* Metric table: Total / Yearly / Monthly / Projected, labels left, values in a right-aligned mono column. */
    body #qt-cards #net-worth-card .qt-card-changes {
        display: grid; grid-template-columns: auto 1fr; column-gap: 8px; row-gap: 0; min-height: 0; margin-top: 4px;
    }
    body #qt-cards #net-worth-card .qt-card-metric { display: contents; }
    body #qt-cards #net-worth-card .qt-metric-label { grid-column: 1; font-size: 12px; line-height: 16px; color: var(--ui-muted); }
    body #qt-cards #net-worth-card .qt-metric-value { grid-column: 2; text-align: right; font: 12px/16px var(--ui-font-mono); font-variant-numeric: tabular-nums; }
    body #qt-cards #net-worth-card .qt-card-metric.positive .qt-metric-value { color: var(--ui-success); }
    body #qt-cards #net-worth-card .qt-card-metric.negative .qt-metric-value { color: var(--ui-danger); }
    body #qt-cards #net-worth-card .qt-card-delta.is-partial .qt-metric-label { text-decoration: underline dotted; text-underline-offset: 2px; }
    /* The divider: total and its metrics above, the accounts that make it up below. */
    body #net-worth-card .nw-acct-list {
        margin: 6px var(--nw-pad-x) 8px 18px; padding: 4px 0 0 10px;
        border-top: 1px solid var(--ui-border-strong); border-left: 1px solid var(--ui-border-strong);
    }
    .nw-acct-bal { font-variant-numeric: tabular-nums; }
    .nw-acct-row[data-zero] :is(.nw-acct-name,.nw-acct-bal) { color: var(--ui-muted); }
    .nw-acct-row[data-stale] .nw-acct-bal { color: var(--ui-muted); }
    .nw-acct-status { color: var(--ui-warning); }
    /* Compaction for short windows, in order. */
    body #net-worth-card:is(.nw-fit-1,.nw-fit-2,.nw-fit-3,.nw-fit-4) .qt-card-changes { grid-template-columns: auto 1fr auto 1fr; }
    body #net-worth-card:is(.nw-fit-1,.nw-fit-2,.nw-fit-3,.nw-fit-4) .qt-metric-label:nth-child(1) { grid-column: auto; }
    body #qt-cards #net-worth-card:is(.nw-fit-1,.nw-fit-2,.nw-fit-3,.nw-fit-4) .qt-metric-label { grid-column: auto; }
    body #qt-cards #net-worth-card:is(.nw-fit-1,.nw-fit-2,.nw-fit-3,.nw-fit-4) .qt-metric-value { grid-column: auto; }
    body #qt-cards #net-worth-card:is(.nw-fit-3,.nw-fit-4) #nw-balance-tree .qt-card-formula { display: none; }
    body #net-worth-card :is(.nw-summary,.nw-branch,#nw-liquidity) > .nw-row-head { padding-top: 10px; }
}
@media (min-width: 2000px) {
    #net-worth-card { --nw-pad-x: 14px; }
    body #qt-cards #net-worth-card .qt-card .qt-card-label { font-size: 15px; line-height: 20px; }
    body #qt-cards #net-worth-card .qt-card-value { font-size: 32px; line-height: 38px; }
    body #qt-cards #net-worth-card .qt-card-formula { font-size: 13px; line-height: 18px; }
    body #qt-cards #net-worth-card :is(.qt-metric-label,.qt-metric-value) { font-size: 14px; line-height: 18px; }
    body #net-worth-card .nw-acct-list { margin: 8px var(--nw-pad-x) 10px 26px; padding: 6px 0 0 14px; }
    body #net-worth-card :is(.nw-summary,.nw-branch,#nw-liquidity) > .nw-row-head { padding-top: 12px; }
}
@media (min-width: 769px) {
    /* fit-5, last resort before the chart floor: one-line totals block. */
    body #qt-cards #net-worth-card.nw-fit-5 .qt-card-value { font-size: 18px; line-height: 22px; }
    body #qt-cards #net-worth-card.nw-fit-5 .qt-card-formula { display: none; }
    body #net-worth-card.nw-fit-5 .nw-acct-list { max-height: 36px; margin-top: 2px; margin-bottom: 4px; }
    body #net-worth-card.nw-fit-5 .nw-sheet > #nw-balance-tree { gap: 8px; }
    body #net-worth-card.nw-fit-5 :is(.nw-summary,.nw-sheet > #nw-balance-tree,.nw-sheet > #nw-liquidity) { margin-top: 0; }
    body #net-worth-card.nw-fit-5 .nw-row-head .qt-card-label { font-size: 14px; line-height: 18px; }
    body #net-worth-card:is(.nw-fit-1,.nw-fit-2,.nw-fit-3,.nw-fit-4,.nw-fit-5) .qt-card-changes { grid-template-columns: auto 1fr auto 1fr; column-gap: 8px; }
}

/* Design pass, third revision: total type steps with width, accounts
   hang off a tree bracket, status sits right on the institution line. */
@media (min-width: 769px) {
    .nw-acct-row { grid-template-columns: minmax(0,1fr) auto; }
    .nw-acct-inst { grid-column: 1; }
    .nw-acct-status { grid-column: 2; justify-self: end; font-size: 11px; line-height: 14px; color: var(--ui-warning); }
    .nw-acct-status.is-reauth { color: var(--ui-danger); }
    .nw-acct-status:empty { display: none; }
    /* Tree bracket: a guide from under the divider, a tick into each row. */
    body #net-worth-card .nw-acct-list { border-left: 0; padding-left: 0; }
    body #net-worth-card .nw-acct-list li { position: relative; padding-left: 12px; border-left: 1px solid var(--ui-border-strong); }
    body #net-worth-card .nw-acct-list li::before { content: ""; position: absolute; left: 0; top: 18px; width: 8px; height: 1px; background: var(--ui-border-strong); }
    body #net-worth-card .nw-acct-list li:last-child { border-left-color: transparent; }
    body #net-worth-card .nw-acct-list li:last-child::after { content: ""; position: absolute; left: -1px; top: 0; width: 1px; height: 18px; background: var(--ui-border-strong); }
    /* fit-6: hide change rows that carry no figure. */
    body #qt-cards #net-worth-card.nw-fit-6 .qt-card-value { font-size: 18px; line-height: 22px; }
    body #qt-cards #net-worth-card.nw-fit-6 :is(.qt-card-formula) { display: none; }
    body #net-worth-card.nw-fit-6 .nw-acct-list { max-height: 36px; margin-top: 2px; margin-bottom: 4px; }
    body #net-worth-card.nw-fit-6 .nw-sheet > #nw-balance-tree { gap: 6px; }
    body #net-worth-card.nw-fit-6 :is(.nw-summary,.nw-sheet > #nw-balance-tree,.nw-sheet > #nw-liquidity) { margin-top: 0; }
    body #net-worth-card.nw-fit-6 .nw-row-head .qt-card-label { font-size: 14px; line-height: 18px; }
    body #net-worth-card.nw-fit-6 .qt-card-changes { grid-template-columns: auto 1fr auto 1fr auto 1fr; }
    body #net-worth-card.nw-fit-6 .nw-hero { padding: 4px 8px; }
}
@media (min-width: 1600px) {
    body #qt-cards #net-worth-card .qt-card-value { font-size: 26px; line-height: 32px; }
}
@media (min-width: 2000px) {
    body #qt-cards #net-worth-card .qt-card-value { font-size: 34px; line-height: 40px; }
    body #net-worth-card .nw-acct-list li { padding-left: 16px; }
    body #net-worth-card .nw-acct-list li::before { top: 20px; width: 10px; }
    body #net-worth-card .nw-acct-list li:last-child::after { height: 20px; }
    .nw-acct-status { font-size: 12px; line-height: 16px; }
}
@media (min-width: 769px) {
    body #qt-cards #net-worth-card .qt-card-metric.is-empty .qt-metric-value { color: var(--ui-muted); }
}
/* Makeup pills are disabled (not hidden) on a leaf selection: nothing moves. */
#nw-makeup .range-btn.is-disabled { opacity: 0.45; cursor: not-allowed; }
/* Demo pill: sample-data builds only, in the top bar. Warning colour: it is a caveat. */
.demo-banner {
    display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 999px; border: 1px solid var(--ui-warning);
    color: var(--ui-warning); font-size: 12px; line-height: 18px; font-weight: 600; white-space: nowrap;
}
@media (max-width: 768px) { .demo-banner { font-size: 11px; padding: 1px 8px; } }
@media (min-width: 769px) {
    /* No made-of line on totals and leaves: the metric
       table sits directly under the label/total row; Calculated keeps its
       formula line. Even rhythm: total -> 4px -> metrics -> 8px -> divider. */
    body #qt-cards #net-worth-card .qt-card-changes { grid-row: 2; margin-top: 4px; }
    body #qt-cards #net-worth-card #nw-liquidity .qt-card-changes { grid-row: 3; }
    body #net-worth-card .nw-acct-list { margin-top: 8px; }
}
@media (min-width: 769px) {
    /* Breakdown legend on account rows: the row's tree tick takes the band
       colour and thickens; the text edge stays clean. */
    body #net-worth-card .nw-acct-list li.is-slice::before { background: var(--nw-slice); height: 3px; width: 10px; top: 17px; border-radius: 2px; }
}
@media (min-width: 2000px) {
    body #net-worth-card .nw-acct-list li.is-slice::before { width: 12px; top: 19px; }
}

/* Pre-ship sweep. */
/* Compact lists say how many rows they hold; full lists never show the cue. */
.nw-acct-more { display: none; font-size: 11px; line-height: 16px; color: var(--ui-muted); padding: 2px 0 0 12px; }
body #net-worth-card:is(.nw-fit-4,.nw-fit-5,.nw-fit-6) .nw-acct-more { display: block; }
body #net-worth-card:is(.nw-fit-4,.nw-fit-5,.nw-fit-6) .nw-acct-list li:not(:first-child):not(.nw-acct-more) { display: none; }
body #net-worth-card:is(.nw-fit-4,.nw-fit-5,.nw-fit-6) .nw-acct-list { max-height: none; overflow: visible; }
.nw-acct-list li.nw-acct-more { border-left-color: transparent; }
.nw-acct-list li.nw-acct-more::before, .nw-acct-list li.nw-acct-more::after { display: none; }
.nw-acct-list { scrollbar-width: thin; }
/* Metric lines bottom-align so a two-line label never offsets them. */
@media (min-width: 769px) {
    body #qt-cards #net-worth-card #nw-liquidity .qt-card-changes { align-self: end; }
}
/* Capped panes: their sub-tabs sit over their own 1440px column. */
body:not(:has(#overview.tab-content.active)) .subnav-panel { max-width: 1440px; margin-inline: auto; }
body .subnav-panel .tab { white-space: nowrap; }
@media (max-width: 768px) {
    /* Phone: Net worth first and full width; account names get their own line. */
    body #nw-summary .nw-totals-grid > #nw-headline { order: -1; grid-column: 1 / -1; }
    .nw-acct-row { grid-template-columns: minmax(0,1fr) auto; }
    .nw-acct-name { white-space: normal; overflow: visible; }
    body .app-navigation .nav-section { white-space: nowrap; font-size: 12px; }
}
@media (min-width: 769px) {
    /* Smallest fit step only (about 1280x800): the blank Projected line gives
       its height back so the page still fits; Per year keeps its label. */
}
.nw-acct-more .nw-all-n { display: none; }
@media (min-width: 769px) {
    /* Smallest step: the account list is one "N accounts" line. */
    body #net-worth-card.nw-fit-6 .nw-acct-list li:not(.nw-acct-more) { display: none; }
    body #net-worth-card.nw-fit-6 .nw-acct-list:not(:has(.nw-acct-more)) li:first-child { display: block; }
    body #net-worth-card.nw-fit-6 .nw-acct-more .nw-more-n { display: none; }
    body #net-worth-card.nw-fit-6 .nw-acct-more .nw-all-n { display: inline; }
}
@media (max-width: 768px) {
    /* The detail sheet stays inside a 320px screen. */
    .account-detail-panel { max-width: calc(100vw - 1.2rem); box-sizing: border-box; }
}
.demo-banner .demo-short { display: none; }
@media (max-width: 1100px) {
    /* Phones and narrow windows: a short pill so the sync and settings icons
       keep their place; the full sentence stays in its title. */
    .demo-banner .demo-long { display: none; }
    .demo-banner .demo-short { display: inline; }
}
@media (min-width: 769px) {
    /* Smallest step, fixed per window (never per click): tighter metric lines,
       no formula line, tighter rows. Keeps 1280x800 scroll-free while the
       Projected line stays reserved. */
    body #qt-cards #net-worth-card.nw-fit-6 :is(.qt-metric-label,.qt-metric-value) { font-size: 11px; line-height: 13px; }
    body #qt-cards #net-worth-card.nw-fit-6 .qt-card-metric { min-height: 13px; }
    body #qt-cards #net-worth-card.nw-fit-6 #nw-liquidity .qt-card-formula { display: none; }
    body #qt-cards #net-worth-card.nw-fit-6 .qt-card-changes { margin-top: 2px; }
    body #net-worth-card.nw-fit-6 { gap: 6px; }
}
@media (max-width: 768px) {
    /* Phones use the same metric table as desktop: one line per figure, label
       left, value right, never wrapping, so a range change that swaps
       "+$571.1" for "+$2.3K" cannot re-wrap a line and resize the card
       (caught by the narrow layout-stability check on 2026-10-03). */
    body #qt-cards #net-worth-card .qt-card-changes {
        display: grid; grid-template-columns: auto minmax(0,1fr); column-gap: 6px; row-gap: 0; min-height: 0;
    }
    body #qt-cards #net-worth-card .qt-card-metric { display: contents; }
    body #qt-cards #net-worth-card .qt-metric-label { grid-column: 1; white-space: nowrap; font-size: 11px; line-height: 15px; color: var(--ui-muted); }
    body #qt-cards #net-worth-card .qt-metric-value { grid-column: 2; text-align: right; white-space: nowrap; font: 11px/15px var(--ui-font-mono); font-variant-numeric: tabular-nums; }
    body #qt-cards #net-worth-card .qt-card-metric.positive .qt-metric-value { color: var(--ui-success); }
    body #qt-cards #net-worth-card .qt-card-metric.negative .qt-metric-value { color: var(--ui-danger); }
    body #qt-cards #net-worth-card .qt-card-projection .qt-metric-label { display: inline; }
    body #qt-cards #net-worth-card .qt-card-projection:not(:empty)::before { content: none; }
}
@media (max-width: 768px) {
    /* Projection assumptions float over the chart on phones too, as on
       desktop: turning a horizon on must not push the cards down
       (caught by the all-viewport card-box check, 2026-10-03). */
    #net-worth-card .nw-story { position: relative; }
    #net-worth-card .nw-projection-readout { position: absolute; top: 0; right: 0; z-index: 2; margin: 0; min-height: 0; padding: 0; }
    #net-worth-card .nw-projection-details summary { min-height: 36px; font-size: 12px; line-height: 16px; }
    #net-worth-card .nw-projection-details[open] {
        width: min(75ch, calc(100vw - 48px)); padding: 0 12px 4px; background: var(--ui-surface-2);
        border: 1px solid var(--ui-border-strong); border-radius: 8px;
    }
}

/* Housing is a fourth Advisor view; these rules layer on the current Advisor layout. */
body #advisor #advisor-housing { display: none; }
body #advisor .advisor-workspace[data-view="housing"] { grid-template-columns: minmax(0,1fr); grid-template-rows: auto auto; grid-template-areas: "verdict" "housing"; min-height: 420px; }
body #advisor .advisor-workspace[data-view="housing"] :is(.advisor-mobile-levers,#advisor-spending,#advisor-balances,#advisor-fire,#projection-legend,.adv-chart-block) { display: none; }
body #advisor .advisor-workspace[data-view="housing"] #advisor-housing { grid-area: housing; display: grid; grid-template-columns: minmax(0,1fr); grid-template-rows: auto auto auto auto minmax(110px, 1fr); gap: 10px; min-width: 0; min-height: 0; }
body #advisor .advisor-housing-head { display: flex; flex-wrap: wrap; align-items: start; justify-content: space-between; gap: 12px; min-width: 0; }
body #advisor .advisor-housing-head > div { flex: 1 1 220px; min-width: 0; overflow-wrap: anywhere; }
body #advisor .advisor-housing-head h3 { margin: 0; font-size: 16px; }
body #advisor .advisor-housing-head p, body #advisor .advisor-housing-note { margin: 3px 0 0; color: var(--ui-muted); font-size: 12px; line-height: 17px; }
body #advisor .advisor-housing-inputs { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 8px; }
body #advisor .advisor-housing-inputs label { display: grid; gap: 3px; min-width: 0; color: var(--ui-muted); font-size: 11px; }
body #advisor .advisor-housing-inputs input { min-width: 0; height: 32px; padding: 3px 6px; font-size: 14px; }
body #advisor .housing-comparison-results { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
body #advisor .housing-context { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px 16px; color: var(--ui-muted); font-size: 11px; }
body #advisor .housing-context strong, body #advisor .housing-scenario > strong { font-family: var(--ui-font-mono); }
body #advisor .housing-scenario { min-width: 0; padding: 8px; border: 1px solid var(--ui-border-soft); border-radius: 8px; background: var(--ui-surface-2); }
body #advisor .housing-scenario h4 { margin: 0 0 5px; font-size: 12px; }
body #advisor .housing-scenario > strong { display: block; font-size: 18px; }
body #advisor .housing-scenario > span, body #advisor .housing-scenario dt { color: var(--ui-muted); font-size: 10px; }
body #advisor .housing-scenario dl { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 5px; margin: 8px 0 0; }
body #advisor .housing-scenario dd { margin: 1px 0 0; font-size: 11px; overflow-wrap: anywhere; }
body #advisor .housing-age-table-section { grid-column: 1 / -1; min-width: 0; }
body #advisor .housing-age-table-section h4 { margin: 2px 0 5px; font-size: 13px; }
body #advisor .housing-age-table-wrap { max-width: 100%; min-width: 0; overflow-x: auto; overscroll-behavior-inline: contain; -webkit-overflow-scrolling: touch; border: 1px solid var(--ui-border-soft); border-radius: 8px; }
body #advisor .housing-age-table-wrap:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 2px; }
body #advisor .housing-age-table { width: 100%; min-width: 640px; border-collapse: collapse; font-family: var(--ui-font-mono); font-size: 11px; }
body #advisor .housing-age-table caption { caption-side: top; padding: 6px 8px; text-align: left; color: var(--ui-muted); font-family: var(--ui-font); font-size: 11px; line-height: 16px; }
body #advisor .housing-age-table :is(th,td) { padding: 6px 8px; border-top: 1px solid var(--ui-border-soft); text-align: right; white-space: nowrap; }
body #advisor .housing-age-table thead th { border-top: 0; color: var(--ui-muted); font-family: var(--ui-font); font-size: 10px; font-weight: 600; }
body #advisor .housing-age-table :is(th:first-child,tbody th) { text-align: left; position: sticky; left: 0; z-index: 1; background: var(--ui-surface-2); }
body #advisor .housing-age-table-note { margin: 5px 0 0; color: var(--ui-muted); font-size: 11px; line-height: 16px; }
body #advisor .housing-chart-wrap { min-width: 0; min-height: 110px; position: relative; }
@media (max-width: 768px) {
  body #advisor .advisor-verdict { grid-template-columns: minmax(0,1fr); grid-template-rows: auto auto auto; grid-template-areas: "plan" "funded" "actions"; }
  body #advisor .advisor-actions { flex-wrap: wrap; min-width: 0; }
  body #advisor .advisor-workspace[data-view="housing"] { min-height: 0; }
  body #advisor .advisor-workspace[data-view="housing"] #advisor-housing { overflow: visible; }
  body #advisor .advisor-housing-inputs { grid-template-columns: repeat(2,minmax(0,1fr)); }
  body #advisor .housing-comparison-results { grid-template-columns: 1fr; }
  body #advisor .housing-scenario dl { grid-template-columns: repeat(2,minmax(0,1fr)); }
  body #advisor .housing-age-table-section h4 { font-size: 14px; }
  body #advisor .housing-age-table { font-size: 14px; }
  body #advisor .housing-age-table :is(th,td), body #advisor .housing-age-table thead th { font-size: 14px; }
  body #advisor .housing-age-table caption { font-size: 13px; line-height: 18px; }
  body #advisor .housing-age-table-note { font-size: 13px; line-height: 18px; }
  body #advisor .advisor-housing-inputs input { min-height: 40px; font-size: 16px; }
  body #advisor #housing-refresh-rates { min-height: 40px; }
  body #advisor :is(.advisor-housing-head p,.advisor-housing-note,.advisor-housing-inputs label,.housing-context,.housing-scenario h4,.housing-scenario > span,.housing-scenario dt,.housing-scenario dd) { font-size: 14px; line-height: 20px; }
  body #advisor .housing-chart-wrap { height: 190px; }
}

/* Settings pane. */
#settings-btn[aria-current="page"] { border-color: var(--ui-border-strong) !important; background: var(--ui-accent-soft) !important; }
.settings-page { display: grid; gap: 16px; max-width: 960px; min-width: 0; }
.settings-page > * { min-width: 0; margin: 0; }
.settings-intro, .settings-section-intro { margin: 0; }
.settings-help { color: var(--ui-muted); font-size: 12px; line-height: 18px; margin: 0; }
.settings-section { display: grid; gap: 12px; align-content: start; }
.settings-section > h3 { margin: 0; }
.settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 16px; align-items: start; }
.settings-field { min-width: 0; gap: 6px; align-content: start; }
.settings-field.settings-wide { grid-column: 1 / -1; }
.settings-field-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 8px; }
.settings-field-head > label, .settings-label { font: 500 13px/1.4 var(--ui-font-sans); color: var(--ui-text); }
.settings-source { font-size: 11px; line-height: 16px; color: var(--ui-muted); display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.settings-source-label.is-overridden { color: var(--ui-accent-strong); font-weight: 600; }
.settings-source-label.is-pending { color: var(--ui-warning); }
.settings-link { background: none !important; border: 0 !important; padding: 0; min-height: 0; color: var(--ui-accent-strong); font: inherit; text-decoration: underline; cursor: pointer; }
.settings-link:focus-visible { outline: 2px solid var(--ui-border-strong); outline-offset: 2px; }
.settings-field textarea { min-height: 72px; padding: 8px 12px; resize: vertical; font-size: 16px; border-radius: 8px; border: 1px solid var(--ui-border); background: var(--ui-surface-2); color: var(--ui-text); }
.settings-error { margin: 0; font-size: 12px; line-height: 18px; }
.settings-children { display: grid; gap: 10px; }
.settings-child-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto; gap: 8px 12px; align-items: end; }
.settings-child-row > .settings-error { grid-column: 1 / -1; }
.settings-child-field label { display: grid; gap: 4px; font-size: 12px; color: var(--ui-muted); }
.settings-toggles { display: grid; gap: 4px; }
.settings-toggle { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 10px 0; border-top: 1px solid var(--ui-border); cursor: pointer; }
.settings-toggle:first-child { border-top: 0; }
.settings-toggle[hidden] { display: none; }
.settings-toggle input[type="checkbox"] { width: 20px; height: 20px; margin: 2px 0 0; }
.settings-toggle-text { display: grid; gap: 2px; min-width: 0; }
.settings-toggle-text strong { font: 500 14px/1.4 var(--ui-font-sans); color: var(--ui-text); }
.settings-actions { display: grid; gap: 12px; }
.settings-action-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.settings-status { font-size: 13px; color: var(--ui-muted); min-width: 0; overflow-wrap: anywhere; }
.settings-status.is-error { color: var(--ui-danger); }
.settings-confirm { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--ui-border-strong); border-radius: 8px; }
.settings-confirm p { margin: 0; }
.settings-confirm[hidden], .settings-error-summary[hidden], .settings-note-demo[hidden] { display: none; }
.settings-subsection { display: grid; gap: 8px; padding-top: 16px; border-top: 1px solid var(--ui-border); min-width: 0; }
.settings-subsection h4 { margin: 0; }
.settings-subsection .settings-note { margin: 0; }
.settings-subsection > * { min-width: 0; max-width: 100%; }
@media (max-width: 520px) {
    .settings-child-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .settings-child-row .settings-child-remove { grid-column: 1 / -1; justify-self: start; }
    .settings-toggle { grid-template-columns: auto minmax(0, 1fr); }
    .settings-toggle .settings-source { grid-column: 2; }
}