/* ── pulse.css — the public counter ───────────────────────────────────────
   Ported from the retired dashboard and retuned to First Light. Panels sit on
   --page-2 in both themes, which is the surface the ramp below was validated
   against.

   ── THE CATEGORICAL RAMP ────────────────────────────────────────────────
   Pulse renders on BOTH surfaces, so every hue has to clear the warm light
   ground AND the cool dark sky. That pins each colour into one narrow
   luminance band — too light and it dissolves on linen, too dark and it
   disappears into the pre-dawn blue.

     --c1  #A27F1E  gold     oklch(.614 .116  87)   L* 55.0
     --c2  #298BEA  blue     oklch(.630 .168 252)   L* 57.0
     --c3  #EF3955  ember    oklch(.630 .216  18)   L* 53.9
     --c4  #8D48F1  violet   oklch(.578 .238 297)   L* 47.8
     --c5  #3B975D  green    oklch(.606 .124 153)   L* 55.9
     --c6  #C06E9E  rose     oklch(.644 .118 345)   L* 56.9

   How they were checked (scripted, WCAG 2.x relative luminance):

   1. Contrast, against all four surfaces a mark can land on — #F5EFE4 and
      #FBF7F0 (light ground and panel), #1C2733 and #16202B (dark sky and
      panel). Worst case across the whole ramp is 3.07:1, so all six clear the
      3:1 floor for non-text marks on every surface, in both themes. Ranges:
      3.07–4.24:1 on light, 3.09–4.31:1 on dark.
   2. Colour-vision separation, as ΔE (CIE76) between every one of the fifteen
      pairs, under normal vision and under simulated protanopia, deuteranopia
      and tritanopia. The worst pair over all four is 16.0 (blue/green under
      tritan); the worst under red-green loss specifically is 16.1
      (blue/violet, deutan) and 16.5 (ember/green, deutan). Nothing collapses.
   3. Lightness carries part of the load, not hue alone: L* spans 47.8–56.9,
      and the two pairs closest in hue family are the furthest apart in L*.
   4. Chroma was then pulled down as far as the ΔE floor of 16 allowed, so the
      ramp sits quietly beside the muted tokens rather than shouting over them.

   Assign in fixed order. c5 reads as rise and c3 as fall, but the arrow and
   the words always say so too — no reading here depends on colour alone.
   NEVER cycle in a seventh hue. If you change any value, re-run the check
   against all four surfaces and all four vision models before shipping.   */

:root {
  --c1: #A27F1E;   /* gold   — the primary series */
  --c2: #298BEA;   /* blue   */
  --c3: #EF3955;   /* ember  */
  --c4: #8D48F1;   /* violet */
  --c5: #3B975D;   /* green  */
  --c6: #C06E9E;   /* rose   */

  --sink: color-mix(in srgb, var(--ink) 7%, transparent);
}

/* ── live strip ─────────────────────────────────────────────────────────── */
.pulse-live {
  display: flex;
  align-items: center;
  gap: var(--s2);
  flex-wrap: wrap;
  padding: var(--s2) var(--s3);
  margin-bottom: var(--s3);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--page-2);
  font-family: var(--font-util);
  font-size: var(--t-xs);
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.pulse-live .live-figs { display: flex; gap: var(--s3); flex-wrap: wrap; }
.pulse-live .live-fig b { color: var(--ink); font-weight: 600; }
.pulse-live .live-l { color: var(--ink-3); margin-left: auto; }

.live-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--rule);
  flex: none;
  box-shadow: 0 0 0 0 var(--glow);
  animation: pulse-beat 2.4s ease-out infinite;
}
@keyframes pulse-beat {
  0%   { box-shadow: 0 0 0 0 var(--glow); }
  70%  { box-shadow: 0 0 0 10px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* ── controls ───────────────────────────────────────────────────────────── */
.pulse-controls {
  display: flex;
  gap: var(--s2);
  flex-wrap: wrap;
  padding-bottom: var(--s3);
}
.seg {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: var(--sink);
  border: 1px solid var(--line);
}
.seg .chip {
  border: 0;
  background: transparent;
  padding: .45em 1em;
  border-radius: 999px;
  font-family: var(--font-util);
  font-size: var(--t-xs);
  letter-spacing: .02em;
  color: var(--ink-2);
  cursor: pointer;
  transition: color .18s var(--ease), background .18s var(--ease);
}
.seg .chip:hover { color: var(--ink); }
.seg .chip.on {
  background: var(--card);
  color: var(--accent);
  box-shadow: var(--sh-1);
}

/* ── stat tiles ─────────────────────────────────────────────────────────── */
.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--s2);
  margin-bottom: var(--s3);
}
.stat {
  padding: var(--s3);
  border-radius: var(--r-md);
  background: var(--page-2);
  border: 1px solid var(--line);
}
.stat.accent { border-color: color-mix(in srgb, var(--rule) 45%, var(--line)); }
.stat .k {
  font-family: var(--font-util);
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0;
}
.stat .v {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 400;
  line-height: 1.15;
  margin: .3em 0 0;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.stat.accent .v { color: var(--accent); }
.stat .d {
  margin: .4em 0 0;
  font-family: var(--font-util);
  font-size: var(--t-xs);
  color: var(--ink-2);
}
.stat .d .arrow { font-weight: 600; }
.stat .d.up   .arrow { color: var(--c5); }
.stat .d.down .arrow { color: var(--c3); }
.stat .d.flat { color: var(--ink-3); }
.stat .spark { margin-top: var(--s2); height: 30px; }

/* ── panels ─────────────────────────────────────────────────────────────── */
.pulse-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: var(--s2);
  margin-bottom: var(--s4);
}
.pulse-grid .panel {
  padding: var(--s3);
  border-radius: var(--r-md);
  background: var(--page-2);
  border: 1px solid var(--line);
  min-width: 0;
}
.pulse-grid .panel.wide { grid-column: 1 / -1; }
.panel-h {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s2);
  flex-wrap: wrap;
  margin-bottom: var(--s3);
}
.panel-h h3 {
  font-family: var(--font-display);
  font-size: var(--t-base);
  font-weight: 550;
  margin: 0;
}
.panel-h .sub {
  font-family: var(--font-util);
  font-size: var(--t-xs);
  color: var(--ink-3);
  margin: 0;
}

.pulse-empty {
  padding: var(--s4) var(--s1);
  text-align: center;
  color: var(--ink-3);
  font-size: var(--t-sm);
  margin: 0;
}

.pulse-down {
  padding: var(--s4);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--page-2);
  color: var(--ink-2);
  max-width: 52ch;
}

.pulse-updated {
  font-family: var(--font-util);
  font-size: var(--t-xs);
  color: var(--ink-3);
  margin: 0 0 var(--s5);
}

/* ── charts ─────────────────────────────────────────────────────────────── */
.viz { display: block; overflow: visible; }
.viz text {
  fill: var(--ink-3);
  font-family: var(--font-util);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}
.viz line { stroke-width: 1; }
.viz [tabindex]:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.viz-tt {
  position: fixed;
  top: 0; left: 0;
  z-index: 80;
  pointer-events: none;
  opacity: 0;
  padding: .5em .7em;
  border-radius: var(--r-sm);
  max-width: 16rem;
  background: var(--card);
  border: 1px solid var(--line-strong);
  box-shadow: var(--sh-2);
  color: var(--ink);
  font-family: var(--font-util);
  font-size: var(--t-xs);
  font-variant-numeric: tabular-nums;
  transition: opacity .12s var(--ease);
}
.viz-tt .tt-k { color: var(--ink-3); margin-bottom: 2px; }

.donut-wrap { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.viz-legend {
  display: flex;
  flex-direction: column;
  gap: .6em;
  font-family: var(--font-util);
  font-size: var(--t-xs);
}
.viz-legend span { display: flex; align-items: center; gap: .6em; color: var(--ink-2); }
.viz-legend .sw { width: 11px; height: 11px; border-radius: 3px; flex: none; }

/* horizontal bars — label, track, value */
.hbar-row {
  display: grid;
  grid-template-columns: minmax(0, 9rem) 1fr auto;
  gap: var(--s2);
  align-items: center;
}
.hbar-label {
  font-family: var(--font-util);
  font-size: var(--t-xs);
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hbar-track {
  height: 9px;
  border-radius: 99px;
  background: var(--sink);
  overflow: hidden;
}
.hbar-fill { height: 100%; border-radius: 99px; transition: width .5s var(--ease); }
.hbar-val {
  font-family: var(--font-util);
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ── taps table ─────────────────────────────────────────────────────────── */
.pulse-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-util);
  font-size: var(--t-xs);
}
.pulse-table th {
  text-align: left;
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink-3);
  padding-bottom: .6em;
  border-bottom: 1px solid var(--line);
}
.pulse-table td {
  padding: .6em 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink-2);
}
.pulse-table tr:last-child td { border-bottom: none; }
.pulse-table td:first-child {
  color: var(--ink);
  max-width: 0;
  width: 60%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pulse-table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--ink);
}
.tap-kind {
  display: inline-block;
  padding: .15em .6em;
  border-radius: 999px;
  background: var(--sink);
  color: var(--ink-3);
  font-size: .68rem;
  letter-spacing: .04em;
  text-transform: lowercase;
}

/* ── feed ───────────────────────────────────────────────────────────────── */
.pfeed { display: flex; flex-direction: column; max-height: 21rem; overflow-y: auto; }
.pfeed-row {
  display: flex;
  align-items: center;
  gap: var(--s1);
  padding: .5em 2px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-util);
  font-size: var(--t-xs);
  min-width: 0;
}
.pfeed-row:last-child { border-bottom: none; }
.pfeed-ev {
  flex: none;
  min-width: 4.5rem;
  text-align: center;
  padding: .15em .6em;
  border-radius: var(--r-sm);
  background: var(--sink);
  color: var(--ink-2);
  font-size: .7rem;
}
.pfeed-ev.page_view     { background: color-mix(in srgb, var(--c1) 18%, transparent); }
.pfeed-ev.session_start { background: color-mix(in srgb, var(--c5) 18%, transparent); }
.pfeed-name {
  flex: 1;
  min-width: 0;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pfeed-meta { flex: none; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.pfeed-row.enter { animation: pfeed-in .5s var(--ease); }
@keyframes pfeed-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

/* ── the opt-out ────────────────────────────────────────────────────────── */
.optout {
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  padding: var(--s4);
  margin: var(--s5) 0 var(--s4);
  background: var(--page-2);
}
.optout__btn {
  font-family: var(--font-util);
  font-size: var(--t-sm);
  letter-spacing: .02em;
  color: var(--ink);
  background: transparent;
  border: var(--stroke) solid var(--rule);
  border-radius: 999px;
  padding: .6em 1.4em;
  cursor: pointer;
  transition: background .2s var(--ease);
}
.optout__btn:hover { background: var(--glow); }
.optout__btn:disabled { border-color: var(--line-strong); color: var(--ink-3); cursor: default; }
.optout__state {
  font-family: var(--font-util);
  font-size: var(--t-xs);
  color: var(--ink-2);
  margin: var(--s2) 0 0;
  max-width: 52ch;
}
tt-optout.is-off .optout__btn { border-color: var(--line-strong); }

/* ── motion ─────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .live-dot { animation: none; }
  .pfeed-row.enter { animation: none; }
  .hbar-fill { transition: none; }
}

@media (max-width: 40rem) {
  .hbar-row { grid-template-columns: minmax(0, 6rem) 1fr auto; gap: var(--s1); }
  .pulse-live .live-l { margin-left: 0; width: 100%; }
  .stat .v { font-size: 1.7rem; }
}