/* Sovereign Explorer — a precision instrument for a sovereign reserve asset.
   Terminal density with engraved-certificate typography: Fraunces (display
   serif) for the wordmark and section heads, IBM Plex Mono for every figure
   (monospaced ⇒ tabular by construction — live cells never jitter), and a
   restrained bullion-gold accent reserved for chrome. Semantic colors
   (ok/warn/danger, pool v1-blue / PQ-green) are meaning, not decoration,
   and are never repainted. */

/* Self-hosted, latin-subset, ~55 KB total. No external requests (CSP: self). */
@font-face {
  font-family: "Fraunces";
  src: url("/fonts/fraunces-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/fonts/plex-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/fonts/plex-mono-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #05060a;
  --bg-2: #090b12;
  --panel: #0d1018;
  --panel-2: #10141f;
  --panel-3: #121827;
  --line: #1c2130;
  --line-soft: #151a26;
  --text: #f3f5fb;
  --muted: #8b90a0;
  --dim: #737b8b;
  --blue: #3f6fff;
  --blue-soft: #12245b;
  --ok: #52d68d;
  --warn: #e5a74f;
  --danger: #dd6b78;
  /* features.css aliases (were referenced but previously undefined) */
  --green: var(--ok);
  --yellow: var(--warn);
  /* Signature accent: bullion gold. Chrome only (seal, wordmark, eyebrows,
     hairlines, selection) — never on status pills or data, so it can never be
     confused with the amber `--warn` semantic. */
  --gold: #d2b273;
  --gold-bright: #e8cf9a;
  --gold-soft: rgba(210, 178, 115, 0.55);
  --gold-faint: rgba(210, 178, 115, 0.16);
  --radius: 10px;
  --serif: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  /* Elevation recipe shared by every raised surface: hairline top-light over
     a soft drop — depth you feel, not see. */
  --surface: linear-gradient(180deg, rgba(255, 255, 255, 0.016), rgba(255, 255, 255, 0) 46%), var(--panel);
  --elev:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 1px 2px rgba(0, 0, 0, 0.45),
    0 12px 32px -18px rgba(0, 0, 0, 0.6);
}

::selection {
  background: rgba(210, 178, 115, 0.28);
  color: var(--text);
}

* {
  box-sizing: border-box;
}

.skip-link {
  position: fixed;
  left: 14px;
  top: 10px;
  z-index: 100;
  transform: translateY(-160%);
  border-radius: 7px;
  background: var(--text);
  color: var(--bg);
  font-weight: 800;
  padding: 8px 12px;
}

.skip-link:focus {
  transform: translateY(0);
}

:where(a, button, input, summary):focus-visible {
  outline: 2px solid #87a4ff;
  outline-offset: 3px;
}

/* Route changes move screen-reader focus to the page title. Avoid the browser's
   oversized default outline on a full-width heading; interactive controls keep
   the high-contrast focus treatment above. */
h1[tabindex="-1"]:focus {
  outline: none;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  min-height: 100vh;
  /* Atmosphere: a faint instrument-lamp glow at the top of the field, a whisper
     of gold at the horizon, then the deep ground. */
  background:
    radial-gradient(1200px 540px at 50% -160px, rgba(63, 111, 255, 0.075), transparent 70%),
    radial-gradient(900px 420px at 88% -80px, rgba(210, 178, 115, 0.04), transparent 62%),
    linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 560px);
  color: var(--text);
  font-family: var(--sans);
  font-size: 15px;
  /* Every numeral on the page is tabular — live-updating figures never jitter,
     whether set in the mono face (fixed-pitch by construction) or the sans. */
  font-variant-numeric: tabular-nums;
  line-height: 1.5;
}

/* Texture layer: fine engineering grid + photographic grain, fixed to the
   viewport. Sits behind all content (first-painted child of body), so it can
   never cost legibility. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' fill='%23ffffff' opacity='0.045'/%3E%3C/svg%3E"),
    linear-gradient(rgba(135, 164, 255, 0.023) 1px, transparent 1px),
    linear-gradient(90deg, rgba(135, 164, 255, 0.023) 1px, transparent 1px);
  background-size: 160px 160px, 56px 56px, 56px 56px;
}

/* Quiet, instrument-grade scrollbars (WebKit/Blink; Firefox keeps its own). */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: #232a3c;
  border: 2px solid var(--bg);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
  background: #2f3850;
}

a {
  color: #87a4ff;
  text-decoration: none;
}

a:hover {
  color: var(--text);
}

.masthead {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: auto minmax(220px, 1fr) auto auto;
  align-items: center;
  gap: 22px;
  padding: 14px 28px;
  background: linear-gradient(180deg, rgba(10, 12, 19, 0.97), rgba(7, 9, 14, 0.94));
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.025) inset;
  backdrop-filter: blur(16px);
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: max-content;
  color: var(--text);
}

.brand:hover {
  color: var(--text);
}

.seal {
  flex: none;
}

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}

.brand-text b {
  color: var(--text);
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.brand-text small {
  margin-top: 3px;
  color: var(--gold-soft);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 2.4px;
  text-transform: uppercase;
}

.search {
  display: flex;
  min-width: 0;
  width: 100%;
}

.search input {
  min-width: 0;
  flex: 1;
  height: 40px;
  background: rgba(5, 7, 11, 0.85);
  border: 1px solid var(--line);
  border-right: none;
  border-radius: 8px 0 0 8px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4);
  color: var(--text);
  font-family: var(--mono);
  font-size: 13px;
  padding: 0 14px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.search input:focus {
  outline: none;
  border-color: #2f5de4;
  box-shadow:
    inset 0 1px 3px rgba(0, 0, 0, 0.4),
    inset 0 0 0 1px rgba(63, 111, 255, 0.18),
    0 0 0 3px rgba(63, 111, 255, 0.12);
}

.search input::placeholder {
  color: var(--dim);
}

.search button {
  height: 40px;
  border: 1px solid #2f5de4;
  border-radius: 0 8px 8px 0;
  background: linear-gradient(180deg, #4d79ff, #3260ea);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
  color: #fff;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
  padding: 0 18px;
  transition: filter 0.15s ease;
}

.search button:hover {
  filter: brightness(1.12);
}

.nav {
  display: flex;
  justify-content: flex-end;
  gap: 2px;
  min-width: 0;
}

.nav a {
  border-radius: 8px;
  color: var(--dim);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 8px 10px;
  white-space: nowrap;
  transition: color 0.12s ease, background 0.12s ease;
}

.nav a:hover {
  background: var(--panel-2);
  color: var(--text);
}

.nav a.active {
  background: var(--blue-soft);
  box-shadow: inset 0 1px 0 rgba(135, 164, 255, 0.14);
  color: #aebfff;
}

/* The faucet — an external call-to-action, so it reads as a button, not a tab. */
.nav a.nav-faucet {
  color: #ffd977;
  border: 1px solid rgba(255, 217, 119, 0.35);
}

.nav a.nav-faucet:hover {
  background: rgba(255, 217, 119, 0.1);
  color: #ffe9b3;
}

/* Network switch (testnet / mainnet) */
.netsw {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--panel);
}
.netsw button {
  appearance: none;
  border: 0;
  cursor: pointer;
  border-radius: 6px;
  padding: 6px 12px;
  font: 700 12px var(--sans);
  letter-spacing: 0.02em;
  color: var(--muted);
  background: transparent;
  transition: background 0.12s, color 0.12s;
}
.netsw button:hover {
  color: var(--text);
}
.netsw button.is-active {
  background: var(--blue);
  color: #fff;
}
.netsw button.is-soon:not(.is-active) {
  color: var(--dim);
}
.netsw button.is-soon::after {
  content: "•";
  margin-left: 5px;
  color: var(--warn);
}
.empty.notlive {
  color: var(--muted);
}
.empty.notlive b {
  color: var(--text);
}

/* Blocks-page pager */
.pager {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0;
  flex-wrap: wrap;
}
.pager-btn {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 7px 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  background: var(--panel);
  white-space: nowrap;
}
.pager-btn {
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.pager-btn:hover {
  background: var(--panel-2);
  border-color: var(--blue);
  color: #aebfff;
}
.pager-btn.is-disabled {
  color: var(--dim);
  border-color: var(--line-soft);
  cursor: default;
  opacity: 0.55;
}
.pager-info {
  margin: 0 auto;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
}
/* Date & time column — deliberately NOT dimmed, so it's clearly visible */
td.time {
  color: var(--ink, var(--text));
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* A row that just arrived over the live feed — flash, then settle. */
@keyframes live-in {
  0% { background: color-mix(in srgb, var(--blue, #4a6bff) 34%, transparent); }
  100% { background: transparent; }
}
tr.live-new > td {
  animation: live-in 1.6s ease-out;
}
tr.live-new > td:first-child {
  box-shadow: inset 3px 0 0 var(--blue, #4a6bff);
}

.conn {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
  min-width: max-content;
}

.conn .dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--dim);
}

.conn.live .dot {
  background: var(--ok);
  box-shadow: 0 0 10px rgba(82, 214, 141, 0.65);
}

.conn.down .dot {
  background: var(--danger);
}

.conn.syncing .dot,
.conn.connecting .dot {
  background: var(--blue);
}

.conn.degraded .dot {
  background: var(--warn);
  box-shadow: 0 0 9px rgba(229, 167, 79, 0.5);
}

.conn.halted .dot {
  background: var(--danger);
  box-shadow: 0 0 9px rgba(221, 107, 120, 0.5);
}

.syncbar {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(180px, 420px);
  align-items: center;
  gap: 20px;
  border-bottom: 1px solid rgba(63, 111, 255, 0.35);
  background: #0b1430;
  color: #dce5ff;
  padding: 9px 28px;
  font-size: 12px;
}

.syncbar[hidden] {
  display: none !important;
}

.syncbar > div:first-child {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
}

.syncbar span {
  color: #aebfff;
  font-family: var(--mono);
}

.syncbar.warn {
  display: block;
  border-bottom-color: rgba(229, 167, 79, 0.45);
  background: #241a0c;
  color: #ffe1a8;
}

.syncbar.danger {
  display: block;
  border-bottom-color: rgba(221, 107, 120, 0.55);
  background: #2a1017;
  color: #ffc2ca;
}

.sync-track {
  height: 6px;
  overflow: hidden;
  border: 1px solid rgba(135, 164, 255, 0.35);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.28);
}

.sync-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #3f6fff, #71a2ff);
}

.ticker {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 9px 28px;
  background: #080a10;
  border-bottom: 1px solid var(--line-soft);
  overflow: hidden;
}

.ticker[hidden] {
  display: none;
}

.ticker-label {
  flex: none;
  border: 1px solid rgba(82, 214, 141, 0.38);
  border-radius: 8px;
  color: var(--ok);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.5px;
  padding: 2px 7px;
}

/* Viewport clips the rolling track; the soft edge mask lets chips emerge and
   vanish rather than pop at the boundaries. */
.ticker-viewport {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent,
    #000 34px,
    #000 calc(100% - 34px),
    transparent
  );
  mask-image: linear-gradient(90deg, transparent, #000 34px, #000 calc(100% - 34px), transparent);
}

/* The moving element: only its transform is animated (from JS via rAF), so the
   roll is GPU-composited and never triggers a per-frame reflow. */
.ticker-track {
  display: flex;
  gap: 8px;
  width: max-content;
  white-space: nowrap;
  will-change: transform;
}

.ticker-chip {
  flex: none;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  cursor: pointer;
  font-family: var(--mono);
  font-size: 12px;
  padding: 3px 9px;
  text-decoration: none;
  transition:
    border-color 0.15s ease,
    color 0.15s ease;
}

.ticker-chip:hover,
.ticker-chip:focus-visible {
  border-color: rgba(82, 214, 141, 0.55);
  color: var(--text);
  outline: none;
}

.ticker-chip b {
  color: var(--text);
}

/* Reduced-motion fallback: no continuous roll — new blocks step in and the
   strip animates them the old way. */
.ticker.reduced .ticker-track {
  transform: none !important;
}

.ticker.reduced .ticker-chip {
  animation: chipIn 0.3s ease;
}

@media (prefers-reduced-motion: reduce) {
  .ticker-track {
    transform: none !important;
  }
}

@keyframes chipIn {
  from {
    opacity: 0;
    transform: translateX(-8px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

main {
  width: min(100%, 1880px);
  margin: 0 auto;
  padding: 42px 52px 72px;
}

.loading,
.empty {
  color: var(--dim);
  padding: 32px;
  text-align: center;
}

h1,
h2,
h3 {
  color: var(--text);
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: 0.002em;
}

h1 {
  font-size: 34px;
  line-height: 1.12;
  margin: 0 0 20px;
}

h2 {
  font-size: 21px;
  line-height: 1.2;
  margin: 30px 0 14px;
}

/* Section heads carry a short gold tick — the one ornamental mark in the
   system, so the eye can find section boundaries at a glance. */
main h2::before {
  content: "";
  display: inline-block;
  width: 17px;
  height: 2px;
  margin-right: 10px;
  vertical-align: 6px;
  background: linear-gradient(90deg, var(--gold), rgba(210, 178, 115, 0.15));
}

/* …but never inside data panels or item cards, where a tick would read as data. */
.panel h2::before,
.watch-card h2::before,
.proof-heading h2::before,
.commitment-compare h2::before,
.sns-card h2::before {
  content: none;
}

h3 {
  font-size: 16.5px;
  margin: 22px 0 10px;
}

.crumb {
  color: var(--dim);
  font-size: 13px;
  margin-bottom: 8px;
}

.crumb a {
  color: var(--muted);
}

.hero-strip {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin: 6px 0 30px;
  padding: 0 2px 22px;
  /* An engraved rule closes the masthead of the page: gold at the left edge
     dissolving into the structural hairline. */
  border-bottom: 1px solid var(--line-soft);
}

.hero-strip::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 220px;
  height: 1px;
  background: linear-gradient(90deg, var(--gold), transparent);
}

.hero-strip h1 {
  font-family: var(--serif);
  font-size: clamp(40px, 4.6vw, 78px);
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 0.95;
  margin: 0;
}

.hero-strip p {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 13.5px;
  margin: 12px 0 0;
}

.hero-strip p span {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.hero-meta span,
.hero-meta a.genesis-chip {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 12px;
  padding: 6px 9px;
}

/* A live-update slot: an addressable wrapper whose chips are patched in place on
   every status tick. display:contents keeps it out of the flex layout entirely,
   so the chips lay out exactly as if the wrapper were not there. */
.hero-meta span.live-slot {
  display: contents;
}

/* The genesis pill navigates to block #0 like any other block link. */
.hero-meta a.genesis-chip {
  cursor: pointer;
  text-decoration: none;
  transition:
    border-color 0.15s ease,
    color 0.15s ease;
}

.hero-meta a.genesis-chip:hover,
.hero-meta a.genesis-chip:focus-visible {
  border-color: rgba(82, 214, 141, 0.55);
  color: var(--text);
  outline: none;
}

.hero-meta .relay-pill {
  border-color: rgba(82, 214, 141, 0.32);
  color: var(--ok);
}

.hero-meta .relay-pill.degraded {
  border-color: rgba(229, 167, 79, 0.4);
  color: var(--warn);
}

.hero-meta .relay-pill.reduced {
  border-color: rgba(63, 111, 255, 0.45);
  color: #8faaff;
}

.hero-meta .miners-pill {
  border-color: rgba(110, 168, 254, 0.38);
  color: var(--accent, #6ea8fe);
}

.hero-meta .miners-pill.idle {
  border-color: rgba(148, 163, 184, 0.32);
  color: var(--muted, #94a3b8);
}

/* PQ-TX (shielded-v2) activation marker chips — same pill shell as the strip's
   other chips, colour-coded by milestone status. */
.hero-meta .pq-pill {
  border-color: rgba(148, 163, 184, 0.3);
  color: var(--muted, #94a3b8);
}
.hero-meta .pq-pill b {
  color: inherit;
  font-weight: 600;
}
.hero-meta .pq-pill.lead {
  border-color: rgba(178, 148, 254, 0.42);
  color: #b294fe;
  letter-spacing: 0.04em;
}
.hero-meta .pq-pill.lead.failed {
  border-color: rgba(229, 167, 79, 0.42);
  color: var(--warn, #e5a74f);
}
.hero-meta .pq-pill.done {
  border-color: rgba(82, 214, 141, 0.32);
  color: var(--ok, #52d68d);
}
.hero-meta .pq-pill.next {
  border-color: rgba(178, 148, 254, 0.5);
  color: #c7b3ff;
}
.hero-meta .pq-pill.pending {
  border-color: rgba(148, 163, 184, 0.26);
  color: var(--muted, #94a3b8);
}
.hero-meta .pq-pill.live {
  border-color: rgba(178, 148, 254, 0.6);
  color: #c7b3ff;
  letter-spacing: 0.04em;
}

.stat-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 44px;
  align-items: start;
  margin: 0 0 36px;
}

.stat-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--elev);
  min-height: 560px;
  padding: 38px 36px 32px;
}

.stat-card h2 {
  font-size: 23px;
  margin: 0 0 26px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line-soft);
}

.stat-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px;
  gap: 18px;
  align-items: center;
  min-height: 68px;
  margin-bottom: 22px;
}

.stat-footnote {
  margin: 18px 0 0;
  border-top: 1px solid var(--line-soft);
  color: var(--muted);
  font-size: 12px;
  padding-top: 14px;
}

.stat-item:last-child {
  margin-bottom: 0;
}

.stat-label {
  color: var(--dim);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.stat-value {
  color: var(--text);
  font-family: var(--mono);
  font-size: clamp(19px, 1.45vw, 25px);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin-top: 12px;
  overflow-wrap: anywhere;
}

.stat-sub {
  color: var(--dim);
  font-size: 12px;
  margin-top: 5px;
}

.stat-arrow {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: var(--blue-soft);
  color: var(--blue);
  font-family: var(--mono);
  font-size: 24px;
  line-height: 1;
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--elev);
  padding: 18px;
  transition: border-color 0.15s ease;
}

.card:hover {
  border-color: #262d40;
}

.card .label {
  color: var(--dim);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.card .value {
  color: var(--text);
  font-family: var(--mono);
  font-size: 25px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin-top: 8px;
  overflow-wrap: anywhere;
}

.card .value .unit {
  color: var(--muted);
  font-family: var(--sans);
  font-size: 13px;
  margin-left: 6px;
}

.card .sub {
  color: var(--muted);
  font-size: 12px;
  margin-top: 6px;
}

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--elev);
  min-width: 0;
  /* `hidden` keeps content inside the rounded corners, but on a narrow viewport it
     also CLIPPED wide tables (the consensus-deployment table is ~680px of real
     columns) with no way to reach the hidden columns. Scroll them inside their own
     panel instead, so the page body still never scrolls horizontally. */
  overflow: hidden;
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

.grid2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
}

.grid2 > *,
.stat-columns > * {
  min-width: 0;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

th {
  background: linear-gradient(180deg, #0c0f17, #090c13);
  border-bottom: 1px solid var(--line);
  color: var(--dim);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.11em;
  padding: 12px 14px;
  text-align: left;
  text-transform: uppercase;
}

td {
  border-bottom: 1px solid var(--line-soft);
  color: #dce1ef;
  font-variant-numeric: tabular-nums;
  padding: 11px 14px;
  vertical-align: top;
}

tr:last-child td {
  border-bottom: none;
}

tr:hover td {
  background: rgba(63, 111, 255, 0.045);
}

.mono {
  font-family: var(--mono);
  font-size: 13px;
}

.muted {
  color: var(--muted);
}

.dim {
  color: var(--dim);
}

.right {
  text-align: right;
}

.num {
  font-variant-numeric: tabular-nums;
}

.kv td {
  padding: 12px 16px;
}

.kv td.k {
  width: 210px;
  color: var(--muted);
  font-size: 13px;
}

.kv td.v {
  font-family: var(--mono);
  font-size: 13px;
  overflow-wrap: anywhere;
}

.copy-btn {
  appearance: none;
  margin-left: 7px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel-2);
  color: var(--muted);
  cursor: pointer;
  font: 700 12px var(--mono);
  line-height: 1;
  padding: 5px 7px;
  vertical-align: middle;
}

.copy-btn:hover,
.copy-btn.copied {
  border-color: var(--blue);
  color: var(--text);
}

.badge {
  display: inline-block;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.5px;
  padding: 2px 9px;
  text-transform: uppercase;
  white-space: nowrap;
}

.badge.final {
  background: rgba(82, 214, 141, 0.12);
  border: 1px solid rgba(82, 214, 141, 0.34);
  color: var(--ok);
}

.badge.pending {
  background: rgba(229, 167, 79, 0.12);
  border: 1px solid rgba(229, 167, 79, 0.34);
  color: var(--warn);
}

.badge.ok {
  background: rgba(82, 214, 141, 0.12);
  border: 1px solid rgba(82, 214, 141, 0.34);
  color: var(--ok);
}

.badge.fail {
  background: rgba(233, 91, 91, 0.12);
  border: 1px solid rgba(233, 91, 91, 0.4);
  color: #ff8d8d;
}

/* Collapsible raw-data panels (signature / public key / action JSON) */
details.raw {
  margin: 0;
}
details.raw summary {
  cursor: pointer;
  color: var(--dim, #8b93a7);
  font-size: 12px;
  user-select: none;
}
details.raw[open] summary {
  margin-bottom: 6px;
}
details.raw pre {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 12px;
  line-height: 1.5;
}

.badge.act {
  background: rgba(63, 111, 255, 0.12);
  border: 1px solid rgba(63, 111, 255, 0.34);
  color: #9fb3ff;
  font-family: var(--mono);
  letter-spacing: 0;
  text-transform: none;
}

.bar {
  height: 8px;
  background: #090c13;
  border: 1px solid var(--line);
  border-radius: 999px;
  margin-top: 10px;
  overflow: hidden;
}

.bar > i {
  display: block;
  height: 100%;
  background: var(--blue);
}

.chart {
  display: block;
  width: 100%;
  height: 200px;
}

.chart .axis {
  stroke: var(--line);
  stroke-width: 1;
}

.chart .gridline {
  stroke: rgba(135, 164, 255, 0.11);
  stroke-width: 1;
  stroke-dasharray: 6 8;
}

.chart .series-area {
  fill: url(#issuance-fill);
}

.chart .series-mined {
  fill: none;
  stroke: var(--blue);
  stroke-width: 2.5;
  vector-effect: non-scaling-stroke;
}

.chart-meta {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  color: var(--dim);
  font: 11px var(--mono);
  margin: 8px 2px 0;
}

.chart-meta strong {
  color: #aebfff;
  font-weight: 700;
  text-align: center;
}

.legend {
  display: flex;
  gap: 18px;
  color: var(--muted);
  font-size: 12px;
  margin: 10px 2px 0;
}

.legend i {
  display: inline-block;
  width: 12px;
  height: 3px;
  margin-right: 6px;
  vertical-align: middle;
}

.note {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.assurance-note {
  border: 1px solid rgba(63, 111, 255, 0.32);
  border-left: 3px solid var(--blue);
  border-radius: 8px;
  background: rgba(18, 36, 91, 0.3);
  color: #bac5df;
  font-size: 13px;
  line-height: 1.65;
  margin: 0 0 18px;
  padding: 13px 16px;
}

.assurance-note b {
  color: var(--text);
}

.root-kind {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(135, 164, 255, 0.3);
  border-radius: 999px;
  background: rgba(63, 111, 255, 0.1);
  color: #aebfff;
  font: 700 9px var(--sans);
  letter-spacing: 0.08em;
  margin-left: 6px;
  padding: 2px 7px;
  text-transform: uppercase;
  vertical-align: middle;
}

.root-kind.changed {
  border-color: rgba(82, 214, 141, 0.32);
  background: rgba(82, 214, 141, 0.09);
  color: var(--ok);
  margin-left: 0;
}

.proof-hero {
  border-bottom: 1px solid rgba(63, 111, 255, 0.22);
  padding-bottom: 22px;
}

.proof-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 20px;
}

.proof-card {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background:
    radial-gradient(circle at 100% 0, rgba(63, 111, 255, 0.08), transparent 36%),
    var(--surface);
  box-shadow: var(--elev);
  padding: 22px;
}

.proof-card.proof-wide {
  grid-column: 1 / -1;
}

.proof-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.proof-heading h2 {
  font-size: 21px;
  margin: 4px 0 0;
}

.eyebrow {
  color: var(--gold-soft);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.proof-state {
  flex: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  font: 750 10px var(--sans);
  letter-spacing: 0.04em;
  padding: 6px 9px;
  text-transform: uppercase;
}

.proof-state.ok {
  border-color: rgba(82, 214, 141, 0.34);
  color: var(--ok);
}

.proof-state.info {
  border-color: rgba(63, 111, 255, 0.45);
  color: #8faaff;
}

.proof-state.warn {
  border-color: rgba(229, 167, 79, 0.4);
  color: #f0bd72;
}

.proof-state.bad {
  border-color: rgba(221, 107, 120, 0.45);
  color: #ff9caa;
}

.evidence-kv {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 9px 18px;
  align-items: baseline;
  font-size: 13px;
}

.evidence-kv.compact {
  grid-template-columns: 145px minmax(0, 1fr);
  margin-top: 18px;
}

.evidence-kv > span {
  color: var(--dim);
}

.evidence-kv > b {
  color: var(--text);
  font-weight: 650;
}

.break {
  overflow-wrap: anywhere;
}

.relay-evidence-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px;
  margin-top: 18px;
}

.relay-evidence {
  display: grid;
  gap: 4px;
  border: 1px solid var(--line-soft);
  border-radius: 9px;
  background: rgba(0, 0, 0, 0.16);
  padding: 12px 14px;
}

.relay-evidence > div {
  display: flex;
  align-items: center;
  gap: 8px;
}

.relay-evidence small {
  color: var(--dim);
}

.evidence-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--dim);
}

.evidence-dot.ok {
  background: var(--ok);
  box-shadow: 0 0 8px rgba(82, 214, 141, 0.5);
}

.evidence-dot.bad {
  background: var(--danger);
}

.proof-metric {
  display: grid;
  margin: 2px 0 20px;
}

.proof-metric b {
  font: 700 29px var(--mono);
}

.proof-metric span {
  color: var(--muted);
}

.proof-metric small {
  color: var(--dim);
  margin-top: 3px;
}

.crypto-label {
  color: var(--muted);
  font: 11px var(--mono);
  margin: 12px 0 6px;
}

.crypto-stack {
  display: grid;
  grid-template-columns: minmax(92px, 0.18fr) minmax(0, 1fr);
  min-height: 48px;
  overflow: hidden;
  border: 1px solid rgba(63, 111, 255, 0.28);
  border-radius: 8px;
}

.crypto-stack > span {
  display: grid;
  align-content: center;
  padding: 7px 11px;
  font: 700 11px var(--mono);
}

.crypto-stack .classic {
  border-right: 1px solid rgba(135, 164, 255, 0.24);
  background: #132250;
  color: #c4d0ff;
}

.crypto-stack .pq {
  background: linear-gradient(90deg, rgba(63, 111, 255, 0.22), rgba(115, 76, 255, 0.13));
  color: #aebfff;
}

.proof-note {
  color: var(--dim);
  font-size: 12px;
  line-height: 1.6;
  margin: 16px 0 0;
}

.commitment-compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.commitment-compare > div {
  min-width: 0;
  border: 1px solid var(--line-soft);
  border-radius: 9px;
  background: rgba(0, 0, 0, 0.16);
  padding: 16px;
}

.commitment-compare h3 {
  font-size: 15px;
  margin: 10px 0;
}

.commitment-compare code {
  display: block;
  overflow-wrap: anywhere;
  color: #aebfff;
  font-size: 11px;
}

.commitment-compare p {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
  margin-bottom: 0;
}

.commitment-compare dl {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 8px;
  margin: 12px 0 0;
}

.commitment-compare dt {
  color: var(--dim);
}

.commitment-compare dd {
  margin: 0;
}

.pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0;
}

.foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px;
  border-top: 1px solid var(--line);
  color: var(--dim);
  font-size: 12px;
  padding: 18px 28px;
}

.foot #foot-chain {
  color: var(--muted);
  font-family: var(--mono);
}

/* The 12-link nav cannot fit beside the search field below ~1440px — earlier
   it was let go until 1180px and painted over the search box in between. */
@media (max-width: 1440px) {
  .masthead {
    grid-template-columns: auto 1fr auto;
  }

  /* Keep the segmented network switch hugging its content instead of
     stretching across its grid cell, and pin the status light to the right. */
  .netsw {
    justify-self: start;
  }

  .conn {
    justify-self: end;
  }

  .nav {
    grid-column: 1 / -1;
    justify-content: flex-start;
    overflow-x: auto;
  }

  .stat-columns {
    gap: 18px;
  }

  .stat-card {
    padding: 28px 24px;
  }
}

@media (max-width: 960px) {
  main {
    padding: 28px 20px 54px;
  }

  .stat-columns,
  .grid2 {
    grid-template-columns: 1fr;
  }

  .stat-card {
    min-height: 0;
  }

  .proof-grid {
    grid-template-columns: 1fr;
  }

  .proof-card.proof-wide {
    grid-column: auto;
  }
}

@media (max-width: 720px) {
  .masthead {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    padding: 12px 14px;
  }

  .brand {
    justify-self: start;
  }

  .netsw {
    grid-column: 2;
    grid-row: 1;
  }

  .search {
    grid-column: 1 / -1;
    width: 100%;
  }

  .nav {
    grid-column: 1 / -1;
    flex-wrap: wrap;
    overflow-x: visible;
    row-gap: 4px;
  }

  .nav a {
    padding: 7px 9px;
  }

  .conn {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .syncbar {
    grid-template-columns: 1fr;
    gap: 7px;
    padding: 9px 14px;
  }

  .hero-strip {
    align-items: flex-start;
    flex-direction: column;
  }

  .hero-meta {
    justify-content: flex-start;
  }

  .stat-card {
    padding: 24px 20px;
  }

  .stat-item {
    grid-template-columns: minmax(0, 1fr) 36px;
  }

  .stat-arrow {
    width: 36px;
    height: 36px;
    font-size: 20px;
  }

  .panel {
    overflow-x: auto;
    overscroll-behavior-inline: contain;
  }

  .pager-info {
    order: -1;
    flex: 1 0 100%;
    margin: 0 0 4px;
    text-align: center;
  }

  .pager-btn {
    flex: 1 1 calc(50% - 8px);
    text-align: center;
  }

  .chart-meta {
    flex-wrap: wrap;
  }

  .chart-meta strong {
    order: -1;
    flex: 1 0 100%;
  }

  .proof-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .evidence-kv,
  .evidence-kv.compact {
    grid-template-columns: 1fr;
    gap: 3px;
  }

  .evidence-kv > b {
    margin-bottom: 8px;
  }

  .commitment-compare {
    grid-template-columns: 1fr;
  }

  table {
    min-width: 680px;
  }

  .kv {
    min-width: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ── Sovereign Name Service page ───────────────────────────────────────── */
.sns-lookup {
  display: flex;
  gap: 10px;
  margin: 0 0 20px;
}
.sns-lookup input {
  flex: 1;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 13px 16px;
  color: var(--text);
  font-family: var(--mono);
  font-size: 14px;
}
.sns-lookup input:focus {
  outline: none;
  border-color: var(--blue);
}
.sns-btn {
  background: var(--blue);
  color: #fff;
  border: 0;
  border-radius: 9px;
  padding: 0 24px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
}
.sns-btn:hover {
  filter: brightness(1.08);
}
.sns-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 14px;
}
.sns-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--elev);
  padding: 18px 20px;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.sns-card:hover {
  border-color: var(--blue);
  transform: translateY(-2px);
}
.sns-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.sns-name {
  font-family: var(--mono);
  font-size: 21px;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
}
.sns-name:hover {
  color: var(--blue);
}
.chip.sns {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--ok);
  background: rgba(82, 214, 141, 0.12);
  border: 1px solid rgba(82, 214, 141, 0.3);
  border-radius: 999px;
  padding: 3px 9px;
}
.sns-row {
  margin-top: 8px;
  font-size: 13px;
  color: var(--muted);
}
.sns-row .k {
  display: inline-block;
  width: 92px;
  color: var(--dim);
}
.empty-state {
  padding: 44px;
  text-align: center;
}
.empty-state .es-title {
  font-size: 17px;
  color: var(--text);
  margin-bottom: 6px;
}

/* ==========================================================================
   Live-strip extras + overview widgets (rolling ticker companion features)
   ========================================================================== */

/* item 6: LIVE badge heartbeat — pulses once per new block. */
@keyframes livebeat {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(82, 214, 141, 0.5);
  }
  40% {
    transform: scale(1.14);
    box-shadow: 0 0 0 6px rgba(82, 214, 141, 0);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(82, 214, 141, 0);
  }
}
.ticker-label.beat {
  animation: livebeat 0.6s ease;
}
@media (prefers-reduced-motion: reduce) {
  .ticker-label.beat {
    animation: none;
  }
}

/* item 4: block-cadence sparkline pinned at the right of the LIVE strip. */
.ticker-cadence {
  flex: none;
  display: flex;
  align-items: center;
  gap: 7px;
  padding-left: 12px;
  border-left: 1px solid var(--line-soft);
}
.ticker-cadence[hidden] {
  display: none;
}
.ticker-cadence svg rect {
  fill: var(--blue);
  opacity: 0.72;
}
.ticker-cadence .cadence-avg {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
}

/* item 1: bit-2 (post-quantum) signaling progress toward the 90% threshold. */
.signal-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--elev);
  padding: 14px 18px;
  margin: 18px 0 0;
}
.signal-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.signal-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.signal-figure {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--text);
}
.signal-bar {
  position: relative;
  height: 10px;
  border-radius: 6px;
  background: var(--panel-3);
  overflow: hidden;
}
.signal-fill {
  display: block;
  height: 100%;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--blue), #6f92ff);
  transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.signal-fill.met {
  background: linear-gradient(90deg, #3aa76a, var(--ok));
}
.signal-threshold {
  position: absolute;
  top: -2px;
  bottom: -2px;
  width: 2px;
  background: var(--warn);
  opacity: 0.85;
}

/* item 2: miner readiness board. */
.miner-board {
  margin-top: 26px;
}
.miner-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
  margin-top: 10px;
}
.miner-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 11px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: var(--panel);
  font-size: 12px;
}
.miner-cell.ready {
  border-color: rgba(82, 214, 141, 0.4);
}
.miner-cell.not-ready {
  border-color: rgba(229, 167, 79, 0.32);
}
.miner-cell .miner-dot {
  font-size: 11px;
  line-height: 1;
}
.miner-cell.ready .miner-dot {
  color: var(--ok);
}
.miner-cell.not-ready .miner-dot {
  color: var(--warn);
}
.miner-cell a {
  color: var(--text);
  text-decoration: none;
}
.miner-cell .miner-count {
  margin-left: auto;
  font-family: var(--mono);
  color: var(--muted);
}

/* item 8: supply-invariant trust widget. */
.trust-widget {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 0;
}
.trust-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--muted);
  text-decoration: none;
}
.trust-chip.ok {
  border-color: rgba(82, 214, 141, 0.38);
  color: var(--ok);
}
.trust-chip.warn {
  border-color: rgba(229, 167, 79, 0.4);
  color: var(--warn);
}
a.trust-chip:hover {
  border-color: rgba(82, 214, 141, 0.7);
}
.trust-chip .dim {
  color: var(--dim);
  font-weight: 400;
}

/* item 3: v1 -> v2 pool migration — isometric voxel vaults. */
.pool-migration {
  margin-top: 26px;
}
.pm-panel {
  padding: 22px 20px 18px;
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(63, 111, 255, 0.06), transparent 60%),
    var(--panel);
}
.pm-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
  font-size: 12.5px;
  color: var(--muted);
  margin-bottom: 6px;
}
.pm-legend b {
  color: var(--text);
  font-weight: 700;
  letter-spacing: 0.05em;
  font-size: 10.5px;
}
.pm-legend .pm-sw {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  margin-right: 6px;
  vertical-align: -1px;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.4),
    inset 0 -2px 0 rgba(0, 0, 0, 0.28);
}
.pm-legend .pm-sw.v1 {
  background: var(--blue);
}
.pm-legend .pm-sw.v2 {
  background: var(--ok);
}
.pm-legend .pm-unit {
  margin-left: auto;
  font-family: var(--mono);
  color: var(--dim);
  font-size: 11.5px;
}

/* The isometric vaults. */
.pm-vaults {
  display: block;
  width: 100%;
  max-width: 560px;
  margin: 4px auto 2px;
  height: auto;
  overflow: visible;
}
/* Cube faces — three tones per pool give the clean voxel/Minecraft read. */
.vx-face {
  shape-rendering: geometricPrecision;
}
.vx-face.v1 {
  fill: #3f6fff;
}
.vx-top.v1 {
  fill: #7b9dff;
}
.vx-side.v1 {
  fill: #274cc4;
}
.vx-face.v2 {
  fill: #52d68d;
}
.vx-top.v2 {
  fill: #86ecb2;
}
.vx-side.v2 {
  fill: #2ea267;
}
.vx-face,
.vx-top,
.vx-side {
  stroke: rgba(6, 9, 16, 0.55);
  stroke-width: 1;
  stroke-linejoin: round;
}
.vx-partial .vx-face,
.vx-partial .vx-top,
.vx-partial .vx-side {
  opacity: 0.62;
}
/* Dormant v2: a reserved, hollow outline instead of solid cubes. */
.vx-face.vx-ghost,
.vx-top.vx-ghost,
.vx-side.vx-ghost {
  fill: rgba(82, 214, 141, 0.05);
  stroke: rgba(82, 214, 141, 0.36);
  stroke-dasharray: 3 3;
}
.vx-axis,
.vx-ground {
  stroke: var(--line);
  stroke-width: 1;
}
.vx-ground {
  stroke: var(--line-soft);
}
.vx-tick {
  stroke: var(--line);
  stroke-width: 1;
}
.vx-tick-lbl {
  fill: var(--dim);
  font-family: var(--mono);
  font-size: 10px;
}
.vx-total {
  font-family: var(--mono);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.vx-t1 {
  fill: #7b9dff;
}
.vx-t2 {
  fill: #86ecb2;
}
.vx-muted {
  fill: var(--dim);
}
.vx-unit-lbl {
  fill: var(--muted);
  font-size: 10.5px;
}
.vx-name {
  fill: var(--text);
  font-size: 12px;
  font-weight: 600;
}
.vx-sub {
  fill: var(--dim);
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.02em;
}

/* Segmented migration meter — how much of the private supply is post-quantum. */
.pm-meter {
  margin: 14px auto 2px;
  max-width: 560px;
}
.pm-meter-cells {
  display: flex;
  gap: 3px;
}
.pm-meter-cells i {
  flex: 1;
  height: 12px;
  border-radius: 2px;
  background: rgba(63, 111, 255, 0.9);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.22),
    inset 0 -2px 0 rgba(0, 0, 0, 0.3);
}
.pm-meter-cells i.on {
  background: var(--ok);
}
.pm-meter-cap {
  margin-top: 8px;
  font-size: 12px;
  color: var(--muted);
  text-align: center;
}
.pm-meter-cap b {
  color: var(--ok);
  font-family: var(--mono);
  font-weight: 700;
}

/* A single, gentle fade-in of the whole panel — no per-cube motion, so the
   vaults never flash or re-drop when the overview re-renders on a new block. */
@keyframes pm-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.pm-vaults {
  animation: pm-fade 0.45s ease both;
}
@media (prefers-reduced-motion: reduce) {
  .pm-vaults {
    animation: none;
  }
}

/* Live pool turnstile — transparent supply on the left, the two shielded-pool
   gates on the right, a four-arm rotor between them. The rotor's ONLY motion
   is a CSS transition to a new resting angle, and that angle changes only when
   a block's decoded bundle bytes carried a real boundary flow: no flow, no
   movement. Everything else is static data. */
.pm-ts {
  margin-top: 12px;
}
.ts-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
  margin-bottom: 12px;
}
.ts-head h3 {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text);
}
.ts-head .dim {
  font-size: 11.5px;
}
.ts-wrap {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px 22px;
  max-width: 720px;
  margin: 0 auto;
}
.ts-side {
  display: flex;
  flex-direction: column;
  gap: 3px;
  justify-self: end;
  text-align: right;
}
.ts-side-label,
.ts-gate-name {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.ts-balance {
  font-size: 14px;
  color: var(--text);
  font-weight: 600;
}
.ts-side-sub {
  font-family: var(--mono);
  font-size: 9.5px;
  color: var(--dim);
  letter-spacing: 0.02em;
}
.ts-rotor-cell {
  text-align: center;
}
.ts-rotor {
  display: block;
  width: 104px;
  height: 104px;
  margin: 0 auto;
}
.ts-housing {
  fill: var(--panel-2);
  stroke: var(--line);
  stroke-width: 2;
}
.ts-notch {
  stroke: var(--line);
  stroke-width: 2;
}
.ts-arms {
  /* The one moving part. It transitions to each new REAL resting angle; a
     freshly rendered rotor simply appears at rest. */
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.9s cubic-bezier(0.22, 0.9, 0.24, 1);
}
.ts-arm {
  stroke: var(--muted);
  stroke-width: 4;
  stroke-linecap: round;
}
.ts-arm-tip {
  fill: var(--dim);
}
.ts-hub {
  fill: var(--panel-3);
  stroke: var(--line);
  stroke-width: 2;
}
.ts-last {
  margin-top: 6px;
  font-size: 12px;
  color: var(--muted);
  min-height: 1.4em;
}
.ts-last a {
  color: var(--text);
}
.ts-gates {
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-self: start;
  min-width: 0;
}
.ts-gate {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-2);
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
}
.ts-gate.v1 {
  box-shadow: inset 3px 0 0 var(--blue);
}
.ts-gate.v2 {
  box-shadow: inset 3px 0 0 var(--ok);
}
/* v2 before it can flow: reported-but-inactive reads reserved, not broken. */
.ts-gate.v2.preactivation,
.ts-gate.v2.unreported {
  border-style: dashed;
  background: transparent;
}
.ts-gate.lit.v1 {
  border-color: rgba(63, 111, 255, 0.55);
}
.ts-gate.lit.v2 {
  border-color: rgba(82, 214, 141, 0.55);
}
.ts-gate-arrow {
  width: 20px;
  text-align: center;
  font-size: 15px;
  color: var(--dim);
  flex: none;
}
.ts-gate.lit .ts-gate-arrow {
  color: var(--text);
}
.ts-gate > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ts-log {
  list-style: none;
  margin: 12px auto 0;
  padding: 0;
  max-width: 720px;
  font-size: 12px;
  color: var(--muted);
}
.ts-ev {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  padding: 5px 2px;
  border-top: 1px solid var(--line-soft);
}
.ts-ev.live-new {
  animation: live-in 1.6s ease-out;
}
.ts-ev-dir {
  color: var(--dim);
}
.ts-ev.p1 .ts-ev-dir {
  color: var(--blue);
}
.ts-ev.p2 .ts-ev-dir {
  color: var(--ok);
}
.ts-ev-hint {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 8px;
  font-size: 10.5px;
  color: var(--muted);
}
.ts-ev .dim {
  margin-left: auto;
}
@media (max-width: 700px) {
  .ts-wrap {
    grid-template-columns: 1fr;
    justify-items: center;
  }
  .ts-side {
    justify-self: center;
    text-align: center;
  }
  .ts-gates {
    justify-self: stretch;
  }
}
@media (prefers-reduced-motion: reduce) {
  /* Reduced motion: the rotor snaps to its (real) resting angle and the log
     row does not flash — the same data, shown statically. */
  .ts-arms {
    transition: none;
  }
  .ts-ev.live-new {
    animation: none;
  }
  .ts-gate {
    transition: none;
  }
}

/* item 9: finality shading in block tables. */
.blk-row.is-pending td:first-child {
  box-shadow: inset 3px 0 0 var(--warn);
}
.blk-row.is-pending {
  opacity: 0.82;
}
.blk-row.is-final td:first-child {
  box-shadow: inset 3px 0 0 rgba(82, 214, 141, 0.6);
}
.blk-row {
  transition: opacity 0.4s ease;
}

/* item 7: inline copyable hash/address text + toast. */
.copyable {
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.15s ease;
  word-break: break-all;
}
.copyable:hover,
.copyable:focus-visible {
  background: rgba(63, 111, 255, 0.16);
  outline: none;
}
.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%) translateY(16px);
  background: var(--panel-3);
  border: 1px solid var(--line);
  color: var(--text);
  font-size: 13px;
  padding: 9px 16px;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
  z-index: 60;
}
.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.toast.warn {
  border-color: rgba(229, 167, 79, 0.5);
  color: var(--warn);
}
@media (prefers-reduced-motion: reduce) {
  .toast {
    transition: opacity 0.2s ease;
  }
}

/* ==========================================================================
   Page-load choreography — one staggered reveal per navigation
   ==========================================================================
   Each route's top-level sections rise in over ~⅓s. The reveal is gated on the
   `view-enter` class, which app.js sets in setView() — i.e. only when a
   NAVIGATION replaces the view — and drops again once the animation has run.
   Live data updates patch the DOM in place and never carry the class, so they
   can never replay the entrance. The global prefers-reduced-motion kill switch
   at the top of the media section already disables this entirely. */
@keyframes view-rise {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

@media (prefers-reduced-motion: no-preference) {
  main.view-enter > * {
    animation: view-rise 0.45s cubic-bezier(0.22, 1, 0.36, 1) backwards;
  }
  main.view-enter > :nth-child(2) {
    animation-delay: 0.05s;
  }
  main.view-enter > :nth-child(3) {
    animation-delay: 0.1s;
  }
  main.view-enter > :nth-child(4) {
    animation-delay: 0.15s;
  }
  main.view-enter > :nth-child(5) {
    animation-delay: 0.2s;
  }
  main.view-enter > :nth-child(6) {
    animation-delay: 0.25s;
  }
  main.view-enter > :nth-child(n + 7) {
    animation-delay: 0.3s;
  }
}