/* ── Pill badge base ────────────────────────────────────── */
.badge {
  display:          inline-block;
  width:            fit-content;
  padding:          0.05em 0.28em;
  border-radius:    1em;
  font-size:        0.33em;
  font-weight:      600;
  letter-spacing:   0.04em;
  text-transform:   uppercase;
  line-height:      1.7;
  white-space:      nowrap;
  background-color: transparent;
  margin-left:      0;
  vertical-align:   middle;
}

/* ── Light mode ──────────────────────────────────────────── */
[data-md-color-scheme="default"] .badge {
  background-color: #ffffff;
}

/* ── Dark mode ───────────────────────────────────────────── */
[data-md-color-scheme="slate"] .badge {
  background-color: transparent;
}

/* ── Badge below heading ─────────────────────────────────── */
h1 .badge,
h2 .badge,
h3 .badge,
h4 .badge {
  display:     block;
  width:       fit-content;
  margin-top:  0.5em;
  padding-top: 0.08em;
}

/* ── Hide permalink anchor when badge is present ─────────── */
h1:has(.badge) .headerlink,
h2:has(.badge) .headerlink,
h3:has(.badge) .headerlink,
h4:has(.badge) .headerlink {
  display: none;
}

/* ── Remove heading bottom margin when badge is present ───── */
h1:has(.badge),
h2:has(.badge),
h3:has(.badge),
h4:has(.badge) {
  margin-bottom: 0;
  padding-bottom: 0;
}

/* ── Tighten gap between heading and following element ────── */
h1:has(.badge) + *,
h2:has(.badge) + *,
h3:has(.badge) + *,
h4:has(.badge) + * {
  margin-top: 0.5em;
}

/* ── Deprecated — burnt orange ───────────────────────────── */
.badge-deprecated {
  border: 1.5px solid #d4711e;
  color:  #d4711e;
}

/* ── Experimental — amber ────────────────────────────────── */
.badge-experimental {
  border: 1.5px solid #f0a500;
  color:  #f0a500;
}

/* ── Preview — indigo ────────────────────────────────────── */
.badge-preview {
  border: 1.5px solid #3d5afe;
  color:  #3d5afe;
}

/* ── Beta — teal ─────────────────────────────────────────── */
.badge-beta {
  border: 1.5px solid #00897b;
  color:  #00897b;
}

/* ── New — green ─────────────────────────────────────────── */
.badge-new {
  border: 1.5px solid #2e7d32;
  color:  #2e7d32;
}