/* Verdict badge (DESIGN.md §5, signature). The badge never appears without its
   basis sentence, so the two are one flow container and the sentence is never
   styled as optional decoration. */
.verdict { display: flex; align-items: baseline; gap: var(--sp-xs); flex-wrap: wrap; }
.badge {
  display: inline-block; padding: 4px 12px; border-radius: var(--r-pill);
  font-size: 0.8125rem; font-weight: 600; line-height: 1.35; white-space: nowrap;
}
.badge-good { background: var(--verdict-good-tint); color: var(--verdict-good); }
.badge-high { background: var(--verdict-high-tint); color: var(--verdict-high); }
/* Neutral verdicts get no color at all — absence is itself the signal. */
.badge-normal { background: var(--surface); color: var(--muted); }
/* The historical signal (D5.4), in the second voice. Ámbar never carries text
   as a fill (DESIGN.md, Text-on-fill), so this is the hue-toned deep amber on
   the tint — 7.45:1. It lives here and not in chart.css because the badge
   family is one component with one anatomy, whatever surface renders it. */
.badge-hist { background: var(--accent-tint); color: var(--accent-deep); }
.basis { font-size: 0.8125rem; color: var(--muted); }

/* Badge settle: one 200ms fade + 2px rise on load (DESIGN.md §5 Motion). */
@media (prefers-reduced-motion: no-preference) {
  .verdict .badge { animation: settle 200ms var(--ease-out) both; }
  @keyframes settle { from { opacity: 0; transform: translateY(2px); } }
}