/*
 * The primitives that carry a measurement. Written against the semantic aliases ONLY, so each is
 * correct on the page and inside a .panel without a second rule.
 *
 * The full set (divergence chip, staleness clock, source tag, session timeline, confidence band,
 * ticker row) is built out at M7, alongside the data that fills them. What is here now is what the
 * skeleton pages actually render: the type roles, the null value, and the state chip.
 */

/* ------------------------------------------------------------------------------ Type roles --- */
.datum {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 15px;
  letter-spacing: -0.01em;
  color: var(--fg);
}
.datum--lg { font-size: 24px; }
.datum--xl { font-size: 34px; }

.label {
  font: 500 10px/1.2 var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-3);
}

/* ------------------------------------------------------------------------------ Null value --- */
/*
 * AN UNAVAILABLE VALUE IS AN EM DASH. Never 0, never a last-known reading, never "n/a".
 *
 * This is the product's first rule rendered as one class, and it is the ONLY place an em dash is
 * allowed to enter a view: spec/copy/null_glyph_spec.rb asserts every other occurrence is a lint
 * failure, which is what stops "no em dashes in prose" and "an unavailable value is an em dash"
 * from being a contradiction someone resolves by deleting a spec.
 *
 * The title attribute carries the reason. A dash a reader cannot interrogate is only marginally
 * better than a zero.
 */
.nil {
  font-family: var(--font-mono);
  color: var(--fg-3);
  cursor: help;
}

/* --------------------------------------------------------------------------- State chip --- */
/*
 * Colour is never the only signal. Every state ships three independent channels: the WORD (which
 * survives greyscale, a screen reader and a grep), the MARK SHAPE, and the hue. Two of the three
 * survive a monochrome print. The words and shapes come from app/models/feed_state.rb so the chip,
 * the row class, the aria-label, the CSV and the alert email cannot drift apart.
 */
.state {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 3px 7px;
  border: var(--hair) solid var(--fg-5);
  font: 500 10px/1.2 var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-3);
}

.state__mark {
  width: 7px;
  height: 7px;
  border: var(--hair) solid currentColor;
}

.state--fresh    { border-color: var(--live);   color: var(--live-ink); }
.state--fresh    .state__mark { background: none; }
.state--stalling { border-color: var(--frozen); color: var(--frozen-ink); }
.state--stalling .state__mark { background: linear-gradient(90deg, currentColor 50%, transparent 50%); }
.state--stale    { border-color: var(--frozen); color: var(--frozen-ink); }
.state--stale    .state__mark { background: currentColor; }
.state--paused   { border-color: var(--breach); color: var(--breach-ink); }
.state--paused   .state__mark { background: linear-gradient(0deg, currentColor 40%, transparent 40% 60%, currentColor 60%); }
.state--degraded { border-color: var(--breach); color: var(--breach-ink); }
.state--degraded .state__mark { background: none; border-style: dashed; }
.state--pending  { border-color: var(--fg-5);   color: var(--fg-3); }
.state--pending  .state__mark { background: none; border-style: dotted; }

/* ------------------------------------------------------------------------------- Data rows --- */
.rows { width: 100%; border-collapse: collapse; }
.rows th, .rows td {
  padding: 0 var(--s3);
  height: var(--row-h);
  text-align: left;
  border-top: var(--hair) solid var(--rule);
  vertical-align: middle;
}
.rows th { font: 500 10px/1.2 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-3); }
.rows td { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 14px; color: var(--fg-2); }
.rows__num { text-align: right; }
.rows__primary { color: var(--fg); font-weight: 500; }

/* ------------------------------------------------------------------------------ As-of line --- */
/*
 * P5, screenshot-durability. Every data region states its own ticker, window and timestamp inside
 * its own footprint, so a crop pasted into a forum thread still reads correctly a week later.
 */
.as-of {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s4);
  margin-top: var(--s3);
  font: 500 10px/1.4 var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-3);
}

/* ------------------------------------------------------------------------ Divergence chip --- */
/*
 * Bands at 0 / ±50 / ±150 / threshold.
 *
 * A TINT OF THE SIGNAL HUE WITH THE SAME HUE DARKENED ON TOP — not an outlined box. This is the
 * design's own pattern and it is better than the outline I built first for a reason worth keeping:
 * the tint carries the state at a glance across a column of thirteen rows, while the darkened ink
 * stays legible on the light ground without needing a separate colour. An outline does neither
 * well — at 13px it reads as a border, not a state.
 *
 * The breach tier is THE ONLY FILLED CHIP IN THE SYSTEM. A spec counts them, because the moment a
 * second thing is filled, "filled" stops meaning "this one is past the line".
 */
.dvg {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3em;
  padding: 6px 9px;
  font: 500 13px/1 var(--font-mono);
  font-variant-numeric: tabular-nums;
  background: color-mix(in oklch, var(--fg-4) 12%, transparent);
  color: var(--neutral-ink);
}

.dvg__sign { font-weight: 600; }
.dvg__u { font-size: 9px; letter-spacing: 0.12em; opacity: 0.72; }

/* t0 is the no-state tier: a divergence inside ±50 bps is not news, and the chip should not
   pretend otherwise. It keeps the neutral grey tint. */
.dvg--t1 {
  background: color-mix(in oklch, var(--inband) 16%, transparent);
  color: var(--inband-ink);
}
.dvg--t2 {
  background: color-mix(in oklch, var(--frozen) 24%, transparent);
  color: var(--frozen-ink);
}
.dvg--t3 {
  background: var(--breach);
  color: var(--on-signal);
  font-weight: 600;
}

/* --------------------------------------------------------------------- Staleness clock --- */
/*
 * A 6px square swatch, the ticking figure, and a word. Three channels again, and the swatch is the
 * one that survives a greyscale print at this size — a 6px square either has a fill or it does not.
 *
 * The word is not the state name. It is what the state MEANS: "HEARTBEAT OK" rather than "FRESH",
 * "FEED FROZEN" rather than "STALE". A reader who has never used this site should not have to learn
 * a vocabulary to read the most important number on the page.
 */
.clock {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.clock__mark {
  width: 6px;
  height: 6px;
  flex: none;
  background: var(--fg-5);
}

.clock__t { font: 500 14px/1 var(--font-mono); color: var(--fg); }
.clock__g { font: 400 11px/1 var(--font-mono); letter-spacing: 0.06em; color: var(--fg-4); }

.clock--fresh    .clock__mark { background: var(--inband); }
.clock--stalling .clock__mark { background: var(--frozen); }
.clock--stalling .clock__g    { color: var(--frozen-ink); }
.clock--stale    .clock__mark { background: var(--frozen); }
.clock--stale    .clock__g    { color: var(--frozen-ink); }
.clock--paused   .clock__mark { background: var(--breach); }
.clock--paused   .clock__g    { color: var(--breach-ink); }
.clock--degraded .clock__mark { background: var(--breach); }
.clock--degraded .clock__g    { color: var(--breach-ink); }
.clock--pending  .clock__mark { background: var(--fg-5); }

/* ---------------------------------------------------------------------------- Source tag --- */
/*
 * P2, in CSS. Only what WE derived carries the accent outline. Nothing we merely read is dressed up
 * as something we computed, and nothing we computed is dressed down as something we read.
 */
.src {
  display: inline-block;
  padding: 3px 5px;
  border: var(--hair) solid var(--fg-5);
  color: var(--fg-3);
}

.src--stalewatch {
  border-color: var(--accent);
  color: var(--accent-ink);
  background: color-mix(in oklch, var(--accent) 8%, transparent);
}