.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em;
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.15em 0.7em;
  border-radius: 99rem;
  font-size: var(--font-size-s);
  background-color: oklch(90% 0.09 var(--tag-hue, 0));
  color: oklch(32% 0.12 var(--tag-hue, 0));
}

/* A small dot marks automatic tags, rather than a different color scheme -
   the friendly per-tag hue stays the primary visual regardless of origin. */
.tag--automatic::before {
  content: "";
  inline-size: 0.4em;
  block-size: 0.4em;
  border-radius: 50%;
  background-color: currentColor;
  opacity: 0.6;
}

.tag-swatch {
  display: inline-block;
  inline-size: 0.7em;
  block-size: 0.7em;
  border-radius: 50%;
  background-color: oklch(70% 0.15 var(--tag-hue, 0));
}

.tag a {
  color: inherit;
  text-decoration: none;
}

.tag-filter {
  margin-block-end: var(--block-space);
}

.tag-filter__all {
  display: inline-block;
  padding: 0.15em 0.7em;
  border-radius: 99rem;
  font-size: var(--font-size-s);
  border: 1px solid var(--color-border);
}

.tag-filter__all a {
  text-decoration: none;
}

.tag-filter__all--active,
.tag-filter__link--active {
  font-weight: 700;
  text-decoration: underline;
}

.tag-groups {
  display: flex;
  flex-wrap: wrap;
  align-items: start;
  gap: calc(var(--block-space) * 2);
  margin-block-end: var(--block-space);
}

.tag-group {
  flex: 1;
  min-inline-size: 16rem;
}

.tag-table {
  width: 100%;
  border-collapse: collapse;
  margin-block-end: calc(var(--block-space) * 1.5);
}

.tag-table td,
.tag-table th {
  padding: 0.4em 0.6em;
  border-block-end: 1px solid var(--color-border);
  text-align: start;
}