/* ═══════════════════════════════════════════════════════════════
   stats.css — /stats only.

   Load order: tokens.css → chrome.css → page.css → stats.css.
   page.css supplies the hero (.page-eyebrow / .page-title / .page-lede
   / .page-meta) and the sequence rule; this file adds the dashboard.

   Declares no :root. The old version did, with a fourth copy of the
   classification palette (--P: #e07070 against tokens' #E8827F) and a
   second --nav-height, so the charts drew variants in one red while
   every tag elsewhere on the site used another.

   It also redefined .wrap with its own padding. .wrap is now the shared
   content column used by the nav and footer, so that was reaching into
   both — hence .stats-page below for page padding instead.
═══════════════════════════════════════════════════════════════ */

.stats-page { padding-bottom: 90px; }

/* Live indicator in the page meta row. */
.live {
  display: inline-flex; align-items: center; gap: 7px; color: var(--live);
}
.live::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--live); box-shadow: 0 0 0 3px rgba(0, 229, 153, .15);
}
@media (prefers-reduced-motion: no-preference) {
  .live::before { animation: pip-pulse 2.4s ease-in-out infinite; }
}

/* ═══════════ sections ═══════════ */
.sec { margin-top: 44px; }
.sec + .sec { margin-top: 52px; padding-top: 44px; border-top: 1px solid var(--hair); }
.sec-title { font-size: 24px; font-weight: 700; letter-spacing: -.025em; line-height: 1.2; }
.sec-title strong { color: var(--gold); font-weight: 700; }
.sec.is-retro .sec-title strong { color: var(--live); }
.sec-sub { max-width: 62ch; margin-top: 8px; font-size: 15px; line-height: 1.6; color: var(--dim); }

.subhead { margin: 38px 0 18px; }
.subhead h3 { font-size: 17px; font-weight: 600; letter-spacing: -.015em; }
.subhead h3 strong { color: var(--live); font-weight: 700; }
.subhead p { max-width: 62ch; margin-top: 6px; font-size: 13.5px; line-height: 1.6; color: var(--dimmer); }

/* ═══════════ headline metric ═══════════ */
.metric-row {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: 30px; align-items: center; margin-bottom: 30px;
}
.metric-k { font-size: 13px; color: var(--dimmer); }
.metric-v { display: flex; align-items: baseline; flex-wrap: wrap; gap: 12px; margin-top: 10px; }
.metric-num { font-family: var(--mono); font-size: 50px; font-weight: 600; line-height: .9; color: var(--gold); letter-spacing: -.03em; }
.metric-sub { margin-top: 11px; font-size: 13px; color: var(--dim); }
.spark-canvas { position: relative; height: 118px; }

.chip {
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  padding: 4px 10px; border-radius: 6px;
  background: rgba(0, 229, 153, .12); color: var(--live);
}
.chip.is-gold { background: var(--gold-soft); color: var(--gold); }

/* ═══════════ stat cards ═══════════ */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; }
.stat {
  --accent: var(--line);
  padding: 16px 18px; border-radius: 12px;
  background: var(--slate); border: 1px solid var(--hair);
  border-left: 3px solid var(--accent);
}
.stat.acc-gold { --accent: var(--gold); }
.stat.acc-live { --accent: var(--live); }
.stat.acc-blue { --accent: var(--VUS); }
.stat .k { font-size: 12px; color: var(--dimmer); }
.stat .v { font-family: var(--mono); font-size: 25px; font-weight: 600; line-height: 1; color: var(--paper); margin-top: 9px; }
.stat .v.is-gold { color: var(--gold); }
.stat .v.is-live { color: var(--live); }
.stat .s { margin-top: 6px; font-size: 12px; color: var(--dim); }

/* ═══════════ chart panels ═══════════ */
.charts { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 30px; }
.panel { background: var(--slate); border: 1px solid var(--hair); border-radius: 12px; overflow: hidden; }
.panel.is-wide { grid-column: 1 / -1; }
.panel-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 16px 20px 12px;
}
.panel-head h3 { font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
.panel-head .n { font-family: var(--mono); font-size: 11px; color: var(--dimmer); }
.panel-body { padding: 4px 20px 20px; }
.canvas-box { position: relative; height: 260px; }
.canvas-box.is-tall { height: 300px; }

.legend { display: flex; flex-wrap: wrap; gap: 10px 16px; margin-top: 16px; }
.legend .item { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 11px; color: var(--dim); }
.legend .sw { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }

/* ═══════════ toggle ═══════════ */
.gene-tools { display: flex; align-items: center; gap: 14px; }
.toggle { display: inline-flex; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; }
.toggle button {
  padding: 5px 11px; border: none; background: none; cursor: pointer;
  font-family: var(--mono); font-size: 10.5px; color: var(--dimmer);
  transition: color .12s, background .12s;
}
.toggle button:hover { color: var(--paper); }
.toggle button.is-on { background: var(--gold-soft); color: var(--gold); }

/* ═══════════ V2 → HERA comparison ═══════════ */
.prog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.prog {
  padding: 16px 18px; border-radius: 12px;
  background: var(--slate); border: 1px solid var(--hair); border-left: 3px solid var(--live);
}
.prog-k { font-size: 12px; color: var(--dimmer); }
.prog-vals { display: flex; align-items: baseline; gap: 10px; margin-top: 12px; font-family: var(--mono); }
.prog-vals .pv2 { font-size: 17px; font-weight: 500; color: var(--dim); }
.prog-vals .parrow { font-size: 13px; color: var(--dimmer); }
.prog-vals .phera { font-size: 26px; font-weight: 600; line-height: 1; color: var(--live); }
.prog-note { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 9px; font-size: 12px; color: var(--dim); }
.pdelta { font-family: var(--mono); font-size: 11px; font-weight: 500; padding: 2px 8px; border-radius: 5px; }
.pdelta.up   { color: var(--live); background: rgba(0, 229, 153, .12); }
.pdelta.down { color: var(--P);    background: rgba(232, 130, 127, .12); }
.pdelta.flat { color: var(--dimmer); background: rgba(138, 157, 192, .10); }

/* ═══════════ loading / empty ═══════════ */
.state {
  padding: 56px; text-align: center; font-size: 14px; color: var(--dimmer);
  border: 1px dashed var(--line); border-radius: 12px;
}
.spinner {
  display: inline-block; width: 20px; height: 20px; margin-bottom: 14px;
  border: 2px solid var(--line); border-top-color: var(--gold); border-radius: 50%;
  animation: stats-spin .7s linear infinite;
}
@keyframes stats-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; } }

/* ═══════════ responsive ═══════════ */
@media (max-width: 900px) {
  .charts, .metric-row { grid-template-columns: 1fr; }
  .sec-title { font-size: 21px; }
  .metric-num { font-size: 42px; }
}