/* state: what changes with what is happening, by attribute, never by a class that is also a look. */
@layer state {
  [aria-current="page"] { font-weight: 600; text-decoration: underline; }
  [aria-busy="true"] { opacity: 0.6; cursor: progress; }
  [aria-invalid="true"] { border-color: var(--color-accent) !important; }
  [hidden] { display: none !important; }
  [data-state="empty"]::after { content: "—"; }
}