/* ═══════════════════════════════════════════════════════════════════════════
   /pulse — the network pulse. Page-specific layout only: the three tiers
   (protocol clock → the field → market context) and the two devices the shared
   system does not carry yet (an epoch progress rule, a clock plate). Everything
   consumes the tokens in style.css; nothing is redefined here.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── tier 1 · the protocol clock ─────────────────────────────────────────── */
.epoch {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(300px, .94fr);
  gap: clamp(1.5rem, 3.5vw, 3rem);
  align-items: start;
  margin: 0 0 var(--s6);
}
/* the lead is a two-cell ledger: which epoch, and how much of it is left. The
   hash belongs to the number, not beside it — the shared flex gap opens a
   word-space inside a single token at display size. */
.lead-2up {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s4); align-items: start; margin-bottom: var(--s5);
}
.lead-time { border-left: 1px solid var(--rule); padding-left: var(--s4); }
.epoch-record .record-figure { margin: 0; gap: 0; }
.epoch-record .record-figure .of { color: var(--ink-3); margin-left: .55rem; }
.lead-cd {
  font-size: clamp(1.5rem, 2.7vw, 2.05rem);
  letter-spacing: -0.02em; line-height: 1.05;
}

/* elapsed share of the current reward epoch — a fill, not a tick, because the
   quantity is duration rather than rank (the rank device is reserved for ranks) */
.ep-bar {
  position: relative; height: 6px; border-radius: 1px; overflow: hidden;
  background: var(--paper-sunk); border: 1px solid var(--rule);
  margin-bottom: .55rem;
}
.ep-bar i { display: block; height: 100%; background: var(--accent-bright); }
.ep-scale {
  display: flex; justify-content: space-between; gap: var(--s3); flex-wrap: wrap;
  font-size: 0.72rem; color: var(--ink-4);
  font-variant-numeric: tabular-nums lining-nums;
}
.ep-scale .ep-pct {
  color: var(--accent-deep); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; font-size: 0.68rem;
}
html.dark .ep-scale .ep-pct { color: var(--accent); }

.epoch-side { display: flex; flex-direction: column; gap: var(--s4); }

/* a clock plate: one live figure and the mechanic it belongs to. Marked with the
   system's 2px top rule (.tier-card's precedent) — the 3px edge is a flag and
   belongs to --accent / --neg / --ink only. */
.clock {
  border: 1px solid var(--rule); border-top: 2px solid var(--rule-2);
  background: var(--paper-2); border-radius: var(--radius);
  padding: var(--s4) var(--s5);
}
.clock-k {
  display: block;
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: .15em;
  text-transform: uppercase; color: var(--ink-3);
  margin-bottom: var(--s2);
}
.clock-v {
  margin: 0 0 var(--s2);
  font-family: var(--font-display);
  font-size: 1.9rem; font-weight: 600; line-height: 1;
  letter-spacing: -0.025em; color: var(--ink);
  font-variant-numeric: tabular-nums lining-nums;
  display: flex; align-items: baseline; gap: .55rem; flex-wrap: wrap;
}
.clock-v .clock-sub {
  font-family: var(--font-text); font-size: 0.82rem; font-weight: 500;
  letter-spacing: .01em; color: var(--ink-3);
  font-variant-numeric: tabular-nums lining-nums;
}
.clock-note {
  margin: 0; font-size: 0.84rem; line-height: 1.55; color: var(--ink-3);
  max-width: 46ch;
}
.epoch-explain {
  margin: 0; padding-top: var(--s3);
  border-top: 1px solid var(--rule);
  font-size: 0.84rem; line-height: 1.6; color: var(--ink-4);
  max-width: 52ch;
}

/* ── tier 2 · the field ──────────────────────────────────────────────────── */

/* Eight rows never overflow the pane, so the shared "more below" gradient and the
   vertical clamp would both be lying about the data. The horizontal frame, the
   pinned head and the frozen first column all stay. */
.dash-frame .table-wrap { max-height: none; }
.dash-frame::after { content: none; }

/* Seven columns fit the text column, so the register keeps the page's left rule
   instead of inheriting the wide-table bleed built for the 12-column /providers
   register. The mobile frame (100vw − 2.2rem) is left alone. */
@media (min-width: 761px) {
  .dash-frame { --bleed: 100%; margin-left: 0; }
}

/* the field median, drawn on every magnitude rule so a row is read against the
   middle of the field rather than against an abstract 0–100% */
.dash-table td.meter-cell .meter { overflow: visible; }
.dash-table td.meter-cell .meter b {
  position: absolute; top: -3px; bottom: -3px; width: 1px;
  background: var(--rule-ink); opacity: .55;
}
/* the last row has no rule beneath it, so its magnitude rule needs the clearance
   the row rule would otherwise have given it */
.dash-table tbody tr:last-child td.meter-cell { padding-bottom: .95rem; }
.dash-table tbody tr:last-child td.meter-cell .meter { bottom: .55rem; }

/* a registered provider with no band hits at all — flagged in words next to the
   name, redundant with the 0.00% printed in the accuracy column */
.dead {
  display: inline-block; margin-left: .45rem;
  font-size: .62rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--neg);
}
.legend .dead { margin-left: 0; }
.dash-table td.meter-cell.bad { color: var(--neg); }

/* the field's accuracy distribution — a live dot plot, not a schematic */
.dist-plate { margin: var(--s5) 0 var(--s5); }
.dist { width: 100%; height: auto; }
/* fills and marks only — --accent-bright is never text (§H3) */
.dist .dist-bar { fill: var(--accent-bright); opacity: .42; }
.dist .dist-us { stroke: var(--accent-deep); stroke-width: 2; }
html.dark .dist .dist-us { stroke: var(--accent-deep); }

/* our position in a field we are deliberately not in the top of */
.field-strip {
  display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr);
  gap: var(--s5) clamp(1.5rem, 4vw, 2.75rem); align-items: center;
  background: var(--paper-2);
  border: 1px solid var(--rule-2); border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: var(--s5) clamp(1.25rem, 3vw, 2rem);
  margin: var(--s5) 0 var(--s6);
  box-shadow: var(--shadow-card);
}
.field-figure {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 4vw, 2.75rem); font-weight: 600; line-height: .95;
  letter-spacing: -0.03em; color: var(--ink);
  font-variant-numeric: tabular-nums lining-nums;
  display: flex; align-items: baseline; gap: 0; flex-wrap: wrap;
}
.field-figure .of {
  font-family: var(--font-text); font-size: 0.84rem; font-weight: 500;
  letter-spacing: .01em; color: var(--ink-3); margin-left: .5rem;
}
/* two statements on one plate get a hairline between them, not a gutter */
.field-rank { border-left: 1px solid var(--rule); padding-left: clamp(1.25rem, 3vw, 2.25rem); }
.field-rank .rank-scale { margin-bottom: var(--s3); }
.field-rank .fine { margin: 0; max-width: 62ch; line-height: 1.55; }

/* ── tier 3 · market context, at footnote weight ─────────────────────────── */
.market-strip { border-top: 1px solid var(--rule); }
.market-note { display: block; margin: var(--s3) 0 0; max-width: 64ch; line-height: 1.6; }

/* the ask is the shared `.call` band (style.css) — pulse closes on the identical
   flag/plate/button every other page closes on, so the page foot does not change
   shape as a reader moves between them. No page-level override belongs here. */

/* ── responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 1040px) {
  .epoch { grid-template-columns: 1fr; gap: var(--s5); }
  .epoch-record { max-width: none; }
  .epoch-side { flex-direction: row; flex-wrap: wrap; align-items: stretch; }
  .clock { flex: 1 1 260px; }
  .epoch-explain { flex: 1 1 100%; }
}
@media (max-width: 820px) {
  .field-strip { grid-template-columns: 1fr; gap: var(--s4); }
  .field-rank { border-left: none; border-top: 1px solid var(--rule); padding-left: 0; padding-top: var(--s4); }
}
@media (max-width: 760px) {
  .epoch-side { flex-direction: column; }
  .clock-v { font-size: 1.65rem; }
  /* the frozen provider cell buys back the width it spends on padding, so a
     third column is visible at rest */
  .dash-table th, .dash-table td { padding-left: .6rem; padding-right: .6rem; }
  .dash-table th:first-child, .dash-table td:first-child { padding-left: var(--s3); }
  .dash-table td.meter-cell .meter { left: .6rem; right: .6rem; }
}
@media (max-width: 460px) {
  .lead-2up { grid-template-columns: 1fr; gap: var(--s4); }
  .lead-time { border-left: none; border-top: 1px solid var(--rule); padding-left: 0; padding-top: var(--s4); }
}