/* ============================================================
   Long Horizon — shared stylesheet
   Design tokens: light is the base, dark overrides via
   media query (system) and [data-theme] (explicit toggle).
   ============================================================ */

:root {
  color-scheme: light;

  /* surfaces & ink */
  --page: #f9f9f7;
  --surface: #fcfcfb;
  --surface-2: #f0efec;
  --ink: #0b0b0b;
  --ink-2: #52514e;
  --muted: #898781;
  --hairline: #e1e0d9;
  --border: rgba(11, 11, 11, 0.10);

  /* brand & accents */
  --accent: #1c5cab;
  --accent-strong: #104281;
  --accent-wash: rgba(42, 120, 214, 0.08);

  /* chart series (validated: light mode) */
  --series-1: #2a78d6;   /* portfolio value */
  --series-2: #eb6834;   /* contributions   */
  --grid: #e1e0d9;
  --axis: #c3c2b7;
  --good: #006300;

  /* flags / market chips */
  --chip-us: #1c5cab;
  --chip-jp: #b3403a;
  --chip-kr: #2a6f5f;

  --radius: 10px;
  --radius-sm: 6px;
  --shadow: 0 1px 2px rgba(11, 11, 11, 0.04), 0 4px 16px rgba(11, 11, 11, 0.05);
  --font: system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --page: #0d0d0d;
    --surface: #1a1a19;
    --surface-2: #232322;
    --ink: #ffffff;
    --ink-2: #c3c2b7;
    --muted: #898781;
    --hairline: #2c2c2a;
    --border: rgba(255, 255, 255, 0.10);
    --accent: #6da7ec;
    --accent-strong: #9ec5f4;
    --accent-wash: rgba(57, 135, 229, 0.12);
    --series-1: #3987e5;
    --series-2: #d95926;
    --grid: #2c2c2a;
    --axis: #383835;
    --good: #0ca30c;
    --chip-us: #6da7ec;
    --chip-jp: #e08a86;
    --chip-kr: #6fb3a3;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 16px rgba(0, 0, 0, 0.35);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #0d0d0d;
  --surface: #1a1a19;
  --surface-2: #232322;
  --ink: #ffffff;
  --ink-2: #c3c2b7;
  --muted: #898781;
  --hairline: #2c2c2a;
  --border: rgba(255, 255, 255, 0.10);
  --accent: #6da7ec;
  --accent-strong: #9ec5f4;
  --accent-wash: rgba(57, 135, 229, 0.12);
  --series-1: #3987e5;
  --series-2: #d95926;
  --grid: #2c2c2a;
  --axis: #383835;
  --good: #0ca30c;
  --chip-us: #6da7ec;
  --chip-jp: #e08a86;
  --chip-kr: #6fb3a3;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 16px rgba(0, 0, 0, 0.35);
}

/* ---------- base ---------- */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--page);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  line-height: 1.25;
  color: var(--ink);
  margin: 0 0 0.5em;
  font-weight: 650;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(1.9rem, 4vw, 2.7rem); }
h2 { font-size: clamp(1.4rem, 2.6vw, 1.8rem); margin-top: 0; }
h3 { font-size: 1.15rem; }

p { margin: 0 0 1em; color: var(--ink-2); }
p strong, li strong { color: var(--ink); }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

ul, ol { color: var(--ink-2); padding-left: 1.3em; margin: 0 0 1em; }
li { margin-bottom: 0.4em; }

.container {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 20px;
}

.section { padding: 56px 0; }
.section + .section { border-top: 1px solid var(--hairline); }

.kicker {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}

.lead { font-size: 1.12rem; color: var(--ink-2); max-width: 62ch; }

/* ---------- header / nav ---------- */

.site-header .container { max-width: 1300px; }  /* wider than the 1080px content
   container on purpose: the nav needs the room, and above the 1400px burger
   breakpoint the viewport always has it. */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--page) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hairline);
}

.nav {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 60px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 750;
  font-size: 1.05rem;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin-right: auto;
  white-space: nowrap;
}
.brand:hover { text-decoration: none; }

.brand-mark {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: linear-gradient(135deg, var(--series-1), var(--accent-strong));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 800;
  flex: none;
}

.nav-links {
  display: flex;
  gap: 1px;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links a {
  display: block;
  padding: 6px 4px;
  border-radius: var(--radius-sm);
  color: var(--ink-2);
  font-size: 0.85rem;
  font-weight: 500;
  white-space: nowrap;
}
.nav-links a:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; }
.nav-links a[aria-current="page"] { color: var(--accent); font-weight: 650; background: var(--accent-wash); }

/* "main category" marker: star + weight + accent text. Deliberately does NOT
   use a background, because the background is what marks the current page —
   so an item that is both featured and current still reads as both. */
.nav-links a.nav-main { color: var(--accent); font-weight: 750; }
.nav-links a.nav-main:hover { color: var(--accent-strong); }
.nav-star {
  font-size: 0.78em;
  line-height: 1;
  margin-right: 3px;
  vertical-align: 0.05em;
}

.theme-toggle,
.nav-burger {
  border: 1px solid var(--hairline);
  background: var(--surface);
  color: var(--ink-2);
  border-radius: var(--radius-sm);
  width: 36px;
  height: 36px;
  cursor: pointer;
  font-size: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.theme-toggle:hover, .nav-burger:hover { color: var(--ink); border-color: var(--muted); }
.nav-burger { display: none; }

@media (max-width: 1400px) {
  .nav-burger { display: inline-flex; }
  .nav-links {
    display: none;
    position: absolute;
    top: 60px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    background: var(--surface);
    border-bottom: 1px solid var(--hairline);
    padding: 10px 16px 16px;
    gap: 2px;
    box-shadow: var(--shadow);
  }
  .nav-links.open { display: flex; }
}

/* On a laptop-width screen the burger menu would otherwise be one sparse
   column running down an otherwise empty header, so lay it out in columns
   and align it with the content below. */
@media (min-width: 720px) and (max-width: 1400px) {
  .nav-links.open {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 14px;
    max-width: 1300px;
    margin: 0 auto;
    padding: 14px 20px 18px;
  }
}

/* ---------- language switcher ---------- */

.lang-switch {
  display: inline-flex;
  gap: 2px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 2px;
  flex: none;
}
.lang-switch a {
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--ink-2);
  white-space: nowrap;
}
.lang-switch a:hover { color: var(--ink); text-decoration: none; }
.lang-switch a[aria-current="true"] { background: var(--accent-wash); color: var(--accent); font-weight: 750; }

@media (max-width: 560px) {
  .nav { gap: 6px; }
  .brand { font-size: 0.95rem; gap: 6px; }
  .brand-mark { width: 22px; height: 22px; font-size: 0.7rem; }
  .lang-switch a { padding: 3px 6px; font-size: 0.68rem; }
  .theme-toggle, .nav-burger { width: 32px; height: 32px; }
}

@media (max-width: 380px) {
  .site-header .container { padding: 0 12px; }
  .nav { gap: 4px; }
}

/* ---------- quotes ---------- */

.quote {
  border-left: 3px solid var(--accent);
  background: linear-gradient(to right, var(--accent-wash), transparent 70%);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 18px 24px 16px;
  margin: 30px 0;
}
.quote blockquote { margin: 0; }
.quote .q-text {
  font-size: 1.08rem;
  line-height: 1.55;
  font-style: italic;
  color: var(--ink);
  margin: 0 0 6px;
  text-wrap: balance;
}
.quote .q-orig {
  font-size: 0.83rem;
  font-style: italic;
  color: var(--muted);
  margin: 0 0 6px;
}
.quote figcaption {
  font-size: 0.85rem;
  color: var(--ink-2);
  font-weight: 600;
}
.quote figcaption .q-src { color: var(--muted); font-weight: 400; }

/* ---------- daily quote banner ----------
   Distinct from .quote on purpose: .quote sits inside an argument as a
   citation, the banner is a standalone card whose content changes daily. */

.quote-banner {
  margin: 36px 0;
  padding: 18px 26px 20px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: linear-gradient(135deg, var(--accent-wash), transparent 62%), var(--surface);
  box-shadow: var(--shadow);
  min-height: 132px;              /* reserve space so the fill causes no layout shift */
  opacity: 0;
  transition: opacity 0.3s ease;
}
.quote-banner.is-loaded { opacity: 1; }

.quote-banner .qb-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
}
.quote-banner .qb-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--hairline);
}

.quote-banner figure { margin: 0; }
.quote-banner blockquote { margin: 0; }
.quote-banner .qb-text {
  margin: 0;
  font-size: 1.2rem;
  line-height: 1.5;
  font-weight: 600;
  color: var(--ink);
  text-wrap: balance;
}
.quote-banner .qb-orig {
  margin: 8px 0 0;
  font-size: 0.85rem;
  font-style: italic;
  color: var(--muted);
  text-wrap: balance;
}
.quote-banner figcaption {
  margin-top: 12px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-2);
}
.quote-banner figcaption .qb-src { color: var(--muted); font-weight: 400; }

/* interstitial strip: the band keeps the section rhythm, the card supplies the
   visual break, so the banner drops its own margin inside one */
.quote-band { padding: 34px 0; }
.quote-band .quote-banner { margin: 0; }

/* keep a short first column (market or country names) on one line — the
   surrounding .table-wrap scrolls if that makes the table too wide */
.table-tight td:first-child { white-space: nowrap; }

/* ---------- executive voices (rendered by assets/js/voices.js) ---------- */

.voices-updated {
  font-size: 0.8rem;
  color: var(--muted);
  margin: 0 0 20px;
  font-variant-numeric: tabular-nums;
}

.voices-list { display: grid; gap: 18px; }

.voice {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 22px;
  box-shadow: var(--shadow);
}
.voice figure { margin: 0; }
.voice blockquote { margin: 0; }

.voice-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin-bottom: 12px;
}
.voice-who { font-weight: 700; color: var(--ink); }
.voice-role { font-size: 0.85rem; color: var(--ink-2); }
.voice-date {
  font-size: 0.78rem;
  color: var(--muted);
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}

.voice-text {
  margin: 0;
  font-size: 1.08rem;
  line-height: 1.6;
  font-weight: 600;
  color: var(--ink);
  text-wrap: balance;
}
.voice-orig {
  margin: 7px 0 0;
  font-size: 0.83rem;
  font-style: italic;
  color: var(--muted);
}
.voice-src {
  margin-top: 10px;
  font-size: 0.8rem;
  color: var(--muted);
}

.voice-why {
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px solid var(--hairline);
  font-size: 0.89rem;
  line-height: 1.75;
  color: var(--ink-2);
}
.voice-why strong { color: var(--accent); font-weight: 700; }

@media (max-width: 560px) {
  .voice { padding: 16px 17px; }
  .voice-date { margin-left: 0; width: 100%; }
}

/* ---------- affiliate disclosure ----------
   Both pieces are injected by assets/js/affiliate.js, so they exist only on
   pages that actually carry a marked link. */

.aff-badge {
  display: inline-block;
  vertical-align: 0.1em;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1;
  padding: 3px 5px;
  border-radius: 3px;
  color: var(--page);
  background: var(--muted);
  text-decoration: none;
}

.aff-disclosure {
  display: block;
  margin: 16px 0 24px;
  padding: 12px 16px;
  border-left: 3px solid var(--muted);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--surface-2);
  font-size: 0.83rem;
  line-height: 1.6;
  color: var(--ink-2);
}
.aff-disclosure strong { color: var(--ink); }

@media (max-width: 560px) {
  .quote-banner { padding: 16px 18px 18px; min-height: 156px; }
  .quote-banner .qb-text { font-size: 1.05rem; }
}

/* ---------- hero ---------- */

.hero { padding: 72px 0 60px; }

.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 48px;
  align-items: center;
}
@media (max-width: 840px) { .hero-grid { grid-template-columns: 1fr; } }

.hero .lead { margin-top: 14px; }

.hero-actions { display: flex; gap: 12px; margin-top: 26px; flex-wrap: wrap; }

.btn {
  display: inline-block;
  padding: 11px 20px;
  border-radius: var(--radius-sm);
  font-weight: 650;
  font-size: 0.95rem;
  border: 1px solid transparent;
}
.btn-primary { background: var(--accent); color: #fff; }
:root[data-theme="dark"] .btn-primary { color: #0d0d0d; }
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) .btn-primary { color: #0d0d0d; }
}
.btn-primary:hover { filter: brightness(1.08); text-decoration: none; }
.btn-ghost { border-color: var(--hairline); color: var(--ink); background: var(--surface); }
.btn-ghost:hover { border-color: var(--muted); text-decoration: none; }

/* ---------- cards & grids ---------- */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow);
}

.card h3 { margin-top: 0; }

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
@media (max-width: 840px) { .grid-3, .grid-2 { grid-template-columns: 1fr; } }

.card-link { display: block; color: inherit; height: 100%; }
.card-link:hover { text-decoration: none; border-color: var(--accent); }
.card-link .more { color: var(--accent); font-weight: 600; font-size: 0.9rem; }

/* ---------- stat tiles ---------- */

.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 700px) { .stat-row { grid-template-columns: 1fr; } }

.stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
}
.stat .stat-label { font-size: 0.85rem; color: var(--muted); margin-bottom: 4px; }
.stat .stat-value { font-size: 1.7rem; font-weight: 650; color: var(--ink); line-height: 1.2; }
.stat .stat-note { font-size: 0.8rem; color: var(--muted); margin-top: 4px; }

/* ---------- market chips & flags ---------- */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--ink-2);
}
.chip-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.chip-us .chip-dot { background: var(--chip-us); }
.chip-jp .chip-dot { background: var(--chip-jp); }
.chip-kr .chip-dot { background: var(--chip-kr); }

/* ---------- tables ---------- */

.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }

table { border-collapse: collapse; width: 100%; font-size: 0.92rem; }
th, td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--hairline); vertical-align: top; }
th { font-weight: 650; color: var(--ink); font-size: 0.85rem; background: var(--surface-2); white-space: nowrap; }
td { color: var(--ink-2); }
tr:last-child td { border-bottom: none; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- callouts ---------- */

.callout {
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  background: var(--accent-wash);
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  margin: 18px 0;
  font-size: 0.95rem;
  color: var(--ink-2);
}
.callout strong { color: var(--ink); }
.callout.warn { border-left-color: var(--series-2); background: rgba(235, 104, 52, 0.07); }

/* ---------- FAQ / details ---------- */

details {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  padding: 0 18px;
  margin-bottom: 10px;
}
details summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--ink);
  padding: 14px 0;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
details summary::-webkit-details-marker { display: none; }
details summary::after { content: "+"; color: var(--muted); font-size: 1.2rem; flex: none; }
details[open] summary::after { content: "–"; }
details[open] summary { border-bottom: 1px solid var(--hairline); }
details .details-body { padding: 12px 0 16px; }

/* ---------- calculator ---------- */

.calc-layout { display: grid; grid-template-columns: 320px 1fr; gap: 24px; align-items: start; }
@media (max-width: 900px) { .calc-layout { grid-template-columns: 1fr; } }

.mode-switch {
  display: flex;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-bottom: 16px;
}
.mode-switch button {
  flex: 1;
  padding: 8px 10px;
  background: var(--page);
  border: none;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
}
.mode-switch button + button { border-left: 1px solid var(--hairline); }
.mode-switch button[aria-pressed="true"] { background: var(--accent-wash); color: var(--accent); font-weight: 750; }

.calc-form label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink);
  margin: 14px 0 5px;
}
.calc-form label:first-child { margin-top: 0; }

.calc-form input[type="number"],
.calc-form select {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  background: var(--page);
  color: var(--ink);
  font-family: inherit;
  font-size: 0.95rem;
}
.calc-form input:focus, .calc-form select:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: transparent;
}

.calc-form input[type="range"] { width: 100%; accent-color: var(--accent); margin: 4px 0 0; }
.range-value { font-weight: 650; color: var(--accent); font-variant-numeric: tabular-nums; }

.preset-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.preset-row button {
  border: 1px solid var(--hairline);
  background: var(--page);
  color: var(--ink-2);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 0.8rem;
  font-family: inherit;
  cursor: pointer;
}
.preset-row button:hover { border-color: var(--accent); color: var(--accent); }
.preset-row button[aria-pressed="true"] { background: var(--accent-wash); border-color: var(--accent); color: var(--accent); font-weight: 650; }

.hero-figure { margin: 0 0 4px; }
.hero-figure .hf-label { font-size: 0.85rem; color: var(--muted); }
.hero-figure .hf-value { font-size: clamp(2rem, 4.5vw, 3rem); font-weight: 700; color: var(--ink); line-height: 1.1; }
.hero-figure .hf-note { font-size: 0.85rem; color: var(--muted); }

/* ---------- chart ---------- */

.viz-root { position: relative; }

.viz-legend { display: flex; gap: 18px; align-items: center; margin: 14px 0 6px; flex-wrap: wrap; }
.viz-legend .lg-item { display: inline-flex; align-items: center; gap: 7px; font-size: 0.85rem; color: var(--ink-2); }
.lg-swatch { width: 14px; height: 14px; border-radius: 4px; flex: none; }
.lg-swatch.s1 { background: var(--series-1); }
.lg-swatch.s2 { background: var(--series-2); }

.chart-svg { display: block; width: 100%; height: auto; }

.chart-svg .gridline { stroke: var(--grid); stroke-width: 1; }
.chart-svg .axisline { stroke: var(--axis); stroke-width: 1; }
.chart-svg .tick-label { fill: var(--muted); font-size: 11px; font-family: var(--font); font-variant-numeric: tabular-nums; }
.chart-svg .line-s1 { stroke: var(--series-1); stroke-width: 2; fill: none; stroke-linejoin: round; stroke-linecap: round; }
.chart-svg .line-s2 { stroke: var(--series-2); stroke-width: 2; fill: none; stroke-linejoin: round; stroke-linecap: round; }
.chart-svg .area-s1 { fill: var(--series-1); opacity: 0.10; }
.chart-svg .area-s2 { fill: var(--series-2); opacity: 0.10; }
.chart-svg .end-dot-s1 { fill: var(--series-1); stroke: var(--surface); stroke-width: 2; }
.chart-svg .end-dot-s2 { fill: var(--series-2); stroke: var(--surface); stroke-width: 2; }
.chart-svg .end-label { fill: var(--ink); font-size: 12px; font-weight: 650; font-family: var(--font); }
.chart-svg .crosshair { stroke: var(--muted); stroke-width: 1; }
.chart-svg .hover-dot { stroke: var(--surface); stroke-width: 2; }

.viz-tooltip {
  position: absolute;
  pointer-events: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  padding: 10px 12px;
  font-size: 0.82rem;
  min-width: 170px;
  z-index: 10;
  display: none;
}
.viz-tooltip .tt-title { font-weight: 650; color: var(--ink); margin-bottom: 6px; }
.viz-tooltip .tt-row { display: flex; align-items: baseline; gap: 8px; margin-top: 3px; }
.viz-tooltip .tt-key { width: 14px; height: 0; border-top: 3px solid; border-radius: 2px; align-self: center; flex: none; }
.viz-tooltip .tt-row.s1 .tt-key { border-color: var(--series-1); }
.viz-tooltip .tt-row.s2 .tt-key { border-color: var(--series-2); }
.viz-tooltip .tt-val { font-weight: 650; color: var(--ink); font-variant-numeric: tabular-nums; margin-left: auto; }
.viz-tooltip .tt-name { color: var(--ink-2); }

/* ---------- footer ---------- */

.site-footer {
  border-top: 1px solid var(--hairline);
  padding: 40px 0;
  margin-top: 40px;
  font-size: 0.85rem;
  color: var(--muted);
}
.site-footer .foot-grid { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.site-footer a { color: var(--ink-2); }
.site-footer .disclaimer { max-width: 70ch; margin-top: 14px; }

/* ---------- utility ---------- */

.mt-0 { margin-top: 0; }
.mt-2 { margin-top: 18px; }
.mt-3 { margin-top: 28px; }
.mb-3 { margin-bottom: 28px; }
.small { font-size: 0.85rem; color: var(--muted); }
.divided > * + * { margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--hairline); }

/* ---------- sources ----------
   Institutional facts (tax rates, contribution limits, statutory dates,
   whether a company is still listed) carry the primary source and the date
   the figure was last checked against it. The date is the honest part: it
   tells the reader how stale the number might be without pretending the
   page updates itself. */

.srcnote {
  margin-top: 18px;
  padding: 12px 14px;
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: 0.82rem;
  color: var(--muted);
}
.srcnote .srcnote-h {
  display: block;
  font-weight: 650;
  color: var(--ink-2);
  margin-bottom: 5px;
  letter-spacing: 0.02em;
}
.srcnote ul { margin: 0; padding-left: 1.1em; }
.srcnote li + li { margin-top: 3px; }
.srcnote a { color: var(--ink-2); }
.srcnote .checked { display: block; margin-top: 7px; font-variant-numeric: tabular-nums; }

/* An inline marker for a claim the site has not been able to verify against a
   primary source. Used sparingly — the alternative is deleting the claim. */
.unverified {
  border-bottom: 1px dotted var(--muted);
  cursor: help;
}

/* ---------- reading path ----------
   The site has thirteen pages. Someone arriving for the first time needs to be
   told which four to read and in what order, or the breadth reads as noise. */

.path {
  counter-reset: pathstep;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
  margin-top: 18px;
}
.path-step {
  position: relative;
  display: block;
  padding: 16px 16px 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  text-decoration: none;
  transition: border-color 0.15s, transform 0.15s;
}
.path-step:hover {
  text-decoration: none;
  border-color: var(--accent);
  transform: translateY(-2px);
}
.path-step .ps-n {
  counter-increment: pathstep;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent-wash);
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  margin-bottom: 8px;
}
.path-step .ps-n::before { content: counter(pathstep); }
.path-step .ps-t { display: block; font-weight: 650; color: var(--ink); }
.path-step .ps-d { display: block; margin-top: 4px; font-size: 0.84rem; color: var(--muted); line-height: 1.45; }

/* ---------- nav grouping ----------
   Twelve destinations is too many to scan as one undifferentiated row. The
   labels are hidden in the desktop bar, where the row still reads left to
   right, and appear as headings once the list collapses into the burger
   panel — which is exactly where the list is hardest to parse. */

.nav-sec { display: none; }
.nav-links.open .nav-sec {
  display: block;
  grid-column: 1 / -1;
  padding: 10px 4px 2px;
  font-size: 0.7rem;
  font-weight: 750;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  border-top: 1px solid var(--hairline);
  margin-top: 4px;
}
.nav-links.open .nav-sec:first-child { border-top: 0; margin-top: 0; padding-top: 2px; }

/* ---------- calculator additions ---------- */

.assume {
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.84rem;
  color: var(--ink-2);
  line-height: 1.55;
}
.assume strong { color: var(--ink); }
.assume .assume-h {
  display: block;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 6px;
}
.assume ul { margin: 6px 0 0; padding-left: 1.1em; }
.assume li + li { margin-top: 3px; }

.real-line {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--hairline);
  font-size: 0.88rem;
  color: var(--ink-2);
}
.real-line .rl-val { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }

.calc-saved {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 16px;
  font-size: 0.82rem;
  color: var(--muted);
}
.calc-saved button {
  font: inherit;
  padding: 5px 11px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-2);
  cursor: pointer;
}
.calc-saved button:hover { border-color: var(--accent); color: var(--accent); }
.calc-saved .saved-msg { font-variant-numeric: tabular-nums; }

td.rate-self { background: var(--accent-wash); font-weight: 650; }