/* ════════════════════════════════════════════════════════════════════════
   NAVIRA Unified Brand Status chip — shared stylesheet.
   Include after /tokens.css (it consumes tokens.css custom properties):
     <link rel="stylesheet" href="/brand-status-chip.css">
   Pair with /js/brand-status-chip.js (renderStatusChip). The markup +
   classes here are produced by that module; keep the two in lockstep.

   The point: a brand's status looks IDENTICAL on the Review Queue, the
   Dashboard, and the Enrichment page (design §7) — one chip, one palette.

   This file mirrors the CHIP_CSS string exported by /js/brand-status-chip.js
   verbatim so a page can use EITHER this <link> OR the injected string.
   Colors are ONLY tokens.css variables, so light/dark re-themes for free.
   ════════════════════════════════════════════════════════════════════════ */
.nv-bschip {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .72rem; font-weight: 700; line-height: 1;
  padding: .18rem .5rem; border-radius: 1rem;
  white-space: nowrap; vertical-align: middle;
  /* per-tone color, defaulted to a quiet grey; each data-tone overrides --bschip-c */
  --bschip-c: var(--muted-2);
  color: var(--bschip-c);
  background: color-mix(in srgb, var(--bschip-c) 16%, transparent);
}
.nv-bschip-dot {
  width: .45rem; height: .45rem; border-radius: 50%;
  background: var(--bschip-c); flex: 0 0 auto;
}
.nv-bschip-label { line-height: 1; }

/* tone → token color. ONLY tokens.css vars, so dark + light both work for free. */
.nv-bschip[data-tone="positive"] { --bschip-c: var(--accent); }
.nv-bschip[data-tone="danger"]   { --bschip-c: var(--hot); }
.nv-bschip[data-tone="warning"]  { --bschip-c: var(--warm); }
.nv-bschip[data-tone="wait"]     { --bschip-c: var(--warm); }
.nv-bschip[data-tone="info"]     { --bschip-c: var(--cold); }
.nv-bschip[data-tone="muted"]    { --bschip-c: var(--muted-2); }
.nv-bschip[data-tone="neutral"]  { --bschip-c: var(--muted-2); }

/* 'enriching' is in-flight work — gently pulse the dot so "waiting" reads at a
   glance (matches the Dashboard's pulsing enrich state the design references).
   Honour reduced-motion: the color already conveys the state without movement. */
@media (prefers-reduced-motion: no-preference) {
  .nv-bschip[data-tone="wait"] .nv-bschip-dot { animation: nvBschipPulse 1.6s ease-in-out infinite; }
}
@keyframes nvBschipPulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

/* Drill-in link wrapper: the chip stays the visual; the link just adds affordance. */
.nv-bschip-link { text-decoration: none; display: inline-flex; }
.nv-bschip-link:hover .nv-bschip,
.nv-bschip-link:focus-visible .nv-bschip { outline: 2px solid var(--bschip-c); outline-offset: 1px; }
.nv-bschip-link:focus-visible { outline: none; }

/* Secondary badge row (Review Queue only). Email-grade pills reuse tokens.css
   .nv-contact.*; the recovery + invalid pills get a tone-tinted treatment here. */
.nv-bsbadges { display: inline-flex; align-items: center; gap: .25rem; margin-left: .35rem; vertical-align: middle; }
.nv-bsbadge {
  display: inline-block; font-size: .64rem; font-weight: 700;
  padding: .06rem .38rem; border-radius: 1rem; line-height: 1.2;
  --bsbadge-c: var(--muted-2);
  color: var(--bsbadge-c);
  background: color-mix(in srgb, var(--bsbadge-c) 16%, transparent);
}
.nv-bsbadge--danger,
.nv-bsbadge--bad     { --bsbadge-c: var(--hot); }
.nv-bsbadge--warning,
.nv-bsbadge--wait    { --bsbadge-c: var(--warm); }
.nv-bsbadge--positive { --bsbadge-c: var(--accent); }
.nv-bsbadge--info     { --bsbadge-c: var(--cold); }
.nv-bsbadge--muted,
.nv-bsbadge--neutral  { --bsbadge-c: var(--muted-2); }