/* ── Toggle (checkbox styled as switch) ─────── */
.toggle {
  -webkit-appearance: none;
  appearance: none;
  width: 40px;
  height: 22px;
  background: var(--neutral-400);
  border-radius: var(--radius-pill);
  position: relative;
  cursor: pointer;
  transition: background 0.2s ease;
  flex-shrink: 0;
}

.toggle::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  background: var(--neutral-0);
  border-radius: 50%;
  transition: transform 0.2s ease;
}

.toggle:checked {
  background: var(--purple-dark);
}

.toggle:checked::after {
  transform: translateX(18px);
}