/* The money and time & health apps (asset-quilt, time-in-market,
 * start-early, fee-drag, tax-brackets, tax-map, household-spending,
 * income-wealth-age, time-together, evenings, vo2-max) in the site's shared
 * look (shared/theme.css): white, black, Helvetica.
 *
 * The eleven were built on one stylesheet (cream paper #f4f1e8, Fraunces
 * headings, uppercase IBM Plex Mono labels, an italic green word in each
 * title). Each loads theme.css and then this file after its own styles; this
 * file resets the tokens and class names they share.
 *
 * The section's yellow (--hue-money) fails contrast as text, so the text and
 * control accent is the site blue. The green (--accent) and copper
 * (--accent-2) stay defined because the charts use them to tell series apart
 * (index fund vs advisor, payroll vs income tax, the tax-map ramp); they are
 * only taken off the places where they were decoration: links, titles,
 * buttons, sliders, focus rings and headline numbers.
 */
:root {
  --paper: #ffffff;
  --card: #ffffff;
  --ink: #111111;
  --ink-2: #555555;
  --ink-3: #767676;
  --rule: #d9d9d9;
  --rule-soft: #ececec;
  --wash: #f4f4f2;
  --sans: "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --serif: var(--sans);
  /* The labels and numbers that were in mono are Helvetica with tabular
     figures, so columns of numbers still line up. */
  --mono: var(--sans);
}

body {
  background: var(--paper);
  background-image: none;
  color: var(--ink);
  font-family: var(--sans);
  font-variant-numeric: tabular-nums;
}

/* No capitals or letter-spaced labels anywhere; headings set tight. */
body * { text-transform: none !important; letter-spacing: 0 !important; }
h1, h2, h3, .title, .wordmark { font-family: var(--sans); font-variation-settings: normal; }
h1, .title, .wordmark { font-weight: 700 !important; letter-spacing: -0.02em !important; }
h2, h3 { font-weight: 700 !important; }

/* Kickers: plain small bold text, not spaced capitals. */
.kicker, .eyebrow { color: var(--ink) !important; font-weight: 700 !important; font-size: 0.8rem !important; }

/* Titles are plain: no italic accent word. */
h1 em, h2 em, h3 em, .title em, .wordmark em {
  font-style: normal !important;
  font-weight: inherit !important;
  color: inherit !important;
}

/* Links, focus and controls take the one blue. */
a { color: var(--blue); }
:focus-visible,
svg:focus-visible,
.plot svg:focus-visible,
.chartbox svg:focus-visible,
.panel svg:focus-visible,
.chart:focus-visible,
.seg button:focus-visible,
input:focus-visible,
select:focus-visible { outline-color: var(--blue) !important; }
input[type=range], input[type=checkbox], input[type=radio] { accent-color: var(--blue) !important; }

.seg button[aria-pressed="true"],
.hz button[aria-pressed="true"],
.chip[aria-pressed="true"],
.presets button[aria-pressed="true"] {
  background: var(--ink) !important;
  border-color: var(--ink) !important;
  color: #fff !important;
}
.presets button:hover, .chip:hover, .btn:hover { border-color: var(--ink); color: var(--ink); }
.seg button:hover:not([aria-pressed="true"]) { color: var(--ink); }

/* Headline numbers were green for emphasis; they are ink. */
.readout .big, .readout .pct, .big .v, .readout .big em { color: var(--ink) !important; }
.readout .wait { color: var(--ink); }
.ledger tr.chosen td, .detail .row.on span, .cmp tr.share td, .fifths tr.on td { color: var(--blue); }

/* Pull quotes and notes marked with a green rule take a plain one (the
   .note and vo2-max .readout rules are changed in those apps' style.css). */
.advice { border-left-color: var(--ink); }
/* vo2-max: the activities that drop out of reach, listed beside the chart. */
.readout li.gone span:last-child { color: var(--ink); font-weight: 600; }

/* tax-map: the chosen measure and the ranking bars. */
.measure:has(input:checked) { border-color: var(--blue); box-shadow: inset 3px 0 0 var(--blue); }

/* Controls use the page font. */
input, select, button { font-family: var(--sans); }

/* tax-map: the "no data" hatch is gray on white, not tan on cream. */
.legend .none { background: repeating-linear-gradient(45deg, #ffffff 0 3px, #d9d9d9 3px 5px); }

/* tax-brackets, tax-map: the label that opens each chart caption. */
.cap-k { color: var(--ink) !important; font-weight: 700; font-size: 0.8rem !important; }