/* components/badge.css · THE ONE BADGE
   ---------------------------------------------------------------
   Seven pages each carried their own copy of this block. Same six variants,
   same pill, already one edit away from drifting. This is the component; a
   page links it and defines no .badge of its own. The Tickets page moved
   first (2026-09-03); polish wave 0 (2026-09-06, standard S4) moved the rest
   and deleted the page-local copies.

   A badge is a tint and a word. It carries NO border: a bordered badge is a
   button that cannot be pressed, and the design system has no such thing.
   scripts/check-badge-strokes.mjs fails the build on a stroke.

   THREE EMPHASES, TWO SIZES (S4). The tone tracks a value (ok, warn, info,
   danger) or is muted; the accent tone is for the platform's own state, never
   a client's. On top of the tone:
     primary    (default) a full tint and the tone's ink
     secondary  .badge-secondary  the soft surface and the tone's ink
     tertiary   .badge-tertiary   no fill, the tone's ink, for a count or a quiet tag
     .badge-sm  the small size, for a table cell or a title row

   A STATUS WORD comes through lib/status-vocabulary.js, which emits this
   markup with data-status="<key>"; the guard fails a status literal written
   by hand. */

.badge{
  display:inline-flex;align-items:center;gap:4px;
  padding:3px 10px;border-radius:var(--radius-pill);
  font-family:var(--font-mono);font-size:var(--text-2xs);font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;
  cursor:default;white-space:nowrap;vertical-align:middle;
  border:0;
}
.badge-sm{padding:2px 7px;font-size:var(--text-3xs,var(--text-2xs));gap:3px}

/* tones */
.badge-active,.badge-ok{background:var(--ok-bg);color:var(--ok)}
.badge-warm,.badge-warn{background:var(--warn-bg);color:var(--warn)}
.badge-info,.badge-cold{background:var(--info-bg);color:var(--info)}
.badge-accent,.badge-new{background:var(--accent-bg);color:var(--accent)}
.badge-muted{background:var(--glass-bg);color:var(--text-tertiary)}
.badge-danger,.badge-hot{background:var(--danger-bg);color:var(--danger)}
/* a value the data cannot answer: the muted tone, sentence case, no stroke */
.badge-unknown{background:var(--glass-bg);color:var(--text-tertiary);text-transform:none;letter-spacing:0}
/* a client's own accent, ink by the contrast rule (lib/accent-ink.js sets --cl-accent and --cl-ink) */
.badge-client{background:var(--cl-accent,var(--accent-bg));color:var(--cl-ink,var(--accent))}
/* provider tints, for a rail's own colour where a page shows which system a row came from */
.badge-purple{background:var(--purple-bg);color:var(--color-provider-stripe)}
.badge-cyan{background:color-mix(in srgb,var(--color-provider-whmcs) 15%,transparent);color:var(--color-provider-whmcs)}

/* emphases */
.badge-secondary{background:var(--surface-soft,var(--glass-bg))}
.badge-tertiary{background:transparent;padding-left:0;padding-right:0}