.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: 4px 10px;
  background: var(--bg-2);
  color: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-size: var(--t-xs);
  font-weight: 500;
  white-space: nowrap;
  transition: background var(--d-fast) var(--ease-std), color var(--d-fast) var(--ease-std), border-color var(--d-fast) var(--ease-std);
}

.tag:hover, .tag[aria-pressed="true"] {
  background: var(--bg-3);
  color: var(--ink-1);
  border-color: var(--line-strong);
}

.tag--accent[aria-pressed="true"] {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent);
}

.tag__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px; height: 14px;
  margin-right: -4px;
  border-radius: 50%;
  color: var(--ink-3);
}
.tag__remove:hover { background: var(--bg-3); color: var(--down); }