/* Settings share one switch shape across themes, states, and preference groups. */
:root .member-settings-content .preference-switch {
  appearance:none;
  box-sizing:border-box;
  width:38px;
  height:22px;
  min-width:38px;
  min-height:22px;
  padding:0;
  margin:0;
  border:1px solid transparent;
  border-radius:20px;
  background:var(--control-border);
  position:relative;
  flex:none;
  cursor:pointer;
  opacity:1;
  transition:background 180ms;
}
:root .member-settings-content .preference-switch::before {
  content:"";
  position:absolute;
  width:16px;
  height:16px;
  border-radius:50%;
  left:2px;
  top:2px;
  background:var(--surface);
  transform:translateX(0);
  transition:transform 180ms,background 180ms;
}
:root .member-settings-content .preference-switch:checked {
  background:var(--primary);
}
:root .member-settings-content .preference-switch:checked::before {
  background:var(--on-primary);
  transform:translateX(16px);
}
:root .member-settings-content .preference-switch:disabled,
:root .member-settings-content .preference-switch:disabled:checked {
  background:var(--soft);
  border:1px solid transparent;
  opacity:1;
  cursor:not-allowed;
}
:root .member-settings-content .preference-switch:disabled::before {
  left:2px;
  top:2px;
  background:var(--muted);
}
:root .member-settings-content .preference-switch:focus-visible {
  outline:2px solid var(--primary);
  outline-offset:3px;
}
/* A disabled group keeps readable labels instead of stacking two opacity fades. */
:root .member-settings-content .preference-section fieldset:disabled {
  opacity:1;
}
:root .member-settings-content .preference-section fieldset:disabled :is(strong,small,.form-label) {
  color:var(--muted);
}
@media(prefers-reduced-motion:reduce) {
  :root .member-settings-content .preference-switch,
  :root .member-settings-content .preference-switch::before {
    transition:none;
  }
}