@import url("brand/design-tokens.css");
@font-face { font-family: "Big Shoulders Display"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/big-shoulders-display-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); }

/* Night indigo is the default. Paper is opt-in. Token values are the approved --fw-* pairs. */
:root, [data-theme="dark"] {
  color-scheme: dark;
  --fw-ink: #F8F5EC;
  --fw-paper: #111427;
  --fw-surface: #222640;
  --fw-muted: #C2C3D2;
  --fw-border: #777B95;
  --fw-accent: #FFB5A0;
  --fw-accent-soft: #5B3037;
  --fw-meter: #F2C94C;
  --fw-fine: #F4BC89;
  --fw-council: #A9D6FF;
  --fw-future-one: #B9C9F5;
  --fw-future-two: #D6BCEB;
  --fw-positive: #9BE4C5;
  --fw-warning: #F2C94C;
  --fw-critical: #FF9DA6;
  --bg: var(--fw-paper);
  --ink: var(--fw-ink);
  --muted: var(--fw-muted);
  --paper: var(--fw-surface);
  --line: var(--fw-border);
  --focus: var(--fw-ink);
  font-family: var(--fw-font-text);
  background: var(--fw-paper);
  color: var(--fw-ink);
}
[data-theme="light"] {
  color-scheme: light;
  --fw-ink: #191B36;
  --fw-paper: #FAF7F0;
  --fw-surface: #FFFFFF;
  --fw-muted: #4D5066;
  --fw-border: #B9B7C2;
  --fw-accent: #AA3F36;
  --fw-accent-soft: #F7D8CF;
  --fw-meter: #F2C94C;
  --fw-fine: #96521D;
  --fw-council: #235F93;
  --fw-future-one: #536E9E;
  --fw-future-two: #71608D;
  --fw-positive: #176B50;
  --fw-warning: #835700;
  --fw-critical: #A12F3B;
  --bg: var(--fw-paper);
  --ink: var(--fw-ink);
  --muted: var(--fw-muted);
  --paper: var(--fw-surface);
  --line: var(--fw-border);
  --focus: var(--fw-ink);
}
* { box-sizing: border-box; }
body { margin: 0; line-height: 1.45; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.skip { position: absolute; left: 8px; top: -40px; background: var(--paper); padding: 8px; }
.skip:focus { top: 8px; }
.wrap { width: min(1080px, calc(100% - 32px)); margin: 0 auto; }
.top { position: sticky; top: 0; background: color-mix(in srgb, var(--bg) 92%, transparent); border-bottom: 1px solid var(--line); }
.top .wrap { display: flex; gap: 16px; align-items: center; min-height: 64px; }
.brand { display: flex; align-items: center; text-decoration: none; }
.lockup { height: 36px; width: auto; display: block; }
.lockup-on-light { display: none; }
[data-theme="light"] .lockup-on-dark { display: none; }
[data-theme="light"] .lockup-on-light { display: block; }
.icon { display: inline-block; width: 24px; height: 24px; vertical-align: -6px; margin-right: 8px; background: var(--fw-ink); mask: var(--icon) center / contain no-repeat; -webkit-mask: var(--icon) center / contain no-repeat; }
.nav { display: flex; flex-wrap: wrap; gap: 10px 14px; margin-left: auto; font-size: 0.92rem; align-items: center; }
.nav a, .nav button { text-decoration: none; background: transparent; border: 0; padding: 0; border-radius: 0; font: inherit; color: inherit; }
.top-row { display: flex; gap: 12px; align-items: center; }
.ring { width: 36px; height: 36px; flex: none; }
.ring-track { fill: none; stroke: var(--line); stroke-width: 3; }
.ring-value { fill: none; stroke: var(--fw-accent); stroke-width: 3; }
h1, h2, h3 { font-family: var(--fw-font-display); font-weight: 700; letter-spacing: 0.02em; line-height: 0.95; margin: 0; }
h1 { font-size: clamp(2.4rem, 6.4vw, 4.4rem); max-width: 18ch; }
h2 { font-size: clamp(2rem, 5vw, 3rem); }
.lead { font-size: 1.15rem; max-width: 62ch; }
.muted, .src { color: var(--muted); }
.src { font-family: "IBM Plex Mono", monospace; font-size: 0.78rem; }
.realm, .page { padding: 32px 0 64px; }
.choices, .row, .ctas { display: flex; flex-wrap: wrap; gap: 10px; }
button, .btn {
  font: 600 1rem/1.2 "IBM Plex Sans", sans-serif;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 10px 16px;
  cursor: pointer;
  text-decoration: none;
}
button.primary, .btn.primary { background: var(--fw-ink); color: var(--fw-paper); border-color: transparent; box-shadow: inset 0 -3px 0 var(--fw-accent); }
.tri { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 22px; }
.card, .stat, .rank { background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 16px; }
.card h3 { font-size: 1.5rem; margin-bottom: 8px; }
.status { display: inline-block; font-family: "IBM Plex Mono", monospace; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; border-radius: 999px; padding: 3px 8px; margin-bottom: 8px; }
.status.live { background: color-mix(in srgb, var(--fw-positive) 22%, var(--fw-surface)); color: var(--fw-ink); }
.status.building { background: var(--fw-accent-soft); color: var(--fw-ink); }
.status.public { background: color-mix(in srgb, var(--fw-council) 22%, var(--fw-surface)); color: var(--fw-ink); }
.status.planned { background: color-mix(in srgb, var(--fw-muted) 18%, var(--fw-surface)); color: var(--fw-ink); }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 18px 0; }
.stat b { display: block; font-family: var(--fw-font-display); font-size: 2.4rem; line-height: 1; }
.split { margin: 18px 0; }
.bar { display: flex; height: 28px; border-radius: 999px; overflow: hidden; background: var(--line); }
.bar span { display: block; height: 100%; }
.bar .state { background: var(--fw-critical); }
.bar .rest { background: var(--fw-accent-soft); }
label { display: block; margin: 12px 0 6px; }
input[type="email"], input[type="range"] { width: min(420px, 100%); }
input[type="email"] { font: inherit; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); }
.hp {
  position: absolute;
  left: -10000px;
  top: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
canvas { width: 100%; height: auto; background: var(--paper); border-radius: 16px; border: 1px solid var(--line); }
.legend { display: flex; gap: 14px; font-size: 0.85rem; color: var(--muted); }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 99px; margin-right: 6px; }
.rank { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; margin: 8px 0; }
.path { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; list-style: none; }
.path li { border: 1px solid var(--line); border-radius: 999px; padding: 6px 10px; background: var(--paper); }
.foot { border-top: 1px solid var(--line); padding: 24px 0 48px; color: var(--muted); font-size: 0.9rem; }
.steps { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; }
.steps button[aria-current="true"] { background: var(--fw-ink); color: var(--fw-paper); }
.scene { min-height: calc(100dvh - 72px); padding: 20px 0 32px; }
.scene-grid { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(280px, 1.2fr); gap: 18px; align-items: start; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.tree { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.tree-cell { flex-basis: 140px; min-height: 72px; text-align: left; border-radius: 12px; }
select, textarea, input[type="text"], input:not([type="range"]):not([type="email"]) {
  font: inherit;
  width: min(420px, 100%);
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
}
textarea { width: 100%; }
@media (max-width: 800px) {
  .tri, .stats, .scene-grid { grid-template-columns: 1fr; }
  .nav a[href="results.html"] { display: none; }
  h1 { font-size: clamp(2.4rem, 12vw, 3.4rem); }
  #map { height: 42vh; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
.realm[hidden] { display: none; }
.realm.active { display: block; animation: rise 180ms ease; }
.scene { min-height: calc(100dvh - 96px); }
button.ring {
  position: relative;
  width: 42px;
  height: 42px;
  margin-left: auto;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
}
.top .nav { margin-left: 12px; }
.ring svg { width: 42px; height: 42px; transform: rotate(-90deg); }
.ring-track, .ring-value { fill: none; stroke-width: 3; }
.ring-track { stroke: var(--line); }
.ring-value { stroke: var(--fw-accent); stroke-linecap: round; }
#ring-label {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  clip-path: none;
  display: grid;
  place-items: center;
  font-size: 0.72rem;
}
.treemap { display: flex; flex-wrap: wrap; gap: 6px; min-height: 180px; }
.treemap div { flex-basis: 30%; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 8px; font-size: 0.85rem; }
.letter { white-space: pre-wrap; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 12px; }
table { width: 100%; border-collapse: collapse; margin-top: 12px; }
td { border-top: 1px solid var(--line); padding: 6px 0; }
caption { text-align: left; font-size: 0.85rem; color: var(--muted); }
.card.flip { text-align: left; width: 100%; border-radius: 16px; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .realm.active { animation: none; }
}
.foot .lockup { height: 32px; margin-bottom: 12px; }
button.theme { border: 1px solid var(--fw-border); border-radius: 999px; padding: 6px 12px; }