/* =====================================================================
   Vatar · components/led.css · v1.4.0 (20 Oct 2026)
   LED dot-matrix numerals and caps, drawn by components/led.js from
   components/led-matrix-glyphs.json (Terminal B's glyph set, byte-identical
   copy of brand/assets/_illustrations/led-matrix-glyphs.json).
   Spec: design-system.md §17. Load after tokens.css. Tokens only.

   USAGE
     <span class="led" data-led-font="bold11">12.4M+</span>          ← hero numeral (0–9 . , + - % K M B X)
     <span class="led led--sm" data-led-font="small7">PLAYERS</span>  ← caps line (A–Z 0–9 . , ! ? + - : / %)
     <div class="led-panel">…one or more .led lines…</div>             ← optional black LED board
     <script src="…/components/led.js" defer></script>
     options: data-led-grid="off" hides the unlit dots · --led-size sets the glyph height (default 1em)
   The element keeps its text as its accessible name (role="img" + aria-label), so facts stay readable.
   RULES: stats, loading, counters, email strip 2b. Artwork, not a font: never the logo, never body copy.
   No glow filter. Lit dots are lilac (accent), never amber.
   ===================================================================== */

.led {
  --led-size: 1em;                                /* height of the glyph rows */
  --led-on: var(--color-text-accent);              /* lilac-200 dark · lilac-700 light */
  --led-off: var(--color-border-subtle);           /* unlit dots, barely there */
  display: inline-block;
  vertical-align: baseline;
  line-height: 1;
  color: var(--led-on);
}
.led { max-width: 100%; }
.led svg { display: block; height: var(--led-size); width: auto; max-width: 100%; overflow: visible; }   /* shrinks to fit narrow containers */
.led .led__on { fill: var(--led-on); }
.led .led__off { fill: var(--led-off); }
.led--sm { --led-size: 0.5em; }
.led--stat { --led-size: var(--font-size-fluid-stat); }
/* before led.js runs (or without JS) the text shows as tabular figures */
.led:not([data-led-ready]) { font-family: var(--font-family-display); font-weight: var(--font-weight-extrabold); font-feature-settings: var(--font-feature-tabular); }

/* the black LED board: always dark, in both themes */
.led-panel {
  --led-on: var(--color-brand-lilac);
  --led-off: var(--color-alpha-white-8);
  display: inline-grid; gap: var(--space-2); justify-items: center;
  padding: var(--space-4) var(--space-5);
  background: var(--color-brand-black);
  border: var(--border-width-hairline) solid var(--color-alpha-white-10);
  border-radius: var(--radius-sm);
}
.led-panel .led { --led-on: var(--color-brand-lilac); --led-off: var(--color-alpha-white-8); }

@media (forced-colors: active) {
  .led .led__on { fill: CanvasText; }
  .led .led__off { fill: none; }
}