/* ============================================================
   retirement.css — Dedicated stylesheet for /retirement section
   123atc.com — ATC Retirement
   ============================================================ */

/* ------------------------------------------------------------
   1. RETIREMENT COLOR PALETTE
   NOTE: the vibrant --ret-* accents below are for BORDERS and
   ACCENTS only — they fail AA as text on white. Colored TEXT
   uses the --ret-*-text tokens (and .text-brand/.text-sage/
   .text-gold utilities), which live in css/style.css so
   site-wide surfaces (header dropdown) can use them too.
   ------------------------------------------------------------ */
:root {
    --ret-navy: #1e3a5f;
    --ret-navy-soft: rgba(30, 58, 95, 0.08);
    --ret-gold: #d4a843;
    --ret-gold-soft: rgba(212, 168, 67, 0.12);
    --ret-gold-soft-hover: rgba(212, 168, 67, 0.22);
    --ret-sage: #2d8a6e;
    --ret-sage-soft: rgba(45, 138, 110, 0.10);
    --ret-brand: #3b82f6;
    --ret-brand-soft: rgba(59, 130, 246, 0.10);
    --ret-danger: #dc3545;
    --ret-danger-soft: rgba(220, 53, 69, 0.08);
    --ret-warning-soft: rgba(255, 193, 7, 0.12);
    /* Solid fills that carry WHITE text — deliberately NOT remapped in dark
       mode (a lightened fill would drop white-on-fill below AA). */
    --ret-brand-strong: #1a60d0;        /* white on it: 5.8:1 both modes */
    --ret-sage-strong: #25735c;         /* white on it: 5.7:1 both modes */
    --ret-sage-strong-hover: #1f6b54;
    --ret-gold-strong: #7e6015;         /* white on it: 5.9:1 both modes */
    /* Border-radius scale — sm: compact/inner elements, default: cards,
       lg: outermost panels. Pick from the scale; don't invent new radii. */
    --ret-radius-sm: 8px;
    --ret-radius: 12px;
    --ret-radius-lg: 16px;
}

[data-bs-theme="dark"] {
    --ret-navy: #a8c4e0;
    --ret-navy-soft: rgba(168, 196, 224, 0.10);
    --ret-gold: #e8c96a;
    --ret-gold-soft: rgba(232, 201, 106, 0.12);
    --ret-gold-soft-hover: rgba(232, 201, 106, 0.22);
    --ret-sage: #5ec4a0;
    --ret-sage-soft: rgba(94, 196, 160, 0.10);
    --ret-brand: #60a5fa;
    --ret-brand-soft: rgba(96, 165, 250, 0.12);
    --ret-danger: #f87171;
    --ret-danger-soft: rgba(248, 113, 113, 0.10);
    --ret-warning-soft: rgba(255, 193, 7, 0.15);
}


/* ------------------------------------------------------------
   2. COMMON UTILITY CLASSES (used across retirement pages)
   (fw-black, ls-1, max-w-700 and the .text-brand/.text-sage/
    .text-gold AA text utilities live in the global css/style.css
    utilities layer, so they are not duplicated here.)
   ------------------------------------------------------------ */
.bg-brand-soft { background-color: var(--ret-brand-soft) !important; }
.border-brand { border-color: var(--ret-brand) !important; }

/* The uppercase micro-label ("eyebrow") used above values, nav groups, and
   card titles. One spec — components below reuse it via grouped selectors;
   pages can apply .ret-eyebrow directly instead of hand-rolling the pattern. */
.ret-eyebrow,
.ret-countdown-label,
.retirement-nav .nav-section-label,
.ret-plan-pin-eyebrow,
.plan-card .plan-label,
.ret-section-menu-eyebrow {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--bs-secondary-color);
}


/* ------------------------------------------------------------
   3. HERO — retirement pages use the global .hero-section component with
      the .bg-retirement gradient variant (defined in css/style.css), so
      they match every other section's hero. (.hero-gradient was removed.)
   ------------------------------------------------------------ */


/* ------------------------------------------------------------
   4. PREMIUM CARD (Base card component)
   ------------------------------------------------------------ */
.premium-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--ret-radius);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.premium-card.hover-lift:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
}


/* ------------------------------------------------------------
   5. SPECIALIZED CARD TYPES
   ------------------------------------------------------------ */

/* Knowledge Callout — for key facts, rules, formulas */
.callout-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-left: 4px solid var(--ret-brand);
    border-radius: var(--ret-radius-sm);
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
}

.callout-card.callout-warning {
    border-left-color: #ffc107;
    background: var(--ret-warning-soft);
}

.callout-card.callout-danger {
    border-left-color: var(--ret-danger);
    background: var(--ret-danger-soft);
}

.callout-card.callout-success {
    border-left-color: var(--ret-sage);
    background: var(--ret-sage-soft);
}

/* Tool Panel — for calculator/simulator input areas */
.tool-panel {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--ret-radius-lg);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
    padding: 2rem;
}

/* The panel title shouldn't inherit the global h4 top margin (style.css). */
.tool-panel h4 { margin-top: 0; }

@media (min-width: 768px) {
    .tool-panel { padding: 2.5rem; }
}

/* Result Summary — for calculator outputs */
.result-summary {
    background: var(--ret-sage-soft);
    border: 2px solid var(--ret-sage);
    border-radius: var(--ret-radius);
    padding: 1.5rem;
    text-align: center;
    animation: resultFadeIn 0.4s ease-out;
}

@keyframes resultFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}


/* ------------------------------------------------------------
   6. STAT BLOCK
   ------------------------------------------------------------ */
.stat-block {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--ret-radius-sm);
    padding: 1.25rem;
    text-align: center;
}

/* Sage "standout" variant — highlights the best option in a comparison row
   (e.g. the § 8415(f) enhanced multiplier) without hand-rolled inline styles. */
.stat-block.stat-block-sage {
    background: var(--ret-sage-soft);
    border-color: var(--ret-sage);
}


/* ------------------------------------------------------------
   7. FORMULA DISPLAY — operands as boxed spans (direct children),
      operators as bare text. Not a generic callout; use
      .callout-card for prose insights.
   ------------------------------------------------------------ */
/* Formulas are bare pill rows on the page background — no wrapper panel
   (owner's call, 2026-07-10: the padded navy box was chrome). The tint that
   panel used to provide lives on the pills themselves, so they still read
   against the white page in light mode. */
.formula-display {
    font-size: 1.1rem;
}

.formula-display > span {
    background: var(--ret-navy-soft);
    border: 1px solid var(--card-border);
    border-radius: var(--ret-radius-sm);
    padding: 0.5rem 1.25rem;
    font-weight: 600;
}

/* Stacked fraction: one formula pill holding a numerator over a bar over a
   denominator (srs: Civilian FERS Years over 40). The inner spans skip the
   pill chrome (the > selector above targets direct children only); the bar
   themes with the text via currentColor. Pair with a visually-hidden
   "divided by" between the two so screen readers keep the math. */
.formula-display > .formula-frac {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0.4rem 1.25rem 0.5rem;
}
.formula-display .frac-den {
    border-top: 2px solid currentColor;
    margin-top: 0.2rem;
    padding-top: 0.2rem;
    min-width: 100%;
}


/* ------------------------------------------------------------
   8. CONTENT SECTION SPACING
   ------------------------------------------------------------ */
.content-section {
    padding-bottom: 2.5rem;
    margin-bottom: 2.5rem;
    border-bottom: 1px solid var(--card-border);
}

.content-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
}


/* ------------------------------------------------------------
   9. TOOLTIP GLOSSARY — term spans carry tabindex="0" so keyboard
      users can reach the Bootstrap tooltip (it shows on focus).
   ------------------------------------------------------------ */
.term-tooltip {
    border-bottom: 1px dashed var(--ret-brand);
    cursor: help;
    text-decoration: none;
    color: inherit;
}
.term-tooltip:focus-visible {
    outline: 2px solid var(--ret-brand);
    outline-offset: 2px;
    border-radius: 2px;
}


/* ------------------------------------------------------------
   10. COUNTDOWN DISPLAY — split-flap board
   Solari-style departure-board flaps: one digit per card, hinge
   line across the middle, spindle notches at the sides. The page
   JS (setFlaps in eligibility.php) zero-pads values to two digit
   cards. Deliberately black-and-white in BOTH themes — it's a
   physical clock face (white on #1c1c1c is ~15:1 either mode).
   ------------------------------------------------------------ */
.ret-countdown {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    flex-wrap: wrap;
}

.ret-countdown-unit { text-align: center; }

.ret-countdown-value {
    display: flex;
    gap: 0.3rem;
    justify-content: center;
}

.ret-flap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 3.5rem;
    border-radius: var(--ret-radius-sm);
    /* two halves: top face catches the light, bottom sits in shade */
    background: linear-gradient(180deg, #2e2e2e 0%, #232323 50%, #101010 50%, #1c1c1c 100%);
    color: #fff;
    font-size: 2rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* Hinge gap where the two flaps meet (paints over the digit), with a
   catch-light on the bottom flap's top edge */
.ret-flap::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: calc(50% - 1px);
    height: 2px;
    background: #000;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12);
}

/* Spindle notches, "cut" from the card in the page background color */
.ret-flap::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 0.7rem;
    transform: translateY(-50%);
    border-left: 3px solid var(--bg-color);
    border-right: 3px solid var(--bg-color);
}

.ret-countdown-label { margin-top: 0.4rem; }   /* type: see .ret-eyebrow */


/* ------------------------------------------------------------
   11. FORM LABEL ROW-LEVELING
   Keep calculator inputs vertically aligned when some labels in a
   row wrap to two lines and others don't (notably at md widths):
   equal-height, bottom-aligned labels keep inputs level. On phones
   most forms stack one-per-row, where the reserved height is dead
   space — so the min-height only applies from sm up, plus on col-6
   fields that stay two-across on phones (timing, income-timeline).
   ------------------------------------------------------------ */
/* Labels are flex containers, so a label's text and an inline <span>
   (parentheticals like "(when you pay)") are separate flex items: without
   wrap they squeeze side-by-side into two mangled columns when the column
   is narrow, and flex eats the literal space between them (column-gap
   restores it). */
.tool-panel form .form-label {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-end;
    align-items: flex-end;
    column-gap: 0.25em;
}
@media (min-width: 576px) {
    .tool-panel form .form-label { min-height: 2.7rem; }
}
@media (max-width: 575.98px) {
    .tool-panel form .col-6 .form-label { min-height: 2.7rem; }
}
/* The non-covered disclosure's label stands alone above its own yrs/mo inputs;
   it has no sibling column to level with, so the reserved height above is dead
   space that detaches the label (and its inputs) from the toggle. Let it sit at
   its natural height, matching the tighter grouping on the My Plan form. */
.tool-panel form .form-label.ret-nc-label { min-height: 0; }

/* Placeholders sit well below the contrast of real input values, so an example
   like "150,000" reads clearly as a hint rather than an entered figure (Bootstrap's
   default ~0.75 is close enough to a value to be mistaken for one). currentColor
   keeps it a faded version of the themed text color in both light and dark. */
.tool-panel form .form-control::placeholder {
    color: currentColor;
    opacity: 0.45;
}

/* Draw the eye to the second exit-age slider when "work past 56" extends its
   range: a sage ring that eases in with a slight overshoot and holds while the
   mode is on. Timing only; the class is toggled in JS on the mgmt switch. */
.ret-age-boost {
    border-radius: var(--ret-radius);
    box-shadow: 0 0 0 3px var(--ret-sage);
    animation: ret-age-boost 0.75s ease-out;
}
@keyframes ret-age-boost {
    0%   { box-shadow: 0 0 0 0 var(--ret-sage); }
    60%  { box-shadow: 0 0 0 6px var(--ret-sage); }
    100% { box-shadow: 0 0 0 3px var(--ret-sage); }
}
@media (prefers-reduced-motion: reduce) {
    .ret-age-boost { animation: none; }
}


/* ------------------------------------------------------------
   12. CHART CONTAINERS
   ------------------------------------------------------------ */
.chart-container {
    position: relative;
    width: 100%;
}

/* Phones: chart-hosting cards trade half their side padding for plot width
   (titles and captions gain it too). The p-4 utility is !important, so the
   override must be as well; browsers without :has() keep the full padding. */
@media (max-width: 575.98px) {
    .premium-card:has(.chart-container) {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
}


/* ------------------------------------------------------------
   13. PRINT STYLES
   ------------------------------------------------------------ */
@media print {
    .hero-section.bg-retirement {
        background: #1e3a5f !important;
        color: #fff !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* Ink-friendly: no radar motif on paper */
    .hero-section.bg-retirement::before,
    .hero-section.bg-retirement::after { display: none !important; }

    .ret-section-menu,
    .d-lg-none,
    .btn,
    nav,
    header,
    footer { display: none !important; }

    .col-lg-8 {
        width: 100% !important;
        margin: 0 !important;
    }

    .premium-card,
    .tool-panel,
    .stat-block,
    .result-summary {
        break-inside: avoid;
        box-shadow: none;
        border: 1px solid #ddd;
    }

    /* Split-flap countdown: ink-friendly — outlined cards, black digits */
    .ret-flap {
        background: #fff !important;
        color: #000 !important;
        box-shadow: none;
        border: 1px solid #999;
    }
    .ret-flap::before,
    .ret-flap::after { display: none; }

    body { font-size: 12pt; }
}


/* ------------------------------------------------------------
   14. RESULTS ANIMATION
   ------------------------------------------------------------ */
.results-animate {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.results-animate.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Collapse the results block while it's hidden so the empty chart/cards don't
   reserve a large gap above the next section before the user has valid inputs. */
.results-animate:not(.visible) { display: none; }


/* ------------------------------------------------------------
   15. NAV PILLS OVERRIDES (Sidebar + section menu)
   ------------------------------------------------------------ */
/* Desktop sticky sidebar: cap to the viewport so the bottom links and
   disclaimer stay reachable on short laptop screens. */
#retirementSidebar {
    top: 2rem;
    z-index: 1040;
    background-color: var(--card-bg);
    max-height: calc(100vh - 3rem);
    overflow-y: auto;
}

.retirement-nav .nav-link {
    color: var(--text-color);
    border-radius: var(--ret-radius-sm);
    padding: 0.375rem 0.75rem;   /* desktop-pointer density: 13 links must fit a 1080p viewport */
    font-size: 0.9rem;
    font-weight: 500;
    transition: background 0.15s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.retirement-nav .nav-link:hover {
    background: var(--ret-brand-soft);
}

.retirement-nav .nav-link.active {
    background: var(--ret-brand-strong);
    color: #fff;
    font-weight: 600;
}

.retirement-nav .nav-section-label {
    margin-top: 0.6rem;
    margin-bottom: 0.35rem;
    padding-left: 0.75rem;
    letter-spacing: 1px;                 /* type: see .ret-eyebrow */
}
/* The first stage label leads the nav (the dashboard pin sits at the end). */
.retirement-nav .nav-section-label:first-child { margin-top: 0; }

.retirement-nav .visited-check,
.ret-topic-link .visited-check {
    color: var(--ret-sage);
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

/* The check-circle path runs to the edge of its viewBox, and SVG viewports
   clip at their boundary by default — so whenever flex layout lands the icon
   on a fractional device pixel (vertical centering in the sidebar,
   margin-left:auto in the dropdown), the ring's outer antialiased pixels get
   shaved off. overflow:visible lets those edge pixels paint. */
.retirement-nav .visited-check .visited-check-icon,
.ret-topic-link .visited-check .visited-check-icon {
    width: 10px;
    height: 10px;
    display: block;
    vertical-align: 0;
    overflow: visible;
}

/* Pinned "My Plan" dashboard item — the personalized hub, set apart from the
   plain topic nav-links (sage ties it to the "Build my plan" CTA). */
.retirement-nav .ret-plan-pin {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.6rem 0.8rem;
    margin-top: 0.6rem;      /* set off from the topic list it now follows */
    border-radius: var(--ret-radius-sm);
    background: var(--ret-sage-soft);
    border: 1px solid var(--ret-sage-text);
    color: var(--text-color);
    text-decoration: none;
    transition: box-shadow 0.15s ease, background 0.15s ease;
}
.retirement-nav .ret-plan-pin:hover {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}
.retirement-nav .ret-plan-pin.active {
    background: var(--ret-sage-strong);
    border-color: var(--ret-sage-strong);
    color: #fff;
}
.ret-plan-pin-ico {
    flex-shrink: 0;
    font-size: 1.2rem;
    line-height: 1;
    color: var(--ret-sage-text);
    display: inline-flex;
}
.ret-plan-pin.active .ret-plan-pin-ico { color: #fff; }
.ret-plan-pin-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    font-weight: 700;
    font-size: 0.92rem;
}
.ret-plan-pin-eyebrow { color: var(--ret-sage-text); }   /* type: see .ret-eyebrow */
.ret-plan-pin.active .ret-plan-pin-eyebrow { color: rgba(255, 255, 255, 0.85); }


/* ------------------------------------------------------------
   16. RESPONSIVE ADJUSTMENTS
   ------------------------------------------------------------ */
@media (max-width: 767.98px) {
    .ret-countdown { gap: 1rem; }
    .ret-flap { width: 2rem; height: 2.8rem; font-size: 1.6rem; }
    .formula-display { font-size: 0.95rem; }
    .formula-display > span { padding: 0.35rem 0.75rem; font-size: 0.85rem; }
    .tool-panel { padding: 1.25rem; }
}


/* ------------------------------------------------------------
   17. IA CONNECTIVE TISSUE — breadcrumb, next-step, related,
       sources, dated badge, disclaimer (shared partials)
   ------------------------------------------------------------ */
.ret-breadcrumb { margin-bottom: 1.25rem; }
.ret-breadcrumb .breadcrumb { --bs-breadcrumb-divider-color: var(--bs-secondary-color); }
.ret-breadcrumb .breadcrumb-item.active { color: var(--bs-secondary-color); }

.ret-asof-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--ret-sage-text);
    background: var(--ret-sage-soft);
    border-radius: 999px;
    padding: 0.2rem 0.65rem;
    letter-spacing: 0.3px;
    line-height: 1.4;
}

.ret-nextstep-card { border-left: 4px solid var(--ret-brand); }

.ret-related-chip {
    display: inline-flex;
    align-items: center;
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--text-color);
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 999px;
    padding: 0.35rem 0.85rem;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.ret-related-chip:hover {
    background: var(--ret-brand-soft);
    border-color: var(--ret-brand);
    color: var(--ret-brand-text);
}

.ret-sources-list a { color: var(--ret-brand-text); }
.ret-disclaimer { line-height: 1.45; }


/* ------------------------------------------------------------
   18. START-HERE CARDS (overview) + STAGE BADGES + TOPIC INDEX
   ------------------------------------------------------------ */
.ret-steps { display: grid; gap: 1rem; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 767.98px) { .ret-steps { grid-template-columns: 1fr; } }

.ret-step-card {
    position: relative;
    display: block;
    height: 100%;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--ret-radius-lg);
    padding: 1.75rem 1.5rem;
    box-shadow: inset 0 4px 0 0 var(--stage-text);   /* top accent rule, tinted by stage */
    --stage-soft: var(--ret-brand-soft);
    --stage-text: var(--ret-brand-text);
}

/* Journey-stage accent — set --stage-soft (tint bg) + --stage-text (AA-safe
   foreground) on a card or a topic group, so color signals where you are. */
.ret-stage-eligibility { --stage-soft: var(--ret-brand-soft); --stage-text: var(--ret-brand-text); }
.ret-stage-income      { --stage-soft: var(--ret-sage-soft);  --stage-text: var(--ret-sage-text); }
.ret-stage-protect,
.ret-stage-after       { --stage-soft: var(--ret-gold-soft);  --stage-text: var(--ret-gold-text); }

/* Icon medallions — one 46px component; stage-tinted where a .ret-stage-*
   wrapper (or .ret-step-card) provides --stage-*, brand otherwise. */
.ret-step-ico,
.ret-unique-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--stage-soft, var(--ret-brand-soft));
    color: var(--stage-text, var(--ret-brand-text));
}
.ret-step-ico   { font-size: 1.4rem; margin-bottom: 0.9rem; }
.ret-unique-ico { font-size: 1.3rem; }

/* Topic links listed inside each Start-Here card */
.ret-card-links li { line-height: 1.35; margin-bottom: 0.15rem; }
.ret-card-links a {
    font-weight: 600;
    color: var(--stage-text, var(--ret-brand-text));
    text-decoration: none;
}
.ret-card-links a:hover { text-decoration: underline; }

/* Slim "All Topics" index — icon + title chips, tinted by their stage group */
.ret-topic-link {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    height: 100%;
    padding: 0.6rem 0.85rem;
    border: 1px solid var(--card-border);
    border-radius: var(--ret-radius-sm);
    background: var(--card-bg);
    color: var(--bs-body-color);
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.ret-topic-link:hover {
    border-color: var(--stage-text, var(--ret-brand-text));
    background: var(--stage-soft, var(--ret-brand-soft));
    color: var(--stage-text, var(--ret-brand-text));
}
.ret-topic-ico { color: var(--stage-text, var(--ret-brand-text)); display: inline-flex; flex-shrink: 0; }

.ret-stage-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--stage-text, var(--ret-brand-text));
    background: var(--stage-soft, var(--ret-brand-soft));
    border-radius: 999px;
    padding: 0.2rem 0.7rem;
}

/* Buyback ROI table status pills (service-credit.php, built in JS).
   Fills MUST come from the *-strong tokens: the --ret-*-text tokens lighten in
   dark mode, so white badge text on them fails contrast. */
.ret-badge-profit    { background: var(--ret-sage-strong); color: #fff; }
.ret-badge-breakeven { background: var(--ret-gold-strong); color: #fff; }

/* Breakeven row highlight in that same table. NOT Bootstrap's .table-warning:
   that variant is light-only (it pins --bs-table-bg to #fff3cd and the text to
   #000), so in dark mode it painted a pale row whose Net Gain cell — colored by
   the theme-aware --ret-sage-text / --ret-danger-text — turned near-invisible,
   hovered or not. A translucent gold tint composites over whatever the theme's
   card background is, and the text keeps its normal colors. Only --bs-table-bg
   and its hover twin are set; Bootstrap paints both. */
.ret-roi-breakeven {
    --bs-table-bg: var(--ret-gold-soft);
    --bs-table-hover-bg: var(--ret-gold-soft-hover);
}

/* At xs, global style.css pins every .table-responsive cell to nowrap, which
   held these tables' multi-word headers on one line and forced heavy
   horizontal scrolling. Let the HEADERS wrap (the ids outrank the global
   rule); data cells stay nowrap so currency figures never break mid-value. */
@media (max-width: 575.98px) {
    #mb-roi-table th,
    #cola-table th,
    #summary-table th { white-space: normal; }
    /* Prose-in-a-grid tables: both headers AND detail cells must wrap or the
       sentences drag the table several screens wide. */
    #tx-streams-table th,
    #tx-streams-table td,
    #fegli-options-table th,
    #fegli-options-table td,
    #sc-tax-table th,
    #sc-tax-table td { white-space: normal; }
    /* Numeric table with multi-word headers: wrap the headers only. */
    #et-examples-table th { white-space: normal; }
}

/* "Build my plan" CTA — solid sage, white text clears AA in both modes */
.btn-ret-plan {
    background-color: var(--ret-sage-strong);
    border-color: var(--ret-sage-strong);
    color: #fff;
}
.btn-ret-plan:hover,
.btn-ret-plan:focus {
    background-color: var(--ret-sage-strong-hover);
    border-color: var(--ret-sage-strong-hover);
    color: #fff;
}


/* ------------------------------------------------------------
   19. MY PLAN DASHBOARD
   ------------------------------------------------------------ */
.plan-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--ret-radius);
    padding: 1.5rem;
    height: 100%;
}
.plan-card .plan-value { font-size: 1.6rem; font-weight: 900; line-height: 1.15; }
/* .plan-label type: see .ret-eyebrow */
.plan-card a.plan-drill { font-size: 0.8rem; font-weight: 600; text-decoration: none; }
.plan-empty {
    background: var(--ret-brand-soft);
    border: 1px dashed var(--ret-brand);
    border-radius: var(--ret-radius);
    padding: 2rem 1.5rem;
    text-align: center;
}


/* ------------------------------------------------------------
   20. REDUCED MOTION — respect the user's OS preference
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    .premium-card,
    .premium-card.hover-lift,
    .ret-step-card,
    .ret-related-chip,
    .ret-nextstep-card,
    .results-animate,
    .result-summary {
        transition: none !important;
        animation: none !important;
    }
    .results-animate { opacity: 1 !important; transform: none !important; }
}


/* ------------------------------------------------------------
   21. RESPONSIVE SECTION MENU — collapsible nav for mobile (and
       the hub at all widths). The sticky sidebar handles >=992px;
       this in-flow disclosure opens the same journey-grouped list.
   ------------------------------------------------------------ */
.ret-section-menu { margin-bottom: 1.5rem; }

.ret-section-menu-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--ret-radius-sm);
    padding: 0.6rem 1rem;
    color: var(--text-color);
    font-weight: 600;
    text-align: left;
    transition: border-color 0.15s ease;
}
.ret-section-menu-toggle:hover,
.ret-section-menu-toggle[aria-expanded="true"] { border-color: var(--ret-brand); }

.ret-section-menu-eyebrow { display: block; }   /* type: see .ret-eyebrow */
.ret-section-menu-current { line-height: 1.25; }
.ret-menu-chevron { flex-shrink: 0; transition: transform 0.2s ease; }
.ret-section-menu-toggle[aria-expanded="true"] .ret-menu-chevron { transform: rotate(180deg); }

.ret-section-menu-panel {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--ret-radius-sm);
    padding: 0.75rem;
    margin-top: 0.5rem;
}

/* Tabular numbers utility for neat alignment and to prevent jumping/jittering */
.tnum {
    font-variant-numeric: tabular-nums;
}