/* =============================================================================
   rhq_status.css — ResponderHQ unified status badge (Phase 1 / P1.2)
   -----------------------------------------------------------------------------
   The ONE status-chip system. Five semantic statuses, each driven by the
   --rhq-status-* token family (rhq_tokens.css, P1.1):

       ok · info · warning · critical · neutral

   Phase 1 / PR P1.2 — ADDITIVE ONLY.
     * Every selector is namespaced under `.rhq-badge*` (verified unused anywhere
       in the app today), so loading this sheet changes ZERO rendered pixels on
       existing pages. No page consumes it yet (migration is Phase 5).
     * SOFT badges only: soft background + AA `-ink` text + icon slot. The soft/ink
       pairs are the AA-safe combination. Solid filled badges are deferred — white
       on the solid ok/critical/neutral hues fails AA and needs per-status text
       colours (Phase 5).
     * Status colour is for STATUS ONLY (design principle 3). Informational tags
       (competency/role/region) should use `--rhq-status-neutral`/outline, never a
       severity colour. Severity is NEVER colour-only — always icon + label.

   Backend-state → status mapping (incl. Decision 1: deployment states are `info`,
   not warning/critical) is documented in and enforced by:
       fire_bar/services/status_display.py
       docs/ui-audit/04-implementation-plan/p1-2-status-mapping.md
   ============================================================================= */

.rhq-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.1875rem 0.5rem;
  border: 1px solid transparent;
  border-radius: var(--rhq-radius-pill);
  font-family: var(--rhq-font);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.1;
  white-space: nowrap;
  vertical-align: baseline;
}

/* Icon slot — sized to the text; the icon reinforces severity (never colour-only). */
.rhq-badge__icon {
  display: inline-flex;
  flex: none;
  width: 0.875em;
  height: 0.875em;
}
.rhq-badge__icon > svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* The five statuses — soft background + AA text-on-soft, from the tokens. */
.rhq-badge--ok       { background: var(--rhq-status-ok-soft);       color: var(--rhq-status-ok-ink); }
.rhq-badge--info     { background: var(--rhq-status-info-soft);     color: var(--rhq-status-info-ink); }
.rhq-badge--warning  { background: var(--rhq-status-warning-soft);  color: var(--rhq-status-warning-ink); }
.rhq-badge--critical { background: var(--rhq-status-critical-soft); color: var(--rhq-status-critical-ink); }
.rhq-badge--neutral  { background: var(--rhq-status-neutral-soft);  color: var(--rhq-status-neutral-ink); }