.badge {
  align-items: center;
  border-radius: 1em;
  display: inline-flex;
  flex-shrink: 0;
  font-size: 0.7rem;
  font-weight: 500;
  padding: 0.2em 0.7em;
  white-space: nowrap;
}

.badge--marker {
  background-color: var(--color-subtle);
  color: var(--color-ink);
}

.badge--link {
  background-color: oklch(var(--lch-blue) / 0.2);
  color: var(--color-link);
}

.badge--draft {
  background-color: var(--color-subtle);
  color: var(--color-subtle-dark);
}

/* Resource-type badges (roadmap.sh-style): one fixed hue per kind, tinted fill
   + matching text. The only place category colours are allowed (see CLAUDE.md).
   Norm = red (official standard, stands apart from blue links); Book = teal. */
.badge--norm {
  background-color: oklch(var(--lch-red) / 0.18);
  color: oklch(var(--lch-red));
}

.badge--book {
  background-color: oklch(var(--lch-teal) / 0.18);
  color: oklch(var(--lch-teal));
}

.badge--video {
  background-color: oklch(var(--lch-purple) / 0.2);
  color: oklch(var(--lch-purple));
}

.badge--article {
  background-color: oklch(var(--lch-yellow) / 0.18);
  color: oklch(var(--lch-yellow));
}

.badge--tool {
  background-color: oklch(var(--lch-green) / 0.18);
  color: oklch(var(--lch-green));
}

.badge--doc {
  background-color: oklch(var(--lch-cyan) / 0.18);
  color: oklch(var(--lch-cyan));
}

.badge--course {
  background-color: oklch(var(--lch-orange) / 0.18);
  color: oklch(var(--lch-orange));
}

.badge--software {
  background-color: oklch(var(--lch-pink) / 0.18);
  color: oklch(var(--lch-pink));
}

/* Marker axis (orthogonal to type): a small, muted outline pill — language now,
   partner later. Deliberately monochrome so it reads as a marker, not a type. */
.badge--lang {
  background-color: transparent;
  border: 1px solid var(--color-subtle);
  color: var(--color-subtle-dark);
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  padding: 0.1em 0.5em;
}

/* Roadmap status badges; "not_now" reuses .badge--draft (muted gray). */
.badge--done {
  background-color: oklch(var(--lch-green) / 0.18);
  color: oklch(var(--lch-green));
}

.badge--progress {
  background-color: oklch(var(--lch-blue) / 0.2);
  color: var(--color-link);
}

.badge--planned {
  background-color: var(--color-subtle);
  color: var(--color-ink);
}

.badge--future {
  background-color: oklch(var(--lch-purple) / 0.2);
  color: oklch(var(--lch-purple));
}