:root {
  --paper: #f4f1e8; --card: #fbf9f3; --ink: #1d2420; --ink-2: #4c5650;
  --ink-3: #87908a; --rule: rgba(29,36,32,.18); --rule-soft: rgba(29,36,32,.09);
  --accent: #2f5d46;   /* deep green */
  --accent-2: #b0662a; /* copper, for the contrast series */
  --serif: "Fraunces", Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --accent-soft: rgba(47,93,70,.22);
  --copper-soft: rgba(176,102,42,.30);
}
* { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--appnav-h, 0px) + 24px); }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 16px/1.55 var(--sans);
  -webkit-text-size-adjust: 100%;
}
a { color: var(--accent); }
em { font-style: italic; }

/* ---------- layout ---------- */
.layout { display: grid; grid-template-columns: 330px minmax(0, 1fr); }
.side {
  position: sticky; top: var(--appnav-h, 0px);
  height: calc(100vh - var(--appnav-h, 0px));
  height: calc(100dvh - var(--appnav-h, 0px));
  overflow-y: auto; border-right: 1px solid var(--rule-soft);
  background: var(--card);
}
.side-inner { padding: 1.3rem 1.2rem 1.6rem 1.35rem; }
.kicker {
  font: 500 .72rem/1.3 var(--mono); letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-3); margin: 0 0 .45rem;
}
h1 {
  font: 600 2.05rem/1.08 var(--serif); margin: 0 0 .6rem; letter-spacing: -.01em;
  font-variation-settings: "opsz" 96;
}
h1 em { color: var(--accent); font-weight: 600; }
.lede { font-size: 15px; color: var(--ink-2); margin: 0 0 1rem; }

.side-h {
  font: 500 .7rem/1.3 var(--mono); letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-3); margin: 1.1rem 0 .5rem; padding-top: .7rem; border-top: 1px solid var(--rule-soft);
}

/* readout */
.readout .big { font: 600 1.9rem/1.1 var(--serif); color: var(--accent); margin: 0; }
.readout .big small { font: 400 .95rem var(--sans); color: var(--ink-2); }
.readout p { margin: .35rem 0 0; font-size: 15px; color: var(--ink-2); }
.readout strong { color: var(--ink); }
.readout .wait { color: var(--accent-2); font-weight: 600; }

/* controls */
.ctl { margin: 0 0 .8rem; }
.ctl label, .ctl .lab { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; font-size: 15px; }
.ctl output, .ctl .val { font: 500 .9rem var(--mono); color: var(--ink); }
.ctl input[type=range] { width: 100%; accent-color: var(--accent); margin: .3rem 0 0; }
.ctl .note { font-size: 13px; color: var(--ink-3); margin: .15rem 0 0; }
.ctl input[type=text] {
  font: 500 .95rem var(--mono); width: 9.5rem; padding: .25rem .45rem; text-align: right;
  border: 1px solid var(--rule); border-radius: 4px; background: var(--paper); color: var(--ink);
}
.presets { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .35rem; }
.presets button, .chip {
  font: 500 .78rem var(--mono); padding: .2rem .5rem; border: 1px solid var(--rule);
  border-radius: 999px; background: transparent; color: var(--ink-2); cursor: pointer;
}
.presets button[aria-pressed=true] { background: var(--accent); color: #fff; border-color: var(--accent); }
.presets button:hover, .chip:hover { border-color: var(--accent); color: var(--accent); }
.presets button[aria-pressed=true]:hover { color: #fff; }
.check { display: flex; gap: .5rem; align-items: flex-start; font-size: 15px; margin: .6rem 0 0; }
.check input { accent-color: var(--accent); margin-top: .3rem; }
.check small { display: block; color: var(--ink-3); font-size: 13px; }
.hist { font-size: 14px; color: var(--ink-2); }
.hist p { margin: .3rem 0; }
.side-foot { margin-top: 1rem; font-size: 13px; color: var(--ink-3); }
:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }

/* ---------- charts ---------- */
.charts {
  display: flex; flex-direction: column; min-width: 0;
  height: calc(100vh - var(--appnav-h, 0px));
  height: calc(100dvh - var(--appnav-h, 0px));
  position: sticky; top: var(--appnav-h, 0px);
  padding: .9rem 1.2rem .8rem;
}
.fig { position: relative; display: flex; flex-direction: column; min-height: 0; }
.fig-a { flex: 3 1 0; }
.fig-b { flex: 2 1 0; border-top: 1px solid var(--rule-soft); margin-top: .5rem; padding-top: .55rem; }
.cap { margin: 0 0 .2rem; font-size: 15px; color: var(--ink-2); }
.cap b { font: 600 1.05rem var(--serif); color: var(--ink); margin-right: .35rem; }
.plot { flex: 1 1 auto; min-height: 0; position: relative; }
.plot svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.plot svg:focus { outline: none; }
.plot svg:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.ax text, .lbl { font: 400 11px var(--mono); fill: var(--ink-3); }
.ax line { stroke: var(--rule-soft); }
.ax .base { stroke: var(--rule); }
.bar { fill: var(--accent-soft); }
.bar.on { fill: var(--accent); }
.bar.hov { fill: rgba(47,93,70,.5); }
.vlbl { font: 500 11px var(--mono); fill: var(--ink-2); }
.vlbl.on { fill: var(--accent); font-weight: 600; font-size: 12.5px; }
.hit { fill: transparent; cursor: pointer; }
.area-c { fill: var(--copper-soft); }
.area-g { fill: var(--accent-soft); }
.line-c { fill: none; stroke: var(--accent-2); stroke-width: 1.6; }
.line-t { fill: none; stroke: var(--accent); stroke-width: 2; }
.goal-l { stroke: var(--ink-3); stroke-dasharray: 3 3; }
.key { display: flex; gap: 1rem; flex-wrap: wrap; font-size: 13px; color: var(--ink-2); margin: 0 0 .15rem; }
.key i { display: inline-block; width: .8rem; height: .8rem; border-radius: 2px; vertical-align: -1px; margin-right: .3rem; }
.key .k-c { background: var(--copper-soft); border: 1px solid var(--accent-2); }
.key .k-g { background: var(--accent-soft); border: 1px solid var(--accent); }
.cross { stroke: var(--ink-3); stroke-width: 1; }

.tip {
  position: fixed; z-index: 50; pointer-events: none; max-width: 250px;
  background: var(--ink); color: var(--paper); border-radius: 5px;
  padding: .45rem .6rem; font-size: 13px; line-height: 1.4;
  box-shadow: 0 4px 14px rgba(0,0,0,.18);
}
.tip b { font-family: var(--mono); font-weight: 500; }

/* ---------- reading + sources ---------- */
.reading, .sources, .changelog {
  max-width: 46rem; margin: 0 auto; padding: 1.8rem 1.25rem 0;
}
.reading h2, .sources h2, .changelog h2 { font: 600 1.45rem/1.2 var(--serif); margin: 0 0 .6rem; }
.reading p, .reading li, .sources p, .sources li { font-size: 16px; }
.formula {
  font: 400 .95rem/1.6 var(--mono); background: var(--card); border: 1px solid var(--rule-soft);
  border-radius: 6px; padding: .7rem .9rem; overflow-x: auto; white-space: pre;
}
.reading table { border-collapse: collapse; font-size: 15px; margin: .5rem 0 1rem; }
.reading th, .reading td { padding: .25rem .7rem .25rem 0; text-align: right; border-bottom: 1px solid var(--rule-soft); }
.reading th:first-child, .reading td:first-child { text-align: left; }
.reading th { font: 500 .75rem var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); }
.reading td { font-family: var(--mono); font-size: 14px; }
.sources ul { padding-left: 1.1rem; }
.sources a { overflow-wrap: anywhere; }
.sources li { margin: .35rem 0; }
.changelog { padding-bottom: 3rem; }
.changelog ul { list-style: none; padding: 0; }
.changelog li { font-size: 15px; margin: .3rem 0; }
.changelog time { font: 500 .8rem var(--mono); color: var(--ink-3); margin-right: .6rem; }

@media (max-width: 900px) {
  .layout { display: block; }
  .side { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--rule-soft); overflow: visible; }
  .charts { position: static; height: auto; padding: .8rem 1rem; }
  .fig-a { flex: none; height: 380px; }
  .fig-b { flex: none; height: 320px; }
}
@media (max-width: 480px) {
  .side-inner { padding: 1.1rem 1rem 1.2rem; }
  h1 { font-size: 1.8rem; }
  .fig-a { height: 340px; }
  .reading, .sources, .changelog { padding-left: 1rem; padding-right: 1rem; }
}
@media (prefers-reduced-motion: no-preference) {
  .bar { transition: fill .15s; }
}

/* ---------- income-wealth-age additions ---------- */
.seg { display: flex; gap: 0; border: 1px solid var(--rule); border-radius: 6px; overflow: hidden; margin: .2rem 0 .3rem; }
.seg button {
  flex: 1 1 0; font: 500 .8rem/1.2 var(--mono); padding: .45rem .3rem; border: 0;
  background: transparent; color: var(--ink-2); cursor: pointer; border-right: 1px solid var(--rule);
}
.seg button:last-child { border-right: 0; }
.seg button[aria-pressed=true] { background: var(--accent); color: #fff; }
.seg button:hover:not([aria-pressed=true]) { color: var(--accent); }
.side > .side-inner > .note, .note { font-size: 13px; color: var(--ink-3); margin: .15rem 0 0; }
.ctl.two { display: flex; flex-direction: column; gap: .45rem; }
.ctl.two input[type=number] {
  font: 500 .95rem var(--mono); width: 5rem; padding: .25rem .45rem; text-align: right;
  border: 1px solid var(--rule); border-radius: 4px; background: var(--paper); color: var(--ink);
}
.readout .pct { font: 600 2.1rem/1.05 var(--serif); color: var(--accent); margin: 0; }
.readout .pct small { font: 400 .95rem var(--sans); color: var(--ink-2); }
.aside-read { font-size: 15px; color: var(--ink-2); }
.aside-read p { margin: .35rem 0 .55rem; }
.aside-read strong { color: var(--ink); }
.stack { display: flex; height: 14px; border-radius: 3px; overflow: hidden; margin: .25rem 0 .1rem; background: var(--rule-soft); }
.stack span { display: block; height: 100%; }
.stack .s-home { background: var(--accent); }
.stack .s-ret { background: var(--accent-2); }
.stack .s-oth { background: rgba(29,36,32,.22); }
.stack-lab { font: 400 12px/1.35 var(--mono); color: var(--ink-3); margin: 0 0 .5rem; }
.fifths { width: 100%; border-collapse: collapse; font: 400 12.5px var(--mono); margin: .3rem 0 .4rem; }
.fifths th, .fifths td { padding: .18rem .25rem; text-align: right; border-bottom: 1px solid var(--rule-soft); }
.fifths th:first-child, .fifths td:first-child { text-align: left; }
.fifths th { font-weight: 500; color: var(--ink-3); font-size: 11px; }
.fifths tr.on td { color: var(--accent); font-weight: 500; }
.charts { padding-bottom: .5rem; }
.fig { flex: 1 1 auto; margin: 0; }
.axis-note { font-size: 13px; color: var(--ink-3); margin: .3rem 0 0; }
.band-o { fill: rgba(47,93,70,.13); }
.band-i { fill: rgba(47,93,70,.27); }
.med { fill: none; stroke: var(--accent); stroke-width: 2.4; }
.tail { fill: none; stroke: var(--accent); stroke-width: 1; stroke-dasharray: 2 3; opacity: .75; }
.mean-dot { fill: var(--card); stroke: var(--accent-2); stroke-width: 2; }
.mean-l { fill: none; stroke: var(--accent-2); stroke-width: 1.2; stroke-dasharray: 5 4; }
.zero { stroke: var(--ink-3); stroke-width: 1; }
.cap200 { stroke: var(--accent-2); stroke-width: 1; stroke-dasharray: 4 3; }
.cap200-t { font: 400 11px var(--mono); fill: var(--accent-2); }
.col-hit { fill: transparent; cursor: pointer; }
.col-on { fill: rgba(29,36,32,.045); }
.you-dot { fill: var(--accent-2); stroke: var(--card); stroke-width: 2; }
.you-t { font: 600 12px var(--mono); fill: var(--accent-2); }
.end-t { font: 400 10.5px var(--mono); fill: var(--ink-3); }
.xlab { font: 500 11.5px var(--mono); fill: var(--ink-2); }
.xlab.on { fill: var(--accent); font-weight: 600; }
.key .k-o { background: rgba(47,93,70,.13); border: 1px solid rgba(47,93,70,.35); }
.key .k-i { background: rgba(47,93,70,.27); border: 1px solid rgba(47,93,70,.5); }
.key .k-m { height: 3px; background: var(--accent); vertical-align: 3px; }
.key .k-mean { width: .7rem; height: .7rem; border-radius: 50%; border: 2px solid var(--accent-2); background: var(--card); }
.key .k-you { width: .7rem; height: .7rem; border-radius: 50%; background: var(--accent-2); }
.tip table { border-collapse: collapse; margin-top: .2rem; }
.tip td { padding: 0 .3rem 0 0; font: 400 12px/1.45 var(--mono); }
.tip td:last-child { text-align: right; }
.tbl-wrap { overflow-x: auto; }
.reading p code, .sources p code { font-size: .9em; }
@media (max-width: 900px) {
  .fig { height: 460px; flex: none; }
  .charts { display: block; }
  .plot { height: 360px; }
}
@media (max-width: 480px) {
  .fig { height: 440px; }
}
.you-t, .cap200-t { paint-order: stroke; stroke: var(--paper); stroke-width: 3.5px; stroke-linejoin: round; }
@media (max-width: 900px) {
  .fig { height: auto; display: block; }
  .plot { height: 380px; flex: none; }
}