/* ========================================================================================
 * pill.css - .pill badge/tag (L2 layer).
 * Ported from the inline pill-shaped tags used throughout both design source templates
 * (course session tags, symptom tags: search "border-radius:var(--cd-r-pill)" for the
 * repeated inline pattern this generalizes).
 * ======================================================================================== */

.pill{
	display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
	padding:6px 16px;border:1px solid var(--cd-line-strong);border-radius:var(--cd-r-pill);
	font-family:var(--cd-font);font-weight:600;font-size:var(--cd-small);color:var(--cd-ink-strong);
	background:transparent;
}
.pill--accent{
	background:var(--cd-accent);color:var(--cd-accent-ink);border-color:var(--cd-accent);
	font-weight:700;
}
.pill--outline{background:transparent;border-color:var(--cd-line)}
/* Small tags: topic lists under running copy (Pediatric OSA's course topics). */
.pill--sm{gap:4px;padding:3px 10px;font-size:var(--cd-eyebrow)}
/* A wrapping row of pills (blog category filter, topic tags): tighter than .btn-row. */
.pill-row{display:flex;flex-wrap:wrap;gap:var(--cd-2);margin-top:var(--cd-2)}
/* On a dark band or panel (.on-dark): light text and a translucent light outline. */
.on-dark .pill:not(.pill--accent){color:var(--cd-white);border-color:color-mix(in srgb,var(--cd-white) 40%,transparent)}