/* =============================================================================
   SeasonalEDGE Market Impact — presentation layer

   Design system lifted directly from the SeasonalEDGE Command Core dashboard
   (seasonalhedge.github.io/seasonaledge-data): paper/ink scale, the on/neu/off/
   info/spx signal tokens, and the Fraunces + Space Grotesk + JetBrains Mono
   trio. Token names match the Command Core so the two surfaces stay in sync.

   Local additions are marked. Every value is a custom property — nothing below
   the :root block hard-codes a colour.
   ========================================================================== */

:root {
  /* --- paper (Command Core, deepened) -------------------------------------- */
  /* Command Core ships #04060a / #080b11 / #0c1018. Run one stop darker here so
     the aurora and the capital field read against a blacker ground. */
  --paper:    #010203;
  --paper-2:  #04060b;
  --paper-3:  #070a11;

  /* --- ink (Command Core) -------------------------------------------------- */
  --ink:      #ecf1f7;
  --ink-2:    #99a8bc;
  --ink-3:    #4f5d74;

  --rule:     rgb(153 168 188 / 0.13);
  --rule-2:   rgb(153 168 188 / 0.24);
  --rule-rgb: 153 168 188;

  /* --- signal tokens (Command Core) --------------------------------------- */
  --on:    #4dffb8;   /* mint   — positive */
  --neu:   #ffb534;   /* amber  — neutral */
  --off:   #ff4d7a;   /* rose   — negative */
  --info:  #6bb7ff;   /* blue   — informational */
  --spx:   #ff8a4c;   /* orange — SPX */
  --posz:  #6b8bff;   /* periwinkle — positioning */

  --on-rgb:   77 255 184;
  --info-rgb: 107 183 255;
  --spx-rgb:  255 138 76;

  /* --- type (Command Core) ------------------------------------------------- */
  --serif: "Fraunces", Georgia, serif;
  --sans:  "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, Menlo, monospace;

  /* ------------------------------------------------------------------------ */
  /* Local aliases: this dashboard's vocabulary mapped onto Command Core tokens */
  /* ------------------------------------------------------------------------ */

  --color-void:            var(--paper);
  --color-bg:              var(--paper);
  --color-bg-lift:         var(--paper-2);
  --color-panel:           var(--paper-2);
  --color-panel-raised:    var(--paper-3);
  --color-edge:            var(--rule);
  --color-edge-strong:     var(--rule-2);

  --color-text:            var(--ink);
  --color-text-muted:      var(--ink-2);
  --color-text-faint:      var(--ink-3);

  /* MAG7 is the subject of this page, so it takes the informational blue;
     the rest of the index takes the Command Core's own SPX orange. */
  --color-capital:         var(--info);
  --color-capital-hot:     #a8d6ff;
  --color-capital-deep:    #2c6fb0;
  --capital-rgb:           var(--info-rgb);
  --color-mag7:            var(--info);
  --color-residual:        var(--spx);

  --color-signal:          var(--on);
  --color-signal-soft:     color-mix(in srgb, var(--on) 62%, var(--ink-2));
  --color-caution:         var(--neu);
  --color-caution-hot:     var(--spx);
  --color-alert:           var(--off);
  --color-muted:           var(--ink-2);

  --color-broad:           var(--on);
  --color-healthy:         var(--color-signal-soft);
  --color-concentrated:    var(--neu);
  --color-fragile:         var(--spx);
  --color-broken:          var(--off);

  --color-breadth-expansive: var(--on);
  --color-breadth-strong:    var(--color-signal-soft);
  --color-breadth-moderate:  var(--neu);
  --color-breadth-weak:      var(--spx);
  --color-breadth-critical:  var(--off);

  --color-state-leader:    var(--on);
  --color-state-accum:     var(--color-signal-soft);
  --color-state-neutral:   var(--ink-2);
  --color-state-dist:      var(--neu);
  --color-state-funding:   var(--off);
  --color-state-unknown:   var(--ink-3);

  --color-status-live:     var(--on);
  --color-status-delayed:  var(--neu);
  --color-status-stale:    var(--off);
  --color-status-closed:   var(--ink-3);

  --color-up:              var(--on);
  --color-down:            var(--off);
  --color-flat:            var(--ink-2);

  /* glass composition — Command Core panel recipe */
  --glass-tint:            var(--rule-rgb);
  --glass-fill:            0.02;
  --glass-fill-raised:     0.05;
  --glass-stroke:          0.24;
  --glass-specular:        0.07;
  --glass-blur:            14px;
  --glass-saturate:        110%;

  /* --- type scale ---------------------------------------------------------- */
  --font-display: var(--sans);
  --font-mono:    var(--mono);

  --size-hero:         clamp(1.9rem, 5.2vw, 3.5rem);
  --size-figure:       clamp(1.35rem, 2.8vw, 1.9rem);
  --size-equation:     clamp(1rem, 2.4vw, 1.4rem);
  --size-transmission: clamp(1.6rem, 4.2vw, 2.5rem);
  --size-title:        clamp(1.05rem, 2.4vw, 1.4rem);
  --size-body:         1rem;
  --size-small:        0.8125rem;
  --size-micro:        0.6875rem;

  --weight-light:   300;
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-bold:    600;

  /* Command Core label tracking runs .16em–.26em */
  --tracking-base:  0.01em;
  --tracking-wide:  0.22em;
  --tracking-tight: -0.01em;

  /* --- geometry ------------------------------------------------------------ */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;

  --radius-sm: 5px;
  --radius-md: 9px;
  --radius-lg: 13px;      /* Command Core node/panel radius */
  --radius-pill: 999px;

  --bar-height: 52px;
  --content-max: 1240px;

  /* --- depth (Command Core shadows) ---------------------------------------- */
  --shadow-flat:  0 1px 0 rgb(255 255 255 / 0.04);
  --shadow-glass:
      inset 0 1px 0 rgb(255 255 255 / 0.04),
      0 18px 50px rgb(0 0 0 / 0.5);
  --shadow-lift:
      inset 0 1px 0 rgb(255 255 255 / 0.07),
      0 30px 80px rgb(0 0 0 / 0.55);
  --glow-capital: 0 0 14px rgb(var(--capital-rgb) / 0.5);

  /* --- motion --------------------------------------------------------------- */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 160ms;
  --dur: 300ms;
  --dur-slow: 720ms;
  --breathe: 3500ms;      /* Command Core corepulse */

  /* pointer position, written by engine.js (0–1 across the viewport) */
  --mx: 0.5;
  --my: 0.4;
  --mx-px: 50vw;
  --my-px: 40vh;

  /* engine intensity 0–1, written by engine.js from the impact share */
  --intensity: 0.4;
}

/* ---------------------------------------------------------------- reset --- */

*, *::before, *::after { box-sizing: border-box; }

html { background: var(--color-void); }

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  background: var(--paper);
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: var(--size-body);
  font-weight: var(--weight-regular);
  line-height: 1.5;
  letter-spacing: var(--tracking-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, p, dl, dd, ul, figure { margin: 0; }
ul { list-style: none; padding: 0; }

.mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "zero" 1;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: -9999px; z-index: 100;
  background: var(--color-capital); color: var(--color-void);
  padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm);
  font-weight: var(--weight-medium);
}
.skip-link:focus { left: var(--space-4); top: var(--space-4); }

:focus-visible {
  outline: 1px solid var(--color-capital);
  outline-offset: 3px;
}

::selection { background: rgb(var(--capital-rgb) / 0.3); color: var(--ink); }

/* ============================================================== FX LAYERS === */

.fx {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* Engineering grid — the substrate the capital flows over. */
.fx__grid {
  position: absolute;
  inset: -10%;
  background-image:
    linear-gradient(rgb(var(--rule-rgb) / 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgb(var(--rule-rgb) / 0.035) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(circle at 50% 40%, #000 0%, transparent 78%);
  transform: translate3d(
    calc((var(--mx) - 0.5) * -22px),
    calc((var(--my) - 0.5) * -22px), 0);
  transition: transform 900ms var(--ease-out);
}

/* Aurora — Command Core's drifting signal blobs, screened behind everything. */
.aurora {
  position: absolute;
  inset: -6% -14% 0 -14%;
  overflow: hidden;
  filter: blur(110px);
  will-change: transform;
}
.aurora .blob {
  position: absolute;
  border-radius: 50%;
  mix-blend-mode: screen;
}
.aurora .b1 { width: 620px; height: 620px; background: var(--on);   top: -6%;    left: -6%;   opacity: 0.11; animation: drift 28s var(--ease-in-out) infinite alternate; }
.aurora .b2 { width: 660px; height: 660px; background: var(--neu);  top: -4%;    right: -8%;  opacity: 0.085; animation: drift 33s var(--ease-in-out) infinite alternate-reverse; }
.aurora .b3 { width: 560px; height: 560px; background: var(--off);  bottom: -8%; right: 6%;   opacity: 0.08; animation: drift 30s var(--ease-in-out) infinite alternate; }
.aurora .b4 { width: 580px; height: 580px; background: var(--info); bottom: -8%; left: 4%;    opacity: 0.10; animation: drift 35s var(--ease-in-out) infinite alternate-reverse; }
.aurora .b5 { width: 640px; height: 640px; background: var(--on);   top: 46%;    left: -10%;  opacity: 0.07; animation: drift 40s var(--ease-in-out) infinite alternate; }
.aurora .b6 { width: 600px; height: 600px; background: var(--info); top: 72%;    right: -8%;  opacity: 0.07; animation: drift 44s var(--ease-in-out) infinite alternate-reverse; }

@keyframes drift {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(48px, -34px) scale(1.09); }
  100% { transform: translate(-34px, 46px) scale(0.94); }
}

/* CRT scanline — Command Core #stage::after */
.fx__scan {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    180deg,
    rgb(255 255 255 / 0) 0 2px,
    rgb(255 255 255 / 0.012) 2px 3px
  );
  mix-blend-mode: overlay;
}

.fx__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Cursor spotlight — reveals the substrate and warms the glass beneath it. */
.fx__spotlight {
  position: absolute;
  inset: 0;
  background: radial-gradient(420px circle at var(--mx-px) var(--my-px),
    rgb(var(--info-rgb) / 0.1),
    rgb(var(--on-rgb) / 0.05) 30%,
    transparent 60%);
  transition: background 120ms linear;
}

.fx__vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(150% 105% at 50% 38%, transparent 38%, rgb(0 0 0 / 0.8) 100%);
}

/* ================================================================ LAYOUT === */

.shell {
  position: relative;
  z-index: 1;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--space-5) var(--space-7);
}

main {
  perspective: 1400px;
  perspective-origin: calc(var(--mx) * 100%) calc(var(--my) * 100%);
}

.panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  transform-style: preserve-3d;
}
.panel[hidden] { display: none; }

.grid-2 {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}
@media (min-width: 760px) {
  .grid-2 { grid-template-columns: 1.45fr 1fr; }
}

/* ================================================================= GLASS === */

.glass {
  position: relative;
  isolation: isolate;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--paper-2) 82%, transparent),
    color-mix(in srgb, var(--paper-3) 88%, transparent));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border: 1px solid var(--rule-2);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-glass);
  transition:
    transform var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out);
}

/* Specular highlight that tracks the pointer — the "real depth" cue. */
.glass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    360px circle at calc(var(--lx, 50%)) calc(var(--ly, 50%)),
    rgb(var(--glass-tint) / var(--glass-specular)),
    transparent 60%
  );
  opacity: 0;
  transition: opacity var(--dur) var(--ease-out);
  pointer-events: none;
  z-index: -1;
}
.glass:hover::before { opacity: 1; }

/* Top edge light — glass catching the ambient. */
.glass::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  border-radius: inherit;
  background: linear-gradient(90deg,
    transparent,
    var(--on) 18%, var(--neu) 42%, var(--off) 64%, var(--info) 86%,
    transparent);
  filter: blur(0.5px);
  opacity: 0.35;
  pointer-events: none;
}

.glass:hover {
  border-color: rgb(var(--glass-tint) / 0.14);
  box-shadow: var(--shadow-lift);
}

/* ============================================================== MASTHEAD === */

.masthead {
  padding: var(--space-6) 0 var(--space-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  align-items: flex-end;
  justify-content: space-between;
  border-bottom: 1px solid var(--color-edge);
  position: relative;
}
.masthead::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg,
    transparent, var(--on) 18%, var(--neu) 42%, var(--off) 64%, var(--info) 86%, transparent);
  filter: blur(0.5px);
  opacity: 0.9;
}

.masthead__wordmark {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--size-small);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text);
}
.masthead__wordmark em {
  font-style: normal;
  font-weight: var(--weight-light);
  color: var(--color-capital);
}
.masthead__mark {
  width: 9px; height: 9px;
  background: var(--color-capital);
  box-shadow: var(--glow-capital);
  transform: rotate(45deg);
  animation: breathe var(--breathe) var(--ease-in-out) infinite;
}

.masthead__title {
  font-size: var(--size-title);
  font-weight: var(--weight-light);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-muted);
  margin-top: var(--space-2);
}

.masthead__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
}
.meta-item dt {
  font-size: var(--size-micro);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-faint);
}
.meta-item dd {
  font-size: var(--size-small);
  color: var(--color-text-muted);
  margin-top: 3px;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 3px var(--space-3);
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: var(--size-micro);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  background: rgb(var(--glass-tint) / 0.04);
  border: 1px solid rgb(var(--glass-tint) / 0.1);
  color: var(--color-status-closed);
}
.status-pill::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 10px currentColor;
}
.status-pill[data-status="LIVE"]    { color: var(--color-status-live); }
.status-pill[data-status="LIVE"]::before { animation: blip 1.9s var(--ease-in-out) infinite; }
.status-pill[data-status="DELAYED"] { color: var(--color-status-delayed); }
.status-pill[data-status="STALE"]   { color: var(--color-status-stale); }
.status-pill[data-status="CLOSED"]  { color: var(--color-status-closed); }

/* ================================================================== TABS === */

.tabs {
  display: flex;
  gap: var(--space-1);
  overflow-x: auto;
  padding: var(--space-4) 0;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }

.tab {
  position: relative;
  flex: 0 0 auto;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  color: var(--color-text-faint);
  font: inherit;
  font-size: var(--size-micro);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  padding: var(--space-2) var(--space-4);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.tab:hover { color: var(--color-text-muted); background: rgb(var(--glass-tint) / 0.03); }
.tab[aria-selected="true"] {
  color: var(--color-text);
  background: rgb(var(--glass-tint) / 0.05);
  border-color: rgb(var(--glass-tint) / 0.1);
  box-shadow: 0 0 0 1px rgb(var(--capital-rgb) / 0.14), var(--glow-capital);
}
.tab[aria-selected="true"] span::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 4px;
  width: 16px; height: 1px;
  transform: translateX(-50%);
  background: var(--color-capital);
}

/* ================================================================== CARDS === */

.card { padding: var(--space-5); }

.card__header {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}
.card__heading {
  font-size: var(--size-micro);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-faint);
  margin-bottom: var(--space-4);
}
.card__header .card__heading { margin-bottom: 0; }
.card__note {
  margin-top: var(--space-4);
  font-size: var(--size-small);
  color: var(--color-text-faint);
  line-height: 1.6;
}

/* =================================================================== HERO === */

.hero {
  padding: var(--space-7) var(--space-6);
  overflow: hidden;
}
.hero::after { opacity: 1; }

.hero__rule {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: linear-gradient(
    180deg,
    transparent,
    var(--color-capital) 30%,
    var(--color-capital-hot) 50%,
    var(--color-capital) 70%,
    transparent
  );
  opacity: calc(0.35 + var(--intensity) * 0.55);
  filter: blur(0.4px);
  animation: breathe var(--breathe) var(--ease-in-out) infinite;
}

.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--size-micro);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-faint);
}

.pulse-dot {
  position: relative;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--color-capital);
}
.pulse-dot::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1px solid var(--color-capital);
  animation: ping 2.6s var(--ease-out) infinite;
}

.hero__statement {
  margin-top: var(--space-4);
  font-size: var(--size-hero);
  font-weight: var(--weight-light);
  line-height: 1.06;
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
  max-width: 20ch;
  color: var(--ink);
}

.hero__support {
  margin-top: var(--space-5);
  font-size: 1.0625rem;
  font-weight: var(--weight-light);
  color: var(--color-text-muted);
  max-width: 58ch;
  line-height: 1.6;
}

.hero__figures {
  margin-top: var(--space-6);
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.figure {
  position: relative;
  border-top: 1px solid var(--color-edge);
  padding-top: var(--space-3);
}
.figure::before {
  content: "";
  position: absolute;
  top: -1px; left: 0;
  width: 24px; height: 1px;
  background: var(--color-edge-strong);
}
.figure--accent::before { background: var(--color-capital); box-shadow: var(--glow-capital); }

.figure__label {
  display: block;
  font-size: var(--size-micro);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-faint);
}
.figure__value {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--size-figure);
  font-weight: var(--weight-medium);
  letter-spacing: -0.02em;
}

.value-up   { color: var(--color-up); }
.value-down { color: var(--color-down); }
.value-flat { color: var(--color-flat); }

/* ============================================================== EQUATION === */

.equation-caption {
  font-size: var(--size-small);
  color: var(--color-text-faint);
  margin-bottom: var(--space-4);
}
.equation {
  font-size: var(--size-equation);
  font-weight: var(--weight-medium);
  color: var(--color-text);
  overflow-wrap: anywhere;
}

/* ======================================================= ATTRIBUTION BAR === */

.direction-pill {
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--size-micro);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  border: 1px solid var(--color-edge-strong);
  color: var(--color-text-muted);
  background: rgb(var(--glass-tint) / 0.03);
}
.direction-pill[data-direction="DRIVING"] {
  color: var(--color-signal);
  border-color: color-mix(in srgb, var(--color-signal) 45%, transparent);
  background: color-mix(in srgb, var(--color-signal) 10%, transparent);
}
.direction-pill[data-direction="OFFSETTING"] {
  color: var(--color-alert);
  border-color: color-mix(in srgb, var(--color-alert) 45%, transparent);
  background: color-mix(in srgb, var(--color-alert) 10%, transparent);
}
.direction-pill[data-direction="FLAT"] { color: var(--color-flat); }
.direction-pill[data-direction="N/A"]  { color: var(--color-text-faint); }

.attribution-bar {
  display: flex;
  width: 100%;
  height: var(--bar-height);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-bg-lift);
  border: 1px solid rgb(var(--glass-tint) / 0.07);
  box-shadow: inset 0 2px 8px rgb(0 0 0 / 0.6);
}
.attribution-bar__segment {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: var(--size-small);
  font-weight: var(--weight-medium);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  transition: flex-basis var(--dur-slow) var(--ease-out);
}
.attribution-bar__segment--mag7 {
  background: linear-gradient(180deg,
    var(--color-capital-hot) 0%,
    var(--color-capital) 45%,
    var(--color-capital-deep) 100%);
  color: var(--paper);
  box-shadow: 0 0 24px rgb(var(--capital-rgb) / 0.45);
}
/* Capital flowing left→right through the active segment. */
.attribution-bar__segment--mag7::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    transparent,
    rgb(255 255 255 / 0.45) 50%,
    transparent);
  transform: translateX(-100%);
  animation: sweep 3.4s var(--ease-in-out) infinite;
}
.attribution-bar__segment--residual {
  background: repeating-linear-gradient(
    -45deg,
    color-mix(in srgb, var(--spx) 48%, var(--paper-3)),
    color-mix(in srgb, var(--spx) 48%, var(--paper-3)) 6px,
    color-mix(in srgb, var(--spx) 30%, var(--paper-3)) 6px,
    color-mix(in srgb, var(--spx) 30%, var(--paper-3)) 12px
  );
  color: var(--ink);
}

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  margin-top: var(--space-4);
  font-size: var(--size-small);
  color: var(--color-text-muted);
}
.legend li { display: flex; align-items: center; gap: var(--space-2); }
.legend strong { color: var(--color-text); font-weight: var(--weight-medium); }
.legend__swatch { width: 10px; height: 10px; border-radius: 2px; }
.legend__swatch--mag7     { background: var(--color-capital); box-shadow: var(--glow-capital); }
.legend__swatch--residual { background: var(--color-residual); }

/* ================================================================ BREADTH === */

.breadth__count {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--size-micro);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-faint);
  margin-bottom: var(--space-4);
}
.breadth__count strong {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: var(--size-figure);
  color: var(--color-text);
  letter-spacing: var(--tracking-tight);
}

.constituent-cells {
  display: grid;
  gap: var(--space-2);
  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
}
.cell {
  position: relative;
  overflow: hidden;
  border: 1px solid rgb(var(--glass-tint) / 0.06);
  border-radius: var(--radius-sm);
  background: rgb(var(--glass-tint) / 0.025);
  padding: var(--space-3);
  transition: background var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.cell::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--color-state-unknown);
}
.cell__ticker {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--size-small);
  font-weight: var(--weight-medium);
  letter-spacing: 0.02em;
}
.cell__state {
  display: block;
  font-size: var(--size-micro);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  margin-top: 3px;
}
.cell[data-state="LEADER"]::before  { background: var(--color-state-leader); }
.cell[data-state="ACCUM"]::before   { background: var(--color-state-accum); }
.cell[data-state="NEUTRAL"]::before { background: var(--color-state-neutral); }
.cell[data-state="DIST"]::before    { background: var(--color-state-dist); }
.cell[data-state="FUNDING"]::before { background: var(--color-state-funding); }

/* Active nodes — where capital pools. */
.cell[data-positive="true"] {
  background: color-mix(in srgb, var(--on) 7%, transparent);
  border-color: color-mix(in srgb, var(--on) 30%, transparent);
  box-shadow: 0 0 20px rgb(var(--on-rgb) / 0.14), inset 0 0 20px rgb(var(--on-rgb) / 0.05);
}
.cell[data-positive="true"]::before { box-shadow: 0 0 12px var(--color-signal); }
.cell[data-positive="true"] .cell__state { color: var(--color-signal); }
.cell[data-positive="true"] .cell__ticker { color: var(--color-text); }

.breadth__line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-3);
  font-size: var(--size-micro);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-faint);
}
.breadth__line span { color: var(--color-text); letter-spacing: 0.02em; text-transform: none; }

.badge {
  display: inline-block;
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-size: var(--size-micro);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  border: 1px solid currentColor;
  background: color-mix(in srgb, currentColor 10%, transparent);
}
.badge[data-breadth="EXPANSIVE"] { color: var(--color-breadth-expansive); }
.badge[data-breadth="STRONG"]    { color: var(--color-breadth-strong); }
.badge[data-breadth="MODERATE"]  { color: var(--color-breadth-moderate); }
.badge[data-breadth="WEAK"]      { color: var(--color-breadth-weak); }
.badge[data-breadth="CRITICAL"]  { color: var(--color-breadth-critical); }

/* =========================================================== TRANSMISSION === */

.card--transmission { display: flex; flex-direction: column; }

.transmission__value {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: var(--size-transmission);
  letter-spacing: var(--tracking-tight);
  line-height: 1;
  color: var(--color-flat);
  text-shadow: 0 0 24px color-mix(in srgb, currentColor 50%, transparent);
  transition: color var(--dur) var(--ease-out);
}
.transmission__value[data-transmission="BROAD"]        { color: var(--color-broad); }
.transmission__value[data-transmission="HEALTHY"]      { color: var(--color-healthy); }
.transmission__value[data-transmission="CONCENTRATED"] { color: var(--color-concentrated); }
.transmission__value[data-transmission="FRAGILE"]      { color: var(--color-fragile); }
.transmission__value[data-transmission="BROKEN"]       { color: var(--color-broken); }

.transmission__meter {
  height: 2px;
  margin-top: var(--space-4);
  background: var(--color-bg-lift);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.transmission__meter span {
  display: block;
  height: 100%;
  width: 0;
  background: currentColor;
  transition: width var(--dur-slow) var(--ease-out);
}
.transmission__meter { color: var(--color-flat); }
.card--transmission[data-transmission="BROAD"]        .transmission__meter { color: var(--color-broad); }
.card--transmission[data-transmission="HEALTHY"]      .transmission__meter { color: var(--color-healthy); }
.card--transmission[data-transmission="CONCENTRATED"] .transmission__meter { color: var(--color-concentrated); }
.card--transmission[data-transmission="FRAGILE"]      .transmission__meter { color: var(--color-fragile); }
.card--transmission[data-transmission="BROKEN"]       .transmission__meter { color: var(--color-broken); }

.transmission__definition {
  margin-top: var(--space-4);
  font-size: var(--size-small);
  color: var(--color-text-muted);
  line-height: 1.6;
}

/* ========================================================= INTERPRETATION === */

.card--interpretation::before { content: none; }
.card--interpretation {
  border-left: 1px solid color-mix(in srgb, var(--color-capital) 40%, transparent);
}
.interpretation {
  font-size: clamp(1.0625rem, 2vw, 1.3125rem);
  font-weight: var(--weight-light);
  line-height: 1.55;
  max-width: 68ch;
  text-wrap: pretty;
  color: var(--color-text);
}

.confirmation-note {
  font-size: var(--size-micro);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-faint);
  padding: var(--space-2) var(--space-1);
}

/* ============================================================== METRICS === */

.metric-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
}
.metric {
  position: relative;
  border-top: 1px solid var(--color-edge);
  padding-top: var(--space-3);
}
.metric dt {
  font-size: var(--size-micro);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-faint);
}
.metric dd {
  margin: var(--space-2) 0 0;
  font-family: var(--font-mono);
  font-size: 1.375rem;
  font-weight: var(--weight-medium);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.metric__state {
  display: block;
  font-family: var(--font-display);
  font-size: var(--size-micro);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-faint);
  margin-top: var(--space-1);
}

.tripwires { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.tripwire {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-caution) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-caution) 40%, transparent);
  color: var(--color-caution);
  font-family: var(--font-mono);
  font-size: var(--size-small);
}
.tripwire--none {
  background: transparent;
  border-color: var(--color-edge);
  color: var(--color-text-faint);
}

.card--details summary {
  cursor: pointer;
  font-size: var(--size-micro);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-faint);
  list-style: none;
}
.card--details summary::-webkit-details-marker { display: none; }
.card--details summary::before { content: "+ "; color: var(--color-capital); }
.card--details[open] summary::before { content: "− "; }
.reference-list {
  margin-top: var(--space-5);
  display: grid;
  gap: var(--space-3);
  font-size: var(--size-small);
  color: var(--color-text-muted);
  line-height: 1.6;
}
.reference-list strong { color: var(--color-text); font-weight: var(--weight-medium); }

/* =============================================================== TABLES === */

.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 calc(var(--space-5) * -1) calc(var(--space-5) * -1);
  padding: 0 var(--space-5) var(--space-5);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--size-small);
  white-space: nowrap;
}
.data-table th, .data-table td {
  padding: var(--space-3);
  text-align: left;
  border-bottom: 1px solid rgb(var(--glass-tint) / 0.05);
}
.data-table th {
  font-family: var(--font-display);
  font-size: var(--size-micro);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-faint);
  font-weight: var(--weight-medium);
  position: sticky;
  top: 0;
  z-index: 1;
  background: color-mix(in srgb, var(--color-panel) 94%, transparent);
  backdrop-filter: blur(8px);
}
.data-table td {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--color-text-muted);
}
.data-table .num { text-align: right; }
.data-table tbody tr { transition: background var(--dur-fast) var(--ease-out); }
.data-table tbody tr:hover { background: rgb(var(--glass-tint) / 0.035); }
.data-table .ticker { color: var(--color-text); font-weight: var(--weight-medium); }
.data-table .empty-row td {
  text-align: center;
  color: var(--color-text-faint);
  font-family: var(--font-display);
  padding: var(--space-7);
}

.state-tag {
  display: inline-block;
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-size: var(--size-micro);
  font-weight: var(--weight-medium);
  letter-spacing: 0.06em;
  border: 1px solid currentColor;
  color: var(--color-state-unknown);
}
.state-tag[data-state="LEADER"]  { color: var(--color-state-leader); }
.state-tag[data-state="ACCUM"]   { color: var(--color-state-accum); }
.state-tag[data-state="NEUTRAL"] { color: var(--color-state-neutral); }
.state-tag[data-state="DIST"]    { color: var(--color-state-dist); }
.state-tag[data-state="FUNDING"] { color: var(--color-state-funding); }

.flow-tag {
  font-family: var(--font-display);
  font-size: var(--size-micro);
  font-weight: var(--weight-medium);
  letter-spacing: 0.06em;
}
.flow-tag[data-flow="ENTERING"] { color: var(--color-signal); }
.flow-tag[data-flow="ENTERING"]::before { content: "▲ "; }
.flow-tag[data-flow="LEAVING"]  { color: var(--color-alert); }
.flow-tag[data-flow="LEAVING"]::before { content: "▼ "; }
.flow-tag[data-flow="FLAT"]     { color: var(--color-flat); }

.coverage-note { font-size: var(--size-micro); color: var(--color-text-faint); }

/* ============================================================= DEV VIEW === */

.button {
  background: rgb(var(--glass-tint) / 0.04);
  border: 1px solid rgb(var(--glass-tint) / 0.1);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  font: inherit;
  font-size: var(--size-micro);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  transition: color var(--dur-fast), border-color var(--dur-fast);
}
.button:hover { color: var(--color-capital); border-color: color-mix(in srgb, var(--color-capital) 40%, transparent); }

.json-view {
  margin: 0;
  max-height: 62vh;
  overflow: auto;
  background: var(--color-void);
  border: 1px solid rgb(var(--glass-tint) / 0.06);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--size-small);
  line-height: 1.7;
  color: var(--color-text-muted);
  white-space: pre;
  box-shadow: inset 0 2px 12px rgb(0 0 0 / 0.6);
}

/* ============================================================= COLOPHON === */

.colophon {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-edge);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: space-between;
  align-items: center;
  font-size: var(--size-micro);
  color: var(--color-text-faint);
}
.colophon__conn { display: flex; align-items: center; gap: var(--space-2); }
.conn-led {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--color-text-faint);
  transition: background var(--dur), box-shadow var(--dur);
}
.conn-led[data-live="true"] {
  background: var(--color-signal);
  box-shadow: 0 0 8px var(--color-signal);
  animation: blip 2.2s var(--ease-in-out) infinite;
}

/* =========================================================== DIGIT ROLL === */

.roll {
  display: inline-flex;
  align-items: flex-end;
  flex-wrap: wrap;      /* long strings (the equation) must not overflow narrow cards */
  row-gap: var(--space-2);
  line-height: 1;
}
.roll__col {
  display: block;
  height: 1em;
  overflow: hidden;
}
.roll__strip {
  display: block;
  will-change: transform;
  transition: transform 900ms var(--ease-out);
}
.roll__strip > span {
  display: block;
  height: 1em;
  line-height: 1em;
  text-align: center;
}
.roll__static {
  display: block;
  height: 1em;
  line-height: 1em;
  white-space: pre;
}

/* Brief flash when a figure changes — the terminal "print" cue. */
@keyframes printFlash {
  0%   { color: var(--color-capital-hot); text-shadow: 0 0 16px rgb(var(--capital-rgb) / 0.75); }
  100% { color: inherit; text-shadow: none; }
}
.roll--printing { animation: printFlash 900ms var(--ease-out); }

/* ============================================================ ANIMATIONS === */

@keyframes breathe {
  0%, 100% { opacity: 0.45; transform: scale(1) rotate(45deg); }
  50%      { opacity: 1;    transform: scale(1.12) rotate(45deg); }
}
.hero__rule { animation-name: breatheRule; }
@keyframes breatheRule {
  0%, 100% { opacity: calc(0.25 + var(--intensity) * 0.4); }
  50%      { opacity: calc(0.5 + var(--intensity) * 0.5); }
}

@keyframes ping {
  0%   { transform: scale(1);   opacity: 0.9; }
  70%  { transform: scale(2.6); opacity: 0; }
  100% { transform: scale(2.6); opacity: 0; }
}

@keyframes blip {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}

@keyframes sweep {
  0%   { transform: translateX(-100%); }
  55%  { transform: translateX(100%); }
  100% { transform: translateX(100%); }
}

/* Panel entrance — staggered, gives the tab switch a physical feel. */
.panel:not([hidden]) > * {
  animation: riseIn var(--dur-slow) var(--ease-out) backwards;
}
.panel:not([hidden]) > *:nth-child(1) { animation-delay: 0ms; }
.panel:not([hidden]) > *:nth-child(2) { animation-delay: 45ms; }
.panel:not([hidden]) > *:nth-child(3) { animation-delay: 90ms; }
.panel:not([hidden]) > *:nth-child(4) { animation-delay: 135ms; }
.panel:not([hidden]) > *:nth-child(5) { animation-delay: 180ms; }
@keyframes riseIn {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to   { opacity: 1; transform: none; }
}

/* ========================================================== RESPONSIVE === */

@media (max-width: 680px) {
  .shell { padding: 0 var(--space-3) var(--space-6); }
  .masthead { flex-direction: column; align-items: flex-start; gap: var(--space-4); }
  .masthead__meta { gap: var(--space-4); }
  .card { padding: var(--space-4); }
  .hero { padding: var(--space-5) var(--space-4); }
  .hero__statement { max-width: none; }
  .attribution-bar { --bar-height: 42px; }
  .table-scroll { margin: 0 calc(var(--space-4) * -1) calc(var(--space-4) * -1); padding: 0 var(--space-4) var(--space-4); }
  :root { --glass-blur: 14px; }
}

/* Coarse pointers get no spotlight or parallax — nothing to track. */
@media (pointer: coarse) {
  .fx__spotlight { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
  .fx__canvas { display: none; }
  .attribution-bar__segment--mag7::after { display: none; }
}

/* Older browsers without backdrop-filter still get a solid, legible panel. */
@supports not (backdrop-filter: blur(4px)) {
  .glass { background: var(--color-panel); }
}