/* ============================================================
   CFE Design System — Pills
   ----------------------------------------------------------------
   Extends .cfe-badge (defined in cfe-styles.css) with:
     - --sm size modifier (10px, dense rows only)
     - __dot prefix (status-only, no icon)
     - .cfe-badge-group flex container (+ --breathe)
     - SVG icon sizing

   Design canon: PILLS.md v2 (handoff) / CFE-Design.md on SG.

   Scope: body.cfe-redesign only. Tokens: --cfe-ds-* + literals
   where the 4-step --cfe-ds-space scale doesn't fit (2px, 5px, 6px, 9px).
   ============================================================ */


/* ---------- Base extensions to .cfe-badge ----------
   cfe-styles.css defines the foundation; we add gap + line-height
   so icon/dot children space correctly. No visual effect on
   text-only badges already shipping. */
body.cfe-redesign .cfe-badge {
  gap: 6px;
  line-height: 1.4;
}
body.cfe-redesign .cfe-badge > svg {
  width: 11px;
  height: 11px;
  flex: 0 0 auto;
  stroke-width: 2;
}


/* ---------- Size modifier: --sm (10px, dense rows only) ----------
   Transcript tables, order line items, summary chips. Never in
   marketing, hero, or modal-eyebrow contexts. No --lg ramp. */
body.cfe-redesign .cfe-badge--sm {
  font-size: 10px;
  letter-spacing: 0.06em;
  padding: 2px 9px;
  gap: 5px;
}
body.cfe-redesign .cfe-badge--sm > svg {
  width: 10px;
  height: 10px;
}


/* ---------- Dot prefix (status-only) ----------
   6px filled circle as a quieter alternative to an icon. Inherits
   the badge variant's text color via currentColor. Never combine
   with an icon in the same badge. */
body.cfe-redesign .cfe-badge__dot {
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background: currentColor;
  flex: 0 0 auto;
}
body.cfe-redesign .cfe-badge--sm .cfe-badge__dot {
  width: 5px;
  height: 5px;
}


/* ---------- Group container ----------
   When 2-3 badges sit together (partner + credits + status on a
   course card). 6px gap both axes by default. Never below 6px. */
body.cfe-redesign .cfe-badge-group {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

/* --breathe: bump row-gap to 8px for wrapped groups that read
   cramped vertically. Column-gap stays 6px. */
body.cfe-redesign .cfe-badge-group--breathe {
  row-gap: 8px;
  column-gap: 6px;
}