/* ═══════════════════════════════════════════════════════════════════════════
   calculators.css — shared calculator mechanics layer
   Sits between css/tepuy.css (site-wide) and each calculator's own
   page-specific stylesheet. First occupant: the Results Tab System
   ("rtab-*"), extracted from retirement.html's inline <style id="rtab-styles">
   block (2026-08 Stage 1 cleanup) — this is the literal source of the
   sitewide tab-underline pattern (see css/PvS_style.css's ".tabs/.tab"
   comment, which ported its structural values from this same block).

   !important flags from the original inline block were audited on
   extraction, not copied blindly:
   - .rtab-btn--active keeps !important on color/background/border-bottom
     because css/tepuy.css used to declare a competing !important rule for
     the same selector (color/background matched; border-bottom didn't —
     tepuy.css had 2.5px solid #1a6b4a, this file has 2px solid #1a5236).
     That competing rule (and the .rtab-bar/.rtab-btn/.rtab-panel base
     rules alongside it) has since been deleted from tepuy.css as dead
     weight — this file's own !important is kept regardless, since
     nothing about its correctness depended on tepuy.css's copy existing.
   - Every other rule below had zero competing declaration anywhere in the
     codebase — this claim was WRONG when first written (2026-08
     consolidation audit found tepuy.css silently shadowing .rtab-bar/
     .rtab-btn/.rtab-panel's base padding/font-size/background with
     different values, cascade-order dependent, undetected until a
     later audit); tepuy.css's copies are now deleted, so the claim is
     true going forward.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Shared typography — root scale + insight/KPI card text ──────────────
   Added 2026-08 (calculators.css consolidation audit). Both retirement.html
   (.insight-label/.insight-value, tepuy.css) and property_vs_shares.html
   (.kpi-label/.kpi-value, PvS_style.css) had their own independent copies
   of this exact sizing — declared identically by coincidence, not by
   sharing a source, which is exactly how they drifted: PvS_style.css
   picked up a stray duplicate html{font-size} override AND a font-size
   "floor" rule that accidentally shrank .kpi-label below its own declared
   size, and nothing caught it because there was no single shared
   declaration either page's markup was actually depending on. This block
   is now that shared declaration — colors, margins, and card box-model
   (padding/border/shadow/hover) stay page-specific in each stylesheet
   (genuinely different per page — PvS's property/shares/gold value
   coloring is load-bearing, retirement's isn't), only text sizing moved. */
html { font-size: 16px; }

.insight-label,
.kpi-label {
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .4px;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.insight-value,
.kpi-value {
  font-size: 1.5rem;
  font-weight: 700;
}

/* scroll-margin-top: Retirement's own calc-init.js calls
   `.results-tabs-wrap.scrollIntoView({block:'start'})` after Calculate
   on narrow screens. Without this, that lands the wrap flush with
   viewport y:0 — directly behind the fixed navbar (tepuy.css's
   .navbar, position:fixed, ~64px tall) — since scrollIntoView has no
   built-in awareness of fixed headers. Confirmed as a REAL bug (not
   theoretical) on property_vs_shares.html's equivalent
   #results_content, via Playwright WebKit + a real calc-engine-driven
   render: the results rendered partially hidden under the navbar
   immediately after the first Run Comparison — see PvS_style.css's own
   #results_content{scroll-margin-top} comment for the full repro.
   Mortgage/Offset vs Shares/LMI don't currently call scrollIntoView on
   their own .results-tabs-wrap, so this is a no-op there today — but
   it's the shared file precisely so a future calculator adding that
   same "scroll to results on Calculate" convenience doesn't reintroduce
   the same bug. 80px matches --stick-top, tepuy.css's own canonical
   navbar-clearance value (used for the sticky sidebar's own top
   offset), not a new number invented for this. */
.results-tabs-wrap {
  background: #ffffff;
  border: 1px solid #dce8e1;
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 1.25rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  scroll-margin-top: 80px;
}
.rtab-bar {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0.55rem 0.75rem 0;
  background: #f7faf8;
  border-bottom: 1px solid #e3ede8;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.rtab-bar::-webkit-scrollbar { display: none; }
.rtab-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.35rem 0.85rem 0.4rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  /* #7a948a measured 3.11:1 on the tab strip and 3.27:1 on white — below
     the 4.5:1 AA minimum for text this size. #4a655a is the same green-grey
     family and was already validated at 6.23:1 in #185. */
  color: #4a655a;
  background: transparent;
  border: none;
  border-radius: 6px 6px 0 0;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s, background 0.15s;
  position: relative;
  bottom: -1px;
  border-bottom: 2px solid transparent;
  font-family: inherit;
}
.rtab-btn:hover:not(:disabled) { color: #1a5236; background: #eef5f1; }
.rtab-btn--active {
  color: #1a5236 !important;
  background: #ffffff !important;
  border-bottom: 2px solid #1a5236 !important;
}
.rtab-btn--soon { opacity: 0.5; }
.rtab-btn:disabled { cursor: default; }
.rtab-soon {
  font-size: 0.58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: #e8f5ee;
  color: #3d7a5a;
  padding: 0.08rem 0.3rem;
  border-radius: 3px;
}
.rtab-panel { display: block; padding: 1rem 1.25rem 1.25rem; }
.rtab-panel--hidden { display: none; }
.rtab-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
}
.rtab-insights { margin-top: 0.75rem; }
.rtab-coming-soon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 3rem 1rem;
  text-align: center;
  color: #9aada6;
}
.rtab-coming-soon p { font-size: 1rem; font-weight: 600; color: #3d5248; margin: 0; }
.rtab-coming-soon span { font-size: 0.8rem; max-width: 360px; line-height: 1.5; }
#rtab-montecarlo { padding: 0.75rem; }
#rtab-montecarlo .dd-panel,
#rtab-montecarlo .ttr-panel,
#rtab-montecarlo .mc-panel,
#rtab-montecarlo .gap-insights-panel { margin-bottom: 0.65rem; }
#rtab-yearbyyear .ret-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
[data-pro-locked="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  position: relative;
}
[data-pro-locked="true"]::after {
  content: " 🔒";
  font-size: 0.7em;
  opacity: 0.8;
}
[data-pro-locked="true"] {
  pointer-events: auto;
}
.ins-caps-title {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #3d5248;
  margin: 0.5rem 0 0.3rem;
}
.ins-alert {
  margin-top: 0.75rem;
  padding: 0.65rem 0.9rem;
  border-radius: 8px;
  font-size: 0.84rem;
  line-height: 1.55;
  border-left: 3px solid transparent;
}
.ins-alert--warn {
  background: #fffbeb;
  border-color: #f59e0b;
  color: #78350f;
}
.ins-alert--info {
  background: #eff6ff;
  border-color: #3b82f6;
  color: #1e3a5f;
}
.ins-alert b { font-weight: 700; }
.insight-card--mc {
  position: relative;
  background: #f4fbf7;
  border: 1px solid #b3d9c4;
  cursor: pointer;
}
.insight-card--mc:hover { border-color: #3db07e; box-shadow: 0 0 0 3px rgba(61,176,126,0.12); }
.insight-mc-ring {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0.25rem auto 0.3rem;
  width: 52px;
  height: 52px;
}
.ins_mcPct {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: #0f1c16;
  font-variant-numeric: tabular-nums;
}
.ins-risk-badge {
  display: inline-block;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 0.15rem 0.5rem;
  border-radius: 20px;
  background: #e8f0eb;
  color: #9aada6;
  transition: background 0.3s, color 0.3s;
}
.ins-risk-badge--strong   { background: #e6f5ed; color: #1a6b4a; }
.ins-risk-badge--moderate { background: #fef3cd; color: #92400e; }
.ins-risk-badge--atrisk   { background: #fff0e6; color: #c05000; }
.ins-risk-badge--highrisk { background: #fde8e8; color: #b91c1c; }

/* ═══════════════════════════════════════════════════════════════════════════
   PvS-sourced standards (2026-08 Stage 2) — extracted from css/PvS_style.css,
   which stays loaded on property_vs_shares.html and still owns the design
   tokens (--gold, --text-secondary, --bg-surface, --radius-*, --shadow-*,
   --transition, etc.) these rules reference via var(). That's fine — custom
   property resolution isn't file-load-order-dependent, it resolves off the
   cascaded value at the point of use regardless of which stylesheet defines
   it. Values below are the WINNING computed values from PvS_style.css, not
   raw copies of its base rules — several selectors there carry 2-3
   scattered !important overrides layered on at different dates (see PR for
   the resolution trail); copying only the base rule would have silently
   dropped the properties those later passes actually control.

   Toggle switch and tooltip box were already single, undisputed
   definitions in PvS_style.css — copied verbatim. Everything else
   (button strip, PDF button, Learn & Reference) required consolidating
   2-3 competing/scattered declarations per selector down to one.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Toggle switch ── */
.toggle-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 5px 0;
}
.toggle-label { font-size: .72rem; color: var(--text-secondary); font-weight: 500; }
/* label.toggle (not bare .toggle) deliberately: tepuy.css has its own,
   unrelated ".toggle { background:#ccc; ... }" for a bare "<input
   class='toggle'>" control. PvS's markup puts the "toggle" class on the
   wrapping <label>, which tepuy.css's bare selector also matches — the
   extra specificity here is load-bearing, not decorative. */
label.toggle {
  position: relative; width: 40px; height: 22px; flex-shrink: 0;
  background: transparent; border-radius: 0; margin-right: 0;
}
label.toggle::after { content: none; }
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position: absolute; inset: 0;
  background: #8f8f8f;
  border-radius: 99px; cursor: pointer; transition: var(--transition);
}
.toggle-slider::before {
  content: '';
  position: absolute; width: 18px; height: 18px; left: 2px; top: 2px;
  background: #ffffff; border-radius: 50%; transition: var(--transition);
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.toggle input:checked + .toggle-slider { background: var(--gold); }
.toggle input:checked + .toggle-slider::before {
  transform: translateX(18px);
}

/* ── Tooltip box (JS-positioned, position:fixed — js/pvs-tooltip.js) ── */
.info-tip {
  display: inline-block;
  width: 14px;
  height: 14px;
  line-height: 14px;
  text-align: center;
  border-radius: 50%;
  font-size: .65rem;
  background: rgba(201,168,76,.15);
  color: var(--gold);
  cursor: help;
  position: relative;
  vertical-align: middle;
  margin-left: 2px;
}
.info-tip-popup {
  display: none;
  position: fixed;
  max-width: 260px;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  font-size: .69rem;
  line-height: 1.6;
  color: var(--text-secondary);
  z-index: 1500;
  box-shadow: var(--shadow-lg);
  white-space: normal;
  pointer-events: none;
}

/* ── Export/Print/Reset/Save/Load button strip ──
   font-family: inherit on all three <button> rules below (2026-08 full
   font audit) — NOT redundant, despite computing to the same "Inter
   Tight", ... stack body already has: browsers don't cascade a page's
   font into form controls (button/input/select/textarea) through
   normal inheritance, only through the UA stylesheet's own default
   (confirmed live: a bare unstyled <button> on this page computes to
   plain "Arial", not body's font). Every one of these rules used to
   hardcode font-family: 'Inter Tight', sans-serif — a truncated copy
   of body's actual stack — which accidentally also fixed the button
   font-inheritance gap as a side effect. The first pass of this same
   audit mistakenly treated that as pure redundant duplication (same
   pattern as the non-button fixes elsewhere in this file) and removed
   it outright, which silently regressed these buttons to the browser's
   own "Arial" default — caught by re-running the computed-style check
   after the fact, not assumed. font-family: inherit keeps the fix
   (forces the real inheritance these elements don't get by default)
   without hardcoding a second copy of body's stack to drift from. */
.btn-calculate {
  width: 100%; margin-top: 14px;
  padding: 12px;
  background: linear-gradient(135deg, var(--gold-dim), var(--gold));
  border: none; border-radius: var(--radius-md);
  color: #0d0f14;
  font-family: inherit;
  font-size: .88rem; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
  cursor: pointer; transition: var(--transition);
  box-shadow: var(--shadow-gold);
}
.btn-calculate:hover {
  background: linear-gradient(135deg, var(--gold), var(--gold-light));
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(184,146,46,.35);
}
.btn-calculate:active { transform: translateY(0); }
.btn-secondary {
  flex: 1; padding: 8px 12px;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-family: inherit;
  font-size: .72rem; font-weight: 500;
  cursor: pointer; transition: var(--transition);
}
.btn-secondary:hover { background: var(--bg-hover); border-color: var(--gold-dim); color: var(--gold); }
.btn-row { display: flex; gap: 8px; margin-top: 8px; }
.export-bar { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.btn-export {
  display: flex; align-items: center; gap: 5px;
  padding: 7px 12px;
  background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text-secondary);
  font-family: inherit;
  font-size: .68rem; font-weight: 600;
  letter-spacing: .03em; text-transform: uppercase;
  cursor: pointer; transition: var(--transition);
}
.btn-export:hover { background: var(--bg-hover); border-color: var(--gold-dim); color: var(--gold); }
.btn-scenario {
  font-size: .68rem;
  border-color: var(--border-focus);
  color: var(--gold);
}
.btn-scenario:hover {
  background: rgba(201,168,76,.08);
  border-color: var(--gold);
  color: var(--gold-light);
}
.scenario-auth-hint {
  font-size: .66rem;
  padding: 5px 8px;
  border-radius: var(--radius-sm);
  background: var(--bg-raised);
  margin-top: 4px;
  line-height: 1.5;
  animation: fadeIn .2s ease;
}
.scenario-load-dropdown {
  background: var(--bg-surface);
  border: 1px solid var(--border-focus);
  border-radius: var(--radius-md);
  margin-bottom: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-md);
  /* flex-shrink: 0 (fix-scenario-save-load-followup-bugs, 2026-08-30) — this
     is a flex item of .sidebar-inner (PvS's sidebar-scroll/footer flex
     column). A flex item with overflow other than visible gets an automatic
     minimum main-size of 0 (not its content size) per the flexbox spec, so
     under real space pressure from .sidebar-scroll's accordion content this
     collapsed to ~the header row's height, clipping .sld-list beneath it —
     Load always looked empty even though the item list was correctly in the
     DOM. flex-shrink: 0 matches the same protection .sidebar-footer already
     has in this file's own flex column, confirmed to fix the collapse. */
  flex-shrink: 0;
}
.sld-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: var(--bg-raised);
  border-bottom: 1px solid var(--border);
  font-size: .68rem;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.sld-close {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: .75rem;
  padding: 0 4px;
}
.sld-close:hover { color: var(--danger); }
.sld-list {
  list-style: none;
  padding: 4px 0;
  margin: 0;
  max-height: 200px;
  overflow-y: auto;
}
.sld-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  font-family: inherit; /* <button> — see .btn-calculate's comment above */
  padding: 7px 14px;
  font-size: .74rem;
  color: var(--text-secondary);
  cursor: pointer;
  transition: var(--transition);
}
.sld-item:hover {
  background: var(--bg-hover);
  color: var(--gold);
}
@keyframes fadeIn { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; } }
.btn-share {
  border-color: var(--gold-dim, #8a6d28) !important;
  color: var(--gold, #c9a84c) !important;
}
.btn-share:hover {
  background: rgba(201,168,76,0.08) !important;
  border-color: var(--gold, #c9a84c) !important;
}
.btn-share-export {
  border-color: var(--gold-dim, #8a6d28) !important;
  color: var(--gold, #c9a84c) !important;
}
.btn-share-export:hover {
  background: rgba(201,168,76,0.08) !important;
  border-color: var(--gold, #c9a84c) !important;
}

/* ── PDF report generation button ── */
.btn-pdf {
  width: 100%;
  padding: 9px 14px;
  /* --gold-dim is NOT consistently darker than --gold: css/PvS_style.css
     mixes it toward black, css/retirement.css sets it to #3db07e, which is
     LIGHTER than that file's #1a5236 --gold. A gradient spanning both meant
     no single label colour cleared 4.5:1 against every stop — dark text
     failed on #1a5236 (2.07:1), white failed on #3db07e (2.72:1). Using
     --gold-light keeps the gradient inside one luminance band, so --gold-on
     is valid against both stops in every file that defines these. */
  background: linear-gradient(135deg, var(--gold), var(--gold-light));
  color: var(--gold-on, #0f1118);
  /* font-family: inherit — pre-existing gap, not introduced by this
     pass: this <button> never had ANY font-family rule (moved here
     from PvS_style.css in an earlier session with the property
     apparently dropped along the way), so it was rendering in
     Chromium's bare "Arial" button default the whole time. Caught by
     re-scanning every <button> on the page after this font audit's
     other fixes, not by the original per-category checklist. */
  font-family: inherit;
  font-weight: 700;
  font-size: .78rem;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: var(--transition);
  box-shadow: 0 2px 8px rgba(201,168,76,.3);
}
.btn-pdf:hover {
  /* Was linear-gradient(--gold-light, --gold): the LIGHT stop dropped the
     --gold-on label to 2.72:1. Hovering must not invert the pairing, so the
     hover state darkens rather than lightens. */
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  filter: brightness(1.06);
  box-shadow: 0 4px 16px rgba(201,168,76,.45);
  transform: translateY(-1px);
}

/* ── "Learn & Reference" section ──
   Consolidated from 3 competing PvS_style.css passes: an original dark-
   theme-era base, a "remove the coloured sub-bg" fix, and a final
   COMPREHENSIVE CONTRAST FIX v2 light-mode pass — each !important, each
   loading later than the last, several only touching 1-2 properties
   (color-only, in most cases) rather than replacing the whole rule. Every
   value below is the one that actually renders today; deliberately
   changed values from that are marked FIX (per plan: white background,
   black font, not the previous cream tint). */
/* CANONICAL PATTERN — calculator "Learn & Reference" tabbed section.
   This is the ONE calculator-shell piece that's genuinely shared file,
   not just shared behavior mirrored across per-page stylesheets: both
   retirement.html and property_vs_shares.html load calculators.css and
   get these .edu-* rules unmodified (see the <link> order comment in
   either page's <head> — calculators.css loads last, deliberately, so
   nothing in a page's own stylesheet quietly wins a specificity tie
   against it). A future calculator with its own tabbed reference section
   should reuse this markup (.edu-section > .edu-header + .edu-tabs +
   .edu-panel*) and this CSS as-is rather than writing new tab-bar rules —
   .edu-section sits inside <main> (Retirement) / .results-panel (PvS),
   as the last child before the footer, so it inherits the main column's
   width instead of spanning the full page. */
.edu-section {
  grid-column: 1 / -1;
  background: var(--bg-surface);
  border-top: 1px solid var(--border);
  padding: 24px 32px 32px;
}
.edu-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}
.edu-header-icon { font-size: 1.1rem; }
.edu-header-title {
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--gold-text);
  letter-spacing: .02em;
}
/* A bordered "track" behind the row (was: bare border-bottom) reads as one
   connected tab bar instead of loose floating pills, and gives the active
   tab something to visibly sit "inside" of. */
.edu-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 20px;
  padding: 5px;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
/* FONT FIX (2026-08, full audit) — was font-family: 'DM Mono',
   monospace. These are tab labels ("How It Works", "Behind the Math",
   etc.), not numeric data — checked against mortgage.html's own
   Learn & Reference reference prose (its .calc-explainer h2/h3/p/li/
   strong all compute to the same "Inter Tight", ... stack as the rest
   of the page, zero monospace anywhere). Kept as font-family: inherit
   rather than dropping the declaration outright — these are <button>
   elements, and browsers don't cascade body's font into form controls
   through normal inheritance (confirmed live: a bare <button> on this
   page computes to "Arial", not body's font, same gap as
   .btn-calculate/.tab/.mode-btn elsewhere in this audit). Shared file
   — this fixes retirement.html's identical tab bar too, not just
   PvS's. */
.edu-tab {
  background: none;
  border: 1px solid transparent;
  border-radius: calc(var(--radius-md) - 3px);
  padding: 6px 14px;
  font-family: inherit;
  font-size: .8rem;
  font-weight: 500;
  color: #2c3248;
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
}
/* --gold as TEXT on white measured 4.43:1 on the PvS/macro (clay) pages —
   just under the 4.5:1 AA minimum. --gold-text is the same hue mixed toward
   ink, the fix css/teaser.css already uses for clay-on-white. */
.edu-tab:hover { color: var(--gold-text, var(--gold)); background: rgba(201,168,76,.08); }
.edu-tab.active {
  background: var(--bg-surface);
  border-color: var(--border);
  color: var(--gold-text);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
@container pvs-layout (max-width: 480px) {
  .edu-tabs .edu-tab { font-size: .72rem; padding: 4px 8px; }
}
.edu-panel { display: none; }
.edu-panel.active { display: block; }
/* Font sizes bumped 2026-08 (comfortable-reading-size fix) — the whole
   Learn & Reference panel read noticeably smaller than the rest of the
   page's body text (.winner-detail, this page's closest "normal prose"
   baseline, is .82rem; these were .68-.76rem, several steps below that).
   This is long-form explanatory prose meant to be read carefully, not
   compact UI microcopy, so it now sits a little above that baseline
   rather than well under it. */
.edu-panel h2,
.edu-panel h3,
.edu-panel h4 {
  font-size: 1rem;
  font-weight: 600;
  color: #0f1118;
  margin: 18px 0 8px;
  padding: 6px 10px;
  border-left: 3px solid var(--gold);
  border-bottom: none;
  background: #ffffff; /* FIX: was rgba(184,146,46,.08) cream tint */
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.edu-panel h2:first-child,
.edu-panel h3:first-child,
.edu-panel h4:first-child { margin-top: 0; }
.edu-panel p {
  font-size: .95rem;
  line-height: 1.65;
  color: #2c3248;
  margin-bottom: 10px;
}
.edu-panel ol, .edu-panel ul.edu-list {
  padding-left: 20px;
  margin: 0 0 10px;
}
.edu-panel ol li, .edu-panel ul.edu-list li {
  font-size: .92rem;
  line-height: 1.65;
  color: #2c3248;
  margin-bottom: 6px;
}
.edu-panel ol li strong, .edu-panel ul.edu-list li strong {
  color: var(--text-primary);
}
.edu-panel code {
  font-family: 'DM Mono', 'Courier New', monospace;
  font-size: .82rem;
  background: #e8eaf0;
  color: #1a237e;
  padding: 2px 6px;
  border-radius: 3px;
}
.edu-table { width: auto; border-collapse: collapse; font-size: .88rem; }
.edu-table td { padding: 4px 12px 4px 0; color: #1a2030; vertical-align: top; }
.edu-table td:first-child { color: var(--text-primary); font-weight: 500; min-width: 180px; }
.edu-glossary {
  column-count: 2;
  column-gap: 32px;
}
@container pvs-layout (max-width: 700px) { .edu-glossary { column-count: 1; } }
.edu-glossary dt {
  font-weight: 600;
  font-size: .9rem;
  color: var(--gold-text);
  margin-top: 10px;
}
.edu-glossary dd {
  font-size: .88rem;
  color: #2c3248;
  line-height: 1.6;
  margin: 0 0 6px 0;
  border-bottom: 1px solid var(--border);
  padding-bottom: 6px;
}
.edu-faq-item {
  border-bottom: 1px solid var(--border);
  padding: 8px 0;
}
.edu-faq-item summary {
  font-size: .95rem;
  font-weight: 600;
  color: #1a2030;
  cursor: pointer;
  list-style: none;
  padding: 2px 0;
}
.edu-faq-item summary::-webkit-details-marker { display: none; }
.edu-faq-item summary::before { content: '▶ '; font-size: .6rem; color: var(--gold); margin-right: 4px; }
.edu-faq-item[open] summary::before { content: '▼ '; }
.edu-faq-item p {
  margin: 8px 0 4px 14px;
  font-size: .9rem;
  color: #374060;
}
.edu-links-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
@container pvs-layout (max-width: 700px) { .edu-links-grid { grid-template-columns: 1fr; } }
.edu-link-list {
  list-style: none;
  padding: 0;
  margin: 6px 0;
}
.edu-link-list li {
  font-size: .73rem;
  color: var(--text-secondary);
  padding: 5px 0;
  border-bottom: 1px solid var(--border);
  line-height: 1.5;
}
.edu-link-list a {
  color: var(--gold);
  text-decoration: none;
}
.edu-link-list a:hover { text-decoration: underline; color: var(--gold-light); }

/* ── Combined trial-usage summary (Retirement Planner) ────────────────────
   Populated by TC.renderTrialUsageSummary() in js/calc-pro.js. Same palette
   as .pro-banner (tepuy.css) for visual consistency with the per-feature
   lock banners it sits above. Hidden via the `hidden` attribute when not
   applicable (signed out / Pro) — see calc-pro.js for that logic. */
.usage-summary-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  background: #f4fbf7;
  color: #093;
  padding: 0.6rem 0.9rem;
  border-radius: 8px;
  font-size: 0.82rem;
  margin-bottom: 0.75rem;
}
.usage-summary-bar strong { font-weight: 700; }
.usage-summary-bar .usage-summary-upgrade {
  color: #093;
  font-weight: 700;
  text-decoration: underline;
  white-space: nowrap;
}