/* ========================================================================
   DEPLOY PATH: /css/retirement.a008ff52.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;
  --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);
}

/* ═══════════════════════════════════════════════════════════════════════════
   2. MAIN AREA — PAGE HEADER & SECTION TITLES
   ═══════════════════════════════════════════════════════════════════════════ */
.page-head h1 {
  font-size: clamp(1.35rem, 2.5vw, 1.75rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #0f1c16;
  line-height: 1.2;
}
.page-head .sub {
  font-size: 0.925rem;
  color: #7a948a;
  margin-top: 0.35rem;
  line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════════════════════
   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: #7a948a;
  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: #7a948a;
}
.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: #7a948a;
  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: #7a948a;
  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: #7a948a;
  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: #7a948a;
  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: #7a948a;
  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: #7a948a;
}
.mc-sigma-source {
  margin: 0.4rem 0 0;
  font-size: 0.72rem;
  font-style: italic;
  color: #7a948a;
}
.mc-footnote {
  font-size: 0.72rem;
  color: #7a948a;
  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: #7a948a;
  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: var(--green); }
.tbl-dot--gap     { background: var(--red); }
.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: #7a948a;
  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: #7a948a;
  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 */


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

/* ── 3. Page header — tighten the two-column layout ─────────────────────  */
.page-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  align-items: start;
  margin-bottom: 1.25rem;
}
@container calc-main (max-width: 800px) {
  .page-head { grid-template-columns: 1fr; }
}

/* ── 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: #7a948a;
  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:#7a948a;
  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-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-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;
}

/* ── Embed mode (?embed=1) chrome-strip + attribution bar — moved to
   css/tepuy.css (shared: mortgage.html and offset_vs_shares.html use the
   same navbar-placeholder/.page-head/.calc-explainer/.ts-footer selectors,
   so keeping one copy avoids drift). ── */

/* 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 header: side by side on wide viewports. No !important needed —
   this file's own unconditional .page-head rule (section 3, above) has
   none either, so normal source-order cascade already wins here. */
@media (min-width: 800px) {
  .page-head {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2rem;
    align-items: start;
  }
}

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

/* Embed-mode chrome-stripping for the renamed explainer section (2026-08
   Stage 3): the old .calc-explainer section (converted to .edu-section
   for the shared Learn & Reference structure) used to be hidden in embed
   mode by tepuy.css's shared html.embed-mode rule, which still lists
   .calc-explainer for mortgage.html/offset_vs_shares.html and can't be
   repointed without affecting them. Small page-specific replacement here
   instead. */
html.embed-mode .edu-section { display: none !important; }