@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/fonts/fraunces-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/fonts/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/ibm-plex-mono-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/ibm-plex-mono-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/ibm-plex-mono-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --ink: #17212B;
  --ink-soft: #5B6470;
  --paper: #F6F1E4;
  --paper-2: #EFE7D2;
  --surface: #ffffff;
  --maple: #A9362A;
  --maple-soft: #F1DAD3;
  --harbor: #2B5876;
  --harbor-soft: #D8E4EA;
  --gold: #B08A2E;
  --gold-soft: #F3E7C9;
  --gold-text-on-soft: #7E6321;
  --line: #DCD2B8;
  --good: #3E6B4F;
  --good-soft: #DCEFE3;
  /* A distinct crimson, not an alias of --maple — --maple is the CA chip's brand color (and
     doubles as a general chart accent throughout the site), so reusing it for "warning" risked
     a warning callout reading as if it were specifically about the Canadian side of things. */
  --warn: #B0264A;
  --warn-soft: #F6DCE3;
  --radius: 10px;
  --shadow-card: 0 1px 3px rgba(23,33,43,.06), 0 4px 12px rgba(23,33,43,.05);
}

[data-theme="dark"] {
  --ink: #EAE3D2;
  --ink-soft: #A79F8C;
  --paper: #12161B;
  --paper-2: #1B2027;
  --surface: #1B2027;
  --maple: #E07A67;
  --maple-soft: #3A2620;
  --harbor: #7FB1CE;
  --harbor-soft: #1E313C;
  --gold: #D8B563;
  --gold-soft: #332B1A;
  --gold-text-on-soft: #D8B563;
  --line: #333A43;
  --good: #6FAE85;
  --good-soft: #1E2E24;
  --warn: #E86B90;
  --warn-soft: #33202A;
  --shadow-card: 0 1px 3px rgba(0,0,0,.25), 0 4px 14px rgba(0,0,0,.28);
}

* {
  box-sizing: border-box;
}

/* ---- Card elevation: a shared subtle shadow for content-card surfaces that were previously
   flat 1px-border boxes. Applied to outer grid containers only (.stat-cards, .result-strip),
   never their inner hairline cells, so it can't interact with the gap:1px hairline-grid trick. */
.tool-card, .chart-card, .quiz-card, .insights, .considerations, .sensitivity-card,
.composition-card, .roadmap-card, .income-stack-card, .scenarios-panel,
.stat-cards, .result-strip, .year-card, .tool-directory-card {
  box-shadow: var(--shadow-card);
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto !important; }
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: var(--paper); padding: 12px 20px;
  border-radius: 0 0 8px 0; font-weight: 700; font-size: 14px; text-decoration: none;
}
.skip-link:focus { left: 0; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Inter', sans-serif;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}

.wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px 96px;
}

h1,
h2,
h3,
.display {
  font-family: 'Fraunces', serif;
}

.mono,
.stat-value,
input,
select,
table {
  font-family: 'IBM Plex Mono', monospace;
}

label,
.field-note,
.legend,
button,
.notes-badge {
  font-family: 'Inter', sans-serif;
}

.hero {
  padding: 40px 0 28px;
  border-bottom: 1px solid var(--line);
}

.eyebrow {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 14px;
}

@media(max-width: 480px) {
  .eyebrow { flex-wrap: wrap; row-gap: 4px; }
}

.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  padding: 3px 8px;
  border-radius: 4px;
  color: #fff;
}

.icon {
  display: inline-block;
  width: 14px;
  height: 14px;
  vertical-align: -2px;
}
.icon svg { width: 100%; height: 100%; display: block; }

.chip.ca {
  background: var(--maple);
}

.chip.us {
  background: var(--harbor);
}

h1 {
  font-size: clamp(32px, 5vw, 52px);
  font-weight: 600;
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}

.hero p.sub {
  color: var(--ink-soft);
  font-size: 17px;
  margin: 0;
}

/* ---- Hero "how it works" steps: explains the product flow, homepage only. ---- */
.hero-steps { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 24px; }
.hs-step { display: flex; align-items: center; gap: 8px; }
.hs-num {
  width: 22px; height: 22px; border-radius: 50%; flex: none;
  background: var(--paper-2); color: var(--ink); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  font-family: 'IBM Plex Mono', monospace; font-size: 12px; font-weight: 600;
}
.hs-text { font-size: 14px; color: var(--ink); font-weight: 500; }
.hs-arrow { color: var(--ink-soft); font-size: 15px; flex: none; }
@media(max-width: 640px) {
  .hero-steps { flex-direction: column; align-items: flex-start; gap: 10px; }
  .hs-arrow { display: none; }
}

.hero-cta {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 20px;
  font-size: 15px; font-weight: 600;
  padding: 13px 26px; border-radius: 7px;
  background: var(--ink); color: var(--paper);
  text-decoration: none;
}
.hero-cta:hover { background: #0c141c; }

.trust-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.trust-badge {
  display: inline-flex; align-items: center;
  font-size: 12px; font-weight: 600; color: var(--ink-soft);
  background: var(--paper-2); border: 1px solid var(--line); border-radius: 20px;
  padding: 5px 12px;
}
a.trust-badge { text-decoration: none; }
a.trust-badge:hover { color: var(--ink); border-color: var(--ink-soft); }

section.intro {
  padding: 32px 0;
  border-bottom: 1px solid var(--line);
}

section.intro p {
  color: var(--ink);
  font-size: 16px;
}

section.intro .disclaimer {
  margin-top: 20px;
  padding: 16px 18px;
  background: var(--paper-2);
  border-left: 3px solid var(--gold);
  border-radius: 4px;
  font-size: 14px;
  color: var(--ink-soft);
}

form {
  padding: 36px 0;
}

fieldset {
  border: none;
  padding: 0;
  margin: 0 0 36px;
}

legend.section-title,
summary.section-title {
  font-family: 'Fraunces', serif;
  font-size: 21px;
  font-weight: 600;
  padding: 0 0 14px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--line);
  width: 100%;
  display: flex;
  align-items: baseline;
  gap: 10px;
}

legend.section-title .num,
summary.section-title .num {
  color: var(--ink-soft);
  font-family: 'IBM Plex Mono';
  font-size: 14px;
}

@media(max-width: 560px) {
  legend.section-title,
  summary.section-title {
    flex-wrap: wrap;
    font-size: 18px;
    row-gap: 4px;
  }
  details.collapsible-section .collapse-teaser {
    margin-left: 0;
    width: 100%;
  }
}

details.collapsible-section { margin-bottom: 36px; }
details.collapsible-section summary.section-title {
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-right: 30px;
}
details.collapsible-section summary.section-title::-webkit-details-marker { display: none; }
details.collapsible-section summary.section-title::after {
  content: '+';
  position: absolute;
  right: 4px;
  top: 0;
  font-size: 22px;
  color: var(--gold-text-on-soft);
}
details.collapsible-section[open] summary.section-title::after { content: '–'; }
details.collapsible-section .collapse-teaser {
  font-size: 13px;
  font-weight: 400;
  color: var(--ink-soft);
  margin-left: auto;
}
details.collapsible-section[open] .collapse-teaser { display: none; }
details.collapsible-section .collapsible-body { padding-top: 4px; }

.card-collapsible {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 32px;
}
.card-collapsible summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 0 0 4px;
}
.card-collapsible summary::-webkit-details-marker { display: none; }
.card-collapsible summary h3 { margin: 0; font-size: 18px; }
.card-collapsible summary .toggle-icon { color: var(--gold-text-on-soft); font-size: 20px; flex: none; }
.card-collapsible[open] summary .toggle-icon::before { content: '–'; }
.card-collapsible:not([open]) summary .toggle-icon::before { content: '+'; }
.card-collapsible:not([open]) .subhead,
.card-collapsible:not([open]) .card-collapsible-body { display: none; }

.grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 40px;
}

.grid3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px 24px;
}

@media(max-width:760px) {
  .grid2 {
    grid-template-columns: 1fr;
  }

  .grid3 {
    grid-template-columns: 1fr;
  }
}

.border-crossing {
  position: relative;
}

.border-crossing::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  border-left: 2px dashed var(--gold);
  opacity: .55;
}

@media(max-width:760px) {
  .border-crossing::before {
    display: none;
  }
}

.country-col {
  padding: 4px 28px;
}

.country-col.left {
  padding-left: 0;
}

.country-col.right {
  padding-right: 0;
}

@media(max-width:760px) {
  .country-col {
    padding: 24px 0 0;
  }

  .country-col.left {
    padding-top: 0;
  }
}

.country-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}

.country-head h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
}

.field {
  margin-bottom: 16px;
}

.life-event-row {
  display: grid;
  grid-template-columns: 72px 118px 120px 1fr 1fr 32px;
  gap: 10px;
  align-items: end;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.life-event-row .field {
  margin-bottom: 0;
}

.life-event-row label {
  font-size: 11px;
  color: var(--ink-soft);
}

.life-event-row .remove-event-btn {
  padding: 9px 0;
  width: 32px;
  text-align: center;
}

.life-events-empty {
  color: var(--ink-soft);
  font-size: 13px;
  padding: 4px 0 14px;
}

@media(max-width:760px) {
  .life-event-row {
    grid-template-columns: 1fr 1fr;
  }

  .life-event-row .life-event-label {
    grid-column: 1 / -1;
  }

  .life-event-row .remove-event-btn {
    grid-column: 1 / -1;
    justify-self: end;
    width: auto;
    padding: 6px 14px;
  }
}

.field label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--ink);
}

@media(max-width: 560px) {
  .field label {
    flex-wrap: wrap;
    row-gap: 4px;
  }
}

.field .info {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--paper-2);
  color: var(--ink-soft);
  font-size: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: help;
  border: 1px solid var(--line);
  font-weight: 700;
  flex: none;
}

.field input,
.field select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
  font-size: 14px;
}
/* 16px on phones avoids Safari's zoom-on-focus for text inputs under that size. */
@media(max-width: 560px) {
  .field input,
  .field select {
    font-size: 16px;
  }
}

.field input:focus,
.field select:focus {
  outline: 2px solid var(--harbor);
  outline-offset: 1px;
}

/* Inline validation — a message under the field itself, shown on blur, alongside the existing
   page-level error banner rather than instead of it (the banner also auto-opens a collapsed
   section that holds the error; the inline message here is the "which exact field" detail). */
.field.has-error input,
.field.has-error select {
  border-color: var(--warn);
}
.field-error {
  display: none;
  font-size: 12px;
  color: var(--warn);
  margin-top: 4px;
}
.field.has-error .field-error {
  display: block;
}

.field .tag {
  display: inline-block;
  margin-left: 6px;
  font-size: 11px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 3px;
  letter-spacing: .02em;
}

.tag.treaty {
  background: var(--harbor-soft);
  color: var(--harbor);
}

.tag.watch {
  background: var(--warn-soft);
  color: var(--warn);
}

.tag.uncertain {
  background: var(--gold-soft);
  color: var(--gold-text-on-soft);
}

.tag.good-tag {
  background: var(--good-soft);
  color: var(--good);
}

.employer-match-field {
  margin-top: -8px;
}
.employer-match-field label {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-soft);
}

.extra-accounts-toggle {
  display: block;
  width: 100%;
  background: var(--paper-2);
  border: 1px dashed var(--line);
  border-radius: 8px;
  padding: 12px;
  margin: 20px 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--harbor);
  cursor: pointer;
}
.extra-accounts-toggle:hover { border-color: var(--harbor); }

.extra-accounts-body { margin-top: -4px; }
.extra-accounts-body[hidden] { display: none; }

.assumptions-note {
  font-size: 13px;
  color: var(--ink-soft);
  margin-top: -6px;
  margin-bottom: 20px;
}

.section-explainer {
  font-size: 14px;
  color: var(--ink-soft);
  margin: -8px 0 20px;
  max-width: 640px;
}

.label-plain {
  font-size: 12px;
  color: var(--ink-soft);
  font-weight: 400;
  margin-top: -3px;
  margin-bottom: 6px;
}

.btn-row {
  display: flex;
  gap: 14px;
  margin-top: 8px;
  flex-wrap: wrap;
}

button {
  font-size: 15px;
  font-weight: 600;
  padding: 13px 26px;
  border-radius: 7px;
  border: none;
  cursor: pointer;
}

button.primary {
  background: var(--ink);
  color: var(--paper);
}

button.primary:hover {
  background: #0c141c;
}

button.ghost {
  background: transparent;
  color: var(--ink-soft);
  border: 1px solid var(--line);
}

button.ghost:hover {
  border-color: var(--ink-soft);
}

#results {
  padding-top: 40px;
  border-top: 1px solid var(--line);
}

#results[hidden] {
  display: none;
}

.stamp-row {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 24px;
  margin-bottom: 32px;
}

.stat-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  flex: 1;
  min-width: 300px;
}

@media(max-width:900px) {
  .stat-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media(max-width:400px) {
  .stat-cards {
    grid-template-columns: 1fr;
    min-width: 0;
  }
}

.stat {
  background: var(--surface);
  padding: 20px;
}

.stat .label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ink-soft);
  margin-bottom: 8px;
}

.stat .stat-value {
  font-size: 30px;
  font-weight: 600;
  color: var(--ink);
}

.stat .stat-sub {
  font-size: 12px;
  color: var(--ink-soft);
  margin-top: 4px;
}

.stat .stat-dual {
  font-size: 13px;
  color: var(--ink-soft);
  font-family: 'IBM Plex Mono', monospace;
  margin-top: 4px;
}

.stamp {
  width: 150px;
  flex: none;
  transform: rotate(-7deg);
}

h2.results-title {
  font-size: 26px;
  margin: 0 0 6px;
}

.results-sub {
  color: var(--ink-soft);
  font-size: 14px;
  margin: 0 0 28px;
}

.result-headline {
  font-family: 'Fraunces', serif;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--ink);
  background: var(--paper-2);
  border-left: 4px solid var(--gold);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 18px 22px;
  margin: 0 0 28px;
}
.result-headline .rh-icon { margin-right: 8px; }
.result-headline.not-yet { border-left-color: var(--warn); background: var(--warn-soft); }

.tool-directory { margin-bottom: 28px; }
.tool-directory-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px;
}
.tool-directory-card {
  display: block; background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  padding: 16px; text-decoration: none; color: var(--ink); transition: border-color .15s ease;
}
.tool-directory-card:hover,
.tool-directory-card:focus-visible { border-color: var(--harbor); }
.tool-directory-card:focus-visible { outline: 2px solid var(--harbor); outline-offset: 2px; }
.tool-directory-card .tdc-icon { color: var(--harbor); margin-bottom: 10px; }
.tool-directory-card .tdc-icon svg { width: 24px; height: 24px; display: block; }
.tool-directory-card .tdc-title { font-weight: 700; font-size: 14px; margin-bottom: 4px; }
.tool-directory-card .tdc-sub { font-size: 12px; color: var(--ink-soft); line-height: 1.4; }
.tool-directory-card .tdc-arrow { color: var(--harbor); font-size: 12px; font-weight: 700; margin-top: 8px; display: block; }

.quiz-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px; margin: 28px 0;
}
.quiz-card h3 { margin: 0 0 4px; font-size: 18px; }
.quiz-card .card-sub { color: var(--ink-soft); font-size: 13px; margin: 0; }
.quiz-options {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-top: 16px;
}
.quiz-option {
  display: flex; align-items: center; gap: 12px; text-align: left;
  background: var(--paper-2); border: 1px solid var(--line); border-radius: 8px;
  padding: 14px 16px; font-size: 14px; font-weight: 600; color: var(--ink);
  cursor: pointer; transition: border-color .15s ease, background .15s ease;
}
.quiz-option:hover,
.quiz-option:focus-visible { border-color: var(--harbor); background: var(--harbor-soft); }
.quiz-option:focus-visible { outline: 2px solid var(--harbor); outline-offset: 2px; }
.quiz-option .qo-icon { font-size: 20px; flex: none; }
.quiz-back {
  margin-top: 16px; background: transparent; border: none; color: var(--ink-soft);
  font-size: 13px; font-weight: 600; cursor: pointer; padding: 4px;
}
.quiz-back:hover { color: var(--ink); }

.chart-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 20px 8px;
  margin-bottom: 32px;
}

.chart-legend {
  display: flex;
  gap: 20px;
  font-size: 13px;
  color: var(--ink-soft);
  margin-bottom: 6px;
}

.legend-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  margin-right: 6px;
  vertical-align: middle;
}

.legend-swatch {
  display: inline-block;
  width: 14px;
  height: 10px;
  border-radius: 2px;
  margin-right: 6px;
  vertical-align: middle;
}

.mc-headline {
  font-weight: 600;
  color: var(--ink);
  margin-right: 4px;
}

.mc-caveat {
  font-size: 12px;
  color: var(--ink-soft);
  padding: 4px 2px 12px;
}

.insights {
  background: var(--paper-2);
  border-radius: var(--radius);
  padding: 22px 24px;
  margin-bottom: 32px;
}

.insights h3 {
  margin: 0 0 4px;
  font-size: 19px;
}

.insights ul {
  padding-left: 0;
  list-style: none;
  margin: 0;
}

.insights li {
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
  display: flex;
  gap: 10px;
}

.insights li:last-child {
  border-bottom: none;
}

.insights li .mark {
  flex: none;
  font-size: 15px;
  line-height: 1.5;
}

.insights li:first-child { font-weight: 600; font-size: 16px; }

.considerations h3 {
  margin: 0 0 4px;
  font-size: 18px;
}

.considerations .subhead {
  color: var(--ink-soft);
  font-size: 13px;
  margin-bottom: 16px;
}

.considerations-legend {
  display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; color: var(--ink-soft);
  margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px dashed var(--line);
}
.considerations-legend span { display: flex; align-items: center; gap: 5px; }

.consideration-item {
  background: var(--surface);
  border-left: 4px solid var(--line);
  border-radius: 0 8px 8px 0;
  padding: 13px 16px;
  margin-top: 10px;
}
.considerations-legend + .consideration-item { margin-top: 0; }

.considerations-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.considerations-grid .consideration-item { margin-top: 0; }
@media(max-width: 900px) {
  .considerations-grid { grid-template-columns: repeat(2, 1fr); }
}
@media(max-width: 640px) {
  .considerations-grid { grid-template-columns: 1fr; }
}

.action-items-summary {
  font-size: 14px; color: var(--ink-soft); margin-bottom: 18px;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.action-items-summary strong { color: var(--ink); }
.action-items-progress {
  width: 140px; height: 8px; accent-color: var(--good);
}
.action-items-empty {
  background: var(--good-soft); border-radius: 8px; padding: 16px 18px; color: var(--good); font-size: 14px;
}

/* ---- Empty state: no data entered yet — distinct from the "nothing urgent" state above.
   Shared by Action Items (before any tool has been filled in) and Compare Scenarios
   (fewer than two saved scenarios). ---- */
.empty-state {
  text-align: center; padding: 40px 24px; color: var(--ink-soft);
}
.empty-state .es-icon { font-size: 30px; margin-bottom: 12px; }
.empty-state .es-title { font-family: 'Fraunces', serif; font-size: 18px; font-weight: 600; color: var(--ink); margin-bottom: 8px; }
.empty-state .es-body { font-size: 14px; line-height: 1.55; max-width: 440px; margin: 0 auto 20px; }
.ci-body .ci-link { color: var(--harbor); font-weight: 600; text-decoration: none; }
.ci-body .ci-link:hover { text-decoration: underline; }
.consideration-item.level-good { border-left-color: var(--good); }
.consideration-item.level-warning { border-left-color: var(--warn); }
.consideration-item.level-action { border-left-color: var(--gold); }
.consideration-item.level-info { border-left-color: var(--harbor); }
/* Status icons inherit currentColor via stroke — colored directly off their own
   data-status-icon value (not a .level-* ancestor) so the same rule covers both a
   consideration-item's icon and the standalone legend that explains what each one means.
   Genuinely more consistent than the raw emoji this replaces, whose colors came from the OS
   emoji font rather than the site's own palette. */
.status-icon[data-status-icon="good"] { color: var(--good); }
.status-icon[data-status-icon="warning"] { color: var(--warn); }
.status-icon[data-status-icon="action"] { color: var(--gold-text-on-soft); }
.status-icon[data-status-icon="info"] { color: var(--harbor); }

.ci-checkbox-row {
  display: flex; align-items: flex-start; gap: 10px; cursor: pointer; margin: 0;
}
.ci-checkbox {
  flex: none; width: 18px; height: 18px; margin-top: 1px; accent-color: var(--good); cursor: pointer;
}
.consideration-item.checked-off {
  opacity: .6;
}
.consideration-item.checked-off .ci-title {
  text-decoration: line-through; text-decoration-color: var(--ink-soft);
}
#actionItemsList .ci-body { margin-left: 28px; margin-top: 6px; }

.ci-title {
  font-weight: 700;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.ci-icon { flex: none; font-size: 14px; }
.ci-badge {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  padding: 2px 8px; border-radius: 10px; flex: none;
}
.level-good .ci-badge { background: var(--good-soft); color: var(--good); }
.level-warning .ci-badge { background: var(--warn-soft); color: var(--warn); }
.level-action .ci-badge { background: var(--gold-soft); color: var(--gold-text-on-soft); }
.level-info .ci-badge { background: var(--harbor-soft); color: var(--harbor); }

.ci-body {
  margin: 6px 0 0;
  font-size: 14px;
  color: var(--ink-soft);
}

.table-scroll {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

/* ---- Yearly breakdown: table on desktop, stacked cards on mobile ---- */
.yearly-cards { display: none; }
@media(max-width: 760px) {
  #breakdownDetails .table-scroll, #ddoTableScroll { display: none; }
  .yearly-cards { display: block; }
}

.year-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  padding: 14px 16px; margin-bottom: 10px;
}
.year-card.coast-row { border-color: var(--gold); border-width: 1.5px; }
.year-card.warn-row { border-color: var(--warn); border-width: 1.5px; background: var(--warn-soft); }
.year-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.year-card-year { font-family: 'Fraunces', serif; font-size: 18px; font-weight: 600; }
.year-card-age { font-size: 12px; color: var(--ink-soft); font-family: 'IBM Plex Mono', monospace; }
.year-card-combined { text-align: right; }
.ycc-label { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); }
.ycc-value { font-family: 'IBM Plex Mono', monospace; font-size: 17px; font-weight: 600; color: var(--harbor); }
.year-card-coast {
  font-size: 13px; color: var(--ink-soft); margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line);
}
.year-card-coast strong { color: var(--ink); font-family: 'IBM Plex Mono', monospace; }
.year-card-notes {
  font-size: 12px; color: var(--gold-text-on-soft); background: var(--gold-soft);
  border-radius: 5px; padding: 5px 9px; margin-top: 8px; display: inline-block;
}
.year-card-detail { margin-top: 10px; }
.year-card-detail summary {
  font-size: 13px; font-weight: 600; color: var(--harbor); cursor: pointer; list-style: none;
}
.year-card-detail summary::-webkit-details-marker { display: none; }
.year-card-detail summary::before { content: '▸ '; }
.year-card-detail[open] summary::before { content: '▾ '; }
.year-card-detail-grid { margin-top: 8px; }
.ycd-group-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft);
  margin-top: 10px; margin-bottom: 2px;
}
.ycd-group-label:first-child { margin-top: 0; }
.ycd-row {
  display: flex; justify-content: space-between; font-size: 13px; padding: 4px 0;
  border-bottom: 1px solid var(--line);
}
.ycd-row span:last-child { font-family: 'IBM Plex Mono', monospace; }
.ycd-row.ycd-subtotal { font-weight: 700; border-bottom: none; }

table {
  border-collapse: collapse;
  width: 100%;
  font-size: 13px;
  min-width: 1100px;
}

thead th {
  background: var(--ink);
  color: var(--paper);
  text-align: right;
  padding: 10px 12px;
  position: sticky;
  top: 0;
  font-weight: 600;
  white-space: nowrap;
}

thead th:first-child,
thead th:nth-child(2),
tbody td:first-child,
tbody td:nth-child(2) {
  text-align: left;
}

tbody td {
  padding: 8px 12px;
  text-align: right;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

tbody tr:nth-child(even) {
  background: var(--paper-2);
}

tbody tr.coast-row {
  background: var(--harbor-soft) !important;
}

tbody tr.warn-row {
  background: var(--warn-soft) !important;
}

td.notes {
  text-align: left;
  color: var(--ink-soft);
  font-family: 'Inter', sans-serif;
  font-size: 12px;
}

.error-banner {
  background: var(--warn-soft);
  border: 1px solid var(--warn);
  color: var(--warn);
  border-radius: 8px;
  padding: 14px 18px;
  margin-bottom: 24px;
  font-size: 14px;
  display: none;
}

.error-banner.show {
  display: block;
}

.error-banner ul {
  margin: 6px 0 0;
  padding-left: 18px;
}

.helper-row {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.helper-row .field {
  flex: 1;
  min-width: 180px;
  margin-bottom: 0;
}

button.small {
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 6px;
  background: var(--harbor);
  color: #fff;
  border: none;
  cursor: pointer;
  flex: none;
}

button.small:hover {
  background: #22475c;
}

.helper-hint {
  font-size: 12px;
  color: var(--ink-soft);
  margin: -10px 0 16px;
}

.sensitivity-card h3 {
  margin: 0 0 4px;
  font-size: 18px;
}

.sensitivity-card .subhead {
  color: var(--ink-soft);
  font-size: 13px;
  margin-bottom: 14px;
}

table.sens {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

table.sens th {
  background: var(--paper-2);
  padding: 8px 10px;
  text-align: right;
  font-weight: 600;
}

table.sens th:first-child {
  text-align: left;
}

table.sens td {
  padding: 8px 10px;
  text-align: right;
  border-bottom: 1px solid var(--line);
}

table.sens td:first-child {
  text-align: left;
  color: var(--ink-soft);
}

table.sens tr.current-rate {
  background: var(--harbor-soft);
  font-weight: 600;
}

.export-row {
  display: flex;
  justify-content: flex-end;
  margin: 12px 0 32px;
}

button.export {
  background: transparent;
  border: 1px solid var(--ink);
  color: var(--ink);
  padding: 9px 16px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

button.export:hover {
  background: var(--ink);
  color: var(--paper);
}

.save-note {
  font-size: 12px;
  color: var(--ink-soft);
  margin-top: 10px;
}

.save-indicator {
  font-size: 12px; color: var(--good); font-weight: 600;
  opacity: 0; transition: opacity .3s ease; margin-left: 8px;
}
.save-indicator.show { opacity: 1; }
.save-indicator.show::before { content: '✓ '; }

.sample-banner {
  display: flex; align-items: flex-start; gap: 14px;
  background: var(--harbor-soft); border: 1px solid var(--harbor);
  border-radius: 8px; padding: 16px 18px; margin: 24px 0;
}
.sample-banner .sb-icon { font-size: 20px; flex: none; line-height: 1; }
.sample-banner .sb-icon .icon { width: 20px; height: 20px; vertical-align: -4px; color: var(--harbor); }
.sample-banner .sb-text { font-size: 14px; color: var(--ink); flex: 1; }
.sample-banner .sb-text strong { color: var(--harbor); }
.sample-banner button {
  flex: none; background: var(--harbor); color: #fff; border: none;
  padding: 8px 14px; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer;
}
.sample-banner button:hover { background: #22475c; }
.sample-banner .sb-dismiss {
  flex: none; background: transparent; color: var(--ink-soft); border: 1px solid var(--line);
  padding: 8px 12px;
}
.sample-banner .sb-dismiss:hover { background: transparent; border-color: var(--ink-soft); color: var(--ink); }

@media(max-width: 640px) {
  .sample-banner { flex-wrap: wrap; }
  .sample-banner .sb-text { flex-basis: 100%; }
}

.sample-banner.stale-banner { background: var(--gold-soft); border-color: var(--gold); }
.stale-banner .sb-text strong { color: var(--gold-text-on-soft); }
.stale-banner button:not(.sb-dismiss) { background: var(--gold); color: #fff; }
.stale-banner button:not(.sb-dismiss):hover { background: #96792a; }
.stale-banner[hidden] { display: none; }

.sample-banner.warn-banner { background: var(--gold-soft); border-color: var(--gold); margin: 12px 0; padding: 12px 16px; }
.warn-banner .sb-text { color: var(--gold-text-on-soft); }
.warn-banner .sb-icon .icon { color: var(--gold-text-on-soft); }
.warn-banner[hidden] { display: none; }

.gterm {
  display: inline;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: var(--harbor);
  text-decoration: underline dotted;
  text-underline-offset: 2px;
  cursor: help;
}
.gterm:hover, .gterm:focus-visible { color: var(--ink); }

.gterm-popover {
  position: absolute;
  z-index: 200;
  max-width: 300px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .15);
}
.gterm-popover strong { color: var(--harbor); }
.gterm-popover[hidden] { display: none; }

.gterm-backdrop { position: fixed; inset: 0; z-index: 240; background: rgba(0, 0, 0, .4); }
.gterm-backdrop[hidden] { display: none; }
.gterm-close {
  float: right; background: none; border: none; color: var(--ink-soft); cursor: pointer;
  font-size: 16px; line-height: 1; padding: 4px; margin: -4px -4px 0 8px;
}
.gterm-close:hover { color: var(--ink); }

/* Below 560px a glossary popover becomes a bottom sheet (reusing the mobile drawer's backdrop
   + fixed-bottom pattern from Phase 3) instead of a small floating tooltip — some definitions
   run long enough that a corner popover would overflow or clip on a narrow screen. */
@media(max-width: 560px) {
  .gterm-popover {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 250;
    max-width: none; width: 100%; max-height: 60vh; overflow-y: auto;
    border-radius: 14px 14px 0 0;
    padding: 18px 20px calc(20px + env(safe-area-inset-bottom));
    font-size: 14.5px;
    box-shadow: 0 -8px 30px rgba(0, 0, 0, .25);
  }
}

/* ==================================================================
   Site bar — sticky header replacing the old flat page-nav. Frozen at 5 elements: brand,
   Tools dropdown, Guides, search, theme. Below 760px, Tools/Guides collapse into a
   hamburger-driven slide-in drawer (further down this file).
   ================================================================== */
:root { --nav-h: calc(56px + env(safe-area-inset-top)); }

.site-bar {
  position: sticky; top: 0; z-index: 90;
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
@supports not (backdrop-filter: blur(1px)) {
  .site-bar { background: var(--paper); }
}
.site-bar-inner { display: flex; align-items: center; gap: 20px; min-height: 56px; padding-top: env(safe-area-inset-top); }

.brand { display: flex; align-items: center; gap: 6px; text-decoration: none; color: var(--ink); flex: none; }
.brand .brand-plus { color: var(--ink-soft); font-weight: 400; font-size: 13px; }
.brand .brand-name { font-family: 'Fraunces', serif; font-size: 16px; font-weight: 600; margin-left: 2px; }
@media(max-width: 480px) { .brand .brand-name { display: none; } }

.site-nav { display: flex; align-items: center; gap: 4px; margin-right: auto; }
@media(max-width: 760px) { .site-nav { display: none; } }

.nav-dd { position: relative; }
.nav-item {
  background: none; border: none; color: var(--ink-soft); font-size: 14px; font-weight: 600;
  font-family: inherit; padding: 8px 10px; border-radius: 6px; cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center;
}
.nav-item:hover, .nav-item[aria-expanded="true"] { color: var(--ink); background: var(--paper-2); }
a.nav-item[aria-current="page"] { color: var(--ink); }

.mega-panel {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 90;
  width: min(560px, 80vw);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .18);
  padding: 18px;
}
.mega-panel[hidden] { display: none; }
.mp-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.mp-col-label {
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: 8px;
}
.mp-item {
  display: flex; align-items: flex-start; gap: 10px; padding: 7px 6px; border-radius: 6px;
  text-decoration: none; color: var(--ink); margin: 0 -6px;
}
.mp-item:hover, .mp-item[aria-current="page"] { background: var(--harbor-soft); }
.mp-icon { flex: none; color: var(--harbor); display: flex; margin-top: 2px; }
.mp-icon svg { width: 17px; height: 17px; display: block; }
.mp-text { display: flex; flex-direction: column; min-width: 0; }
.mp-title { font-size: 13.5px; font-weight: 600; }
.mp-desc { font-size: 12px; color: var(--ink-soft); line-height: 1.35; margin-top: 1px; }
.mp-all {
  display: block; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line);
  font-size: 13px; font-weight: 600; color: var(--harbor); text-decoration: none;
}
.mp-all:hover { text-decoration: underline; }
@media(max-width: 640px) {
  .mp-cols { grid-template-columns: 1fr; }
  .mega-panel { width: min(320px, 88vw); }
}

.bar-actions { display: flex; align-items: center; gap: 6px; flex: none; }
.bar-btn {
  background: none; border: 1px solid transparent; color: var(--ink-soft); font-family: inherit;
  border-radius: 20px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
}
.bar-btn:hover { color: var(--ink); border-color: var(--line); }
.bar-btn.icon-btn { width: 36px; height: 36px; justify-content: center; padding: 0; }
.bar-btn.icon-btn .icon { width: 17px; height: 17px; }
#searchToolsBtn { padding: 7px 12px; font-size: 13px; font-weight: 600; }
#searchToolsBtn kbd {
  font-family: 'IBM Plex Mono', monospace; font-size: 10px; color: var(--ink-soft);
  background: var(--paper-2); border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px;
}
@media(max-width: 640px) { #searchToolsBtn .btn-search-label, #searchToolsBtn kbd { display: none; } }

.nav-toggle { display: none; }
@media(max-width: 760px) { .nav-toggle { display: inline-flex; } }

/* ---- Mobile drawer ---- */
.drawer-root { position: fixed; inset: 0; z-index: 240; }
.drawer-root[hidden] { display: none; }
.drawer-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .4); }
.drawer {
  position: absolute; top: 0; right: 0; bottom: 0; z-index: 250;
  width: min(85vw, 360px);
  background: var(--paper); border-left: 1px solid var(--line);
  box-shadow: -8px 0 30px rgba(0, 0, 0, .2);
  overflow-y: auto;
  padding: 18px calc(16px + env(safe-area-inset-right)) calc(18px + env(safe-area-inset-bottom)) 16px;
}
body.drawer-open { overflow: hidden; }

.dr-search {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: var(--surface); border: 1px solid var(--line); border-radius: 8px;
  padding: 12px 14px; font-size: 14px; color: var(--ink-soft); font-family: inherit;
  margin-bottom: 18px; cursor: pointer;
}
.dr-search svg { width: 17px; height: 17px; flex: none; }
.dr-group { margin-bottom: 18px; }
.dr-group-label {
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: 6px; padding: 0 4px;
}
.dr-link {
  display: flex; align-items: center; gap: 12px; padding: 12px 10px; border-radius: 8px;
  text-decoration: none; color: var(--ink); font-size: 14.5px; font-weight: 500; min-height: 44px;
}
.dr-link svg { width: 18px; height: 18px; flex: none; color: var(--harbor); }
.dr-link:hover, .dr-link[aria-current="page"] { background: var(--harbor-soft); }

.tool-search-overlay {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(0, 0, 0, .4);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 12vh 16px 16px;
}
.tool-search-overlay[hidden] { display: none; }
.tool-search-modal {
  width: 100%; max-width: 480px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .25);
  overflow: hidden;
}
.tool-search-modal input {
  width: 100%; border: none; border-bottom: 1px solid var(--line);
  background: transparent; color: var(--ink);
  padding: 14px 16px; font-size: 15px; font-family: inherit;
}
.tool-search-modal input:focus { outline: none; }
@media(max-width: 560px) {
  .tool-search-modal input { font-size: 16px; }
}
.tool-search-results { list-style: none; margin: 0; padding: 6px; max-height: 340px; overflow-y: auto; }
.tsr-item {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 10px; border-radius: 6px; cursor: pointer;
}
.tsr-item.active, .tsr-item:hover { background: var(--harbor-soft); }
.tsr-icon { flex: none; color: var(--harbor); display: flex; }
.tsr-icon svg { width: 18px; height: 18px; display: block; }
.tsr-text { display: flex; flex-direction: column; min-width: 0; }
.tsr-title { font-size: 14px; font-weight: 600; color: var(--ink); }
.tsr-desc { font-size: 12px; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tsr-empty { padding: 14px 10px; font-size: 13px; color: var(--ink-soft); }

.scenarios-panel {
  display: flex; flex-direction: column; gap: 10px;
}
.scenarios-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.scenarios-row select, .scenarios-row input[type="text"] {
  flex: 1; min-width: 180px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--surface); color: var(--ink); font-size: 13px; font-family: 'Inter', sans-serif;
}
.scenarios-row button { flex: none; }
@media(max-width: 560px) {
  .scenarios-row select, .scenarios-row input[type="text"] { font-size: 16px; }
}
.scenario-feedback { font-size: 13px; color: var(--good); font-weight: 600; opacity: 0; transition: opacity .3s ease; }
.sp-note { font-size: 12px; color: var(--ink-soft); }
.sp-note a { color: var(--harbor); font-weight: 600; text-decoration: none; }
.sp-note a:hover { text-decoration: underline; }

.stored-data-view {
  max-height: 260px; overflow: auto; margin: 10px 0; padding: 12px; border: 1px solid var(--line);
  border-radius: 6px; background: var(--surface); font-size: 12px; white-space: pre-wrap; word-break: break-word;
}

.back-to-top {
  position: fixed; bottom: calc(22px + env(safe-area-inset-bottom)); right: calc(22px + env(safe-area-inset-right)); z-index: 30;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--ink); color: var(--paper); border: none;
  font-size: 18px; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.25);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.back-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { background: var(--harbor); }
@media print { .back-to-top { display: none !important; } }

/* Mobile-only sticky bar mirroring the page's headline stat while scrolling through a long
   form, with a CTA to jump straight to the full results. Desktop already keeps that stat
   visible without help (it's above the fold or a quick scroll away), so this stays mobile-only. */
.sticky-result-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  background: var(--paper); border-top: 1px solid var(--line);
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  padding-left: calc(16px + env(safe-area-inset-left));
  padding-right: calc(16px + env(safe-area-inset-right));
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, .1);
}
.sticky-result-bar[hidden] { display: none; }
@media(min-width: 761px) { .sticky-result-bar { display: none !important; } }
.srb-stat { display: flex; flex-direction: column; min-width: 0; }
.srb-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); }
.srb-value { font-family: 'IBM Plex Mono', monospace; font-size: 16px; font-weight: 700; color: var(--harbor); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.srb-cta {
  flex: none; background: var(--ink); color: var(--paper); text-decoration: none;
  padding: 10px 16px; border-radius: 6px; font-size: 13px; font-weight: 600; white-space: nowrap;
}
@media print { .sticky-result-bar { display: none !important; } }
/* Keeps the "back to top" button from sitting under the sticky result bar on mobile. */
body.has-sticky-result-bar .back-to-top {
  bottom: calc(78px + env(safe-area-inset-bottom));
}
@media(min-width: 761px) {
  body.has-sticky-result-bar .back-to-top { bottom: calc(22px + env(safe-area-inset-bottom)); }
}

.not-sure-hint {
  font-size: 12px; color: var(--ink-soft); margin-top: 4px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.not-sure-hint button.use-avg {
  flex: none; background: transparent; border: 1px solid var(--harbor); color: var(--harbor);
  padding: 4px 10px; border-radius: 14px; font-size: 12px; font-weight: 600; cursor: pointer;
}
.not-sure-hint button.use-avg:hover { background: var(--harbor); color: #fff; }

.typical-range { font-size: 12px; color: var(--ink-soft); margin-top: 4px; }

table.sens {
  min-width: 0;
  width: 100%;
}

table.sens td,
table.sens th {
  word-wrap: break-word;
  white-space: normal;
}

.sensitivity-card .table-scroll {
  border: none;
  border-radius: 0;
  overflow-x: auto;
}


.help-section {
  margin: 32px 0;
}

.help-section summary {
  cursor: pointer;
  font-family: 'Fraunces', serif;
  font-size: 21px;
  font-weight: 600;
  padding: 14px 0;
  list-style: none;
  position: relative;
}

.help-section summary::-webkit-details-marker {
  display: none;
}

.help-section summary::after {
  content: '+';
  position: absolute;
  right: 0;
  top: 12px;
  font-size: 22px;
  color: var(--gold-text-on-soft);
  transition: transform .15s ease;
}

.help-section[open] summary::after {
  content: '–';
}

.help-section .help-body {
  padding: 6px 0 20px;
}

.help-steps {
  counter-reset: step;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
}

.help-steps li {
  counter-increment: step;
  position: relative;
  padding: 0 0 16px 34px;
  font-size: 15px;
  color: var(--ink);
}

.help-steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 22px;
  height: 22px;
  background: var(--harbor);
  color: #fff;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'IBM Plex Mono', monospace;
}

.glossary dt {
  font-weight: 700;
  font-size: 14px;
  margin-top: 12px;
}

.glossary dt:first-child {
  margin-top: 0;
}

.glossary dd {
  margin: 3px 0 0;
  font-size: 14px;
  color: var(--ink-soft);
}

.fx-hint-row {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 6px;
  flex-wrap: wrap;
}

.fx-hint-row .helper-hint {
  margin: 0;
  flex: 1;
  min-width: 200px;
}

button.small.ghost-small {
  background: transparent;
  border: 1px solid var(--harbor);
  color: var(--harbor);
}

button.small.ghost-small:hover {
  background: var(--harbor);
  color: #fff;
}

button.small:disabled {
  opacity: .5;
  cursor: not-allowed;
}

footer {
  padding: 32px 0;
  color: var(--ink-soft);
  font-size: 13px;
  border-top: 1px solid var(--line);
  margin-top: 40px;
}
footer a { color: var(--harbor); text-decoration: none; }
footer a:hover { text-decoration: underline; }
footer .footer-feedback { display: block; margin-top: 4px; }

/* ---- Next-step nudge: one curated suggestion at the end of a tool's results, so there's
   somewhere to go from here besides scrolling back up to the header nav. ---- */
.next-step-nudge {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  background: var(--paper-2); border-radius: var(--radius);
  padding: 14px 18px; margin: 8px 0 24px; font-size: 14px; color: var(--ink-soft);
}
.next-step-nudge .nsn-label { font-weight: 600; color: var(--ink); flex: none; }
.next-step-nudge a { color: var(--harbor); font-weight: 600; text-decoration: none; }
.next-step-nudge a:hover { text-decoration: underline; }

.freshness-note { margin: 24px 0 0; font-size: 12px; color: var(--ink-soft); }
.freshness-note summary { cursor: pointer; list-style: none; font-weight: 600; }
.freshness-note summary::-webkit-details-marker { display: none; }
.freshness-note summary::before { content: '▸ '; }
.freshness-note[open] summary::before { content: '▾ '; }
.freshness-note ul { margin: 8px 0 0; padding-left: 18px; }
.freshness-note li { margin-bottom: 6px; }
.freshness-note li:last-child { margin-bottom: 0; }
.freshness-note strong { color: var(--ink); }

/* Methodology/sources pages: one card per figure or rule, each pointing at the primary-law
   and/or CRA-guidance source it's drawn from. */
.citation-list { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 12px; }
.citation-item {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 16px;
}
.citation-item .citation-claim { font-weight: 700; font-size: 14.5px; color: var(--ink); margin: 0 0 8px; }
.citation-sources { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.citation-sources li { font-size: 12.5px; color: var(--ink-soft); line-height: 1.5; }
.citation-sources a { color: var(--harbor); font-weight: 600; }
.citation-tag {
  display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .03em;
  text-transform: uppercase; padding: 1px 7px; border-radius: 20px;
  background: var(--paper-2); border: 1px solid var(--line); color: var(--ink-soft); margin-right: 7px;
}
.method-jump { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 28px; }
.method-jump a {
  display: inline-flex; align-items: center;
  font-size: 12.5px; font-weight: 600; color: var(--ink-soft); text-decoration: none;
  background: var(--paper-2); border: 1px solid var(--line); border-radius: 20px; padding: 5px 12px;
}
.method-jump a:hover { color: var(--ink); border-color: var(--ink-soft); }

body { transition: background .2s ease, color .2s ease; }

.preset-row { display: flex; align-items: center; gap: 10px; margin: -8px 0 20px; flex-wrap: wrap; }
.preset-row .preset-label { font-size: 13px; color: var(--ink-soft); font-weight: 600; }
button.preset-btn {
  padding: 7px 13px; font-size: 13px; font-weight: 600; border-radius: 16px;
  background: var(--surface); border: 1px solid var(--line); color: var(--ink);
}
button.preset-btn:hover { border-color: var(--harbor); color: var(--harbor); }
button.preset-btn.active { background: var(--harbor); border-color: var(--harbor); color: #fff; }

.progress-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px 20px; margin-bottom: 32px;
}
.progress-label { display: flex; justify-content: space-between; font-size: 13px; font-weight: 600; margin-bottom: 10px; }
.progress-label #progressPct { font-family: 'IBM Plex Mono', monospace; color: var(--harbor); }
.progress-track { background: var(--paper-2); border-radius: 20px; height: 14px; overflow: hidden; }
.progress-fill {
  height: 100%; width: 0%; border-radius: 20px;
  background: linear-gradient(90deg, var(--harbor), var(--gold));
  transition: width .5s ease;
}
.progress-fill.reached { background: linear-gradient(90deg, var(--good), var(--gold)); }
.progress-note { font-size: 12px; color: var(--ink-soft); margin-top: 8px; }

.chart-wrap { position: relative; }
.chart-tooltip {
  position: absolute; display: none; background: var(--ink); color: var(--paper);
  padding: 9px 12px; border-radius: 7px; font-size: 12px; pointer-events: none;
  white-space: nowrap; z-index: 5; box-shadow: 0 6px 16px rgba(0,0,0,.2); top: 8px;
}
.chart-tooltip .tip-age { font-weight: 700; margin-bottom: 5px; color: var(--gold); font-family: 'IBM Plex Mono', monospace; }
.chart-tooltip .tip-line { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.tip-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none; }

.chart-actions { display: flex; gap: 4px; }

/* ---- Chart expand-to-fullscreen ---- */
/* Same z-index tier as the mobile drawer/glossary sheet (240/250) — an in-page overlay, not
   meant to outrank the global search modal (300) if both were somehow triggered at once. */
.chart-fullscreen-overlay { position: fixed; inset: 0; z-index: 240; }
.chart-fullscreen-overlay[hidden] { display: none; }
.chart-fullscreen-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .5); }
.chart-fullscreen-panel {
  position: absolute; z-index: 250; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(94vw, 1100px); max-height: 90vh; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .3); padding: 20px;
}
.chart-fullscreen-close {
  position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 1px solid var(--line); border-radius: 50%; color: var(--ink-soft); cursor: pointer;
}
.chart-fullscreen-close:hover { color: var(--ink); }
.chart-fullscreen-close .icon { width: 15px; height: 15px; }
.chart-fullscreen-slot .chart-wrap { margin-top: 8px; }
body.chart-fullscreen-open { overflow: hidden; }

.share-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.share-feedback { font-size: 13px; color: var(--good); font-weight: 600; opacity: 0; transition: opacity .3s ease; }

@media print {
  .site-bar, .mega-panel, .drawer-root, .chart-fullscreen-overlay, .chart-actions, form, .help-section, .btn-row, .save-note, .export-row,
  #exportCsvBtn, button, .fx-hint-row, .share-row, .tool-section,
  .scenarios-panel, .tool-directory, .tools-hub, .results-tools-jump,
  .tool-header { display: none !important; }
  body { background: #fff; color: #000; }
  #results { border-top: none; padding-top: 0; }
  .table-scroll { overflow: visible; border: none; }
  .chart-tooltip, .donut-tooltip { display: none !important; }
  .wrap { max-width: 100%; padding: 0 12px; }
}

/* ---- Roadmap timeline ---- */
.roadmap-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px 24px 20px; margin-bottom: 32px; overflow: visible;
}
.roadmap-card h3 { margin: 0 0 18px; font-size: 18px; }
.roadmap-track {
  position: relative; height: 4px; background: var(--paper-2); border-radius: 4px;
  margin: 58px 62px 68px;
}
.roadmap-fill { position: absolute; top: 0; left: 0; height: 100%; background: var(--gold); border-radius: 4px; }
.roadmap-marker { position: absolute; top: 50%; left: 0; width: 0; height: 0; }
.roadmap-dot {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 14px; height: 14px; border-radius: 50%;
  border: 3px solid var(--surface); box-shadow: 0 0 0 1.5px var(--line);
}
.roadmap-label-group {
  position: absolute; left: 50%; transform: translateX(-50%);
  width: 120px; text-align: center;
}
.roadmap-marker:not(.below) .roadmap-label-group { bottom: 16px; }
.roadmap-marker.below .roadmap-label-group { top: 16px; }
.roadmap-marker .rm-label { font-size: 12px; font-weight: 700; white-space: nowrap; }
.roadmap-marker .rm-age { font-size: 11px; color: var(--ink-soft); font-family: 'IBM Plex Mono', monospace; white-space: nowrap; margin-top: 2px; }
@media(max-width:520px) {
  .roadmap-card { padding: 20px 16px 18px; }
  .roadmap-track { margin: 52px 38px 60px; }
  .roadmap-label-group { width: 80px; }
  .roadmap-marker .rm-label { font-size: 10px; }
  .roadmap-marker .rm-age { font-size: 10px; }
}

/* ---- Composition donut ---- */
.composition-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px; margin-bottom: 32px;
}
.composition-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
.composition-head h3 { margin: 0; font-size: 18px; }
.view-tabs { display: flex; gap: 6px; background: var(--paper-2); padding: 4px; border-radius: 20px; overflow-x: auto; min-width: 0; max-width: 100%; }
.view-tabs button {
  flex: none; padding: 6px 14px; font-size: 13px; font-weight: 600; border-radius: 16px; border: none;
  background: transparent; color: var(--ink-soft);
}
.view-tabs button.active { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.view-tabs button:hover { color: var(--ink); }
.view-tabs button:focus-visible { outline: 2px solid var(--harbor); outline-offset: 2px; }

@media(max-width: 560px) {
  .not-sure-hint button.use-avg,
  button.preset-btn,
  .view-tabs button,
  .year-card-detail summary,
  .freshness-note summary {
    padding-top: 10px;
    padding-bottom: 10px;
    min-height: 40px;
  }
  .view-tabs {
    flex-wrap: wrap;
    overflow-x: visible;
  }
  .view-tabs button {
    padding-left: 10px;
    padding-right: 10px;
    font-size: 12px;
  }
}
.composition-body { display: flex; gap: 32px; align-items: center; flex-wrap: wrap; }
.donut-wrap { position: relative; width: 180px; height: 180px; flex: none; }
.donut { width: 100%; height: 100%; border-radius: 50%; }
.donut-center {
  position: absolute; top: 18%; left: 18%; width: 64%; height: 64%; border-radius: 50%;
  background: var(--surface); display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.donut-center .dc-value { font-family: 'IBM Plex Mono', monospace; font-weight: 600; font-size: 15px; }
.donut-center .dc-label { font-size: 11px; color: var(--ink-soft); margin-top: 2px; }
.donut-legend { flex: 1; min-width: 200px; list-style: none; margin: 0; padding: 0; }
.donut-legend li { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; padding: 7px 0; border-bottom: 1px solid var(--line); }

@media(max-width: 480px) {
  .donut-legend li { flex-wrap: wrap; row-gap: 3px; }
  .donut-legend .dl-val { margin-left: auto; }
}
.donut-legend li:last-child { border-bottom: none; }
.donut-legend .dl-name { display: flex; align-items: center; gap: 8px; }
.donut-legend .dl-dot { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.donut-legend .dl-val { font-family: 'IBM Plex Mono', monospace; color: var(--ink-soft); }
.composition-caveat { font-size: 12px; color: var(--ink-soft); margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--line); }

/* ---- Donut hover interactions ---- */
.donut-seg { transition: stroke-width .15s ease, opacity .15s ease; cursor: pointer; }
.donut-wrap.donut-hovering .donut-seg:not(.active) { opacity: .5; }
.donut-seg.active { stroke-width: 19; }
.donut-legend li { cursor: pointer; border-radius: 6px; padding-left: 6px; padding-right: 6px; margin: 0 -6px; transition: background .15s ease; }
.donut-legend li.active { background: var(--paper-2); }
.donut-tooltip {
  position: absolute; display: none; background: var(--ink); color: var(--paper);
  padding: 6px 10px; border-radius: 6px; font-size: 12px; pointer-events: none;
  white-space: nowrap; z-index: 5; box-shadow: 0 6px 16px rgba(0,0,0,.2);
}

/* ---- Chart mode tabs + sliders ---- */
.chart-controls { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.slider-panel {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px 20px; margin-bottom: 20px;
}
.slider-panel h4 { margin: 0 0 14px; font-size: 14px; }
.slider-row { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.slider-row:last-child { margin-bottom: 0; }
.slider-row label { flex: none; width: 150px; font-size: 13px; font-weight: 600; }
.slider-row input[type="range"] { flex: 1; accent-color: var(--harbor); }
.slider-row .slider-val { flex: none; width: 56px; text-align: right; font-family: 'IBM Plex Mono', monospace; font-size: 13px; color: var(--harbor); }

@media(max-width: 560px) {
  .slider-row { flex-wrap: wrap; row-gap: 6px; }
  .slider-row label { width: 100%; }
  .slider-row input[type="range"] { flex: 1 1 auto; min-width: 0; }
  .slider-row .slider-val { width: auto; margin-left: auto; }
}
.scenario-legend { display: flex; gap: 16px; font-size: 13px; color: var(--ink-soft); flex-wrap: wrap; }

/* ---- Income stack chart ---- */
.income-stack-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px 20px 8px; margin-bottom: 32px;
}
.income-stack-card h3 { margin: 0 0 4px; font-size: 18px; }
.income-stack-card .subhead { color: var(--ink-soft); font-size: 13px; margin-bottom: 6px; }

/* ---- Standalone tool header (used once per tool page, above its content) ---- */
.tool-header { border-top: 1px solid var(--line); padding-top: 48px; margin-bottom: 6px; }
.tool-header h1 { font-size: 26px; margin: 0 0 8px; display: flex; align-items: center; gap: 10px; }
.tool-header h1 .tool-icon { color: var(--harbor); flex: none; display: flex; }
.tool-header h1 .tool-icon svg { width: 26px; height: 26px; display: block; }
.tool-header .tool-sub { color: var(--ink-soft); font-size: 15px; margin: 0 0 28px; }
.tool-breadcrumb {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; color: var(--ink-soft);
  text-decoration: none; margin-bottom: 12px;
}
.tool-breadcrumb:hover { color: var(--harbor); }

/* ---- All-tools hub (landing directory, always visible) ---- */
.tools-hub { margin: 36px 0; }
.tools-hub-title { font-size: 22px; margin: 0 0 4px; }

.faq-section { margin: 36px 0; }
.faq-list .help-section { margin: 0; border-top: 1px solid var(--line); }
.faq-list .help-section:first-child { border-top: none; }
.tools-hub-sub { color: var(--ink-soft); font-size: 14px; margin: 0 0 18px; }
.tools-hub-progress { color: var(--good); font-size: 13px; font-weight: 600; margin: -10px 0 18px; }
.tdc-check { color: var(--good); font-weight: 700; margin-left: 4px; }

/* ---- Compact jump row inside results (replaces the full directory grid there) ---- */
.results-tools-jump {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
  font-size: 13px; color: var(--ink-soft); margin-bottom: 28px;
}
.results-tools-jump a { color: var(--harbor); text-decoration: none; }
.results-tools-jump a:hover { text-decoration: underline; }
/* "On this page" row sits right above the cross-tool "Jump to" row — tighten the gap between
   them and dial its links down a notch so the two don't compete for attention. */
.results-page-nav { margin-bottom: 10px; padding-bottom: 12px; border-bottom: 1px dashed var(--line); }
.results-page-nav a { font-size: 13px; }

/* Sticky wizard-chrome header stays pinned while scrolling the results below it — give
   in-page anchor targets enough top clearance that it doesn't cover the heading they jump to. */
#statsSection, #insightsSection, #roadmapSection, #compositionSection, #chartSection,
#incomeStackSection, #sensitivityDetails, #goalSeekDetails, #considerationsSection,
#breakdownDetails, #scenariosPanel { scroll-margin-top: calc(160px + var(--nav-h)); }

.tool-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px; margin-bottom: 24px;
}
.tool-card h3 { margin: 0 0 4px; font-size: 17px; }
.tool-card .card-sub { color: var(--ink-soft); font-size: 13px; margin-bottom: 18px; }

.prefill-note {
  font-size: 12px; color: var(--ink-soft); display: flex; align-items: center; gap: 6px; margin: -8px 0 16px;
}
.prefill-note .pn-icon { color: var(--gold-text-on-soft); }

.reassurance-box {
  background: var(--good-soft); border-left: 4px solid var(--good); border-radius: 0 8px 8px 0;
  padding: 14px 16px; font-size: 14px; color: var(--ink); margin-bottom: 20px;
}
.reassurance-box strong { color: var(--good); }
.reassurance-icon { display: inline-flex; vertical-align: -3px; margin-right: 2px; }
.reassurance-icon svg { width: 15px; height: 15px; display: block; }
.reassurance-box.warn { background: var(--warn-soft); border-left-color: var(--warn); }
.reassurance-box.warn strong { color: var(--warn); }

.goal-seek-card .view-tabs { margin-bottom: 16px; }
.goal-seek-card .reassurance-box { margin-top: 14px; margin-bottom: 0; }

.snapshot-footer {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}

.result-strip {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  margin-bottom: 20px;
}
/* The homepage snapshot packs up to 6 tiles into one row at the default 150px minimum — too
   narrow for its longer labels/values ("Est. RRSP withholding (at retirement)", "CA$157,310"),
   which wrap and stretch every tile in the row to match. Wider minimum wraps to fewer per row
   instead, so each tile keeps its label and value on one line. */
.result-strip.snapshot-strip { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.result-strip .rs-stat { background: var(--surface); padding: 16px 18px; }
.result-strip .rs-stat .rs-label { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); margin-bottom: 6px; }
.result-strip .rs-stat .rs-label .rs-label-note { text-transform: none; letter-spacing: normal; opacity: .75; }
.result-strip .rs-stat .rs-value { font-family: 'IBM Plex Mono', monospace; font-size: 24px; font-weight: 600; overflow-wrap: break-word; }
/* For prose values ("In ~19 yrs (age 49)") rather than short dollar figures — the 24px default
   wraps a sentence onto 2-3 lines and stretches the whole grid row to match, which reads as
   oversized/cramped next to its single-line neighbors. */
.result-strip .rs-stat .rs-value.rs-value-status { font-size: 16px; line-height: 1.35; }

.deferral-note {
  font-size: 13px; padding: 12px 14px; border-radius: 8px; margin-bottom: 16px;
}
.deferral-note.auto { background: var(--good-soft); color: var(--good); }
.deferral-note.security { background: var(--gold-soft); color: var(--gold-text-on-soft); }

.claim-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 20px; }
@media(max-width:760px) { .claim-grid { grid-template-columns: 1fr; } }
.claim-col { background: var(--paper-2); border-radius: 8px; padding: 16px; }
.claim-col h4 { margin: 0 0 12px; font-size: 14px; display: flex; align-items: center; gap: 8px; }
.claim-col .claim-amount { font-family: 'IBM Plex Mono', monospace; font-size: 20px; font-weight: 600; margin-top: 10px; }
.claim-col .claim-factor { font-size: 12px; color: var(--ink-soft); }

table.strategy-table { width: 100%; min-width: 0; table-layout: fixed; border-collapse: collapse; font-size: 13px; margin-bottom: 16px; }
table.strategy-table th, table.strategy-table td { word-wrap: break-word; white-space: normal; }
table.strategy-table th { background: var(--paper-2); padding: 8px 10px; text-align: right; font-weight: 600; }
table.strategy-table th:first-child, table.strategy-table td:first-child { text-align: left; }
table.strategy-table td { padding: 8px 10px; text-align: right; border-bottom: 1px solid var(--line); }
table.strategy-table tr.your-choice { background: var(--harbor-soft); font-weight: 600; }

table.compare-table { width: 100%; min-width: 0; table-layout: fixed; border-collapse: collapse; font-size: 13px; }
table.compare-table th, table.compare-table td { word-wrap: break-word; padding: 9px 12px; text-align: right; border-bottom: 1px solid var(--line); }
table.compare-table th:first-child, table.compare-table td:first-child { text-align: left; color: var(--ink-soft); font-weight: 400; }
table.compare-table th { background: var(--paper-2); font-weight: 700; }
table.compare-table th.col-a { color: var(--harbor); }
table.compare-table th.col-b { color: var(--maple); }
table.compare-table th.col-c { color: var(--gold-text-on-soft); }
.compare-currency-note {
  font-size: 12px; color: var(--ink-soft); background: var(--gold-soft); padding: 10px 12px;
  border-radius: 6px; margin-top: 12px;
}
.strategy-table-scroll { overflow-x: auto; }

.apply-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.apply-row button { background: var(--gold); color: #fff; border: none; padding: 10px 18px; border-radius: 6px; font-size: 14px; font-weight: 600; cursor: pointer; }
.apply-row button:hover { background: #96792a; }
.apply-feedback { font-size: 13px; color: var(--good); font-weight: 600; opacity: 0; transition: opacity .3s ease; }
.apply-feedback a { color: inherit; text-decoration: underline; }

/* ==================================================================
   Guided onboarding wizard
   ================================================================== */
.wizard-chrome {
  position: sticky; top: var(--nav-h); z-index: 20;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px 20px 16px; margin-bottom: 28px;
  box-shadow: 0 4px 16px rgba(0,0,0,.06);
}
[data-theme="dark"] .wizard-chrome { box-shadow: 0 4px 16px rgba(0,0,0,.35); }

.wizard-progress-track {
  height: 5px; background: var(--paper-2); border-radius: 4px; overflow: hidden; margin-bottom: 16px;
}
.wizard-progress-fill {
  height: 100%; width: 25%; background: linear-gradient(90deg, var(--harbor), var(--gold));
  border-radius: 4px; transition: width .35s ease;
}

/* Steps row + meta text share one line on desktop (meta trails right-aligned) instead of
   stacking as two separate rows — same information, one less band of chrome before the
   step's own heading. Wraps to its own line on narrow viewports since flex-wrap allows it. */
.wizard-steps-meta-row { display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; margin-bottom: 14px; }
.wizard-steps-row { display: flex; gap: 8px; flex: 1; min-width: 200px; flex-wrap: wrap; }
.wizard-step-pill {
  flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--paper-2); border: 1.5px solid transparent; color: var(--ink-soft);
  border-radius: 20px; padding: 7px 10px; font-size: 13px; font-weight: 600; cursor: pointer;
}
.wizard-step-pill .wsp-num {
  width: 18px; height: 18px; border-radius: 50%; background: var(--line); color: var(--ink);
  display: flex; align-items: center; justify-content: center; font-size: 11px; flex: none;
  font-family: 'IBM Plex Mono', monospace;
}
.wizard-step-pill.active { background: var(--harbor-soft); color: var(--harbor); border-color: var(--harbor); }
.wizard-step-pill.active .wsp-num { background: var(--harbor); color: #fff; }
.wizard-step-pill.completed .wsp-num { background: var(--good); color: #fff; }
.wizard-chrome.checklist-mode .wizard-step-pill { background: var(--good-soft); color: var(--good); }
.wizard-chrome.checklist-mode .wizard-step-pill .wsp-num { background: var(--good); color: #fff; }
.wizard-chrome.checklist-mode .wizard-progress-fill { background: var(--good); }

.wizard-meta {
  font-size: 12px; color: var(--ink-soft); font-family: 'IBM Plex Mono', monospace;
  flex: none; white-space: nowrap; margin-left: auto;
}
.wizard-step-header h3 {
  font-family: 'Fraunces', serif; font-size: 20px; font-weight: 600; margin: 0 0 4px;
}
.wizard-step-header p { font-size: 14px; color: var(--ink-soft); margin: 0; }
.wizard-chrome.checklist-mode .wizard-step-header { display: none; }

.snapshot-stats-row { display: none; align-items: center; gap: 24px; flex-wrap: wrap; }
.wizard-chrome.checklist-mode .snapshot-stats-row,
.wizard-chrome.snapshot-mode .snapshot-stats-row { display: flex; }
.wizard-chrome.snapshot-mode .wizard-progress-track,
.wizard-chrome.snapshot-mode .wizard-steps-row,
.wizard-chrome.snapshot-mode .wizard-meta { display: none; }
.wizard-chrome.snapshot-mode { padding-top: 14px; }
.ss-stat { display: flex; flex-direction: column; gap: 2px; }
.ss-label { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); }
.ss-value { font-family: 'IBM Plex Mono', monospace; font-size: 17px; font-weight: 600; color: var(--harbor); }
.ss-flag {
  margin-left: auto; font-size: 13px; font-weight: 600; color: var(--gold-text-on-soft);
  background: var(--gold-soft); padding: 7px 14px; border-radius: 16px; text-decoration: none;
  max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ss-flag:empty { display: none; }
.ss-dismiss {
  flex: none; background: transparent; border: none; color: var(--ink-soft); font-size: 18px;
  cursor: pointer; padding: 2px 6px; line-height: 1;
}
.ss-dismiss:hover { color: var(--ink); }
@media(max-width: 560px) {
  .snapshot-stats-row { gap: 14px; }
  .ss-value { font-size: 15px; }
  .ss-flag { max-width: 140px; }
}

@media(max-width: 560px) {
  .wizard-step-pill .wsp-label { display: none; }
  .wizard-step-pill { flex: none; width: 44px; height: 40px; padding: 0; }
  .wizard-chrome { padding: 14px 14px 12px; }
  .wizard-progress-track { margin-bottom: 12px; }
  .wizard-steps-meta-row { margin-bottom: 10px; }
  .wizard-meta { font-size: 11px; margin-left: 0; }
  .wizard-step-header h3 { font-size: 17px; }
  .wizard-step-header p { font-size: 13px; }
}

.wizard-nav-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.wizard-nav-row[hidden] { display: none; }
.wizard-skip-link {
  background: none; border: none; color: var(--ink-soft); font-size: 13px; text-decoration: underline;
  cursor: pointer; margin-left: auto; padding: 8px 4px;
}
.wizard-skip-link:hover { color: var(--ink); }

/* While the wizard is active, hide the classic multi-step chrome */
body.wizard-mode .btn-row,
body.wizard-mode .share-row,
body.wizard-mode .save-note,
body.wizard-mode legend.section-title,
body.wizard-mode summary.section-title,
body.wizard-mode .section-explainer,
body.wizard-mode .sample-banner:not(.stale-banner),
body.wizard-mode .scenarios-panel {
  display: none !important;
}

/* ---- Guides (long-form articles) ---- */
.guides-intro { font-size: 15px; color: var(--ink-soft); max-width: 640px; margin: 0 0 24px; }

.guide-meta {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  font-size: 12px; color: var(--ink-soft); font-family: 'IBM Plex Mono', monospace;
  margin: 4px 0 20px;
}
.guide-meta .gm-dot { opacity: .6; }

.guide-body { max-width: 700px; font-size: 16px; line-height: 1.72; color: var(--ink); }
.guide-body p { margin: 0 0 18px; }
.guide-body .guide-lead { font-size: 17px; color: var(--ink-soft); margin: 0 0 28px; }
.guide-body h3 { font-size: 22px; margin: 40px 0 14px; }
.guide-body h4 { font-size: 18px; margin: 28px 0 10px; font-family: 'Fraunces', serif; }
.guide-body ul, .guide-body ol { margin: 0 0 18px; padding-left: 22px; }
.guide-body li { margin-bottom: 8px; }
.guide-body strong { color: var(--ink); }
.guide-body .tool-card { max-width: 100%; }
@media(max-width: 640px) {
  .guide-body { font-size: 15px; }
  .guide-body .guide-lead { font-size: 16px; }
}

.guide-directory-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px;
}
.guide-directory-card {
  display: block; background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  padding: 18px; text-decoration: none; color: var(--ink); transition: border-color .15s ease;
}
.guide-directory-card:hover { border-color: var(--harbor); }
.guide-directory-card .gdc-title { font-family: 'Fraunces', serif; font-weight: 600; font-size: 16px; margin-bottom: 6px; }
.guide-directory-card .gdc-sub { font-size: 13px; color: var(--ink-soft); line-height: 1.5; }
.guide-directory-card .gdc-arrow { color: var(--harbor); font-size: 12px; font-weight: 700; margin-top: 10px; display: block; }