/* Chips: neutral (measurement pills) and active (applied filters). */

.st-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  background: transparent;
  border: 1px solid var(--st-line);
  color: var(--st-ink-2);
  font-size: 11.5px;
  font-weight: var(--st-weight-semibold);
  line-height: 1.2;
}

.st-chip--active {
  padding: 6px 10px;
  background: var(--st-accent-tint);
  border: var(--st-border-width) solid var(--st-accent);
  color: var(--st-accent-ink);
  font-size: var(--st-size-label);
  font-weight: var(--st-weight-bold);
}

.st-chip__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
}

/* The × stays 18px visually. Any coarse pointer gets a 44px target — the handoff's
   minimum — via an overlay that doesn't affect layout. Do not "simplify" this away. */
@media (pointer: coarse) {
  .st-chip__remove {
    position: relative;
  }

  .st-chip__remove::after {
    content: "";
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    width: var(--st-h-touch);
    height: var(--st-h-touch);
    transform: translate(-50%, -50%);
  }
}

.st-chip--link:hover,
.st-chip--link:active {
  background: var(--st-ink);
  border-color: var(--st-ink);
  color: var(--st-surface);
}