/* ==========================================================================
   StatCompute -- technical editorial
   --------------------------------------------------------------------------
   Two typefaces only: a reading serif for prose, a monospace for every number,
   label and control. No sans anywhere. Rules instead of shadows. Warm paper in
   light mode, true dark in dark mode.
   ========================================================================== */

/* --- tokens --------------------------------------------------------------- */

:root {
  color-scheme: light;

  --paper: #faf7f1;
  --paper-2: #f4f0e7;
  --surface: #fffdf9;
  --surface-sunken: #f6f2e9;
  --ink: #16181c;
  --ink-2: #4b5058;
  --ink-3: #656a73;   /* >=4.7:1 on every light surface; AA needs 4.5 */
  --rule: #e4ded1;
  --rule-strong: #cec6b4;
  /* Form borders carry SC 1.4.11 on their own -- the field fill differs
     from the panel by 1.05:1, so the border is the only cue that a box is
     there, and 17 inputs ship wholly empty. --rule-strong is a hairline
     token and is correctly recessive; this is a separate job. */
  --control-border: #93896e;
  --accent: #12596b;
  --accent-hover: #0c4351;
  --accent-wash: #e6eff1;
  --signal: #9d3f28;
  --signal-wash: #f7ece7;
  --good: #006300;
  --good-mark: #0ca30c;
  --warn: #8a5a06;
  --warn-mark: #fab219;
  --crit: #a72e2e;
  --crit-mark: #d03b3b;

  /* chart surface + validated categorical series (light steps) */
  --chart-surface: #fdfbf7;
  --grid: #e6e0d3;
  --axis: #c3bdaf;
  --series-1: #2a78d6;
  --series-2: #eb6834;
  --series-3: #1baf7a;
  --series-4: #eda100;
  --series-5: #e87ba4;
  --series-6: #008300;
  --series-7: #4a3aa7;
  --series-8: #e34948;
  --seq-100: #cde2fb;
  --seq-250: #86b6ef;
  --seq-400: #3987e5;
  --seq-550: #1c5cab;
  --seq-700: #0d366b;

  --serif: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino,
    Charter, "Bitstream Charter", Georgia, "Times New Roman", serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, "Cascadia Mono",
    "Roboto Mono", "DejaVu Sans Mono", monospace;

  --measure: 68ch;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --radius: 3px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #0e1013;
    --paper-2: #121519;
    --surface: #15181c;
    --surface-sunken: #101317;
    --ink: #f1ede4;
    --ink-2: #b6b2a8;
    --ink-3: #8b8f96;
    --rule: #272b31;
    --rule-strong: #3b4048;
    --control-border: #5f6673;
    --accent: #63b9c8;
    --accent-hover: #8ad2de;
    --accent-wash: #14282e;
    --signal: #e0906f;
    --signal-wash: #2a1c16;
    --good: #0ca30c;
    --good-mark: #0ca30c;
    --warn: #fab219;
    --warn-mark: #fab219;
    --crit: #ef6b6b;
    --crit-mark: #d03b3b;
    --chart-surface: #14171b;
    --grid: #24282e;
    --axis: #3b4048;
    --series-1: #3987e5;
    --series-2: #d95926;
    --series-3: #199e70;
    --series-4: #c98500;
    --series-5: #d55181;
    --series-6: #008300;
    --series-7: #9085e9;
    --series-8: #e66767;
    --seq-100: #0d366b;
    --seq-250: #184f95;
    --seq-400: #2a78d6;
    --seq-550: #5598e7;
    --seq-700: #b7d3f6;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #0e1013;
  --paper-2: #121519;
  --surface: #15181c;
  --surface-sunken: #101317;
  --ink: #f1ede4;
  --ink-2: #b6b2a8;
  --ink-3: #8b8f96;
  --rule: #272b31;
  --rule-strong: #3b4048;
  --control-border: #5f6673;
  --accent: #63b9c8;
  --accent-hover: #8ad2de;
  --accent-wash: #14282e;
  --signal: #e0906f;
  --signal-wash: #2a1c16;
  --good: #0ca30c;
  --good-mark: #0ca30c;
  --warn: #fab219;
  --warn-mark: #fab219;
  --crit: #ef6b6b;
  --crit-mark: #d03b3b;
  --chart-surface: #14171b;
  --grid: #24282e;
  --axis: #3b4048;
  --series-1: #3987e5;
  --series-2: #d95926;
  --series-3: #199e70;
  --series-4: #c98500;
  --series-5: #d55181;
  --series-6: #008300;
  --series-7: #9085e9;
  --series-8: #e66767;
  --seq-100: #0d366b;
  --seq-250: #184f95;
  --seq-400: #2a78d6;
  --seq-550: #5598e7;
  --seq-700: #b7d3f6;
}

/* --- reset ---------------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img, svg, canvas { max-width: 100%; }
canvas { display: block; }

a {
  color: var(--accent);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent);
}
a:hover { color: var(--accent-hover); text-decoration-color: currentColor; }

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

h1, h2, h3, h4 {
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.012em;
  margin: 0;
  text-wrap: balance;
}

/* --- layout --------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: 74rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--surface);
  color: var(--ink);
  padding: 0.6rem 1rem;
  border: 1px solid var(--rule-strong);
  z-index: 100;
}
.skip:focus { left: 0.5rem; top: 0.5rem; }

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

.site-head {
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
  position: relative;
}

.head-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-block: 0.7rem;
}

.wordmark {
  font-family: var(--mono);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--ink);
  text-decoration: none;
  display: inline-flex;
  align-items: baseline;
  gap: 0.1em;
  white-space: nowrap;
}
.wordmark:hover { color: var(--ink); }
.wordmark b { font-weight: 600; }
.wordmark i {
  font-style: normal;
  color: var(--accent);
  font-weight: 400;
}
.wordmark::after {
  content: "";
  display: inline-block;
  width: 1.05em;
  height: 0.62em;
  margin-left: 0.25em;
  background:
    radial-gradient(120% 150% at 50% 100%, var(--accent) 0 42%, transparent 43%);
  opacity: 0.85;
}

.head-tools { margin-left: auto; display: flex; gap: 0.4rem; align-items: center; }

.theme-toggle {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 0.4rem 0.55rem;
  cursor: pointer;
  min-height: 32px;
}
.theme-toggle:hover { border-color: var(--rule-strong); color: var(--ink); }

/* Nav wraps -- it never scrolls horizontally and never hides a link.
   A nav that overflows is a nav whose later items do not exist on a phone. */
.site-nav {
  border-top: 1px solid var(--rule);
  padding-block: 0.4rem 0.5rem;
}
.site-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 0.9rem;
}
.site-nav a {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  color: var(--ink-2);
  text-decoration: none;
  display: block;
  padding: 0.3rem 0;
  border-bottom: 2px solid transparent;
}
.site-nav a:hover { color: var(--ink); border-bottom-color: var(--rule-strong); }
.site-nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); }

/* --- page shell ----------------------------------------------------------- */

.page { padding-block: 1.25rem 3rem; }

.crumbs {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  margin-bottom: 1.1rem;
}
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem; }
.crumbs a { color: var(--ink-3); text-decoration: none; }
.crumbs a:hover { color: var(--accent); }
.crumbs li + li::before { content: "/"; margin-right: 0.35rem; color: var(--rule-strong); }

.title-block { max-width: var(--measure); }
.eyebrow {
  font-family: var(--mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
  margin: 0 0 0.6rem;
}
h1 {
  font-size: clamp(1.75rem, 1.2rem + 2.6vw, 2.6rem);
  margin-bottom: 0.55rem;
}
.lead {
  font-size: 1.125rem;
  color: var(--ink-2);
  margin: 0.35rem 0 0;
  max-width: 60ch;
}
.title-rule {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 1.5rem 0 0;
}

/* The other names a reader may have searched. Set quietly -- it is a
   confirmation that they are in the right place, not a headline. */
.also-called {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--ink-3);
  margin: 0.6rem 0 0;
  max-width: 62ch;
}
.also-called span {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.also-called span::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 0.7em;
  margin: 0 0.15rem 0 0.45rem;
  vertical-align: -0.05em;
  background: var(--rule-strong);
}

.meta-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.25rem;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  margin-top: 0.9rem;
}
.meta-strip b { color: var(--ink-2); font-weight: 400; }

/* --- prose ---------------------------------------------------------------- */

.prose { max-width: var(--measure); }
.prose p { margin: 0; }

/* The flow rule has to out-specify the element resets above it, or it loses
   silently: `.prose > * + *` is (0,1,0) and `.prose p` is (0,1,1), so every
   paragraph on the site sat flush against the one before it with no gap at all.
   `:not(:first-child)` makes this (0,2,0), which wins; the headings below are
   (0,2,1) so they still get their larger space. */
.prose > :not(:first-child) { margin-top: 1rem; }

.prose h3 { font-size: 1.125rem; }
.prose h4 {
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.prose > h2:not(:first-child) { margin-top: 1.9rem; }
.prose > h3:not(:first-child) { margin-top: 1.75rem; }
.prose > h4:not(:first-child) { margin-top: 1.5rem; }
.prose ul, .prose ol { margin: 0; padding-left: 1.3rem; }
.prose li + li { margin-top: 0.4rem; }
.prose code {
  font-family: var(--mono);
  font-size: 0.875em;
  background: var(--surface-sunken);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 0.05em 0.3em;
}
.prose strong { font-weight: 600; }
.prose .callout {
  border-left: 3px solid var(--accent);
  background: var(--accent-wash);
  padding: 0.85rem 1rem;
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 1rem;
}
.prose .callout.warn { border-left-color: var(--warn-mark); background: var(--signal-wash); }
.prose .callout p + p { margin-top: 0.6rem; }

/* --- sections ------------------------------------------------------------- */

.section { padding-top: 2.5rem; }
.section-head {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  border-top: 1px solid var(--rule);
  padding-top: 0.75rem;
  margin-bottom: 1.1rem;
}
.section-num {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--ink-3);
  letter-spacing: 0.06em;
  flex: none;
  padding-top: 0.25rem;
}
.section-head h2 { font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem); }

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

.calc {
  margin-top: 1.5rem;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}

.calc-modes {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border-bottom: 1px solid var(--rule);
  background: var(--surface-sunken);
}
.calc-mode {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.01em;
  color: var(--ink-2);
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 0.7rem 0.9rem;
  cursor: pointer;
  min-height: 44px;
}
.calc-mode[aria-selected="true"] {
  color: var(--ink);
  background: var(--surface);
  border-bottom-color: var(--accent);
}
.calc-mode:hover { color: var(--ink); }

.calc-body { padding: clamp(0.9rem, 3vw, 1.35rem); }
.calc-pane[hidden] { display: none; }

.field-grid {
  display: grid;
  gap: 0.9rem 1.1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 40rem) {
  .field-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .field-grid .span-2 { grid-column: 1 / -1; }
}

.field { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.field label {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.01em;
  color: var(--ink-2);
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
}
/* .hint was scoped to .field, so the one beside the chart download button fell
   back to the body serif at full size and sat next to a small mono button
   looking like a mistake. It is the same kind of text in both places. */
.hint {
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--ink-3);
  line-height: 1.4;
}

.field input,
.field select,
.field textarea {
  font-family: var(--mono);
  font-size: 1rem; /* 16px minimum: anything smaller zooms on iOS */
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--control-border);
  border-radius: var(--radius);
  padding: 0.55rem 0.6rem;
  width: 100%;
  min-height: 44px;
}
.field textarea {
  min-height: 8.5rem;
  resize: vertical;
  line-height: 1.5;
  tab-size: 4;
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--accent);
}
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] {
  border-color: var(--crit-mark);
}
.field-inline {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px; /* the row is the tap target, not the box */
}
.field-inline input[type="checkbox"] {
  width: 1.25rem;
  height: 1.25rem;
  min-height: 1.25rem;
  flex: none;
  accent-color: var(--accent);
}
.field-inline label { cursor: pointer; }

.calc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
  margin-top: 1.1rem;
}
.btn {
  font-family: var(--mono);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  color: var(--paper);
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  padding: 0.65rem 1.1rem;
  min-height: 44px;
  cursor: pointer;
}
.btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-ghost {
  color: var(--ink-2);
  background: transparent;
  border-color: var(--rule-strong);
}
.btn-ghost:hover { color: var(--ink); background: var(--surface-sunken); }

/* --- results -------------------------------------------------------------- */

.result { margin-top: 1.25rem; }
.result[hidden] { display: none; }

.result-error {
  font-family: var(--mono);
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--crit);
  border: 1px solid var(--crit-mark);
  border-left-width: 3px;
  border-radius: var(--radius);
  padding: 0.75rem 0.9rem;
  background: color-mix(in srgb, var(--crit-mark) 8%, var(--surface));
}

.headline {
  border-top: 1px solid var(--rule-strong);
  padding-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.5rem 1.5rem;
}
.headline-label {
  font-family: var(--mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-3);
  display: block;
  margin-bottom: 0.2rem;
}
.headline-value {
  font-family: var(--mono);
  font-size: clamp(2rem, 1.4rem + 3vw, 3rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  display: block;
  overflow-wrap: anywhere;
}
.headline-note {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--ink-3);
  padding-bottom: 0.3rem;
}

.verdict {
  font-family: var(--mono);
  font-size: 0.8125rem;
  line-height: 1.55;
  margin-top: 0.9rem;
  padding: 0.65rem 0.8rem;
  border-radius: var(--radius);
  border: 1px solid var(--rule);
  background: var(--surface-sunken);
  display: flex;
  gap: 0.55rem;
}
.verdict::before {
  content: "=";
  font-weight: 600;
  flex: none;
}
.verdict.is-reject { border-color: color-mix(in srgb, var(--signal) 45%, var(--rule)); background: var(--signal-wash); }
.verdict.is-reject::before { content: "\2260"; color: var(--signal); }
.verdict.is-retain::before { content: "\2248"; color: var(--ink-2); }
.verdict.is-warn { border-color: color-mix(in srgb, var(--warn-mark) 55%, var(--rule)); }
.verdict.is-warn::before { content: "!"; color: var(--warn); }

.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
  gap: 1px;
  margin-top: 1.1rem;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
}
.stat {
  background: var(--surface);
  padding: 0.6rem 0.7rem;
  min-width: 0;
}
.stat dt {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stat dd {
  font-family: var(--mono);
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  margin: 0.2rem 0 0;
  overflow-wrap: anywhere;
}

.steps { margin-top: 1.1rem; }
.steps summary {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  color: var(--accent);
  cursor: pointer;
  padding: 0.35rem 0;
  min-height: 32px;
}
.steps-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--mono);
  font-size: 0.8125rem;
  margin-top: 0.4rem;
}
.steps-table th, .steps-table td {
  text-align: left;
  padding: 0.4rem 0.6rem 0.4rem 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
.steps-table td:last-child { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.steps-table th { color: var(--ink-3); font-weight: 400; }

.result-notes {
  font-family: var(--mono);
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--ink-2);
  margin-top: 1rem;
  padding-left: 1.1rem;
}
.result-notes li + li { margin-top: 0.35rem; }

/* --- charts --------------------------------------------------------------- */

.figure { margin-top: 1.35rem; }
.figure-frame {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--chart-surface);
  padding: 0.6rem;
}
.figure canvas { width: 100%; height: auto; }
.figure figcaption {
  font-family: var(--mono);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--ink-3);
  margin-top: 0.5rem;
}
.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  font-family: var(--mono);
  font-size: 0.6875rem;
  color: var(--ink-2);
  margin-top: 0.5rem;
}
.legend span { display: inline-flex; align-items: center; gap: 0.35rem; }
.legend i {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 2px;
  display: inline-block;
  flex: none;
}
.chart-actions {
  display: flex;
  gap: 0.5rem 0.75rem;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 0.6rem;
}

.table-scroll { overflow-x: auto; margin-top: 1rem; }
.data-table {
  border-collapse: collapse;
  font-family: var(--mono);
  font-size: 0.8125rem;
  width: 100%;
  min-width: max-content;
}
.data-table caption {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: left;
  padding-bottom: 0.4rem;
}
.data-table th, .data-table td {
  border: 1px solid var(--rule);
  padding: 0.35rem 0.6rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.data-table th { background: var(--surface-sunken); color: var(--ink-2); font-weight: 400; }
.data-table th:first-child, .data-table td:first-child { text-align: left; }

/* --- formula -------------------------------------------------------------- */

.formula {
  margin-top: 1.25rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
}
.formula-eq {
  padding: 1rem;
  overflow-x: auto;
  border-bottom: 1px solid var(--rule);
  font-size: 1.15rem;
}
math { font-family: var(--serif); }
math .op { color: var(--ink-2); }
.formula-terms {
  margin: 0;
  padding: 0.8rem 1rem;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.35rem 0.8rem;
  font-size: 0.9375rem;
}
.formula-terms dt {
  font-family: var(--mono);
  color: var(--ink);
  white-space: nowrap;
}
.formula-terms dd { margin: 0; color: var(--ink-2); }
.formula-caption {
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--ink-3);
  padding: 0 1rem 0.8rem;
}

/* --- worked example ------------------------------------------------------- */

.worked { margin-top: 1.25rem; }
.worked-steps {
  list-style: none;
  counter-reset: step;
  margin: 1rem 0 0;
  padding: 0;
  max-width: var(--measure);
}
.worked-steps > li {
  counter-increment: step;
  border-top: 1px solid var(--rule);
  padding: 0.7rem 0 0.7rem 2.4rem;
  position: relative;
}
.worked-steps > li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0.75rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--ink-3);
  border: 1px solid var(--rule-strong);
  border-radius: 50%;
  width: 1.5rem;
  height: 1.5rem;
  display: grid;
  place-items: center;
}
.worked-steps .step-math {
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--ink-2);
  margin-top: 0.35rem;
  overflow-x: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.worked-answer {
  font-family: var(--mono);
  font-size: 0.9375rem;
  border-top: 1px solid var(--rule-strong);
  border-bottom: 1px solid var(--rule-strong);
  padding: 0.7rem 0;
  margin-top: 0.9rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.5rem;
}
.worked-answer b { font-weight: 600; }

.try-it {
  font-family: var(--mono);
  font-size: 0.8125rem;
  margin-top: 0.8rem;
}

/* --- sibling / decision blocks ------------------------------------------- */

.branches {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
}
.branches li {
  background: var(--surface);
  padding: 0.8rem 0.95rem;
  display: grid;
  gap: 0.25rem;
}
.branches .cond {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--ink-3);
  letter-spacing: 0.02em;
}
.branches .go { font-size: 1rem; }
.branches .why { font-size: 0.9375rem; color: var(--ink-2); }

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

.faq { max-width: var(--measure); margin-top: 1rem; }
.faq details {
  border-top: 1px solid var(--rule);
}
.faq details:last-of-type { border-bottom: 1px solid var(--rule); }
.faq summary {
  cursor: pointer;
  padding: 0.85rem 1.75rem 0.85rem 0;
  font-weight: 600;
  position: relative;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-family: var(--mono);
  color: var(--ink-3);
  position: absolute;
  right: 0.25rem;
  top: 0.8rem;
}
.faq details[open] summary::after { content: "\2212"; }
.faq .answer { padding: 0 0 1rem; color: var(--ink-2); }
.faq .answer > * + * { margin-top: 0.7rem; }
.faq .answer p { margin: 0; }

/* --- cards / indexes ----------------------------------------------------- */

.card-grid {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
  grid-template-columns: 1fr;
}
@media (min-width: 34rem) { .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 60rem) { .card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.card-grid > li { background: var(--surface); }
.card-grid a {
  display: grid;
  gap: 0.3rem;
  padding: 0.9rem 1rem 1rem;
  height: 100%;
  text-decoration: none;
  color: inherit;
}
.card-grid a:hover { background: var(--accent-wash); }
.card-grid .card-title {
  font-weight: 600;
  font-size: 1.0625rem;
  color: var(--ink);
}
.card-grid a:hover .card-title { color: var(--accent-hover); }
.card-grid .card-note { font-size: 0.9375rem; color: var(--ink-2); line-height: 1.5; }
.card-grid .card-tag {
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.home-hero { max-width: 48rem; }
.home-hero .lead { font-size: 1.1875rem; max-width: 54ch; }

/* Three claims, each a complete sentence. Set as a wrapping row of fragments
   they ran into one another and the last one read as a sentence starting
   midway. Three columns on a wide screen, stacked below that. */
.hero-facts {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.55rem 1.75rem;
  max-width: 58rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--ink-3);
}
@media (min-width: 52rem) {
  .hero-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 1.75rem; }
  .hero-facts li { padding-left: 0.9rem; border-left: 1px solid var(--rule-strong); }
}
.hero-facts b { color: var(--ink-2); font-weight: 600; display: block; }

.hub-grid {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 46rem) { .hub-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.hub-card {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1rem 1.1rem 1.1rem;
  background: var(--surface);
  display: grid;
  gap: 0.4rem;
  align-content: start;
}
.hub-card h3 { font-size: 1.1875rem; }
.hub-card h3 a { text-decoration: none; color: var(--ink); }
.hub-card h3 a:hover { color: var(--accent); }
.hub-card p { margin: 0; color: var(--ink-2); font-size: 0.9375rem; }
/* A vertical list, not a wrapping row. Seven monospace links flowing into each
   other read as a paragraph of jargon rather than as navigation, and six cards
   of that was the messiest thing on the home page. Four, stacked, with a rule
   between them, reads as a menu. */
.hub-card .links {
  list-style: none;
  margin: 0.7rem 0 0;
  padding: 0;
  font-family: var(--mono);
  font-size: 0.8125rem;
  border-top: 1px solid var(--rule);
}
.hub-card .links li + li { border-top: 1px solid var(--rule); }
.hub-card .links a {
  display: block;
  padding: 0.5rem 0;
  color: var(--ink-2);
  text-decoration: none;
}
.hub-card .links a:hover { color: var(--accent); }
.hub-card .hub-all {
  margin: 0.75rem 0 0;
  font-family: var(--mono);
  /* 13px is the floor for anything that is prose, and this is a link people
     are meant to read and click, not a caption. */
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
}
.hub-card .hub-all a { color: var(--accent); text-decoration: none; }
.hub-card .hub-all a:hover { text-decoration: underline; }

.az-list {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  columns: 1;
  column-gap: 2rem;
}
@media (min-width: 40rem) { .az-list { columns: 2; } }
@media (min-width: 64rem) { .az-list { columns: 3; } }
.az-list li { break-inside: avoid; padding: 0.28rem 0; font-size: 0.9375rem; }
.az-list a { text-decoration: none; }
.az-list a:hover { text-decoration: underline; }
.az-list .vol { font-family: var(--mono); font-size: 0.6875rem; color: var(--ink-3); }

.filter-row { margin-top: 1.25rem; display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.filter-row input {
  font-family: var(--mono);
  font-size: 1rem;
  padding: 0.55rem 0.7rem;
  min-height: 44px;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  flex: 1 1 16rem;
  max-width: 26rem;
}
.filter-count { font-family: var(--mono); font-size: 0.75rem; color: var(--ink-3); }

/* --- build-time SVG illustrations ---------------------------------------- */

.illus {
  margin: 1.5rem 0 0;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--chart-surface);
  padding: 0.9rem 0.9rem 0.7rem;
  overflow: hidden;
}
.illus svg { display: block; width: 100%; height: auto; overflow: hidden; }
.illus figcaption {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ink-2);
  margin-top: 0.7rem;
  max-width: 62ch;
}
.illus .lbl { font-family: var(--mono); font-size: 11px; fill: var(--ink-2); }
.illus .lbl.strong { font-weight: 600; fill: var(--ink); }
.illus .lbl.muted { fill: var(--ink-3); }
.illus .lbl.accent, .illus .lbl.signal { fill: var(--signal); }
.illus .lbl.warn { fill: var(--warn); }
.illus .lbl.good { fill: var(--series-3); }
.illus .lbl.link { fill: var(--accent); text-decoration: underline; }
.illus a { cursor: pointer; }
.illus a:hover .lbl { fill: var(--accent-hover); }

/* --- decision flow figure (SVG, built at build time) --------------------- */

.flow {
  margin: 1.5rem 0 0;
  overflow-x: auto;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--chart-surface);
  padding: 0.75rem;
}
.flow svg { display: block; min-width: 34rem; }
.flow text { font-family: var(--mono); }

/* --- ads ------------------------------------------------------------------ */

.ad-rail { margin: 2.5rem 0 0; }
.ad-rail::before {
  content: "Advertisement";
  display: block;
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  border-top: 1px solid var(--rule);
  padding-top: 0.5rem;
  margin-bottom: 0.5rem;
}
.ad-rail ins { display: block; }

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

.site-foot {
  border-top: 1px solid var(--rule);
  background: var(--paper-2);
  margin-top: 3rem;
  padding-block: 2rem 2.5rem;
  font-size: 0.9375rem;
}
.foot-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 48rem) { .foot-grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.foot-grid h2 {
  font-family: var(--mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-3);
  margin-bottom: 0.6rem;
  font-weight: 400;
}
.foot-grid ul { list-style: none; margin: 0; padding: 0; }
.foot-grid li { padding: 0.2rem 0; }
.foot-grid a { color: var(--ink-2); text-decoration: none; }
.foot-grid a:hover { color: var(--accent); text-decoration: underline; }
.foot-about { color: var(--ink-2); max-width: 42ch; }
.foot-about p { margin: 0 0 0.6rem; }
.foot-legal {
  border-top: 1px solid var(--rule);
  margin-top: 1.75rem;
  padding-top: 1rem;
  font-family: var(--mono);
  /* 13px, not 11. This row carries the only always-visible link to the privacy
     policy -- the other one lives inside the consent banner, which most
     visitors never see -- and a policy a reader cannot find is not a policy
     they have been given. It is also the floor this site applies to prose
     everywhere else. */
  font-size: 0.8125rem;
  line-height: 1.7;
  color: var(--ink-3);
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 1.25rem;
  align-items: center;
}
/* The two that carry an obligation read as links, not as small print. */
.foot-legal a[href="/privacy"],
.foot-legal a[href="/terms"] { color: var(--ink-2); }
.foot-legal a[href="/privacy"]:hover,
.foot-legal a[href="/terms"]:hover { color: var(--accent); }
.foot-legal button {
  font: inherit;
  color: var(--ink-3);
  background: none;
  border: 0;
  border-bottom: 1px dotted var(--ink-3);
  padding: 0;
  cursor: pointer;
}
.foot-legal button:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* --- consent ------------------------------------------------------------- */

.consent {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 60;
  background: var(--surface);
  border-top: 1px solid var(--rule-strong);
  padding: 1rem var(--gutter) 1.1rem;
  font-size: 0.9375rem;
  box-shadow: 0 -12px 32px -24px rgba(0, 0, 0, 0.5);
}
.consent[hidden] { display: none; }
/* While the banner is up it covers the bottom of the viewport. Both halves are
   needed: scroll-padding keeps a focused element clear as the browser scrolls
   to it, and the body padding gives the last elements on the page somewhere to
   scroll to -- without it, footer links can never come out from under it. */
:root.consent-open { scroll-padding-bottom: var(--consent-h, 9rem); }
:root.consent-open body { padding-bottom: var(--consent-h, 9rem); }
.consent-inner {
  max-width: 74rem;
  margin-inline: auto;
  display: grid;
  gap: 0.9rem;
}
@media (min-width: 52rem) {
  .consent-inner { grid-template-columns: 1fr auto; align-items: center; }
}
.consent h2 {
  font-family: var(--mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-3);
  font-weight: 400;
  margin-bottom: 0.35rem;
}
.consent p { margin: 0; color: var(--ink-2); max-width: 78ch; }
.consent-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.consent-actions .btn { flex: 1 1 auto; justify-content: center; }
@media (min-width: 52rem) { .consent-actions .btn { flex: 0 0 auto; } }

/* --- misc ---------------------------------------------------------------- */


/* --- CSV import ----------------------------------------------------------- */

/* Sits between the mode tabs and the form: it is a way of filling the form in,
   so it reads as part of the calculator rather than as a separate tool. Muted
   until you interact with it, because the typed path is still the fast one for
   the four numbers most of these tests need. */
.import {
  border-bottom: 1px solid var(--rule);
  padding: clamp(0.7rem, 2.5vw, 1rem) clamp(0.9rem, 3vw, 1.35rem);
  background: var(--surface-sunken);
}
.import-zone {
  cursor: pointer;
  border: 1px dashed var(--control-border);
  border-radius: var(--radius);
  padding: 0.85rem 1rem;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.import-zone.is-over {
  border-color: var(--accent);
  border-style: solid;
  background: var(--accent-wash);
}
.import-title {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.875rem;
  color: var(--ink);
}
.import-sub {
  margin: 0.3rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--ink-3);
  max-width: 62ch;
}
.linkish {
  font: inherit;
  color: var(--accent);
  background: none;
  border: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  /* Padding out to a 44px tap target, pulled back in by the negative margin so
     the sentence it sits in keeps its line spacing. Inline text buttons are
     otherwise about 20px tall, which is half a finger. */
  padding: 0.75rem 0;
  margin: -0.75rem 0;
}
.linkish:hover { color: var(--accent-hover); }

.import-status {
  margin: 0.55rem 0 0;
  font-family: var(--mono);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--ink-2);
}
.import-status:empty { display: none; }
.import-status[data-tone="error"] { color: var(--signal); }
.import-status[data-tone="ok"] { color: var(--good); }
.import-status[data-tone="warn"] { color: var(--warn); }

.import-panel {
  margin-top: 0.8rem;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 0.9rem 1rem 1rem;
}
.import-panel[hidden] { display: none; }
.import-summary {
  margin: 0 0 0.7rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.import-field + .import-field {
  margin-top: 0.9rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--rule);
}
.import-field-name {
  margin: 0 0 0.45rem;
  font-weight: 600;
  font-size: 0.9375rem;
}
/* Label above control, so a long column name never squeezes the select. */
.import-pair { display: grid; gap: 0.25rem; margin-top: 0.5rem; }
.import-pair label {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--ink-3);
}
.import-pair select {
  font-family: var(--mono);
  font-size: 0.875rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--control-border);
  border-radius: var(--radius);
  padding: 0.45rem 0.5rem;
  min-height: 44px;
  width: 100%;
  max-width: 34rem;
}
.import-layout {
  margin: 0 0 0.9rem;
  padding: 0.55rem 0.7rem 0.7rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}
.import-layout legend {
  padding: 0 0.3rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--ink-3);
}
.import-layout .import-check { display: flex; margin: 0.3rem 0; }

.import-cols {
  margin: 0.6rem 0 0;
  padding: 0.55rem 0.7rem 0.7rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}
.import-cols legend {
  padding: 0 0.3rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--ink-3);
}
.import-check {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.25rem 0.9rem 0.25rem 0;
  font-family: var(--mono);
  font-size: 0.8125rem;
  min-height: 32px;
}
.import-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}

@media (max-width: 30rem) {
  .import-actions .btn { flex: 1 1 auto; }
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.tag {
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 0.1rem 0.35rem;
}

.related { margin-top: 2rem; }
.related h2 {
  font-family: var(--mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-3);
  font-weight: 400;
  border-top: 1px solid var(--rule);
  padding-top: 0.75rem;
  margin-bottom: 0.6rem;
}
.related ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.1rem;
  font-family: var(--mono);
  font-size: 0.8125rem;
}

.js-only { display: none; }
.has-js .js-only { display: revert; }
.has-js .no-js-note { display: none; }
.no-js-note {
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--ink-2);
  background: var(--surface-sunken);
  border: 1px dashed var(--rule-strong);
  border-radius: var(--radius);
  padding: 0.6rem 0.75rem;
  margin-top: 1rem;
}

@media (prefers-reduced-motion: no-preference) {
  .result { animation: rise 220ms ease-out; }
  @keyframes rise {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: none; }
  }
}

@media print {
  .site-nav, .consent, .ad-rail, .calc-actions, .theme-toggle { display: none; }
  body { background: #fff; color: #000; }
}