@layer components {
  /* ——— Chips ———
     Plain by default. A tint is earned only when state has to be seen at a
     glance, and never more than one per row or card. */
  .badge {
    display: inline-block;
    /* A chip is shorter than a button (reference 02) but not flat: with no
       block padding at all it reads as bare text in a tint, and beside the
       .btn--quiet stages in .entry-stages it collapsed to half their height. */
    padding: var(--inline-space-half) var(--inline-space);
    font-size: var(--text-small);
    color: var(--color-ink-subtle);
    border: var(--border);
    border-radius: var(--border-radius);

    /* Filled ink: the one chip that anchors rather than annotates. It drops
       its hairline — the tint already bounds it — and carries a little weight,
       because it is the one mark the row raises. The feed's date wears it
       (dividers.css) because it is the datum every row under it hangs from,
       and BC draws it the same way — see HANSHI's Deviations. */
    &.badge--strong {
      font-weight: 500;
      color: var(--color-canvas);
      background-color: var(--color-ink);
      border-color: transparent;
    }

    /* The current one in a control like this is a selection, so it reads as
       mizu without the view having to say so twice. Off aria-current alone,
       whichever value the markup spells it with — settings.css:57 rules the
       same shape for the rail. A chip wrapping a checked input is the same
       selection said by the control itself (the day chips, day-picker.css). */
    &[aria-current],
    &:has(:checked) {
      font-weight: 500;
      color: var(--color-selected-ink);
      background-color: var(--color-selected);
      border-color: transparent;
    }
  }
}