/* Тумблер: тем же приёмом, что галочка согласия (checkbox.css) —
   настоящий input спрятан не display:none, а размером в пиксель,
   чтобы остаться в обходе с клавиатуры.

   Дорожка и ползунок посчитаны по шкале так, чтобы сдвиг вышел ровно
   в --sp-4: 40 (ширина) − 20 (ползунок) − 2×2 (просвет) = 16. */
.switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  width: 100%;
  cursor: pointer;
}

.switch-row__text {
  display: flex;
  flex-direction: column;
  gap: 0.3cqw;
  min-width: 0;
}

.switch-row__name {
  font-size: var(--fs-sm);
  font-weight: 600;
}

.switch__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.switch__track {
  flex: none;
  width: var(--sp-10);
  height: var(--sp-6);
  padding: 0.51cqw;
  display: flex;
  align-items: center;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  transition: background var(--fast) var(--ease),
              border-color var(--fast) var(--ease);
}

.switch__thumb {
  width: var(--sp-5);
  height: var(--sp-5);
  border-radius: 50%;
  background: var(--text-faint);
  transition: transform var(--fast) var(--ease),
              background var(--fast) var(--ease);
}

.switch__input:checked + .switch__track {
  background: linear-gradient(140deg, var(--accent-hi), var(--accent));
  border-color: transparent;
}

.switch__input:checked + .switch__track .switch__thumb {
  transform: translateX(var(--sp-4));
  background: var(--on-accent);
}

.switch__input:focus-visible + .switch__track {
  box-shadow: 0 0 0 3px var(--focus-ring);
}