/* NetBurn design system.
   Two colours carry the whole argument: warm for what a protocol spends,
   cool for what is still waiting to arrive. Everything else is neutral so
   those two read instantly in a table.

   THEMING. Dark is the design's home, so :root is dark and light is an
   override. Every colour below is a token; nothing downstream hardcodes one,
   because the white overlays this design leans on (var(--surface-3) and
   friends) are invisible on a light background. Two separate accent roles
   matter: --burn / --float are FILLS and stay saturated, while --burn-fg /
   --float-fg are TEXT and darken in light mode, where #ff7a45 on white is
   about 2.2:1 and unreadable. */

:root {
  color-scheme: dark;

  --burn: #ff7a45;
  --burn-fg: #ff7a45;
  --burn-hover: var(--burn-hover);
  --burn-glow: rgba(255, 122, 69, 0.14);
  --float: #4cc9f0;
  --float-fg: #4cc9f0;
  --float-glow: rgba(76, 201, 240, 0.12);
  --stat: #c8b6ff;

  --bg: #08090b;
  --bg-2: #0d0f13;
  --masthead-bg: var(--masthead-bg);

  --surface: rgba(255, 255, 255, 0.026);
  --surface-2: rgba(255, 255, 255, 0.045);
  --surface-3: rgba(255, 255, 255, 0.06);
  --surface-4: rgba(255, 255, 255, 0.1);
  --hover: rgba(255, 255, 255, 0.022);
  --thead-bg: rgba(255, 255, 255, 0.015);
  --track: rgba(255, 255, 255, 0.07);

  --line: rgba(255, 255, 255, 0.085);
  --line-2: rgba(255, 255, 255, 0.14);
  --line-3: rgba(255, 255, 255, 0.26);
  --row-line: rgba(255, 255, 255, 0.05);
  --gridline: rgba(255, 255, 255, 0.05);
  --placebo: rgba(255, 255, 255, 0.14);
  --placebo-2: rgba(255, 255, 255, 0.24);

  --ink: #f4f6f8;
  --ink-2: #b6bec7;
  --ink-3: #7d868f;
  --ink-4: #545c65;
  --on-accent: var(--on-accent);

  --ok: #4ade80;
  --warn: #fbbf24;
  --bad: #f87171;

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

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

/* Light. Applied when the reader picks it, or when the system asks for it and
   the reader has not picked dark. An explicit choice always wins. */
:root[data-theme='light'],
:root[data-theme='light'] * { }

@media (prefers-color-scheme: light) {
  :root:not([data-theme='dark']) {
    color-scheme: light;
    --burn-fg: #c2410c;
    --float-fg: #0e7490;
    --stat: #6d4aff;
    --bg: #fbfbfd;
    --bg-2: #f2f2f6;
    --masthead-bg: rgba(251, 251, 253, 0.78);
    --burn-glow: rgba(255, 122, 69, 0.10);
    --float-glow: rgba(76, 201, 240, 0.10);
    --surface: rgba(255, 255, 255, 0.72);
    --surface-2: rgba(0, 0, 0, 0.035);
    --surface-3: rgba(0, 0, 0, 0.05);
    --surface-4: rgba(0, 0, 0, 0.08);
    --hover: rgba(0, 0, 0, 0.025);
    --thead-bg: rgba(0, 0, 0, 0.022);
    --track: rgba(0, 0, 0, 0.08);
    --line: rgba(0, 0, 0, 0.11);
    --line-2: rgba(0, 0, 0, 0.17);
    --line-3: rgba(0, 0, 0, 0.3);
    --row-line: rgba(0, 0, 0, 0.07);
    --gridline: rgba(0, 0, 0, 0.07);
    --placebo: rgba(0, 0, 0, 0.16);
    --placebo-2: rgba(0, 0, 0, 0.28);
    --ink: #14161a;
    --ink-2: #414852;
    --ink-3: #6b7480;
    --ink-4: #8c95a1;
    --ok: #15803d;
    --warn: #a16207;
    --bad: #b91c1c;
  }
}

:root[data-theme='light'] {
  color-scheme: light;
  --burn-fg: #c2410c;
  --float-fg: #0e7490;
  --stat: #6d4aff;
  --bg: #fbfbfd;
  --bg-2: #f2f2f6;
  --masthead-bg: rgba(251, 251, 253, 0.78);
  --burn-glow: rgba(255, 122, 69, 0.10);
  --float-glow: rgba(76, 201, 240, 0.10);
  --surface: rgba(255, 255, 255, 0.72);
  --surface-2: rgba(0, 0, 0, 0.035);
  --surface-3: rgba(0, 0, 0, 0.05);
  --surface-4: rgba(0, 0, 0, 0.08);
  --hover: rgba(0, 0, 0, 0.025);
  --thead-bg: rgba(0, 0, 0, 0.022);
  --track: rgba(0, 0, 0, 0.08);
  --line: rgba(0, 0, 0, 0.11);
  --line-2: rgba(0, 0, 0, 0.17);
  --line-3: rgba(0, 0, 0, 0.3);
  --row-line: rgba(0, 0, 0, 0.07);
  --gridline: rgba(0, 0, 0, 0.07);
  --placebo: rgba(0, 0, 0, 0.16);
  --placebo-2: rgba(0, 0, 0, 0.28);
  --ink: #14161a;
  --ink-2: #414852;
  --ink-3: #6b7480;
  --ink-4: #8c95a1;
  --ok: #15803d;
  --warn: #a16207;
  --bad: #b91c1c;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Ambient wash. Two pools of colour that never quite meet — the same tension
   the site is about. Fixed so it does not scroll with content. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(1100px 620px at 12% -8%, var(--burn-glow), transparent 62%),
    radial-gradient(900px 560px at 92% 4%, var(--float-glow), transparent 60%);
}

main, header, footer { position: relative; z-index: 1; }

a { color: inherit; }

/* --- layout ------------------------------------------------------------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.narrow { max-width: 760px; }

section { padding: 72px 0; }
section + section { border-top: 1px solid var(--line); }

/* --- masthead ----------------------------------------------------------- */
.masthead {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  background: var(--masthead-bg);
  border-bottom: 1px solid var(--line);
}
.masthead .wrap {
  display: flex;
  align-items: center;
  gap: 28px;
  height: 60px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 640;
  letter-spacing: -0.02em;
  text-decoration: none;
  font-size: 17px;
}
.brand .mark {
  /* The masthead mark and the favicon are the same file, not two drawings kept
     in sync by hand. Changing assets/favicon.svg changes both. */
  width: 24px; height: 24px;
  background: url('/assets/favicon.svg') center / contain no-repeat;
  border-radius: 7px;
  box-shadow: 0 0 18px rgba(255, 122, 69, 0.22);
  flex: none;
}
/* Nav sits immediately after the brand, on the left. It is wider than a phone,
   so it scrolls inside itself rather than making the whole page scroll. */
.masthead nav {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  min-width: 0;
}
.masthead nav::-webkit-scrollbar { display: none; }
.masthead nav a {
  text-decoration: none;
  color: var(--ink-3);
  font-size: 14px;
  padding: 7px 12px;
  border-radius: 9px;
  transition: color .15s, background .15s;
  white-space: nowrap;
}
.masthead nav a:hover { color: var(--ink); background: var(--surface-2); }
.masthead nav a[aria-current='page'] { color: var(--ink); background: var(--surface-2); }

/* Right-hand group: everything that is not navigation lives here. */
.masthead-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
}

/* Theme switch. A track with a sliding knob — the affordance reads as a switch
   rather than a button, which matters because it is next to a status pill. */
.theme-switch {
  position: relative;
  width: 52px; height: 28px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: var(--surface-2);
  cursor: pointer;
  display: flex; align-items: center;
  flex: none;
  transition: background .18s, border-color .18s;
}
.theme-switch:hover { border-color: var(--line-3); background: var(--surface-3); }
.theme-switch .knob {
  position: absolute;
  top: 2px; left: 2px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--bg);
  color: var(--ink-2);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
  transition: transform .22s cubic-bezier(.3, .7, .4, 1), color .18s;
}
.theme-switch .knob[data-eff='light'] { transform: translateX(24px); color: var(--burn-fg); }
/* A dot when the reader has pinned a choice, so "following the system" and
   "overridden" are not silently identical states. */
.theme-switch .pin {
  position: absolute;
  top: -2px; right: -2px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--float);
  border: 1.5px solid var(--bg);
}

/* Freshness badge. States its own age rather than just claiming "live". */
.freshness { display: flex; align-items: center; }
.freshness .pill { gap: 7px; }
.freshness .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; flex: none;
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.masthead nav { margin-left: 18px; }
@media (max-width: 700px) {
  .freshness .pill { font-size: 9.5px; padding: 3px 6px; }
  .masthead nav { margin-left: 8px; }
  .masthead-right { gap: 8px; }
  .theme-switch { width: 44px; height: 24px; }
  .theme-switch .knob { width: 18px; height: 18px; }
  .theme-switch .knob[data-eff='light'] { transform: translateX(20px); }
}

/* --- type --------------------------------------------------------------- */
h1 {
  font-size: clamp(2.1rem, 5.2vw, 3.6rem);
  line-height: 1.06;
  letter-spacing: -0.035em;
  font-weight: 660;
  margin: 0 0 20px;
}
h2 {
  font-size: clamp(1.4rem, 2.6vw, 1.85rem);
  line-height: 1.2;
  letter-spacing: -0.024em;
  font-weight: 640;
  margin: 0 0 14px;
}
h3 {
  font-size: 1.03rem;
  letter-spacing: -0.012em;
  font-weight: 620;
  margin: 0 0 8px;
}
p { margin: 0 0 16px; color: var(--ink-2); }
.lede { font-size: clamp(1.02rem, 1.7vw, 1.2rem); color: var(--ink-2); line-height: 1.62; }
strong { color: var(--ink); font-weight: 620; }

.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin: 0 0 16px;
}

.muted { color: var(--ink-3); }
.small { font-size: 13.5px; line-height: 1.55; }
.tnum { font-variant-numeric: tabular-nums; }

.burn-ink { color: var(--burn-fg); }
.float-ink { color: var(--float-fg); }

/* --- surfaces ----------------------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.card.tight { padding: 16px 18px; }

.grid { display: grid; gap: 16px; }
.grid.c2 { grid-template-columns: repeat(2, 1fr); }
.grid.c3 { grid-template-columns: repeat(3, 1fr); }
.grid.c4 { grid-template-columns: repeat(4, 1fr); }

/* --- the headline pair -------------------------------------------------- */
.ledger {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0;
  align-items: stretch;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.ledger .side { padding: 26px 24px; }
.ledger .side.burn { background: linear-gradient(180deg, rgba(255,122,69,.055), transparent 70%); }
.ledger .side.float { background: linear-gradient(180deg, rgba(76,201,240,.05), transparent 70%); }
.ledger .vs {
  display: flex; align-items: center; justify-content: center;
  padding: 0 18px;
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.ledger .figure {
  font-size: clamp(1.9rem, 4.4vw, 2.9rem);
  font-weight: 660;
  letter-spacing: -0.035em;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  margin: 6px 0 8px;
}
.ledger .side.burn .figure { color: var(--burn-fg); }
.ledger .side.float .figure { color: var(--float-fg); }
.ledger .label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.ledger .sub { font-size: 13.5px; color: var(--ink-3); margin: 0; line-height: 1.5; }

/* --- stat tiles --------------------------------------------------------- */
.stat {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 16px 18px;
}
.stat .k {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-4);
  display: block;
  margin-bottom: 8px;
}
.stat .v {
  font-size: 1.6rem;
  font-weight: 640;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.stat .n { font-size: 12.5px; color: var(--ink-3); margin-top: 6px; line-height: 1.45; }

/* --- tables ------------------------------------------------------------- */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 720px; }
thead th {
  text-align: right;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-4);
  font-weight: 500;
  padding: 14px 14px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
  background: var(--thead-bg);
}
thead th:first-child, tbody td:first-child { text-align: left; }
tbody td {
  text-align: right;
  padding: 13px 14px;
  border-bottom: 1px solid var(--row-line);
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
  white-space: nowrap;
}
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: var(--hover); }
tbody td.name { color: var(--ink); font-weight: 560; }
tbody td .sym {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-4);
  margin-left: 7px;
}

/* --- pills / badges ----------------------------------------------------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  color: var(--ink-3);
  white-space: nowrap;
}
.pill.burn { color: var(--burn-fg); border-color: rgba(255,122,69,.34); background: rgba(255,122,69,.07); }
.pill.hold { color: var(--float-fg); border-color: rgba(76,201,240,.3); background: rgba(76,201,240,.06); }
.pill.distribute { color: var(--stat); border-color: rgba(200,182,255,.28); background: rgba(200,182,255,.06); }
.pill.none { color: var(--ink-4); }
.pill.ok { color: var(--ok); border-color: rgba(74,222,128,.3); background: rgba(74,222,128,.06); }
.pill.warn { color: var(--warn); border-color: rgba(251,191,36,.3); background: rgba(251,191,36,.06); }
.pill.bad { color: var(--bad); border-color: rgba(248,113,113,.32); background: rgba(248,113,113,.07); }

/* --- callouts ----------------------------------------------------------- */
.note {
  border-left: 2px solid var(--line-2);
  padding: 2px 0 2px 18px;
  margin: 24px 0;
  color: var(--ink-3);
  font-size: 14.5px;
}
.note.trap { border-left-color: var(--warn); }
.note.trap strong { color: var(--warn); }
.note.burn { border-left-color: var(--burn); }

/* --- controls ----------------------------------------------------------- */
.controls {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 26px;
  align-items: flex-end;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.field > label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-4);
}
select, button, input[type='text'] {
  font-family: inherit;
  font-size: 14px;
  color: var(--ink);
  background: var(--surface-3);
  border: 1px solid var(--line-2);
  border-radius: 9px;
  padding: 8px 11px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
select:hover, button:hover { border-color: var(--line-3); background: var(--surface-3); }
select:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--float); outline-offset: 2px;
}
button.primary {
  background: var(--burn); border-color: var(--burn); color: var(--on-accent); font-weight: 620;
}
button.primary:hover { background: var(--burn-hover); border-color: var(--burn-hover); }
button:disabled { opacity: .45; cursor: not-allowed; }

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: 3px; border-radius: 2px; background: var(--line-2);
}
input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--burn); border: 2px solid var(--bg);
  margin-top: -6.5px;
  box-shadow: 0 0 0 1px var(--burn), 0 2px 10px rgba(255,122,69,.5);
}
input[type='range']::-moz-range-track { height: 3px; border-radius: 2px; background: var(--line-2); }
input[type='range']::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--bg);
  background: var(--burn); box-shadow: 0 0 0 1px var(--burn);
}

.seg { display: inline-flex; padding: 3px; gap: 3px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; }
.seg button {
  border: none; background: transparent; padding: 6px 12px; border-radius: 7px;
  font-size: 13px; color: var(--ink-3);
}
.seg button[aria-pressed='true'] { background: var(--surface-4); color: var(--ink); }

/* --- charts ------------------------------------------------------------- */
figure { margin: 0; }
/* Charts must not push the page sideways. Labels are placed inside the
   viewBox by every renderer in charts.js, so clipping here costs nothing and
   guarantees the body never scrolls horizontally on a narrow screen. */
.chart { width: 100%; max-width: 100%; display: block; overflow: hidden; }
.chart text { font-family: var(--mono); font-size: 10px; fill: var(--ink-4); }
.chart .axis line, .chart .axis path { stroke: var(--line); }
.chart .gridline { stroke: var(--gridline); }
.chart .placebo { stroke: var(--placebo); fill: none; stroke-width: 1; }
.chart .treated { stroke: var(--burn); fill: none; stroke-width: 2.2; }
.chart .zero { stroke: var(--line-2); stroke-dasharray: 3 3; }
.chart .marker { stroke: var(--float); stroke-dasharray: 4 3; }

.legend { display: flex; flex-wrap: wrap; gap: 16px; font-size: 12.5px; color: var(--ink-3); margin-top: 12px; }
.legend .k { display: inline-flex; align-items: center; gap: 7px; }
.legend .swatch { width: 15px; height: 2.5px; border-radius: 2px; background: currentColor; }

/* --- footer ------------------------------------------------------------- */
footer {
  border-top: 1px solid var(--line);
  padding: 40px 0 60px;
  color: var(--ink-4);
  font-size: 13px;
}
footer a { color: var(--ink-3); }
footer .cols { display: flex; flex-wrap: wrap; gap: 32px; justify-content: space-between; }

/* --- misc --------------------------------------------------------------- */
code {
  font-family: var(--mono);
  font-size: .88em;
  background: var(--surface-3);
  padding: 1.5px 5px;
  border-radius: 5px;
  color: var(--ink);
}
hr { border: none; border-top: 1px solid var(--line); margin: 32px 0; }

.loading { color: var(--ink-4); font-family: var(--mono); font-size: 12.5px; }

.timing {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--ink-4);
}

/* --- responsive --------------------------------------------------------- */
@media (max-width: 900px) {
  .grid.c4 { grid-template-columns: repeat(2, 1fr); }
  .grid.c3 { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  section { padding: 52px 0; }
  .wrap { padding: 0 18px; }
  .grid.c2, .grid.c4 { grid-template-columns: 1fr; }
  .ledger { grid-template-columns: 1fr; }
  .ledger .vs {
    border-left: none; border-right: none;
    border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
    padding: 9px 0;
  }
  .masthead nav a { padding: 7px 9px; font-size: 13px; }
  .masthead .wrap { gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}