/* Оффлайн-«Мне нравится»: тумблер автоскачивания (профиль) + бейдж «скачано» в
   строке трека. Плитка коллекции и UI скачивания на экране — в library.css. */

/* Бейдж «скачано» в строке трека — тихий смысловой глиф (стрелка-в-линию =
   «на устройстве»), приглушён: это статус, не кнопка. */
.trackrow__dl {
  display: inline-flex; align-items: center; justify-content: center;
  margin-left: auto; flex: 0 0 auto; color: var(--t3);
}
.trackrow__dl .ic { width: 16px; height: 16px; }

/* ---- Тумблер автоскачивания (строка профиля) ---- */

/* Переключатель: дорожка + бегунок. Состояние — на родителе [role="switch"]
   (aria-checked), один .switch годится и в профиле, и в онбординге. */
.switch {
  flex: none; position: relative;
  width: 44px; height: 26px; border-radius: var(--pill);
  background: var(--surface-3); transition: background var(--dur) var(--ease);
}
.switch__knob {
  position: absolute; top: 3px; left: 3px;
  width: 20px; height: 20px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  transition: transform var(--dur) var(--ease);
}
[role="switch"][aria-checked="true"] .switch { background: var(--accent); }
[role="switch"][aria-checked="true"] .switch__knob { transform: translateX(18px); }

/* Строка-тумблер в профиле: тот же .row, справа переключатель, метка может нести
   второй ряд — тихую заметку (iOS-предупреждение). */
.row--switch .row__label { display: flex; flex-direction: column; gap: 3px; }
.row__note { font-size: 11px; font-weight: 500; line-height: 1.4; color: var(--t4); }

@media (prefers-reduced-motion: reduce) {
  .switch, .switch__knob { transition: none; }
}