@layer components {
  /* The switches under the role picked above them, and no others: the role is
     the ceiling (User::Role::SWITCHES_BY_ROLE), so a box it ignores would
     claim a right the person does not have. Each switch names its roles in
     data-roles; the roles that have any are the two rules below. Wrappers
     carry no utility, so nothing in a later layer shows them again. */
  .access-switches,
  .access-switches [data-roles] {
    display: none;
  }

  form:has([name$="[role]"][value="member"]:checked) .access-switches,
  form:has([name$="[role]"][value="collaborator"]:checked) .access-switches,
  form:has([name$="[role]"][value="member"]:checked) [data-roles~="member"],
  form:has([name$="[role]"][value="collaborator"]:checked) [data-roles~="collaborator"] {
    display: block;
  }
}