/* ItemChips: what is on the order, as one short line. A list, because it is one — the bullets and
   the indent are what is taken away, not the semantics. */
.item-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.item-chip {
  font-size: var(--text-label);
  line-height: 1.6;
  padding: 0 var(--space-2);
  border: var(--hairline) solid var(--color-line);
  border-radius: var(--radius-chip);
  background: var(--color-surface);
  color: var(--color-ink);
  white-space: nowrap;
}

/* In this proof: an ink hairline, as the snapshot outlines the thing that is meant. The border
   carries it rather than a fill, so a line of chips stays as quiet as the plain one above it. */
.item-chip-covered {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/* On the order but not in this proof. Dimmed, never hidden: "proof 3 is about the hoodie and not
   the cap" is the thing somebody approving it needs to see. */
.item-chip-other {
  color: var(--color-muted);
  border-style: dashed;
}

/* The same distinction in words, for anyone who is not looking at the colors. Clipped rather than
   `display: none`, which screen readers skip. */
.item-chip-note {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}