@layer components {
  /* Three quiet buttons, one checked — the radio is the state, the .btn is
     the clothes. The input stays in the tree unhidden-but-invisible so the
     keyboard still reaches the group and arrows through it. */
  .theme-switcher input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }

  .theme-switcher .btn:has(input:checked) {
    --btn-background: var(--color-selected);
    --btn-color: var(--color-selected-ink);
    --btn-background-hover: var(--color-selected);
    --btn-color-hover: var(--color-selected-ink);
  }

  /* The ring the hidden radio would have worn. */
  .theme-switcher .btn:has(input:focus-visible) {
    outline: var(--focus-ring);
    outline-offset: var(--focus-offset);
  }
}