/* ═══════════════════════════════════════════════════════════════════════════
   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 already declares a competing !important rule
     for the same selector (a "refinement" pass that predates this file
     and was itself only ever winning by accident against whichever inline
     block loaded last). This file must load after tepuy.css for that
     rule to keep beating tepuy's.
   - Every other rule below had zero competing declaration anywhere in the
     codebase, so !important was dropped as dead weight.
   ═══════════════════════════════════════════════════════════════════════════ */

.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);
}
.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;
  color: #7a948a;
  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-family: 'Inter Tight', sans-serif; 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 ── */
.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: 'Inter Tight', sans-serif;
  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: 'Inter Tight', sans-serif;
  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: 'Inter Tight', sans-serif;
  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);
}
.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;
  padding: 7px 14px;
  font-size: .74rem;
  color: var(--text-secondary);
  cursor: pointer;
  transition: var(--transition);
  font-family: 'Inter Tight', sans-serif;
}
.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;
  background: linear-gradient(135deg, var(--gold), var(--gold-dim));
  color: #0f1118;
  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 {
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  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). */
.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-family: 'Inter Tight', sans-serif;
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--gold-text);
  letter-spacing: .02em;
}
.edu-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 12px;
}
.edu-tab {
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 5px 14px;
  font-size: .73rem;
  font-family: 'DM Mono', monospace;
  color: #2c3248;
  cursor: pointer;
  transition: var(--transition);
}
.edu-tab:hover { border-color: var(--gold-dim); color: var(--gold); }
.edu-tab.active { border-color: var(--gold); background: rgba(201,168,76,.1); color: var(--gold-text); }
@container pvs-layout (max-width: 480px) {
  .edu-tabs .edu-tab { font-size: .65rem; padding: 4px 8px; }
}
.edu-panel { display: none; }
.edu-panel.active { display: block; }
.edu-panel h2,
.edu-panel h3,
.edu-panel h4 {
  font-size: .82rem;
  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: .76rem;
  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: .75rem;
  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: .68rem;
  background: #e8eaf0;
  color: #1a237e;
  padding: 2px 6px;
  border-radius: 3px;
}
.edu-table { width: auto; border-collapse: collapse; font-size: .74rem; }
.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: .74rem;
  color: var(--gold-text);
  margin-top: 10px;
}
.edu-glossary dd {
  font-size: .71rem;
  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: .76rem;
  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: .73rem;
  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); }