/* ==========================================================================
   CHIPS — pill tags for a list of capabilities / topics   (visual only)
   ==========================================================================
   A wrapping row of outlined pills. Neutral by default; on a dark band the
   border/label lighten automatically.

   Build: a `<div class="chips">` with `<span class="chip">…</span>` children,
   placed inside a rich-text `text` element (e.g. the media-split content half).
   ========================================================================== */
.chips {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(8px, 1vw, 14px);
    margin: clamp(1rem, 2vw, 1.75rem) 0;
}
.chip {
    display: inline-flex;
    align-items: center;
    padding: 12px 24px;
    border-radius: 999px;
    border: 1px solid var(--hairline);
    background: transparent;
    font-family: var(--type-body);
    font-weight: 600;
    font-size: 0.9375rem;
    line-height: 1;
    color: var(--heading);
}

/* On any dark band: subtle white fill + light border + muted label. */
.bg-ink .chip,
.bg-dark .chip,
.bg-prime .chip {
    background: rgb(255 255 255 / 0.08);
    border-color: rgba(255, 255, 255, 0.28);
    color: var(--text-on-dark-dim);
}

/* ---- Muted variant (light capability list) ----------------------------- */
/* A quieter, denser pill for a long capability list on a light band: white
   fill, hairline border, grey body label, a touch smaller (Plan Administration
   "a lot goes on…"). */
.chips--muted { gap: clamp(7px, 0.9vw, 12px); }
.chips--muted .chip {
    background: var(--white);
    border-color: var(--hairline);
    color: var(--text-body);
    font-weight: 500;
    font-size: 0.875rem;          /* 14px */
    padding: 9px 18px;
}