/* ============================================================================
 * Badge / Pill / Tag
 *   .ui-badge        — status chip (live / soon / archive / neutral)
 *   .ui-tag          — soft solid label
 *   .ui-dot          — leading status dot (pulses when .is-live)
 * ========================================================================== */

.ui-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  /* rank: chip */
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  color: var(--text);
  background: var(--chip-neutral-fill);
  white-space: nowrap;
}
/* Status chips take the --chip-* pairs, so the light app's solid fills live in
   tokens.css rather than in a theme override down here: on white the glow-tints
   wash out and the ink has to deepen to clear AA, and that is a token decision.
   The tones with no status take --chip-neutral-fill for the same reason: before #453
   they painted the opaque --surface, the one soft badge fill that sat DARKER than the
   panel in dark. why: docs/foundations.md#elevation
   Soon takes body ink here, not --accent: accent ink measured 4.04:1 on a dark floating
   panel under three of the four accents, body ink 9.74:1. See docs/foundations.md. */
.ui-badge--live { color: var(--chip-success-ink); background: var(--chip-success-fill); }
.ui-badge--soon { color: var(--text); background: var(--chip-neutral-fill); }
.ui-badge--info { color: var(--chip-info-ink); background: var(--chip-info-fill); }
.ui-badge--warn { color: var(--chip-warn-ink); background: var(--chip-warn-fill); }
.ui-badge--danger { color: var(--chip-danger-ink); background: var(--chip-danger-fill); }
.ui-badge--archive { /* muted-ink: state — archived record */ color: var(--muted); background: var(--chip-neutral-fill); }

/* Semantic status variants — for record/row status in data tables
   (paid / verified / pending / failed …). Same chip, mapped to meaning. */
.ui-badge--success { color: var(--chip-success-ink); background: var(--chip-success-fill); }
.ui-badge--pending { color: var(--chip-warn-ink); background: var(--chip-warn-fill); }
.ui-badge--neutral { color: var(--text); background: var(--chip-neutral-fill); }

/* Pill: same shape, sentence case, a touch larger — a metadata chip */
.ui-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  /* rank: chip */
  font-size: var(--text-xs);
  color: var(--text);
  background: var(--chip-neutral-fill);
  border-radius: var(--radius-pill);
  padding: 4px 11px;
  font-weight: var(--weight-semibold);
}
/* The live pill is the same status paint as the live badge, so it takes the
   same pair. On its own it was --green on --glow-green, which is 3.97:1 over
   white — under AA, while the badge beside it cleared at 4.64:1. See issue #131. */
.ui-pill--live { color: var(--chip-success-ink); background: var(--chip-success-fill); }
.ui-pill--soon { color: var(--text); background: var(--chip-neutral-fill); }

/* Status dot */
.ui-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--muted);
  flex: none;
  display: inline-block;
}
.ui-dot.is-live {
  background: var(--green);
  box-shadow: 0 0 0 0 var(--glow-green);
  animation: ui-pulse 2s var(--ease) infinite; /* motion: ambient — a liveness heartbeat, not a response to anything the reader did */
}
@keyframes ui-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--green) 55%, transparent); }
  70% { box-shadow: 0 0 0 7px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}