@layer components {
  .points-badge {
    display: inline-block;
    font-size: var(--text-sm);
  }

  /* Pointed is the state that costs budget, so it carries aether — the token
     for measured power — as a count badge circling the number, which reads as
     a stat where a filled pill around the whole text read as a button. */
  .points-badge--pointed {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--color-ink);
  }

  .points-badge__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--space-5);
    height: var(--space-5);
    padding-inline: var(--space-1);
    border-radius: calc(var(--space-5) / 2);
    background: var(--color-aether);
    color: var(--color-aether-ink);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }

  /* Zero is the format's norm: quiet, but a definite statement. */
  .points-badge--zero {
    color: var(--color-ink);
  }

  /* Unrated means "we have nothing to say" — visibly not a score. */
  .points-badge--unrated {
    color: var(--color-ink-muted);
    font-style: italic;
  }

  /* Banned is a ruling rather than a score, so it takes the danger mark the
     checker already uses for the same fact — and a filled pill, which reads
     as a stamp on the card next to three states that read as numbers. */
  .points-badge--banned {
    padding: 0 var(--space-1);
    border-radius: var(--radius);
    background: var(--color-danger-surface);
    color: var(--color-danger);
    font-weight: 600;
  }
}