/* Tag / pill — auto-loaded for the tag snippet (site/snippets/ui/tag.php).
   Figma: topic chips — a fully-rounded pill with a soft inset ("pressed")
   shadow, no border, sitting on the page background. */

.tag {
  display: inline-block;
  /* Optical centring, as in a chip (ui/chip): the text moves down by half of
     --optical-shift, traded from the bottom padding to the top. */
  padding:
    calc(var(--space-2xs) + var(--optical-shift) / 2) var(--space-s)
    calc(var(--space-2xs) - var(--optical-shift) / 2);
  font-size: var(--fs-meta);
  line-height: 1;
  background: var(--color-bar);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-inset);
}
a.tag:hover {
  text-decoration: none;
  box-shadow: inset 1px 1px 4px 2px rgb(0 0 0 / 0.35);
}