@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. */
  /* The count and the word are two inline boxes once the word becomes a button,
     so a narrow table cell would otherwise break the line between them: "0" on
     one line and "points*" on the next. */
  .points-badge--zero {
    color: var(--color-ink);
    white-space: nowrap;
  }

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

  /* The badge's own word, made a target. It keeps the badge's ink rather than
     the muted ink a footnote would take, because the word is what the badge
     says; the dotted underline is what says it opens something. */
  .points-badge__preliminary {
    padding: var(--space-1) 0;
    background: none;
    border: 0;
    color: inherit;
    font: inherit;
    cursor: pointer;
    text-decoration: underline dotted;
    text-underline-offset: 0.2em;
  }

  .points-badge__preliminary:hover {
    text-decoration-style: solid;
  }

  /* Never set `display` here. The browser hides a closed popover with
     `display: none` from its own stylesheet, and any author declaration in a
     cascade layer outranks that — the panel would then stand open on every
     page. Lay the contents out with margins, as below. */
  .preliminary-explainer {
    position: absolute;
    inset: auto;
    width: min(20rem, calc(100vw - 2 * var(--space-3)));
    margin: 0;
    padding: var(--space-3);
    background: var(--color-surface);
    color: var(--color-ink);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-size: var(--text-sm);
  }

  .preliminary-explainer__heading {
    margin: 0 0 var(--space-2);
    font-size: var(--text-sm);
  }

  .preliminary-explainer p {
    margin: 0 0 var(--space-2);
  }

  /* 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;
  }
}