/*
 * 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 WAS WRITTEN EVERYWHERE AND APPLIED NOWHERE ────────────────────────────────────
 *
 * It was `.rows__num { text-align: right; }`, one specificity point below the `.rows th, .rows td`
 * rule directly above it, which sets `text-align: left`. Class-plus-element beats class, so the
 * base rule won and EVERY numeric column in the app has been left aligned since the tables were
 * built — while every view dutifully wrote the class on every numeric cell.
 *
 * The same failure mode as the undeclared `.visually-hidden` documented in 10-base.css: the markup
 * is right, the rule is a no-op, nothing throws, and the page just looks slightly wrong forever. It
 * matters more here than it sounds, because the whole reason these columns are mono and
 * tabular-nums is so a reader can compare magnitudes down a column by where the digits fall — and
 * ragged-right figures defeat that completely.
 *
 * Qualified to out-specify the base rule rather than moved above it, because moving it would only
 * work until somebody sorted the file.
 */
.rows th.rows__num,
.rows td.rows__num { text-align: right; }
/*
 * ── A ROW HEADER IS NOT A COLUMN HEADER ─────────────────────────────────────────────────────────
 *
 * `.rows th` above sets the COLUMN-LABEL treatment: 10px mono, 0.14em tracking, uppercase. The
 * ticker cell is `<th scope="row">`, which is correct markup and also a `th`, so every ticker in
 * the app was rendered as a column label — small, letterspaced, and UPPERCASED.
 *
 * The uppercase is the part that matters. The catalog says AAPLc, TSLAc, NVDAc: the trailing `c`
 * is lowercase because that is how Coinbase writes the token, and this site is quoting somebody
 * else's identifier rather than styling its own. `text-transform` rewrote it to AAPLC on every
 * surface while the HTML underneath said AAPLc all along, so nothing that read the markup — a
 * copy-paste, a screen reader, a scraper — ever saw what the screen showed.
 *
 * Qualified with the element so it out-specifies `.rows th` rather than depending on file order.
 */
.rows th.rows__primary,
.rows td.rows__primary {
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
}

.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;
}

/* --------------------------------------------------------------------- Last update --- */
/*
 * A 6px square swatch and "16h ago". Two channels, 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.
 *
 * ── WHAT WAS REMOVED, AND WHY ────────────────────────────────────────────────────────────────
 *
 * There was a third element: `.clock__g`, the state's MEANING, rendered under the figure. HEARTBEAT
 * OK, SLOWING, FEED FROZEN. The argument for it was that a reader should not have to learn a
 * vocabulary to read the most important number on the page, which is right — and the word was the
 * vocabulary. "16h ago" needs no gloss. A word under it saying FEED FROZEN is a second name for the
 * same fact, in a register nobody uses, taking the width of another column to say it.
 *
 * The figure itself was a ticking elapsed clock, 16:04:12, repainted every second. Same problem
 * from the other side: a colon clock has to be parsed before it is an age.
 *
 * The state still reaches the reader through the swatch, which is what makes a frozen row findable
 * at a glance, and through the accessible label the helper renders beside it.
 */
.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--fresh    .clock__mark { background: var(--inband); }
.clock--stalling .clock__mark { background: var(--frozen); }
.clock--stalling .clock__t    { color: var(--frozen-ink); }
.clock--stale    .clock__mark { background: var(--frozen); }
.clock--stale    .clock__t    { color: var(--frozen-ink); }
.clock--paused   .clock__mark { background: var(--breach); }
.clock--paused   .clock__t    { color: var(--breach-ink); }
.clock--degraded .clock__mark { background: var(--breach); }
.clock--degraded .clock__t    { 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);
}