/* ClearHorizon consumer app — built on the brand design tokens (clearhorizon-tokens.css). */

html, body {
    margin: 0;
    font-family: var(--ch-font-sans);
    color: var(--ch-text);
    background: var(--ch-bg);
    font-size: var(--ch-fs-16);
    -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
h1, h2, h3 { margin: 0; }
a { color: var(--ch-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Visible 2px focus ring on every interactive element (WCAG, vision-concern audience). */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
[tabindex]:focus-visible { outline: 2px solid var(--ch-primary); outline-offset: 2px; border-radius: 4px; }

/* ---- App shell — "Momentum" dark sidebar + slim in-column top bar -------
   The sidebar is the app's signature surface: it stays dark in BOTH themes,
   so its colors are set explicitly here rather than from the theme tokens. */
.ch-app { display: flex; min-height: 100vh; }

.ch-side {
    width: 244px; flex: none;
    display: flex; flex-direction: column;
    padding: 20px 14px;
    position: sticky; top: 0; height: 100vh;
    background: #0F1B26; color: #C7D1DD;
    overflow-y: auto;
}
[data-theme="dark"] .ch-side { background: #0A1219; }

.ch-side-foot { margin-top: auto; padding: 12px 10px 0; border-top: 1px solid rgba(255,255,255,.1); font-size: var(--ch-fs-12); color: #657486; line-height: 1.5; }
.ch-side-foot strong { color: #C7D1DD; font-weight: var(--ch-fw-semibold); }

.ch-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ch-main > main { flex: 1; }

.ch-topbar {
    height: 62px; flex: none;
    position: sticky; top: 0; z-index: 20;
    display: flex; align-items: center; gap: var(--ch-sp-4);
    padding: 0 var(--ch-sp-6);
    background: var(--ch-surface); border-bottom: 1px solid var(--ch-border);
}
.ch-topbar-spacer { flex: 1; }

.ch-topbar-brand { display: inline-flex; align-items: center; text-decoration: none; }
.ch-topbar-brand:hover { text-decoration: none; }
.ch-topbar-brand img { display: block; height: 46px; width: auto; max-width: 270px; object-fit: contain; }

/* Partner co-branding: a "powered by" note sits in the sidebar foot (the logo itself lives in the topbar, above). */
.ch-poweredby { font-size: var(--ch-fs-12); color: var(--ch-text-muted); white-space: nowrap; }

/* Company session-expired prompt (partner users). */
.ch-session-ended-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 60; }
.ch-session-ended { position: fixed; inset: 0; z-index: 61; display: flex; align-items: center; justify-content: center; padding: var(--ch-sp-4); }
.ch-session-ended:focus { outline: none; }
.ch-session-ended .ch-card { display: grid; gap: var(--ch-sp-3); }

/* Sidebar nav: labeled groups of items, each with a small accent-on-active icon square. */
.ch-nav { display: flex; flex-direction: column; }
.ch-navgroup { margin-bottom: 12px; }
.ch-navlabel { font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #657486; padding: 0 8px 6px; }
.ch-navlink {
    display: flex; align-items: center; gap: 11px;
    padding: 9px 11px; border-radius: var(--ch-radius-sm);
    font-size: var(--ch-fs-14); font-weight: var(--ch-fw-medium);
    color: #C7D1DD; text-decoration: none; margin-bottom: 1px;
    transition: background var(--ch-motion-micro) var(--ch-ease);
}
.ch-navlink:hover { background: rgba(255,255,255,.06); color: #fff; text-decoration: none; }
.ch-navlink.active { background: rgba(79,163,232,.16); color: #fff; font-weight: 700; }
.ch-navicon { width: 16px; height: 16px; border-radius: 4px; background: rgba(255,255,255,.12); flex: none; }
.ch-navlink.active .ch-navicon { background: #4FA3E8; }
/* Disabled (no plan yet): dimmer, default cursor, no hover. State is conveyed by aria-disabled +
   the "Start your plan to unlock" tooltip. */
.ch-navlink.disabled { color: #657486; cursor: default; }
.ch-navlink.disabled:hover { background: transparent; color: #657486; }
.ch-navlink.disabled .ch-navicon { background: rgba(255,255,255,.06); }

.ch-appbar-right { display: flex; align-items: center; gap: var(--ch-sp-2); }
.ch-icon-btn {
    width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--ch-border-strong); border-radius: var(--ch-radius-md);
    background: var(--ch-surface); color: var(--ch-text-muted); cursor: pointer;
}
.ch-icon-btn:hover { background: var(--ch-surface-tint); color: var(--ch-text); }
.ch-icon-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ch-icon-btn .rays line { stroke: currentColor; }
.ch-avatar {
    width: 38px; height: 38px; border-radius: 50%; background: var(--ch-surface-info);
    display: inline-flex; align-items: center; justify-content: center; color: var(--ch-primary);
}
.ch-avatar svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---- User account dropdown ------------------------------------------- */
.ch-account { position: relative; display: inline-flex; }
.ch-avatar-btn { border: none; background: transparent; padding: 0; cursor: pointer; border-radius: 50%; }
.ch-avatar-btn:hover .ch-avatar, .ch-avatar-btn.open .ch-avatar { background: var(--ch-surface-tint); color: var(--ch-primary-text); }
.ch-avatar-btn:focus-visible { outline: 2px solid var(--ch-primary); outline-offset: 2px; }
.ch-menu {
    position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
    min-width: 244px; max-width: calc(100vw - 24px);
    background: var(--ch-surface); border: 1px solid var(--ch-border);
    border-radius: var(--ch-radius-md); box-shadow: var(--ch-shadow-md);
    padding: var(--ch-sp-2); display: flex; flex-direction: column;
    animation: ch-menu-in var(--ch-motion-standard) var(--ch-ease);
}
@keyframes ch-menu-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
.ch-menu-head { padding: var(--ch-sp-2) var(--ch-sp-3) var(--ch-sp-3); border-bottom: 1px solid var(--ch-border); margin-bottom: var(--ch-sp-2); }
.ch-menu-name { font-weight: var(--ch-fw-semibold); color: var(--ch-text); font-size: var(--ch-fs-14); }
.ch-menu-email { font-size: var(--ch-fs-12); color: var(--ch-text-muted); margin-top: 2px; word-break: break-all; }
.ch-menu-label { font-size: var(--ch-fs-12); text-transform: uppercase; letter-spacing: .4px; color: var(--ch-text-muted); font-weight: var(--ch-fw-semibold); padding: var(--ch-sp-2) var(--ch-sp-3) 4px; }
.ch-menu-item {
    display: block; text-align: left; width: 100%;
    padding: 9px var(--ch-sp-3); border: none; background: transparent; cursor: pointer;
    font-family: inherit; font-size: var(--ch-fs-14); color: var(--ch-text);
    border-radius: var(--ch-radius-sm); text-decoration: none;
}
.ch-menu-item:hover { background: var(--ch-surface-tint); }
.ch-menu-sep { height: 1px; background: var(--ch-border); margin: var(--ch-sp-2) 0; }
/* Expandable "Exports" row + its indented submenu. */
.ch-menu-expand { display: flex; align-items: center; justify-content: space-between; gap: var(--ch-sp-3); font-weight: var(--ch-fw-medium); }
.ch-menu-item-main { display: inline-flex; align-items: center; gap: var(--ch-sp-2); }
.ch-menu-icon, .ch-menu-chevron { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ch-menu-icon { color: var(--ch-text-muted); }
.ch-menu-chevron { color: var(--ch-text-muted); transition: transform var(--ch-motion-micro) var(--ch-ease); }
.ch-menu-expand.open .ch-menu-chevron { transform: rotate(180deg); }
.ch-menu-sub { padding-left: 34px; font-size: var(--ch-fs-13); color: var(--ch-text-muted); }
.ch-menu-sub:hover { color: var(--ch-text); }
/* Below the sticky appbar (z-index 20) so the menu — which lives inside the appbar's stacking context —
   stays clickable; still above page content so an outside click dismisses the menu. */
.ch-menu-backdrop { position: fixed; inset: 0; z-index: 10; }

/* Hamburger toggle: hidden on desktop (the sidebar is always shown), visible on mobile. */
.ch-nav-toggle { display: none; }

/* ---- Mobile/tablet (<= 1024px): the dark sidebar collapses to an off-canvas drawer ---- */
@media (max-width: 1024px) {
    /* Keep the top bar (and its hamburger) above the drawer, which slides in beneath it. */
    .ch-topbar { z-index: 45; padding: 0 var(--ch-sp-3); }
    .ch-nav-toggle { display: inline-flex; }

    .ch-side {
        position: fixed; top: 62px; left: 0; bottom: 0; height: auto;
        z-index: 40; max-width: 84vw;
        transform: translateX(-100%);
        transition: transform var(--ch-motion-panel) var(--ch-ease);
        box-shadow: var(--ch-shadow-md);
    }
    .ch-side.open { transform: translateX(0); }
}

/* ---- Collapsed sidebar (user preference) --------------------------------
   When the user hides the sidebar it behaves as an off-canvas drawer at ANY width — the same mechanics as
   the mobile drawer — and the hamburger toggles it. */
.ch-app.ch-side-collapsed .ch-topbar { z-index: 45; }
.ch-app.ch-side-collapsed .ch-nav-toggle { display: inline-flex; }
.ch-app.ch-side-collapsed .ch-side {
    position: fixed; top: 62px; left: 0; bottom: 0; height: auto;
    z-index: 40; width: 244px; max-width: 84vw;
    transform: translateX(-100%);
    transition: transform var(--ch-motion-panel) var(--ch-ease);
    box-shadow: var(--ch-shadow-md);
}
.ch-app.ch-side-collapsed .ch-side.open { transform: translateX(0); }

/* The drawer backdrop is a sibling of .ch-app so it can't be scoped to the collapsed class; style it
   unconditionally (it only exists in the DOM while the drawer is open — on mobile or when collapsed). */
.ch-nav-backdrop { position: fixed; inset: 62px 0 0 0; background: rgba(10, 18, 26, .5); z-index: 39; }

/* Sidebar collapse (hide / dock) toggle in the sidebar header. */
.ch-side-top { display: flex; align-items: flex-start; justify-content: flex-end; gap: 6px; margin-bottom: 12px; }
.ch-side-collapse {
    flex: none; display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border: none; border-radius: var(--ch-radius-sm);
    background: rgba(255,255,255,.06); color: #C7D1DD; cursor: pointer;
}
.ch-side-collapse:hover { background: rgba(255,255,255,.12); color: #fff; }
.ch-side-collapse svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.ch-page { max-width: 920px; margin: 0 auto; padding: var(--ch-sp-8) var(--ch-sp-6) 120px; }
.ch-page-wide { max-width: 1120px; }
.ch-page-head { margin-bottom: var(--ch-sp-6); }
.ch-page-head h1 { font-size: var(--ch-fs-30); font-weight: var(--ch-fw-semibold); }
.ch-page-head p { color: var(--ch-text-muted); font-size: var(--ch-fs-14); margin: var(--ch-sp-2) 0 0; max-width: 70ch; }

/* ---- Cards ----------------------------------------------------------- */
.ch-card {
    background: var(--ch-surface);
    border: 1px solid var(--ch-border);
    border-radius: var(--ch-radius-lg);
    box-shadow: var(--ch-shadow-sm);
    padding: var(--ch-sp-6);
    margin-bottom: var(--ch-sp-6);
}
.ch-card h2 { font-size: var(--ch-fs-18); font-weight: var(--ch-fw-semibold); margin-bottom: var(--ch-sp-1); }
.ch-card .ch-sub { color: var(--ch-text-muted); font-size: var(--ch-fs-13); margin-bottom: var(--ch-sp-4); }
.ch-card-title-row { display: flex; align-items: center; justify-content: space-between; gap: var(--ch-sp-4); }
/* Adds breathing room below a title row that sits directly above card content (e.g. the Bridge health
   card, where the segmented toggle would otherwise touch the fields below). */
.ch-title-spaced { margin-bottom: var(--ch-sp-4); }

/* ---- Stepper --------------------------------------------------------- */
.ch-stepper { display: flex; flex-wrap: wrap; gap: var(--ch-sp-2); margin-bottom: var(--ch-sp-3); }
.ch-step {
    display: flex; align-items: center; gap: var(--ch-sp-2);
    min-height: 44px; padding: 6px 14px; border-radius: var(--ch-radius-pill);
    border: 1px solid var(--ch-border-strong); background: var(--ch-surface);
    color: var(--ch-text-muted); font-family: inherit; font-size: var(--ch-fs-13); font-weight: var(--ch-fw-medium);
    cursor: pointer;
}
.ch-step .ch-step-num {
    width: 22px; height: 22px; border-radius: 50%; background: var(--ch-surface-tint);
    color: var(--ch-text-muted); display: inline-flex; align-items: center; justify-content: center;
    font-size: var(--ch-fs-12); font-weight: var(--ch-fw-semibold); flex: none;
}
.ch-step.active { border: 2px solid var(--ch-primary); color: var(--ch-primary-text); background: var(--ch-surface-info); }
.ch-step.active .ch-step-num { background: var(--ch-primary); color: #fff; }
.ch-step.done { border-color: var(--ch-success); color: var(--ch-text); }
.ch-step.done .ch-step-num { background: var(--ch-success); color: #fff; }

/* Thin "Step n of N" progress bar under the stepper. */
.ch-progress { height: 4px; background: var(--ch-surface-tint); border-radius: var(--ch-radius-pill); overflow: hidden; }
.ch-progress-fill { height: 100%; background: var(--ch-primary); border-radius: inherit; transition: width var(--ch-motion-standard) var(--ch-ease); }
.ch-progress-label { font-size: var(--ch-fs-12); color: var(--ch-text-muted); margin: 6px 0 var(--ch-sp-6); }

/* "Calculated for you" reassurance strip. */
.ch-calc {
    display: flex; align-items: center; gap: var(--ch-sp-2);
    background: var(--ch-info-bg); color: var(--ch-primary-text);
    border-radius: var(--ch-radius-md); padding: 10px 14px; font-size: var(--ch-fs-14);
    margin-top: var(--ch-sp-4);
}
.ch-calc .ch-bolt { width: 18px; height: 18px; flex: none; fill: var(--ch-primary); }

.ch-tile-unit { font-size: var(--ch-fs-14); font-weight: var(--ch-fw-regular); color: var(--ch-text-muted); }

/* ---- Forms ----------------------------------------------------------- */
.ch-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ch-sp-4) var(--ch-sp-6); }
.ch-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ch-sp-4) var(--ch-sp-6); }
@media (max-width: 680px) { .ch-grid, .ch-grid-3 { grid-template-columns: 1fr; } }

/* Personal step: a person's fields in a 2×2 grid (name + DOB, then retirement age + life expectancy) with
   the live "calculated for you" note beside them on the right, spanning both rows. */
.ch-person-body { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--ch-sp-4) var(--ch-sp-6); align-items: stretch; }
.ch-person-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ch-sp-4) var(--ch-sp-6); }
.ch-calc-side { margin-top: 0; align-self: stretch; }
@media (max-width: 720px) {
    .ch-person-body { grid-template-columns: 1fr; }
    .ch-person-fields { grid-template-columns: 1fr; }
}

.ch-field { display: flex; flex-direction: column; }
.ch-field > label { font-size: var(--ch-fs-13); font-weight: var(--ch-fw-medium); color: var(--ch-text-muted); margin-bottom: 6px; }
.ch-field .ch-hint { font-size: var(--ch-fs-12); color: var(--ch-text-muted); margin-top: 4px; }
/* The prefix/suffix inputs (MoneyInput $ fields, % fields) get the same border/font/radius as standard
   .ch-field inputs even when they aren't wrapped in a .ch-field (e.g. the Expenses budget table). */
.ch-input, .ch-field input, .ch-field select, .ch-prefix input, .ch-suffix input {
    font-family: inherit; font-size: var(--ch-fs-16); color: var(--ch-text);
    padding: 9px 12px; border: 1px solid var(--ch-border-strong);
    border-radius: var(--ch-radius-md); background: var(--ch-surface); width: 100%;
}
.ch-field input:focus, .ch-field select:focus, .ch-input:focus,
.ch-prefix input:focus, .ch-suffix input:focus {
    outline: 2px solid var(--ch-primary); outline-offset: 0; border-color: var(--ch-primary);
}
/* Currency/numeric inputs read right-aligned so digits and decimals line up; text inputs stay left. */
.ch-prefix input, .ch-suffix input { text-align: right; }
.ch-prefix { position: relative; }
.ch-prefix > span { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--ch-text-muted); pointer-events: none; }
.ch-prefix input { padding-left: 26px; }
/* Dollar fields ($-prefixed) don't get the up/down spinners — nobody nudges a balance a dollar at a time. */
.ch-prefix input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.ch-prefix input[type="number"]::-webkit-outer-spin-button,
.ch-prefix input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ch-suffix { position: relative; }
.ch-suffix > span { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--ch-text-muted); pointer-events: none; }
.ch-suffix input { padding-right: 30px; }
.ch-figure { font-variant-numeric: tabular-nums; }

/* ---- Buttons --------------------------------------------------------- */
.ch-btn {
    font-family: inherit; font-size: var(--ch-fs-14); font-weight: var(--ch-fw-semibold);
    padding: 10px 18px; border-radius: var(--ch-radius-md); border: 1px solid transparent; cursor: pointer;
    transition: background var(--ch-motion-micro) var(--ch-ease);
}
.ch-btn:disabled { opacity: .55; cursor: default; }
.ch-btn-primary { background: var(--ch-primary); color: #fff; }
.ch-btn-primary:hover:not(:disabled) { background: var(--ch-primary-hover); }
/* Momentum: in dark mode the lightened azure primary is bright, so flip the label to near-black (#08151f)
   for contrast rather than muting the button — keeps the primary action on-brand in both themes. */
[data-theme="dark"] .ch-btn-primary { color: #08151f; border-color: transparent; }
[data-theme="dark"] .ch-btn-primary:hover:not(:disabled) { background: var(--ch-primary-hover); }
.ch-btn-secondary { background: var(--ch-surface); color: var(--ch-primary-text); border-color: var(--ch-border-strong); }
.ch-btn-secondary:hover:not(:disabled) { background: var(--ch-surface-tint); }
.ch-btn-ghost { background: transparent; color: var(--ch-primary-text); }
.ch-btn-ghost:hover:not(:disabled) { background: var(--ch-surface-tint); }
.ch-btn-lg { padding: 13px 26px; font-size: var(--ch-fs-16); }
.ch-btn-danger { background: var(--ch-danger); color: #fff; }
.ch-btn-danger:hover:not(:disabled) { filter: brightness(.92); }
.ch-btn-danger-text { background: transparent; color: var(--ch-danger); border: none; cursor: pointer; font-size: var(--ch-fs-13); padding: 4px 8px; }
.ch-btn-danger-text:hover { text-decoration: underline; }

/* ---- Feedback strip (calculated-for-you) ----------------------------- */
.ch-feedback {
    display: flex; align-items: center; gap: var(--ch-sp-2);
    background: var(--ch-surface-info); color: var(--ch-primary-text);
    border-radius: var(--ch-radius-md); padding: 10px 14px; font-size: var(--ch-fs-13);
    margin-top: var(--ch-sp-4);
}
.ch-feedback strong { font-weight: var(--ch-fw-semibold); font-variant-numeric: tabular-nums; }

/* ---- Toast ----------------------------------------------------------- */
/* Floating stack, bottom-center, above the sticky save footer. Non-interactive. */
.ch-toast-host {
    position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%);
    z-index: 60; display: flex; flex-direction: column; align-items: center;
    gap: var(--ch-sp-2); pointer-events: none;
}
.ch-toast {
    display: inline-flex; align-items: center; gap: var(--ch-sp-2);
    padding: 9px 16px; border-radius: var(--ch-radius-pill);
    background: var(--ch-success-bg); color: var(--ch-success);
    font-size: var(--ch-fs-14); font-weight: var(--ch-fw-medium);
    box-shadow: var(--ch-shadow-md);
}
.ch-toast-host .ch-toast { animation: ch-toast-in var(--ch-motion-standard) var(--ch-ease); }
.ch-toast-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.ch-toast-info  { background: var(--ch-info-bg);    color: var(--ch-primary-text); }
.ch-toast-warn  { background: var(--ch-warning-bg); color: var(--ch-warning); }
.ch-toast-error { background: var(--ch-danger);     color: #fff; }
@keyframes ch-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* ---- Sticky save footer ---------------------------------------------- */
.ch-footer-bar {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 15;
    background: var(--ch-surface); border-top: 1px solid var(--ch-border);
    box-shadow: 0 -2px 8px rgba(21,33,43,.06);
    padding: var(--ch-sp-3) var(--ch-sp-8);
    display: flex; align-items: center; gap: var(--ch-sp-4);
}
.ch-footer-bar .spacer { flex: 1; }

/* ---- Unsaved-changes guard dialog (IMP-03) -------------------------- */
.ch-guard-backdrop { position: fixed; inset: 0; background: rgba(21, 33, 43, .45); z-index: 60; }
.ch-guard-dialog {
    position: fixed; z-index: 61; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: min(440px, calc(100vw - 32px));
    background: var(--ch-surface); border: 1px solid var(--ch-border); border-radius: var(--ch-radius-lg, 12px);
    box-shadow: 0 12px 40px rgba(21, 33, 43, .28); padding: var(--ch-sp-6);
}
.ch-guard-dialog h2 { font-size: var(--ch-fs-18); font-weight: var(--ch-fw-semibold); margin-bottom: var(--ch-sp-2); }
.ch-guard-dialog p { color: var(--ch-text-muted); margin: 0 0 var(--ch-sp-5); }
.ch-guard-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--ch-sp-2); }

/* ---- Legal pages, footer, and acceptance gate (IMP-07b) ------------- */
.ch-footer {
    display: flex; flex-wrap: wrap; gap: var(--ch-sp-4); align-items: center; justify-content: space-between;
    max-width: 1100px; margin: var(--ch-sp-6) auto 0; padding: var(--ch-sp-5) var(--ch-sp-5) var(--ch-sp-6);
    border-top: 1px solid var(--ch-border); color: var(--ch-text-muted); font-size: var(--ch-fs-13);
}
.ch-footer nav { display: flex; flex-wrap: wrap; gap: var(--ch-sp-4); }
.ch-footer a { color: var(--ch-text-muted); }
.ch-footer a:hover { color: var(--ch-primary); }

.ch-legal h2 { font-size: var(--ch-fs-16); font-weight: var(--ch-fw-semibold); margin: var(--ch-sp-5) 0 var(--ch-sp-2); }
.ch-legal h2:first-child { margin-top: 0; }
.ch-legal p { margin: 0 0 var(--ch-sp-3); max-width: 72ch; line-height: 1.6; }
.ch-legal-meta { color: var(--ch-text-muted); font-size: var(--ch-fs-12); margin-top: var(--ch-sp-5); }
.ch-legal-draft {
    margin-bottom: var(--ch-sp-4); padding: var(--ch-sp-3) var(--ch-sp-4); border-radius: var(--ch-radius, 8px);
    background: var(--ch-surface-warn, #fef3c7); color: var(--ch-text); border: 1px solid var(--ch-border-strong);
    font-size: var(--ch-fs-13);
}
.ch-legal-links { display: flex; flex-wrap: wrap; gap: var(--ch-sp-4); margin-top: var(--ch-sp-4); }

.ch-gate-backdrop {
    position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center;
    background: rgba(21, 33, 43, .55); padding: var(--ch-sp-4);
}
.ch-gate-card {
    width: min(520px, 100%); background: var(--ch-surface); border: 1px solid var(--ch-border);
    border-radius: var(--ch-radius-lg, 12px); box-shadow: 0 12px 40px rgba(21, 33, 43, .3); padding: var(--ch-sp-6);
}
.ch-gate-card h2 { font-size: var(--ch-fs-18); font-weight: var(--ch-fw-semibold); margin-bottom: var(--ch-sp-3); }
.ch-gate-agree { display: flex; gap: var(--ch-sp-3); align-items: flex-start; margin: var(--ch-sp-4) 0; font-size: var(--ch-fs-14); }
.ch-gate-agree input { margin-top: 3px; flex: none; }
.ch-gate-error { color: var(--ch-danger, #b42318); font-size: var(--ch-fs-13); margin-bottom: var(--ch-sp-3); }
.ch-gate-actions { display: flex; flex-wrap: wrap; gap: var(--ch-sp-2); justify-content: flex-end; }

/* ---- Account / picker ------------------------------------------------ */
.ch-person-head { display: flex; align-items: center; gap: var(--ch-sp-3); margin: var(--ch-sp-6) 0 var(--ch-sp-3); }
.ch-person-head h3 { font-size: var(--ch-fs-16); font-weight: var(--ch-fw-semibold); }
.ch-chip {
    display: inline-block; padding: 2px 10px; border-radius: var(--ch-radius-pill);
    background: var(--ch-surface-tint); color: var(--ch-text-muted);
    font-size: var(--ch-fs-12); font-weight: var(--ch-fw-semibold);
}
.ch-acct-card {
    border: 1px solid var(--ch-border); border-radius: var(--ch-radius-md);
    padding: var(--ch-sp-4); margin-bottom: var(--ch-sp-3); background: var(--ch-surface);
}
.ch-acct-card .ch-acct-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--ch-sp-3); }
.ch-acct-card .ch-acct-head .name { font-weight: var(--ch-fw-semibold); }

/* mix bar — the three bucket colors are tokenized so dark mode can lighten them (the fixed brand hex
   were ~1.6:1 on the dark surface, so the pre-tax segment + its legend dot vanished). */
:root { --ch-bucket-pretax: #1466B8; --ch-bucket-roth: #0E8A6E; --ch-bucket-taxable: #8A5A0B; --ch-bucket-hsa: #6B2C86; }
[data-theme="dark"] { --ch-bucket-pretax: #5BA0D9; --ch-bucket-roth: #3FBFA0; --ch-bucket-taxable: #CBA15A; --ch-bucket-hsa: #D28EE0; }
.ch-mix { display: flex; height: 12px; border-radius: var(--ch-radius-pill); overflow: hidden; background: var(--ch-surface-tint); }
.ch-mix .seg-pretax { background: var(--ch-bucket-pretax); }
.ch-mix .seg-roth { background: var(--ch-bucket-roth); }
/* HSA (4th bucket): plum + a 135° diagonal hatch so it reads under color-vision deficiencies, not hue alone. */
.ch-mix .seg-hsa, .ch-mix-legend i.seg-hsa {
    background-color: var(--ch-bucket-hsa);
    background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.35) 0 1.5px, transparent 1.5px 4px);
}
.ch-mix .seg-taxable { background: var(--ch-bucket-taxable); }
.ch-mix-legend { display: flex; flex-wrap: wrap; gap: var(--ch-sp-2) var(--ch-sp-4); margin-top: var(--ch-sp-3); font-size: var(--ch-fs-13); color: var(--ch-text-muted); }
.ch-mix-legend span { display: inline-flex; align-items: center; gap: 6px; }
.ch-mix-legend i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.ch-mix-legend strong { color: var(--ch-text); font-weight: var(--ch-fw-semibold); }
.ch-mix-total { margin-left: auto; }

/* Picker group-heading color dot: a small preview of the mix-bar color the group maps to. */
.ch-group-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; margin-right: 6px; vertical-align: middle; }
.ch-group-dot.dot-pretax { background: var(--ch-bucket-pretax); }
.ch-group-dot.dot-roth { background: var(--ch-bucket-roth); }
.ch-group-dot.dot-taxable { background: var(--ch-bucket-taxable); }
.ch-group-dot.dot-hsa { background-color: var(--ch-bucket-hsa);
    background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.35) 0 1.5px, transparent 1.5px 4px); }

/* HSA person-level block + household toggle + the plum "HSA voice" callout. */
.ch-hsa-person { border-top: 1px solid var(--ch-border); padding-top: var(--ch-sp-4); margin-top: var(--ch-sp-4); }
.ch-hsa-switch { display: inline-flex; align-items: center; gap: 8px; font-weight: var(--ch-fw-semibold); cursor: pointer; }
.ch-hsa-switch input { width: 18px; height: 18px; accent-color: var(--ch-bucket-hsa); }
.ch-hsa-note { border-left: 3px solid var(--ch-bucket-hsa); background: color-mix(in srgb, var(--ch-bucket-hsa) 10%, transparent);
    border-radius: var(--ch-radius-md); padding: 12px 16px; font-size: var(--ch-fs-14); margin-top: var(--ch-sp-4); }
.ch-hsa-note strong { color: var(--ch-bucket-hsa); }

/* ---- Accounts: phase-1 picker (grouped selectable cards) ------------- */
.ch-acct-group { margin-bottom: var(--ch-sp-6); }
.ch-acct-group > h3, .ch-detail-group > h3 {
    font-size: var(--ch-fs-14); font-weight: var(--ch-fw-semibold); color: var(--ch-text);
    margin-bottom: var(--ch-sp-3);
}
.ch-pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: var(--ch-sp-3); }
.ch-pick {
    display: flex; align-items: center; gap: var(--ch-sp-3); text-align: left;
    min-height: 56px; padding: 12px 16px; border-radius: var(--ch-radius-md);
    border: 1px solid var(--ch-border-strong); background: var(--ch-surface); color: var(--ch-text);
    font-family: inherit; font-size: var(--ch-fs-14); font-weight: var(--ch-fw-medium); cursor: pointer;
}
.ch-pick:hover { border-color: var(--ch-primary); }
.ch-pick.selected {
    border: 2px solid var(--ch-primary); background: var(--ch-surface-info);
    color: var(--ch-primary-text); font-weight: var(--ch-fw-semibold); padding: 11px 15px;
}
.ch-pick-check {
    width: 22px; height: 22px; flex: none; border-radius: 50%;
    border: 2px solid var(--ch-border-strong); display: inline-flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700; color: transparent;
}
.ch-pick.selected .ch-pick-check { background: var(--ch-primary); border-color: var(--ch-primary); color: #fff; }

/* ---- Accounts: phase-2 detail groups + owner toggle ------------------ */
.ch-detail-group { margin-bottom: var(--ch-sp-6); }
.ch-segmented { display: inline-flex; border: 1px solid var(--ch-border-strong); border-radius: var(--ch-radius-md); overflow: hidden; }
.ch-segmented button {
    font-family: inherit; font-size: var(--ch-fs-13); font-weight: var(--ch-fw-medium);
    padding: 0 16px; min-height: 40px; border: none; background: var(--ch-surface);
    color: var(--ch-text-muted); cursor: pointer;
}
.ch-segmented button.on { background: var(--ch-primary); color: #fff; font-weight: var(--ch-fw-semibold); }
.ch-segmented button + button { border-left: 1px solid var(--ch-border-strong); }
/* Momentum: the active segment uses the azure primary with a near-black label in dark mode (matching the
   primary button), so the selected control reads as the brand color in both themes. */
[data-theme="dark"] .ch-segmented button.on { background: var(--ch-primary); color: #08151f; }
.ch-add-dashed {
    width: 100%; min-height: 44px; font-family: inherit; font-size: var(--ch-fs-14); font-weight: var(--ch-fw-semibold);
    color: var(--ch-primary-text); background: transparent; border: 1.5px dashed var(--ch-border-strong);
    border-radius: var(--ch-radius-md); padding: 10px 16px; cursor: pointer;
}
.ch-add-dashed:hover { border-color: var(--ch-primary); background: var(--ch-surface-tint); }

/* ---- Expenses: two-phase (category picker + per-group amount entry) --- */
.ch-chevron { display: inline-block; width: 16px; color: var(--ch-text-muted); }
.ch-group-count { margin-left: 8px; font-weight: var(--ch-fw-regular); font-size: var(--ch-fs-12); color: var(--ch-text-muted); }
.ch-line-note { font-size: var(--ch-fs-12); color: var(--ch-text-muted); margin: 0 0 var(--ch-sp-3); max-width: 60ch; }

/* Clickable category header: label + count on the left, now → retirement subtotal on the right. */
.ch-budget-head {
    display: flex; align-items: center; justify-content: space-between; gap: var(--ch-sp-3);
    cursor: pointer; padding: 8px 10px; margin-bottom: var(--ch-sp-2);
    background: var(--ch-surface-tint); border-radius: var(--ch-radius-md);
}
.ch-budget-head:hover { background: var(--ch-surface-muted, var(--ch-surface-tint)); }
.ch-budget-head:focus-visible { outline: 2px solid var(--ch-primary); outline-offset: 2px; }
.ch-budget-head > h3 { margin: 0; font-size: var(--ch-fs-15); font-weight: var(--ch-fw-semibold); color: var(--ch-text); }
.ch-group-subtotal {
    display: inline-flex; align-items: center; gap: var(--ch-sp-2);
    font-size: var(--ch-fs-13); color: var(--ch-text-muted); font-variant-numeric: tabular-nums;
}
.ch-group-subtotal .ch-arrow { opacity: .6; }

/* Read-only now → retirement change per line (Δ). Calm, not alarming: a drop is reassuring (less to
   fund), a rise is just neutral context — no red/green. */
.ch-delta { font-size: var(--ch-fs-13); font-weight: var(--ch-fw-semibold); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ch-delta.is-down { color: var(--ch-success); }
.ch-delta.is-up { color: var(--ch-text-muted); }

.ch-budget-summary tbody tr:hover { background: transparent; }

/* Expense name + its essential/discretionary tag sit on one line (tag to the right of the description). */
.ch-expense-line { display: flex; align-items: center; gap: var(--ch-sp-2); flex-wrap: wrap; }
.ch-expense-line .ch-expense-name { flex: 1 1 150px; min-width: 120px; }

/* Essential / discretionary tag toggle on each budget line (IMP-06) */
.ch-tag-toggle {
    flex: none; cursor: pointer; border-radius: 999px; padding: 4px 12px; white-space: nowrap;
    font-size: var(--ch-fs-12); font-weight: var(--ch-fw-semibold); line-height: 1.4;
    border: 1px solid var(--ch-border); background: var(--ch-surface); color: var(--ch-text-muted);
    transition: background var(--ch-motion-standard) var(--ch-ease), color var(--ch-motion-standard) var(--ch-ease);
}
.ch-tag-toggle.is-ess { background: var(--ch-surface-info); color: var(--ch-primary-text); border-color: var(--ch-primary); }
.ch-tag-toggle.is-disc { background: var(--ch-surface); color: var(--ch-text-muted); }
.ch-tag-toggle:focus-visible { outline: 2px solid var(--ch-primary); outline-offset: 2px; }

/* Phone: reflow the budget tables from columns to stacked, labeled rows (no horizontal scroll). */
@media (max-width: 680px) {
    .ch-budget thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .ch-budget, .ch-budget tbody, .ch-budget tr, .ch-budget td { display: block; width: auto; }
    .ch-budget tr { border: 1px solid var(--ch-border); border-radius: var(--ch-radius-md);
        padding: 6px 10px; margin-bottom: var(--ch-sp-3); }
    .ch-budget tbody tr:hover { background: transparent; }
    .ch-budget td { border: none; padding: 6px 0; display: flex; align-items: center;
        justify-content: space-between; gap: var(--ch-sp-3); text-align: right; }
    .ch-budget td[data-label]::before { content: attr(data-label); flex: none; text-align: left;
        font-size: var(--ch-fs-12); text-transform: uppercase; letter-spacing: .4px;
        color: var(--ch-text-muted); font-weight: var(--ch-fw-semibold); }
    .ch-budget td:first-child { justify-content: flex-start; text-align: left; flex-wrap: wrap; gap: var(--ch-sp-2); }
    .ch-budget td .ch-prefix { width: auto; }
}

/* Tablet / narrow laptop: reflow the wide (~12-col) year-by-year forecast from columns to stacked,
   labeled rows so there's no side-to-side scrolling. Uses the app's 1024px breakpoint (the same width
   the nav collapses to a drawer); the table is compacted to fit from 1025px up, and reflows below that.
   Add class "ch-reflow" + a data-label on each <td>. */
@media (max-width: 1024px) {
    .ch-reflow thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .ch-reflow, .ch-reflow tbody, .ch-reflow tr, .ch-reflow td { display: block; width: auto; }
    .ch-reflow tr { border: 1px solid var(--ch-border); border-radius: var(--ch-radius-md);
        padding: 8px 12px; margin-bottom: var(--ch-sp-3); }
    .ch-reflow tbody tr:hover { background: transparent; }
    .ch-reflow td { border: none; padding: 5px 0; display: flex; align-items: center; flex-wrap: wrap;
        justify-content: space-between; gap: var(--ch-sp-3); text-align: right; }
    /* Let a long label (e.g. "Contributions / withdrawals") shrink and wrap instead of pushing the value
       off the right edge; flex-wrap keeps the value fully visible on its own line if needed. */
    .ch-reflow td[data-label]::before { content: attr(data-label); flex: 1 1 auto; min-width: 0; text-align: left;
        font-size: var(--ch-fs-12); text-transform: uppercase; letter-spacing: .4px;
        color: var(--ch-text-muted); font-weight: var(--ch-fw-semibold); }
}

/* ---- Multiple pensions per person (IMP-11) -------------------------- */
.ch-pension-row {
    display: grid; grid-template-columns: 1.6fr 1.1fr 0.8fr 0.9fr auto;
    gap: var(--ch-sp-3); align-items: end; margin-bottom: var(--ch-sp-3);
    padding-bottom: var(--ch-sp-3); border-bottom: 1px solid var(--ch-border);
}
.ch-pension-row:last-of-type { border-bottom: none; }
.ch-pension-row .ch-btn-danger-text { padding-bottom: 8px; }
@media (max-width: 680px) { .ch-pension-row { grid-template-columns: 1fr 1fr; } }

/* ---- Help: quiet "?" button + right slide-in panel ------------------- */
.ch-help-btn {
    width: 20px; height: 20px; flex: none; margin-left: 6px; vertical-align: middle;
    border-radius: 50%; border: 1px solid var(--ch-border-strong); background: var(--ch-surface);
    color: var(--ch-text-muted); font-size: 12px; font-weight: 700; line-height: 1; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}
.ch-help-btn:hover { border-color: var(--ch-primary); color: var(--ch-primary); }

.ch-help-backdrop { position: fixed; inset: 0; background: rgba(21, 33, 43, .35); z-index: 50; }
.ch-help-panel {
    position: fixed; top: 0; right: 0; bottom: 0; width: 400px; max-width: 92vw; z-index: 51;
    background: var(--ch-surface); border-left: 4px solid var(--ch-primary);
    box-shadow: var(--ch-shadow-md); padding: var(--ch-sp-6); overflow-y: auto;
    animation: ch-help-in var(--ch-motion-panel) var(--ch-ease);
}
@keyframes ch-help-in { from { transform: translateX(100%); } to { transform: translateX(0); } }
.ch-help-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--ch-sp-2); }
.ch-help-eyebrow { font-size: var(--ch-fs-12); text-transform: uppercase; letter-spacing: 1px; color: var(--ch-text-muted); font-weight: var(--ch-fw-semibold); }
.ch-help-close { width: 36px; height: 36px; border: none; background: transparent; color: var(--ch-text-muted); font-size: 16px; cursor: pointer; border-radius: var(--ch-radius-md); }
.ch-help-close:hover { background: var(--ch-surface-tint); color: var(--ch-text); }

/* Ask ClearHorizon conversation panel — shares the Help panel's slide-in slot and z-index, laid out as a
   header + scrolling message log + a pinned input row. Regions carry their own padding (panel padding is 0)
   so the header divider and input divider span the full panel width. Colors/spacing are token-only, so the
   whole surface follows [data-theme="dark"] automatically, and the user bubble is a calm blue tint (not a
   full-saturation fill) that keeps AA contrast in both themes. */
.ch-ask-panel {
    position: fixed; top: 0; right: 0; bottom: 0; width: 420px; max-width: 92vw; z-index: 51;
    background: var(--ch-surface); border-left: 4px solid var(--ch-primary);
    box-shadow: var(--ch-shadow-md); padding: 0;
    display: flex; flex-direction: column;
    animation: ch-help-in var(--ch-motion-panel) var(--ch-ease);
    /* Shared brand glyph (a sun rising over the horizon) used for every assistant/identity avatar; masked so
       it inherits the avatar's text color and adapts to light/dark. */
    --ch-ask-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M7 15a5 5 0 0 1 10 0z'/%3E%3Crect x='2.5' y='15' width='19' height='1.8' rx='.9'/%3E%3Cg stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M12 3.5v2.2'/%3E%3Cpath d='M4.8 6.3l1.5 1.5'/%3E%3Cpath d='M19.2 6.3l-1.5 1.5'/%3E%3C/g%3E%3C/svg%3E");
}

/* Header: brand avatar + name/subtitle + close */
.ch-ask-head {
    display: flex; align-items: center; gap: var(--ch-sp-3);
    padding: var(--ch-sp-4); border-bottom: 1px solid var(--ch-border);
}
.ch-ask-id { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.ch-ask-id-name { font-size: var(--ch-fs-16); font-weight: var(--ch-fw-semibold); color: var(--ch-text); line-height: 1.25; }
.ch-ask-id-sub { font-size: var(--ch-fs-12); color: var(--ch-text-muted); line-height: 1.3; }
.ch-ask-close {
    flex: none; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
    border: none; background: transparent; color: var(--ch-text-muted); border-radius: var(--ch-radius-md);
    cursor: pointer; transition: background var(--ch-motion-micro) var(--ch-ease), color var(--ch-motion-micro) var(--ch-ease);
}
.ch-ask-close:hover { background: var(--ch-surface-tint); color: var(--ch-text); }
.ch-ask-close:focus-visible { outline: 2px solid var(--ch-primary); outline-offset: 2px; }
.ch-ask-close svg { display: block; }

/* Brand avatars share the sun-over-horizon glyph via a mask, so the mark inherits the avatar's text color
   (surface on the primary chips, primary on the empty-state chip) and stays crisp in light and dark. */
.ch-ask-id-avatar, .ch-ask-avatar {
    flex: none; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; background: var(--ch-primary); color: var(--ch-surface); box-shadow: var(--ch-shadow-sm);
}
.ch-ask-id-avatar::before, .ch-ask-avatar::before, .ch-ask-empty-icon::before {
    content: ''; display: block; background: currentColor;
    -webkit-mask: var(--ch-ask-glyph) center / contain no-repeat;
            mask: var(--ch-ask-glyph) center / contain no-repeat;
}
.ch-ask-id-avatar { width: 40px; height: 40px; }
.ch-ask-id-avatar::before { width: 22px; height: 22px; }
.ch-ask-avatar { width: 28px; height: 28px; margin-bottom: 2px; }
.ch-ask-avatar::before { width: 16px; height: 16px; }

.ch-ask-log {
    flex: 1 1 auto; overflow-y: auto; display: flex; flex-direction: column;
    gap: var(--ch-sp-3); padding: var(--ch-sp-4);
}

/* Empty state: brand mark, a lead line, quiet example prompts, and the not-advice note. Presentational only —
   the examples are non-interactive quotes, not buttons, so no new C# is needed. */
.ch-ask-empty {
    margin: auto 0; display: flex; flex-direction: column; align-items: center; gap: var(--ch-sp-3);
    text-align: center; padding: var(--ch-sp-6) var(--ch-sp-2);
}
.ch-ask-empty-icon {
    flex: none; width: 52px; height: 52px; border-radius: 50%;
    background: var(--ch-surface-info); color: var(--ch-primary);
    display: inline-flex; align-items: center; justify-content: center;
}
.ch-ask-empty-icon::before { width: 28px; height: 28px; }
.ch-ask-empty-lead { margin: 0; font-size: var(--ch-fs-16); font-weight: var(--ch-fw-medium); color: var(--ch-text); line-height: 1.45; }
.ch-ask-empty-eyebrow { margin: var(--ch-sp-1) 0 0; font-size: var(--ch-fs-12); text-transform: uppercase; letter-spacing: .6px; font-weight: var(--ch-fw-semibold); color: var(--ch-text-muted); }
.ch-ask-examples { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--ch-sp-2); width: 100%; }
.ch-ask-examples li {
    text-align: left; font-size: var(--ch-fs-14); font-style: italic; color: var(--ch-text-muted);
    line-height: 1.45; padding: var(--ch-sp-1) 0 var(--ch-sp-1) var(--ch-sp-3);
    border-left: 2px solid var(--ch-border-strong);
}
.ch-ask-empty-note { margin: var(--ch-sp-1) 0 0; font-size: var(--ch-fs-12); color: var(--ch-text-muted); line-height: 1.4; }

/* Message rows: avatar + bubble. The row owns the left/right alignment; the bubble sizes to its content. */
.ch-ask-row { display: flex; align-items: flex-end; gap: var(--ch-sp-2); max-width: 92%; }
.ch-ask-row.user { align-self: flex-end; }
.ch-ask-row.assistant, .ch-ask-row.error { align-self: flex-start; }
.ch-ask-row.cap { align-self: stretch; max-width: none; }

.ch-ask-msg {
    max-width: 100%; padding: var(--ch-sp-3) var(--ch-sp-4); border-radius: var(--ch-radius-lg);
    font-size: var(--ch-fs-14); line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere;
    box-shadow: var(--ch-shadow-sm);
}
.ch-ask-msg.user { background: var(--ch-surface-info); color: var(--ch-primary-text); border-bottom-right-radius: var(--ch-radius-sm); }
.ch-ask-msg.assistant { background: var(--ch-surface-tint); color: var(--ch-text); border-bottom-left-radius: var(--ch-radius-sm); }
.ch-ask-msg.error { background: var(--ch-danger-bg); color: var(--ch-danger); display: flex; flex-direction: column; gap: var(--ch-sp-2); align-items: flex-start; box-shadow: none; }
.ch-ask-msg.cap { width: 100%; background: var(--ch-warning-bg); color: var(--ch-warning); text-align: center; box-shadow: none; }
.ch-ask-retry { border: none; background: transparent; color: var(--ch-danger); font-weight: var(--ch-fw-semibold); cursor: pointer; padding: 0; text-decoration: underline; }
.ch-ask-retry:hover { text-decoration: none; }
.ch-ask-working { color: var(--ch-text-muted); display: inline-flex; align-items: center; gap: var(--ch-sp-2); }
.ch-ask-dots { display: inline-flex; gap: 3px; }
.ch-ask-dots i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; animation: ch-ask-blink 1.2s infinite both; }
.ch-ask-dots i:nth-child(2) { animation-delay: .2s; }
.ch-ask-dots i:nth-child(3) { animation-delay: .4s; }
@keyframes ch-ask-blink { 0%, 80%, 100% { opacity: .2; } 40% { opacity: 1; } }

/* Input row: pill field + circular icon send button, with deliberate disabled/cap styling. */
.ch-ask-input { display: flex; gap: var(--ch-sp-2); align-items: center; padding: var(--ch-sp-4); border-top: 1px solid var(--ch-border); background: var(--ch-surface); }
.ch-ask-input input {
    flex: 1 1 auto; min-width: 0; padding: var(--ch-sp-3) var(--ch-sp-4); font-size: var(--ch-fs-14);
    border: 1px solid var(--ch-border-strong); border-radius: var(--ch-radius-pill);
    background: var(--ch-surface); color: var(--ch-text);
    transition: border-color var(--ch-motion-micro) var(--ch-ease), box-shadow var(--ch-motion-micro) var(--ch-ease);
}
.ch-ask-input input::placeholder { color: var(--ch-text-muted); }
.ch-ask-input input:focus-visible { outline: none; border-color: var(--ch-primary); box-shadow: 0 0 0 3px var(--ch-surface-info); }
.ch-ask-input input:disabled { background: var(--ch-surface-tint); color: var(--ch-text-muted); cursor: not-allowed; }
.ch-ask-send {
    flex: none; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
    border: none; border-radius: 50%; background: var(--ch-primary); color: var(--ch-surface); cursor: pointer;
    transition: background var(--ch-motion-micro) var(--ch-ease), transform var(--ch-motion-micro) var(--ch-ease);
}
.ch-ask-send:hover:not(:disabled) { background: var(--ch-primary-hover); }
.ch-ask-send:active:not(:disabled) { transform: scale(.94); }
.ch-ask-send:focus-visible { outline: 2px solid var(--ch-primary); outline-offset: 2px; }
.ch-ask-send:disabled { background: var(--ch-surface-tint); color: var(--ch-text-decorative); cursor: not-allowed; }
.ch-ask-send svg { display: block; }
.ch-help-title { font-size: var(--ch-fs-24); font-weight: var(--ch-fw-semibold); margin-bottom: var(--ch-sp-4); color: var(--ch-text); }
.ch-help-section { margin-bottom: var(--ch-sp-4); }
.ch-help-section h3 { font-size: var(--ch-fs-12); text-transform: uppercase; letter-spacing: .6px; color: var(--ch-text-muted); font-weight: var(--ch-fw-semibold); margin-bottom: 4px; }
.ch-help-section p { margin: 0; color: var(--ch-text); font-size: var(--ch-fs-14); line-height: 1.5; }
.ch-help-tip { background: var(--ch-warning-bg); color: var(--ch-warning); border-radius: var(--ch-radius-md); padding: 10px 14px; font-size: var(--ch-fs-13); margin: var(--ch-sp-4) 0; }
.ch-help-source { display: inline-block; margin-top: var(--ch-sp-2); font-size: var(--ch-fs-14); font-weight: var(--ch-fw-semibold); }
.ch-help-browse { display: block; margin-top: var(--ch-sp-5); padding-top: var(--ch-sp-4); border-top: 1px solid var(--ch-border); font-size: var(--ch-fs-14); font-weight: var(--ch-fw-semibold); }

/* ---- Help & support page: search + browsable index ------------------- */
.ch-h2 { font-size: var(--ch-fs-18); font-weight: var(--ch-fw-semibold); color: var(--ch-text); margin: 0 0 var(--ch-sp-3); }
.ch-help-search { position: relative; display: flex; align-items: center; }
.ch-help-search svg { position: absolute; left: 12px; width: 18px; height: 18px; color: var(--ch-text-muted); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; pointer-events: none; }
.ch-help-search input { width: 100%; padding: 10px 38px 10px 38px; border: 1px solid var(--ch-border-strong); border-radius: var(--ch-radius-md); background: var(--ch-surface); color: var(--ch-text); font-size: var(--ch-fs-15); }
.ch-help-search input:focus-visible { outline: 2px solid var(--ch-primary); outline-offset: 1px; }
.ch-help-search-clear { position: absolute; right: 8px; width: 24px; height: 24px; border: none; background: transparent; color: var(--ch-text-muted); cursor: pointer; border-radius: 50%; font-size: var(--ch-fs-13); }
.ch-help-search-clear:hover { background: var(--ch-surface-tint); color: var(--ch-text); }
.ch-help-index { list-style: none; margin: var(--ch-sp-4) 0 0; padding: 0; display: grid; gap: var(--ch-sp-2); }
.ch-help-index-item { display: block; width: 100%; text-align: left; padding: 12px 14px; border: 1px solid var(--ch-border); border-radius: var(--ch-radius-md); background: var(--ch-surface); cursor: pointer; }
.ch-help-index-item:hover { border-color: var(--ch-primary); background: var(--ch-surface-info); }
.ch-help-index-item:focus-visible { outline: 2px solid var(--ch-primary); outline-offset: 1px; }
.ch-help-index-title { display: block; font-size: var(--ch-fs-15); font-weight: var(--ch-fw-semibold); color: var(--ch-primary-text); }
.ch-help-index-blurb { display: block; margin-top: 2px; font-size: var(--ch-fs-13); color: var(--ch-text-muted); line-height: 1.45; }
.ch-help-search + .ch-help-index { margin-top: var(--ch-sp-4); }

/* ---- Dashboard: hero tile, status, chart, insights ------------------- */
.ch-tile-hero { background: var(--ch-surface-info); border: 1px solid var(--ch-border); }
.ch-tile-hero .v { color: var(--ch-primary-text); }

.ch-status-row { display: flex; align-items: center; gap: var(--ch-sp-3); flex-wrap: wrap; }
.ch-status-pill { display: inline-flex; align-items: center; padding: 4px 14px; border-radius: var(--ch-radius-pill); font-size: var(--ch-fs-14); font-weight: var(--ch-fw-semibold); }
.ch-status-pill.ok { background: var(--ch-success-bg); color: var(--ch-success); }
.ch-status-pill.warn { background: var(--ch-warning-bg); color: var(--ch-warning); }
.ch-status-text { color: var(--ch-text); font-size: var(--ch-fs-14); }

.ch-chart-svg { width: 100%; height: auto; display: block; }
/* Scope axis/grid styling to the SVG itself so it applies whether or not the chart is wrapped in a
   .ch-chart figure (the optimizer's bracket chart renders the SVG directly). Without this the axis
   labels fall back to black and are unreadable in dark mode. */
.ch-chart .ch-grid, .ch-chart-svg .ch-grid { stroke: var(--ch-border); stroke-width: 1; }
.ch-chart .ch-axis-y, .ch-chart-svg .ch-axis-y { fill: var(--ch-text-muted); font-size: 11px; text-anchor: end; font-variant-numeric: tabular-nums; }
.ch-chart .ch-axis-x, .ch-chart-svg .ch-axis-x { fill: var(--ch-text-muted); font-size: 11px; text-anchor: middle; }
.ch-chart .ch-retire-line { stroke: var(--ch-text-decorative); stroke-width: 1.5; stroke-dasharray: 4 4; }
.ch-chart .ch-retire-label { fill: var(--ch-text-muted); font-size: 11px; }
.ch-chart-legend { display: flex; gap: var(--ch-sp-4); margin-top: var(--ch-sp-3); font-size: var(--ch-fs-13); color: var(--ch-text-muted); }
.ch-chart-key { display: inline-flex; align-items: center; gap: 8px; }
.ch-chart-data { margin-top: var(--ch-sp-4); }
.ch-chart-data summary { cursor: pointer; color: var(--ch-primary-text); font-size: var(--ch-fs-13); font-weight: var(--ch-fw-semibold); }
.ch-chart-data table { margin-top: var(--ch-sp-3); }

.ch-insights { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--ch-sp-4); }
.ch-insight { display: flex; gap: var(--ch-sp-3); background: var(--ch-surface); border: 1px solid var(--ch-border); border-radius: var(--ch-radius-lg); padding: var(--ch-sp-4); box-shadow: var(--ch-shadow-sm); }
.ch-insight-icon { width: 36px; height: 36px; flex: none; border-radius: 50%; background: var(--ch-surface-info); color: var(--ch-primary); display: inline-flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700; }
.ch-insight-title { font-weight: var(--ch-fw-semibold); color: var(--ch-text); margin-bottom: 2px; }
.ch-insight-body { font-size: var(--ch-fs-13); color: var(--ch-text-muted); line-height: 1.45; }

/* ---- Scenarios compare ----------------------------------------------- */
.ch-compare-pick { display: flex; align-items: flex-end; gap: var(--ch-sp-4); margin-bottom: var(--ch-sp-4); }
.ch-compare-vs { color: var(--ch-text-muted); font-weight: var(--ch-fw-semibold); padding-bottom: 10px; }
.ch-compare-table .ch-cell-better { color: var(--ch-success); font-weight: var(--ch-fw-semibold); }
.ch-compare-table .ch-cell-tight { color: var(--ch-warning); font-weight: var(--ch-fw-semibold); }
.ch-quick-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--ch-sp-4); margin-bottom: var(--ch-sp-6); }
.ch-quick { background: var(--ch-surface); border: 1px solid var(--ch-border); border-radius: var(--ch-radius-lg); padding: var(--ch-sp-4); box-shadow: var(--ch-shadow-sm); }
.ch-quick.active { border: 2px solid var(--ch-primary); }
.ch-quick-head { display: flex; align-items: center; gap: 8px; font-weight: var(--ch-fw-semibold); color: var(--ch-text); margin-bottom: var(--ch-sp-2); }
.ch-quick-num { font-size: var(--ch-fs-20); font-weight: var(--ch-fw-semibold); color: var(--ch-primary-text); }
.ch-quick-sub { font-size: var(--ch-fs-12); color: var(--ch-text-muted); margin-top: 2px; }

/* ---- Bridge: ACA breakdown + cash flow ------------------------------- */
.ch-breakdown { margin-top: var(--ch-sp-4); max-width: 440px; }
.ch-breakdown-row { display: flex; justify-content: space-between; gap: var(--ch-sp-4); padding: 8px 0; border-bottom: 1px solid var(--ch-border); font-size: var(--ch-fs-14); color: var(--ch-text); }
.ch-breakdown-row.total { border-bottom: none; border-top: 2px solid var(--ch-border-strong); font-weight: var(--ch-fw-semibold); margin-top: 2px; }
.ch-flow { max-width: 440px; }
.ch-flow-row { display: flex; justify-content: space-between; gap: var(--ch-sp-4); padding: 10px 0; border-bottom: 1px solid var(--ch-border); font-size: var(--ch-fs-14); color: var(--ch-text); }
.ch-flow-row.total { border-bottom: none; border-top: 2px solid var(--ch-border-strong); font-weight: var(--ch-fw-semibold); font-size: var(--ch-fs-16); }
.ch-flow-row .pos { color: var(--ch-success); }
.ch-flow-row .neg { color: var(--ch-danger); }

/* ---- Withdrawal optimizer -------------------------------------------- */
/* Momentum gradient banner — used by the Tax Plan lifetime-savings banner AND the dashboard hero. */
.ch-opt-banner { background: linear-gradient(135deg, var(--ch-primary) 0%, var(--ch-primary-hover) 100%); color: #fff; border-radius: var(--ch-radius-lg); padding: var(--ch-sp-8); margin-bottom: var(--ch-sp-6); box-shadow: var(--ch-shadow-sm); }
/* In dark mode the primaries are light, so the gradient is light — flip the text dark (matches Momentum). */
[data-theme="dark"] .ch-opt-banner { color: #08151f; }
.ch-opt-banner-label { font-size: var(--ch-fs-14); opacity: .85; }
.ch-opt-banner-num { font-size: var(--ch-fs-38); font-weight: var(--ch-fw-semibold); margin: 4px 0 var(--ch-sp-4); font-variant-numeric: tabular-nums; }
.ch-opt-banner-totals { display: flex; gap: var(--ch-sp-3); flex-wrap: wrap; }
.ch-opt-total { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 16px; border-radius: var(--ch-radius-md); border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.14); color: inherit; min-width: 180px; }
.ch-opt-total .l { font-size: var(--ch-fs-12); opacity: .85; }
.ch-opt-total .v { font-size: var(--ch-fs-18); font-weight: var(--ch-fw-semibold); font-variant-numeric: tabular-nums; }
.ch-opt-banner-note { margin-top: var(--ch-sp-4); font-size: var(--ch-fs-12); line-height: 1.5; opacity: .9; }
.ch-opt-banner-note strong { opacity: 1; font-weight: var(--ch-fw-semibold); }
/* The status pill on the Dashboard hero keeps its real .ok/.warn status colour (green / amber) so it reads
   as a status at a glance, rather than a washed-out translucent chip on the gradient. */

/* Optimizer (Tax plan) banner: savings figure on the left; the two lifetime-tax totals stacked vertically
   on the right with the fine-print note beneath — a two-column layout that saves vertical space. */
.ch-opt-banner-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ch-sp-6); align-items: center; }
.ch-opt-banner-split .ch-opt-banner-main { display: flex; flex-direction: column; justify-content: center; }
.ch-opt-banner-split .ch-opt-banner-side { display: flex; flex-direction: column; gap: var(--ch-sp-3); }
.ch-opt-banner-split .ch-opt-banner-totals { flex-direction: column; flex-wrap: nowrap; }
.ch-opt-banner-split .ch-opt-banner-note { margin-top: 0; }
@media (max-width: 720px) { .ch-opt-banner-split { grid-template-columns: 1fr; } }
.ch-year-picker { margin-bottom: var(--ch-sp-5); }

.ch-chip-teal { background: var(--ch-success-bg); color: var(--ch-accent); }
.ch-recipe { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--ch-sp-3); }
.ch-step-card { display: flex; gap: var(--ch-sp-3); border: 1px solid var(--ch-border); border-radius: var(--ch-radius-md); padding: var(--ch-sp-3); background: var(--ch-surface); }
.ch-step-teal { border: 2px solid var(--ch-accent); background: var(--ch-success-bg); }
.ch-step-teal .ch-insight-icon { background: var(--ch-accent); color: #fff; }
.ch-amber-callout { background: var(--ch-warning-bg); color: var(--ch-warning); border-radius: var(--ch-radius-md); padding: 12px 16px; font-size: var(--ch-fs-14); margin-top: var(--ch-sp-4); }
.ch-disclaimer { color: var(--ch-text-muted); font-size: var(--ch-fs-12); padding: var(--ch-sp-4); border-top: 1px solid var(--ch-border); }

.ch-file-link { color: var(--ch-primary); cursor: pointer; }
.ch-file-link:hover { text-decoration: underline; }

/* ---- Billing: trial banner + plan cards ------------------------------ */
.ch-trial-banner {
    display: flex; align-items: center; justify-content: center; gap: var(--ch-sp-3);
    background: var(--ch-info-bg); color: var(--ch-primary-text);
    padding: 8px var(--ch-sp-6); font-size: var(--ch-fs-13); font-weight: var(--ch-fw-medium);
    border-bottom: 1px solid var(--ch-border);
}
.ch-trial-banner a { font-weight: var(--ch-fw-semibold); }
.ch-plan-card {
    background: var(--ch-surface); border: 1px solid var(--ch-border); border-radius: var(--ch-radius-lg);
    padding: var(--ch-sp-6); box-shadow: var(--ch-shadow-sm); display: flex; flex-direction: column; gap: var(--ch-sp-3);
}
.ch-plan-title { display: flex; align-items: center; gap: 8px; font-weight: var(--ch-fw-semibold); color: var(--ch-text); }
.ch-plan-price { font-size: var(--ch-fs-30); font-weight: var(--ch-fw-semibold); color: var(--ch-primary-text); }
.ch-plan-unit { font-size: var(--ch-fs-14); font-weight: var(--ch-fw-regular); color: var(--ch-text-muted); }
.ch-plan-card .ch-btn { margin-top: auto; }

/* ---- Tables ---------------------------------------------------------- */
.ch-table { width: 100%; border-collapse: collapse; font-size: var(--ch-fs-14); }
.ch-table th { text-align: left; font-size: var(--ch-fs-12); text-transform: uppercase; letter-spacing: .4px;
    color: var(--ch-text-muted); font-weight: var(--ch-fw-semibold); padding: 8px 10px; border-bottom: 2px solid var(--ch-border-strong); }
.ch-table td { padding: 8px 10px; border-bottom: 1px solid var(--ch-border); }
.ch-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.ch-table tfoot td { font-weight: var(--ch-fw-semibold); border-top: 2px solid var(--ch-border-strong); border-bottom: none; }
.ch-table tbody tr:hover { background: var(--ch-surface-tint); }

/* The year-by-year forecast is the app's widest table (~12 cols). Tighten its horizontal cell
   padding so the full column set fits without a horizontal scrollbar down to ~1025px, below which
   it reflows to stacked cards (see the 1024px block). Scoped to .ch-reflow so every other table
   keeps the roomier default padding. */
.ch-reflow th, .ch-reflow td { padding-left: 6px; padding-right: 6px; }

/* Year-by-year forecast grid: the compacted table fits without sideways scroll from 1025px up, and
   there we cap the height into a scroll region so the column header stays pinned while paging through
   many years. At 1024px and below the table reflows to stacked cards (header hidden), so the pinning
   only applies from 1025px up. The sticky header needs an opaque background (rows scroll under it) and
   a box-shadow bottom rule — a collapsed-border bottom scrolls away with the cell, but an inset shadow
   stays put. */
.ch-table-scroll { overflow-x: auto; }
@media (min-width: 1025px) {
    .ch-table-scroll { max-height: 70vh; overflow-y: auto; }
    .ch-table-scroll thead th {
        position: sticky;
        top: 0;
        z-index: 1;
        background: var(--ch-surface);
        box-shadow: inset 0 -2px 0 var(--ch-border-strong);
    }
}

/* ---- Metric tiles ---------------------------------------------------- */
.ch-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--ch-sp-4); margin-bottom: var(--ch-sp-6); }
.ch-tile { background: var(--ch-surface); border: 1px solid var(--ch-border); border-radius: var(--ch-radius-lg); padding: var(--ch-sp-4) var(--ch-sp-6);
    transition: transform var(--ch-motion-standard) var(--ch-ease), box-shadow var(--ch-motion-standard) var(--ch-ease), border-color var(--ch-motion-standard) var(--ch-ease); }
.ch-tile:hover { transform: translateY(-2px); box-shadow: var(--ch-shadow-lg); border-color: var(--ch-border-strong); }
.ch-tile .v { font-size: var(--ch-fs-24); font-weight: var(--ch-fw-semibold); font-variant-numeric: tabular-nums; }
.ch-tile .l { color: var(--ch-text-muted); font-size: var(--ch-fs-13); margin-top: 2px; }

/* Dashboard hero: gradient banner beside a stacked column of chip-tiles */
.ch-hero-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: var(--ch-sp-4); margin-bottom: var(--ch-sp-6); align-items: stretch; }
.ch-hero-grid .ch-opt-banner { margin-bottom: 0; display: flex; flex-direction: column; justify-content: center; }
.ch-hero-tiles { display: flex; flex-direction: column; gap: var(--ch-sp-3); }
.ch-hero-tiles .ch-tile { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: var(--ch-sp-3); }
@media (max-width: 900px) { .ch-hero-grid { grid-template-columns: 1fr; } }

/* Status ribbon: surface card with a left accent border and a trailing action */
.ch-ribbon { display: flex; align-items: center; gap: var(--ch-sp-3); flex-wrap: wrap; background: var(--ch-surface); border: 1px solid var(--ch-border); border-left: 4px solid var(--ch-accent); border-radius: var(--ch-radius-lg); padding: var(--ch-sp-3) var(--ch-sp-4); margin-bottom: var(--ch-sp-6); color: var(--ch-text-muted); font-size: var(--ch-fs-14); }
.ch-ribbon .sp { flex: 1; }

.ch-muted { color: var(--ch-text-muted); }
.ch-loading { color: var(--ch-text-muted); padding: var(--ch-sp-12) 0; text-align: center; }
.ch-center-hero { max-width: 560px; margin: 8vh auto 0; text-align: center; }
.ch-center-hero h1 { font-size: var(--ch-fs-38); font-weight: var(--ch-fw-semibold); margin-bottom: var(--ch-sp-3); }
.ch-center-hero p { color: var(--ch-text-muted); font-size: var(--ch-fs-18); margin-bottom: var(--ch-sp-8); }

.ch-row-actions { display: flex; gap: var(--ch-sp-2); flex-wrap: wrap; }
.ch-inline { display: flex; gap: var(--ch-sp-3); align-items: flex-end; flex-wrap: wrap; }

/* ---- Withdrawal strategies ------------------------------------------- */
.ch-field-note { font-size: var(--ch-fs-12); color: var(--ch-text-muted); margin-top: 6px; max-width: 60ch; }

.ch-settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--ch-sp-6); }

.ch-strategy-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--ch-sp-4); margin-top: var(--ch-sp-4); }
.ch-strategy-card {
    display: flex; flex-direction: column; gap: 6px;
    border: 1px solid var(--ch-border); border-radius: var(--ch-radius-md);
    padding: var(--ch-sp-4); background: var(--ch-surface);
}
.ch-strategy-card.active { border: 2px solid var(--ch-primary); padding: calc(var(--ch-sp-4) - 1px); }
.ch-strategy-card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--ch-sp-2); }
.ch-strategy-name { font-weight: var(--ch-fw-semibold); font-size: var(--ch-fs-16); }
.ch-strategy-kind { font-size: var(--ch-fs-13); color: var(--ch-primary-text); font-weight: var(--ch-fw-medium); }
.ch-strategy-params { font-size: var(--ch-fs-12); color: var(--ch-text-muted); flex: 1 1 auto; }
.ch-strategy-actions { display: flex; flex-wrap: wrap; gap: var(--ch-sp-2); margin-top: var(--ch-sp-2); }

.ch-btn-sm { min-height: 32px; padding: 4px 12px; font-size: var(--ch-fs-13); }

.ch-editor {
    margin-top: var(--ch-sp-6); padding-top: var(--ch-sp-6);
    border-top: 1px solid var(--ch-border);
}
.ch-editor h3 { font-size: var(--ch-fs-18); font-weight: var(--ch-fw-semibold); margin-bottom: var(--ch-sp-3); }
.ch-editor-desc { margin: var(--ch-sp-2) 0 var(--ch-sp-3); max-width: 70ch; }
.ch-strategy-credit {
    margin: 0 0 var(--ch-sp-4); max-width: 70ch;
    font-size: var(--ch-fs-12); font-style: italic; color: var(--ch-text-muted);
    padding-left: var(--ch-sp-3); border-left: 2px solid var(--ch-border);
}

/* ---- Collapsible account-type picker (IMP-12) ---------------------- */
.ch-picker-toggle {
    display: flex; align-items: center; justify-content: space-between; width: 100%;
    background: transparent; border: 1px dashed var(--ch-border); border-radius: var(--ch-radius-md, 8px);
    padding: 12px 16px; min-height: 48px; cursor: pointer;
    font-size: var(--ch-fs-15); font-weight: var(--ch-fw-medium); color: var(--ch-primary);
}
.ch-picker-toggle:hover { background: var(--ch-surface-muted, rgba(0,0,0,.03)); }
.ch-chevron { font-size: 18px; line-height: 1; transition: transform .15s ease; }
.ch-chevron.up { transform: rotate(180deg); }

/* ---- Age slider (AgeSlider.razor) ---------------------------------- */
.ch-ageslider { display: flex; flex-direction: column; gap: 6px; padding-top: 4px; }
.ch-ageslider-readout { display: flex; align-items: baseline; gap: 6px; }
.ch-ageslider-value {
    font-size: var(--ch-fs-24); font-weight: var(--ch-fw-semibold); color: var(--ch-primary);
    font-variant-numeric: tabular-nums;
}
.ch-ageslider-value.unset { color: var(--ch-text-muted); font-weight: var(--ch-fw-medium); }
.ch-ageslider-suffix { font-size: var(--ch-fs-13); color: var(--ch-text-muted); }
.ch-ageslider-scale {
    display: flex; justify-content: space-between;
    font-size: var(--ch-fs-12); color: var(--ch-text-muted);
}
.ch-ageslider-range {
    -webkit-appearance: none; appearance: none; width: 100%; height: 6px; margin: 4px 0;
    background: var(--ch-border); border-radius: 999px; outline-offset: 4px;
}
.ch-ageslider-range::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 50%;
    background: var(--ch-primary); border: 2px solid var(--ch-surface); cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,.3);
}
.ch-ageslider-range::-moz-range-thumb {
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--ch-primary); border: 2px solid var(--ch-surface); cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,.3);
}
.ch-picker-row { display: flex; flex-wrap: wrap; gap: var(--ch-sp-2); margin-bottom: var(--ch-sp-4); }
.ch-picker-row .ch-pick { min-height: 40px; padding: 8px 14px; }
.ch-param-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--ch-sp-4); margin-top: var(--ch-sp-4); }
.ch-editor-actions { display: flex; gap: var(--ch-sp-3); margin-top: var(--ch-sp-6); }

/* Forecast header pill linking back to the active strategy. */
.ch-strategy-pill {
    display: inline-flex; align-items: center; gap: 6px; margin: var(--ch-sp-2) 0 0;
    padding: 4px 14px; border-radius: var(--ch-radius-pill);
    background: var(--ch-surface-tint); color: var(--ch-primary-text);
    font-size: var(--ch-fs-13); font-weight: var(--ch-fw-medium);
    text-decoration: none; border: 1px solid var(--ch-border);
}
.ch-strategy-pill:hover { border-color: var(--ch-primary); }

/* Forecast: shortfall years (strategy targets less than planned expenses). */
.ch-row-shortfall { background: var(--ch-warning-bg); }
.ch-row-shortfall td { color: var(--ch-warning); }
/* Critical shortfall: the strategy targets less than even essential (non-discretionary) expenses — a
   more serious gap than an ordinary shortfall, so red/pink tones rather than amber. */
.ch-row-shortfall-critical { background: var(--ch-danger-bg); }
.ch-row-shortfall-critical td { color: var(--ch-danger); }
.ch-note-cell { font-size: var(--ch-fs-12); color: var(--ch-text-muted); }
.ch-note-footer { font-size: var(--ch-fs-12); color: var(--ch-text-muted); margin-top: var(--ch-sp-3); }
.ch-shortfall-key {
    display: inline-block; width: 12px; height: 12px; vertical-align: -1px;
    border-radius: 3px; background: var(--ch-warning-bg); border: 1px solid var(--ch-warning);
}
.ch-shortfall-key.critical { background: var(--ch-danger-bg); border-color: var(--ch-danger); }

/* Contributions / withdrawals direction indicator (FR-3). Inbound (contributions during
   accumulation) reads green with an up arrow; outbound (withdrawals) stays neutral with a down
   arrow — deliberately NOT warning-amber, which is reserved for shortfall rows. */
.ch-flow-in { color: var(--ch-success); }
.ch-flow-arrow { margin-left: 3px; font-size: var(--ch-fs-12); }

/* ---- Expandable table cell: Portfolio math + Total-income breakdown (FR-1/FR-5) ------
   A <details>/<summary> inside a cell. Click/tap toggles it (native, no JS); on desktop the
   revealed content floats as an elevated popover so it never shifts the row, and a CSS-only
   hover/focus layer gives mouse users a zero-click peek. Reuses the app's card elevation/border
   tokens — no new tokens. Mobile falls back to an in-flow reveal (see the ≤680px block below). */
.ch-expand-hint { text-decoration: underline dotted; text-underline-offset: 2px; text-decoration-color: var(--ch-border-strong); }
.ch-cell-expand { position: relative; display: inline-block; }
.ch-cell-expand > summary {
    list-style: none; cursor: pointer; display: inline-block;
    text-decoration: underline dotted; text-underline-offset: 3px;
    text-decoration-color: var(--ch-border-strong);
    padding: 4px 2px; margin: -4px -2px;              /* comfortable ≥44px tap target without shifting text */
}
.ch-cell-expand > summary::-webkit-details-marker { display: none; }
.ch-cell-expand > summary::marker { content: ""; }
.ch-cell-expand > summary:focus-visible { outline: 2px solid var(--ch-primary); outline-offset: 2px; border-radius: 4px; }

.ch-cell-breakdown {
    position: absolute; top: calc(100% + 6px); right: 0; z-index: 6;
    min-width: 224px; text-align: left;
    background: var(--ch-surface); border: 1px solid var(--ch-border-strong);
    border-radius: var(--ch-radius-md); box-shadow: var(--ch-shadow-md);
    padding: 10px 12px; font-size: var(--ch-fs-13); font-weight: 400; color: var(--ch-text);
}
.ch-cell-breakdown::before {
    content: ""; position: absolute; top: -6px; right: 16px; width: 10px; height: 10px;
    background: var(--ch-surface);
    border-left: 1px solid var(--ch-border-strong); border-top: 1px solid var(--ch-border-strong);
    transform: rotate(45deg);
}
.ch-cell-breakdown > div { display: flex; justify-content: space-between; gap: var(--ch-sp-4); padding: 3px 0; }
.ch-cell-breakdown > div > span:first-child { color: var(--ch-text-muted); }
.ch-cell-breakdown > div > span:last-child { font-variant-numeric: tabular-nums; }
.ch-cell-breakdown-total {
    margin-top: 4px; padding-top: 6px; border-top: 1px solid var(--ch-border);
    font-weight: var(--ch-fw-semibold);
}
.ch-cell-breakdown-total > span:first-child { color: var(--ch-text) !important; }

/* Desktop mouse users get a zero-click peek. Optional polish — the click/tap baseline is fully
   functional and accessible on its own. */
@media (hover: hover) {
    .ch-cell-expand:not([open]):hover .ch-cell-breakdown,
    .ch-cell-expand:not([open]):focus-within .ch-cell-breakdown { display: block; }
}

/* Reflowed cards (≤1024px): no floating popover (a stacked card has no anchor to point at) — reveal in
   flow, full width, below the figure, with a subtle tint instead of a shadow. Matches the table's reflow
   breakpoint so the popovers switch to in-flow exactly when the rows become cards. */
@media (max-width: 1024px) {
    .ch-reflow td:has(> .ch-cell-expand[open]) { flex-wrap: wrap; }
    .ch-reflow td > .ch-cell-expand[open] { flex: 1 1 100%; text-align: left; margin-top: var(--ch-sp-2); }
    .ch-cell-breakdown {
        position: static; box-shadow: none; border: none; min-width: 0; width: 100%;
        background: var(--ch-surface-tint); border-radius: var(--ch-radius-md); margin-top: 4px;
    }
    .ch-cell-breakdown::before { display: none; }
}

/* ---- Notes column: an icon that reveals the year's note ------------------------------
   Reuses the .ch-cell-expand / .ch-cell-breakdown popover above (click/tap toggles, desktop
   hover/focus peeks, floating card with an arrow, mobile in-flow fallback) so the note reads
   like the other cell popups on this page. The summary is an icon rather than dotted text. */
.ch-cell-expand > summary.ch-note-icon {
    text-decoration: none;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--ch-text-muted); line-height: 0;
    padding: 6px; margin: -6px;                       /* comfortable tap target without shifting the row */
}
.ch-cell-expand > summary.ch-note-icon > svg { display: block; }
.ch-cell-expand:hover > summary.ch-note-icon,
.ch-cell-expand[open] > summary.ch-note-icon { color: var(--ch-primary); }
/* Free-text note: let it wrap into a readable column rather than the tabular key/value grid. */
.ch-note-popup { max-width: 280px; white-space: normal; line-height: 1.45; color: var(--ch-text); }

/* Numeric input with a trailing unit (e.g. "%") inside the field. */
.ch-input-affix { position: relative; display: flex; align-items: center; }
.ch-input-affix input { padding-right: 30px; }
.ch-input-affix .ch-affix {
    position: absolute; right: 12px; color: var(--ch-text-muted);
    font-size: var(--ch-fs-13); pointer-events: none;
}

/* ---- Mobile refinements (phones) ------------------------------------- */
@media (max-width: 680px) {
    .ch-page { padding: var(--ch-sp-6) var(--ch-sp-4) 110px; }
    .ch-settings-grid { grid-template-columns: 1fr; gap: var(--ch-sp-4); }
    .ch-strategy-cards { grid-template-columns: 1fr; }
    .ch-page-head h1 { font-size: var(--ch-fs-24); }

    /* Title + action rows: let the actions drop below the heading instead of squeezing. */
    .ch-card-title-row { flex-wrap: wrap; }
    .ch-row-actions .ch-btn { flex: 1 1 auto; } /* buttons share the row width evenly when wrapped */

    /* Scenarios: stack the A vs B pickers. */
    .ch-compare-pick { flex-direction: column; align-items: stretch; gap: var(--ch-sp-2); }
    .ch-compare-pick .ch-field { max-width: none !important; }
    .ch-compare-vs { padding-bottom: 0; text-align: center; }

    /* Sticky save footer: tighter padding, keep room for content above the fold. */
    .ch-footer-bar { padding: var(--ch-sp-3) var(--ch-sp-4); }

    /* Optimizer hero: smaller padding + payoff number so it doesn't overflow. */
    .ch-opt-banner { padding: var(--ch-sp-6); }
    .ch-opt-banner-num { font-size: var(--ch-fs-30); }
    .ch-opt-total { min-width: 0; flex: 1 1 140px; }
}

/* ---- Historical-performance tracking (Track page + dashboard CTA) ----------- */
/* Dashboard call-to-action: blurb on the left, "Update balances" action on the right. */
.ch-track-cta { display: flex; align-items: center; justify-content: space-between; gap: var(--ch-sp-4); flex-wrap: wrap; }
.ch-track-cta h2 { margin: 0 0 var(--ch-sp-1); }
.ch-track-cta p { margin: 0; }

/* Compact "As of" date control in the update card's title row. */
.ch-bal-asof { max-width: 200px; }
.ch-bal-asof input[type="date"] { width: 100%; }

/* One row per account in the update form: name/on-file on the left, new-balance inputs after. */
.ch-bal-list { margin-top: var(--ch-sp-3); }
.ch-bal-row {
    display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--ch-sp-4);
    padding: var(--ch-sp-3) 0; border-bottom: 1px solid var(--ch-border);
}
.ch-bal-row:last-of-type { border-bottom: none; }
.ch-bal-name { flex: 1 1 200px; display: flex; flex-direction: column; gap: 2px; }
.ch-bal-name .name { font-weight: var(--ch-fw-semibold); }
.ch-bal-name .ch-muted { font-size: var(--ch-fs-13); }
.ch-bal-input { flex: 0 1 180px; }

/* History change: a rise is positive (green), a dip is calm/muted — never alarming red. */
.ch-delta.ch-bal-up { color: var(--ch-success); }
.ch-delta.ch-bal-down { color: var(--ch-text-muted); }

/* Inline text button (e.g. "Reset baseline to current plan") that reads as a link within a paragraph. */
.ch-linkbtn {
    background: none; border: none; padding: 0; margin-left: var(--ch-sp-2); cursor: pointer;
    color: var(--ch-primary-text); font: inherit; font-weight: var(--ch-fw-semibold);
    text-decoration: underline; text-underline-offset: 2px;
}
.ch-linkbtn:hover:not(:disabled) { color: var(--ch-primary); }
.ch-linkbtn:disabled { opacity: .55; cursor: default; }

/* Phone: stack the update rows, and reflow the history table to labeled rows (no horizontal scroll). */
@media (max-width: 680px) {
    .ch-bal-row { flex-direction: column; align-items: stretch; gap: var(--ch-sp-2); }
    .ch-bal-input { flex: none; }
    .ch-bal-asof { max-width: none; }

    .ch-bal-history thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .ch-bal-history, .ch-bal-history tbody, .ch-bal-history tr, .ch-bal-history td { display: block; width: auto; }
    .ch-bal-history tr { border: 1px solid var(--ch-border); border-radius: var(--ch-radius-md);
        padding: 6px 10px; margin-bottom: var(--ch-sp-3); }
    .ch-bal-history tbody tr:hover { background: transparent; }
    .ch-bal-history td { border: none; padding: 6px 0; display: flex; align-items: center;
        justify-content: space-between; gap: var(--ch-sp-3); text-align: right; }
    .ch-bal-history td[data-label]::before { content: attr(data-label); flex: none; text-align: left;
        font-size: var(--ch-fs-12); text-transform: uppercase; letter-spacing: .4px;
        color: var(--ch-text-muted); font-weight: var(--ch-fw-semibold); }
}

/* Blazor boilerplate */
.loading-progress { position: fixed; display: block; width: 8rem; height: 8rem; top: 40%; left: calc(50% - 4rem); }
.loading-progress circle { fill: none; stroke: var(--ch-border); stroke-width: .4rem; transform-origin: 50% 50%; transform: rotate(-90deg); }
.loading-progress circle:last-child { stroke: var(--ch-primary); stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * .8), 500%; transition: stroke-dasharray .05s ease-in-out; }
.loading-progress-text { position: absolute; text-align: center; font-weight: var(--ch-fw-semibold); inset: calc(40% + 3.25rem) 0 auto; color: var(--ch-text-muted); }
.loading-progress-text:after { content: var(--blazor-load-percentage-text, "Loading"); }
#blazor-error-ui { background: var(--ch-warning-bg); color: var(--ch-warning); bottom: 0; box-shadow: 0 -1px 2px rgba(0,0,0,.2); display: none; left: 0; padding: .6rem 1.25rem .7rem; position: fixed; width: 100%; z-index: 1000; }
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .75rem; top: .5rem; }
.blazor-error-boundary { background: var(--ch-danger); padding: 1rem; color: white; }
.blazor-error-boundary::after { content: "An error has occurred."; }

/* --- Three-Bucket strategy editor (WS-H) ------------------------------------------------------ */
.ch-bucket-editor { display: flex; flex-direction: column; gap: 1rem; margin-top: .5rem; }
.ch-bucket-runway-label { display: flex; align-items: center; gap: .4rem; font-weight: var(--ch-fw-semibold); margin-bottom: .5rem; }
.ch-bucket-bar { display: flex; height: 2.5rem; border-radius: var(--ch-radius-md); overflow: hidden; border: 1px solid var(--ch-border); }
.ch-bucket-seg { display: flex; align-items: center; justify-content: center; min-width: 0; color: #fff; font-size: .8rem; font-weight: var(--ch-fw-semibold); }
.ch-bucket-seg span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 .35rem; }
.ch-seg-cash { background: var(--ch-bucket-pretax); }
.ch-seg-income { background: var(--ch-bucket-roth); }
.ch-seg-growth { background: var(--ch-bucket-taxable); }
.ch-bucket-coverage { margin-top: .4rem; font-size: .85rem; color: var(--ch-text-muted); }
.ch-bucket-coverage.is-warn { color: var(--ch-warning); }

.ch-bucket-rows { display: flex; flex-direction: column; gap: .75rem; }
.ch-bucket-row { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: .5rem .75rem; padding-bottom: .6rem; border-bottom: 1px solid var(--ch-border); }
.ch-bucket-dot { width: .85rem; height: .85rem; border-radius: 50%; display: inline-block; }
.ch-bucket-name { font-weight: var(--ch-fw-semibold); }
.ch-bucket-inputs { grid-column: 3; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.ch-bucket-inline { display: flex; align-items: center; gap: .4rem; font-size: .85rem; color: var(--ch-text-muted); }
.ch-bucket-inline input { width: 4.5rem; }
.ch-bucket-inline.ch-bucket-rest em { font-style: normal; color: var(--ch-text); }
.ch-bucket-illus { font-size: .85rem; color: var(--ch-text-muted); font-variant-numeric: tabular-nums; }
.ch-bucket-cap { grid-column: 2 / -1; margin-top: -.2rem; }

.ch-bucket-summary { display: flex; gap: .6rem; align-items: flex-start; background: var(--ch-surface-info); border-radius: var(--ch-radius-md); padding: .75rem .9rem; font-size: .9rem; line-height: 1.45; }
.ch-bucket-bolt { flex: 0 0 auto; }

/* stacked "buckets over time" chart */
.ch-area-cash { fill: var(--ch-bucket-pretax); }
.ch-area-income { fill: var(--ch-bucket-roth); }
.ch-area-growth { fill: var(--ch-bucket-taxable); }
.ch-swatch { display: inline-block; width: .8rem; height: .8rem; border-radius: 2px; margin-right: .35rem; vertical-align: -1px; }
.ch-swatch.ch-seg-cash { background: var(--ch-bucket-pretax); }
.ch-swatch.ch-seg-income { background: var(--ch-bucket-roth); }
.ch-swatch.ch-seg-growth { background: var(--ch-bucket-taxable); }

@media (max-width: 680px) {
    .ch-bucket-row { grid-template-columns: auto 1fr; }
    .ch-bucket-inputs { grid-column: 1 / -1; }
    .ch-bucket-cap { grid-column: 1 / -1; }
}

/* --- Monte Carlo ("Chances") ------------------------------------------------------------------ */
.ch-mc-controls { max-width: 28rem; }
/* Chances page: "fact tiles" confirming the active strategy + its parameter values drive the simulation. */
.ch-strategy-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--ch-sp-3); margin-top: var(--ch-sp-4); }
.ch-strategy-facts .ch-fact { display: flex; flex-direction: column; gap: 2px; padding: var(--ch-sp-3);
    background: var(--ch-surface-tint); border-radius: var(--ch-radius-md); }
.ch-strategy-facts .k { font-size: var(--ch-fs-12); text-transform: uppercase; letter-spacing: .4px;
    color: var(--ch-text-muted); font-weight: var(--ch-fw-semibold); }
.ch-strategy-facts .v { font-size: var(--ch-fs-16); font-weight: var(--ch-fw-semibold); color: var(--ch-text); }
.ch-mc-headline { display: flex; align-items: center; gap: 1.25rem; padding: 1.25rem; border-radius: var(--ch-radius-lg); margin: 1rem 0; background: var(--ch-surface-info); border-left: 5px solid var(--ch-primary); }
.ch-mc-headline.is-strong { border-left-color: var(--ch-success); }
.ch-mc-headline.is-ok { border-left-color: var(--ch-primary); }
.ch-mc-headline.is-warn { border-left-color: var(--ch-warning); }
.ch-mc-headline.is-weak { border-left-color: var(--ch-danger); }
.ch-mc-odds { display: flex; align-items: baseline; font-weight: var(--ch-fw-bold); line-height: 1; }
.ch-mc-odds .ch-figure { font-size: 3.4rem; font-variant-numeric: tabular-nums; }
.ch-mc-pct { font-size: 1.6rem; font-weight: var(--ch-fw-semibold); margin-left: .15rem; }
.ch-mc-verdict { display: flex; flex-direction: column; gap: .2rem; }
.ch-mc-verdict strong { font-size: 1.15rem; }
.ch-mc-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.ch-mc-foot { margin-top: 1rem; font-size: .85rem; }

/* Monte Carlo percentile fan */
.ch-fan-outer { fill: var(--ch-primary); fill-opacity: 0.13; }
.ch-fan-inner { fill: var(--ch-primary); fill-opacity: 0.28; }
.ch-fan-median { stroke: var(--ch-primary); fill: none; }
.ch-swatch.ch-fan-outer-key { background: var(--ch-primary); opacity: 0.30; }
.ch-swatch.ch-fan-inner-key { background: var(--ch-primary); opacity: 0.55; }

/* sample-trial trajectories overlaid on the fan */
.ch-path-rough { stroke: var(--ch-warning); fill: none; }
.ch-path-typical { stroke: var(--ch-text); fill: none; }
.ch-path-lucky { stroke: var(--ch-success); fill: none; }

/* ending-balance distribution */
.ch-histogram { display: flex; align-items: flex-end; gap: 2px; height: 120px; margin-top: .5rem; }
.ch-histbar { flex: 1; height: 100%; display: flex; align-items: flex-end; }
.ch-histbar-fill { width: 100%; background: var(--ch-primary); min-height: 1px; border-radius: 2px 2px 0 0; opacity: 0.75; }
.ch-hist-axis { display: flex; justify-content: space-between; font-size: .8rem; color: var(--ch-text-muted); margin-top: .3rem; }

@media (max-width: 680px) {
    .ch-mc-headline { flex-direction: column; align-items: flex-start; gap: .5rem; }
    .ch-mc-odds .ch-figure { font-size: 2.8rem; }
}

/* ============================================================================================== */
/* Marketing landing page (docs/landing-page-ux.md) — slim shell, hero, 3D carousel, pricing.     */
/* ============================================================================================== */

/* ---- Slim marketing shell (MarketingLayout) ---- */
.ch-mktg { display: flex; flex-direction: column; min-height: 100vh; background: var(--ch-bg); color: var(--ch-text); }
.ch-mktg-bar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: var(--ch-sp-3);
    padding: var(--ch-sp-3) var(--ch-sp-6); background: color-mix(in srgb, var(--ch-bg) 85%, transparent);
    backdrop-filter: saturate(1.4) blur(8px); border-bottom: 1px solid var(--ch-border); }
.ch-mktg-brand { display: inline-flex; align-items: center; }
.ch-mktg-brand img { height: 30px; width: auto; display: block; }
.ch-mktg-bar-spacer { flex: 1; }
.ch-mktg-login { padding: 9px 14px; }
.ch-mktg-main { flex: 1; }
.ch-mktg-footer { border-top: 1px solid var(--ch-border); margin-top: var(--ch-sp-16);
    padding: var(--ch-sp-8) var(--ch-sp-6) var(--ch-sp-6); }
.ch-mktg-footer-inner { max-width: 1080px; margin: 0 auto; display: flex; align-items: center;
    justify-content: space-between; gap: var(--ch-sp-4); flex-wrap: wrap; }
.ch-mktg-footer-brand { display: flex; flex-direction: column; gap: 2px; }
.ch-mktg-footer-inner nav { display: flex; gap: var(--ch-sp-4); flex-wrap: wrap; }
.ch-mktg-footer-inner nav a { color: var(--ch-text-muted); font-size: var(--ch-fs-14); }
.ch-mktg-footer-inner nav a:hover { color: var(--ch-primary); }
.ch-mktg-footer-copy { max-width: 1080px; margin: var(--ch-sp-4) auto 0; font-size: var(--ch-fs-12); }

/* ---- Auth handshake shell (AuthLayout) ---- */
/* Shown only for the moment the MSAL redirect is in flight, so it stays deliberately plain. */
.ch-auth-shell { display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: var(--ch-sp-6); min-height: 100vh; padding: var(--ch-sp-6);
    background: var(--ch-bg); color: var(--ch-text); text-align: center; }
.ch-auth-brand { height: 34px; width: auto; display: block; }
.ch-auth-body { color: var(--ch-text-muted); font-size: var(--ch-fs-14); }

/* ---- Landing sections ---- */
.ch-landing { max-width: 1080px; margin: 0 auto; padding: 0 var(--ch-sp-6); }
.ch-landing-section { padding: var(--ch-sp-16) 0 0; }
.ch-section-head { text-align: center; max-width: 640px; margin: 0 auto var(--ch-sp-8); }
.ch-section-head h2 { font-size: var(--ch-fs-30); font-weight: var(--ch-fw-semibold); margin-bottom: var(--ch-sp-2); }
.ch-section-head p { font-size: var(--ch-fs-16); }

/* ---- Hero ---- */
.ch-hero { display: grid; grid-template-columns: 1.05fr 1fr; gap: var(--ch-sp-12); align-items: center;
    padding: var(--ch-sp-16) 0 var(--ch-sp-8); }
.ch-hero-copy h1 { font-size: var(--ch-fs-38); line-height: 1.1; font-weight: var(--ch-fw-semibold); margin-bottom: var(--ch-sp-4); }
.ch-hero-lede { font-size: var(--ch-fs-18); color: var(--ch-text-muted); line-height: 1.55; margin-bottom: var(--ch-sp-6); max-width: 34rem; }
.ch-hero-cta { display: flex; align-items: center; gap: var(--ch-sp-4); flex-wrap: wrap; }
.ch-hero-sample { font-size: var(--ch-fs-14); }
.ch-hero-ribbon { margin-top: var(--ch-sp-4); font-size: var(--ch-fs-13); color: var(--ch-text-muted); font-weight: var(--ch-fw-medium); }
.ch-hero-media { display: flex; justify-content: center; }
.ch-hero-shot { max-width: 460px; }

/* ---- Framed screenshot (shared: hero + carousel). ---- */
.ch-shot { border-radius: var(--ch-radius-lg); overflow: hidden; background: var(--ch-surface);
    border: 1px solid var(--ch-border-strong); box-shadow: var(--ch-shadow-lg); width: 100%; }
.ch-shot-bar { display: flex; gap: 6px; padding: 10px 12px; background: var(--ch-surface-tint);
    border-bottom: 1px solid var(--ch-border); }
.ch-shot-bar span { width: 10px; height: 10px; border-radius: 50%; background: var(--ch-border-strong); }
.ch-shot-body { aspect-ratio: 16 / 10; background: var(--ch-bg); }
.ch-shot-body img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: top center; }
.ch-shot-tag { padding: 8px 12px; font-size: var(--ch-fs-12); font-weight: var(--ch-fw-semibold);
    color: var(--ch-text-muted); background: var(--ch-surface-tint); border-top: 1px solid var(--ch-border);
    text-transform: uppercase; letter-spacing: .5px; }

/* ---- 3D feature carousel (FeatureCarousel) ---- */
.ch-carousel { max-width: 920px; margin: 0 auto; }
.ch-carousel:focus { outline: none; }
.ch-carousel-stage { position: relative; height: 360px; perspective: 1500px; transform-style: preserve-3d; }
.ch-carousel-card { position: absolute; top: 50%; left: 50%; width: 460px; max-width: 74%;
    margin: 0; padding: 0; border: none; background: transparent; cursor: pointer;
    transition: transform 500ms var(--ch-ease), opacity 500ms var(--ch-ease); }
.ch-carousel-card.active { cursor: default; }
.ch-carousel-card:focus-visible { outline: none; }
.ch-carousel-card:focus-visible .ch-shot { outline: 2px solid var(--ch-primary); outline-offset: 3px; }
.ch-carousel-caption { text-align: center; max-width: 560px; margin: var(--ch-sp-6) auto 0; min-height: 5.5rem; }
.ch-carousel-caption h3 { font-size: var(--ch-fs-20); font-weight: var(--ch-fw-semibold); margin-bottom: var(--ch-sp-2); }
.ch-carousel-caption p { color: var(--ch-text-muted); font-size: var(--ch-fs-16); line-height: 1.5; }
.ch-carousel-controls { display: flex; align-items: center; justify-content: center; gap: var(--ch-sp-4); margin-top: var(--ch-sp-4); }
.ch-carousel-arrow { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
    border-radius: 50%; border: 1px solid var(--ch-border-strong); background: var(--ch-surface); color: var(--ch-primary-text);
    cursor: pointer; transition: background var(--ch-motion-micro) var(--ch-ease), border-color var(--ch-motion-micro) var(--ch-ease); }
.ch-carousel-arrow:hover { background: var(--ch-surface-tint); border-color: var(--ch-primary); }
.ch-carousel-arrow:focus-visible { outline: 2px solid var(--ch-primary); outline-offset: 2px; }
.ch-carousel-dots { display: flex; gap: var(--ch-sp-2); }
.ch-carousel-dot { width: 9px; height: 9px; border-radius: 50%; border: none; padding: 0; cursor: pointer;
    background: var(--ch-border-strong); transition: background var(--ch-motion-micro) var(--ch-ease), transform var(--ch-motion-micro) var(--ch-ease); }
.ch-carousel-dot.on { background: var(--ch-primary); transform: scale(1.25); }
.ch-carousel-dot:focus-visible { outline: 2px solid var(--ch-primary); outline-offset: 2px; }

/* ---- Trust band ---- */
.ch-trust-band .ch-trust-inner { display: flex; align-items: center; justify-content: center; gap: var(--ch-sp-3);
    max-width: 760px; margin: 0 auto; padding: var(--ch-sp-6); text-align: center;
    background: var(--ch-surface); border: 1px solid var(--ch-border); border-radius: var(--ch-radius-lg); }
.ch-trust-band .ch-trust-inner svg { flex: none; color: var(--ch-accent); }
.ch-trust-band .ch-trust-inner p { color: var(--ch-text-muted); font-size: var(--ch-fs-14); margin: 0; }

/* ---- Pricing ---- */
.ch-pricing-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ch-sp-6);
    max-width: 760px; margin: 0 auto; }
.ch-pricing-grid .ch-plan-card { text-align: left; }
.ch-plan-sub { font-size: var(--ch-fs-13); margin: -4px 0 var(--ch-sp-2); }
.ch-plan-foot { margin-top: var(--ch-sp-3); }
.ch-plan-trial { font-size: var(--ch-fs-13); color: var(--ch-text-muted); line-height: 1.5; margin: 0; }
.ch-plan-trial strong { color: var(--ch-text); font-weight: var(--ch-fw-semibold); }
.ch-pricing-note { text-align: center; font-size: var(--ch-fs-12); margin-top: var(--ch-sp-6); }

/* ---- Testimonials ---- */
.ch-testimonials { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--ch-sp-4);
    max-width: 960px; margin: 0 auto; }
.ch-testimonial { margin: 0; display: flex; flex-direction: column; gap: var(--ch-sp-4); }
.ch-testimonial blockquote { margin: 0; font-size: var(--ch-fs-16); line-height: 1.55; color: var(--ch-text); }
.ch-testimonial figcaption { display: flex; flex-direction: column; gap: 1px; }
.ch-testimonial-name { font-weight: var(--ch-fw-semibold); color: var(--ch-text); }
.ch-testimonial-context { font-size: var(--ch-fs-13); }

/* ---- Secondary band ---- */
.ch-secondary-band .ch-secondary-inner { text-align: center; max-width: 560px; margin: 0 auto;
    padding: var(--ch-sp-8) var(--ch-sp-6); background: var(--ch-surface-tint); border-radius: var(--ch-radius-lg); }
.ch-secondary-band p { margin: 0 0 var(--ch-sp-2); font-size: var(--ch-fs-14); }
.ch-secondary-band p:last-child { margin-bottom: 0; }

/* ---- Return-from-checkout welcome banner (Dashboard, FR-10) ---- */
.ch-welcome-banner { display: flex; align-items: center; gap: var(--ch-sp-4); margin-bottom: var(--ch-sp-6);
    padding: var(--ch-sp-4) var(--ch-sp-6); background: var(--ch-success-bg); border: 1px solid var(--ch-accent);
    border-radius: var(--ch-radius-lg); }
.ch-welcome-banner > div { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.ch-welcome-banner strong { color: var(--ch-text); }
.ch-welcome-banner span { font-size: var(--ch-fs-14); color: var(--ch-text-muted); }

/* ---- Landing responsive: stack the hero, collapse the 3D carousel to a single card (spec §3) ---- */
@media (max-width: 1024px) {
    .ch-hero { grid-template-columns: 1fr; gap: var(--ch-sp-8); padding-top: var(--ch-sp-12); text-align: center; }
    .ch-hero-lede { margin-left: auto; margin-right: auto; }
    .ch-hero-cta { justify-content: center; }
    .ch-hero-media { order: -1; }
    .ch-hero-shot { max-width: 400px; }
    .ch-carousel-stage { height: auto; perspective: none; }
    .ch-carousel-card { position: static; top: auto; left: auto; width: 100%; max-width: 480px; margin: 0 auto;
        transform: none !important; opacity: 1 !important; transition: none; }
    .ch-carousel-card:not(.active) { display: none; }
}

@media (max-width: 680px) {
    .ch-pricing-grid { grid-template-columns: 1fr; }
    .ch-landing-section { padding-top: var(--ch-sp-12); }
    .ch-hero-copy h1 { font-size: var(--ch-fs-30); }
}

/* ---- Sample-explore demo (/demo, FR-8) ---- */
.ch-demo { padding-top: var(--ch-sp-8); padding-bottom: var(--ch-sp-16); }
.ch-demo-head { max-width: 640px; margin: 0 auto var(--ch-sp-8); text-align: center; }
.ch-demo-head h1 { font-size: var(--ch-fs-30); font-weight: var(--ch-fw-semibold); margin: var(--ch-sp-3) 0 var(--ch-sp-2); }
.ch-demo-grid { display: grid; grid-template-columns: 340px 1fr; gap: var(--ch-sp-6); align-items: start; }
.ch-demo-controls h2, .ch-demo-chart h2, .ch-demo-wall h2 { font-size: var(--ch-fs-18); margin: 0 0 var(--ch-sp-4); }
.ch-demo-slider { margin-bottom: var(--ch-sp-6); }
.ch-demo-slider-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--ch-sp-2); }
.ch-demo-slider-head label { font-size: var(--ch-fs-14); font-weight: var(--ch-fw-medium); color: var(--ch-text); }
.ch-demo-slider-head span { font-size: var(--ch-fs-18); font-weight: var(--ch-fw-semibold); color: var(--ch-primary-text); }
.ch-demo-slider input[type="range"] { width: 100%; accent-color: var(--ch-primary); cursor: pointer; }
.ch-demo-slider input[type="range"]:disabled { opacity: .6; cursor: default; }
.ch-demo-slider-scale { display: flex; justify-content: space-between; margin-top: 4px; font-size: var(--ch-fs-12); color: var(--ch-text-muted); }
.ch-demo-odds { margin-top: var(--ch-sp-4); padding-top: var(--ch-sp-4); border-top: 1px solid var(--ch-border); }
.ch-demo-odds .l { font-size: var(--ch-fs-13); color: var(--ch-text-muted); }
.ch-demo-odds .v { font-size: var(--ch-fs-30); font-weight: var(--ch-fw-semibold); color: var(--ch-primary-text); }
.ch-demo-chart { min-width: 0; }
.ch-demo-wall { display: flex; align-items: center; justify-content: space-between; gap: var(--ch-sp-6);
    margin-top: var(--ch-sp-6); background: var(--ch-surface-info); border: 1px solid var(--ch-border); }
.ch-demo-wall p { margin: 0; max-width: 46ch; }
.ch-demo-wall-cta { display: flex; flex-direction: column; align-items: stretch; gap: var(--ch-sp-3); flex: none; }
.ch-demo-wall-links { display: flex; gap: var(--ch-sp-4); justify-content: center; flex-wrap: wrap; }
.ch-demo-modal { position: fixed; z-index: 41; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: min(460px, calc(100vw - 2 * var(--ch-sp-4))); }
.ch-demo-modal .ch-card h2 { margin-top: 0; }

@media (max-width: 900px) {
    .ch-demo-grid { grid-template-columns: 1fr; }
    .ch-demo-wall { flex-direction: column; align-items: stretch; text-align: center; }
    .ch-demo-wall-links { justify-content: center; }
}