/* ==========================================================================
   Summary Tab (dashboardsummary Phase 1)
   Card grid rendered by js/app/summary-tab/summaryTabController.js into
   #summary-tab-root. Colors via master/ui vars only (theme-aware).
   ========================================================================== */

.summary-root {
    width: 100%;
    /* Left-anchored with the same cap as the Accounts tab
       (.accounts-tool-container: max-width 1700px, margin 0) so Summary and
       its sub-views (Coach / Wellness / Learn / Checkup all render inside
       this root) line up with Optimizer / Accounts / My Plans instead of
       centering on wide screens. Horizontal padding matches their 20px so
       the content's left edge aligns exactly. */
    max-width: 1700px;
    margin: 0;
    padding: 24px 20px 72px;
    color: var(--ui-text-primaryText);
    font-variant-numeric: tabular-nums;
}

.summary-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}

.summary-title {
    margin: 0;
    font-size: 25px;
    font-weight: 800;
    letter-spacing: -0.4px;
    color: var(--ui-text-primaryText);
}

.summary-title-controls {
    display: flex;
    align-items: center;
    gap: 14px;
}

.summary-dollar-toggle {
    display: flex;
    background: var(--ui-backgrounds-cardBg);
    border: 1px solid var(--ui-borders-borderDefault);
    border-radius: 999px;
    padding: 3px;
}

.summary-dollar-btn {
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    border-radius: 999px;
    padding: 6px 14px;
    cursor: pointer;
    color: var(--ui-text-secondaryText);
    white-space: nowrap;
}

.summary-dollar-btn.active {
    /* blue-6 + white stays legible in BOTH themes (the brand-light/brand-dark
       pair renders dark-on-dark under the dark theme) */
    background: var(--color-blue-6);
    color: var(--color-white-1);
}

.summary-updated {
    font-size: 12.5px;
    color: var(--ui-text-mutedText);
    white-space: nowrap;
}

.summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    position: relative;
}

.summary-span2 { grid-column: span 2; }
.summary-span3 { grid-column: span 3; }

@media (max-width: 1100px) {
    .summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .summary-span2, .summary-span3 { grid-column: span 2; }
}

@media (max-width: 820px) {
    .summary-grid { grid-template-columns: 1fr; }
    .summary-span2, .summary-span3 { grid-column: auto; }
}

.summary-card {
    background: var(--ui-backgrounds-cardBg);
    border: 1px solid var(--ui-borders-borderDefault);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(var(--color-gray-900-rgb), 0.05),
                0 4px 14px rgba(var(--color-gray-900-rgb), 0.04);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.summary-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 20px;
    /* Mockup headbg is a subtle tint (#F8FAFC family), NOT panelBg: panelBg
       resolves to pure white in the default theme, which erased the header/
       body distinction. A translucent gray-100 wash lands on the mockup shade
       and stays theme-aware (same treatment as the checkup history header). */
    background: rgba(var(--color-gray-100-rgb), 0.55);
    border-bottom: 1px solid var(--ui-borders-borderDefault);
}

/* accounts-tool.css declares its own GLOBAL .summary-card (the Accounts page
   summary tiles: border-left 4px, white background, inner padding, hover
   lift) and views/index.ejs links it AFTER this file, so those rules win the
   cascade on the Summary tab's cards too — the stray left edge on every card,
   plus a dark-mode-breaking white background. Scope-bumped re-assert of this
   tab's card design; keep in sync with .summary-card above. */
.summary-grid > .summary-card {
    background: var(--ui-backgrounds-cardBg);
    border: 1px solid var(--ui-borders-borderDefault);
    border-radius: 12px;
    padding: 0;
    transition: none;
    box-shadow: 0 1px 3px rgba(var(--color-gray-900-rgb), 0.05),
                0 4px 14px rgba(var(--color-gray-900-rgb), 0.04);
}

.summary-grid > .summary-card:hover {
    transform: none;
    box-shadow: 0 1px 3px rgba(var(--color-gray-900-rgb), 0.05),
                0 4px 14px rgba(var(--color-gray-900-rgb), 0.04);
}

.summary-card-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--ui-text-mutedText);
}

.summary-card-action {
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    color: var(--color-blue-6);
    text-decoration: none;
}

.summary-card-action:hover {
    color: var(--color-brand-dark);
    text-decoration: underline;
}

.summary-card-body {
    padding: 18px 22px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
    min-height: 120px;
}

.summary-card-placeholder {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100px;
    font-size: 13px;
    color: var(--ui-text-mutedText);
}

/* Shared card typography helpers (used by the card modules) */
.summary-hero-figure {
    font-size: 34px;
    font-weight: 800;
    letter-spacing: -0.8px;
    line-height: 1.1;
    color: var(--ui-text-primaryText);
}

.summary-verdict {
    margin-top: auto;
    font-size: 13.5px;
    font-weight: 600;
    border-top: 1px solid var(--ui-borders-borderDefault);
    padding-top: 11px;
}

/* Projected Net Worth mini chart wrapper: flex-grows to absorb the card's
   slack height. Chart.js (responsive) tracks the box; its own entrance
   animation plays on each Summary visit. (.summary-chart-rise below is the
   legacy SVG entrance, unused since the Aug 2026 Chart.js conversion.) */
.summary-projected-chart {
    display: block;
    flex: 1 1 auto;
    min-height: 120px;
}

/* Deliberately NOT gated on prefers-reduced-motion: the app's other chart
   entrances (Chart.js on the Dashboard/COS tabs) ignore it, and gating only
   this one made the Summary entrance look broken on Windows machines with
   "animation effects" off (Jul 2026). */
.summary-chart-rise {
    transform-box: view-box;
    transform-origin: 50% 100%;
    animation: summaryChartRise 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes summaryChartRise {
    from { transform: scaleY(0.02); }
    to   { transform: scaleY(1); }
}

/* Cash-flow card bars: the fill wrapper sweeps in from the left inside the
   track's overflow clip. Same 0.9s velocity curve as the chart entrance;
   the second bar staggers slightly behind the first (inline delay). */
.summary-bar-rise {
    transform-origin: 0 50%;
    animation: summaryBarRise 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes summaryBarRise {
    from { transform: scaleX(0.02); }
    to   { transform: scaleX(1); }
}

.summary-verdict--good { color: var(--color-semantic-success); }
.summary-verdict--warn { color: var(--color-semantic-warning); }
.summary-verdict--bad  { color: var(--color-semantic-danger); }

.summary-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12.5px;
    font-weight: 700;
    border-radius: 999px;
    padding: 4px 11px;
    white-space: nowrap;
}

.summary-chip--good {
    color: var(--color-semantic-success);
    background: var(--color-semantic-success-light);
}

.summary-chip--warn {
    color: var(--color-semantic-warning);
    background: var(--color-semantic-warning-light);
}

.summary-chip--bad {
    color: var(--color-semantic-danger);
    background: var(--color-semantic-danger-light);
}

.summary-chip--info {
    color: var(--color-brand-dark);
    background: var(--color-brand-light);
}

.summary-ledger-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 0;
    border-top: 1px solid var(--ui-borders-borderDefault);
    font-size: 13.5px;
}

.summary-ledger-row .summary-ledger-name { color: var(--ui-text-secondaryText); }
.summary-ledger-row .summary-ledger-value { font-weight: 600; color: var(--ui-text-primaryText); }

/* Summary tab: Chance of Success in-progress ring */
.summary-ring-spin {
    animation: summarySpinRing 1.1s linear infinite;
    transform-origin: center;
}

@keyframes summarySpinRing {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.summary-calc-pulse {
    animation: summaryCalcPulse 1.6s ease-in-out infinite;
}

@keyframes summaryCalcPulse {
    0%, 100% { opacity: 0.45; }
    50% { opacity: 1; }
}

.summary-chip--muted {
    color: var(--ui-text-secondaryText);
    background: rgba(var(--color-gray-300-rgb), 0.4);
}

/* Summary tab: new-user guided layout grid */
.summary-newgrid {
    display: grid;
    grid-template-columns: 1fr 1.35fr 1fr;
    gap: 20px;
    align-items: start;
}

@media (max-width: 1100px) {
    .summary-newgrid { grid-template-columns: 1fr 1fr; }
    .summary-newgrid-center { grid-column: span 2; grid-row: 1; }
}

@media (max-width: 820px) {
    .summary-newgrid { grid-template-columns: 1fr; }
    .summary-newgrid-center { grid-column: auto; }
}

/* NOTE: the .summary-flash-target pulse ring that used to live here was
   removed 2026-07-23. Its outline/glow was clipped left+right by the boxes'
   scroll container, which is exactly why the fixed-overlay border trace
   below replaced it for every navigation target. See
   js/app/shared/attentionCallout.js. */

/* Attention overlay (2026-07-22, round 2): a screen-centered message card
   with an SVG connector arrow drawn from the card to the landed box.
   Created by showAttentionCallout() once the scroll settles; the OVERLAY's
   keyframe drives the whole fade-in/hold/fade-out lifecycle (JS removes on
   animationend); any user scroll/click dismisses it early. pointer-events
   none throughout — purely decorative. */
.summary-attention-overlay {
    position: fixed;
    inset: 0;
    z-index: 10050;
    pointer-events: none;
    animation: summaryCalloutLife 3.4s ease-in-out both;
}
.summary-attention-overlay svg { position: absolute; inset: 0; width: 100%; height: 100%; }

/* "Border trace" (Tutorial Spotlight Options mockup, 2026-07-23):
   a rect drawn just OUTSIDE the target box that traces itself around the
   perimeter, then a blurred twin breathes behind it. Rendered inside the
   fixed attention overlay (immune to the scroll container's clipping — the
   reason the box's own outline never had room to show). Used for EVERY
   target since 2026-07-23; the older solid-blue pill + connector-arrow
   treatment it replaced is gone. */
.summary-attention-overlay .summary-attention-trace {
    fill: none;
    stroke: var(--color-blue-6);
    stroke-width: 5;
    stroke-linecap: round;
    /* Hidden (offset = perimeter, set by JS) until the overlay gets the
       --go class at the SCROLL-SETTLED moment — the draw kept finishing
       during the Dashboard's landing commotion and was over before the
       user's eye arrived (Stephen, rounds 5 AND 6). SVG rect strokes start
       at the top-left corner and run clockwise, so the trace draws the top
       edge first, then down the right side, across the bottom, and up the
       left — exactly the mockup's motion. */
}
.summary-attention-overlay--go .summary-attention-trace {
    animation: summaryTraceDraw 1.1s ease-in-out forwards;
}
@keyframes summaryTraceDraw {
    to { stroke-dashoffset: 0; }
}
.summary-attention-overlay .summary-attention-trace-glow {
    fill: none;
    stroke: var(--color-blue-6);
    /* Kept 2px wider than the trace so the soft halo margin is preserved
       when the trace thickens. */
    stroke-width: 9;
    filter: blur(6px);
    opacity: 0;
}
/* Glow starts breathing after the (settled) trace finishes drawing. */
.summary-attention-overlay--go .summary-attention-trace-glow {
    animation: summaryTraceBreathe 2.2s ease-in-out 1.2s infinite;
}
@keyframes summaryTraceBreathe {
    0%, 100% { opacity: 0.9; }
    50%      { opacity: 0.35; }
}
@media (prefers-reduced-motion: reduce) {
    /* ROOT CAUSE OF ROUNDS 5-7 "it shows all at once" (2026-07-23): with
       Windows Animation effects off, Chrome reports reduced motion and this
       block used to REPLACE the trace draw with an instantly-complete
       border. Product decision: the dash-draw is a progressive REVEAL
       (progress-bar class), not vestibular motion — it stays under reduced
       motion. Only the scale-pop and breathe effects are stilled here. */
    .summary-attention-overlay .summary-attention-trace-glow { animation: none; opacity: 0.4; }
    .summary-attention-callout--panel { animation: summaryCardFadeOnly 0.3s ease-out 0.25s both; }
}
@keyframes summaryCardFadeOnly {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Base: positioning only. The look belongs to the --panel variant, which is
   now always applied (the old blue-pill styling lived here and is gone). */
.summary-attention-callout {
    position: absolute;
    line-height: 1.35;
    max-width: 90vw;
}

/* Panel (2026-07-23, Stephen's round-4 spec): white, rounded card floating
   beside the target box near its top, with a rotated-square speech tail on
   the LEFT edge pointing at the box. Position tracked per frame alongside
   the trace. */
.summary-attention-callout--panel {
    background: var(--color-white-1);
    color: var(--ui-text-primaryText);
    border-radius: 14px;
    box-shadow: 0 6px 24px rgba(var(--color-gray-900-rgb), 0.2);
    padding: 16px 20px 15px;
    white-space: normal;
    width: 300px;
    /* Pop-in (mockup tsPop): fade + grow with a slight overshoot. */
    animation: summaryCardPop 0.45s cubic-bezier(0.34, 1.4, 0.64, 1) 0.25s both;
}
.summary-attention-callout--panel .summary-attention-title {
    font-size: 16px;
    font-weight: 800;
    line-height: 1.3;
}
.summary-attention-callout--panel .summary-attention-subtitle {
    font-size: 13px;
    font-weight: 500;
    line-height: 1.55;
    color: var(--ui-text-secondaryText);
    margin-top: 6px;
}
@keyframes summaryCardPop {
    0%   { opacity: 0; transform: translateY(10px) scale(0.94); }
    70%  { opacity: 1; transform: translateY(-2px) scale(1.015); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
.summary-attention-tail {
    position: absolute;
    left: -8px;
    top: 20px;
    width: 16px;
    height: 16px;
    background: var(--color-white-1);
    transform: rotate(45deg);
    border-radius: 3px;
    box-shadow: -3px 3px 6px rgba(var(--color-gray-900-rgb), 0.08);
}

/* Flipped to the box's LEFT (no room on the right): the tail moves to the
   card's right edge and its shadow flips with it. */
.summary-attention-callout--flip .summary-attention-tail {
    left: auto;
    right: -8px;
    box-shadow: 3px -3px 6px rgba(var(--color-gray-900-rgb), 0.08);
}

/* Trace mode holds longer: the draw waits for the scroll to settle,
   takes ~1.1s, and Stephen wants generous reading time — 11s total life
   (round 6: +5s over the previous 6s). Double-class selector so the
   duration beats BOTH lifecycle shorthands (normal + reduced-motion)
   regardless of their position in this file — the reduced-motion
   shorthand sits later and was silently resetting this to 3.4s, removing
   the overlay right at the trace's go-moment (round 7 finding). */
.summary-attention-overlay.summary-attention-overlay--long { animation-duration: 11s; }
@keyframes summaryCalloutLife {
    0%   { opacity: 0; }
    9%   { opacity: 1; }
    84%  { opacity: 1; }
    100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    /* No motion: appear/disappear without slide or dash-draw; lifecycle
       timing kept so animationend still fires for cleanup. */
    .summary-attention-overlay { animation: summaryCalloutFade 3.4s step-end both; }
}
@keyframes summaryCalloutFade {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

/* Summary quick-edit dialog (in-place "Add" for small completeness items —
   the user stays on the Summary page instead of deep-linking to a box). */
.sqe-backdrop {
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--color-ui-overlay-rgb), 0.45);
}
.sqe-card {
    width: min(440px, calc(100vw - 32px));
    background: var(--ui-surfaces-cardBg);
    border: 1px solid var(--ui-borders-borderDefault);
    border-radius: 14px;
    box-shadow: 0 22px 60px rgba(var(--color-ui-overlay-rgb), 0.25);
    padding: 22px 24px;
}
.sqe-title {
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.2px;
    color: var(--ui-text-primaryText);
}
.sqe-intro {
    font-size: 13px;
    line-height: 1.55;
    color: var(--ui-text-secondaryText);
    margin: 8px 0 16px;
}
.sqe-field { display: block; margin-bottom: 14px; }
.sqe-field-label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--ui-text-primaryText);
}
.sqe-field-hint {
    display: block;
    font-size: 11.5px;
    color: var(--ui-text-mutedText);
    margin: 1px 0 6px;
}
.sqe-input-wrap {
    display: flex;
    align-items: center;
    border: 1px solid var(--ui-borders-borderDefault);
    border-radius: 8px;
    overflow: hidden;
    background: var(--ui-backgrounds-panelBg);
}
.sqe-input-wrap:focus-within {
    border-color: var(--color-blue-6);
    box-shadow: 0 0 0 3px rgba(var(--color-blue-6-rgb), 0.18);
}
.sqe-currency {
    padding: 0 4px 0 12px;
    font-size: 14px;
    color: var(--ui-text-mutedText);
}
.sqe-input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    padding: 10px 12px 10px 4px;
    font-size: 15px;
    font-weight: 600;
    color: var(--ui-text-primaryText);
    font-family: inherit;
}
.sqe-footnote {
    font-size: 11.5px;
    color: var(--ui-text-mutedText);
    margin: 2px 0 4px;
}
.sqe-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 16px;
}
.sqe-btn {
    border-radius: 8px;
    padding: 9px 20px;
    font-size: 14px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
}
.sqe-btn-cancel {
    background: transparent;
    border: 1px solid var(--ui-borders-borderDefault);
    color: var(--ui-text-secondaryText);
}
.sqe-btn-save {
    background: var(--ui-buttons-primaryBg);
    border: 1px solid var(--ui-buttons-primaryBg);
    color: var(--ui-buttons-primaryText);
}
.sqe-btn-save:hover { background: var(--ui-buttons-primaryBgHover); border-color: var(--ui-buttons-primaryBgHover); }

/* Summary tab: preview gating (strong free surface — detail cards blurred,
   one centered unlock overlay over the grid) */
.summary-card--locked .summary-card-body {
    filter: blur(8px);
    pointer-events: none;
    user-select: none;
}

.summary-card--locked .summary-card-action {
    pointer-events: none;
    opacity: 0.4;
}

.summary-unlock-overlay {
    position: absolute;
    left: 50%;
    top: 44%;
    transform: translate(-50%, -50%);
    z-index: 5;
    background: var(--ui-backgrounds-cardBg);
    border: 1px solid var(--ui-borders-borderDefault);
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(var(--color-gray-900-rgb), 0.18);
    padding: 28px 34px;
    width: 430px;
    max-width: 90%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.summary-unlock-icon {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--color-brand-light);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-blue-6);
    font-size: 18px;
}

.summary-unlock-title {
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -0.2px;
    color: var(--ui-text-primaryText);
}

.summary-unlock-body {
    font-size: 14px;
    line-height: 1.55;
    color: var(--ui-text-secondaryText);
}

/* ==========================================================================
   Coach view (dashboardsummary Phase 2)
   Rendered by js/app/coach/coachView.js into #summary-coach-wrap (a page
   state of the Summary tab). Colors via master/ui vars only.
   ========================================================================== */

.coach-header-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.coach-back-link {
    font-size: 13px;
    font-weight: 600;
    color: var(--ui-text-secondaryText);
    text-decoration: none;
}

.coach-back-link:hover { color: var(--color-blue-6); }

.coach-title {
    margin: 6px 0 4px;
    font-size: 25px;
    font-weight: 800;
    letter-spacing: -0.4px;
    color: var(--ui-text-primaryText);
}

.coach-subtitle {
    font-size: 14.5px;
    color: var(--ui-text-secondaryText);
}

.coach-accuracy-chip {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--ui-backgrounds-cardBg);
    border: 1px solid var(--ui-borders-borderDefault);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(var(--color-gray-900-rgb), 0.05);
    padding: 11px 18px;
}

.coach-accuracy-pct {
    font-size: 21px;
    font-weight: 800;
    border-radius: 10px;
    padding: 6px 12px;
}

.coach-accuracy-pct--good { color: var(--color-semantic-success); background: var(--color-semantic-success-light); }
.coach-accuracy-pct--warn { color: var(--color-semantic-warning); background: var(--color-semantic-warning-light); }
.coach-accuracy-pct--bad  { color: var(--color-semantic-danger); background: var(--color-semantic-danger-light); }

.coach-filter-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.coach-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid var(--ui-borders-borderDefault);
    background: var(--ui-backgrounds-cardBg);
    color: var(--ui-text-secondaryText);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    border-radius: 999px;
    padding: 7px 15px;
    cursor: pointer;
}

.coach-filter-chip.active {
    border-color: var(--color-blue-6);
    background: var(--color-blue-6);
    color: var(--color-white-1);
}

.coach-filter-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.coach-panes {
    display: grid;
    grid-template-columns: 11fr 9fr;
    gap: 20px;
    align-items: start;
}

.coach-card {
    background: var(--ui-backgrounds-cardBg);
    border: 1px solid var(--ui-borders-borderDefault);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(var(--color-gray-900-rgb), 0.05),
                0 4px 14px rgba(var(--color-gray-900-rgb), 0.04);
    overflow: hidden;
}

.coach-row {
    display: flex;
    gap: 14px;
    padding: 15px 20px;
    align-items: flex-start;
    cursor: pointer;
    border-bottom: 1px solid var(--ui-borders-borderDefault);
}

.coach-row:last-child { border-bottom: none; }

.coach-row.selected {
    background: var(--color-brand-light);
    box-shadow: inset 3px 0 0 var(--color-blue-6);
}

.coach-row-icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
}

.coach-row-title {
    font-size: 14.5px;
    font-weight: 700;
    flex: 1;
    min-width: 0;
    color: var(--ui-text-primaryText);
}

.coach-row-amount {
    font-size: 14.5px;
    font-weight: 800;
    white-space: nowrap;
    color: var(--ui-text-primaryText);
}

.coach-tag {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    border-radius: 4px;
    padding: 2px 7px;
    white-space: nowrap;
}

.coach-tag--risk { color: var(--color-semantic-danger); background: var(--color-semantic-danger-light); }
.coach-tag--date { color: var(--color-purple-4); background: rgba(var(--color-purple-4-rgb), 0.14); }
.coach-tag--scenario { color: var(--color-teal-3); background: rgba(var(--color-chart-teal-3-rgb), 0.12); }
.coach-tag--strategy { color: var(--color-semantic-success); background: var(--color-semantic-success-light); }
.coach-tag--accuracy { color: var(--color-brand-dark); background: var(--color-brand-light); }

.coach-row-preview {
    font-size: 13px;
    color: var(--ui-text-secondaryText);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.coach-detail-pane {
    background: var(--ui-backgrounds-cardBg);
    border: 1px solid var(--ui-borders-borderDefault);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(var(--color-gray-900-rgb), 0.05),
                0 4px 14px rgba(var(--color-gray-900-rgb), 0.04);
    padding: 24px 28px 26px;
    position: sticky;
    top: 20px;
}

.coach-detail-title {
    margin: 12px 0 0;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.3px;
    color: var(--ui-text-primaryText);
}

.coach-detail-amount {
    font-size: 32px;
    font-weight: 800;
    letter-spacing: -0.8px;
    line-height: 1.1;
    color: var(--ui-text-primaryText);
}

.coach-detail-caption {
    font-size: 13px;
    color: var(--ui-text-mutedText);
    margin-top: 4px;
}

.coach-detail-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--ui-text-mutedText);
    margin: 18px 0 5px;
}

.coach-detail-body {
    font-size: 14px;
    line-height: 1.6;
    color: var(--ui-text-secondaryText);
}

.coach-detail-actions {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 20px;
    border-top: 1px solid var(--ui-borders-borderDefault);
    padding-top: 18px;
}

.coach-cta {
    background: var(--color-blue-6);
    color: var(--color-white-1);
    border: none;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    border-radius: 8px;
    padding: 11px 20px;
    cursor: pointer;
}

.coach-dismiss-link {
    font-size: 13px;
    color: var(--ui-text-mutedText);
    font-weight: 500;
    text-decoration: none;
}

.coach-dismiss-link:hover { color: var(--ui-text-secondaryText); text-decoration: underline; }

/* Accordion detail: hidden on desktop, shown on narrow screens where the
   sticky detail pane is hidden. */
.coach-acc { display: none; padding: 4px 20px 18px 68px; }

@media (max-width: 900px) {
    .coach-panes { grid-template-columns: 1fr; }
    .coach-detail-pane { display: none; }
    .coach-row.selected + .coach-acc { display: block; }
    .coach-row.selected { border-bottom: none; }
}

.coach-dismissed-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 20px;
    cursor: pointer;
}

.coach-dismissed-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--ui-borders-borderDefault);
    opacity: 0.85;
}

.coach-dismissed-row:last-child { border-bottom: none; }

.coach-clear-state {
    background: var(--ui-backgrounds-cardBg);
    border: 1px solid var(--ui-borders-borderDefault);
    border-radius: 12px;
    padding: 64px 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    text-align: center;
}

.coach-locked-body {
    filter: blur(9px);
    pointer-events: none;
    user-select: none;
}

/* ==========================================================================
   Financial Wellness view (dashboardsummary Phase 3)
   Rendered by js/app/wellness/wellnessView.js into #summary-wellness-wrap.
   Reuses the coach-* header/chip/card/cta classes; fw-* adds the wellness
   specifics (headline card, tiles, rows, detail pane, accordion).
   ========================================================================== */

.fw-headline-card {
    background: var(--ui-backgrounds-cardBg);
    border: 1px solid var(--ui-borders-borderDefault);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(var(--color-gray-900-rgb), 0.05);
    padding: 16px 20px;
    flex: 1;
    max-width: 470px;
    min-width: 300px;
}

.fw-tiles {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 28px;
}

.fw-tile {
    background: var(--ui-backgrounds-cardBg);
    border: 1px solid var(--ui-borders-borderDefault);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(var(--color-gray-900-rgb), 0.05),
                0 4px 14px rgba(var(--color-gray-900-rgb), 0.04);
    padding: 14px 16px;
    position: relative;
    cursor: pointer;
}

.fw-tile-unpin {
    position: absolute;
    top: 10px;
    right: 10px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px;
}

.fw-chip {
    font-size: 11px;
    font-weight: 700;
    border-radius: 999px;
    padding: 3px 10px;
    white-space: nowrap;
}

.fw-panes {
    display: grid;
    grid-template-columns: 11fr 9fr;
    gap: 20px;
    align-items: start;
}

.fw-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 18px;
    cursor: pointer;
    border-bottom: 1px solid var(--ui-borders-borderDefault);
}

.fw-row:last-child { border-bottom: none; }

.fw-row.selected {
    background: var(--color-brand-light);
    box-shadow: inset 3px 0 0 var(--color-blue-6);
}

.fw-pin-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px;
    flex-shrink: 0;
}

.fw-detail-pane {
    background: var(--ui-backgrounds-cardBg);
    border: 1px solid var(--ui-borders-borderDefault);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(var(--color-gray-900-rgb), 0.05),
                0 4px 14px rgba(var(--color-gray-900-rgb), 0.04);
    padding: 24px 28px 26px;
    position: sticky;
    top: 20px;
}

.fw-detail-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--ui-text-mutedText);
    margin: 18px 0 5px;
}

.fw-detail-body {
    font-size: 14px;
    line-height: 1.6;
    color: var(--ui-text-secondaryText);
}

.fw-detail-actions {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 20px;
    border-top: 1px solid var(--ui-borders-borderDefault);
    padding-top: 18px;
}

.fw-acc { display: none; padding: 4px 18px 18px 39px; }

@media (max-width: 900px) {
    .fw-panes { grid-template-columns: 1fr; }
    .fw-detail-pane { display: none; }
    .fw-row.selected + .fw-acc { display: block; }
    .fw-row.selected { border-bottom: none; }
    .fw-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Summary Wellness card internals */
.summary-wellness-tiles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.summary-wellness-tile {
    border: 1px solid var(--ui-borders-borderDefault);
    border-radius: 8px;
    padding: 8px 10px;
}

/* ==========================================================================
   Learn view (dashboardsummary Phase 4)
   Rendered by js/app/learn/learnView.js into #summary-learn-wrap. FREE for
   everyone — no gating classes here by design.
   ========================================================================== */

.learn-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.learn-lib {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    max-width: 1260px;
}

/* Illustrated library cards (Jul 2026 mockup: images/UI/summary/summarymockup.png):
   text column left, illustration plate right. */
.learn-lib-card {
    background: var(--ui-backgrounds-cardBg);
    border: 1px solid var(--ui-borders-borderDefault);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(var(--color-gray-900-rgb), 0.05),
                0 4px 14px rgba(var(--color-gray-900-rgb), 0.04);
    padding: 24px 26px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 20px;
}

.learn-lib-card-text { flex: 1; min-width: 0; }

.learn-lib-card-title {
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.2px;
    line-height: 1.3;
    margin-bottom: 8px;
}

.learn-lib-card-blurb {
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--ui-text-secondaryText);
}

.learn-lib-card-cta {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    margin-top: 14px;
    color: var(--color-blue-6);
}

/* The illustrations are opaque renders with white baked in (white content
   INSIDE them too, so transparency extraction is not an option). The white
   plate is invisible on light cards and reads as a deliberate frame in
   dark mode. */
.learn-lib-card-art {
    flex-shrink: 0;
    width: 200px;
    background: var(--color-white-1);
    border-radius: 10px;
    overflow: hidden;
}

.learn-lib-card-art img {
    display: block;
    width: 100%;
    height: auto;
}

@media (max-width: 760px) {
    .learn-lib-card-art { width: 140px; }
}

.learn-lib-card--soon {
    border-style: dashed;
    box-shadow: none;
    opacity: 0.62;
    cursor: default;
}

.learn-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 30px;
}

.learn-fact-card {
    background: var(--ui-backgrounds-cardBg);
    border: 1px solid var(--ui-borders-borderDefault);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(var(--color-gray-900-rgb), 0.05);
    padding: 16px 20px;
}

.learn-cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 230px;
    gap: 32px;
    align-items: start;
}

.learn-h2 {
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -0.2px;
    margin: 4px 0 10px;
    color: var(--ui-text-primaryText);
}

.learn-p {
    font-size: 15px;
    line-height: 1.65;
    color: var(--ui-text-primaryText);
    margin: 0 0 12px;
}

.learn-p:last-of-type { margin-bottom: 26px; }

.learn-example {
    background: var(--color-brand-light);
    border-radius: 10px;
    padding: 14px 18px;
    margin-bottom: 26px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--ui-text-primaryText);
}

.learn-table {
    background: var(--ui-backgrounds-cardBg);
    border: 1px solid var(--ui-borders-borderDefault);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(var(--color-gray-900-rgb), 0.05);
    overflow: hidden;
    margin-bottom: 26px;
}

.learn-table-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 18px;
    background: var(--ui-backgrounds-panelBg);
    border-bottom: 1px solid var(--ui-borders-borderDefault);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--ui-text-mutedText);
}

.learn-table-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 11px 18px;
    border-bottom: 1px solid var(--ui-borders-borderDefault);
    font-size: 14px;
}

.learn-table-row:last-child { border-bottom: none; }

.learn-chart-card {
    background: var(--ui-backgrounds-cardBg);
    border: 1px solid var(--ui-borders-borderDefault);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(var(--color-gray-900-rgb), 0.05);
    padding: 20px 22px 14px;
    margin-bottom: 26px;
}

.learn-callout {
    border-radius: 10px;
    padding: 14px 18px;
    margin-bottom: 26px;
    font-size: 14px;
    line-height: 1.65;
    color: var(--ui-text-primaryText);
}

.learn-callout--amber {
    background: var(--color-semantic-warning-light);
    border-left: 4px solid var(--color-semantic-warning);
}

.learn-callout--blue {
    background: var(--color-brand-light);
    border-left: 4px solid var(--color-blue-6);
}

.learn-faq-q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 18px;
    cursor: pointer;
}

.learn-next {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.learn-cta {
    background: var(--ui-backgrounds-cardBg);
    border: 1px solid var(--ui-borders-borderDefault);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(var(--color-gray-900-rgb), 0.05),
                0 4px 14px rgba(var(--color-gray-900-rgb), 0.04);
    padding: 18px 20px;
    cursor: pointer;
}

.learn-cta--primary {
    background: var(--color-blue-6);
    border-color: var(--color-blue-6);
}

.learn-toc-link {
    font-size: 13px;
    color: var(--ui-text-secondaryText);
    padding: 5px 0 5px 14px;
    text-decoration: none;
}

.learn-toc-link:hover { color: var(--color-blue-6); }

@media (max-width: 900px) {
    .learn-cols { grid-template-columns: 1fr; }
    .learn-toc { display: none; }
    .learn-facts, .learn-next, .learn-lib { grid-template-columns: 1fr; }
}

/* ============================== Plan Checkup view (Phase 6, T7) ============ */

.chk-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--color-blue-6);
    margin-top: 12px;
}

.chk-cols {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
    gap: 20px;
    align-items: start;
}

.chk-scores {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.chk-score-tile { padding: 16px 18px 14px; }

.chk-changes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 24px;
}

.chk-range-pills {
    display: flex;
    gap: 2px;
    background: rgba(var(--color-gray-300-rgb), 0.35);
    border-radius: 999px;
    padding: 3px;
}

.chk-range-pills button {
    border: none;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    border-radius: 999px;
    padding: 5px 12px;
    cursor: pointer;
    background: transparent;
    color: var(--ui-text-mutedText);
}

.chk-range-pills button.active {
    background: var(--ui-surfaces-cardBg);
    color: var(--ui-text-primaryText);
}

.chk-legend {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    border-top: 1px solid var(--ui-borders-borderLight);
    margin-top: 12px;
    padding-top: 12px;
}

.chk-legend > span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    color: var(--ui-text-secondaryText);
}

.chk-swatch {
    width: 18px;
    height: 3px;
    border-radius: 2px;
    display: inline-block;
}

.chk-swatch--dashed {
    height: 0;
    border-top: 3px dashed var(--color-blue-3);
    border-radius: 0;
    background: transparent;
}

.chk-dotswatch {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--color-semantic-success);
    display: inline-block;
}

.chk-baseline-chip {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--color-blue-6);
    background: var(--color-brand-light);
    border-radius: 4px;
    padding: 2px 6px;
}

@media (max-width: 900px) {
    .chk-cols { grid-template-columns: 1fr; }
    .chk-scores { grid-template-columns: 1fr; }
    .chk-changes { grid-template-columns: 1fr; }
}

/* ==================== Learn: Spending Smile article (mockup, Jul 2026) ===== */

.learn-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin: 28px 0 6px;
}

.learn-stat-card {
    background: var(--ui-backgrounds-cardBg);
    border: 1px solid var(--ui-borders-borderDefault);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(var(--color-gray-900-rgb), 0.05);
    padding: 18px 20px 16px;
}

/* .smile-preset-pills is the shared live-adjuster pill row built by
   spendingsmile.js (Learn article, Analysis inline tab, movable popup);
   .learn-pills is the Learn demo chart's own row. Same look. */
.learn-pills,
.smile-preset-pills {
    display: flex;
    gap: 2px;
    background: rgba(var(--color-gray-300-rgb), 0.35);
    border-radius: 999px;
    padding: 3px;
}

.learn-pills button,
.smile-preset-pills button {
    border: none;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    border-radius: 999px;
    padding: 5px 11px;
    cursor: pointer;
    background: transparent;
    color: var(--ui-text-mutedText);
}

.learn-pills button.active,
.smile-preset-pills button.active {
    background: var(--ui-surfaces-cardBg);
    color: var(--color-brand-dark);
}

.learn-phases {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.learn-phase-card {
    background: var(--ui-backgrounds-cardBg);
    border: 1px solid var(--ui-borders-borderDefault);
    border-top-width: 3px;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(var(--color-gray-900-rgb), 0.05);
    padding: 18px 20px;
}

.learn-ctabar {
    background: var(--ui-backgrounds-cardBg);
    border: 1px solid var(--ui-borders-borderDefault);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(var(--color-gray-900-rgb), 0.05);
    padding: 18px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    cursor: pointer;
}

.learn-linkcards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.learn-linkcard {
    display: block;
    background: var(--ui-backgrounds-cardBg);
    border: 1px solid var(--ui-borders-borderDefault);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(var(--color-gray-900-rgb), 0.05);
    padding: 18px 20px;
    color: inherit;
    text-decoration: none;
}

.learn-linkcard:hover {
    border-color: var(--color-blue-6);
    text-decoration: none;
}

@media (max-width: 900px) {
    .learn-stats, .learn-phases, .learn-linkcards { grid-template-columns: 1fr; }
}

/* ============ Learn: How Taxes Work article (mockup, Jul 2026) ============
   Band-swatch cards, the interactive bracket explorer, the marginal-vs-
   effective pair, and the three lever cards. Colors are master/ui vars only;
   the bracket band fills come from the tax-chart ColorPaletteManager group at
   render time so a swatch always matches its band in the Dashboard chart. */

.learn-pays {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 26px;
}

.learn-pay-card {
    background: var(--ui-backgrounds-cardBg);
    border: 1px solid var(--ui-borders-borderDefault);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(var(--color-gray-900-rgb), 0.05);
    padding: 18px 20px;
}

.learn-when-chip {
    margin-left: auto;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--ui-text-mutedText);
    background: rgba(var(--color-gray-300-rgb), 0.35);
    border-radius: 4px;
    padding: 3px 8px;
}

.learn-chip-btn {
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    color: var(--color-blue-6);
    background: var(--color-brand-light);
    border: none;
    border-radius: 999px;
    padding: 5px 12px;
    cursor: pointer;
}

.learn-chip-btn:hover { background: var(--ui-backgrounds-panelBg); }

.learn-brk-bar {
    display: flex;
    gap: 3px;
    margin-top: 22px;
}

.learn-brk-seg { min-width: 0; }

.learn-brk-track {
    height: 34px;
    border-radius: 7px;
    background: rgba(var(--color-gray-300-rgb), 0.35);
    position: relative;
    overflow: hidden;
}

.learn-brk-fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    transition: width 0.15s ease;
}

.learn-brk-rate {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.learn-brk-cap {
    font-size: 10.5px;
    color: var(--ui-text-mutedText);
    margin-top: 6px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-variant-numeric: tabular-nums;
}

.learn-brk-readouts {
    display: flex;
    gap: 28px;
    flex-wrap: wrap;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--ui-borders-borderLight);
}

.learn-dual {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    align-items: stretch;
}

.learn-dual-col {
    flex: 1;
    min-width: 220px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.learn-dual-rule {
    width: 1px;
    background: var(--ui-borders-borderLight);
}

.learn-dual-track {
    height: 9px;
    border-radius: 5px;
    background: rgba(var(--color-gray-300-rgb), 0.35);
    position: relative;
    margin-top: 6px;
}

.learn-dual-track span {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    border-radius: 5px;
}

.learn-levers {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 26px;
}

.learn-lever-card {
    background: var(--ui-backgrounds-cardBg);
    border: 1px solid var(--ui-borders-borderDefault);
    border-top-width: 3px;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(var(--color-gray-900-rgb), 0.05);
    padding: 18px 20px;
}

.learn-lever-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    background: rgba(var(--color-gray-300-rgb), 0.35);
    border-radius: 8px;
    padding: 8px 12px;
}

@media (max-width: 900px) {
    .learn-pays, .learn-levers { grid-template-columns: 1fr; }
    .learn-brk-cap { font-size: 9.5px; }
}

/* ==========================================================================
   Your Taxes view (Jul 2026)
   Rendered by js/app/taxes/taxesView.js into #summary-taxes-wrap (a page
   state of the Summary tab, like the Coach). Built from mockups/Your
   Taxes.html. Colors via master/ui vars only.
   ========================================================================== */

/* 1700px is the app's main-tab page width — Accounts & Assets, My Plans, Estate
   and Net Worth all cap their container there (Budget is a 1660px outlier).
   Your Taxes is a full page like those, so it matches them rather than keeping
   the 1080px reading measure it had.

   It RENDERS at 1660, and that is correct: those tabs put `padding: 20px` on the
   1700px box itself, so their content is 1660 too. Here the padding lives on the
   ancestor (.summary-root, also capped at 1700), which means this cap can never
   actually bite. Stated anyway so the intended page width is explicit and the
   page stays sane if that ancestor ever changes. */
.txv-root { position: relative; max-width: 1700px; }

.txv-header-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}

.txv-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--color-blue-6);
    margin-top: 12px;
}

.txv-title {
    margin: 4px 0 0;
    font-size: 34px;
    font-weight: 800;
    letter-spacing: -0.6px;
    color: var(--ui-text-primaryText);
}

.txv-subtitle {
    margin-top: 8px;
    max-width: 620px;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--ui-text-secondaryText);
}

.txv-meta-row {
    margin-top: 8px;
    font-size: 12.5px;
    color: var(--ui-text-mutedText);
}

.txv-sample-chip {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--color-semantic-warning-light);
    color: var(--color-semantic-warning);
    font-size: 11.5px;
    font-weight: 700;
}

.txv-dollar-toggle { margin-top: 14px; }

/* Hero strip */
.txv-hero {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 18px;
}

.txv-hero-card {
    background: var(--ui-backgrounds-cardBg);
    border: 1px solid var(--ui-borders-borderDefault);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(var(--color-gray-900-rgb), 0.05);
    padding: 16px 18px 14px;
    min-width: 0;
}

.txv-hero-label {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    color: var(--ui-text-mutedText);
}

.txv-hero-value {
    margin-top: 8px;
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.5px;
    color: var(--ui-text-primaryText);
    font-variant-numeric: tabular-nums;
}

.txv-hero-value--amber { color: var(--color-amber-1); }

.txv-hero-sub {
    margin-top: 6px;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--ui-text-secondaryText);
}

.txv-chip {
    display: inline-block;
    margin-top: 7px;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--color-semantic-warning-light);
    color: var(--color-semantic-warning);
    font-size: 11.5px;
    font-weight: 700;
}

.txv-chip--green {
    margin-top: 0;
    margin-left: 6px;
    background: var(--color-semantic-success-light);
    color: var(--color-semantic-success);
}

/* Cards */
.txv-card {
    background: var(--ui-backgrounds-cardBg);
    border: 1px solid var(--ui-borders-borderDefault);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(var(--color-gray-900-rgb), 0.05);
    padding: 18px 20px;
    margin-bottom: 18px;
}

.txv-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.txv-card-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    color: var(--ui-text-mutedText);
}

.txv-card-caption {
    margin-top: 12px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--ui-text-mutedText);
}

/* Year-by-year stacked bars */
.txv-legend { display: inline-flex; gap: 14px; flex-wrap: wrap; }

.txv-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--ui-text-secondaryText);
}

.txv-legend-dot { width: 9px; height: 9px; border-radius: 2px; }

/* Chart area = fixed axis gutter + bars (2026-07 request: +80px height
   and a numeric Y axis so bar values read without hovering). */
.txv-chart-wrap {
    display: flex;
    align-items: stretch;
    gap: 8px;
}

.txv-axis {
    position: relative;
    flex: 0 0 auto;
    width: 46px;
    height: 270px;   /* matches .txv-bars */
}

.txv-axis-tick {
    position: absolute;
    right: 4px;
    transform: translateY(50%);
    font-size: 11px;
    line-height: 1;
    color: var(--ui-text-secondaryText);
    white-space: nowrap;
}

.txv-gridline {
    position: absolute;
    left: 0;
    right: 0;
    border-top: 1px dashed var(--ui-borders-borderDefault);
    opacity: 0.5;
    pointer-events: none;
    z-index: 0;
}

.txv-bars {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 270px;
    padding-bottom: 2px;
    border-bottom: 1px solid var(--ui-borders-borderDefault);
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}

.txv-bar-col {
    position: relative;
    z-index: 1;   /* bars paint above the absolutely-positioned gridlines */
    flex: 1;
    min-width: 0;
    height: 100%;
    display: flex;
    align-items: flex-end;
    cursor: pointer;
    border-radius: 4px 4px 0 0;
}

.txv-bar-col:hover { background: rgba(var(--color-blue-6-rgb), 0.07); }

.txv-bar {
    width: 100%;
    display: flex;
    /* column-reverse stacks the first segment (Federal) at the BOTTOM,
       matching the Dashboard tax chart's reading order. */
    flex-direction: column-reverse;
    border-radius: 3px 3px 0 0;
    overflow: hidden;
    transform-origin: 50% 100%;
}

.txv-bar-rise { animation: txvBarRise 0.7s cubic-bezier(0.16, 1, 0.3, 1) both; }

@keyframes txvBarRise {
    from { transform: scaleY(0.03); }
    to   { transform: scaleY(1); }
}

.txv-bar-col.selected .txv-bar {
    outline: 2px solid var(--ui-text-primaryText);
    outline-offset: 1px;
}

.txv-bar-flag {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--color-gray-500);
}

/* Scrubber */
.txv-scrub-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 16px;
}

.txv-scrub-heading { font-size: 17px; font-weight: 800; color: var(--ui-text-primaryText); }
.txv-scrub-heading span { font-weight: 600; color: var(--ui-text-mutedText); }

.txv-scrub-controls { display: inline-flex; align-items: center; gap: 8px; }

.txv-step {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid var(--ui-borders-borderDefault);
    background: var(--ui-backgrounds-cardBg);
    color: var(--ui-text-secondaryText);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
}

.txv-step:hover { border-color: var(--color-blue-6); color: var(--color-blue-6); }

.txv-age-pill {
    padding: 4px 13px;
    border-radius: 999px;
    background: var(--color-brand-light);
    color: var(--color-blue-6);
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

.txv-slider { width: 100%; margin-top: 12px; }

.txv-scrub-ends {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
    font-size: 11px;
    color: var(--ui-text-mutedText);
}

/* Inline Tax Calculation Details */
.txv-detail-title { font-size: 17px; font-weight: 800; color: var(--ui-text-primaryText); }
.txv-detail-note { font-size: 12.5px; color: var(--ui-text-mutedText); }
.txv-detail-body { font-size: 14px; }

/* Sources table */
.txv-seg-toggle {
    display: inline-flex;
    border: 1px solid var(--ui-borders-borderDefault);
    border-radius: 999px;
    overflow: hidden;
}

.txv-seg-toggle button {
    border: 0;
    padding: 5px 14px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    background: transparent;
    color: var(--ui-text-secondaryText);
}

.txv-seg-toggle button.active {
    background: var(--color-blue-6);
    color: var(--color-white-1);
}

.txv-table-scroll { overflow-x: auto; }

.txv-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
    font-variant-numeric: tabular-nums;
}

.txv-table th {
    text-align: right;
    padding: 8px 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--ui-text-mutedText);
    border-bottom: 1px solid var(--ui-borders-borderDefault);
}

.txv-table th:first-child { text-align: left; }

.txv-table td {
    text-align: right;
    padding: 9px 10px;
    color: var(--ui-text-primaryText);
    border-bottom: 1px solid rgba(var(--color-gray-300-rgb), 0.35);
}

.txv-table td:first-child { text-align: left; font-weight: 600; color: var(--ui-text-secondaryText); }

.txv-src-free td:first-child { color: var(--color-semantic-success); }

.txv-src-sum td {
    font-weight: 800;
    border-top: 2px solid var(--ui-borders-borderDefault);
    border-bottom: none;
}

/* Milestones */
.txv-ms-track {
    position: relative;
    height: 14px;
    margin: 8px 4px 16px;
    border-top: 1px solid var(--ui-borders-borderDefault);
}

.txv-ms-dot {
    position: absolute;
    top: -5px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--color-gray-500);
    transform: translateX(-50%);
    cursor: pointer;
}

.txv-ms-dot.active {
    background: var(--color-blue-6);
    box-shadow: 0 0 0 3px rgba(var(--color-blue-6-rgb), 0.25);
}

.txv-ms-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}

.txv-ms-card {
    border: 1px solid var(--ui-borders-borderDefault);
    border-radius: 10px;
    padding: 12px 14px;
    cursor: pointer;
}

.txv-ms-card:hover { border-color: var(--color-blue-6); }

.txv-ms-card.active {
    background: var(--color-brand-light);
    border-color: var(--color-blue-6);
}

.txv-ms-age { font-size: 12px; font-weight: 800; color: var(--color-blue-6); }
.txv-ms-title { margin-top: 3px; font-size: 13.5px; font-weight: 700; color: var(--ui-text-primaryText); }
.txv-ms-sub { margin-top: 3px; font-size: 12px; line-height: 1.45; color: var(--ui-text-secondaryText); }

/* Advisories */
.txv-advice-wrap { margin-bottom: 18px; }

.txv-advice-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.txv-advice-card { border-radius: 12px; padding: 16px 18px; }

.txv-advice-card--amber {
    background: var(--color-semantic-warning-light);
    border: 1px solid var(--color-amber-3);
}

.txv-advice-card--blue {
    background: var(--color-brand-light);
    border: 1px solid rgba(var(--color-blue-6-rgb), 0.35);
}

.txv-advice-title { font-size: 14.5px; font-weight: 800; color: var(--ui-text-primaryText); }
.txv-advice-detail { margin-top: 6px; font-size: 13px; line-height: 1.55; color: var(--ui-text-secondaryText); }
.txv-advice-link { margin-top: 10px; font-size: 13px; font-weight: 700; }
.txv-advice-link a { color: var(--color-blue-6); text-decoration: none; }
.txv-advice-link a:hover { text-decoration: underline; }

.txv-footer-link {
    text-align: center;
    font-size: 13px;
    color: var(--ui-text-mutedText);
    margin: 6px 0 40px;
}

.txv-footer-link a { color: var(--color-blue-6); font-weight: 700; text-decoration: none; }
.txv-footer-link a:hover { text-decoration: underline; }

/* Gating */
.txv-locked-body {
    filter: blur(9px);
    pointer-events: none;
    user-select: none;
}

.txv-unlock {
    top: 560px;
    transform: translateX(-50%);
}

@media (max-width: 1100px) {
    .txv-hero { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 700px) {
    .txv-hero { grid-template-columns: 1fr; }
    .txv-advice-grid { grid-template-columns: 1fr; }
}

/* ============================== Stack Up article (How You Compare) ==== */
/* .su-* = "How Do You Stack Up?" Learn article + Summary compare card.  */

.su-toggle {
    display: flex;
    border: 1px solid var(--ui-borders-borderDefault);
    border-radius: 999px;
    overflow: hidden;
}

.su-toggle button {
    border: none;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 700;
    padding: 8px 16px;
    cursor: pointer;
    background: transparent;
    color: var(--ui-text-mutedText);
    white-space: nowrap;
}

.su-toggle button.active {
    background: var(--color-blue-6);
    color: var(--color-white-1);
}

.su-pills {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.su-pills button {
    border: none;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    border-radius: 999px;
    padding: 7px 13px;
    cursor: pointer;
    background: rgba(var(--color-gray-300-rgb), 0.35);
    color: var(--ui-text-mutedText);
    white-space: nowrap;
}

.su-pills button.active {
    background: var(--color-blue-6);
    color: var(--color-white-1);
}

/* Log-dollar density curve (Jul 2026): the bell-shaped view of the
   distribution. Flag rides above the marker; tick labels sit under the
   svg baseline; caption + floor note follow in flow. */
.su-curve-wrap {
    position: relative;
    margin-top: 26px;
    padding-top: 20px;
}

.su-curve-wrap svg {
    display: block;
    width: 100%;
    height: 170px;
}

.su-curve-flag {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    font-size: 11.5px;
    font-weight: 700;
    color: var(--color-blue-6);
    background: var(--ui-backgrounds-cardBg);
    border: 1px solid rgba(var(--color-blue-6-rgb), 0.4);
    border-radius: 999px;
    padding: 2px 9px;
    white-space: nowrap;
    pointer-events: none;
}

.su-curve-you-chip {
    position: absolute;
    top: 24px;
    transform: translateX(-50%);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.3px;
    color: var(--color-white-1);
    background: var(--color-blue-6);
    border-radius: 999px;
    padding: 2px 8px;
    white-space: nowrap;
    pointer-events: none;
}

.su-curve-tick-label {
    position: absolute;
    top: 192px;
    transform: translateX(-50%);
    font-size: 11px;
    color: var(--ui-text-mutedText);
    font-variant-numeric: tabular-nums;
}

.su-curve-caption {
    margin-top: 22px;
    font-size: 11.5px;
    color: var(--ui-text-mutedText);
    text-align: center;
}

.su-curve-floor {
    margin-top: 4px;
    font-size: 11px;
    color: var(--ui-text-mutedText);
    text-align: center;
    font-style: italic;
}

/* Rank-spaced distribution strip. Vertical rhythm leaves room for the
   You flag above and the tick dollar labels + median label below. */
.su-strip-wrap { margin-top: 30px; padding: 40px 10px 6px; }

.su-strip {
    position: relative;
    height: 10px;
    border-radius: 5px;
    background: rgba(var(--color-gray-300-rgb), 0.35);
}

.su-strip-left {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    background: rgba(var(--color-gray-300-rgb), 0.65);
    border-radius: 5px 0 0 5px;
}

.su-tick {
    position: absolute;
    top: -6px; bottom: -6px;
    width: 2px;
    background: var(--ui-text-mutedText);
    transform: translateX(-50%);
}

.su-tick--median {
    width: 3px;
    background: var(--color-semantic-success);
    border-radius: 2px;
}

.su-tick-pct {
    position: absolute;
    top: -24px;
    transform: translateX(-50%);
    font-size: 10.5px;
    font-weight: 700;
    color: var(--ui-text-mutedText);
    white-space: nowrap;
}

.su-tick-amt {
    position: absolute;
    top: 16px;
    transform: translateX(-50%);
    font-size: 11px;
    font-weight: 600;
    color: var(--ui-text-secondaryText);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.su-tick-amt--median {
    top: 34px;
    font-weight: 700;
    color: var(--color-semantic-success);
}

.su-you-dot {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 18px; height: 18px;
    border-radius: 50%;
    background: var(--color-blue-6);
    border: 3px solid var(--ui-surfaces-cardBg);
    box-shadow: 0 0 0 2px var(--color-blue-6);
    z-index: 2;
}

.su-you-flag {
    position: absolute;
    bottom: 26px;
    transform: translateX(-50%);
    background: var(--color-blue-6);
    color: var(--color-white-1);
    font-size: 12px;
    font-weight: 700;
    border-radius: 7px;
    padding: 6px 12px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    z-index: 2;
}

.su-you-flag-tail {
    position: absolute;
    left: 50%; bottom: -5px;
    transform: translateX(-50%);
    width: 0; height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid var(--color-blue-6);
}

.su-strip-caption {
    margin-top: 56px;
    font-size: 11.5px;
    color: var(--ui-text-mutedText);
    text-align: right;
}

.su-note {
    margin-top: 4px;
    background: rgba(var(--color-blue-6-rgb), 0.1);
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--ui-text-primaryText);
    font-variant-numeric: tabular-nums;
}

.su-try {
    border-top: 1px solid var(--ui-borders-borderLight);
    margin-top: 16px;
    padding-top: 16px;
}

.su-try-amt {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-blue-6);
    font-variant-numeric: tabular-nums;
}

.su-try-readout {
    margin-top: 10px;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--ui-text-primaryText);
    font-variant-numeric: tabular-nums;
}

input[type="range"].su-slider,
input[type="range"].learn-range {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: rgba(var(--color-gray-300-rgb), 0.5);
    outline: none;
    cursor: pointer;
    margin-top: 12px;
}

input[type="range"].su-slider::-webkit-slider-thumb,
input[type="range"].learn-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: var(--color-blue-6);
    border: 3px solid var(--ui-surfaces-cardBg);
    box-shadow: 0 1px 4px rgba(var(--color-gray-900-rgb), 0.3);
    cursor: grab;
}

input[type="range"].su-slider::-moz-range-thumb,
input[type="range"].learn-range::-moz-range-thumb {
    width: 14px; height: 14px;
    border-radius: 50%;
    background: var(--color-blue-6);
    border: 3px solid var(--ui-surfaces-cardBg);
    box-shadow: 0 1px 4px rgba(var(--color-gray-900-rgb), 0.3);
    cursor: grab;
}

.su-glance-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.su-glance-note {
    margin-top: 16px;
    border-radius: 12px;
    padding: 18px 22px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.su-world-you {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 800;
    color: var(--ui-text-primaryText);
}

.su-world-you-dot {
    width: 12px; height: 12px;
    border-radius: 50%;
    background: var(--color-blue-6);
    border: 2px solid var(--ui-surfaces-cardBg);
    box-shadow: 0 0 0 1.5px var(--color-blue-6);
}

/* Summary grid card (How You Compare) */
.summary-compare-strip {
    position: relative;
    height: 8px;
    border-radius: 4px;
    background: rgba(var(--color-gray-300-rgb), 0.35);
    margin-top: 18px;
}

.summary-compare-strip .su-strip-left { border-radius: 4px 0 0 4px; }

.summary-compare-median {
    position: absolute;
    top: -4px; bottom: -4px;
    width: 2.5px;
    background: var(--color-semantic-success);
    transform: translateX(-50%);
    border-radius: 2px;
}

.summary-compare-you {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 14px; height: 14px;
    border-radius: 50%;
    background: var(--color-blue-6);
    border: 2.5px solid var(--ui-surfaces-cardBg);
    box-shadow: 0 0 0 1.5px var(--color-blue-6);
}

@media (max-width: 900px) {
    .su-glance-grid { grid-template-columns: 1fr; }
    .su-toggle button { padding: 7px 10px; font-size: 11.5px; }
}

/* ------------------------------------------------------------------------
   How You Compare card: wireframe-globe backdrop experiment (Jul 2026).
   The PNG is opaque RGB (white background baked in); multiply blend erases
   the white against the card background in both themes. Tuning knobs — set
   these on .summary-card--compare to experiment without touching the rule:
     --compare-globe-size      image width (default 280px)
     --compare-globe-pos       background-position (default right/bottom bleed)
     --compare-globe-opacity   0..1 (default 0.45)
   ------------------------------------------------------------------------ */
.summary-card--compare .summary-card-body {
    position: relative;
}

.summary-card--compare .summary-card-body::before {
    content: '';
    position: absolute;
    inset: 0;
    /* earth2.png was white-unblended in place (Jul 2026): the export carried
       a ~90%-alpha white wash that showed as a light box on dark cards. It
       now has true transparency, so no blend trick is needed and the globe
       renders correctly in both themes. (?v=2 busts caches of the pre-clean
       file; original backed up in the session scratchpad.) */
    background: url('/images/UI/earth2.png?v=2') no-repeat
        var(--compare-globe-pos, right -70px top -80px) /
        var(--compare-globe-size, 280px) auto;
    opacity: var(--compare-globe-opacity, 0.45);
    pointer-events: none;
}

/* Positioned so the card content paints above the backdrop (absolutely
   positioned pseudo-elements otherwise cover in-flow siblings). */
.summary-card--compare .summary-card-body > * {
    position: relative;
}