/* ========================================================================
   DEPLOY PATH: /css/retirement.f8108e96.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.
   ======================================================================== */

/* Smooth scroll for the new .explainer-jump-nav anchor links (2026-09
   long-form Learn & Reference conversion) — PvS already has this in
   PvS_style.css (page-specific there too, not global in tepuy.css), so
   scoped here to match rather than adding it site-wide for four other
   calculators that didn't ask for it. */
html { scroll-behavior: smooth; }

/* ── 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: MOVED to css/simulators.css (2026-09) ──
   This block used to alias calculators.css's generic token names (--gold,
   --text-secondary, --bg-raised, --radius-*, --shadow-*, --transition,
   --danger …) to retirement's own literal values, because calculators.css
   was written against css/PvS_style.css's :root and retirement does not
   share PvS's clay palette.

   The same aliasing was needed on lmi / offset_vs_shares / mortgage the
   moment they started loading calculators.css, so it now lives once, in
   css/simulators.css — the only shared stylesheet all five calculators
   load. The values there are exactly the ones this block declared, with the
   var(--tp-shadow-*) aliases resolved to their literals so the other four
   pages can read them.

   Deleted rather than left in place: simulators.css loads AFTER this file on
   retirement.html, so keeping this block would have made it a silent
   duplicate that renders nothing but drifts on the next edit — the repeat
   defect this repo keeps producing (see docs/OPEN-ITEMS.md on
   .ret-load-dropdown / .scenario-load-dropdown and on .rtab-panel--hidden).
   --tp-space-*, --tp-radius-* and --tp-shadow-* above stay here: they are
   retirement's own scale, referenced only by this file.

   --text-muted USED to stay here too, at #9aada6, because that value could
   not be shared without propagating a failure. It now comes from the shared
   block in css/simulators.css at a value that clears AA, so the fork is
   gone. Measured on this page: --text-muted had ZERO failing consumers even
   at #9aada6 — every one of retirement's 14 failures was the same hex
   hardcoded into a rule below, not read through this token. */

/* 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 now comes from css/tepuy.css, once, at 0.8125rem.
   This file's byte-identical override was one of four. */
aside .form-row input[type="text"],
aside .form-row input[type="number"],
aside .form-row select,
aside .form-row textarea {
  background: #f8faf9;
  color: #0f1c16;
  font-family: inherit;
}
/* Size and border for .form-row fields OUTSIDE .card-content only — in
   practice the country select above the mode toggle. Every field inside
   .card-content (all of Advanced mode) takes these from css/tepuy.css's
   shared block, which already outranked this rule there; it used to state
   them for every .form-row field anyway, a second source that never
   rendered (test/sidebar_input_single_source_ablation.test.js). The
   :not(.card-content *) arm raises specificity (0-1-2 -> 0-2-2 for the
   select) without changing what it wins against on the country select. */
aside .form-row:not(.card-content *) input[type="text"],
aside .form-row:not(.card-content *) input[type="number"],
aside .form-row:not(.card-content *) select,
aside .form-row:not(.card-content *) textarea {
  padding: 4px 7px;
  font-size: 0.875rem;
  border: 1px solid var(--sidebar-input-border);
}
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;
}
/* .repeater-card added alongside .form-row (2026-09): the One-off Events row
   is now a .repeater-card and no longer carries .form-row, so the original
   selector stopped matching and the select fell back to the bare native
   control this rule exists to replace. Both branches kept — .form-row so the
   rule still applies anywhere a bt-kind select sits in the old shape. */
aside .form-row select.bt-kind,
aside .repeater-card 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 var(--sidebar-input-border);
  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,
aside .repeater-card select.bt-kind:focus,
aside .repeater-card 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; }

/* ── 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);
}
.mc-vars-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
  margin-bottom: 0.6rem;
}
/* calc-layout, not calc-main: <main> gets display:contents at every
   stacked width below 800px (tepuy.css's .page-head comment, section 5b;
   also section 11 above, "these four rules...key off calc-layout's tier
   threshold rather than calc-sidebar/calc-main" for the same reason),
   which strips it of its own box — a @container calc-main query naming a
   broken container simply never matches, silently, so this and the other
   @container calc-main rules below never collapsed on a phone. Same
   bug/fix as lmi-polish.css's .lmi-kpi-strip and mortgage-polish.css's
   .mort-insights-strip; see either for the full mechanism. Every
   @container calc-main rule in this file was checked and converted;
   the one exception (a min-width rule, not a collapse) is called out
   at its own site further down. */
@container calc-layout (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; }

/* ═══════════════════════════════════════════════════════════════════════════
   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. Its !important @container replacement further down
   went too, in the css-convergence-final dead-CSS sweep: no markup has used
   .simple-row/.simple-input since the .simple-q-* Simple card replaced them. */

/* ═══════════════════════════════════════════════════════════════════════════
   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;
}

/* ── 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.

   THE MODE-TOGGLE RULES THAT LIVED HERE ARE GONE. They drew retirement's own
   two-tone segmented control — square-ended green buttons, .mode-btn--active
   in #1a5236 with white text, a 0.72rem hint — entirely separately from the
   gold pill Property vs Shares drew. Two implementations of the same control,
   with nothing stopping them drifting further apart.

   Both pages now take the pill from the shared component in
   css/simulators.css (search: SHARED BASIC/ADVANCED MODE TOGGLE). Retirement
   keeps its own label text ("Simple"/"Advanced"), its own hint copy and its
   own JS, including the caption swap to "Full control"; only the chrome is
   shared.

   Do not reinstate a local .mode-btn override here. Everything in this block
   was `!important` and placed last, so anything added back silently wins over
   the shared component and the two drift again — which is exactly how they
   got here. */

/* 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;
}

/* DEAD-CSS SWEEP (css-convergence-final): the rules for .simple-row,
   .simple-label, .simple-hint, .simple-input (:focus, spin buttons),
   .simple-prefix-wrap (:focus-within), .simple-prefix,
   .simple-input--prefixed (:focus) and .simple-divider, plus the
   @container calc-sidebar block that stacked .simple-row/.simple-input, are
   gone. Dead on both counts: no HTML or JS in the repo produces any of
   those classes (whole-token grep, incl. classList/innerHTML/template
   strings; no "simple-" class is built dynamically), and none matched a
   single element in 50 rendered states — Simple and Advanced; 1440, 390
   and 320px (the container query fires at 390 and 320); after Calculate;
   partner on with every repeater populated; warning boxes; invalid input;
   Simple validation error. Retirement renders 0px different in all of
   them. They were an older Simple-card layout (.simple-row/.simple-input)
   that the .simple-q-* markup replaced; the markup went, these stayed. */

/* 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; }

/* Advanced-only events notice (js/sidebar-mode.js refreshAdvancedOnlyNotice) */
body.calc .calc-aside .simple-card .simple-adv-only-notice:not([hidden]),
aside .simple-card .simple-adv-only-notice:not([hidden]) { display: block !important; margin: 0 0 0.6rem !important; padding: 0.5rem 0.65rem !important; font-size: 0.8rem !important; line-height: 1.4 !important; color: var(--text-secondary) !important; background: var(--bg-raised) !important; border: 1px solid var(--border) !important; border-radius: var(--radius-md) !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: var(--text-muted) !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; }

/* 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: var(--text-muted);
  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;
}
/* calc-layout, not calc-main — see .mc-vars-grid's comment above. */
@container calc-layout (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-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: var(--text-muted);
}

/* 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-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: var(--text-muted);
  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;
}
/* calc-layout, not calc-main — see .mc-vars-grid's comment above. */
@container calc-layout (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: var(--text-muted);
}
.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: var(--text-muted);
  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;
}
/* calc-layout, not calc-main — see .mc-vars-grid's comment above. */
@container calc-layout (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-layout (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: var(--text-muted);
  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: var(--text-muted);
  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;
}
/* #55685F, not the #6b7c79 these five carried. All five resolve against a
   WHITE background at 9.9-12px, weight 400-600 — measured, with the ancestor
   chain walked past transparency — which is 4.39:1, under the 4.5:1 small
   text needs. #55685F is 5.95:1.

   They are all Monte Carlo / one-off-marker text, and #207's axe run reported
   the five calculators at zero colour-contrast violations because NONE OF
   THEM IS IN THE DOM AT SCAN TIME: .hist-label, .mc-iqr-vals, .mc-iqr-note
   and .mc-stress-note only exist after a Monte Carlo run behind
   TC.isFeatureUnlocked('montecarlo'), and .oo-age only inside a marker
   popover. An axe pass over the default page is blind to all five. */
.hist-label { font-size: 0.72rem; color: #55685F; }
.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: var(--text-muted); 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;
}

/* ══════════════════════════════════════════════════════════════════
   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:var(--text-muted); 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:var(--text-muted); 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-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:var(--text-muted);
}
.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:var(--text-muted); line-height:1.3; }

.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:var(--text-muted); line-height:1.5;
  margin:0.45rem 0 0; font-style:italic;
}

/* calc-layout, not calc-main — see .mc-vars-grid's comment above. */
@container calc-layout (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);
}
/* calc-layout, not calc-main — see .mc-vars-grid's comment above. */
@container calc-layout (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: var(--text-muted);
  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: #55685F;
  font-variant-numeric: tabular-nums;
}
.mc-iqr-p50 {
  font-weight: 800;
  color: #1a5236;
}
.mc-iqr-note {
  font-size: 0.72rem;
  color: #55685F;
  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: var(--text-muted);
  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: var(--text-muted);
  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: var(--text-muted);
}
.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: #55685F;
  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;
}
/* calc-layout, not calc-main — see .mc-vars-grid's comment above. */
@container calc-layout (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;
}

/* Was left as @container calc-main deliberately (UI-1 changed that: see the
   note after this one) — this is the one exception to
   the calc-layout swap every other @container calc-main rule in this file
   got (see .mc-vars-grid's comment near the top). Two independent reasons:

   1. Shape: this is a min-width "expand to 5 columns once there's room"
      rule, not a max-width "collapse once cramped" rule. The other rules
      are safe to move to calc-layout because collapsing at a given
      calc-layout width never collapses LESS than the equivalent
      calc-main width would have (main's own rendered width is always
      <= calc-layout's, so a calc-layout threshold fires at least as
      early). Expanding is the opposite risk: at just-above-800px overall
      layout width, main's own rendered width is far narrower than 700px
      (measured: 408px at 800px, 708px only reached around 1100px) because
      the sidebar is taking space in that tier. A bare mechanical swap
      here would force 5 narrow columns onto a ~400-650px-wide main
      column — real overflow, not a fix.
   2. It is already dead code regardless, confirmed by both the comment on
      the unconditional .insights rule further down in this file ("the two
      other-!important .insights declarations already in this file...
      were themselves already dead...and remain dead now, just shadowed by
      this rule instead") and by direct execution: measured with
      Playwright at 650-1400px, in EVERY variant tried (calc-main as
      written, and experimentally swapped to calc-layout), .insights's
      computed grid-template-columns never changes from the later,
      unconditional, equal-specificity !important rule's
      repeat(auto-fit, minmax(160px, 1fr)) — this rule never wins the
      cascade at any width, so its container mechanism cannot matter
      either way. Left untouched rather than "fixed" for consistency,
      since fixing dead code's mechanism is not a fix a reader could ever
      observe and risks looking like an endorsement of code the file's
      own history already flagged as inert. */
/* UI-1 (S15 audit D3): now calc-layout after all. <main> is display:contents
   below 800px, so calc-main named no container there and the query could not
   match at all; calc-layout (body.calc) always has a box. The width is mapped,
   not swapped, so the rule keeps the meaning reason 1 above asks for: stacked
   (<= 799.98px), main's children run the body width less 32px (measured: 700
   -> 668), so 700px of content is 732px of body; side by side, main's content
   box is the body less 457px (800 -> 343, 1157 -> 700, 1280 -> 823), so 700px
   of main is 1157px of body. Still shadowed by the unconditional rule below,
   so nothing renders differently (measured at 700-1400px). */
@container calc-layout (732px <= width <= 799.98px) or (width >= 1157px) {
  .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 lived here, setting six properties the shared component did not
   set. Not colliding is not the same as converging: measured side by side,
   this rule rendered retirement's caption at font-weight 500 / letter-spacing
   0.2976px against Property vs Shares' 400 / normal, inside a section the two
   pages are supposed to draw identically. It was the last per-page
   declaration on the shared toggle.

   Removed. line-height:1.4 moved into the shared .mode-hint in
   css/simulators.css so both pages get it; white-space:nowrap was already
   there; font-family:inherit and -webkit-font-smoothing were no-ops (nothing
   else in this file sets either). Do not reinstate. */

.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: #55685F; }
.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; }
}