/* ========================================================================
   DEPLOY PATH: /css/retirement.74483419.css
   Tepuy Solutions — Retirement calculator — complete layout and component styles
   Version: 2026-03-31 (headers added)
   Notes: Load BEFORE sidebar-polish.css and chart-improvements.css.
   ======================================================================== */

/* ── Google Fonts ─────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════════════
   0. DESIGN TOKENS — mobile visual-polish pass
   Shared spacing scale + elevation/radius tokens for retirement.html only.
   Reuses the clay/moss/ink/stone/bone brand palette from tepuy.css — no new
   colors are introduced here, only structure (shadow, radius, rhythm).
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  --tp-space-1: 8px;
  --tp-space-2: 16px;
  --tp-space-3: 24px;
  --tp-space-4: 32px;

  --tp-radius-card:    14px;  /* cards / panels / callouts */
  --tp-radius-control: 10px;  /* inputs / buttons / mini-cards */
  --tp-radius-pill:    999px; /* chips / segmented controls */

  --tp-shadow-card:       0 2px 10px rgba(14, 21, 18, 0.07), 0 1px 3px rgba(14, 21, 18, 0.05);
  --tp-shadow-card-hover: 0 6px 20px rgba(14, 21, 18, 0.10);
  --tp-shadow-control:    0 1px 2px rgba(14, 21, 18, 0.06);
}

/* ── Bridge tokens for css/calculators.css's shared components (2026-08
   Stage 3) ──
   calculators.css's toggle switch, tooltip, and (later) button-strip/PDF/
   Learn & Reference rules reference generic token names (--gold,
   --text-secondary, --bg-raised, etc.) because PvS_style.css was their
   first consumer and PvS's own :root already defined them. Retirement
   doesn't share PvS's gold/clay palette — per the site's calculator color
   system, retirement stays green/white/black — so consuming those shared
   rules verbatim would either render unstyled (undefined custom property)
   or the wrong color. This block aliases the same generic names to
   retirement's own established literal values (matching what's already
   rendered elsewhere on this page — #1a5236 is the color already used by
   .dd-header-title, .rtab-btn--active, etc.) rather than either
   duplicating color overrides across every shared rule individually, or
   inventing a second, competing token scheme alongside --tp-space/
   --tp-radius/--tp-shadow above. Radius/shadow/transition values match
   calculators.css's own PvS-authored numbers exactly (or alias to this
   file's existing --tp-shadow-* where semantically equivalent) — those
   are structural, not brand-specific, so there's no reason for
   retirement's toggle/tooltip to render a different shape or timing than
   PvS's. */
:root {
  --gold:         #1a5236;
  /* Text colour to use ON --gold. --gold is a NAME, not a value: this file
     makes it dark green, css/macroeconomics.css makes it clay, and
     css/PvS_style.css makes it clay too. Call sites that hardcoded a
     near-black label on a --gold background therefore rendered #0d1017 on
     #1a5236 = 2.09:1 here (the signed-out sign-in gate) and #0f1118 on
     #1a5236 = 2.07:1 (.btn-pdf). Pairing the token with its own on-colour
     fixes every --gold background at once instead of per call site. */
  --gold-on:      #ffffff;   /* 9.11:1 on #1a5236 */
  --gold-dim:     #3db07e;
  --gold-light:   #247857;
  --gold-text:    #1a5236;
  --text-primary:   #0f1c16;
  --text-secondary: #3d5248;
  --text-muted:     #9aada6;
  --bg-surface: #ffffff;
  --bg-raised:  #f7faf8;
  --bg-hover:   #eef5f1;
  --border:       #e3ede8;
  --border-focus: #c8ddd3;
  --radius-sm: 4px;
  --radius-md: 8px;
  --transition: all .18s cubic-bezier(.4,0,.2,1);
  --shadow-sm:   var(--tp-shadow-control);
  --shadow-md:   var(--tp-shadow-card);
  --shadow-lg:   var(--tp-shadow-card-hover);
  --shadow-gold: 0 2px 8px rgba(26,82,54,.35);
  --danger: #c0392b;
}

/* Number cells — tabular numerics */
.tbl-total,
.tbl-age,
.insight-value,
.mc-pct-label,
.gap-strategy-value {
  font-variant-numeric: tabular-nums;
}

/* ═══════════════════════════════════════════════════════════════════════════
   1. SIDEBAR CARDS
   ═══════════════════════════════════════════════════════════════════════════ */
aside .card,
aside .tp-card {
  padding: 0;
  border-radius: var(--tp-radius-card);
  border: 1px solid #e3ede8;
  margin-bottom: var(--tp-space-2);
  box-shadow: var(--tp-shadow-card);
  background: #ffffff;
  overflow: visible;
  transition: box-shadow 0.15s;
}

aside .card:hover { box-shadow: var(--tp-shadow-card-hover); transform: none; }

aside .card-header {
  padding: 0.65rem 2.5rem 0.65rem 0.9rem !important;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  background: var(--cardH-bg);
  color: var(--cardH-text);
  line-height: 1.25;
  letter-spacing: 0.01em;
  border-radius: 8px 8px 0 0;
  pointer-events: auto;
}
aside .card-header:hover { background: var(--cardH-bg-open); }

aside .card-header::after {
  z-index: 1;
  pointer-events: none;
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 1.25rem;
  height: 1.25rem;
  font-size: 0.8rem;
}
aside .card-header[aria-expanded="true"]::after { pointer-events: none; z-index: 1; }

aside .card-content {
  display: block !important;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  padding: 0;
  background: #ffffff;
  transition: max-height 0.28s ease, opacity 0.22s ease, padding 0.28s ease;
}
aside .card-content.open {
  display: block !important;
  max-height: 4000px !important;
  overflow: visible !important;
  opacity: 1 !important;
  padding: 0.6rem 0.9rem 0.8rem !important;
}

/* ── Form rows ────────────────────────────────────────────────────────── */
.nested-fields {
  padding: 0.45rem 0 0.2rem;
  border-top: 1px solid #e3ede8;
  margin-top: 0.45rem;
}

aside .form-row { margin-bottom: 0.45rem; }
aside .form-row label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #3d5248;
  margin-bottom: 3px;
  display: block;
}
aside .form-row input[type="text"],
aside .form-row input[type="number"],
aside .form-row select,
aside .form-row textarea {
  padding: 4px 7px;
  font-size: 0.875rem;
  border-radius: 4px;
  border: 1px solid #c8ddd3;
  background: #f8faf9;
  color: #0f1c16;
  font-family: inherit;
}
aside .form-row input:focus,
aside .form-row select:focus {
  outline: none;
  border-color: #3db07e;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(36,120,87,0.12);
}

/* One-off Events "Type" select (Purchase / Windfall).
   The generic `aside .form-row select` rule above already gives it Inter Tight
   + the brand border/background, but a bare native <select> in this narrow
   column truncates "Purchase" and shows no dropdown affordance. Restyle the
   CLOSED state only: room for the label, a brand chevron drawn on the wrapper
   (a CSS-border triangle — no data-URI to break cross-browser), and a matching
   focus ring. The open option list stays native (not reliably styleable
   cross-browser, and native keeps correct keyboard / screen-reader behaviour). */
.bt-kind-wrap {
  position: relative;
  display: block;
  width: 100%;
}
.bt-kind-wrap::after {
  content: "";
  position: absolute;
  right: 9px;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -4px;
  border-right: 1.6px solid #7a948a;
  border-bottom: 1.6px solid #7a948a;
  transform: rotate(45deg);
  pointer-events: none;
}
aside .form-row select.bt-kind {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  padding: 4px 22px 4px 8px;
  font-family: inherit;
  font-size: 0.82rem;
  line-height: 1.35;
  color: #0f1c16;
  border: 1px solid #c8ddd3;
  border-radius: 4px;
  background: #f8faf9;
  text-overflow: ellipsis;
  cursor: pointer;
}
aside .form-row select.bt-kind:focus,
aside .form-row select.bt-kind:focus-visible {
  outline: none;
  border-color: #3db07e;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(36, 120, 87, 0.12);
}

/* ═══════════════════════════════════════════════════════════════════════════
   2. MAIN AREA — SECTION TITLES
   (.page-head itself — h1/sub sizing, grid layout, mobile collapse — now
   lives once in css/tepuy.css, shared by every body.calc calculator via
   includes/page-head.html. This file no longer needs its own copy.)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   3. KPI CARDS (Performance Overview)
   ═══════════════════════════════════════════════════════════════════════════ */
.insights {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.75rem;
}




/* ═══════════════════════════════════════════════════════════════════════════
   4. CHART CARDS
   ═══════════════════════════════════════════════════════════════════════════ */
/* Chart cards styled by tepuy.css */

/* Main area card headers — use tepuy.css defaults (dark green) */

.tp-chart {
  padding: 0.5rem 0.5rem 0;
  background: #ffffff;
  border-radius: 0 0 12px 12px;
}
.tp-chart canvas { min-height: 260px; }

/* Download buttons below charts */
.button-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem 0.75rem;
  flex-wrap: wrap;
}

/* ── Ghost small button (PNG download) ─── */
.btn-ghost-sm {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: inherit;
  font-size: 0.775rem;
  font-weight: 500;
  color: #4a655a;
  background: transparent;
  border: 1px solid #c8ddd3;
  border-radius: 4px;
  padding: 0.3rem 0.7rem;
  cursor: pointer;
  letter-spacing: 0.01em;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
  white-space: nowrap;
}
.btn-ghost-sm:hover {
  color: #0f1c16;
  border-color: #3db07e;
  background: #f8faf9;
}
.btn-ghost-sm svg { flex-shrink: 0; }

/* ── Action buttons (CSV, PDF, Reset) ─── */
.btn-action {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  color: #ffffff;
  background: #1a5236;
  border: none;
  border-radius: 8px;
  padding: 0.45rem 0.95rem;
  cursor: pointer;
  letter-spacing: 0.01em;
  transition: background 0.15s, box-shadow 0.15s, transform 0.1s;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(0,0,0,0.12);
}
.btn-action:hover {
  background: #247857;
  box-shadow: 0 3px 8px rgba(26,82,54,0.25);
  transform: translateY(-1px);
}
.btn-action:active { transform: translateY(0); }

.btn-action--ghost {
  color: #3d5248;
  background: #f1f7f4;
  box-shadow: none;
  border: 1px solid #e3ede8;
}
.btn-action--ghost:hover {
  background: #e6f0eb;
  border-color: #c8ddd3;
  box-shadow: none;
  color: #0f1c16;
}

/* ═══════════════════════════════════════════════════════════════════════════
   5. GAP INSIGHTS PANEL
   ═══════════════════════════════════════════════════════════════════════════ */
.gap-insights-panel {
  background: #ffffff;
  border: 1px solid #e3ede8;
  border-left: 3px solid var(--orange);
  border-radius: 12px;
  padding: 1.1rem 1.25rem;
  margin-bottom: 1rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
}
.gap-insights-header {
  margin-bottom: 1rem;
  font-size: 0.875rem;
  line-height: 1.45;
}
.gap-shortfall-label {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--orange);
  background: rgba(249,115,22,0.08);
  border-radius: 3px;
  padding: 0.1rem 0.4rem;
  margin-right: 0.4rem;
  vertical-align: middle;
}
.gap-shortfall-amt {
  font-size: 1.05rem;
  font-weight: 700;
  font-family: monospace;
  color: #0f1c16;
  letter-spacing: -0.01em;
}
.gap-shortfall-sub {
  font-size: 0.825rem;
  color: #4a655a;
}
.gap-strategies {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
  gap: 0.65rem;
}
.gap-strategy {
  background: #f8faf9;
  border: 1px solid #e3ede8;
  border-radius: 8px;
  padding: 0.8rem 0.9rem;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.gap-strategy:hover {
  border-color: #c8ddd3;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
}
.gap-strategy-label {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #4a655a;
  margin-bottom: 0.3rem;
}
.gap-strategy-value {
  font-size: 1.1rem;
  font-weight: 600;
  color: #0f1c16;
  letter-spacing: -0.01em;
  margin-bottom: 0.3rem;
  font-family: monospace;
}
.gap-strategy-sub {
  font-size: 0.72rem;
  color: #4a655a;
  line-height: 1.45;
  margin-bottom: 0.5rem;
}
.gap-apply-btn,
.btn.btn-outline.btn-small.gap-apply-btn {
  display: inline-block;
  font-family: inherit !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  color: #1a5236 !important;
  background: transparent !important;
  border: 1px solid #3db07e !important;
  border-radius: 4px !important;
  padding: 0.22rem 0.6rem !important;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  letter-spacing: 0.01em;
}
.gap-apply-btn:hover {
  background: #d1f5e4 !important;
  color: #0d2e1f !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   6. MONTE CARLO PANEL
   ═══════════════════════════════════════════════════════════════════════════ */
.mc-panel {
  background: #ffffff;
  border: 1px solid #e3ede8;
  border-left: 3px solid var(--purple);
  border-radius: 12px;
  padding: 1.1rem 1.25rem;
  margin-bottom: 1rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
}
/* Slim variant: methodology-only, no border accent, visually de-emphasised */
.mc-panel--slim {
  background: #fafcfb;
  border: 1px solid #e3ede8;
  border-radius: 10px;
  padding: 0;
  margin-bottom: 1rem;
  box-shadow: none;
}
.mc-panel--slim .mc-detail {
  margin-bottom: 0;
}
.mc-panel--slim .mc-detail summary {
  padding: 0.55rem 1rem;
  border-top: none;
  margin-top: 0;
  font-size: 0.76rem;
  color: #4a655a;
  font-weight: 600;
}
.mc-panel--slim .mc-detail-body {
  padding: 0 1rem 0.75rem;
}
.mc-header {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 0.8rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: #0f1c16;
}
.mc-status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.9), 0 0 0 4px currentColor;
}
.mc-label-badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 0.1rem 0.45rem;
  border-radius: 3px;
  margin-left: 0.25rem;
  vertical-align: middle;
}
.mc-meter-row {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 0.6rem;
}
.mc-meter-track {
  flex: 1;
  height: 8px;
  background: #e6f0eb;
  border-radius: 4px;
  overflow: hidden;
}
.mc-meter-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.65s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.mc-pct-label {
  font-size: 1.5rem;
  font-weight: 600;
  min-width: 3.5rem;
  text-align: right;
  letter-spacing: -0.02em;
  line-height: 1;
}
.mc-caption {
  font-size: 0.8rem;
  color: #4a655a;
  line-height: 1.5;
}

/* MC detail expand */
.mc-detail summary {
  list-style: none;
  padding: 0.4rem 0 0;
  font-size: 0.775rem;
  font-weight: 600;
  color: #4a655a;
  cursor: pointer;
  user-select: none;
  border-top: 1px solid #e3ede8;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  letter-spacing: 0.01em;
}
.mc-detail summary::before {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 4px 0 4px 6px;
  border-color: transparent transparent transparent currentColor;
  transition: transform 0.18s ease;
  flex-shrink: 0;
}
.mc-detail[open] summary::before { transform: rotate(90deg); }
.mc-detail summary::-webkit-details-marker { display: none; }
.mc-detail[open] summary { margin-bottom: 0.6rem; }
.mc-detail-body { padding: 0.1rem 0; }

.mc-vars-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
  margin-bottom: 0.6rem;
}
@container calc-main (max-width: 640px) { .mc-vars-grid { grid-template-columns: 1fr; } }

.mc-var {
  border-radius: 8px;
  padding: 0.65rem 0.8rem;
  font-size: 0.775rem;
  line-height: 1.5;
}
.mc-var ul { margin: 0.3rem 0; padding-left: 1rem; }
.mc-var ul li { margin-bottom: 0.2rem; }
.mc-var--varied { background: #ffffff; border: 1px solid rgba(139,92,246,0.20); }
.mc-var--fixed  { background: #ffffff; border: 1px solid #e3ede8; }
.mc-var-label {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 0.35rem;
  color: #4a655a;
}
.mc-sigma-source {
  margin: 0.4rem 0 0;
  font-size: 0.72rem;
  font-style: italic;
  color: #4a655a;
}
.mc-footnote {
  font-size: 0.72rem;
  color: #4a655a;
  line-height: 1.5;
  margin: 0;
  padding-top: 0.35rem;
  border-top: 1px solid #e3ede8;
}

/* ═══════════════════════════════════════════════════════════════════════════
   7. TTR PANEL
   ═══════════════════════════════════════════════════════════════════════════ */
.ttr-panel {
  background: #fffdf5;
  border: 1px solid #fde68a;
  border-left: 3px solid var(--amber);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
}
.ttr-header {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
}
.ttr-icon-line {
  display: inline-block;
  width: 3px;
  height: 1em;
  background: var(--amber);
  border-radius: 2px;
  flex-shrink: 0;
  margin-top: 0.1em;
}
.ttr-body { font-size: 0.85rem; line-height: 1.6; }
.ttr-body p { margin: 0 0 0.35rem; }

/* ═══════════════════════════════════════════════════════════════════════════
   8. YEAR-BY-YEAR TABLE
   ═══════════════════════════════════════════════════════════════════════════ */
.tbl-legend {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  font-size: 0.72rem;
  color: #4a655a;
  margin-bottom: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: #f8faf9;
  border: 1px solid #e3ede8;
  border-radius: 8px 8px 0 0;
}
.tbl-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

/* Status dot */
.tbl-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.tbl-dot--ok      { background: #1F8A6F; }
.tbl-dot--gap     { background: #A13B2B; }
.tbl-dot--neutral { background: #9cb8ac; }

/* Status cell */
.tbl-status, .tbl-th-status {
  text-align: center;
  width: 28px !important;
  min-width: 28px;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Age column */
.tbl-age {
  white-space: nowrap;
  color: #3d5248;
  font-weight: 500;
  font-size: 0.82rem;
  min-width: 70px;
}

/* Total column */
.tbl-total { font-weight: 600; }

/* Flow column */
.tbl-contrib  {
  color: #059669;
  font-size: 0.8rem;
  font-family: monospace;
  white-space: nowrap;
}
.tbl-withdraw {
  color: var(--red);
  font-size: 0.8rem;
  font-family: monospace;
  white-space: nowrap;
}

/* Retired row */
tr.tr-retired td {
  background: rgba(248,250,252,0.8);
  color: #3d5248;
}
.tp-table tr.tr-retired:nth-child(even) td {
  background: rgba(243,246,249,0.8);
}

/* Table overall refinements */
.tp-table { font-size: 0.82rem; }
.tp-table thead th {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #4a655a;
  background: #f1f7f4;
  border-bottom: 1px solid #c8ddd3;
  padding: 0.5rem 0.65rem;
  white-space: nowrap;
}
.tp-table td {
  padding: 0.45rem 0.65rem;
  border-bottom: 1px solid #e6f0eb;
  vertical-align: middle;
}
.tp-table tbody tr:last-child td { border-bottom: none; }
.tp-table tbody tr:hover td { background: #f8faf9; }

/* Age badges */
.age-badge {
  display: inline-block;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.08rem 0.35rem;
  border-radius: 3px;
  margin-left: 0.3rem;
  vertical-align: middle;
  font-family: inherit;
  line-height: 1.4;
}
.age-badge--retire   { background: rgba(59,130,246,0.1); color: #1d4ed8; }
.age-badge--goal     { background: rgba(0,196,122,0.12); color: #047857; }
.age-badge--depleted { background: rgba(239,68,68,0.1);  color: #b91c1c; }

/* ═══════════════════════════════════════════════════════════════════════════
   9. ALLOCATION PRESET NOTE
   ═══════════════════════════════════════════════════════════════════════════ */
#allocPresetNote {
  font-size: 0.775rem;
  color: #4a655a;
  line-height: 1.5;
  padding: 0.15rem 0;
  border-left: 2px solid #c8ddd3;
  padding-left: 0.5rem;
  margin: 0.15rem 0 0.4rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   10. PANEL SHARED STATES
   ═══════════════════════════════════════════════════════════════════════════ */
.mc-panel, .gap-insights-panel, .ttr-panel {
  border-radius: 12px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   11. RESPONSIVE
   These four rules are page-width concerns (not the sidebar or main column's
   own isolated width), so they key off calc-layout's tier threshold rather
   than calc-sidebar/calc-main — same 640px value as before, just measuring
   .main-layout's own rendered width (the iframe's width when embedded)
   instead of the raw browser viewport.
   NOTE: this @media block used to also carry the base definitions of
   .mode-toggle-bar/.mode-btn/.simple-card/.simple-row/etc — those were dead
   (nested under max-width:640px, so never applied on desktop) and are
   superseded by the unconditional "Simple mode — comprehensive aside
   override" block later in this file, which is the version that actually
   renders. Removed here rather than carried forward into the container-query
   conversion, since keeping two conflicting definitions is a foot-gun.
   ═══════════════════════════════════════════════════════════════════════════ */
@container calc-layout (max-width: 640px) {
 /* ─── Chart height override ─────────────────────────────────────────── */
:root {
  --chart-height-desktop: 460px;
  --chart-height-phone:   300px;
}



/* ─── Calculate button — full-width in sidebar ─────────────────────────── */
/* sidebar-footer: Calculate button + Pro badge, stacked consistently */
.sidebar-footer {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 0.65rem 0 0.25rem;
  flex-shrink: 0;
}

/* ─── Table wrapper — plain div, no tp-chart styling from tepuy.css ────── */
.ret-table-wrap {
  width: 100%;
}
/* Single scroll host: the injected .table-container inside */
.ret-table-wrap .table-section .table-container {
  overflow-x: auto;
  overflow-y: auto;
  max-height: 420px;
}

/* Sidebar .i/.tp-tip fixed-position tooltip override removed here (2026-08
   Stage 3): dead now that retirement.html's tooltips were converted to
   the shared .info-tip/.info-tip-popup system (css/calculators.css,
   js/pvs-tooltip.js), which is already position:fixed and appended to
   <body> — it never had a sidebar-overflow-clipping problem to begin
   with, since it doesn't live inside the sidebar's DOM subtree. */
} /* closes @container calc-layout (max-width: 640px) — responsive section */


/* ═══════════════════════════════════════════════════════════════════════════
   STALE RESULTS INDICATOR
   Shown when an input that doesn't auto-recalculate (currently just
   auGiftingEnabled — see the MANUAL_RECALC audit comment in calc-init.js)
   changes after the last Calculate run. Same amber warning language as
   #advModePanel .result-box.warning (css/sidebar-polish.css) for
   consistency, reproduced here since the banner lives outside advModePanel.
   ═══════════════════════════════════════════════════════════════════════════ */
.stale-results-banner {
  margin: 0;
  padding: 0.4rem 0.6rem;
  background: #fff9ed;
  border-left: 3px solid #f59e0b;
  border-radius: 4px;
  color: #7a4f00;
  font-size: 0.76rem;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
}

#perfOverviewCard.results-stale,
#resultsTabs.results-stale {
  opacity: 0.55;
  filter: grayscale(0.2);
  transition: opacity 0.15s ease, filter 0.15s ease;
}


/* ═══════════════════════════════════════════════════════════════════════════
   ADVANCED MODE panel wrapper — inherits existing card styles unchanged
   ═══════════════════════════════════════════════════════════════════════════ */

#advModePanel {
  /* no visual wrapper needed; existing .card styles handle everything */
}

/* The bare (non-!important, unprefixed) .simple-row/.simple-input mobile
   stacking rule that used to live here is dead — same as the block deleted
   from section 11 above, it's fully superseded by the higher-specificity
   "Simple mode — comprehensive aside override" block's own converted
   @container calc-sidebar (max-width: 300px) rule further down this file. */

/* ═══════════════════════════════════════════════════════════════════════════
   Simple mode + KPI/page-head layout
   ═══════════════════════════════════════════════════════════════════════════ */
/* The old "DESKTOP LAYOUT FIX" #1 here (!important overrides re-offsetting
   main from a fixed-position sidebar) is gone — .main-layout is a real CSS
   Grid now (css/tepuy.css), so there's no offset/centering conflict left to
   patch over. */

/* ── KPI insight cards — cap them to a sensible max width ─────────────
   On wide screens the 4-column grid stretches too wide.                    */
.insights {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(140px, 280px)) !important;
  gap: 0.75rem !important;
  max-width: 100% !important;
}

/* ── 4. Decision dashboard — constrain width on very wide screens ──────── */
.decision-dashboard {
  max-width: 960px;
}

/* ── 5. Simple mode — comprehensive aside override (belt + suspenders) ───
   All selectors doubled: body.calc .calc-aside AND aside,
   all values !important, placed LAST so they win source-order too.         */

body.calc .calc-aside .mode-toggle-bar,
aside .mode-toggle-bar {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 0 !important;
  padding: 0.45rem 0.9rem 0.5rem !important;
  background: transparent !important;
  border-bottom: 1px solid #dce9e3 !important;
  margin-bottom: 0.6rem !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

body.calc .calc-aside .mode-btn,
aside .mode-btn {
  flex: 0 0 auto !important;
  display: inline-block !important;
  font-family: inherit !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  color: #6b8c7d !important;
  background: transparent !important;
  border: 1px solid #c8ddd3 !important;
  border-radius: 0 !important;
  padding: 0.3rem 0.9rem !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  line-height: 1.4 !important;
  margin: 0 !important;
  width: auto !important;
  box-shadow: none !important;
}
body.calc .calc-aside .mode-btn:first-of-type,
aside .mode-btn:first-of-type { border-radius: 5px 0 0 5px !important; }
body.calc .calc-aside .mode-btn:last-of-type,
aside .mode-btn:last-of-type  { border-radius: 0 5px 5px 0 !important; border-left: none !important; }
body.calc .calc-aside .mode-btn--active,
aside .mode-btn--active { color: #fff !important; background: #1a5236 !important; border-color: #1a5236 !important; }

body.calc .calc-aside .mode-hint,
aside .mode-hint { margin-left: auto !important; font-size: 0.72rem !important; color: #9aada6 !important; }

/* Simple card wrapper */
body.calc .calc-aside .simple-card,
aside .simple-card {
  display: block !important;
  background: #fff !important;
  border: 1px solid #dce9e3 !important;
  border-radius: 8px !important;
  padding: 0.85rem 1rem 0.9rem !important;
  margin: 0 0 0.6rem !important;
  box-shadow: none !important;
  max-height: none !important;
  opacity: 1 !important;
  overflow: visible !important;
}

/* Rows must flex */
body.calc .calc-aside .simple-card .simple-row,
aside .simple-card .simple-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.5rem !important;
  margin-bottom: 0.55rem !important;
  padding: 0 !important;
  border: none !important;
  width: 100% !important;
}

/* Labels must NOT go full-width */
body.calc .calc-aside .simple-card .simple-label,
aside .simple-card .simple-label {
  display: block !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: auto !important;
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
  color: #3d5248 !important;
  margin-bottom: 0 !important;
  line-height: 1.3 !important;
}
body.calc .calc-aside .simple-card .simple-hint,
aside .simple-card .simple-hint {
  display: block !important;
  font-size: 0.7rem !important;
  color: #9aada6 !important;
  font-weight: 400 !important;
  margin-top: 1px !important;
}

/* Inputs: fixed narrow width */
body.calc .calc-aside .simple-card .simple-input,
aside .simple-card .simple-input {
  flex: 0 0 110px !important;
  width: 110px !important;
  max-width: 110px !important;
  min-width: 0 !important;
  padding: 5px 8px !important;
  font-size: 0.875rem !important;
  border-radius: 5px !important;
  border: 1px solid #c8ddd3 !important;
  background: #f8faf9 !important;
  color: #0f1c16 !important;
  text-align: right !important;
  box-shadow: none !important;
  display: block !important;
  -moz-appearance: textfield !important;
}
body.calc .calc-aside .simple-card .simple-input:focus,
aside .simple-card .simple-input:focus {
  border-color: #3db07e !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(36,120,87,0.12) !important;
  outline: none !important;
}
body.calc .calc-aside .simple-card .simple-input::-webkit-outer-spin-button,
body.calc .calc-aside .simple-card .simple-input::-webkit-inner-spin-button,
aside .simple-card .simple-input::-webkit-outer-spin-button,
aside .simple-card .simple-input::-webkit-inner-spin-button { -webkit-appearance: none !important; margin: 0 !important; }

/* $ prefix wrapper must flex */
body.calc .calc-aside .simple-card .simple-prefix-wrap,
aside .simple-card .simple-prefix-wrap {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  flex: 0 0 110px !important;
  width: 110px !important;
  max-width: 110px !important;
  border: 1px solid #c8ddd3 !important;
  border-radius: 5px !important;
  background: #f8faf9 !important;
  overflow: hidden !important;
  box-shadow: none !important;
  padding: 0 !important;
}
body.calc .calc-aside .simple-card .simple-prefix-wrap:focus-within,
aside .simple-card .simple-prefix-wrap:focus-within { border-color: #3db07e !important; background: #fff !important; box-shadow: 0 0 0 3px rgba(36,120,87,0.12) !important; }

body.calc .calc-aside .simple-card .simple-prefix,
aside .simple-card .simple-prefix {
  flex-shrink: 0 !important;
  display: inline-block !important;
  padding: 5px 0 5px 7px !important;
  font-size: 0.8rem !important;
  color: #9aada6 !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  background: transparent !important;
  width: auto !important;
}
body.calc .calc-aside .simple-card .simple-input--prefixed,
aside .simple-card .simple-input--prefixed {
  flex: 1 !important;
  width: 100% !important;
  max-width: none !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 5px 7px 5px 3px !important;
  text-align: right !important;
  font-size: 0.875rem !important;
  color: #0f1c16 !important;
  display: block !important;
}
body.calc .calc-aside .simple-card .simple-input--prefixed:focus,
aside .simple-card .simple-input--prefixed:focus { outline: none !important; box-shadow: none !important; border: none !important; background: transparent !important; }

body.calc .calc-aside .simple-card .simple-divider,
aside .simple-card .simple-divider { display: block !important; height: 1px !important; background: #e8f0eb !important; margin: 0.55rem 0 !important; border: none !important; padding: 0 !important; }

/* Calculate button */
body.calc .calc-aside .simple-card .simple-run-btn,
aside .simple-card .simple-run-btn {
  display: block !important;
  width: 100% !important;
  margin-top: 0.8rem !important;
  padding: 0.55rem 1rem !important;
  font-family: inherit !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  color: #fff !important;
  background: #1a5236 !important;
  border: none !important;
  border-radius: 7px !important;
  cursor: pointer !important;
  text-align: center !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12) !important;
  box-sizing: border-box !important;
}
body.calc .calc-aside .simple-card .simple-run-btn:hover,
aside .simple-card .simple-run-btn:hover { background: #247857 !important; }

/* Nudge */
body.calc .calc-aside .simple-card .simple-adv-nudge,
aside .simple-card .simple-adv-nudge { display: block !important; margin: 0.6rem 0 0 !important; padding: 0 !important; font-size: 0.75rem !important; color: #9aada6 !important; text-align: center !important; }
body.calc .calc-aside .simple-card .simple-adv-link,
aside .simple-card .simple-adv-link { background: none !important; border: none !important; padding: 0 !important; font-size: 0.75rem !important; color: #247857 !important; cursor: pointer !important; text-decoration: underline !important; display: inline !important; width: auto !important; }

/* Cramped sidebar: stack rows. NOTE: this can't reuse the old 500px value
   verbatim as a container query — .calc-sidebar's own width is a fixed
   var(--sidebar-w) (360px, ~359px measured) at Wide tier, already below
   500px, so a literal @container calc-sidebar (max-width:500px) would
   misfire permanently on desktop. Measured in a live browser: at the
   Sidebar preset (420px iframe) the sidebar renders ~363px (barely
   different from the 359px desktop baseline — not actually cramped), while
   at the Compact preset (340px iframe) it drops to ~283px (genuinely
   tight). 300px is the empirically-correct threshold that separates those
   two cases: never fires at Wide tier or at the Sidebar preset, only fires
   once the sidebar has genuinely shrunk into Compact-preset territory. */
@container calc-sidebar (max-width: 300px) {
  body.calc .calc-aside .simple-card .simple-row,
  aside .simple-card .simple-row { flex-direction: column !important; align-items: stretch !important; }
  body.calc .calc-aside .simple-card .simple-input,
  body.calc .calc-aside .simple-card .simple-prefix-wrap,
  aside .simple-card .simple-input,
  aside .simple-card .simple-prefix-wrap { flex: 0 0 auto !important; width: 100% !important; max-width: 100% !important; }
}

/* Sidebar panel flush-border-on-desktop rule lives in sidebar-polish.css
   (was duplicated verbatim in both files; kept the sidebar-polish.css copy
   since that file is more narrowly scoped to sidebar-specific polish). */

/* ═══════════════════════════════════════════════════════════════════════════
   DECISION DASHBOARD — full MC results panel
   ═══════════════════════════════════════════════════════════════════════════ */

.dd-panel {
  background: #ffffff;
  border: 1px solid #dce8e1;
  border-radius: 14px;
  padding: 0;
  margin-bottom: 1rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);
  overflow: hidden;
  /* Belt-and-suspenders: ensure the panel never collapses to zero width */
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}

/* ── Header bar ── */
.dd-header-row {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.85rem 1.25rem 0.75rem;
  background: #f7faf8;
  border-bottom: 1px solid #e3ede8;
}
.dd-header-title {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: #1a5236;
}
.dd-header-sub {
  font-size: 0.72rem;
  color: #9aada6;
  font-weight: 400;
}

/* ── Hero row: ring + sentence + metrics ── */
.dd-hero {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 1.5rem;
  padding: 1.25rem 1.25rem 1rem;
  align-items: start;
}
@container calc-main (max-width: 600px) {
  .dd-hero { grid-template-columns: 1fr; gap: 1rem; }
}

/* ── Probability block ── */
.dd-prob-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  width: 150px;
  min-width: 150px;
  flex-shrink: 0;
}
.dd-prob-ring {
  position: relative;
  width: 110px;
  height: 110px;
}
.dd-ring-svg {
  width: 110px;
  height: 110px;
  display: block;
}
.dd-ring-track { opacity: 0.12; }
.dd-ring-fill {
  transition: stroke-dasharray 1.1s cubic-bezier(0.34, 1.2, 0.64, 1);
}
.dd-ring-inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
}
.dd-ring-pct {
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.dd-ring-sub {
  font-size: 0.62rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #9aada6;
}

/* Tier badge + sentences below ring */
.dd-prob-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  text-align: center;
}
.dd-prob-tier {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.18rem 0.6rem;
  border-radius: 20px;
}
.dd-prob-note {
  font-size: 0.75rem;
  color: #3d5248;
  line-height: 1.4;
  max-width: 150px;
}
.dd-ruin-note {
  font-size: 0.72rem;
  color: #c0392b;
}

/* ── Right side: benchmark context + key metrics ── */
.dd-right {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

/* Plain-English headline sentence */
.dd-headline {
  font-size: 1rem;
  font-weight: 600;
  color: #0f1c16;
  line-height: 1.4;
}
.dd-headline em { font-style: normal; }

/* Benchmark bar */
.dd-benchmark {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.dd-bench-track {
  position: relative;
  height: 10px;
  border-radius: 5px;
  background: transparent;
  overflow: visible;
  display: flex;
}
.dd-bench-seg {
  height: 10px;
  display: block;
  flex-shrink: 0;
  transition: opacity 0.4s ease;
}
.dd-bench-needle {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  border: 2.5px solid currentColor;
  box-shadow: 0 1px 4px rgba(0,0,0,0.18);
  transition: left 0.9s cubic-bezier(0.34, 1.2, 0.64, 1);
  z-index: 2;
}
.dd-bench-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.62rem;
  color: #9aada6;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0 2px;
}
.dd-bench-labels span:first-child { color: #c0392b; }
.dd-bench-labels span:last-child { color: #1a7c4a; }

/* Key metric chips */
.dd-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
}
@container calc-main (max-width: 500px) {
  .dd-metrics { grid-template-columns: 1fr 1fr; }
}
.dd-metric {
  background: #f7faf8;
  border: 1px solid #e3ede8;
  border-radius: 9px;
  padding: 0.55rem 0.65rem;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dd-metric-label {
  font-size: 0.62rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #9aada6;
}
.dd-metric-val {
  font-size: 1.05rem;
  font-weight: 700;
  color: #0f1c16;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.dd-metric-warn { color: #c07a00; }
.dd-metric-sub {
  font-size: 0.62rem;
  color: #9aada6;
  line-height: 1.3;
}

/* ── Sections row: drawdown + histogram ── */
.dd-sections-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid #e3ede8;
}
@container calc-main (max-width: 680px) {
  .dd-sections-row { grid-template-columns: 1fr; }
}
.dd-section {
  padding: 0.9rem 1.25rem 1rem;
}
.dd-section + .dd-section {
  border-left: 1px solid #e3ede8;
}
@container calc-main (max-width: 680px) {
  .dd-section + .dd-section { border-left: none; border-top: 1px solid #e3ede8; }
}
.dd-section-title {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #3d5248;
  margin-bottom: 0.2rem;
}
.dd-section-sub {
  font-size: 0.72rem;
  color: #9aada6;
  margin-bottom: 0.65rem;
  line-height: 1.4;
}

/* Drawdown table */
.dd-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.dd-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
}
.dd-table th {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #9aada6;
  padding: 0.2rem 0.4rem 0.45rem;
  text-align: left;
  border-bottom: 1px solid #e3ede8;
}
.dd-table td {
  padding: 0.35rem 0.4rem;
  border-bottom: 1px solid #f0f5f2;
  color: #1c2b2a;
  vertical-align: middle;
}
.dd-table tr:last-child td { border-bottom: none; }
.dd-num { text-align: right; font-variant-numeric: tabular-nums; }
.dd-green { color: #1a7c4a; font-weight: 600; }
.dd-best-row { background: #f4fbf7; }
.dd-best-badge {
  display: inline-block;
  background: #e6f5ed;
  color: #1a7c4a;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.1rem 0.35rem;
  border-radius: 3px;
  vertical-align: middle;
  margin-right: 0.2rem;
}
.dd-lasts { color: #1a7c4a; font-size: 0.75rem; }
.dd-depleted-age { color: #c0392b; font-weight: 600; }
.dd-tax-note {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  background: #f0f9f4;
  border: 1px solid #b3d9c4;
  border-radius: 7px;
  padding: 0.45rem 0.65rem;
  font-size: 0.76rem;
  color: #1a5236;
  margin-top: 0.65rem;
  line-height: 1.4;
}
.dd-tax-icon { font-size: 0.9rem; flex-shrink: 0; }

/* Failure histogram */
.hist-chart { display: flex; flex-direction: column; gap: 0.35rem; }
.hist-row {
  display: grid;
  grid-template-columns: 5.5rem 1fr 2.5rem;
  align-items: center;
  gap: 0.5rem;
}
.hist-label { font-size: 0.72rem; color: #6b7c79; }
.hist-bar-track {
  height: 8px;
  background: #f0f5f2;
  border-radius: 4px;
  overflow: hidden;
}
.hist-bar-fill {
  height: 100%;
  background: #e85a4f;
  border-radius: 4px;
  opacity: 0.7;
  transition: width 0.7s ease;
}
.hist-pct { font-size: 0.7rem; color: #9aada6; text-align: right; font-variant-numeric: tabular-nums; }

/* Disclaimer */
.dd-disclaimer {
  font-size: 0.68rem;
  color: #b0c0ba;
  padding: 0.55rem 1.25rem 0.7rem;
  border-top: 1px solid #f0f5f2;
  margin: 0;
  line-height: 1.4;
}

/* ── Fan chart legend chip (shown below capital chart) ── */
.mc-fan-note {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  color: #4a655a;
  margin-top: 0.4rem;
}
.mc-fan-swatch {
  width: 20px;
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(to right, rgba(220,90,90,0.35), rgba(26,107,74,0.25));
  flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════════════
   Monte Carlo Rich Panel (2026) — return assumptions, outcome
   percentiles, simulated return bar chart
   ══════════════════════════════════════════════════════════════════ */
.mc-rich-panel { display:flex; flex-direction:column; gap:0; }

.mc-section { padding:1rem 1.25rem; border-bottom:1px solid #e8f0eb; }
.mc-section:last-child { border-bottom:none; }

.mc-section-title {
  font-size:0.7rem; font-weight:700; text-transform:uppercase;
  letter-spacing:0.09em; color:#1a5236; margin-bottom:0.7rem;
  display:flex; align-items:center; gap:0.5rem; flex-wrap:wrap;
}
.mc-section-badge {
  font-size:0.6rem; font-weight:600; text-transform:uppercase;
  letter-spacing:0.06em; background:#e8f0eb; color:#4a655a;
  padding:0.1rem 0.45rem; border-radius:3px;
}

.mc-assumptions-grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(95px,1fr));
  gap:0.45rem; margin-bottom:0.7rem;
}
.mc-assumption-card {
  background:#f7faf8; border:1px solid #e3ede8; border-radius:8px;
  padding:0.5rem 0.6rem; display:flex; flex-direction:column; gap:2px;
}
.mc-assump-label {
  font-size:0.6rem; font-weight:700; text-transform:uppercase;
  letter-spacing:0.06em; color:#9aada6; line-height:1.2;
}
.mc-assump-val {
  font-size:1rem; font-weight:700; color:#0f1c16;
  font-variant-numeric:tabular-nums; letter-spacing:-0.01em; line-height:1.2;
}
.mc-assump-val--sm  { font-size:0.82rem; }
.mc-assump-val--warn { color:#b45309; }
.mc-assump-sub { font-size:0.6rem; color:#9aada6; line-height:1.3; }

.mc-range-row {
  display:flex; align-items:center; flex-wrap:wrap;
  gap:0.5rem; margin-bottom:0.65rem;
}
.mc-range-label { font-size:0.78rem; color:#3d5248; }
.mc-range-pills { display:flex; gap:0.3rem; flex-wrap:wrap; }
.mc-pill {
  font-size:0.72rem; font-weight:700; padding:0.15rem 0.55rem;
  border-radius:20px; font-variant-numeric:tabular-nums; white-space:nowrap;
}
.mc-pill--bad  { background:#fee2e2; color:#b91c1c; }
.mc-pill--mid  { background:#f1f5f9; color:#374151; }
.mc-pill--good { background:#dcfce7; color:#15803d; }

.mc-drag-note {
  font-size:0.78rem; color:#3d5248; background:#f0fdf4;
  border:1px solid #bbf7d0; border-radius:8px;
  padding:0.6rem 0.75rem; line-height:1.6;
}
.mc-code {
  font-family:ui-monospace,SFMono-Regular,monospace; font-size:0.78rem;
  background:rgba(0,0,0,0.06); padding:0.05rem 0.3rem; border-radius:3px;
}

.mc-outcome-grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(115px,1fr));
  gap:0.45rem; margin-bottom:0.6rem;
}
.mc-outcome-card {
  border-radius:10px; padding:0.65rem 0.7rem;
  display:flex; flex-direction:column; gap:2px;
}
.mc-outcome-card--bad  { background:#fff5f5; border:1px solid #fecaca; }
.mc-outcome-card--mid  { background:#f8fafc; border:1px solid #e2e8f0; }
.mc-outcome-card--good { background:#f0fdf4; border:1px solid #bbf7d0; }
.mc-outcome-card--det  { background:#f0f9ff; border:1px solid #bae6fd; }

.mc-outcome-label {
  font-size:0.6rem; font-weight:700; text-transform:uppercase;
  letter-spacing:0.06em; color:#9aada6;
}
.mc-outcome-pct { font-size:0.7rem; font-weight:800; letter-spacing:0.05em; margin-top:1px; }
.mc-outcome-card--bad  .mc-outcome-pct { color:#dc2626; }
.mc-outcome-card--mid  .mc-outcome-pct { color:#374151; }
.mc-outcome-card--good .mc-outcome-pct { color:#16a34a; }
.mc-outcome-card--det  .mc-outcome-pct { color:#0369a1; }
.mc-outcome-val {
  font-size:1rem; font-weight:700; color:#0f1c16;
  font-variant-numeric:tabular-nums; letter-spacing:-0.02em; line-height:1.2;
}
.mc-outcome-sub { font-size:0.6rem; color:#9aada6; line-height:1.3; }
.mc-outcome-note { font-size:0.78rem; color:#3d5248; margin:0; line-height:1.5; }

.mc-chart-intro { font-size:0.78rem; color:#3d5248; line-height:1.55; margin:0 0 0.6rem; }
.mc-chart-wrap {
  width:100%; overflow-x:auto; background:#f7faf8;
  border:1px solid #e3ede8; border-radius:8px;
  padding:0.6rem 0.4rem 0.3rem; box-sizing:border-box;
}
.mc-chart-note {
  font-size:0.72rem; color:#9aada6; line-height:1.5;
  margin:0.45rem 0 0; font-style:italic;
}

@container calc-main (max-width: 480px) {
  .mc-assumptions-grid { grid-template-columns:1fr 1fr; }
  .mc-outcome-grid     { grid-template-columns:1fr 1fr; }
  .mc-range-row        { flex-direction:column; align-items:flex-start; }
  .mc-section          { padding:0.85rem 0.9rem; }
}

/* ══════════════════════════════════════════════════════════════════
   Monte Carlo v2 — Stress scenarios, sigma slider, IQR bar,
   P25/P75 cards, methodology blocks
   ══════════════════════════════════════════════════════════════════ */

/* ── Outcome grid: 5-col with P25/P75 ─────────────────────────── */
.mc-outcome-grid--5 {
  grid-template-columns: repeat(5, 1fr);
}
@container calc-main (max-width: 640px) {
  .mc-outcome-grid--5 { grid-template-columns: 1fr 1fr; }
}
/* The old max-width:400px duplicate of the rule above (identical 1fr 1fr
   value at both breakpoints) is redundant — the 640px rule alone covers it. */

.mc-outcome-card--p25 {
  background: #fffbeb;
  border: 1px solid #fde68a;
}
.mc-outcome-card--p25 .mc-outcome-pct { color: #b45309; }

.mc-outcome-card--p75 {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
}
.mc-outcome-card--p75 .mc-outcome-pct { color: #15803d; }

.mc-assumption-card--warn {
  background: #fffbeb;
  border-color: #fde68a;
}

/* ── IQR visualisation bar ─────────────────────────────────────── */
.mc-iqr-wrap {
  margin-top: 0.75rem;
}
.mc-iqr-label {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #9aada6;
  margin-bottom: 0.4rem;
}
.mc-iqr-track {
  position: relative;
  height: 12px;
  background: #e8f0eb;
  border-radius: 6px;
  overflow: visible;
  margin-bottom: 0.3rem;
}
.mc-iqr-outer {
  position: absolute;
  left: 0; top: 0;
  height: 100%;
  width: 100%;
  background: rgba(26,107,74,0.10);
  border-radius: 6px;
}
.mc-iqr-inner {
  position: absolute;
  top: 0;
  height: 100%;
  background: rgba(26,107,74,0.35);
  border-radius: 4px;
  transition: left 0.6s ease, width 0.6s ease;
}
.mc-iqr-needle {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 2.5px solid #1a5236;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
  z-index: 2;
  transition: left 0.6s ease;
}
.mc-iqr-vals {
  display: flex;
  justify-content: space-between;
  font-size: 0.62rem;
  font-weight: 600;
  color: #6b7c79;
  font-variant-numeric: tabular-nums;
}
.mc-iqr-p50 {
  font-weight: 800;
  color: #1a5236;
}
.mc-iqr-note {
  font-size: 0.72rem;
  color: #6b7c79;
  margin: 0.35rem 0 0;
  line-height: 1.5;
}

/* ── Sigma slider control ──────────────────────────────────────── */
.mc-sigma-control {
  background: #f7faf8;
  border: 1px solid #e3ede8;
  border-radius: 10px;
  padding: 0.75rem 0.85rem 0.65rem;
  margin: 0.65rem 0;
}
.mc-sigma-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.mc-sigma-label {
  font-size: 0.73rem;
  font-weight: 600;
  color: #3d5248;
  line-height: 1.3;
  flex: 1;
}
.mc-sigma-val-display {
  font-size: 1rem;
  font-weight: 800;
  color: #1a5236;
  font-variant-numeric: tabular-nums;
  min-width: 2.5rem;
  text-align: right;
}
.mc-sigma-slider {
  width: 100%;
  accent-color: #1a5236;
  cursor: pointer;
  margin: 0;
  display: block;
}
.mc-sigma-ticks {
  display: flex;
  justify-content: space-between;
  font-size: 0.58rem;
  color: #9aada6;
  margin-top: 0.25rem;
  padding: 0 2px;
}

/* ── Stress scenario section ───────────────────────────────────── */
.mc-stress-intro {
  font-size: 0.78rem;
  color: #3d5248;
  line-height: 1.55;
  margin: 0 0 0.65rem;
}
.mc-stress-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.6rem;
}
.mc-stress-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  padding: 0.5rem 0.65rem;
  background: #f7faf8;
  border: 1.5px solid #e3ede8;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
  min-width: 110px;
  flex: 1 1 110px;
}
.mc-stress-btn:hover {
  border-color: #1a5236;
  background: #f0fdf4;
  box-shadow: 0 1px 6px rgba(26,107,74,0.12);
}
.mc-stress-btn--active {
  border-color: #1a5236 !important;
  background: #f0fdf4 !important;
  box-shadow: 0 0 0 2px rgba(26,107,74,0.15) !important;
}
.mc-stress-icon { font-size: 1rem; line-height: 1; }
.mc-stress-name {
  font-size: 0.75rem;
  font-weight: 700;
  color: #0f1c16;
  line-height: 1.2;
}
.mc-stress-desc {
  font-size: 0.62rem;
  color: #9aada6;
  line-height: 1.3;
}

.mc-stress-result {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 10px;
  padding: 0.75rem 0.9rem;
  margin-top: 0.35rem;
  animation: mcFadeIn 0.25s ease;
}
@keyframes mcFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.mc-stress-result-inner {}
.mc-stress-kpis {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  margin-bottom: 0.5rem;
}
.mc-stress-kpi { display: flex; flex-direction: column; gap: 1px; }
.mc-stress-kpi-label {
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #9aada6;
}
.mc-stress-kpi-val {
  font-size: 0.95rem;
  font-weight: 700;
  color: #0f1c16;
  font-variant-numeric: tabular-nums;
}
.mc-stress-note {
  font-size: 0.72rem;
  color: #6b7c79;
  margin: 0;
  line-height: 1.5;
  font-style: italic;
}

/* ── Methodology section ───────────────────────────────────────── */
.mc-methodology-section {
  background: #f7faf8;
}
.mc-method-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
}
@container calc-main (max-width: 560px) {
  .mc-method-grid { grid-template-columns: 1fr; }
}
.mc-method-block {
  background: #fff;
  border: 1px solid #e3ede8;
  border-radius: 10px;
  padding: 0.75rem 0.85rem;
}
.mc-method-block--varied  { border-left: 3px solid #f59e0b; }
.mc-method-block--fixed   { border-left: 3px solid #3b82f6; }
.mc-method-block--adaptive { border-left: 3px solid #1a5236; }
.mc-method-block--calibration { border-left: 3px solid #9b7fbf; }
.mc-method-block--stress  { border-left: 3px solid #c0392b; }
.mc-method-block--voltable { border-left: 3px solid #0891b2; }

.mc-method-block-title {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #3d5248;
  margin-bottom: 0.5rem;
}
.mc-method-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.mc-method-dot--varied     { background: #f59e0b; }
.mc-method-dot--fixed      { background: #3b82f6; }
.mc-method-dot--adaptive   { background: #1a5236; }
.mc-method-dot--calibration { background: #9b7fbf; }
.mc-method-dot--stress     { background: #c0392b; }
.mc-method-dot--voltable   { background: #0891b2; }

.mc-method-list {
  margin: 0;
  padding: 0 0 0 1rem;
  font-size: 0.75rem;
  color: #3d5248;
  line-height: 1.65;
}
.mc-method-list li { margin-bottom: 0.2rem; }

.mc-method-prose {
  font-size: 0.75rem;
  color: #3d5248;
  line-height: 1.65;
  margin: 0;
}

.mc-vol-table-wrap {
  overflow-x: auto;
}
.mc-vol-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.74rem;
  color: #3d5248;
}
.mc-vol-table th, .mc-vol-table td {
  text-align: right;
  padding: 0.3rem 0.4rem;
  border-bottom: 1px solid #e3ede8;
  white-space: nowrap;
}
.mc-vol-table th {
  white-space: normal;
  line-height: 1.25;
}
.mc-vol-table th:first-child, .mc-vol-table td:first-child {
  text-align: left;
}
.mc-vol-table th {
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #4a655a;
}
.mc-vol-row--current {
  background: #f0faf5;
  font-weight: 600;
}
.mc-vol-you {
  font-size: 0.66rem;
  font-weight: 700;
  color: #1a7c4a;
}

/* Moved out of retirement.html's inline <style> block for consistency with
   the other calc-main container queries in this file. Same 700px value as
   before, now measuring main's own rendered width. */
@container calc-main (min-width: 700px) {
  .insights { grid-template-columns: repeat(5, minmax(120px, 1fr)) !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Moved out of retirement.html's inline <style> blocks (2026-08 Stage 1
   cleanup). !important flags were audited on extraction, not copied
   blindly — see the removal notes in the git commit for what got dropped
   (a ~150-line orphaned .simple-card/.simple-row/.simple-input duplicate
   targeting a markup naming scheme this page no longer uses, plus a
   no-op main-padding override that duplicated tepuy.css's base value
   verbatim) and what stayed !important (.insights, below — it has to
   beat the two other-!important .insights declarations already in this
   file, at line 787 and in the @container rule directly above, both of
   which were themselves already dead — shadowed by the inline block —
   before this cleanup, and remain dead now for the same reason, just
   shadowed by this rule instead).
   ═══════════════════════════════════════════════════════════════════════════ */

/* KPI insight cards — the version that actually renders. Wins over the
   two other .insights declarations in this file via !important (both of
   those predate this one and are otherwise-dead leftovers themselves). */
.insights {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important;
  gap: 0.75rem !important;
}

/* .page-head's grid layout (auto 1fr, 2rem gap, mobile collapse) now
   lives once in css/tepuy.css — see includes/page-head.html. */

/* ── Decision Dashboard — the DECISION DASHBOARD section above predates
   this cleanup and was diffed property-by-property against the inline
   block: 54 of 58 shared selectors matched exactly (safe to leave as
   is), and 4 responsive rules there use @container calc-main where the
   inline block used an equivalent @media query at the same breakpoint
   with identical values — functionally a no-op difference, not migrated.
   Only .dd-panel/.dd-right/.dd-headline actually differed (the inline
   block's overrides were the ones rendering); corrected here rather
   than editing the section above, to keep this cleanup's diff
   reviewable against the original inline source. ── */
.dd-panel {
  margin-bottom: 0.65rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  display: block;
}
.dd-right { min-width: 0; }
.dd-headline { margin: 0; }

/* .mode-hint: the aside-scoped rule (section 5, above) only sets
   margin-left/font-size/color — it never touched these six properties,
   so they were never "dead" despite living in the same now-removed
   inline block as the genuinely-superseded .simple-card/.mode-btn
   rules. Confirmed via rendered-text-width regression during Stage 1
   verification (letter-spacing/font-weight measurably change the
   rendered width of "N key inputs" / "Full control"). */
.mode-hint {
  font-weight: 500;
  letter-spacing: 0.03em;
  font-family: inherit;
  white-space: nowrap;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}

.form-section-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #6b8c7d;
  margin: 0.9rem 0 0.35rem;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid #d8e8e0;
}
.partner-phase-note {
  margin-top: 0.75rem;
  padding: 0.5rem 0.65rem;
  background: #f4fbf7;
  border-radius: 6px;
  border: 1px solid #c8ddd3;
}
.phase-row {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: #3d5c50;
  margin-bottom: 0.3rem;
  line-height: 1.4;
}
.phase-row:last-child { margin-bottom: 0; }
.phase-tag {
  flex-shrink: 0;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.15rem 0.45rem;
  border-radius: 3px;
  white-space: nowrap;
  margin-top: 0.05rem;
}
.phase-tag--1  { background: #dff0e8; color: #1a6b4a; }
.phase-tag--2  { background: #dbeeff; color: #1a4f8a; }
.phase-tag--au { background: #f0e8ff; color: #5b2d8a; }

/* ═══════════════════════════════════════════════════════════════════════════
   ONE-OFF EVENT MARKERS (wealth chart) — keyboard-focusable DOM overlay
   The pins themselves are painted on the canvas by ooMarkersPlugin
   (js/calc-charts.js); this layer is the accessible <button> per cluster,
   positioned from the same chart geometry and rebuilt on every render.
   ═══════════════════════════════════════════════════════════════════════════ */
.oneoff-markers-layer {
  position: absolute;
  pointer-events: none;   /* only the buttons are interactive */
  z-index: 4;
}
.oneoff-marker {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 30px;            /* tap target ≥ 24px; visible pin art is ~18–22px */
  height: 34px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
  border-radius: 6px;
}
.oneoff-marker:focus-visible {
  outline: 2px solid #1a6b4a;
  outline-offset: 1px;
  box-shadow: 0 0 0 4px rgba(36, 120, 87, 0.22);
}
/* Popover — same content as the canvas tooltip. Shown when the button is
   hovered, focused, or activated (aria-expanded="true"). */
.oneoff-popover {
  position: absolute;
  left: 50%;
  top: calc(100% + 3px);
  transform: translateX(-50%);
  min-width: 172px;
  max-width: 244px;
  padding: 8px 10px;
  border-radius: 8px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 6px 20px rgba(15, 28, 22, 0.16);
  font-size: 0.75rem;
  line-height: 1.45;
  color: #1c2b2a;
  text-align: left;
  white-space: normal;
  z-index: 10;
  display: none;
}
.oneoff-marker:hover .oneoff-popover,
.oneoff-marker:focus-visible .oneoff-popover,
.oneoff-marker[aria-expanded="true"] .oneoff-popover {
  display: block;
}
.oneoff-popover h6 {
  margin: 0 0 4px;
  font-size: 0.72rem;
  font-weight: 700;
  color: #3d6b52;
}
.oneoff-popover ul { margin: 0; padding: 0; list-style: none; }
.oneoff-popover li { margin: 2px 0; }
.oneoff-popover .oo-in   { color: #1a6b4a; font-weight: 600; }
.oneoff-popover .oo-out  { color: #99552c; font-weight: 600; }
.oneoff-popover .oo-age  { color: #6b7c79; }
.oneoff-popover .oo-warn { color: #a13b2b; font-weight: 600; }

@media (max-width: 640px) {
  .oneoff-marker { width: 34px; height: 34px; }  /* fatter tap target on touch */
  .oneoff-popover { font-size: 0.72rem; min-width: 160px; }
}