/* ==========================================================================
   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%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 24px 28px 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;
}

.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; }
}

/* Summary tab: content-box flash highlight used by completeness deep links */
.summary-flash-target {
    outline: 2px solid var(--color-blue-6);
    outline-offset: 3px;
    border-radius: 8px;
    transition: outline-color 0.4s ease;
}

/* 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--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: 18px;
    max-width: 900px;
}

.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: 22px 24px;
    cursor: pointer;
}

.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; }
}