/* ========================================================================
   DEPLOY PATH: /css/PvS_style.7312567b.css
   Tepuy Solutions — Property vs Shares calculator — complete styles (dark/light theme)
   Version: 2026-03-31 (headers added)
   Notes: Self-contained. Only load on property_vs_shares.html.
   ======================================================================== */

@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=DM+Mono:wght@300;400;500&family=DM+Sans:wght@300;400;500;600&family=Inter+Tight:wght@400;600;800&display=swap');

/* ── THEME (palette redesign 2026-08) ────────────────────────
   Was a dark-by-default theme with a data-theme="light" toggle
   variant; the toggle and its dark base are removed entirely (no page
   keeps a dark surface any longer, per the site-wide sweep). What was
   the light-theme token block is now the only block, values unchanged
   from what already shipped and was WCAG-AA-verified as this page's
   light mode. --bg-base is repointed to the site's --bone (was a
   self-contained cool-grey #f4f5f8, unrelated to the rest of the site's
   palette); everything else keeps its existing, already-tuned value.
   Retirement-parity pass (2026-08): repointed again, this time to --bg
   (#f7fbfc) — retirement.html's own main-content background (tepuy.css
   "body { background: var(--bg) }"), replacing the --bone cream/beige
   tint so PvS's page background literally matches the accepted
   reference template instead of carrying its own accent. */
:root {
  --bg-base:        var(--bg, #f7fbfc);
  --bg-surface:     #ffffff;
  --bg-raised:      #f0f1f5;
  --bg-input:       #f7f8fb;
  --bg-hover:       #eaecf2;
  /* Retirement-parity pass (2026-08): repointed to retirement.html's own
     --border (tepuy.css, #e1ecf1) — even lighter than PvS's prior
     #d8dce8 (now ~1.20:1 on white, was 1.37:1). Doesn't change the
     accessibility picture: --border was never the boundary color WCAG
     1.4.11 applies to on this page (see --border-strong below), and
     retirement.html treats its own --border the same way — a soft
     decorative divider, not a required-contrast edge. */
  --border:         #e1ecf1;
  /* Structural boundary color — for .section/input/select borders
     specifically, the component-boundary cases WCAG 1.4.11 (non-text
     contrast, 3:1) actually applies to. Same blue-gray hue family as
     --border, just with presence: 3.40:1 on white, 3.20:1 against
     --bg-input (used on the toggle track). Design audit, 2026-08. */
  --border-strong:  #828ba3;
  --border-focus:   var(--clay, #b8922e);
  --text-primary:   #0b1f16;
  --text-secondary: #2c3248;
  --text-muted:     #505870;
  --shadow-sm:      0 1px 4px rgba(0,0,0,.08);
  --shadow-md:      0 4px 20px rgba(0,0,0,.10);
  --shadow-lg:      0 8px 40px rgba(0,0,0,.12);
  --shadow-gold:    0 0 24px rgba(184,146,46,.15);

  /* Was PvS's own amber/gold accent (#c9a84c), independent of the rest
     of the site. Remapped to --clay — the same "one accent, used
     sparingly" role --clay already plays everywhere else, and the same
     move for_professionals.html's rebrand made for its own --pro-gold.
     --gold-light/-dim keep the existing lighter/darker relationship,
     recomputed from --clay instead of the old literal amber. */
  --gold:       var(--clay, #BE6A3E);
  --gold-light: color-mix(in srgb, var(--clay, #BE6A3E) 70%, white);
  --gold-dim:   color-mix(in srgb, var(--clay, #BE6A3E) 70%, black);
  /* AA-safe darkened companion for --gold used as *text* (the raw
     --gold hex doesn't clear 4.5:1 on white) — same pattern as
     --dsc-teal-text below, applied wherever "gold" text appeared. */
  --gold-text:  color-mix(in srgb, var(--clay, #BE6A3E) 85%, black);

  --property:     #4e8ef7;
  --property-dim: #c8deff;
  --shares:       #4ecb71;
  --shares-dim:   #c5f0d4;

  /* Decision Summary Card's own teal/gold accent pair (distinct from
     the --property/--shares blue/green used elsewhere on the page) —
     tokenized per the same approach drafted on an abandoned branch
     (claude/pvs-dsc-light-mode-cleanup) that never merged: raw #3dd4dc
     literals scattered through the DSC block, plus a light-mode pass
     that had drifted to recoloring the "property" winner badge blue
     instead of teal (a bug — it no longer matched the badge's own
     .teal/.gold classes elsewhere in the same card). One shared token,
     one AA-safe text variant, both themes read from the same value now
     that there's only one theme. */
  --dsc-teal:      #3dd4dc;
  --dsc-teal-text: #006b72;

  /* Retirement-parity pass (2026-08): --success was declared three times
     in this same :root block (this one, plus #2d8a4e near the top and
     #4ecb71 above — both now dead code, silently overridden by source
     order; only ever mattered because var(--success) has exactly one
     consumer, .td-pos, and all three greens were close enough in hue
     that the bug was invisible). Collapsed to one declaration, ported to
     retirement.html's own --success (tepuy.css, #28a745). --warning and
     --danger also ported to retirement's exact values (#ffaf1a /
     #e03434, tepuy.css) — --danger as text on white actually improves
     (3.75:1 -> 4.46:1, was already borderline-failing AA normal-text
     contrast). --warning as raw text (.section-header-exit/.td-exit/
     .td-exit-highlight) was already failing WCAG AA before this change
     (old #f5a623: ~2.0:1) and remains failing after (new #ffaf1a:
     ~1.8:1) — porting the token doesn't fix or meaningfully worsen a
     pre-existing text-contrast bug in those specific consumers; flagged
     as a follow-up, not fixed here (out of scope for a token port). */
  --success: #28a745;
  --warning: #ffaf1a;
  --danger:  #e03434;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --transition: all .18s cubic-bezier(.4,0,.2,1);
}

/* ── RESET ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 15px; scroll-behavior: smooth; }
/* Retirement-parity pass (2026-08): body was self-importing DM Sans as
   this page's own base font, independent of the rest of the rebranded
   site — the root cause of KPI labels/values-surrounding text, buttons,
   and headline accents all reading in a different typeface than
   retirement.html (which inherits 'Inter Tight' from tepuy.css's body
   rule, unopposed). Repointed to the exact same stack tepuy.css uses,
   so every element on this page that relied on inheriting body's font
   (not just .kpi-label, but any other unstyled text) now matches
   retirement.html without needing a per-selector override — the same
   thing retirement.html itself does. DM Mono (numeric/tabular figures)
   and DM Serif Display (headline accents, handled by explicit
   overrides below) are unaffected by this change. */
body {
  font-family: 'Inter Tight', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial,
               "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  background: var(--bg-base);
  color: var(--text-primary);
  min-height: 100vh;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  transition: background .25s, color .25s;
  /* tepuy.css's own "body" rule (now loaded, see the <link> order in
     property_vs_shares.html) sets padding-top: 64px to compensate for its
     navbar being position:fixed. PvS's navbar is position:sticky (already
     reserves its own space in normal flow), so that compensation isn't
     needed here and would otherwise leak through as an unwanted top gap
     — this rule doesn't set padding-top itself, so tepuy.css's value would
     win uncontested without this explicit override. */
  padding-top: 0;
}
/* ── SCROLLBAR ───────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg-base); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold-dim); }

/* ── LAYOUT ──────────────────────────────────────────────── */
.app-shell { display: grid; grid-template-rows: auto 1fr; min-height: 100vh; }
/* Line 96 - Replace existing line */
.main-content { display: grid; grid-template-columns: 360px 1fr; min-height: calc(100vh - 60px); }

/* Container-query scaffolding — PvS is a standalone page (no tepuy.css), so
   this mirrors that shared setup independently instead of reusing it.
   body is the container (not .app-shell/.main-content themselves): a
   container can't restyle its own layout-affecting properties (display,
   grid-template-columns) based on a query of itself, so the tier queries
   below need .main-content to be a descendant of the query container. body's
   inline-size equals the iframe's own rendered width when embedded. */
body {
  container-type: inline-size;
  container-name: pvs-layout;
}
.sidebar {
  container-type: inline-size;
  container-name: pvs-sidebar;
}
.results-panel {
  container-type: inline-size;
  container-name: pvs-main;
}

/* ── Embed mode (?embed=1) — strip site chrome, keep compliance content ──
   PvS-only copy of the shared html.embed-mode pattern used by the other
   three calculators (see css/tepuy.css) — PvS doesn't load tepuy.css.
   .calc-header doubles as this page's title bar AND its badge/theme-toggle
   row (there's no separate site navbar title here), so it's stripped
   alongside the hero blurbs, same as the other calculators' page-head.
   #disclaimerFooter and the CGT-reform note appended to it are NEVER
   targeted here — they must survive chrome-stripping. */
html.embed-mode #navbar-placeholder,
html.embed-mode .calc-header,
html.embed-mode .calc-hero-mobile,
html.embed-mode .calc-hero-desktop,
html.embed-mode .edu-section {
  display: none !important;
}
/* Disclaimer must never be dismissible in embed mode (see the dismiss
   script's isEmbed check) — hide the button so it doesn't look clickable. */
html.embed-mode #disclaimerClose {
  display: none !important;
}

.tepuy-embed-attribution {
  position: sticky;
  bottom: 0;
  z-index: 50;
  font-size: 0.7rem;
  text-align: center;
  padding: 4px 8px;
  background: var(--bg-surface, #fff);
  border-top: 1px solid var(--border, #d8e0d9);
  color: var(--text-muted, #667);
}
.tepuy-embed-attribution a {
  color: var(--gold, #1a6b4a);
  font-weight: 600;
  text-decoration: none;
}
.tepuy-embed-attribution a:hover { text-decoration: underline; }

/* Embed + stacked (Medium/Narrow) tier only: promote results above the
   sidebar inputs — "headline outcome above the fold before inputs" — same
   intent as the shared reorder rule in tepuy.css, but .sidebar/.results-panel
   are already the direct grid items of .main-content here, so a plain
   `order` swap is enough; no display:contents trick needed. */
@container pvs-layout (max-width: 900px) {
  html.embed-mode .main-content > .results-panel { order: 1; }
  html.embed-mode .main-content > .sidebar { order: 2; }
}


/* ── HEADER ──────────────────────────────────────────────── */
/* This bare `header` selector matches both <header class="navbar"> and
   <header class="calc-header"> (property_vs_shares.html's own sub-header).
   .calc-header redeclares its own background/border-bottom/box-shadow
   independently below, so it's unaffected by this rule either way — but
   the "TEPUY NAVBAR" section further down is the actively-maintained
   source of truth for .navbar's own background (translucent + blur), so
   the flat `background: var(--bg-surface)` that used to live here was
   removed: even though .navbar's higher-specificity rule should already
   win on paper, a bare-element fallback opaque fill sitting right next to
   the real rule is exactly the kind of "competing declaration" that's
   easy to accidentally reintroduce or have win in an unexpected order —
   removed rather than left as a latent trap. position/z-index/height/etc.
   stay, since .calc-header still relies on the sticky positioning here. */
header {
  height: 60px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 24px;
  gap: 12px;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: var(--shadow-sm);
}

.logo {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 600;
  font-size: 1.2rem;
  color: var(--gold);
  white-space: nowrap;
}
.logo span {
  color: var(--text-muted);
  font-size: .78rem;
  font-family: 'Inter Tight', sans-serif;
  font-weight: 400;
  margin-left: 10px;
  letter-spacing: .01em;
}

.header-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.badge {
  font-family: 'DM Mono', monospace;
  font-size: .6rem;
  font-weight: 500;
  padding: 2px 7px;
  border-radius: 99px;
  border: 1px solid;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.badge-gold  { color: var(--gold);     border-color: var(--gold-dim);    background: rgba(201,168,76,.07); }
.badge-blue  { color: var(--property); border-color: var(--property-dim);background: rgba(78,142,247,.07); }
.badge-green { color: var(--shares);   border-color: var(--shares-dim);  background: rgba(78,203,113,.07); }

/* ── CALCULATOR HERO DESCRIPTION ───────────────────────────── */
.calc-hero {
  background: linear-gradient(135deg, rgba(201,168,76,.04), rgba(78,142,247,.03));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  margin-bottom: 20px;
}
.calc-hero-title {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 600;
  font-size: 1.3rem;
  color: var(--gold-light);
  margin-bottom: 8px;
  line-height: 1.3;
}
.calc-hero-desc {
  font-size: .88rem;
  color: var(--text-secondary);
  line-height: 1.7;
  max-width: 900px;
}
.calc-hero-desc strong {
  color: var(--text-primary);
  font-weight: 600;
}

/* Desktop: Show results panel version, hide mobile version */
.calc-hero-mobile {
  display: none;
}
.calc-hero-desktop {
  display: block;
}

/* Mobile: Show mobile version at top, hide desktop version in results.
   pvs-layout: .calc-hero-mobile sits at body level (before .app-shell) and
   .calc-hero-desktop sits inside .results-panel (pvs-main) — both resolve
   against pvs-layout here since @container <name> explicitly walks up to
   the nearest ancestor with that name, skipping the nearer pvs-main
   container for .calc-hero-desktop. */
@container pvs-layout (max-width: 768px) {
  .calc-hero-mobile {
    display: block;
    margin: 0;
    padding: 14px 16px;
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-top: none;
  }
  
  .calc-hero-desktop {
    display: none;
  }
  
  .calc-hero {
    padding: 14px 16px;
    margin-bottom: 16px;
  }
  
  .calc-hero-title {
    font-size: .95rem;
    margin-bottom: 6px;
  }
  .calc-hero-desc {
    font-size: .75rem;
    line-height: 1.6;
  }
}

@container pvs-layout (max-width: 480px) {
  .calc-hero-mobile {
    padding: 12px 14px;
  }
  
  .calc-hero-title {
    font-size: .88rem;
  }
  .calc-hero-desc {
    font-size: .72rem;
  }
}

/* ── THEME TOGGLE ────────────────────────────────────────── */
.theme-toggle {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 99px;
  padding: 5px 12px 5px 8px;
  transition: var(--transition);
  flex-shrink: 0;
}
.theme-toggle:hover { border-color: var(--gold-dim); }
.theme-toggle-icon { font-size: 1rem; line-height: 1; }
.theme-toggle-label {
  font-family: 'Inter Tight', system-ui, -apple-system, sans-serif;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ── SIDEBAR ─────────────────────────────────────────────── */
.sidebar {
  background: var(--bg-surface);
  border-right: 1px solid var(--border);
  overflow-y: auto;
  height: calc(100vh - 60px);
  position: sticky;
  top: 60px;
}
.sidebar-inner { padding: 16px; }

/* ── ACCORDION ───────────────────────────────────────────── */
/* Design audit, 2026-08: border strengthened to --border-strong (3.4:1 on white, was 1.37:1,
   was 1.37:1) and a soft shadow added — previously relying entirely on
   that near-invisible 1px line for definition, with zero shadow anywhere
   on the accordion.
   Retirement-parity pass (2026-08): radius and shadow re-ported to
   retirement.html's exact "aside .card" values (retirement.css) — 14px
   (--tp-radius-card, was a PvS-specific 10px) and the 2-layer resting
   shadow --tp-shadow-card. Hover previously only changed border-color;
   retirement.html's card hover is a shadow lift instead
   (--tp-shadow-card-hover, with an explicit "transform: none" since its
   own .card:hover elsewhere in retirement.css sets a transform this
   needs to cancel — kept here too for a literal port even though
   nothing in this file currently sets one). */
.section {
  margin-bottom: 5px;
  border: 1px solid #e3ede8;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(14,21,18,.07), 0 1px 3px rgba(14,21,18,.05);
  transition: border-color .15s, box-shadow .15s;
}
.section:hover { border-color: #c8ddd3; box-shadow: 0 6px 20px rgba(14,21,18,.10); transform: none; }

/* Retirement-parity pass (2026-08): a prior round matched retirement.html's
   solid-fill accordion header structurally but recolored it into PvS's own
   clay/gold family instead of literally reusing retirement's green — this
   round undoes that substitution. background/hover below are the exact
   values retirement.html's "aside .card-header" resolves to via
   var(--cardH-bg)/var(--cardH-bg-open) (tepuy.css: var(--brand, #1e6b4b) /
   var(--brand-light, #247857) — both already in scope here since
   tepuy.css loads before this file). Border above switched from
   --gold-dim to retirement's own "aside .card" border (#e3ede8, hover
   #c8ddd3) for the same reason — the whole accordion card, not just its
   header, should read as retirement's card rather than a PvS accent. */
.section-header {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 12px;
  cursor: pointer;
  background: var(--brand, #1f4c3b);
  border-radius: 8px;
  user-select: none;
  transition: var(--transition);
}
.section.open .section-header { border-radius: 8px 8px 0 0; }
.section-header:hover { background: var(--brand-light, #247857); }

.section-icon {
  width: 22px; height: 22px;
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: .85rem;
  font-weight: 500;
  flex-shrink: 0;
  font-style: normal;
  line-height: 1;
  letter-spacing: 0;
}
/* Was per-category pale rgba tints (blue/purple/orange/green/etc.),
   designed for the old light header — they'd go muddy and unreadable
   against a dark fill, so all 8 collapse to one translucent-white
   treatment on the header. The descendant selector (0,2,0) outranks the
   single-class .icon-property etc. rules (0,1,0) regardless of source
   order, so this doesn't need !important. */
.section-header .section-icon { background: rgba(255,255,255,.16); color: #ffffff; }
.icon-property   { background: rgba(78,142,247,.15); }
.icon-loan       { background: rgba(120,80,200,.15); }
.icon-investor   { background: rgba(240,160,50,.12); }
.icon-shares     { background: rgba(78,203,113,.12); }
.icon-advanced   { background: rgba(200,80,80,.12); }
.icon-mc         { background: rgba(100,180,220,.12); }
.icon-offset     { background: rgba(80,180,220,.12); }
.icon-dr         { background: rgba(240,100,180,.10); }

/* Was inheriting display:flex + margin: 1.25rem 0 .75rem from tepuy.css's
   own unrelated .section-title rule (a "Summary/Insights/KPI" heading
   elsewhere on the site — same class name, different component). This
   page's rule never reset either, so ~31px of margin that was never
   meant for this accordion leaked into every collapsed header — the
   real cause of the 69.6px measured header height, not the padding.
   margin:0 here is the actual fix; display:flex is kept (still wanted,
   for the icon/title/divider-line/chevron row) but pinned explicitly
   rather than inherited, so it can't drift again if tepuy.css's rule
   changes. Size/weight bumped for a clearer title-vs-label size gap
   (0.75rem was too close to the 0.68rem field label). Font swapped to
   Inter Tight, matching the rest of the site's UI chrome — this page
   previously self-imported DM Sans only, independent of the sweep. */
.section-title {
  display: flex;
  align-items: center;
  margin: 0;
  font-family: 'Inter Tight', sans-serif;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--text-secondary);
  flex: 1;
}
.section-chevron { color: rgba(255,255,255,.85); font-size: .65rem; transition: transform .2s; }
.section.open .section-chevron { transform: rotate(180deg); }

.section-body {
  display: none;
  padding: 0.6rem 0.9rem 0.8rem;
  border-top: 1px solid var(--border-strong);
  background: var(--bg-surface);
  animation: slideDown .15s ease;
}
.section.open .section-body { display: block; }

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── FORM CONTROLS ───────────────────────────────────────── */
.field { margin-bottom: 14px; }
.field:last-child { margin-bottom: 0; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

label {
  display: block;
  font-family: 'Inter Tight', sans-serif;
  font-size: .68rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 4px;
  letter-spacing: .03em;
  text-transform: uppercase;
}
label .hint {
  color: var(--text-muted);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  margin-left: 4px;
  font-size: .65rem;
}

.input-wrap { position: relative; display: flex; align-items: center; }
.input-prefix, .input-suffix {
  position: absolute;
  font-family: 'DM Mono', monospace;
  font-size: .72rem;
  color: var(--text-muted);
  pointer-events: none;
  z-index: 1;
}
.input-prefix { left: 9px; }
.input-suffix { right: 9px; }

input[type="number"], input[type="text"], select {
  width: 100%;
  background: var(--bg-input);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: 'DM Mono', monospace;
  font-size: .78rem;
  padding: 7px 9px;
  outline: none;
  transition: var(--transition);
  appearance: none;
}
input[type="number"]:focus, input[type="text"]:focus, select:focus {
  border-color: var(--gold);
  background: var(--bg-hover);
  box-shadow: 0 0 0 3px rgba(201,168,76,.08);
}
.has-prefix input { padding-left: 20px; }
.has-suffix input { padding-right: 26px; }

select {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%235a6070'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
  padding-right: 26px;
}
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%238890a8'/%3E%3C/svg%3E");
}

/* Range */
.range-wrap { display: flex; align-items: center; gap: 8px; }
input[type="range"] {
  flex: 1; -webkit-appearance: none;
  height: 3px; background: var(--border); border-radius: 99px; outline: none;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px; height: 14px;
  background: var(--gold); border-radius: 50%; cursor: pointer;
  box-shadow: 0 0 6px rgba(201,168,76,.35);
}
.range-val { font-family: 'DM Mono', monospace; font-size: .72rem; color: var(--gold); min-width: 36px; text-align: right; }

/* Toggle switch (row/label/slider) moved to css/calculators.css — 2026-08
   Stage 2. Its tepuy.css class-name-collision fix (label.toggle vs bare
   .toggle) traveled with it unchanged; see calculators.css for the note. */

/* Radio group */
.radio-group {
  display: flex; gap: 3px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 3px;
}
.radio-group label {
  flex: 1; text-align: center;
  padding: 4px 5px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: .66rem; font-weight: 600;
  color: var(--text-muted);
  letter-spacing: .03em; text-transform: uppercase;
  margin: 0; transition: var(--transition);
}
.radio-group input[type="radio"] { display: none; }
.radio-group input[type="radio"]:checked + label {
  background: var(--bg-raised); color: var(--gold);
  box-shadow: var(--shadow-sm);
}

/* ── CALCULATE BUTTON ────────────────────────────────────── */
/* .btn-calculate/.btn-secondary/.btn-row moved to css/calculators.css —
   2026-08 Stage 2, as part of the shared export/print/reset/save/load
   button strip. */

/* ── SUMMARY BAR ─────────────────────────────────────────── */
.summary-bar {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px;
  margin-top: 8px;
}
.summary-bar-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 2px 0;
}
.summary-bar-key { font-size: .74rem; color: var(--text-secondary); }
.summary-bar-val { font-family: 'DM Mono', monospace; font-size: .72rem; color: var(--text-secondary); }
.summary-bar-val.gold { color: var(--gold); }

/* ── RESULTS PANEL ───────────────────────────────────────── */
.results-panel { padding: 20px; overflow-y: auto; }

/* ── EMPTY STATE ─────────────────────────────────────────── */
.empty-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 100%; min-height: 400px; text-align: center; gap: 14px; color: var(--text-muted);
}
.empty-icon { font-size: 3.2rem; opacity: .18; font-weight: 200; letter-spacing: -.05em; }
.empty-title { font-family: 'Inter Tight', sans-serif; font-weight: 600; font-size: 1.35rem; color: var(--text-secondary); }
.empty-sub { font-size: .82rem; max-width: 340px; line-height: 1.75; }

/* ── WINNER BANNER ───────────────────────────────────────── */
.winner-banner {
  background: linear-gradient(135deg, rgba(201,168,76,.07), rgba(201,168,76,.02));
  border: 1px solid var(--gold-dim);
  border-radius: var(--radius-lg);
  padding: 14px 18px;
  display: flex; align-items: flex-start; gap: 14px;
  margin-bottom: 16px;
  position: relative;
  z-index: 10;
}
.winner-trophy { font-size: 1.75rem; flex-shrink: 0; }
.winner-text { flex: 1; min-width: 0; }
.winner-title { font-family: 'Inter Tight', sans-serif; font-weight: 600; font-size: 1.15rem; color: var(--gold); line-height: 1.3; word-wrap: break-word; }
.winner-detail { font-size: .82rem; color: var(--text-primary); opacity: .82; margin-top: 4px; line-height: 1.5; word-wrap: break-word; overflow-wrap: break-word; }

@container pvs-main (max-width: 768px) {
  .winner-banner {
    padding: 12px 14px;
    gap: 10px;
  }
  .winner-trophy {
    font-size: 1.4rem;
  }
  .winner-title {
    font-size: 1rem;
  }
  .winner-detail {
    font-size: .75rem;
    line-height: 1.6;
  }
}

/* ── KPI GRID ────────────────────────────────────────────── */
/* KPI simplification (2026-08): 8 cards -> 4 (Future Value Winner, IRR
   comparison, Break-even Year, Present Value Winner). Grid dropped from
   4 columns to 2 — the two "winner" cards (kpi-card-delta) span both
   columns as full-width rows, IRR and Break-even sit side by side
   between them. Removed cards' values are still visible elsewhere:
   Total Depreciation on the Depreciation tab (#total_depr_claimed) and
   the Assumptions tab (#assumption_depr); Property/Shares Net Proceeds
   and Terminal PV remain in the underlying summary data used by other
   tabs, just no longer duplicated here. */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}
/* Structurally these already match retirement.html's .insight-card
   (label/value/sub, same 3-line pattern) — the drift was purely visual:
   left-aligned vs. retirement's centered layout, and no resting shadow
   (retirement's cards carry one at rest, not just on hover). Centering
   and the shadow below copy retirement.html's .insight-card exactly;
   colors are left alone since PvS's property/shares/gold value coloring
   is load-bearing (it's how a card signals which side of the comparison
   it belongs to) where retirement's flat green is not. */
.kpi-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 18px 16px;
  transition: var(--transition);
  min-height: 90px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-shadow: 0 3px 10px rgba(0,0,0,.07);
}
/* translateY distance matched to retirement's .insight-card:hover
   (-2px, was -1px); border-color stays PvS's own clay family
   (var(--border-focus)) rather than retirement's
   color-mix(var(--brand) 25%, var(--border)) green-mix. */
.kpi-card:hover { border-color: var(--border-focus); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
/* Visual-weight pass (2026-08): the two "winner" cards are the actual
   headline takeaways, so they get a hero accent — a solid gold left
   border, the same treatment retirement.html uses for its own
   attention-panels (.gap-insights-panel/.mc-panel border-left accents).
   Contrast verified (WCAG 1.4.11, non-text UI component, 3:1 minimum):
   --gold #C97A3A vs this card's near-white background (the gradient
   below is 2-7% alpha, negligibly different from plain white) = 3.32:1
   — the same combination already verified in the toggle-fix round. */
.kpi-card-delta {
  background: linear-gradient(135deg, rgba(201,168,76,.07), rgba(201,168,76,.02));
  border-color: var(--gold-dim) !important;
  border-left: 4px solid var(--gold) !important;
  grid-column: span 2;
  min-height: 90px;
}
.kpi-card-delta:hover { border-color: var(--gold) !important; box-shadow: var(--shadow-gold); }
.kpi-label { font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 6px; }
.kpi-value { font-family: 'DM Mono', monospace; font-size: 1.9rem; font-weight: 800; line-height: 1; margin-bottom: 5px; flex-grow: 1; }
.kpi-value.property { color: var(--property); }
.kpi-value.shares   { color: var(--shares); }
.kpi-value.gold     { color: var(--gold); }
.kpi-sub { font-size: .72rem; color: var(--text-secondary); font-family: 'DM Mono', monospace; line-height: 1.45; }

/* IRR card: two values (property/shares) side by side in one card
   instead of two separate cards — smaller than the standard .kpi-value
   size so both fit without wrapping awkwardly on narrow cards. */
.kpi-value-irr {
  font-family: 'DM Mono', monospace;
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 5px;
  flex-grow: 1;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}
.kpi-value-irr .property { color: var(--property); }
.kpi-value-irr .shares   { color: var(--shares); }
.kpi-value-irr .kpi-vs {
  font-family: 'Inter Tight', sans-serif;
  font-size: .65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
}

/* IRR proportional split bar — mirrors retirement.html's own
   benchmark-bar pattern (.dd-benchmark/.dd-bench-track/.dd-bench-seg):
   segment widths reflect each side's share of the combined IRR, so the
   card communicates "who's ahead" at a glance, not just two numbers.
   Populated by js/app1.js (renderResults) since it depends on the
   computed IRR values; hidden by default until populated. */
.kpi-irr-bar-wrap { display: none; margin-top: 6px; width: 100%; max-width: 220px; }
.kpi-irr-bar { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: var(--bg-raised); }
.kpi-irr-bar-prop   { background: var(--property); }
.kpi-irr-bar-shares { background: var(--shares); }

@container pvs-main (max-width: 600px) {
  .kpi-grid { grid-template-columns: 1fr; }
  .kpi-card-delta { grid-column: span 1; }
  .kpi-card { min-height: 80px; padding: 12px; }
}

/* ── TABS ─────────────────────────────────────────────────
   Retirement-parity pass (2026-08): full underline-indicator pattern
   ported from retirement.html's .rtab-bar/.rtab-btn/.rtab-btn--active —
   a genuine UX pattern change, not a color swap: was a filled-pill
   selection style (background fill + shadow on the active tab), now a
   bottom-border indicator (transparent border reserved on every tab so
   layout doesn't shift on activate; only the active tab's border-bottom
   goes solid). Verified against retirement.html's actual rendered
   computed styles (not just its authored CSS) — a "better balance"
   refinement block in tepuy.css targeting the same .rtab-bar/.rtab-btn
   classes turned out to be dead on retirement.html itself, shadowed by
   an inline <style> block later in that page's own document; the
   values below are what retirement.html actually renders.
   Structural values (padding/radius/border-bottom width/font-weight/
   letter-spacing/the reserved-space mechanic) are literal ports. Colors
   stay in PvS's own gold/clay family rather than retirement's green,
   consistent with every other color decision in this round — WCAG
   verified: --gold (active underline) vs white = 3.32:1 (clears the
   3:1 UI-component minimum); --gold-text (active/hover text) vs white
   ≈ 4.41:1, the same pre-existing token already used elsewhere on this
   page for AA-safe gold text.
   Left untouched (out of scope for this pass): the equal-width flex:1
   tab sizing and flex-wrap responsive behavior — retirement instead
   makes its (7-tab) bar horizontally scrollable, but PvS has 9 tabs and
   its existing wrap behavior is already tested; switching sizing/
   overflow mechanics is a bigger structural change than "port the
   indicator style" asked for. */
.tabs {
  display: flex; gap: 2px;
  background: #f7faf8;
  border: none;
  border-bottom: 1px solid #e3ede8;
  border-radius: 0;
  padding: 0.55rem 0.75rem 0;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.tab {
  flex: 1; padding: 0.35rem 0.85rem 0.4rem;
  border: none; background: transparent;
  border-radius: 6px 6px 0 0;
  border-bottom: 2px solid transparent;
  position: relative; bottom: -1px;
  color: var(--text-muted);
  font-family: 'Inter Tight', sans-serif;
  font-size: .68rem; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
  cursor: pointer; transition: var(--transition), border-bottom-color .15s;
  white-space: nowrap;
}
.tab:hover { color: var(--gold-text); }
.tab.active {
  background: #ffffff;
  color: var(--gold-text);
  border-bottom-color: var(--gold);
  font-weight: 800;
  box-shadow: none;
}

.tab-pane { display: none; }
.tab-pane.active { display: block; }

/* ── CHART CARDS ─────────────────────────────────────────── */
.chart-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px;
  margin-bottom: 14px;
}
.chart-title {
  font-size: .7rem; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 14px;
  display: flex; align-items: center; gap: 7px;
}
/* Chart.js with maintainAspectRatio:false fills its container height.
   Wrap the canvas in a div capped at 85vh so charts never dominate the screen. */
.chart-wrap {
  position: relative;
  height: min(360px, 62vh); /* comfortable default; never taller than 62vh */
  max-height: 62vh;
  width: 100%;
}
canvas { width: 100% !important; height: 100% !important; }

/* ── MC STATS ────────────────────────────────────────────── */
.mc-stats-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 8px; margin-top: 14px;
}
.mc-stat {
  background: var(--bg-raised); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 11px; text-align: center;
}
.mc-stat-label { font-size: .65rem; color: var(--text-secondary); letter-spacing: .05em; text-transform: uppercase; margin-bottom: 5px; }
.mc-stat-val { font-family: 'DM Mono', monospace; font-size: .95rem; font-weight: 500; }

/* MC methodology note */
.mc-note {
  margin-top: 10px;
  font-size: .68rem;
  color: var(--text-muted);
  padding: 8px 10px;
  background: var(--bg-raised);
  border-radius: var(--radius-sm);
  border-left: 2px solid var(--gold-dim);
  line-height: 1.6;
}
.mc-note strong { color: var(--gold); }

/* ── TABLE ───────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-lg); }
table { width: 100%; border-collapse: collapse; font-family: 'DM Mono', monospace; font-size: .7rem; }
thead th {
  background: var(--bg-raised); padding: 9px 11px;
  text-align: right; font-size: .66rem; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; color: var(--text-secondary);
  border-bottom: 1px solid var(--border); white-space: nowrap; position: relative;
}
thead th:first-child { text-align: left; }

/* Section header row spans property / shares column groups */
.section-header-prop,
.section-header-shares,
.section-header-exit {
  text-align: center !important; font-size: .65rem;
  padding: 6px 10px; letter-spacing: .06em; border-bottom: 2px solid transparent;
}
.section-header-prop   { color: var(--property) !important; border-bottom-color: var(--property); background: rgba(78,142,247,.07) !important; }
.section-header-shares { color: var(--shares)   !important; border-bottom-color: var(--shares);   background: rgba(78,203,113,.07) !important; }
.section-header-exit   { color: var(--warning)  !important; border-bottom-color: var(--warning);  background: rgba(245,166,35,.07) !important; }

/* Tooltip icon inside column header */
.th-tip { display: inline-block; font-size: .55rem; opacity: .5; cursor: help; vertical-align: super; margin-left: 2px; font-style: normal; transition: opacity .15s; }
thead th[title]:hover .th-tip { opacity: 1; }
thead th[title]:hover { background: var(--bg-hover) !important; color: var(--text-primary) !important; cursor: help; }

tbody tr { border-bottom: 1px solid var(--border); transition: background .12s; }
tbody tr:last-child { border-bottom: none; }
tbody tr:hover { background: var(--bg-raised); }
tbody td { padding: 7px 11px; text-align: right; color: var(--text-secondary); }
tbody td:first-child { text-align: left; color: var(--text-secondary); }
.td-property { color: var(--property) !important; }
.td-shares   { color: var(--shares) !important; }
.td-exit     { color: var(--warning) !important; opacity: 0.85; }
.td-exit-highlight { color: var(--warning) !important; font-weight: 600; background: rgba(245,166,35,.08) !important; }
.td-pos      { color: var(--success) !important; }
.td-neg      { color: var(--danger) !important; }
.td-gold     { color: var(--gold) !important; }
.row-highlight td { background: rgba(201,168,76,.04); }
.yr-age { color: var(--text-muted); font-size: .6rem; margin-left: 4px; }

/* ── ASSUMPTIONS ─────────────────────────────────────────── */
.assumptions-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.assumption-card {
  background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 14px;
}
.assumption-card h4 {
  font-size: .65rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 10px;
  padding-bottom: 7px; border-bottom: 1px solid var(--border);
}
.assumption-row { display: flex; justify-content: space-between; align-items: center; padding: 3px 0; }
.assumption-key { font-size: .68rem; color: var(--text-secondary); }
.assumption-val { font-family: 'DM Mono', monospace; font-size: .68rem; color: var(--gold); }

/* ── SENSITIVITY TABLE ───────────────────────────────────── */
.sensitivity-grid table th, .sensitivity-grid table td { text-align: center; }
.cell-green { background: rgba(78,203,113,.10); color: var(--shares) !important; }
.cell-red   { background: rgba(224,85,85,.08);  color: var(--danger) !important; }

/* ── EXPORT BAR ──────────────────────────────────────────── */
/* .export-bar/.btn-export moved to css/calculators.css — 2026-08 Stage 2.
   (.export-bar is still referenced by selector in the @media print rule
   further down this file — that's fine, it doesn't need its own rule
   here to be a valid selector reference.) */

/* ── SECTION INTRO ───────────────────────────────────────── */
.section-intro {
  font-size: .74rem; color: var(--text-secondary);
  margin-bottom: 10px; line-height: 1.65;
  padding: 7px 9px;
  background: var(--bg-input);
  border-radius: var(--radius-sm);
  border-left: 2px solid var(--gold-dim);
}

/* ── DR BADGE ────────────────────────────────────────────── */
.dr-badge {
  display: inline-block;
  background: rgba(240,100,180,.08);
  border: 1px solid rgba(240,100,180,.22);
  border-radius: 99px; padding: 1px 7px;
  font-size: .58rem; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
  color: #f064b4; margin-left: 5px;
}

/* ── LOADING OVERLAY ─────────────────────────────────────── */
.loading-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(13,15,20,.75);
  z-index: 999; align-items: center; justify-content: center;
  backdrop-filter: blur(4px);
}
.loading-overlay { background: rgba(244,245,248,.75); }
.loading-overlay.visible { display: flex; }
.loading-spinner {
  width: 40px; height: 40px;
  border: 3px solid var(--border);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: spin .6s linear infinite;
}
.loading-label {
  color: var(--text-secondary);
  font-size: .8rem; margin-top: 14px; text-align: center;
}
.loading-wrap { display: flex; flex-direction: column; align-items: center; gap: 6px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── DIVIDER ─────────────────────────────────────────────── */
.divider { height: 1px; background: var(--border); margin: 10px 0; }

/* ── RESPONSIVE ──────────────────────────────────────────── */
@container pvs-main (max-width: 1100px) { .kpi-grid { grid-template-columns: repeat(2, 1fr); } }
@container pvs-layout (max-width: 1200px) {
  .main-content { grid-template-columns: 320px 1fr; }
}
/* Key Wide -> Medium/Narrow tier threshold (PvS's own tuned value —
   equivalent to the 799.98px threshold the other calculators share via
   tepuy.css, kept at PvS's original 900px rather than forced to match). */
@container pvs-layout (max-width: 900px) {
  .main-content { grid-template-columns: 1fr; }
  .sidebar { height: auto; position: static; }
  .header-badges { display: none; }
}
@container pvs-main (max-width: 600px) {
  .kpi-grid { grid-template-columns: 1fr 1fr; }
  .assumptions-grid { grid-template-columns: 1fr; }
  .mc-stats-grid { grid-template-columns: 1fr 1fr; }
}

/* ── PRINT ───────────────────────────────────────────────── */
@media print {
  .sidebar, header, .export-bar, .loading-overlay { display: none !important; }
  .main-content { grid-template-columns: 1fr; }
  .results-panel { padding: 0; }
  .chart-card { break-inside: avoid; }
}

/* ─── v5 ADDITIONS ────────────────────────────────────────────── */

/* Info tip tooltip (.info-tip / .info-tip-popup) moved to
   css/calculators.css — 2026-08 Stage 2. Its position:fixed /
   js/pvs-tooltip.js mechanism travels with it unchanged. The *separate*
   native-title-attribute tooltip for table headers below
   (thead th[title]::after) is a different, PvS-only mechanism and
   stays here. */
/* table header tooltip — needs higher z and wider */
thead th[title]:hover::after {
  content: attr(title);
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 200px;
  max-width: 300px;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 9px 12px;
  font-size: .68rem;
  line-height: 1.6;
  color: var(--text-secondary);
  z-index: 300;
  box-shadow: var(--shadow-lg);
  white-space: normal;
  pointer-events: none;
  font-family: 'Inter Tight', sans-serif;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}
thead th[title] { position: relative; }

/* PPOR note */
.ppor-note {
  background: rgba(201,168,76,.10);
  border: 1px solid rgba(201,168,76,.25);
  border-radius: var(--radius-md);
  padding: 8px 12px;
  font-size: .71rem;
  color: var(--gold-light);
  margin: 4px 0 8px;
  line-height: 1.5;
}

/* ── EDUCATIONAL SECTION ─────────────────────────────────────────── */
/* "Learn & Reference" (.edu-*) moved to css/calculators.css — 2026-08
   Stage 2. Consolidated from 3 competing passes scattered across this
   file (this base rule plus two later override passes further down,
   see the "EDU PANEL" and "COMPREHENSIVE CONTRAST FIX v2" sections
   below) into one clean definition per selector in the shared file,
   and the panel-heading background was deliberately changed from a
   cream tint to white per the Stage 2 plan — see calculators.css. */

/* ─── v5.1 ADDITIONS ──────────────────────────────────────────── */

/* .btn-pdf moved to css/calculators.css — 2026-08 Stage 2. */

/* .insights-bar and .insights-title removed here (2026-08): dead code —
   both targeted markup (#insights_bar and its "Key Insights" title div)
   that no longer exists on the page, deleted when Key Insights moved
   into its own tab earlier today. .insights-list/li below are kept —
   that markup is still live inside the Insights tab pane. */
.insights-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.insights-list li {
  font-size: .8rem;
  color: var(--text-primary);
  opacity: .88;
  padding: 4px 0;
  border-bottom: 1px solid rgba(201,168,76,.1);
  line-height: 1.6;
}
.insights-list li:last-child { border-bottom: none; }
.insights-list li::before { content: '• '; color: var(--gold); }

/* Light mode stronger text in inputs */
input,
select,
textarea {
  color: #0f1118;
}
.section-title { color: #ffffff; }
label { color: #2c3248; }
.hint { color: #505870; }

/* Better mobile layout — split from the original combined query: the
   stacking/overlap-prevention rules are a pvs-layout concern (redundant
   with the 900px stacking rule above for .main-content, but preserved
   as-is rather than deduplicated), while kpi-grid/winner-banner are sized
   against the results panel's own width (pvs-main). */
@container pvs-layout (max-width: 768px) {
  .main-content {
    grid-template-columns: 1fr;
  }
  .sidebar {
    max-height: none;
    position: relative;
  }
  .results-panel {
    padding: 12px;
    margin-top: 40px; /* More space to prevent overlap with sidebar buttons */
  }
}
@container pvs-main (max-width: 768px) {
  .kpi-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* Ensure winner banner and insights don't overlap buttons */
  .winner-banner {
    margin-top: 30px;
  }
}
@container pvs-main (max-width: 480px) {
  .kpi-grid {
    grid-template-columns: 1fr;
  }
}
@container pvs-layout (max-width: 480px) {
  .header-badges { display: none; }
  header { padding: 0 12px; }
  /* .edu-tabs .edu-tab responsive override moved to css/calculators.css
     — 2026-08 Stage 2. */
}

/* ═══════════════════════════════════════════════════════════════
   TEPUY NAVBAR — now shares tepuy.css's rules via the normal cascade
   (tepuy.css is loaded before this file — see the <link> order in
   property_vs_shares.html). This section used to carry a full parallel
   copy of every .navbar/.logo-title/.nav-links/.sub-menu/.hamburger/
   .cta-button/.plan-badge rule tepuy.css already defines for the exact
   same shared markup (includes/navbar.html) — that's why fixes here kept
   being incomplete: each patch matched one property while the copy
   itself stayed in place to drift on the next one. Everything tepuy.css
   already styles identically has been deleted; only genuine, functional
   exceptions remain below, each explained.
   ═══════════════════════════════════════════════════════════════ */

/* EXCEPTION 1 — height math. PvS's own layout (.sidebar, .results-panel,
   .main-content) is hardcoded around a 60px-tall navbar (height: calc(
   100vh - 60px), top: 60px, etc. — search this file for "60px" if that
   ever needs to change). tepuy.css's own ".navbar-inner" only guarantees
   min-height: 64px, and ".navbar" itself sets no height at all — so
   height: 60px must stay pinned here on both, or PvS's sidebar/results
   layout would drift out of alignment with the navbar. */
.navbar { height: 60px; }
.navbar-inner { height: 60px; }

/* EXCEPTION 2 — sticky vs. fixed. tepuy.css's own ".navbar" is
   position: fixed (it compensates with "body { padding-top: 64px }").
   PvS's navbar has always been position: sticky instead (in normal
   flow), and PvS's own "body" rule above explicitly cancels that
   padding-top compensation — switching this to fixed without adding the
   padding back would make the navbar overlap the page's first section. */
.navbar { position: sticky; top: 0; z-index: 1000; }

/* EXCEPTION 3 (retired) — this used to key a dark navbar tint off PvS's
   own light/dark toggle, which is now removed entirely (palette redesign
   2026-08: no page keeps a dark navbar or a theme toggle). tepuy.css's
   base ".navbar" rule (bone-tinted) applies with zero PvS CSS needed,
   exactly like every other calculator/blog page. */

/* EXCEPTION 4 — mobile menu positioning AND opacity. tepuy.css's shared
   mobile dropdown is position: absolute, anchored below the navbar. That
   trips a real WebKit bug on iOS Safari (an absolutely-positioned child
   of a position: sticky ancestor scrolls/repaints incorrectly), so PvS's
   panel uses fixed positioning + safe-area insets + a GPU-compositing
   hint instead — a full-height sheet rather than a dropdown.
   Border/text color are NOT redeclared: they still come from tepuy.css's
   own mobile rule via the same --nav-text/--nav-border custom properties
   Exception 3 sets. Background IS redeclared, at higher opacity than
   Exception 3's 68%/tepuy.css's 82% — that level is tuned for a slim bar
   or a small dropdown sitting over a limited area, which is what it is
   on every other page. Here it's behind a full-height sheet covering
   this page's own busy content (hero text, badges), where the same
   opacity let that content visibly bleed through — confirmed by
   screenshot, not assumed. 92% matches PvS's own prior tuning for this
   exact full-height-sheet case, just recomputed from tepuy.css's brand
   colors instead of PvS's old --bg-surface token.
   Breakpoint matches tepuy.css's own (768px) — this used to be a
   mismatched 900px, which meant PvS alone showed its mobile hamburger
   menu in the 768–900px tablet range while every other page still showed
   the full desktop nav-links row. */
@media (max-width: 768px) {
  .navbar {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    will-change: transform;
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
  }
  .navbar .nav-links {
    position: fixed;
    top: 60px;
    left: 0;
    right: 0;
    max-height: calc(100vh - 60px);
    padding-bottom: max(12px, env(safe-area-inset-bottom, 12px));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 999;
  }
  .navbar .nav-links {
    background: color-mix(in srgb, var(--bone) 92%, transparent);
  }
}

/* EXCEPTION 5 — wordmark + plan-badge font-family. tepuy.css's ".navbar
   .logo-title" and ".plan-badge" rules only set font-weight/size/color
   (and radius/background for the badge), not font-family — on pages
   that load ONLY tepuy.css, they don't need to: both just inherit 'Inter
   Tight' from tepuy.css's own "body" rule. Retirement-parity pass
   (2026-08): this override is now redundant (PvS_style.css's own body
   rule was repointed to 'Inter Tight' too, so the inheritance these two
   selectors were fighting for no longer disagrees), but left in place
   rather than removed — harmless belt-and-suspenders, and removing it
   is a needless risk for zero visual change. */
.logo-title,
.plan-badge {
  font-family: 'Inter Tight', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* No tepuy.css equivalent exists for active-nav-link highlighting (it
   has no concept of a "current page" state in the shared nav) — kept as
   a genuine PvS-only addition, not a duplicate of anything. */
.nav-links > a.active,
.nav-links > a[aria-current="page"] {
  color: var(--gold);
  background: rgba(201,168,76,.1);
}

/* EDU PANEL "Behind the Math" readability fix + LIGHT MODE stronger-text
   pass's .edu-* lines: both moved to css/calculators.css, consolidated,
   as part of the 2026-08 Stage 2 Learn & Reference extraction. */

/* ═══════════════════════════════════════════════════════════════
   LIGHT MODE — stronger text throughout
   ═══════════════════════════════════════════════════════════════ */

.section-title { color: #ffffff !important; font-weight: 700; }
.field label { color: #1a2030 !important; font-weight: 500; }
.hint, .range-val { color: #4a5068 !important; }
.kpi-label { color: #1a2030 !important; }
.kpi-value { color: #0f1118 !important; }
/* .tab / .tab.active dark-navy !important overrides removed here
   (2026-08): leftover from the old dark-theme-era "stronger text" patch,
   already dead before this pass (both were silently beaten by the
   #374060/#0f1118 !important pair further down this file — see the
   "Tabs" section removed alongside this one), and would now also fight
   the ported underline-tab design's gold-text/font-weight:800 active
   state. Confirmed removal doesn't affect anything: the tab redesign's
   own base rule sets final, correct, WCAG-checked colors directly. */
table th { color: #0f1118 !important; }
table td { color: #1a2030 !important; }
.winner-banner .winner-title { color: #0f1118 !important; }
.winner-banner .winner-detail { color: #2c3248 !important; }
/* .edu-header-title/.edu-tab/.edu-tab.active/.edu-glossary dt/dd color
   overrides moved to css/calculators.css — 2026-08 Stage 2. */
.insights-list li { color: #1a2030 !important; }

/* Pro gate notice */
/* .pro-gate-notice removed — no pro gating */

/* ═══════════════════════════════════════════════════════════════
   CALCULATOR SUB-HEADER (below navbar)
   ═══════════════════════════════════════════════════════════════ */
.calc-header {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 52px;
  padding: 0 24px;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
  box-shadow: none;
}
.calc-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.calc-header-icon { font-size: 1.3rem; }
.calc-header-title {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 600;
  font-size: .9rem;
  color: var(--text-primary);
  line-height: 1.2;
}
.calc-header-sub {
  font-size: .6rem;
  color: var(--text-muted);
  font-family: 'DM Mono', monospace;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.calc-header .header-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  flex: 1;
}
.calc-header .theme-toggle {
  margin-left: auto;
  flex-shrink: 0;
}
.calc-header { background: #fafbfc; }
.calc-header-title { color: #0f1118; }
@container pvs-layout (max-width: 768px) {
  .calc-header .header-badges { display: none; }
  .calc-header-sub { display: none; }
}


/* ═══════════════════════════════════════════════════════════════
   DISCLAIMER FOOTER
   ═══════════════════════════════════════════════════════════════ */
.disclaimer-footer {
  background: rgba(180,40,40,.07);
  border-top: 1px solid rgba(180,40,40,.2);
  padding: 10px 24px;
  position: sticky;
  bottom: 0;
  z-index: 80;
  backdrop-filter: blur(8px);
}
.disclaimer-inner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: 1400px;
  margin: 0 auto;
  font-size: .71rem;
  color: var(--text-secondary);
  line-height: 1.5;
}
.disclaimer-icon { font-size: .9rem; flex-shrink: 0; margin-top: 1px; }
.disclaimer-inner strong { color: var(--text-primary); }
.disclaimer-inner a { color: var(--gold); text-decoration: underline; }

.disclaimer-footer {
  background: rgba(180,40,40,.05);
}
.disclaimer-inner { color: #505870; }
.disclaimer-inner strong { color: #0f1118; }

/* field-note utility */
.field-note {
  font-size: .65rem;
  line-height: 1.5;
  margin-top: 4px;
}



/* ═══════════════════════════════════════════════════════════════
   LOGO FIX — hard cap so the image can never overflow header
   ═══════════════════════════════════════════════════════════════ */
/* .calc-header-logo removed — logo only in top navbar */

/* ═══════════════════════════════════════════════════════════════
   BASIC / ADVANCED MODE TOGGLE BAR
   ═══════════════════════════════════════════════════════════════ */
.mode-toggle-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding: 8px 10px;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.mode-toggle-label {
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-muted);
  flex-shrink: 0;
}

.mode-toggle-group {
  display: flex;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 2px;
  gap: 2px;
}

.mode-btn {
  padding: 4px 12px;
  border: none;
  border-radius: calc(var(--radius-sm) - 1px);
  font-size: .68rem;
  font-weight: 600;
  font-family: 'Inter Tight', sans-serif;
  cursor: pointer;
  transition: var(--transition);
  background: transparent;
  color: var(--text-muted);
  letter-spacing: .02em;
  white-space: nowrap;
}

.mode-btn:hover {
  color: var(--text-primary);
  background: var(--bg-hover);
}

.mode-btn.active {
  background: var(--gold);
  color: #0d0f14;
  box-shadow: 0 1px 4px rgba(201,168,76,.30);
}

.mode-btn.active {
  color: #ffffff;
}

.mode-hint {
  font-size: .62rem;
  color: var(--text-muted);
  font-style: italic;
  margin-left: auto;
  white-space: nowrap;
}



/* ═══════════════════════════════════════════════════════════════
   SCENARIO SAVE / LOAD BUTTONS & DROPDOWN
   Moved to css/calculators.css — 2026-08 Stage 2, as part of the shared
   export/print/reset/save/load button strip (.btn-scenario,
   .scenario-auth-hint, .scenario-load-dropdown, .sld-*, plus the
   @keyframes fadeIn it used, which had no other consumer in this file).
   ═══════════════════════════════════════════════════════════════ */

/* Better winner star */
.winner-trophy {
  font-size: 1.75rem;
  font-weight: 100;
  color: var(--gold);
  letter-spacing: -.02em;
  line-height: 1;
}

/* Section icon font rendering (symbol icons) — deliberately excluded from
   the retirement-parity DM Serif Display sweep: this isn't branding text,
   it governs which glyph shapes render for the sidebar's unicode symbol
   characters. Swapping it risks changing icon shapes, not typography. */
.section-icon {
  font-family: 'DM Serif Display', system-ui, serif;
}

/* Login/Signup button in navbar (triggers Auth0 directly) */
.nav-login-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-family: 'Inter Tight', sans-serif;
  font-size: .82rem;
  font-weight: 500;
  padding: 6px 12px;
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
}
.nav-login-btn:hover {
  color: var(--gold);
  border-color: var(--gold-dim);
  background: rgba(201,168,76,.07);
}
.nav-login-btn { color: #2c3248; }
.nav-login-btn:hover { color: #0f1118; background: #eaecf2; border-color: var(--gold); }

/* Assumption card heading: brighter */
.assumption-card h4 {
  font-size: .67rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-secondary); margin-bottom: 10px;
  padding-bottom: 7px; border-bottom: 1px solid var(--border);
}





/* ============================================================================
   v6 Cashflow Neutrality UI
============================================================================ */

.icon-cashflow {
  background: rgba(255,255,255,0.08);
}

.cashflow-verification .chart-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.cfv-status {
  font-size: 0.95rem;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
}

.cfv-status.ok {
  border-color: rgba(60, 220, 150, 0.35);
  background: rgba(60, 220, 150, 0.12);
}

.cfv-status.bad {
  border-color: rgba(255, 120, 120, 0.35);
  background: rgba(255, 120, 120, 0.12);
}

.cfv-meta {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  padding: 10px 14px 0;
}

.cfv-meta .k {
  display: inline-block;
  min-width: 84px;
  opacity: 0.8;
}

.cfv-meta .v {
  font-weight: 600;
}

.cfv-table table {
  width: 100%;
}

.cfv-table tbody tr.ok td {
  opacity: 0.92;
}

.cfv-table tbody tr.bad td {
  opacity: 0.92;
}

.cfv-table tbody tr.bad td:last-child {
  font-weight: 700;
}





/* ============================================================
   ADDITIONS — extracted from inline HTML styles + new features
   Organised: Share buttons → DSC → Share Card → MC note →
              Shared banner → Light-mode contrast → Font floor
   ============================================================ */


    /* .btn-share/.btn-share-export moved to css/calculators.css —
       2026-08 Stage 2. */
    /* ═══════════════════════════════════════════════════════════════════
       DECISION SUMMARY CARD — shareable, narrative output layer
       Sits between insights-bar and kpi-grid.
    ═══════════════════════════════════════════════════════════════════ */
    #decision_summary_card {
      display: none;
      background: linear-gradient(135deg,
        rgba(0,139,149,0.07) 0%,
        rgba(15,35,60,0.10) 100%);
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 22px 24px 18px;
      margin: 16px 0 10px;
      position: relative;
      overflow: hidden;
    }
    #decision_summary_card::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 3px;
      background: linear-gradient(90deg, #008b95, var(--gold, #c9a84c));
      border-radius: 14px 14px 0 0;
    }
    #decision_summary_card.visible { display: block; }

    /* ── Headline ── */
    .dsc-headline {
      font-size: 1.05rem;
      font-weight: 700;
      color: var(--text-primary);
      line-height: 1.4;
      margin-bottom: 14px;
      padding-right: 8px;
    }
    .dsc-headline .dsc-winner-label {
      display: inline-block;
      font-size: 0.68rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      padding: 2px 8px;
      border-radius: 4px;
      margin-right: 8px;
      vertical-align: middle;
      position: relative;
      top: -1px;
    }
    .dsc-winner-label.property { background: rgba(0,139,149,0.12); color: var(--dsc-teal-text); }
    .dsc-winner-label.shares   { background: rgba(201,168,76,0.15); color: var(--gold-text); }

    /* ── Insight tiles ── */
    .dsc-insights {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 10px;
      margin-bottom: 16px;
    }
    .dsc-insight-item {
      background: var(--bg-raised);
      border: 1px solid var(--border);
      border-radius: 9px;
      padding: 10px 12px;
    }
    .dsc-insight-label {
      font-size: 0.62rem;
      font-weight: 600;
      letter-spacing: 0.07em;
      text-transform: uppercase;
      color: var(--text-muted);
      margin-bottom: 3px;
    }
    .dsc-insight-value {
      font-size: 0.88rem;
      font-weight: 600;
      color: var(--text-primary);
      line-height: 1.35;
    }
    .dsc-insight-value.teal { color: var(--dsc-teal-text); }
    .dsc-insight-value.gold { color: var(--gold-text); }
    .dsc-insight-value.warn { color: #8b3a00; }

    /* ── Assumption strip ── */
    .dsc-assumption-strip {
      display: flex;
      flex-wrap: wrap;
      gap: 6px 16px;
      font-size: 0.71rem;
      color: var(--text-muted);
      margin-bottom: 14px;
      padding: 8px 10px;
      background: var(--bg-base, rgba(0,0,0,0.15));
      border-radius: 7px;
    }
    .dsc-assumption-strip strong { color: var(--text-secondary); }

    /* ── Footer ── */
    .dsc-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 8px;
    }
    .dsc-legal {
      font-size: 0.62rem;
      color: var(--text-muted);
      line-height: 1.5;
      flex: 1;
      min-width: 160px;
    }
    .dsc-share-btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 0.75rem;
      font-weight: 600;
      padding: 7px 14px;
      border-radius: 7px;
      border: 1px solid var(--gold-dim, #8a6d28);
      color: var(--gold, #c9a84c);
      background: transparent;
      cursor: pointer;
      transition: background 0.15s, border-color 0.15s;
      white-space: nowrap;
      font-family: inherit;
    }
    .dsc-share-btn:hover {
      background: rgba(201,168,76,0.10);
      border-color: var(--gold, #c9a84c);
    }
    .dsc-share-btn .dsc-copy-tick { display: none; color: #4caf82; }
    .dsc-share-btn.copied .dsc-copy-label { display: none; }
    .dsc-share-btn.copied .dsc-copy-tick { display: inline; }

    /* A second, later pass further down this file ("COMPREHENSIVE
       CONTRAST FIX v2") used to override every one of these selectors
       again for [data-theme="light"] — this whole first pass was dead
       code, its values never actually reaching the page. Removed rather
       than unprefixed; the v2 pass (now unprefixed, see below) is the
       one source of truth. */

    @container pvs-main (max-width: 600px) {
      .dsc-insights { grid-template-columns: 1fr 1fr; }
      .dsc-headline { font-size: 0.95rem; }
    }


    /* ── Shared-scenario banner (shown when URL params present) ── */
    #pvs_shared_banner {
      display: none;
      background: linear-gradient(135deg, rgba(201,168,76,0.12), rgba(201,168,76,0.05));
      border: 1px solid var(--gold-dim, #8a6d28);
      border-radius: 8px;
      padding: 10px 16px;
      margin: 0 0 16px 0;
      font-size: 0.82rem;
      color: var(--gold, #c9a84c);
      align-items: center;
      gap: 8px;
      line-height: 1.4;
    }
    #pvs_shared_banner.visible { display: flex; }
    #pvs_shared_banner strong { color: var(--text-primary, #e8e0d0); }
  


/* ══ SHARE CARD OVERLAY ═══════════════════════════════════════════════════════
   A full-screen modal containing an isolated, screenshot-ready result card.
   Fixed 600px wide, always dark, designed to be captured by html2canvas.
═══════════════════════════════════════════════════════════════════════════ */
#share_card_overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.82);
  z-index: 9000;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  backdrop-filter: blur(4px);
}
#share_card_overlay.visible { display: flex; }

#share_card_outer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
  max-width: 640px;
}

/* The card itself — always dark, fixed width, screenshot target */
#share_card {
  width: 600px;
  max-width: 100%;
  background: #111520;           /* slightly lighter than pure black — tiles now visible */
  border-radius: 18px;
  padding: 28px 28px 22px;
  position: relative;
  overflow: hidden;
  font-family: 'Inter Tight', sans-serif;
  box-shadow: 0 24px 80px rgba(0,0,0,0.9);
}

/* Accent bar top */
#share_card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, #4e8ef7 0%, var(--gold) 50%, #4ecb71 100%);
}

/* Subtle grid — reduced opacity so it doesn't muddy contrast */
#share_card::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.018) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
}

/* Header row: winner badge + Tepuy brand */
.sc-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 18px;
  gap: 12px;
}
.sc-brand {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.05em;
  color: rgba(255,255,255,0.50);   /* was 0.28 — much more readable */
  text-align: right;
  line-height: 1.4;
  flex-shrink: 0;
}
.sc-brand span {
  display: block;
  font-family: 'DM Mono', monospace;
  font-size: 0.72rem;              /* was 0.60 */
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.35);   /* was 0.18 */
  margin-top: 2px;
}

.sc-winner-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.74rem;              /* was 0.65 */
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 6px;
}
.sc-winner-badge.property {
  background: rgba(78,142,247,0.22);
  color: #93c0ff;                  /* brighter — was #7ab3ff */
  border: 1px solid rgba(78,142,247,0.45);
}
.sc-winner-badge.shares {
  background: rgba(78,203,113,0.22);
  color: #80e89a;                  /* brighter — was #6dd98a */
  border: 1px solid rgba(78,203,113,0.45);
}

/* Main headline */
.sc-headline {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 600;
  font-size: 1.32rem;
  line-height: 1.42;
  color: #dde2ee;                  /* slightly softer than pure white for long text */
  margin-bottom: 20px;
  letter-spacing: -0.01em;
}
.sc-headline strong {
  color: #ffffff;
}

/* 2×2 stat grid */
.sc-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 20px;
}
.sc-stat {
  background: #1c2133;             /* was rgba(255,255,255,0.04) ≈ invisible — now a real surface */
  border: 1px solid #2e3550;       /* was rgba(255,255,255,0.07) — now clearly visible */
  border-radius: 10px;
  padding: 14px 16px;              /* slightly more padding */
}
.sc-stat-label {
  font-family: 'DM Mono', monospace;
  font-size: 0.70rem;              /* was 0.58 — now readable */
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);   /* was 0.35 */
  margin-bottom: 7px;
}
.sc-stat-value {
  font-size: 0.96rem;              /* was 0.88 */
  font-weight: 600;
  line-height: 1.35;
  color: #eef0f5;
}
.sc-stat-value.blue  { color: #93c0ff; }   /* brighter for dark bg */
.sc-stat-value.green { color: #80e89a; }
.sc-stat-value.gold  { color: #e0c070; }
.sc-stat-value.warn  { color: #ffaa60; }

/* Divider */
.sc-divider {
  height: 1px;
  background: rgba(255,255,255,0.10);  /* was 0.07 */
  margin: 0 0 14px;
}

/* Assumptions strip */
.sc-assumptions {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 16px;
  font-family: 'DM Mono', monospace;
  font-size: 0.72rem;              /* was 0.62 */
  color: rgba(255,255,255,0.50);   /* was 0.30 */
  margin-bottom: 16px;
}
.sc-assumptions strong {
  color: rgba(255,255,255,0.80);   /* was 0.55 */
}

/* Footer: disclaimer + URL */
.sc-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.sc-disclaimer {
  font-size: 0.70rem;              /* was 0.60 */
  color: rgba(255,255,255,0.38);   /* was 0.20 */
  line-height: 1.55;
  flex: 1;
}
.sc-url {
  font-family: 'DM Mono', monospace;
  font-size: 0.72rem;              /* was 0.62 */
  color: rgba(201,168,76,0.80);    /* was 0.55 — gold URL now visible */
  white-space: nowrap;
  flex-shrink: 0;
}

/* Action buttons row (outside the card, not captured) */
.sc-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}
.sc-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: 'Inter Tight', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 10px 20px;
  border-radius: 9px;
  border: none;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.1s;
}
.sc-action-btn:hover { opacity: 0.88; transform: translateY(-1px); }
.sc-action-btn.primary {
  background: linear-gradient(135deg, #4e8ef7, #2d6fd4);
  color: #ffffff;
}
.sc-action-btn.secondary {
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.75);
  border: 1px solid rgba(255,255,255,0.12);
}
.sc-action-btn.close-btn {
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.45);
  border: 1px solid rgba(255,255,255,0.08);
}
.sc-hint {
  font-size: 0.70rem;
  color: rgba(255,255,255,0.28);
  text-align: center;
  font-family: 'DM Mono', monospace;
}


/* ══ LIGHT MODE — COMPREHENSIVE CONTRAST FIX v2 ══════════════════════════════
   Every component that was unreadable in day mode.
   All colours WCAG AA verified against their backgrounds.
══════════════════════════════════════════════════════════════════════════════ */

/* ── Global ── */
body { color: #1a1d26; }
html { font-size: 15.5px; }

/* ── Chart cards & titles ──
   Retirement-parity pass (2026-08): shadow re-ported from a single-layer
   PvS-specific value to retirement.html's exact 2-layer --tp-shadow-card,
   same as .section above. */
.chart-card {
  background: #ffffff;
  border: 1px solid #d0d4e0;
  box-shadow: 0 2px 10px rgba(14,21,18,.07), 0 1px 3px rgba(14,21,18,.05);
}
.chart-title { color: #0f1118 !important; font-weight: 700; }

/* ── KPI cards ──
   box-shadow deliberately omitted here (was 0 1px 4px rgba(0,0,0,.05) —
   weaker than and would silently override the visual-weight pass's
   stronger 0 3px 10px rgba(0,0,0,.07) set earlier in this file, since
   this "light mode" block loads later at equal specificity). Found via
   the same class of bug as today's toggle collision — a later override
   block quietly winning over an earlier, intentional value. */
.kpi-card {
  background: #ffffff;
  border: 1px solid #d0d4e0;
}
.kpi-sub { color: #374060 !important; }

/* ── Section intro / hint ── */
.section-intro { color: #374060 !important; }
.chart-card .hint { color: #505870 !important; }

/* ── Sidebar sections ── */
.section { background: #ffffff; border: 1px solid #e3ede8; }
.section-header { background: var(--brand, #1f4c3b); }
.section-header .section-icon { color: #ffffff !important; }
.section-body { background: #ffffff; }

/* ── Tabs ──
   Removed here (2026-08): three dark-theme-era !important overrides
   (.tabs border-bottom-color, .tab:not(.active) color, and its hover)
   that would otherwise silently beat the ported underline-tab design's
   own border-bottom-color (#e3ede8, retirement's exact value),
   var(--text-muted) inactive color, and var(--gold-text) hover color —
   same class of collision as everything else found in today's audit.
   The tab redesign's base rule already sets final, WCAG-checked colors
   directly, so these patches are redundant now, not just risky. */

/* ── Winner banner ── */
.winner-banner {
  background: linear-gradient(135deg, rgba(201,168,76,.10), rgba(201,168,76,.04));
  border-color: rgba(184,146,46,.35);
}

.insights-list li { color: #1a2030 !important; font-size: .82rem; }

/* ── Decision Summary Card (inline version) ── */
#decision_summary_card {
  background: #ffffff;
  border-color: #d0d4e0;
  box-shadow: 0 2px 12px rgba(0,0,0,.07);
}
.dsc-headline { color: #0f1118 !important; }
.dsc-insight-item { background: #f7f8fb; border-color: #d0d4e0; }
.dsc-insight-label { color: #505870 !important; }
.dsc-insight-value { color: #0f1118 !important; }
.dsc-insight-value.teal { color: var(--dsc-teal-text) !important; }
.dsc-insight-value.gold { color: var(--gold-text) !important; }
.dsc-insight-value.warn { color: #8b3a00 !important; }
.dsc-assumption-strip { background: #eef0f5; color: #374060; }
.dsc-assumption-strip strong { color: #0f1118; }
.dsc-legal { color: #505870; }
/* Was blue/green (--property/--shares) here — a bug: it recolored the
   badge to a different hue family than its own .teal/.gold classes and
   this same card's base rules use, so the badge changed hue on every
   theme toggle. Restored to the teal/gold family. */
.dsc-winner-label.property { background: rgba(0,139,149,.12); color: var(--dsc-teal-text); }
.dsc-winner-label.shares   { background: rgba(201,168,76,.15); color: var(--gold-text); }
.dsc-share-btn { border-color: var(--gold); color: var(--gold-text); }
.dsc-share-btn:hover { background: rgba(160,110,20,.08); border-color: var(--gold-text); }

/* ── Monte Carlo stats ── */
.mc-stat { background: #ffffff; border: 1px solid #d0d4e0; }
.mc-stat-label { color: #374060 !important; }
.mc-stat-val { color: #0f1118 !important; }
.mc-note { color: #505870 !important; }

/* ── MC transparency note ── */
.mc-transparency-note {
  background: rgba(184,146,46,.06) !important;
  border-color: rgba(184,146,46,.25) !important;
  color: #374060 !important;
}
.mc-transparency-note strong { color: var(--gold-text) !important; }
.mc-transparency-note li { color: #374060 !important; }

/* ── Sensitivity grid ── */
.sensitivity-grid td { color: #0f1118 !important; }
.sensitivity-grid th { color: #374060 !important; }

/* ── Assumptions grid ── */
.assumption-card { background: #ffffff; border: 1px solid #d0d4e0; }
.assumption-key { color: #374060 !important; }
.assumption-val { color: #0f1118 !important; }

/* ── Cashflow verification ── */
.cashflow-verification { background: #ffffff; border: 1px solid #d0d4e0; }
.cfv-meta .k { color: #505870 !important; }
.cfv-meta .v { color: #0f1118 !important; }

/* ── Header badges ── */
.badge {
  background: rgba(0,0,0,.06) !important;
  color: #2c3248 !important;
  border-color: rgba(0,0,0,.10) !important;
}

/* ── Empty state ── */
.empty-icon { color: #c0c4d0; }
.empty-title { color: #0f1118 !important; }
.empty-sub { color: #374060 !important; }

/* ── Calc hero ── */
.calc-hero-desc { color: #374060 !important; }
.calc-hero-title { color: #0f1118 !important; }

/* ── Sidebar controls ── */
.mode-toggle-bar { color: #374060; }
.mode-btn:not(.active) { color: #374060 !important; }
.range-val { color: #374060 !important; }
/* .toggle-label color override removed here (2026-08 Stage 2): value-equal
   to the consolidated rule now in css/calculators.css (#2c3248 ==
   var(--text-secondary)), a no-op duplicate post-extraction. */

/* .edu-faq-item summary/p and .edu-table td color overrides moved to
   css/calculators.css — 2026-08 Stage 2. */

/* ── Share card light-mode variant ── */
#share_card.light-mode {
  background: #f8f9fc;
  box-shadow: 0 24px 80px rgba(0,0,0,.25);
}
/* Remove grid watermark in light mode — causes checkered artifact in html2canvas */
#share_card.light-mode::after {
  display: none;
}
#share_card.light-mode::after {
  background-image:
    linear-gradient(rgba(0,0,0,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,.025) 1px, transparent 1px);
}
#share_card.light-mode .sc-headline { color: #0f1118; }
#share_card.light-mode .sc-headline strong { color: #000; }
#share_card.light-mode .sc-brand { color: rgba(0,0,0,.35); }
#share_card.light-mode .sc-brand span { color: rgba(0,0,0,.22); }
#share_card.light-mode .sc-winner-badge.property { background: rgba(78,142,247,.12); color: #1a4a9a; border-color: rgba(78,142,247,.25); }
#share_card.light-mode .sc-winner-badge.shares   { background: rgba(78,203,113,.12); color: #1a6a35; border-color: rgba(78,203,113,.25); }
#share_card.light-mode .sc-stat { background: #ffffff; border-color: #d4d8e8; }
#share_card.light-mode .sc-stat-label { color: #505870; }
#share_card.light-mode .sc-stat-value { color: #0f1118; }
#share_card.light-mode .sc-stat-value.blue  { color: #1a4a9a; }
#share_card.light-mode .sc-stat-value.green { color: #1a6a35; }
#share_card.light-mode .sc-stat-value.gold  { color: var(--gold-text); }
#share_card.light-mode .sc-stat-value.warn  { color: #8b3a00; }
#share_card.light-mode .sc-divider { background: rgba(0,0,0,.10); }
#share_card.light-mode .sc-assumptions { color: rgba(0,0,0,.40); }
#share_card.light-mode .sc-assumptions strong { color: rgba(0,0,0,.65); }
#share_card.light-mode .sc-disclaimer { color: rgba(0,0,0,.30); }
#share_card.light-mode .sc-url { color: rgba(120,80,0,.55); }

/* ── Global font-size minimums — raise tiny labels to readable floor ── */
.badge,
.sc-stat-label,
.dsc-insight-label,
.kpi-label,
.mc-stat-label,
.section-intro,
.assumption-key,
.cfv-meta .k,
.hint {
  font-size: max(.73rem, 0.73rem); /* floor ~11px at 15px base — .edu-tab's
  membership in this list moved to css/calculators.css's own consolidated
  .edu-tab rule (2026-08 Stage 2): it's baked into that rule's font-size
  directly (.73rem) rather than reapplied via this shared selector list. */
}


/* SEO editorial styles moved to /css/seo-editorial.06b0142e.css */

.related-tools {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 24px;
}

/* ── RELATED TOOLS GRID ── */
.related-tools {
  margin-bottom: 64px;
}

.related-tools__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}

.related-tool-card {
  display: block;
  padding: 16px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--text-secondary);
  transition: border-color .15s, background .15s, transform .15s;
}

.related-tool-card:hover {
  border-color: var(--gold);
  background: rgba(201,168,76,.04);
  transform: translateY(-2px);
  color: var(--text-secondary);
  text-decoration: none;
}

.related-tool-card--featured {
  background: rgba(201,168,76,.05);
  border-color: rgba(201,168,76,.25);
}

.related-tool-card--featured:hover {
  background: rgba(201,168,76,.09);
}

.rtc-title {
  font-weight: 600;
  font-size: .85rem;
  color: var(--text-primary);
  margin-bottom: 5px;
}

.rtc-title--gold { color: var(--gold); }

.rtc-desc {
  font-size: .75rem;
  color: var(--text-muted);
  line-height: 1.5;
}

/* Light theme */
.related-tool-card {
  background: #fff;
  border-color: #d0dfe0;
}
.related-tool-card:hover {
  border-color: var(--gold);
  background: #fffbf0;
}
.related-tool-card--featured {
  background: #fffbf2;
  border-color: rgba(201,168,76,.4);
}
.rtc-title { color: #0f1118; }
.rtc-title--gold { color: var(--gold-text); }
.rtc-desc { color: #505870; }

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
  .related-tools { padding: 0 16px; }
  .related-tools__grid { grid-template-columns: 1fr 1fr; gap: 10px; }
}

@media (max-width: 480px) {
  .related-tools__grid { grid-template-columns: 1fr; }
}

/* ── Disclaimer footer ──
   Moved out of property_vs_shares.html's inline <style> block — 2026-08
   Stage 2 (PvS-specific, not part of the shared calculators.css layer). */
#disclaimerFooter { display: flex; }
#disclaimerFooter .disclaimer-inner { display: flex; align-items: flex-start; width: 100%; gap: 0.5rem; }
#disclaimerFooter[hidden] { display: none !important; }