@layer components {
  /* ——— The schedule form's day chips ———
     Mon–Sun as badges wrapping a real checkbox or radio: the control stays a
     control, `.badge:has(:checked)` (badges.css) is the selected voice, and
     this file owns only what a badge does not say — that it is a pointer
     target, and where the focus ring lands once the input is off-screen
     (`.for-screen-reader` on the input). The row lives inside its rhythm's
     .choice and reveals with :has() alone: no controller, and without
     JavaScript nothing is hidden that the server would not accept. */
  .day-picker {
    display: none;
    gap: calc(var(--inline-space) * 0.6);
    margin-block-start: var(--block-space-half);
  }

  .choice:has(.radio:checked) .day-picker {
    display: flex;
  }

  .day-chip {
    cursor: pointer;

    &:hover {
      border-color: var(--color-ink-faint);
    }

    &:has(:focus-visible) {
      outline: var(--focus-ring);
      outline-offset: var(--focus-offset);
    }
  }
}