/* Badge: a model's status as a rubber stamp (2026-10-11). Grella replaces the paper stamp card,
   so a status is inked on: spaced capitals in a double frame, tilted as a hand leaves it, with
   the grain of real ink (motifs/ink.svg). No pill, no dot. Each model maps its statuses to a tone. */
@layer components {
  .badge {
    --badge-color: var(--color-subtle);

    display: inline-block;
    padding: 0.3rem 0.6rem 0.25rem;
    font-size: var(--text-small);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--badge-color);
    border: 3px solid currentColor;
    border-radius: 0.2rem;
    outline: 1.5px solid currentColor;
    outline-offset: 2.5px;
    rotate: -4deg;
    mask: url("/assets/motifs/ink-5e4f35b0.svg") 0 0 / 6rem auto repeat;
  }

  /* Alternate the tilt in a row of stamps, so a list does not look machine-set. */
  .badge:nth-of-type(even) { rotate: 3deg; }

  .badge--positive { --badge-color: var(--color-positive); }
  .badge--warning { --badge-color: var(--color-warning); }
  .badge--negative { --badge-color: var(--color-negative); }
  .badge--neutral { --badge-color: var(--color-link); }
}