/* AiB Platform — status voice: badges (and the verdict-size badge), chips,
   status dots, priority flags, banners and callouts.
   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: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  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 var(--dur-pulse) ease-in-out infinite; }
/* the verdict size — the one badge a result leads with (.result-head) */
.badge--lg { gap: 9px; padding: 7px 15px; font-size: var(--fs-sm); letter-spacing: 0.07em; }
.badge--lg::before { width: 8px; height: 8px; }

.chip {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  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); }

/* 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--info { color: var(--info); background: var(--info-face); }
.banner--warn { color: var(--warn); background: var(--warn-face); }
.banner--danger { color: var(--danger); background: var(--danger-face); }

/* ---------- status dot ---------- */
/* The state of one row (a queued file, a check) as a dot beside words that
   say the same — the dot is decoration (aria-hidden), the text carries it.
   Bare = queued / off; --live is the only sodium one and it breathes. */
.status-dot {
  display: inline-block;
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--grey-dark);
  vertical-align: 1px;
}
.status-dot--ok { background: var(--ok); }
.status-dot--warn { background: var(--warn); }
.status-dot--danger { background: var(--danger); }
.status-dot--info { background: var(--info); }
.status-dot--live { background: var(--sodium); animation: mark-pulse var(--dur-pulse) ease-in-out infinite; }

/* ---------- callout ---------- */
/* An in-flow message beside the work: a hairline box on paper with a left
   rule in the message's tint. Distinct from .banner (page-level, tinted
   ground). --warn is "could not check", never "invalid" — that is a verdict. */
.callout {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--grey-dark);
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--ink);
  font-size: var(--fs-md);
  line-height: 1.55;
}
.callout > * { margin: 0; }
.callout > * + * { margin-top: var(--space-1); }
.callout-title { font-weight: 500; }
.callout--info { border-left-color: var(--info); }
.callout--warn { border-left-color: var(--warn); }
.callout--danger { border-left-color: var(--danger); }