/* Preference toggles */
.toggle { display: flex; align-items: center; justify-content: space-between; gap: 1rem; cursor: pointer; }
.toggle-text { display: flex; flex-direction: column; }
.switch:disabled { opacity: 0.5; cursor: default; }
.toggle + .toggle { margin-top: 1rem; }
.switch {
  appearance: none;
  flex: none;
  position: relative;
  width: 3rem;
  height: 1.75rem;
  margin: 0;
  border-radius: 999px;
  background: var(--surface);
  cursor: pointer;
  transition: background-color 0.15s;
}
.switch::before {
  content: "";
  position: absolute;
  top: 0.25rem;
  left: 0.25rem;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: var(--muted);
  transition: transform 0.15s, background-color 0.15s;
}
.switch:checked { background: var(--head); }
.switch:checked::before { background: var(--on-accent); transform: translateX(1.25rem); }
.switch:focus-visible { outline: 3px solid var(--head); outline-offset: 2px; }