/* ---- Category badges — single source of truth ----
   Loaded by the site (Layout.astro) and by the feed's stylesheet (rss.xsl).
   Both consume this file rather than each keeping a copy, so a category can
   never end up purple in one place and grey in the other.

   Adding a category is one rule. An undefined one falls back to the metadata
   grey rather than rendering colourless or broken. */

.tag {
  display: inline-block;
  padding: 4px 9px 3px;
  border-radius: 3px;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.4;
  white-space: nowrap;
  color: var(--tag, #7d8283);
  border: 1px solid color-mix(in srgb, var(--tag, #7d8283) 40%, transparent);
  background: color-mix(in srgb, var(--tag, #7d8283) 12%, transparent);
}

.tag[data-tag="hardware"] {
  --tag: #a97bff;
}

.tag[data-tag="networking"] {
  --tag: #5cc8cc;
}

.tag[data-tag="field-notes"] {
  --tag: #d8b45c;
}

/* Pink rather than green: green is the site's accent, and a category badge
   that matches it stops reading as a category. */
.tag[data-tag="software"] {
  --tag: #ff7ba8;
}