/* ==========================================================================
   JHI Retirement Planner — Shared Stylesheet
   Extracted from the original index.html and extended for the wizard UI.
   ========================================================================== */

:root {
    /* ── Janus Henderson brand palette ───────────────────────────────────
       Sourced from themes/janus-henderson-mu-child/src/sass/theme/util/_variables.scss */
    --brand-main: #393d47;          /* slate grey */
    --brand-dark: #304147;          /* dark slate grey */
    --brand-secondary: #f7b57f;     /* tangerine 50 (subtle hover accents) */
    --brand-accent: #f06c00;        /* tangerine */
    --brand-accent-hover: #f49140;  /* tangerine 75 */
    --brand-teal: #12749a;          /* teal — JH cerulean; third data-viz hue */
    --brand-teal-75: #4d97b3;       /* cerulean 75 */
    --brand-teal-50: #80b9cb;       /* cerulean 50 */
    --brand-iris: #00b9e4;          /* iris — fourth data-viz hue */
    --brand-link: var(--brand-teal);

    --color-background: #f7f8f9;     /* porcelain */
    --color-surface: #ffffff;
    --color-surface-alt: #ebebec;   /* slate grey 10 */
    --color-text-primary: #393d47;  /* slate grey */
    --color-text-secondary: #6b6e75;/* slate grey 75 */
    /* Was slate-grey-50 (#b2bbc2), which fails AA on every surface here —
       1.95:1 even on white. The guide reserves that tint for disabled. */
    --color-text-muted: #6b6e75;    /* slate grey 75 */
    --color-text-disabled: #b2bbc2; /* slate grey 50 */
    --color-border: #d7d8da;        /* slate grey 20 */

    /* ── Semantic status roles ───────────────────────────────────────────
       Plan health reads on the brand palette — cerulean, tangerine, slate.
       Merlot is NOT a status role. Steppers, sliders, gauges and legend
       chips must never turn red; use --value-negative for that instead. */
    --status-positive: var(--brand-teal);       /* cerulean — on track */
    --status-positive-dark: #0c4f69;            /* dark cerulean */
    --status-caution: var(--brand-accent);      /* tangerine — needs attention */
    --status-caution-dark: #c85a00;             /* tangerine shade */
    --status-critical: var(--brand-main);       /* slate — at risk */
    --status-critical-dark: var(--brand-dark);  /* dark slate */

    /* ── Negative data values only ───────────────────────────────
       Shortfall amounts, downside trajectories and negative numbers.
       This is the only place red is permitted. */
    --value-negative: #aa1e2e;                  /* merlot */
    --value-negative-dark: #8a1825;             /* merlot shade */

    /* Legacy aliases retained so existing rules keep working. */
    --color-success: var(--status-positive);
    --color-warning: var(--status-caution);
    --color-danger: var(--value-negative);

    /* ── Data visualisation series ───────────────────────────────────────
       Ordered categorical palette: slate → tangerine → teal, then
       iris and the 50% tints for higher-cardinality charts.
       Consume in index order so the same category keeps the same hue
       across the wizard and the analytics dashboard.
       This series is status-neutral: no member implies good or bad. */
    --dataviz-1: var(--brand-main);      /* slate grey */
    --dataviz-2: var(--brand-accent);    /* tangerine */
    --dataviz-3: var(--brand-teal);      /* teal (cerulean) */
    --dataviz-4: var(--brand-iris);      /* iris */
    --dataviz-5: var(--brand-secondary); /* tangerine 50 */
    --dataviz-6: var(--brand-teal-50);   /* teal 50 (cerulean 50) */
    --dataviz-neutral: var(--color-border); /* no data / empty state */
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: "OpenSans", system-ui, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: var(--color-text-primary);
    background: var(--color-background);
}

/* Headings use the Janus Henderson display face */
.hero-title, legend, .card-title, .panel-header, .strategy-phase,
.gauge-title, .narrative-section h3, .narrative-block h4, .playbook-section h3,
.phase-card .phase-title, .plan-title, .chart-card h3, .collapsible-header h3,
.closing-cta h3, .action-btn .action-title, .totals-summary,
.metric-card .metric-value, .hn-value, .strip-value, .gauge-pct .pct-num {
    font-family: "Poppins", system-ui, sans-serif;
}

/* ===================== HERO HEADER ===================== */
.hero-header {
    min-height: 100px;
    padding: 14px 32px 18px;
    background: linear-gradient(135deg, #393d47 0%, #304147 100%);
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    position: relative; overflow: visible;
}
.hero-logo { height: 32px; margin-bottom: 6px; position: relative; z-index: 1; filter: brightness(0) invert(1); }
.hero-analytics-btn {
    display: inline-block; padding: 8px 18px;
    background: var(--brand-accent); color: #fff;
    font-family: "Poppins", system-ui, sans-serif; font-size: 12px; font-weight: 600; border-radius: 0;
    border: 2px solid var(--brand-accent);
    text-decoration: none; position: absolute; top: 16px; right: 28px; z-index: 2;
    transition: all 0.2s;
}
.hero-analytics-btn:hover { background: var(--brand-accent-hover); border-color: var(--brand-accent-hover); color: var(--brand-main); }
.hero-header::before {
    content: '';
    position: absolute; width: 600px; height: 300px;
    background: radial-gradient(ellipse, rgba(240,108,0,0.16) 0%, transparent 70%);
    top: 50%; left: 50%; transform: translate(-50%, -50%); filter: blur(40px);
}
.hero-title { color: white; font-size: 20px; font-weight: 700; text-align: center; position: relative; z-index: 1; }
.hero-subtitle { color: rgba(255,255,255,0.8); font-size: 13px; font-weight: 400; margin-top: 2px; position: relative; z-index: 1; }

/* ===================== WIZARD PROGRESS BAR ===================== */
.wizard-progress {
    display: flex; align-items: center; justify-content: center;
    gap: 0; padding: 10px 20px 8px;
    background: var(--color-surface);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    position: sticky; top: 0; z-index: 100;
}
.wizard-step {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 14px; font-size: 12px; font-weight: 600;
    color: var(--color-text-muted); cursor: pointer;
    border-radius: 8px; transition: all 0.2s;
    white-space: nowrap;
    background: none; border: 0; font-family: inherit;
}
.wizard-step:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: 2px; }
.wizard-step:hover { background: var(--color-surface-alt); }
.wizard-step.active { color: var(--brand-accent); background: rgba(240,108,0,0.06); }
.wizard-step.completed { color: var(--color-success); }
.wizard-step .step-num {
    width: 24px; height: 24px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700;
    background: var(--color-surface-alt); color: var(--color-text-primary);
    transition: all 0.2s; flex-shrink: 0;
}
.wizard-step.active .step-num { background: var(--brand-accent); color: white; }
.wizard-step.completed .step-num { background: var(--color-success); color: white; }
.wizard-connector {
    width: 30px; height: 2px; background: var(--color-border);
    flex-shrink: 0;
}
.wizard-connector.completed { background: var(--color-success); }
.wizard-time {
    font-size: 11px; color: var(--color-text-muted); font-weight: 500;
    margin-left: 12px; padding-left: 12px;
    border-left: 1px solid var(--color-border);
}

@media (max-width: 1200px) {
    .wizard-progress { padding: 10px 10px 8px; }
    .wizard-step { padding: 8px 10px; font-size: 11px; gap: 6px; }
    .wizard-connector { width: 16px; }
    .wizard-time { margin-left: 8px; padding-left: 8px; }
}

/* ===================== WIZARD PAGES ===================== */
.wizard-page { display: none; animation: fadeIn 0.3s ease-out; }
.wizard-page.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* ===================== LAYOUT ===================== */
.jhi-rp {
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
}

@media (max-width: 1080px) {
    .wizard-progress { gap: 6px; padding: 8px 10px; }
    .wizard-step .step-label { display: none; }
    .wizard-step {
        padding: 6px;
        min-width: 34px;
        justify-content: center;
        border-radius: 999px;
    }
    .wizard-step:hover,
    .wizard-step.active,
    .wizard-step.completed { background: transparent; }
    .wizard-step .step-num { width: 22px; height: 22px; font-size: 10px; }
    .wizard-connector { width: 14px; }
    .wizard-time { display: none; }
}

.container { max-width: 1080px; margin: 0 auto; padding: 0 20px; }
.form-container { margin-top: 2px; position: relative; z-index: 2; padding-bottom: 10px; }

/* ===================== FORM SECTIONS ===================== */
fieldset {
    background: var(--color-surface); border: none; border-radius: 10px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.06); margin-bottom: 8px; overflow: visible;
}
legend {
    display: block; width: 100%;
    padding: 14px 14px 0; font-size: 15px;
    font-weight: 700; color: var(--color-text-primary);
}
/* Section marker: 60x4 tangerine rule, matching the cta-cards title underline. */
legend::after {
    content: ""; display: block;
    width: 60px; height: 4px;
    background: var(--brand-accent);
    margin-top: 8px;
}
legend .icon { font-size: 16px; margin-right: 8px; vertical-align: middle; }
.form-field { padding: 4px 14px; }
.form-field:last-child { padding-bottom: 8px; }
.form-field label { font-size: 14px; font-weight: 600; color: var(--color-text-secondary); margin-bottom: 4px; display: block; white-space: nowrap; }
.required { color: var(--brand-accent); }
.required-legend { font-size: 12px; color: var(--color-text-muted); margin: 0 0 16px; }
.input-error { border-color: var(--color-danger) !important; box-shadow: 0 0 0 2px rgba(170,30,46,0.15) !important; }

input[type="text"], input[type="number"], input[type="email"], select {
    width: 100%; height: 36px; padding: 0 12px; font-size: 14px;
    border: 1px solid var(--color-border); border-radius: 0;
    transition: all 0.2s; font-family: inherit; background: #fff;
}
select { cursor: pointer; }
/* The child theme skins .jh-dropdown select with its own fill and border.
   Match the text inputs, but leave its padding, which reserves the chevron.
   Must stay above the focus rule: equal specificity, so order decides. */
.jhi-rp .jh-dropdown {
    display: block;
    width: 100%;
}
.jhi-rp .jh-dropdown select {
    background-color: var(--color-surface);
    border-color: var(--color-border);
    font-weight: 400;
}
/* Scoped, and drawn as an outline: the theme resets box-shadow on inputs,
   which silently removed the only focus indicator. */
.jhi-rp input:focus,
.jhi-rp select:focus {
    outline: 2px solid var(--brand-accent);
    outline-offset: 1px;
    border-color: var(--brand-accent);
}
.help-text { font-size: 12px; color: var(--color-text-muted); margin-top: 4px; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }

/* Inline field groups: 2 fields side-by-side within a dual-panel cell */
.inline-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 12px;
}
.inline-fields .form-field { padding-left: 0; padding-right: 0; }
.dual-panel.married .partner-col.inline-fields { display: grid; }

/* ===================== ADVANCED-ONLY FIELDS ===================== */
body.mode-default .advanced-only,
.jhi-rp.mode-default .advanced-only { display: none !important; }

/* ===================== BASIC-ONLY FIELDS ===================== */
.basic-only { display: none; }
body.mode-default .basic-only,
.jhi-rp.mode-default .basic-only { display: block !important; }

/* ===================== COLLAPSIBLE TOGGLE ===================== */
.collapsible-toggle {
    background: none; border: 2px solid var(--brand-main); color: var(--brand-main);
    padding: 10px 20px; border-radius: 0; font-size: 15px; font-weight: 600;
    cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
    font-family: "Poppins", system-ui, sans-serif;
    transition: background .2s, color .2s;
}
.collapsible-toggle:hover { background: var(--brand-main); color: #fff; }
#detailedAnalysisArrow { display: inline-block; transition: transform .3s; font-size: 13px; }
#detailedAnalysisArrow.open { transform: rotate(90deg); }

/* ===================== BACK TO TOP ===================== */
/* In-flow, not fixed: the parent theme already ships a floating #back2Top
   control, so a second floating one would sit on top of it. */
.jhi-rp .back-to-top-row { display: flex; justify-content: flex-end; padding: 4px 0 0; }
.jhi-rp .back-to-top-row .jh-c-button {
    position: static !important; width: auto !important; height: auto !important;
    max-width: none !important; margin-top: 0 !important; inset: auto !important;
    background-size: auto !important;
}

/* ===================== SS BENEFIT LOOKUP HINT ===================== */
/* Guidance is inline rather than in a hover tooltip: the old tooltip nested a
   link inside a <button>, which is invalid and made the link unreliable. */
.jhi-rp .ss-lookup-hint { display: block; margin-top: 2px; }
.jhi-rp .ss-lookup-hint a { color: var(--brand-accent); font-weight: 600; }
.jhi-rp .jhi-sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.jhi-rp-live {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.wizard-message {
    margin: 12px auto 0; max-width: 1180px;
    padding: 12px 16px; border-radius: 6px;
    border-left: 4px solid var(--value-negative);
    background: rgba(170,30,46,0.06); color: var(--color-text-primary);
    font-size: 13px; line-height: 1.6;
}
.wizard-message ul { margin: 6px 0 0; padding-left: 20px; }
.wizard-message[hidden] { display: none; }

/* ===================== CONTRIBUTION TOGGLE ($/%) ===================== */
.contrib-toggle {
    display: inline-flex; border: 1px solid var(--color-border); border-radius: 0;
    overflow: hidden; margin-left: 8px; vertical-align: middle;
}
.contrib-toggle button {
    padding: 3px 10px; border: none; background: var(--color-surface);
    font-size: 11px; font-weight: 600; color: var(--color-text-muted);
    cursor: pointer; font-family: inherit; transition: all 0.15s;
}
.contrib-toggle button.active {
    background: var(--brand-accent); color: white;
}
.contrib-equiv { font-size: 11px; color: var(--color-success); font-weight: 500; margin-top: 2px; }

/* ===================== TOTALS SUMMARY LINE ===================== */
.totals-summary {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 14px; margin: 4px 14px 8px;
    background: var(--color-surface-alt); border-radius: 8px;
    font-size: 13px; font-weight: 700; color: var(--brand-main);
}

/* ===================== STRATEGY CARDS ===================== */
.strategy-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 6px 14px 10px; }
.strategy-card {
    border: 2px solid var(--color-border); border-radius: 8px;
    padding: 10px 8px; text-align: center; cursor: pointer;
    transition: all 0.2s; position: relative;
}
.strategy-card:hover { border-color: var(--brand-secondary); }
.strategy-card.selected { border-color: var(--brand-accent); background: rgba(240,108,0,0.04); }
/* Overlays the card instead of display:none, so the radio stays keyboard
   focusable and exposed to assistive tech while remaining invisible. */
.strategy-card input {
    position: absolute; inset: 0; width: 100%; height: 100%;
    margin: 0; opacity: 0; cursor: pointer;
}
.strategy-card .card-icon { font-size: 22px; margin-bottom: 2px; }
.strategy-card .card-title { font-weight: 700; font-size: 14px; color: var(--brand-main); }
.strategy-card .card-desc { font-size: 11px; color: var(--color-text-primary); margin-top: 2px; line-height: 1.4; }

.strategy-phase {
    grid-column: 1 / -1; font-size: 12px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.04em; color: var(--color-text-muted); padding: 8px 0 3px;
    border-bottom: 1px solid var(--color-border); margin-bottom: 3px;
}
.strategy-cards:first-of-type .strategy-phase { padding-top: 0; }
.strategy-cards + .strategy-cards { padding-top: 0; }

/* ===================== TOGGLE ===================== */
.jhi-rp .toggle-row { display: flex; align-items: center; gap: 8px; padding: 4px 14px; }
.jhi-rp .toggle { position: relative; display: inline-block; flex: 0 0 auto; width: 48px; height: 26px; }
/* Neutralize the theme's injected .jh-checkbox wrapper (subscription-template.scss) */
.jhi-rp .toggle .jh-checkbox {
    position: absolute !important; inset: 0 !important;
    width: 100% !important; height: 100% !important;
    margin: 0 !important; padding: 0 !important;
    border: 0 !important; background: transparent !important; box-shadow: none !important;
    border-radius: 26px !important; min-width: 0 !important; min-height: 0 !important;
    z-index: 2; display: block !important;
}
.jhi-rp .toggle .jh-checkbox > span { display: none !important; }
.jhi-rp .toggle input {
    position: absolute !important; top: 0; left: 0; width: 100% !important; height: 100% !important; margin: 0 !important;
    opacity: 0 !important; cursor: pointer; z-index: 2;
    -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important;
    border: 0 !important; background: transparent !important; box-shadow: none !important;
    min-width: 0 !important; min-height: 0 !important; outline: none !important;
}
.jhi-rp .toggle input:focus-visible + .toggle-slider {
    outline: 2px solid var(--brand-accent); outline-offset: 2px;
}
.jhi-rp .toggle-slider {
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: #c7c9cc; border-radius: 26px; transition: 0.3s;
}
.jhi-rp .toggle-slider::before {
    content: ''; position: absolute;
    height: 20px; width: 20px; left: 3px; bottom: 3px;
    background: #fff; border-radius: 50%; transition: 0.3s;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
/* On-state: support plain markup, the theme's .jh-checkbox--checked modifier, and :has() */
.jhi-rp .toggle input:checked + .toggle-slider,
.jhi-rp .toggle .jh-checkbox--checked ~ .toggle-slider,
.jhi-rp .toggle:has(input:checked) .toggle-slider { background: var(--brand-accent) !important; }
.jhi-rp .toggle input:checked + .toggle-slider::before,
.jhi-rp .toggle .jh-checkbox--checked ~ .toggle-slider::before,
.jhi-rp .toggle:has(input:checked) .toggle-slider::before { transform: translateX(22px); }
.jhi-rp .toggle-label { font-size: 14px; font-weight: 600; }

/* ===================== WIZARD NAVIGATION BUTTONS ===================== */
.wizard-nav {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 0 14px; gap: 12px;
}
/* Navigation uses the theme's .jh-c-button system, so there are no button
   styles here. The theme resets buttons inside content areas, so only the
   layout reset below is needed to stop that reset stretching them. */
.jhi-rp .wizard-nav .jh-c-button {
    position: static !important; width: auto !important; height: auto !important;
    max-width: none !important; margin-top: 0 !important; inset: auto !important;
    background-size: auto !important;
}
.jhi-rp .wizard-nav .jh-c-button:disabled { opacity: 0.6; cursor: not-allowed; }
.wizard-nav .jh-c-button .spinner-sm {
    width: 18px; height: 18px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    display: none;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ===================== DUAL PANEL (MARRIED) ===================== */
.dual-panel { display: grid; grid-template-columns: 1fr; gap: 0 24px; padding: 0 24px; }
.dual-panel.married { grid-template-columns: 1fr 1fr; }
.dual-panel .panel-header {
    font-size: 15px; font-weight: 700; color: var(--brand-main);
    margin-bottom: 8px; padding-bottom: 4px;
    border-bottom: 2px solid var(--brand-accent);
    display: none;
}
.dual-panel.married .panel-header { display: block; }
.dual-panel .partner-col { display: none; }
.dual-panel.married .partner-col { display: block; }
.dual-panel .form-field { padding-left: 0; padding-right: 0; }

/* ===================== SAMPLE DATA ===================== */
.sample-bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 6px; }
.sample-btn {
    padding: 6px 10px; border: 1px solid var(--color-border); border-radius: 0;
    background: var(--color-surface); font-size: 12px; font-weight: 600;
    cursor: pointer; transition: all 0.15s; font-family: inherit; text-align: center;
}
.sample-btn:hover { border-color: var(--brand-accent); background: rgba(240,108,0,0.04); }
.sample-btn.sample-active { border-color: var(--brand-accent); background: rgba(240,108,0,0.08); box-shadow: 0 0 0 2px rgba(240,108,0,0.18); }

/* ===================== RESULTS ===================== */
.results-section { display: none; padding-bottom: 32px; }
.results-section.visible { display: block; }

/* Metric cards */
.metric-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 12px; }
.metric-card {
    background: var(--color-surface); border-radius: 8px;
    padding: 8px 4px; box-shadow: 0 2px 6px rgba(0,0,0,0.06); text-align: center;
    display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
}
.metric-card .metric-label { font-size: 9px; font-weight: 600; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.03em; line-height: 1.3; min-height: 24px; display: flex; align-items: flex-end; }
.metric-card .metric-value { font-size: 16px; font-weight: 700; margin-top: 2px; line-height: 1.2; }
.metric-card .metric-sub { font-size: 9px; color: var(--color-text-muted); margin-top: 1px; }

/* Tooltip icons */
.term-tooltip {
    display: inline-flex; align-items: center; justify-content: center;
    width: 16px; height: 16px; border-radius: 50%;
    background: var(--color-text-muted); color: white;
    font-size: 10px; font-weight: 700; cursor: help;
    margin-left: 4px; position: relative; vertical-align: middle;
}
.term-tooltip .tip-text {
    display: none; position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);
    width: 220px; padding: 8px 10px; background: var(--brand-main); color: white;
    border-radius: 6px; font-size: 11px; font-weight: 400; text-align: left;
    z-index: 50; line-height: 1.4;
}
.term-tooltip:hover .tip-text { display: block; }

/* Success gauge */
.gauge-container {
    background: var(--color-surface); border-radius: 10px;
    padding: 16px; box-shadow: 0 3px 12px rgba(0,0,0,0.08);
    margin-bottom: 12px; text-align: center;
}
.gauge-title { font-size: 14px; font-weight: 700; color: var(--brand-main); margin-bottom: 1px; }
.gauge-subtitle { font-size: 11px; color: var(--color-text-muted); margin-bottom: 8px; }
.gauge-ring { width: 140px; height: 140px; margin: 0 auto; position: relative; }
/* Legend sits under the ring so the ring shares the panel's centre line with
   the title and message, instead of being pushed off-centre beside it. */
.gauge-visual { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.gauge-legend {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: 6px 14px; font-size: 11px; font-weight: 600;
}
.gauge-legend__item { display: flex; align-items: center; gap: 6px; }
.gauge-legend__swatch { display: inline-block; width: 14px; height: 14px; border-radius: 3px; }
.gauge-ring canvas { width: 100%; height: 100%; }
.gauge-pct {
    position: absolute; inset: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
}
.gauge-pct .pct-num { font-size: 28px; font-weight: 800; }
.gauge-pct .pct-label { font-size: 11px; color: var(--color-text-muted); }
.gauge-message {
    margin-top: 8px; font-size: 14px; font-weight: 400;
    color: var(--color-text-secondary); text-align: left;
    padding: 6px 12px; display: block;
}

/* Results split: income explorer beside the success gauge */
.results-split {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 16px; align-items: center;
}
.results-split .income-explorer { margin-top: 0; height: 100%; }

/* Income Explorer */
.income-explorer {
    margin-top: 14px; padding: 14px 18px;
    background: var(--color-surface-alt); border-radius: 10px;
    border: 2px solid var(--color-border); text-align: center;
}
.income-explorer-title {
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.05em; color: var(--color-text-primary); margin-bottom: 6px;
}
.income-explorer-value { display: flex; align-items: center; justify-content: center; gap: 4px; margin-bottom: 8px; }
.income-explorer-value .currency-sign { font-size: 22px; font-weight: 700; color: var(--brand-main); }
.income-explorer-value input {
    width: 180px; font-size: 26px; font-weight: 700; color: var(--brand-accent);
    border: 1px solid var(--color-border); background: var(--color-surface);
    text-align: center; font-family: inherit; padding: 2px 8px;
}
.income-explorer-value .per-month { font-size: 13px; font-weight: 600; color: var(--color-text-primary); }
.income-explorer .income-slider {
    width: 100%; -webkit-appearance: none; appearance: none;
    height: 8px; border-radius: 4px;
    background: linear-gradient(to right, var(--status-positive), var(--status-caution), var(--status-critical));
    outline: none; cursor: pointer;
}
.income-explorer .income-slider::-webkit-slider-thumb {
    -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%;
    background: var(--brand-accent); border: 3px solid white;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3); cursor: pointer;
}
.income-explorer .income-slider::-moz-range-thumb {
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--brand-accent); border: 3px solid white;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3); cursor: pointer;
}
.income-explorer .slider-labels { display: flex; justify-content: space-between; font-size: 10px; color: var(--color-text-primary); font-weight: 600; margin-top: 4px; }
.income-explorer .explorer-hint { font-size: 10px; color: var(--color-text-primary); margin-top: 8px; font-style: italic; }

/* Update Results button next to slider */
.btn-update-results {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 10px 20px; margin-top: 10px;
    background: var(--brand-accent); color: white;
    font-size: 13px; font-weight: 600; border: 2px solid var(--brand-accent); border-radius: 0;
    cursor: pointer; font-family: "Poppins", system-ui, sans-serif; transition: all 0.15s;
}
.btn-update-results:hover { background: var(--brand-accent-hover); color: var(--brand-main); border-color: var(--brand-accent-hover); }
.btn-update-results:disabled { opacity: 0.7; cursor: not-allowed; }
.update-spinner {
    display: none; width: 14px; height: 14px;
    border: 2px solid rgba(255,255,255,0.45); border-top-color: #fff;
    border-radius: 50%;
    animation: spinAnim 1s linear infinite;
}
.btn-update-results.loading .update-spinner { display: inline-block; }
.btn-update-results.loading #updateBtnText { display: none; }
@keyframes spinAnim { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* Dollar-sign input wrapper */
.input-dollar-wrap {
    display: flex; align-items: center; position: relative;
}
.input-dollar-sign {
    position: absolute; left: 10px; font-size: 15px; font-weight: 700;
    color: var(--color-text-muted); pointer-events: none; z-index: 1;
}
.input-dollar-wrap input {
    padding-left: 24px !important;
}

/* Hide number input spinners (up/down arrows) on currency fields */
.input-dollar-wrap input[type="number"]::-webkit-outer-spin-button,
.input-dollar-wrap input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.input-dollar-wrap input[type="number"] {
    -moz-appearance: textfield;
}

/* Dollar Toggle */
.dollar-toggle-wrap {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    margin-bottom: 16px; padding: 8px 14px; background: var(--color-surface);
    border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.dollar-toggle-wrap .toggle-label {
    font-size: 12px; font-weight: 600; color: var(--color-text-secondary);
    cursor: pointer; transition: color 0.2s;
}
.dollar-toggle-wrap .toggle-label.active { color: var(--brand-accent); font-weight: 700; }
.dollar-toggle-switch {
    position: relative; width: 44px; height: 22px;
    background: #cdd1db; border-radius: 12px; cursor: pointer; transition: background 0.3s;
}
.dollar-toggle-switch.on { background: var(--brand-accent); }
.dollar-toggle-switch .toggle-knob {
    position: absolute; top: 2px; left: 2px;
    width: 18px; height: 18px; background: white;
    border-radius: 50%; box-shadow: 0 1px 4px rgba(0,0,0,0.2);
    transition: transform 0.3s;
}
.dollar-toggle-switch.on .toggle-knob { transform: translateX(22px); }
.inflation-badge { font-size: 10px; color: var(--color-text-muted); font-weight: 500; }

/* Income Highlight Strip */
.income-strip {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-bottom: 16px;
    border-radius: 12px; overflow: hidden; box-shadow: 0 4px 16px rgba(0,0,0,0.10);
}
.income-strip .strip-card { padding: 16px 14px; text-align: center; }
.income-strip .strip-card:nth-child(1) { background: linear-gradient(135deg, #304147 0%, #393d47 100%); color: white; }
.income-strip .strip-card:nth-child(2) { background: linear-gradient(135deg, #393d47 0%, #6b6e75 100%); color: white; }
.strip-card .strip-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.8; margin-bottom: 6px; }
.strip-card .strip-value { font-size: 22px; font-weight: 800; letter-spacing: -0.5px; }
.strip-card .strip-sub { font-size: 10px; margin-top: 2px; opacity: 0.75; }

/* Personalized Narrative */
.narrative-section {
    background: var(--color-surface); border-radius: 10px;
    padding: 16px 20px; box-shadow: 0 3px 12px rgba(0,0,0,0.08);
    margin-bottom: 12px; line-height: 1.5;
}
.narrative-section h3 { font-size: 15px; font-weight: 700; color: var(--brand-main); margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
.narrative-block { margin-bottom: 10px; }
.narrative-block:last-child { margin-bottom: 0; }
.narrative-block h4 { font-size: 12px; font-weight: 700; color: var(--brand-accent); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px; }
.narrative-block p, .narrative-block .nar-text { font-size: 14px; color: var(--color-text-secondary); }
.narrative-block p strong, .narrative-block .nar-text strong { color: var(--color-text-primary); }
/* Cerulean, not the tangerine accent: these are inline links in body copy. */
.narrative-block a { color: var(--brand-link); font-weight: 600; text-decoration: underline; }
.narrative-block a:hover { color: var(--brand-accent); }

/* Current Position: donut + table */
.pos-layout { display: grid; grid-template-columns: 1fr 40%; gap: 12px; align-items: start; margin: 8px 0 4px; }
/* Wide enough for the longest legend row; Chart.js clips legend items that
   overrun the canvas, and the circle is drawn at the row's left edge. */
.pos-donut-wrap { position: relative; width: 100%; max-width: 340px; height: 270px; margin: 0 auto; flex-shrink: 0; }

/* Snapshot table */
.snapshot-table { width: auto; border-collapse: collapse; font-size: 12px; table-layout: auto; }
.snapshot-table th { text-align: left; padding: 4px 6px; background: var(--color-surface-alt); font-weight: 700; font-size: 11px; text-transform: uppercase; color: var(--color-text-primary); letter-spacing: 0.04em; }
.snapshot-table td { padding: 3px 6px; border-bottom: 1px solid var(--color-border); color: var(--color-text-secondary); white-space: nowrap; }
.snapshot-table tr:last-child td { border-bottom: none; }
.snapshot-table td:first-child { white-space: nowrap; padding-right: 4px; }
.snapshot-table td:last-child { text-align: right; font-weight: 600; color: var(--color-text-primary); font-variant-numeric: tabular-nums; padding-left: 8px; }
.snapshot-table .row-highlight { background: rgba(240,108,0,0.04); }
.snapshot-table .row-highlight td { font-weight: 700; color: var(--brand-accent); }

.nar-divider { border: none; border-top: 1px solid var(--color-border); margin: 10px 0; }

/* Have vs Need */
.have-need-row { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 10px 0; }
.have-need-card { flex: 1; padding: 12px 10px; border-radius: 10px; text-align: center; }

/* Side-by-side savings + plan row */
.savings-plan-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.savings-plan-col h4 { margin-bottom: 0; }
.have-card { background: linear-gradient(135deg, #304147 0%, #393d47 100%); color: white; }
.need-card { background: linear-gradient(135deg, #393d47 0%, #6b6e75 100%); color: white; }
.hn-header { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.8; margin-bottom: 4px; }
.hn-label { font-size: 12px; font-weight: 600; opacity: 0.9; margin-bottom: 4px; }
.hn-value { font-size: 22px; font-weight: 800; letter-spacing: -0.5px; }
.hn-sub { font-size: 10px; margin-top: 4px; opacity: 0.7; }
.have-need-vs { font-size: 12px; font-weight: 700; color: var(--color-text-muted); flex-shrink: 0; }

/* Current vs Target Plan */
.plan-compare-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 10px 0; }
.plan-card { border-radius: 10px; padding: 12px; border: 2px solid var(--color-border); background: var(--color-surface); }
.plan-card.current-plan { border-color: var(--brand-main); }
.plan-card.target-plan { border-color: var(--color-success); }
.plan-title { font-size: 12px; font-weight: 700; color: var(--brand-main); margin-bottom: 8px; padding-bottom: 5px; border-bottom: 2px solid var(--color-border); }
.plan-stat { display: flex; justify-content: space-between; align-items: center; padding: 5px 0; border-bottom: 1px solid var(--color-border); }
.plan-stat:last-child { border-bottom: none; }
.ps-label { font-size: 11px; color: var(--color-text-secondary); }
.ps-value { font-size: 13px; font-weight: 700; color: var(--color-text-primary); }
.ps-value.runs-out-bad { color: var(--value-negative); }
.ps-value.runs-out-good { color: var(--status-positive); }
.ps-gap { margin-top: 6px; padding: 5px 8px; border-radius: 5px; font-size: 10px; font-weight: 600; text-align: center; }
.ps-gap.gap-negative { background: rgba(170,30,46,0.08); color: var(--value-negative); }
.ps-gap.gap-positive { background: rgba(18,116,154,0.08); color: var(--status-positive); }

.narrative-closing {
    margin-top: 10px; padding: 10px 14px; background: var(--color-surface-alt);
    border-radius: 6px; border-left: 3px solid var(--brand-accent);
    font-size: 12px; color: var(--color-text-secondary);
}
.narrative-closing strong { color: var(--color-text-primary); }

/* Chart cards */
.chart-card {
    background: var(--color-surface); border-radius: 8px; padding: 14px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06); margin-bottom: 12px;
}
.chart-card h3 { font-size: 13px; font-weight: 700; color: var(--brand-main); margin-bottom: 1px; }
.chart-card .chart-desc { font-size: 10px; color: var(--color-text-muted); margin-bottom: 8px; }
.chart-wrapper { position: relative; height: 250px; }

/* Collapsible panels */
.collapsible-panel { margin-bottom: 12px; }
.collapsible-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px; background: var(--color-surface); border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06); cursor: pointer;
    transition: all 0.2s; border: 1px solid var(--color-border);
}
.collapsible-header:hover { border-color: var(--brand-accent); }
.collapsible-header h3 { font-size: 14px; font-weight: 700; color: var(--brand-main); margin: 0; display: flex; align-items: center; gap: 6px; }
.collapsible-header .chevron {
    font-size: 16px; color: var(--color-text-muted);
    transition: transform 0.3s;
}
.collapsible-panel.open .collapsible-header .chevron { transform: rotate(180deg); }
.collapsible-body {
    display: none; padding: 12px 0 0; animation: fadeIn 0.3s;
}
.collapsible-panel.open .collapsible-body { display: block; }

/* SS table */
.ss-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.ss-table th { background: var(--color-surface-alt); padding: 6px 10px; text-align: left; font-weight: 600; font-size: 11px; text-transform: uppercase; color: var(--color-text-primary); }
.ss-table td { padding: 6px 10px; border-bottom: 1px solid var(--color-border); }
.ss-table .highlight { background: rgba(240,108,0,0.06); font-weight: 600; }

/* Survival bars */
.survival-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.survival-bar .age-label { width: 50px; font-size: 12px; font-weight: 600; text-align: right; }
.survival-bar .bar-bg { flex: 1; height: 18px; background: var(--color-surface-alt); border-radius: 6px; overflow: hidden; }
.survival-bar .bar-fill { height: 100%; border-radius: 6px; transition: width 1s ease-out; display: flex; align-items: center; padding-left: 10px; font-size: 11px; font-weight: 700; color: white; }

/* Comparison grid */
.comparison-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.compare-card { background: var(--color-surface); padding: 12px; text-align: center; border: 1px solid var(--color-border); border-bottom: 3px solid var(--color-border); }
.compare-card.active { border-bottom-color: var(--brand-accent); }
.compare-card h4 { font-size: 12px; font-weight: 700; margin-bottom: 6px; }
.compare-stat { margin-bottom: 3px; }
.compare-stat .stat-val { font-size: 16px; font-weight: 700; }
.compare-stat .stat-label { font-size: 9px; color: var(--color-text-muted); }

/* Tax grid */
.tax-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.tax-item { background: var(--color-surface-alt); border-radius: 6px; padding: 10px; }
.tax-item .tax-label { font-size: 10px; color: var(--color-text-muted); font-weight: 600; }
.tax-item .tax-value { font-size: 15px; font-weight: 700; margin-top: 2px; }

/* Yearly table */
.yearly-table-wrap { display: none; margin-top: 16px; max-height: 400px; overflow-y: auto; }
.yearly-table-wrap.visible { display: block; }
.yearly-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.yearly-table th {
    background: var(--color-surface-alt); padding: 6px 10px; text-align: right;
    font-weight: 700; font-size: 10px; text-transform: uppercase;
    color: var(--color-text-muted); letter-spacing: 0.04em; position: sticky; top: 0;
}
.yearly-table th:first-child { text-align: left; }
.yearly-table td { padding: 5px 10px; border-bottom: 1px solid var(--color-border); text-align: right; font-variant-numeric: tabular-nums; }
.yearly-table td:first-child { text-align: left; font-weight: 600; }
.yearly-table tr.retirement-row { background: rgba(240,108,0,0.06); font-weight: 600; }
.yearly-toggle-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 12px; border: 1px solid var(--color-border); border-radius: 0;
    background: var(--color-surface); font-size: 11px; font-weight: 600;
    color: var(--color-text-secondary); cursor: pointer; font-family: inherit;
    transition: all 0.15s; float: right; margin-top: -24px;
}
.yearly-toggle-btn:hover { border-color: var(--brand-accent); color: var(--brand-accent); }

/* Withdrawal Playbook */
.playbook-section {
    background: var(--color-surface); border-radius: 10px;
    padding: 16px 20px; box-shadow: 0 3px 12px rgba(0,0,0,0.08); margin-bottom: 12px;
}
.playbook-section h3 { font-size: 18px; font-weight: 700; color: var(--brand-main); margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
.playbook-section .playbook-desc { font-size: 13px; color: var(--color-text-muted); margin-bottom: 14px; }
.paycheck-builder {
    background: linear-gradient(135deg, #304147 0%, #393d47 100%);
    border-radius: 4px; padding: 16px 20px; color: white; margin-bottom: 16px;
}
.paycheck-builder h4 { font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.85; margin-bottom: 12px; }
.paycheck-line { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.12); font-size: 15px; }
.paycheck-line:last-child { border-bottom: none; }
.paycheck-line .pc-label { display: flex; align-items: center; gap: 8px; }
.paycheck-line .pc-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.paycheck-line .pc-amount { font-weight: 700; font-variant-numeric: tabular-nums; }
.paycheck-line.pc-subtotal { border-top: 2px solid rgba(255,255,255,0.3); margin-top: 4px; padding-top: 8px; font-weight: 700; font-size: 16px; }
.paycheck-line.pc-taxes { color: rgba(255,255,255,0.7); }
.paycheck-line.pc-net { background: rgba(255,255,255,0.1); border-radius: 6px; padding: 10px 12px; margin-top: 6px; font-size: 18px; font-weight: 800; }
.paycheck-monthly-note { text-align: center; margin-top: 8px; font-size: 13px; opacity: 0.7; }

.playbook-phases { display: grid; gap: 10px; }
.phase-card {
    border: 2px solid var(--color-border); border-radius: 10px;
    padding: 14px 16px; position: relative; background: var(--color-surface);
    transition: all 0.2s;
}
.phase-card:hover { border-color: var(--brand-secondary); box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.phase-card .phase-number { position: absolute; top: -10px; left: 14px; width: 22px; height: 22px; border-radius: 50%; background: var(--brand-accent); color: white; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.phase-card .phase-title { font-size: 15px; font-weight: 700; color: var(--brand-main); margin-bottom: 4px; padding-top: 4px; }
.phase-card .phase-years { font-size: 12px; font-weight: 600; color: var(--brand-accent); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px; }
.phase-card .phase-amounts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 8px; }
.phase-card .pa-item { text-align: center; padding: 6px; background: var(--color-surface-alt); border-radius: 6px; }
.phase-card .pa-label { font-size: 11px; font-weight: 600; text-transform: uppercase; color: var(--color-text-muted); }
.phase-card .pa-value { font-size: 18px; font-weight: 700; color: var(--color-text-primary); }
.phase-card .pa-sublabel { font-size: 11px; color: var(--color-text-muted); }
.phase-card .phase-rationale { font-size: 13px; color: var(--color-text-secondary); line-height: 1.5; padding: 10px 12px; background: var(--color-surface-alt); border-radius: 6px; border-left: 3px solid var(--brand-accent); }
.phase-card.phase-taxable { border-left: 4px solid var(--dataviz-2); }
.phase-card.phase-traditional { border-left: 4px solid var(--dataviz-4); }
.phase-card.phase-roth { border-left: 4px solid var(--dataviz-3); }

/* Account balances */
.acct-balance-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.acct-card { text-align: center; padding: 10px 8px; border-radius: 8px; background: var(--color-surface-alt); }
.acct-card .ac-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-muted); margin-bottom: 2px; }
.acct-card .ac-value { font-size: 20px; font-weight: 700; }
.acct-card .ac-pct { font-size: 12px; color: var(--color-text-muted); }
.acct-card.acct-taxable .ac-value { color: var(--dataviz-2); }
.acct-card.acct-traditional .ac-value { color: var(--dataviz-4); }
.acct-card.acct-roth .ac-value { color: var(--dataviz-3); }

/* ===================== NEXT STEPS PAGE ===================== */
.next-steps-page { padding-top: 32px; padding-bottom: 32px; }
.jhi-rp .next-steps-title { font-size: 22px; font-weight: 700; color: var(--brand-main); margin-bottom: 8px; }
.jhi-rp .next-steps-summary { font-size: 14px; color: var(--color-text-muted); margin-bottom: 4px; }

/* CTA cards — markup and styling come from the jh/cta-cards block stylesheet.
   Only the wizard-context layout resets live here. */
.jhi-rp .jhi-rp-cta-cards .cta-cards__content { max-width: none; }
.jhi-rp .jhi-rp-cta-cards .cta-cards__content-inner { padding-top: 16px; padding-bottom: 0; }
.jhi-rp .jhi-rp-cta-cards .cta-cards__container { margin-bottom: 0; }
/* The theme resets buttons inside content areas; stop that stretching them. */
.jhi-rp .jhi-rp-cta-cards .jh-c-button {
    position: static !important; width: auto !important; height: auto !important;
    max-width: none !important; margin-top: 0 !important; inset: auto !important;
    background-size: auto !important;
}
.jhi-rp .jhi-rp-cta-cards .cta-cards__card-title-lead { color: var(--brand-accent); font-weight: 700; }
/* These titles outrun the block's 3-line clamp, so let the card grow instead. */
.jhi-rp .jhi-rp-cta-cards .cta-cards__card-title {
    display: block; -webkit-line-clamp: none; line-clamp: none; overflow: visible;
}
/* Keep the copy and the Learn More button clear of the card edges. */
.jhi-rp .jhi-rp-cta-cards .cta-cards__card-info { padding: 2.5rem 2.5rem 1.5rem; }
.jhi-rp .jhi-rp-cta-cards .cta-cards__card-button-wrap { margin: 0 2.5rem 1rem; }

.action-buttons-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 16px 0;
}
.jhi-rp .action-buttons-grid { display: grid !important; grid-template-columns: 1fr 1fr; gap: 12px; margin: 16px 0; }
.jhi-rp .action-btn {
    display: block !important; text-align: left;
    padding: 16px 20px !important; border-radius: 4px;
    background: var(--color-surface) !important; border: 2px solid var(--color-border) !important;
    cursor: pointer; text-decoration: none; color: inherit;
    transition: all 0.2s; font-family: inherit; width: 100%;
    height: auto !important; min-height: 0; overflow: visible;
    -webkit-appearance: none; appearance: none; text-transform: none; letter-spacing: normal;
    box-shadow: none;
}
.jhi-rp .action-btn:hover { border-color: var(--brand-accent) !important; box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.jhi-rp .action-btn .action-icon { font-size: 28px; flex-shrink: 0; }
.jhi-rp .action-btn .action-text { text-align: left; }
.jhi-rp .action-btn .action-title { font-size: 14px; font-weight: 700; color: var(--brand-main); }
.jhi-rp .action-btn .action-desc { font-size: 11px; color: var(--color-text-muted); margin-top: 2px; }
.jhi-rp .action-btn .action-cta {
    display: inline-block; margin-top: 8px;
    font-size: 12px; font-weight: 700;
    text-decoration: underline; text-underline-offset: 3px;
}
.jhi-rp .action-btn.primary {
    background: var(--brand-main) !important;
    border-color: var(--brand-accent) !important; color: #fff;
}
.jhi-rp .action-btn.primary .action-title { color: #fff; }
.jhi-rp .action-btn.primary .action-desc { color: rgba(255,255,255,0.7); }
.jhi-rp .action-btn.primary .action-cta { color: #fff; }
.jhi-rp .action-btn.primary:hover .action-cta { color: var(--brand-main); }
.jhi-rp .action-btn.primary:hover { background: var(--brand-accent-hover) !important; border-color: var(--brand-accent-hover) !important; }
.jhi-rp .action-btn.primary:hover .action-title { color: var(--brand-main); }

/* Educational resources */
.edu-card { margin: 16px 0; }
.edu-card h4 { font-size: 14px; font-weight: 700; margin-bottom: 8px; }
.edu-card ul { padding-left: 20px; font-size: 13px; color: var(--color-text-secondary); }
.edu-card ul li { margin-bottom: 4px; }

/* Callout panel — light neutral field, slate text, tangerine rule.
   For advisory copy, so guidance never reads as a status colour. */
.jhi-callout {
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--brand-accent);
    border-radius: 4px;
    padding: 16px 20px;
    text-align: left;
    box-shadow: none;
}
.jhi-callout h4 { color: var(--color-text-primary); }

/* Closing CTA */
.closing-cta {
    text-align: center; padding: 32px 20px; margin-top: 20px;
    background: linear-gradient(135deg, #393d47 0%, #304147 100%);
    border-radius: 4px; color: white;
}
.closing-cta h3 { font-size: 20px; font-weight: 700; margin-bottom: 8px; }
.closing-cta p { font-size: 14px; opacity: 0.8; margin-bottom: 20px; }
.closing-cta .cta-btn-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
/* The CTA sits on the slate gradient, so both buttons take the --on-dark
   variant from the theme. No local colours. */
.jhi-rp .closing-cta .jh-c-button {
    width: auto; max-width: none; margin-top: 0;
    background-size: auto;
}

/* ===================== RESPONSIVE ===================== */
@media (max-width: 768px) {
    .jhi-rp { width: 100%; }
    .hero-header { min-height: 100px; padding: 16px 12px; }
    .hero-analytics-btn { top: 10px; right: 10px; font-size: 11px; padding: 5px 12px; }
    .hero-title { font-size: 18px; }
    .wizard-progress { flex-wrap: wrap; gap: 4px; }
    .wizard-step { padding: 6px 8px; font-size: 11px; }
    .wizard-step .step-label { display: none; }
    .wizard-connector { width: 16px; }
    .strategy-cards { grid-template-columns: 1fr; }
    .results-split { grid-template-columns: 1fr; }
    .form-row { grid-template-columns: 1fr; }
    .dual-panel.married { grid-template-columns: 1fr; }
    .comparison-grid { grid-template-columns: 1fr; }
    .tax-grid { grid-template-columns: 1fr; }
    .metric-grid { grid-template-columns: repeat(3, 1fr); }
    .savings-plan-row { grid-template-columns: 1fr; }
    .sample-bar { grid-template-columns: repeat(2, 1fr); }
    .income-strip { grid-template-columns: 1fr; }
    .have-need-row { flex-direction: column; }
    .plan-compare-row { grid-template-columns: 1fr; }
    .pos-layout { grid-template-columns: 1fr; }
    .action-buttons-grid { grid-template-columns: 1fr; }
    .acct-balance-grid { grid-template-columns: 1fr; }
}
html { scroll-behavior: smooth; }

/* ===================== JH CARD LANGUAGE =====================
   Square corners, no elevation, hairline border. Cards are separated by the
   border and by spacing rather than by shadow. Toggle switches, circular
   badges and floating UI (tooltips, the PDF modal) keep their own shape. */
fieldset,
.metric-card,
.gauge-container,
.income-explorer,
.narrative-section,
.narrative-closing,
.chart-card,
.collapsible-header,
.playbook-section,
.phase-card,
.phase-card .pa-item,
.phase-card .phase-rationale,
.plan-card,
.income-strip,
.have-need-card,
.have-card,
.need-card,
.compare-card,
.tax-item,
.acct-card,
.edu-card,
.jhi-callout,
.dollar-toggle-wrap,
.totals-summary,
.strategy-card,
.snapshot-table {
    border-radius: 0;
}

fieldset,
.metric-card,
.gauge-container,
.narrative-section,
.chart-card,
.collapsible-header,
.playbook-section,
.compare-card,
.dollar-toggle-wrap,
.income-strip,
.phase-card:hover,
.jhi-rp .action-btn:hover {
    box-shadow: none;
}

/* Hairline takes over the definition the shadow used to provide. Cards whose
   border carries selection state (strategy, plan, phase) keep their 2px. */
fieldset,
.metric-card,
.gauge-container,
.narrative-section,
.chart-card,
.collapsible-header,
.playbook-section,
.dollar-toggle-wrap {
    border: 1px solid var(--color-border);
}

/* The shorthand above resets the callout's accent edge, so restate it. */
.jhi-callout { border-left: 4px solid var(--brand-accent); }