/* ============================================================
   Whitepaper — long-form document treatment.
   Dark-first like the rest of the site, but tuned for reading:
   a narrow measure, hairline rules, mono chrome, figures on
   glass plates. Loaded only by the whitepaper route.
   ============================================================ */

/* Chart series — the handoff package's colourblind-validated set
   (blue / green / magenta / yellow / aqua), re-lit for the dark canvas.
   Per-series hue assignments are kept exactly as specified:
   s1 Launch · s2 Community · s3 Team · s4 Treasury · s5 Emissions. */
:root {
  --wp-s1: #3E92F0;
  --wp-s2: #2FB86B;
  --wp-s3: #E05A94;
  --wp-s4: #E8B23C;
  --wp-s5: #24B3A0;
}

/* ---- Unlisted band ------------------------------------------------------ */
/* This route is shared by link only. The band is the reader's cue that the
   document is not public yet; remove it when the page goes live. */
.wp-band {
  position: relative; z-index: 60;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 6px 14px; text-align: center;
  padding: 9px var(--s-4);
  margin-top: var(--header-h);
  background: rgba(255, 200, 0, .07);
  border-bottom: 1px solid rgba(255, 200, 0, .22);
  font: 600 11px/1.4 var(--font-mono);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent-amber);
}
.wp-band .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-amber); }
.wp-band span { color: rgba(255, 200, 0, .62); letter-spacing: .1em; }

/* ---- Reading progress --------------------------------------------------- */
.wp-progress {
  position: fixed; inset: 0 0 auto 0; z-index: 70;
  height: 2px; background: transparent; pointer-events: none;
}
.wp-progress i {
  display: block; height: 100%; width: 0;
  background: var(--grad-blue);
  box-shadow: 0 0 12px -2px rgba(var(--halo-cyan-rgb), .8);
  transform-origin: left center;
}

/* ---- Shell -------------------------------------------------------------- */
.wp-main { padding-bottom: var(--s-10); }
.wp-wrap { max-width: 1220px; margin-inline: auto; padding-inline: var(--s-5); }

/* ---- Masthead ----------------------------------------------------------- */
.wp-hero { position: relative; text-align: center; padding: clamp(56px, 9vw, 104px) 0 clamp(36px, 5vw, 60px); }
.wp-hero .eyebrow {
  position: relative;
  font: 600 11px/1 var(--font-mono); letter-spacing: .24em; text-transform: uppercase;
  color: var(--ink-50); margin: 0 0 var(--s-5);
}
.wp-hero h1 {
  position: relative;
  font-size: clamp(3.4rem, 11vw, 6.5rem); font-weight: 900;
  line-height: .95; letter-spacing: -.035em; margin: 0;
}
.wp-hero .tagline {
  position: relative;
  font-size: clamp(1.1rem, 3vw, 1.5rem); color: var(--ink-70);
  max-width: 22ch; margin: var(--s-5) auto 0; text-wrap: balance;
}
.wp-hero .meta {
  position: relative;
  margin-top: var(--s-6);
  font: 500 11px/2 var(--font-mono); letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-50);
}
.wp-hero .meta b { color: var(--ink-70); font-weight: 600; }

/* ---- Layout: sticky TOC rail + article ---------------------------------- */
.wp-layout { display: block; }
@media (min-width: 1080px) {
  .wp-layout { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
}

.wp-toc { display: none; }
@media (min-width: 1080px) {
  .wp-toc {
    display: block; position: sticky; top: calc(var(--header-h) + 56px);
    padding-top: 4px;
  }
}
.wp-toc h2 {
  font: 600 10px/1 var(--font-mono); letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink-30); margin: 0 0 var(--s-4);
}
.wp-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: wptoc; }
.wp-toc a {
  display: flex; gap: 10px; align-items: baseline;
  padding: 7px 0 7px 12px; margin-left: -1px;
  border-left: 1px solid var(--glass-bd);
  font-size: 13.5px; line-height: 1.4; color: var(--ink-50); text-decoration: none;
  counter-increment: wptoc;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.wp-toc a::before {
  content: counter(wptoc);
  font: 600 10px/1.6 var(--font-mono); color: var(--ink-30); min-width: 10px;
}
.wp-toc a:hover { color: var(--ink); }
.wp-toc a.on { color: var(--accent-ink); border-left-color: var(--accent-ink); }
.wp-toc a.on::before { color: var(--accent-ink); }

/* ---- Article ------------------------------------------------------------ */
.wp-article { max-width: 74ch; margin-inline: auto; min-width: 0; }
@media (min-width: 1080px) { .wp-article { margin-inline: 0; } }

.wp-abstract {
  border-top: 1px solid var(--glass-bd);
  border-bottom: 1px solid var(--glass-bd);
  padding: var(--s-6) 0; margin-bottom: var(--s-8);
}
.wp-abstract p { margin: 0; font-size: 1.12rem; line-height: 1.72; color: var(--ink-70); }
.wp-abstract strong { color: var(--ink); }
.wp-abstract .k {
  font: 600 10px/1 var(--font-mono); letter-spacing: .22em; text-transform: uppercase;
  color: var(--accent-ink); display: block; margin-bottom: var(--s-4);
}

.wp-section { scroll-margin-top: calc(var(--header-h) + 32px); padding-top: var(--s-8); }
.wp-section > .num {
  font: 600 10px/1 var(--font-mono); letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink-50); display: block; margin-bottom: var(--s-3);
}
/* Headings carry full ink. Without this they inherit --ink-70 from .wp-prose —
   the same value as body text — and read as faded rather than as headings. */
.wp-section > h2 {
  color: var(--ink);
  font-size: clamp(1.8rem, 4vw, 2.4rem); line-height: 1.12; letter-spacing: -.02em;
  margin: 0 0 var(--s-5);
}
.wp-section h3 {
  color: var(--ink);
  font-size: 1.2rem; line-height: 1.3; letter-spacing: -.01em;
  margin: var(--s-7) 0 var(--s-4);
}
.wp-section h3 .n { color: var(--ink-30); font-family: var(--font-mono); font-size: .8em; margin-right: 8px; }

.wp-prose { color: var(--ink-70); font-size: 1.05rem; line-height: 1.78; }
.wp-prose p { margin: 0 0 var(--s-5); }
.wp-prose strong { color: var(--ink); font-weight: 700; }
.wp-prose em { color: var(--ink-70); }
.wp-prose a { color: var(--accent-ink); text-underline-offset: 3px; }
.wp-prose ul { margin: 0 0 var(--s-5); padding-left: 0; list-style: none; }
.wp-prose ul li { position: relative; padding-left: 22px; margin-bottom: var(--s-3); }
.wp-prose ul li::before {
  content: ''; position: absolute; left: 4px; top: .72em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent-ink); opacity: .7;
}
.wp-prose code {
  font: 500 .88em/1.4 var(--font-mono);
  background: rgba(var(--halo-cyan-rgb), .1); color: var(--accent-ink);
  padding: 2px 6px; border-radius: 6px;
}

.wp-pull {
  position: relative;
  margin: var(--s-6) 0; padding: var(--s-2) 0 var(--s-2) var(--s-5);
  border-left: 2px solid rgba(var(--accent-blue-rgb), .7);
  font-size: 1.1rem; line-height: 1.62; color: var(--ink-70); font-style: italic;
}

/* ---- Tables ------------------------------------------------------------- */
.wp-tablewrap {
  margin: var(--s-6) 0; overflow-x: auto;
  border: 1px solid var(--glass-bd); border-radius: var(--r-card);
  background: rgba(255, 255, 255, .012);
  -webkit-overflow-scrolling: touch;
}
.wp-tablewrap table { border-collapse: collapse; width: 100%; min-width: 460px; font-size: 14px; line-height: 1.55; }
.wp-tablewrap caption {
  caption-side: top; text-align: left; padding: var(--s-4) var(--s-5) 0;
  font: 600 10px/1.4 var(--font-mono); letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-50);
}
.wp-tablewrap th {
  font: 600 10px/1.4 var(--font-mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-50); text-align: left; padding: 13px var(--s-5);
  border-bottom: 1px solid var(--glass-bd-strong); white-space: nowrap;
}
.wp-tablewrap td {
  padding: 13px var(--s-5); border-bottom: 1px solid var(--glass-bd);
  vertical-align: top; color: var(--ink-70);
}
.wp-tablewrap tr:last-child td { border-bottom: 0; }
.wp-tablewrap td:first-child { color: var(--ink); font-weight: 600; }
.wp-tablewrap td.num, .wp-tablewrap th.num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--font-mono); }
.wp-tablewrap td.arrow { color: var(--ink-30); text-align: center; width: 1%; padding-inline: var(--s-2); }
.wp-tablewrap tbody tr:hover td { background: rgba(255, 255, 255, .022); }
/* Allocation variant — five columns need more room than the article column
   gives them; below this width the notes column shreds into two-word lines. */
.wp-tablewrap.alloc table { min-width: 700px; }
.wp-tablewrap.alloc th, .wp-tablewrap.alloc td { padding-inline: var(--s-4); }

/* Compact variant — the year × emission-cap grid. */
.wp-tablewrap.compact table { min-width: 560px; }
.wp-tablewrap.compact th, .wp-tablewrap.compact td { padding: 11px var(--s-4); text-align: right; }
.wp-tablewrap.compact th:first-child, .wp-tablewrap.compact td:first-child { text-align: left; }

/* ---- Figures & charts --------------------------------------------------- */
.wp-figure { margin: var(--s-7) 0; }
.wp-plate {
  background: var(--glass-fill);
  -webkit-backdrop-filter: var(--glass-blur-light); backdrop-filter: var(--glass-blur-light);
  border: 1px solid var(--glass-bd); border-radius: var(--r-card);
  box-shadow: var(--glass-edge);
  padding: clamp(16px, 3vw, 28px);
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.wp-plate > svg { display: block; width: 100%; height: auto; }
/* Figures stop shrinking before their labels become unreadable; the plate
   scrolls instead. 700px is the widest floor that still fits the article
   column's content box at full desktop width — go higher and every figure
   scrolls on desktop too, clipping the labels at the right edge. */
.wp-plate.scroll > svg { min-width: 700px; }
/* …and say so, rather than leaving the cut-off edge to be discovered. */
@media (max-width: 880px) {
  .wp-figure:has(.wp-plate.scroll) figcaption::before {
    content: 'Scroll the figure sideways to read it. ';
    color: var(--ink-30);
  }
}
.wp-figure figcaption {
  margin-top: var(--s-4);
  font-size: 13.5px; line-height: 1.6; color: var(--ink-50);
}
.wp-figure figcaption b { color: var(--accent-ink); font-weight: 700; font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; }

/* Shared SVG chrome for the hand-authored diagrams and charts. */
.wp-svg text { font-family: var(--font-sans); fill: var(--ink-70); }
.wp-svg .t-node { font-size: 13px; font-weight: 700; fill: rgba(255, 255, 255, .95); }
.wp-svg .t-sub { font-size: 11px; fill: var(--ink-50); }
.wp-svg .t-edge { font-family: var(--font-mono); font-size: 10.5px; fill: var(--ink-50); letter-spacing: .02em; }
.wp-svg .t-axis { font-family: var(--font-mono); font-size: 10.5px; fill: var(--ink-30); }
.wp-svg .t-val { font-family: var(--font-mono); font-size: 11.5px; fill: var(--ink-70); font-variant-numeric: tabular-nums; }
.wp-svg .box { fill: rgba(255, 255, 255, .045); stroke: var(--glass-bd); stroke-width: 1; }
.wp-svg .box-accent { fill: rgba(28, 100, 242, .16); stroke: rgba(28, 100, 242, .55); stroke-width: 1; }
.wp-svg .box-cyan { fill: rgba(0, 180, 230, .13); stroke: rgba(0, 180, 230, .5); stroke-width: 1; }
.wp-svg .box-amber { fill: rgba(255, 200, 0, .11); stroke: rgba(255, 200, 0, .45); stroke-width: 1; }
.wp-svg .edge { fill: none; stroke: var(--glass-bd-strong); stroke-width: 1.25; }
.wp-svg .edge-accent { fill: none; stroke: rgba(28, 100, 242, .8); stroke-width: 1.6; }
.wp-svg .edge-dash { fill: none; stroke: var(--glass-bd-strong); stroke-width: 1.25; stroke-dasharray: 4 4; }
.wp-svg .grid { stroke: rgba(255, 255, 255, .07); stroke-width: 1; }
.wp-svg .axis { stroke: var(--glass-bd-strong); stroke-width: 1; }

/* Floating labels sit over connector lines, lifelines and gridlines. A knockout
   halo in the plate's own colour stops the line running through the glyphs —
   far more robust than routing every edge around every label by hand. Node text
   inside a box (.t-node/.t-sub) is excluded: it has the box fill behind it. */
.wp-svg .t-edge,
.wp-svg .t-val,
.wp-svg .t-axis,
.wp-svg .halo {
  paint-order: stroke fill;
  stroke: rgba(12, 12, 15, .92);
  stroke-width: 3.5px;
  stroke-linejoin: round;
  stroke-linecap: round;
}

/* Chart legend */
.wp-legend {
  display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: var(--s-4);
  font: 500 12px/1.4 var(--font-mono); color: var(--ink-50);
}
.wp-legend span { display: inline-flex; align-items: center; gap: 8px; }
.wp-legend i { width: 10px; height: 10px; border-radius: 3px; flex: none; }

/* ---- Enlarge a figure --------------------------------------------------- */
/* Only offered once JS is up: the modal works by MOVING the plate into the
   dialog and putting it back on close, which keeps the circulating chart's
   element ids unique and its hover readout working at the larger size. */
html.js .wp-figure .wp-plate { cursor: zoom-in; }

.wp-zoom-btn {
  position: absolute; top: 10px; right: 10px; z-index: 4;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: var(--r-chip);
  border: 1px solid var(--glass-bd); background: rgba(14, 14, 18, .82);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font: 500 11px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-50); cursor: zoom-in; opacity: 0;
  transition: opacity var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.wp-plate:hover .wp-zoom-btn,
.wp-zoom-btn:focus-visible { opacity: 1; }
.wp-zoom-btn:hover { color: var(--ink); border-color: var(--glass-bd-strong); }
@media (hover: none) { .wp-zoom-btn { opacity: 1; } }

.wp-modal { position: fixed; inset: 0; z-index: 200; display: flex; }
.wp-modal[hidden] { display: none; }
.wp-modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, .82);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.wp-modal__inner {
  position: relative; margin: auto;
  width: min(1500px, 96vw); max-height: 94vh;
  display: flex; flex-direction: column; gap: var(--s-4);
  padding: clamp(16px, 2.4vw, 30px);
  overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.wp-modal__slot { display: block; }
.wp-modal__slot .wp-plate { cursor: default; }
/* Redundant once the figure is already enlarged. */
.wp-modal__slot .wp-zoom-btn { display: none; }
/* Only drop the scroll floor where the dialog is actually wider than it. Below
   this the floor is what makes the figure legible, so keep it and let the plate
   scroll inside the dialog instead. */
@media (min-width: 900px) {
  .wp-modal__slot .wp-plate { overflow: visible; }
  .wp-modal__slot .wp-plate.scroll > svg { min-width: 0; }
}
.wp-modal__cap {
  margin: 0; max-width: 90ch;
  font-size: 13.5px; line-height: 1.6; color: var(--ink-50);
}
.wp-modal__close {
  align-self: flex-end;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: var(--r-chip);
  border: 1px solid var(--glass-bd); background: var(--glass-fill);
  font: 500 12px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-70); cursor: pointer;
}
.wp-modal__close:hover { color: var(--ink); border-color: rgba(var(--accent-blue-rgb), .55); }

@media (prefers-reduced-motion: no-preference) {
  .wp-modal { opacity: 0; transition: opacity var(--t-fast) var(--ease); }
  .wp-modal.on { opacity: 1; }
}

/* Hover readout for the release chart */
.wp-plate { position: relative; }
.wp-tip {
  position: absolute; z-index: 5; pointer-events: none;
  min-width: 190px; max-width: 260px;
  background: rgba(10, 10, 12, .94);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid var(--glass-bd-strong); border-radius: 12px;
  padding: 10px 12px;
  font: 12px/1.6 var(--font-mono); color: var(--ink-70);
  box-shadow: 0 14px 34px -14px rgba(0, 0, 0, .9);
  opacity: 0; transform: translateY(4px);
  transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.wp-tip.on { opacity: 1; transform: translateY(0); }
.wp-tip b { color: var(--ink); font-weight: 700; }
.wp-tip .row { display: flex; justify-content: space-between; gap: 12px; }
.wp-tip .row i { width: 8px; height: 8px; border-radius: 2px; flex: none; margin-right: 6px; display: inline-block; }
.wp-tip .ev { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--glass-bd); color: var(--accent-ink); font-size: 11px; line-height: 1.45; white-space: normal; }

/* ---- Downloads / footer of the doc -------------------------------------- */
.wp-links { display: flex; flex-wrap: wrap; gap: var(--s-3); margin: var(--s-6) 0; }
.wp-links a {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: var(--r-chip);
  border: 1px solid var(--glass-bd); background: var(--glass-fill);
  font: 500 13px/1 var(--font-mono); color: var(--ink-70); text-decoration: none;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.wp-links a:hover { color: var(--ink); border-color: rgba(var(--accent-blue-rgb), .55); }

.wp-disclaimer {
  margin-top: var(--s-8); padding-top: var(--s-6);
  border-top: 1px solid var(--glass-bd);
  font-size: 13px; line-height: 1.7; color: var(--ink-50);
}
.wp-disclaimer strong { color: var(--ink-70); }

/* ---- Motion ------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .wp-tip { transition: none; }
  .wp-progress i { transition: none; }
  html { scroll-behavior: auto; }
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}