/* OneHop design system.

   The argument is a single contrast held across every page: a funder that seeded
   several wallets with the same computed amount (one hand), against a funder
   that seeded several wallets with different amounts (a service anyone can use).
   Orange is the finding, blue is the thing people mistake for the finding, and
   everything else stays quiet.

   THEMING. Dark is home, light is an override, and every colour is a token
   because the surfaces are white overlays that vanish on a light ground. Fills
   stay saturated across themes; text roles (--linked-fg, --solo-fg) darken in
   light, where #34d399 on white is ~1.6:1 and unreadable. */

:root {
  color-scheme: dark;

  --linked: #f97316;
  --linked-fg: #fb923c;
  --linked-glow: rgba(249, 115, 22, 0.15);
  --service: #60a5fa;
  --service-fg: #7cb6fd;
  --service-glow: rgba(96, 165, 250, 0.14);
  --solo: #34d399;
  --solo-fg: #34d399;
  --unknown: #8b8fa3;
  --unknown-fg: #9ca0b3;

  --bg: #07080d;
  --bg-2: #0b0d14;
  --masthead-bg: rgba(7, 8, 13, 0.74);

  --surface: rgba(255, 255, 255, 0.028);
  --surface-2: rgba(255, 255, 255, 0.05);
  --surface-3: rgba(255, 255, 255, 0.075);
  --hover: rgba(255, 255, 255, 0.038);
  --track: rgba(255, 255, 255, 0.08);

  --line: rgba(255, 255, 255, 0.09);
  --line-2: rgba(255, 255, 255, 0.16);
  --gridline: rgba(255, 255, 255, 0.055);

  --ink: #f4f5f8;
  --ink-2: #b5bac5;
  --ink-3: #7d838f;
  --ink-4: #545a66;
  --on-accent: #170d03;

  --radius: 16px;
  --radius-sm: 10px;
  --maxw: 1160px;

  --sans: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', 'Segoe UI', system-ui, sans-serif;
  --mono: 'SF Mono', ui-monospace, 'JetBrains Mono', Menlo, monospace;

  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 32px rgba(0, 0, 0, 0.34);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme='dark']) {
    color-scheme: light;
    --linked-fg: #c2410c;
    --service-fg: #1d4ed8;
    --solo-fg: #047857;
    --unknown-fg: #6b7280;

    --bg: #fbfbfd;
    --bg-2: #f2f3f7;
    --masthead-bg: rgba(251, 251, 253, 0.78);

    --surface: rgba(9, 12, 20, 0.028);
    --surface-2: rgba(9, 12, 20, 0.05);
    --surface-3: rgba(9, 12, 20, 0.08);
    --hover: rgba(9, 12, 20, 0.035);
    --track: rgba(9, 12, 20, 0.1);

    --line: rgba(9, 12, 20, 0.11);
    --line-2: rgba(9, 12, 20, 0.2);
    --gridline: rgba(9, 12, 20, 0.08);

    --ink: #0a0c12;
    --ink-2: #434a57;
    --ink-3: #6b717f;
    --ink-4: #939aa6;
    --on-accent: #ffffff;

    --shadow: 0 1px 2px rgba(9, 12, 20, 0.06), 0 12px 28px rgba(9, 12, 20, 0.09);
  }
}

:root[data-theme='light'] {
  color-scheme: light;
  --linked-fg: #c2410c;
  --service-fg: #1d4ed8;
  --solo-fg: #047857;
  --unknown-fg: #6b7280;

  --bg: #fbfbfd;
  --bg-2: #f2f3f7;
  --masthead-bg: rgba(251, 251, 253, 0.78);

  --surface: rgba(9, 12, 20, 0.028);
  --surface-2: rgba(9, 12, 20, 0.05);
  --surface-3: rgba(9, 12, 20, 0.08);
  --hover: rgba(9, 12, 20, 0.035);
  --track: rgba(9, 12, 20, 0.1);

  --line: rgba(9, 12, 20, 0.11);
  --line-2: rgba(9, 12, 20, 0.2);
  --gridline: rgba(9, 12, 20, 0.08);

  --ink: #0a0c12;
  --ink-2: #434a57;
  --ink-3: #6b717f;
  --ink-4: #939aa6;
  --on-accent: #ffffff;

  --shadow: 0 1px 2px rgba(9, 12, 20, 0.06), 0 12px 28px rgba(9, 12, 20, 0.09);
}

* { box-sizing: border-box; }

/* `overflow-x: clip`, NOT `hidden`. On body, `hidden` forces the other axis to
   `auto` and breaks `position: sticky` in the masthead. */
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  overflow-x: clip;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* A single, very soft wash so the page is not a flat rectangle. Fixed so it
   does not travel with the scroll. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(70rem 40rem at 12% -8%, var(--linked-glow), transparent 62%),
    radial-gradient(60rem 36rem at 92% 2%, var(--service-glow), transparent 60%),
    linear-gradient(var(--bg), var(--bg-2));
}

a { color: inherit; }
h1, h2, h3, h4 { line-height: 1.18; letter-spacing: -0.021em; margin: 0; font-weight: 640; }
p { margin: 0 0 1em; }
code, .mono { font-family: var(--mono); font-variant-ligatures: none; }

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 22px; }

/* ---------------------------------------------------------------- masthead */
.masthead {
  position: sticky;
  top: 0;
  z-index: 40;
  backdrop-filter: saturate(1.7) blur(16px);
  -webkit-backdrop-filter: saturate(1.7) blur(16px);
  background: var(--masthead-bg);
  border-bottom: 1px solid var(--line);
}
.masthead .wrap { display: flex; align-items: center; gap: 22px; height: 58px; }
.brandmark {
  display: inline-flex; align-items: center; gap: 9px;
  font-weight: 660; letter-spacing: -0.02em; text-decoration: none; font-size: 15.5px;
}
/* The glyph is the argument in miniature: two dots and one arc between them. */
.brandmark .glyph { width: 22px; height: 22px; display: block; flex: none; }
.masthead nav { display: flex; gap: 4px; margin-left: auto; }
.masthead nav a {
  padding: 6px 11px; border-radius: 999px; text-decoration: none;
  color: var(--ink-3); font-size: 13.5px; font-weight: 520;
  transition: color .15s ease, background .15s ease;
}
.masthead nav a:hover { color: var(--ink); background: var(--hover); }
.masthead nav a[aria-current='page'] { color: var(--ink); background: var(--surface-2); }
.masthead-right { display: flex; align-items: center; gap: 4px; }
.icon-link {
  display: inline-grid; place-items: center; width: 30px; height: 30px;
  border-radius: 8px; border: 1px solid transparent; background: none;
  color: var(--ink-3); cursor: pointer; text-decoration: none;
  transition: color .15s ease, background .15s ease;
}
.icon-link:hover { color: var(--ink); background: var(--hover); }

/* ------------------------------------------------------------------- hero */
.hero { padding: 68px 0 34px; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 18px;
}
.eyebrow .pip {
  width: 6px; height: 6px; border-radius: 50%; background: var(--linked);
  box-shadow: 0 0 0 3px var(--linked-glow);
}
.hero h1 { font-size: clamp(2.1rem, 5.2vw, 3.5rem); font-weight: 680; letter-spacing: -0.033em; }
.hero .lede {
  margin-top: 18px; max-width: 46rem; font-size: clamp(1.02rem, 1.8vw, 1.16rem);
  color: var(--ink-2); line-height: 1.62;
}
.hero .lede strong { color: var(--ink); font-weight: 620; }

/* ------------------------------------------------------------------ cards */
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 20px;
}
.card.raised { box-shadow: var(--shadow); background: var(--surface); }

.stat-row {
  display: grid; gap: 12px; margin: 30px 0 8px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.stat {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 17px 18px 15px;
}
.stat .k {
  font-size: 11.5px; letter-spacing: 0.075em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 600;
}
.stat .v {
  font-size: clamp(1.6rem, 3.4vw, 2.05rem); font-weight: 660; letter-spacing: -0.028em;
  margin-top: 7px; font-variant-numeric: tabular-nums;
}
.stat .n { font-size: 12.8px; color: var(--ink-3); margin-top: 5px; line-height: 1.45; }
.stat.is-linked .v { color: var(--linked-fg); }
.stat.is-service .v { color: var(--service-fg); }
.stat.is-solo .v { color: var(--solo-fg); }

/* --------------------------------------------------------------- sections */
section { padding: 40px 0; }
section > .wrap > h2 {
  font-size: clamp(1.35rem, 2.6vw, 1.72rem); letter-spacing: -0.026em;
}
.section-note { color: var(--ink-2); max-width: 44rem; margin-top: 12px; }
.kicker {
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.085em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 10px;
}

/* ---------------------------------------------------------------- tables */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.data {
  width: 100%; border-collapse: collapse; font-size: 13.6px;
  font-variant-numeric: tabular-nums;
}
table.data th {
  text-align: left; font-weight: 600; color: var(--ink-3); font-size: 11.5px;
  letter-spacing: 0.06em; text-transform: uppercase; padding: 9px 12px;
  border-bottom: 1px solid var(--line-2); white-space: nowrap;
}
table.data td {
  padding: 10px 12px; border-bottom: 1px solid var(--gridline); vertical-align: middle;
}
table.data tbody tr:hover { background: var(--hover); }
table.data td.num, table.data th.num { text-align: right; }
table.data a { text-decoration: none; border-bottom: 1px solid var(--line-2); }
table.data a:hover { border-bottom-color: currentColor; }

.tag {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px;
  border-radius: 999px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.01em;
  border: 1px solid var(--line-2); color: var(--ink-2); white-space: nowrap;
}
.tag.linked { color: var(--linked-fg); border-color: color-mix(in srgb, var(--linked) 45%, transparent); background: var(--linked-glow); }
.tag.service { color: var(--service-fg); border-color: color-mix(in srgb, var(--service) 45%, transparent); background: var(--service-glow); }
.tag.solo { color: var(--solo-fg); border-color: color-mix(in srgb, var(--solo) 40%, transparent); }
.tag.unknown { color: var(--unknown-fg); }

/* -------------------------------------------------------------- controls */
.controls {
  display: flex; flex-wrap: wrap; gap: 18px 26px; align-items: flex-end;
  padding: 16px 18px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius);
}
.control { display: flex; flex-direction: column; gap: 6px; min-width: 200px; flex: 1 1 200px; }
.control label {
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-3);
}
.control .readout { font-size: 13.5px; color: var(--ink); font-variant-numeric: tabular-nums; }
.control .readout b { font-weight: 640; }
input[type='range'] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 22px;
  background: transparent; cursor: pointer; margin: 0;
}
input[type='range']::-webkit-slider-runnable-track {
  height: 4px; border-radius: 999px; background: var(--track);
}
input[type='range']::-moz-range-track { height: 4px; border-radius: 999px; background: var(--track); }
input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 16px; height: 16px; margin-top: -6px;
  border-radius: 50%; background: var(--linked); border: 2px solid var(--bg);
  box-shadow: 0 0 0 1px var(--line-2);
}
input[type='range']::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%; background: var(--linked);
  border: 2px solid var(--bg); box-shadow: 0 0 0 1px var(--line-2);
}
input[type='range']:focus-visible { outline: 2px solid var(--linked); outline-offset: 4px; }

.btn {
  appearance: none; border: 1px solid var(--line-2); background: var(--surface-2);
  color: var(--ink); font: inherit; font-size: 13.5px; font-weight: 560;
  padding: 8px 15px; border-radius: 10px; cursor: pointer;
  transition: background .15s ease, border-color .15s ease, opacity .15s ease;
}
.btn:hover { background: var(--surface-3); }
.btn:disabled,
.btn[aria-disabled='true'] { opacity: 0.45; cursor: default; }
/* aria-disabled rather than the disabled attribute, so the control keeps focus
   while it works — see setBusy() in js/rerun.js. */
.btn[aria-disabled='true'] { pointer-events: none; }
.btn:focus-visible { outline: 2px solid var(--linked); outline-offset: 2px; }
a:focus-visible, input:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--linked);
  outline-offset: 2px;
}
.btn.primary {
  background: var(--linked); border-color: var(--linked); color: var(--on-accent); font-weight: 620;
}
.btn.primary:hover { filter: brightness(1.07); }

input[type='text'], input[type='search'] {
  width: 100%; font: inherit; font-size: 14px; font-family: var(--mono);
  padding: 10px 13px; border-radius: 10px; border: 1px solid var(--line-2);
  background: var(--surface); color: var(--ink);
}
input[type='text']:focus, input[type='search']:focus {
  outline: none; border-color: var(--linked); box-shadow: 0 0 0 3px var(--linked-glow);
}

/* ----------------------------------------------------------------- chart */
/* Charts are authored at a fixed 900-unit width and scaled to the container. On
   a 375px phone that is a 0.4x scale, which renders 10.5px axis labels at about
   4px — present, and unreadable. So below the breakpoint the chart keeps a
   legible minimum width and its wrapper scrolls, exactly as .table-scroll
   already does for the wide tables. */
.chart { width: 100%; height: auto; display: block; overflow: visible; }
.chart-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 700px) {
  .chart-scroll .chart { min-width: 620px; }
}
/* The marks are focusable now, so they need a visible focus ring. */
.chart [tabindex]:focus-visible {
  outline: 2px solid var(--linked);
  outline-offset: 2px;
}
.chart .axis { stroke: var(--gridline); stroke-width: 1; }
/* --ink-3, not --ink-4. Axis labels are the only text on a chart and they carry
   the reading; at --ink-4 they measured 2.89:1 on the dark ground and 2.74:1 on
   the light one, both under the 3:1 floor for meaningful non-body text. */
.chart .tick { fill: var(--ink-3); font-size: 10.5px; font-family: var(--sans); }
.chart .label { fill: var(--ink-2); font-size: 11.5px; font-family: var(--sans); font-weight: 560; }

/* ------------------------------------------------------------------ misc */
.note {
  border-left: 2px solid var(--line-2); padding: 2px 0 2px 15px;
  color: var(--ink-2); font-size: 14.4px; margin: 18px 0;
}
.note.warn { border-left-color: var(--linked); }
.dim { color: var(--ink-3); }
.small { font-size: 13px; }
.mono-sm { font-family: var(--mono); font-size: 12.4px; }

.badge-live {
  display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px;
  border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface);
  font-size: 12px; color: var(--ink-2); font-weight: 540;
}
.badge-live .dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--solo);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--solo) 18%, transparent);
}

.site-footer { border-top: 1px solid var(--line); margin-top: 56px; padding: 30px 0 46px; }
.foot-nav { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; font-size: 13.5px; }
.foot-nav a { text-decoration: none; color: var(--ink-2); }
.foot-nav a:hover { color: var(--ink); }
.foot-nav .dot { color: var(--ink-4); }
.foot-note { font-size: 12.8px; color: var(--ink-3); max-width: 52rem; margin-top: 10px; }
/* --ink-4 measures 2.89:1 on the dark ground and 2.74:1 on the light one. That
   is below the 4.5:1 floor for body text and below even the 3:1 large-text
   floor, so it is a decorative token: hairlines, disabled marks, never words a
   reader is expected to read. */
.foot-note.dim { color: var(--ink-3); }

@media (max-width: 720px) {
  .masthead .wrap { gap: 10px; }
  .masthead nav { gap: 0; }
  .masthead nav a { padding: 6px 8px; font-size: 12.8px; }
  .hero { padding: 44px 0 24px; }
  section { padding: 30px 0; }
  .controls { gap: 14px 18px; }
}

/* Four nav items, a wordmark and a toggle do not fit across 375px. The wordmark
   is the thing that can go: the glyph still links home and still identifies the
   site, where dropping a nav item would hide a page. Measured — at 375px the
   masthead overran the viewport by 6px, which is enough to make the whole
   document scroll sideways. */
@media (max-width: 430px) {
  .wrap { padding: 0 14px; }
  .stat .v { font-size: clamp(1.45rem, 8vw, 1.8rem); }
  .brandmark span:not(.glyph) { display: none; }
  .masthead nav a { padding: 6px 7px; font-size: 12.4px; }
  .icon-link { width: 28px; height: 28px; }
  .stat { padding: 15px 15px 13px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}