/* FilterTabs — pill variant.
 * Minimal CSS; the default variant remains Tailwind-utility-driven in the
 * ERB. Pill variant uses custom classes because the design requires flip-
 * style active (ink bg + paper fg) that Tailwind's peer-checked syntax
 * handles more cleanly against CSS vars when we own the class names. */

.cp-filter-pills {
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
}

.cp-filter-pills__label {
  position: relative;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}

.cp-filter-pills__pill {
  padding: 0.375rem 0.75rem; /* 6px / 12px */
  border-radius: var(--radius-sm, 2px);
  font-size: 0.875rem;
  font-weight: var(--font-weight-medium, 500);
  color: var(--color-text-secondary);
  background: transparent;
  user-select: none;
  transition: color var(--motion-micro, 150ms) var(--ease-natural, ease),
              background-color var(--motion-micro, 150ms) var(--ease-natural, ease);
}

.cp-filter-pills__pill:hover {
  color: var(--color-text-primary);
}

.cp-filter-pills__label > .peer:checked ~ .cp-filter-pills__pill,
.cp-filter-pills__label > input:checked + .cp-filter-pills__pill {
  background: var(--color-text-primary);
  color: var(--color-background);
  font-weight: var(--font-weight-semibold, 600);
}