/* AiB Platform — status voice: badges, chips, priority flags and banners.
   Semantic tints only (ok / warn / info / danger, each with a -face ground);
   sodium appears solely as the LIVE dot, per the site discipline. */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 11px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge--ok { color: var(--ok); background: var(--ok-face); }
.badge--warn { color: var(--warn); background: var(--warn-face); }
.badge--info { color: var(--info); background: var(--info-face); }
.badge--danger { color: var(--danger); background: var(--danger-face); }
.badge--muted { color: var(--grey); background: var(--paper); }
.badge--live { color: var(--ink); background: var(--paper); }
.badge--live::before { background: var(--sodium); animation: mark-pulse 3.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .badge--live::before { animation: none; } }

.chip {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.chip--outline { border: 1px solid var(--hairline-strong); color: var(--grey); }

/* priority flags */
.flag { font-size: 12px; }
.flag--high { color: var(--danger); }
.flag--normal { color: var(--info); }
.flag--low { color: var(--grey-dark); }

/* page-level notices (renewal, dunning) */
.banner {
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  margin-bottom: 18px;
  font-size: 13.5px;
  line-height: 1.5;
}
.banner--warn { color: var(--warn); background: var(--warn-face); }
.banner--danger { color: var(--danger); background: var(--danger-face); }