/* ══════════════════════════════════════════════════════════════════
   Badge — the general-DS Badge component (design-system/components/badge.html),
   restyled with KDS tokens. SAME class names (.badge · .badge-solid-* ·
   .badge-circle · sizes) so it IS the general component, colours adapted to
   KDS. Plus a circular `.badge-count` counter used by the Header tabs.
   Colours use the light-scale tokens (host page resolves :root = light).
   ══════════════════════════════════════════════════════════════════ */
.badge{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;cursor:default;
       font-family:'Mazzard H',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
       font-weight:500;line-height:1.5}
.badge .b-dot{border-radius:50%;flex-shrink:0}
.badge .b-icon{flex-shrink:0}

/* ── sizes (padding · gap · font · radius) ── */
.badge-sm{padding:4px 6px;gap:3px;font-size:11px;letter-spacing:-.005em;border-radius:5px}
.badge-md{padding:8px 10px;gap:4px;font-size:13px;letter-spacing:-.005em;border-radius:6px}
.badge-circle{border-radius:999px}

/* ── count — circular counter · 20 · 11/700 (Header tabs) ── */
.badge-count{box-sizing:border-box;min-width:20px;height:20px;padding:0 5px;border-radius:999px;
             font-size:11px;line-height:1;font-weight:700}

/* ── solid schemes → KDS tokens ── */
.badge-solid-neutral{background:var(--text-200); color:var(--white-500)}  /* grey #8A95A3 · white */
.badge-solid-error  {background:var(--red-500);  color:var(--white-500)}  /* #FF4747 · white */
.badge-solid-primary{background:var(--blue-500); color:var(--white-500)}  /* #3F8DFD */
.badge-solid-success{background:var(--green-500);color:var(--white-500)}  /* #2CB16D */