/* ═══════════════════════════════════════════════════════════════
   ЭКРАН «НАСТРОЙКИ» v2 — токены, геометрия, состояния
   Источник значений: demo/Settings 2.0/files/v6-settings.css.
   Замеры сняты с боевого экрана 390 x 683 CSS (DPR 2,41) и проверены
   по WCAG AA — детали и обоснования в docs/SETTINGS_UI.md.

   ПОДКЛЮЧАТЬ СТРОГО ПОСЛЕ menu.css. Половина правил здесь перебивает
   .menu-screen .sheet-card и соседей; при равной специфичности
   побеждает последнее объявленное, и порядок тегов в index.html —
   часть контракта, а не оформление.

   ПРЕФИКС s2- У ВСЕХ КЛАССОВ, И ЭТО НЕ УКРАШАТЕЛЬСТВО. Макет называл
   тумблер `.switch`, а в menu.css `.menu-screen .switch` — это
   переключатель «Режим игры» с собственными .thumb и .opt. Шторка
   лежит ВНУТРИ .menu-screen, поэтому чужое правило достало бы каждый
   тумблер настроек и сломало его молча. Проверено поиском до правки:
   свободны были только `item` и `picker`, `switch` — занят.

   ЦВЕТОВЫЕ ТОКЕНЫ ОБЪЯВЛЕНЫ НА .s2, А НЕ НА :root. У макета и у меню
   пересекается имя --focus (у меню #7c4d12, у макета #C97425), и
   объявление на [data-theme] перекрасило бы обводку фокуса во всём
   лобби. Токенов у макета 28, у меню 51, общий ровно один — но
   одного хватает.
   ═══════════════════════════════════════════════════════════════ */

/* --- Токены -------------------------------------------------------------- */

.s2 {
  /* Геометрия. Всё считается ОТ --ico-base: рост иконки съедает колонку
     подсказки на ту же величину. Замерено: выше 48 лист на 320x640 становится
     ВЫШЕ экрана. Правится здесь одним числом, после правки — гейт. */
  --ico-base:   48px;
  --ico-size:   var(--ico-base);
  --ico-sw:      1;
  --ico-gap:    14px;
  --item-pad-y:  8px;
  --switch-w:   44px;
  --switch-h:   26px;
}

:root[data-theme="light"] .s2 {
  --sheet:            #FAF6F0;
  --sheet-edge:       #EADFD4;
  --item:             #FFFDFC;
  --item-hover:       #FFF8F2;
  --item-press:       #F5ECE2;
  --item-border:      #E8D6C4;   /* обязательна: пункт на листе даёт 1,06 */
  --divider:          #EADFD4;

  --text:             #233342;
  --text-2:           #59616A;
  --text-off:         #6B7178;   /* 3,94 у прежнего #7A8086 при норме 4,5 */

  --ico:              #233342;
  --ico-2:            #65717A;
  --ico-off:          #6B7178;

  --accent-text:      #B94E00;
  --accent-soft:      #F6E2CC;

  --switch-on:        #E5963F;
  --switch-on-edge:   #C97425;   /* без кромки заливка даёт 2,36 при норме 3,0 */
  --switch-off:       #D8D0C7;
  --switch-off-edge:  #9B8D7D;   /* без неё дорожка и кружок дают 1,50 */
  --knob:             #FFFDFC;
  --on-accent:        #233342;   /* текст на акцентной заливке: белый даёт 2,36 */

  /* Граница одиночного элемента управления (поле ввода, отдельная кнопка).
     У .item рамка намеренно слабее: строку опознают по содержимому, рамка
     там только группирует, а одиночный контрол — нет. */
  --control-border:   #9B8D7D;

  --danger:           #EEBAB4;   /* мягкая заливка: сплошной красный кричит */
  --danger-text:      #942E20;   /* 4,61 на заливке */
  --danger-border:    #C0392B;   /* 5,05 к листу: сама заливка даёт 1,58 */

  --grab:             #D9C8B7;
  --focus:            #C97425;
  /* Затемнение под центрированным окном. Обесцвечено 12.08.2026 (было
     rgba(28,22,16,.52) — тёплый коричневый, дневное лобби отдавало сепией),
     тогда же усилено .52 → .76 по виду на устройстве. Днём это БОЛЬШЕ, чем
     ночью (.66): светлую пёструю панель на ворсистом столе одна и та же альфа
     гасит слабее, чем угольную на почти чёрном.
     Остаётся темнее листа настроек (--sheet-scrim в menu.css, .72) — окно
     обязано лежать «выше» листа. */
  --scrim-strong:     rgba(18,16,14,.76);
}

/* Ночью настройки УГОЛЬНЫЕ, как и лобби, но АКЦЕНТ В НИХ ЯНТАРНЫЙ.
   12.08.2026 решение от 11.08 («акцент — сталь #8695A8/#9FB2C9, янтарь это
   примета светлой темы») отменено Максимом по виду на телефоне: сталь на
   угольном читалась не «спокойно», а «выключено» — включённый тумблер
   выглядел серым, то есть ровно тем состоянием, которое он обязан отрицать.
   Вернулись значения макета (demo/Settings 2.0/files/v6-settings.html), все
   пары пересчитаны заново — проверка стали на янтарь не переносится:
     #E5963F на пункте #23252B — 6,47 при норме 3,0 для контролов;
     #F0A150 на пункте #23252B — 7,31 при норме 4,5 для текста.
   Янтарь берут ШЕСТЬ мест сразу (--accent-text): «MAX» в ярлыке, иконка
   внешней ссылки, галочка выбранной темы, крестик закрытия, ссылки в
   «О приложении», обводка фокуса. Разводить их по разным токенам сознательно
   НЕ стали — два акцента в одной теме читаются как недоделка. */
:root[data-theme="dark"] .s2 {
  --sheet:            #1D1F24;
  --sheet-edge:       #2D3036;   /* кромка: фон и лист различаются на 1,08 */
  --item:             #23252B;
  --item-hover:       #292C33;
  --item-press:       #1F2126;
  --item-border:      #363940;
  --divider:          #2D3036;

  --text:             #F4EFEA;
  --text-2:           #B8B0A8;
  --text-off:         #948F8A;

  --ico:              #F4EFEA;
  --ico-2:            #B8B0A8;
  --ico-off:          #948F8A;

  --accent:           #E5963F;
  --accent-hover:     #F0A150;
  --accent-press:     #D98430;   /* кромка главной кнопки: 5,85 к листу */
  --accent-text:      #F0A150;
  --accent-soft:      #3A2A1C;   /* заливка главной кнопки: текст на ней 11,8 */
  --on-accent:        #1D1F24;   /* тёмный текст на янтаре: 6,98 */

  /* Включённый тумблер — цветом, а не светлотой дорожки: серая дорожка на
     угольном фоне читается как «выключено», и включённое состояние спорило
     с собственным смыслом (жалоба Максима по скрину с телефона 12.08.2026). */
  --switch-on:        #E5963F;
  --switch-on-edge:   #E5963F;   /* заливка даёт 6,47 — отдельная кромка не нужна */
  /* Выключенная дорожка тоже взята из макета: прежняя пара #33363C/#565B64
     давала кромке к пункту 2,34 при норме 3,0 — «выключено» опознавалось
     хуже нормы, и замечено это было только при пересчёте под янтарь. */
  --switch-off:       #454951;
  --switch-off-edge:  #6E737C;   /* 3,30 к пункту */
  --knob:             #FFF8F2;   /* к включённой дорожке 8,18 */

  /* Граница одиночного элемента управления (поле ввода, отдельная кнопка).
     У .item рамка намеренно слабее: строку опознают по содержимому, рамка
     там только группирует, а одиночный контрол — нет. */
  --control-border:   #6B7280;

  /* Опасное действие — коралловое, а не янтарное. Соседство близкое, поэтому
     держится оно не оттенком, а парой «тёмная заливка + светлый текст»:
     акцент у нас всегда светлое пятно на угольном, опасность — светлый текст
     на СВОЕЙ тёмной подложке. Спутать их можно только по описанию, не глазом. */
  --danger:           #3A2119;
  --danger-text:      #FF9B72;
  --danger-border:    #7A4632;

  --grab:             #575A61;
  --focus:            #F0A150;
  --scrim-strong:     rgba(0,0,0,.66);
}

/* --- Лист: на ВСЮ ширину экрана ------------------------------------------
   У старой шторки по бокам оставалось по 16 px воздуха, и он не был задан
   отступом: ширина карточки считалась как min(--u * 743, 100%), а сама --u —
   как (100vw - --gap-x) / 743, где --gap-x = --pad * 2 = 32 px. То есть поле
   было зашито в единицу сетки, и «убрать отступ» его бы не убрало.
   Здесь ширина задаётся прямо, а поля берут вырезы экрана через env().
   Специфичность (0,3,0) против (0,2,0) у .menu-screen .sheet-card — правило
   побеждает по весу, а не по порядку загрузки: menu.css приезжает
   неблокирующе (media="print" + onload), и полагаться на порядок нельзя.
   ------------------------------------------------------------------------ */

.sheet.s2 .sheet-card {
  position: relative;            /* якорь для крестика (position:absolute) */
  width: 100%;
  max-width: none;
  max-height: 92%;
  align-items: stretch;          /* у меню тут center — списку он не нужен */
  gap: 0;
  padding-top: 9px;
  padding-left: calc(15px + env(safe-area-inset-left, 0px));
  padding-right: calc(15px + env(safe-area-inset-right, 0px));
  padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  border: 0;
  border-top: 1px solid var(--sheet-edge);
  border-radius: 22px 22px 0 0;
  background: var(--sheet);
  box-shadow: none;
}

/* Только ширина, без палитры. Нужна «Радио»: шторка открывается прямо из
   «Настроек», и разная ширина у двух соседних листов читается как дёрганье.
   Внутренние поля оставляем в единицах меню (--u * 40), чтобы список станций
   не разъехался с собственной вёрсткой, и добавляем к ним вырезы экрана. */
.sheet.s2-wide .sheet-card {
  width: 100%;
  max-width: none;
  border-radius: calc(var(--u) * 48) calc(var(--u) * 48) 0 0;
  padding-left: calc(var(--u) * 40 + env(safe-area-inset-left, 0px));
  padding-right: calc(var(--u) * 40 + env(safe-area-inset-right, 0px));
}

/* Ручка остаётся ЭЛЕМЕНТОМ (её тянут пальцем, menu.js), меняется только вид.
   Высоту зоны захвата не трогаем: 44 px — это порог пальца. */
.sheet.s2 .sheet-grip {
  height: 24px;
  margin: 0 0 2px;
}
.sheet.s2 .sheet-grip::after {
  width: 46px;
  height: 5px;
  border-radius: 3px;
  background: var(--grab);
}

.sheet.s2 .sheet-title {
  margin: 2px 0 13px;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -.01em;
  text-align: center;
  color: var(--text);
}

/* Крестик вместо строки «Закрыть» внизу. Кнопка сохраняет data-close —
   обработчик в menu.js навешан именно на него, а не на класс. */
.sheet.s2 .s2-close {
  position: absolute;
  right: calc(17px + env(safe-area-inset-right, 0px));
  top: 12px;
  width: 44px;                   /* зона нажатия, а не размер знака */
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent-text);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.s2 .s2-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* --- Пункт ---------------------------------------------------------------- */

.s2 .s2-item {
  display: flex;
  align-items: center;
  gap: var(--ico-gap);
  width: 100%;
  /* Не ниже пальцевого порога. Строка БЕЗ подсказки («Выключить радио»)
     схлопывалась до 40 px и была на 14 px короче соседних — правило общее, а
     не заплата на один пункт: иначе дефект вернётся с первым новым пунктом. */
  min-height: 48px;
  margin: 0;                     /* глобальный button{margin:.15rem} из шапки */
  padding: var(--item-pad-y) 14px;
  background: var(--item);
  border: 1px solid var(--item-border);
  border-radius: 15px;
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition: background .12s;
}
.s2 .s2-item:hover  { background: var(--item-hover); }
.s2 .s2-item:active { background: var(--item-press); }
.s2 .s2-item:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* --- Иконка --------------------------------------------------------------- */

.s2-ico {
  flex: none;
  width: var(--ico-size);
  height: var(--ico-size);
  color: var(--ico);
  fill: none;
  stroke: currentColor;
  stroke-width: var(--ico-sw);
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Выключенная настройка гасит и свою иконку. В макете это правило было
   (`.item.is-off .item__ico`), но при переносе признак сменился с класса
   .is-off на aria-checked (его ставит wireToggle в menu.js) — и правило
   вместе с токеном --ico-off не доехало вовсе. Прожило незамеченным до
   жалобы Максима 12.08.2026: гейт меряет геометрию, а не цвет, а на светлой
   теме разница #233342 → #6B7178 куда тише, чем на угольной.
   Префикс `.s2 ` — та же форма, что у соседних правил состояния тумблера
   ниже: состояние пункта описывается в файле одним селектором, чтобы новое
   правило нельзя было случайно поставить слабее уже существующих. */
.s2 .s2-item[aria-checked="false"] .s2-ico { color: var(--ico-off); }

/* --- Текст ----------------------------------------------------------------
   display:block обязателен всем трём. Внутри <button> по спецификации HTML
   допустимо только строчное содержимое, поэтому здесь <span>, а не <div>, —
   а строчные текут в одну строку, и ярлык с подсказкой склеились бы в абзац
   «Вибрация Отклик на касания». Проверено отрисовкой.
   Вес 500 у ярлыка тоже обязателен: при одинаковом весе две строки читаются
   одним блоком и глазу не за что зацепиться.
   ------------------------------------------------------------------------ */

.s2-text  { display: block; flex: 1; min-width: 0; }

.s2-label {
  display: block;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.27;
  color: var(--text);
}
.s2-label b { color: var(--accent-text); font-weight: 600; }

.s2-hint,
.s2-value {
  display: block;
  margin-top: 1px;
  font-size: 12.5px;
  line-height: 1.3;
  color: var(--text-2);
}

.s2-chev {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--ico-2);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.s2-ext {
  flex: none;
  width: 21px;
  height: 21px;
  color: var(--accent-text);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --- Тумблер --------------------------------------------------------------
   Состояние читается из aria-checked, а НЕ из класса .is-off, как было в
   макете: рисует строку wireToggle() в menu.js, и он ставит именно атрибут.
   Подгонять JS под CSS тут нельзя — на wireToggle завязаны гейты.
   ------------------------------------------------------------------------ */

.s2-switch {
  flex: none;
  position: relative;
  width: var(--switch-w);
  height: var(--switch-h);
  border-radius: calc(var(--switch-h) / 2);
  background: var(--switch-on);
  box-shadow: inset 0 0 0 1px var(--switch-on-edge);
  transition: background .15s, box-shadow .15s;
}

.s2-knob {
  position: absolute;
  top: 3px;
  right: 3px;
  width: calc(var(--switch-h) - 6px);
  height: calc(var(--switch-h) - 6px);
  border-radius: 50%;
  background: var(--knob);
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
  transition: right .15s;
}

.s2 .s2-item[aria-checked="false"] .s2-switch {
  background: var(--switch-off);
  box-shadow: inset 0 0 0 1px var(--switch-off-edge);
}
.s2 .s2-item[aria-checked="false"] .s2-knob {
  right: calc(var(--switch-w) - var(--switch-h) + 3px);
}

/* --- Узкий экран ----------------------------------------------------------
   Ниже 360 подсказки скрываются, строка возвращается к одной. Замерено: при
   иконке 36 и зазоре 14 колонка на 320 равна 152 px, а ярлыки «Быстрые
   анимации» (153) и «Оповещения о ходе» (157) в неё не влезают и уезжают на
   вторую строку — рост высоты всего 2 px, проверка разнобоя такое не ловит.
   Поэтому ужимаем не только иконку: зазор и тумблер тоже, итог — 164 px.

   Признак ставит наблюдатель за шириной ЛИСТА (menu.js), а не медиа-запрос:
   запрос смотрит на ширину ОКНА, а шторка может жить внутри контейнера.
   Медиа-запрос оставлен запасным путём на случай отключённого JS.

   Размер иконки — ДОЛЯ от базового, а не число 32px. Жёсткое число стоит
   ниже по каскаду и перебивало бы правку --ico-base: ползунок в макете менял
   размер везде, кроме 320, и выглядело это как «ползунок сломан».
   ------------------------------------------------------------------------ */

.s2.is-narrow {
  --ico-size:  calc(var(--ico-base) * 2 / 3);
  --ico-gap:   12px;
  --switch-w:  40px;
  --switch-h:  24px;
}
.s2.is-narrow .s2-hint { display: none; }

@media (max-width: 359.98px) {
  .s2 .s2-hint { display: none; }
}

/* Значение НЕ скрывается ни при какой ширине: это текущее состояние
   настройки, а не пояснение. На узком экране «Радио» и «Выбор темы»
   останутся единственными двухстрочными — так и задумано. */

/* --- Окно выбора темы: ПО ЦЕНТРУ, а не лист снизу -------------------------
   Разница не косметическая. Лист снизу читается как продолжение того же
   уровня, центрированное окно — как отдельный вопрос, который надо закрыть,
   прежде чем идти дальше. Отсюда и ручки у него нет: лист тянут, окно
   закрывают тапом по затемнению. Затемнение под ним сильнее обычного.
   ------------------------------------------------------------------------ */

.sheet.s2-dialog {
  align-items: center;
  padding: 0 18px;
}
.sheet.s2-dialog.is-open { background-color: var(--scrim-strong); }

.sheet.s2-dialog .sheet-card {
  width: 100%;
  max-width: 330px;
  max-height: 88%;
  align-items: stretch;
  gap: 0;
  padding: 16px 15px;
  border: 1px solid var(--item-border);
  border-radius: 22px;
  background: var(--sheet);
  box-shadow: 0 18px 44px rgba(0,0,0,.34);
  /* Окно не выезжает снизу, а появляется на месте: транслировать его на
     100% собственной высоты значило бы улетать за нижний край экрана из
     центра — движение читалось бы как падение, а не как вопрос. */
  transform: scale(.96);
  opacity: 0;
  transition: transform .16s ease-out, opacity .16s ease-out;
}
.sheet.s2-dialog.is-open .sheet-card {
  transform: scale(1);
  opacity: 1;
}

.sheet.s2-dialog .sheet-title {
  font-size: 19px;
  margin: 2px 0 13px;
}

/* Галочка выбранного — visibility, а не display: место под неё занято всегда,
   иначе строки дёргаются по ширине при смене выбора. */
.s2-check {
  flex: none;
  width: 22px;
  height: 22px;
  color: var(--accent-text);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  visibility: hidden;
}
.s2 .s2-item.is-selected .s2-check { visibility: visible; }
.s2 .s2-item.is-selected .s2-label { font-weight: 600; }

/* --- Окна-формы: «Игра с друзьями» и «О приложении» -----------------------
   Второй и третий тип окна после списка. Всё той же ширины и с тем же
   затемнением — отличается только содержимым и крестиком.
   ------------------------------------------------------------------------ */

/* Заголовок уступает место крестику. Без полей длинный заголовок уезжал под
   него, а зазор между крестиком и первой кнопкой был 3 px — палец попадал не
   туда. Отступ снизу поднят с 13 до 26 по той же причине. */
.sheet.s2-dialog--cross .sheet-title {
  padding: 0 44px;
  margin: 2px 0 26px;
}

.s2 .s2-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  margin: 0;
  padding: 11px 16px;
  border-radius: 14px;
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: background .12s;
}
.s2 .s2-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Основное действие мягкое, а не сплошной заливкой: на сплошной акцентной
   белый текст даёт 2,36 при норме 4,5, а тёмный на светлой теме читается
   тяжело. Мягкая заливка + кромка акцентом решает обе задачи. */
.s2 .s2-btn--primary {
  background: var(--accent-soft);
  color: var(--text);
  border: 1px solid var(--accent-press);
}
.s2 .s2-btn--primary:hover  { background: var(--item-hover); }
.s2 .s2-btn--primary:active { background: var(--item-press); }

.s2 .s2-btn--ghost {
  background: var(--item);
  color: var(--text);
  border: 1px solid var(--control-border);
}
.s2 .s2-btn--ghost:hover  { background: var(--item-hover); }
.s2 .s2-btn--ghost:active { background: var(--item-press); }

.s2 .s2-btn--danger {
  background: var(--danger);
  color: var(--danger-text);
  border: 1px solid var(--danger-border);
}
.s2 .s2-btn--danger:hover  { background: var(--item-hover); }
.s2 .s2-btn--danger:active { background: var(--item-press); }

.s2 .s2-or {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 14px 0;
  font-size: 13px;
  color: var(--text-off);
}
.s2 .s2-or::before,
.s2 .s2-or::after { content: ""; flex: 1; border-top: 1px solid var(--divider); }

.s2 .s2-field-row { display: flex; gap: 10px; align-items: stretch; }

.s2 .s2-field {
  flex: 1;
  min-width: 0;
  min-height: 48px;
  margin: 0;
  padding: 11px 14px;
  background: var(--item);
  color: var(--text);
  border: 1px solid var(--control-border);
  border-radius: 14px;
  font: inherit;
  /* ⚠️ Ровно 16px, не меньше: на кегле мельче iOS зумит страницу при фокусе,
     и экран уезжает. */
  font-size: 16px;
  text-transform: uppercase;
  /* Поле ввода — единственное место окна, где выделение текста нужно. */
  user-select: text;
  -webkit-user-select: text;
}
.s2 .s2-field::placeholder { color: var(--text-off); opacity: 1; text-transform: none; }
.s2 .s2-field:focus { outline: 2px solid var(--focus); outline-offset: 1px; }
.s2 .s2-field-row .s2-btn { width: auto; flex: none; padding-inline: 20px; }

/* ⚠️ box-sizing задан ЯВНО. У <button> по умолчанию border-box, у <input> —
   content-box, и при одинаковых padding поле выходило 72 px против 48 у
   кнопки. Гейт этого не ловил: 72 > 44, значит «проходит». */
.s2 .s2-btn,
.s2 .s2-field { box-sizing: border-box; }

/* Строка сообщения об ошибке ввода кода. В макете её нет, но в клиенте она
   несёт ответ сервера на неверный код — без неё игрок не узнает, почему
   не вошёл. Место занято всегда, иначе окно прыгает при появлении текста. */
.s2 .s2-note {
  margin: 10px 0 0;
  min-height: 18px;
  font-size: 13px;
  line-height: 1.3;
  text-align: center;
  color: var(--danger-text);
}

/* --- «О приложении» -------------------------------------------------------- */

.s2 .s2-info {
  background: var(--item);
  border: 1px solid var(--item-border);
  border-radius: 14px;
  padding: 14px 15px;
  /* Реквизиты иногда переписывают — пусть их можно выделить и скопировать. */
  user-select: text;
  -webkit-user-select: text;
}
.s2 .s2-info p { margin: 0 0 7px; font-size: 14.5px; line-height: 1.4; color: var(--text); }
.s2 .s2-info p:last-child { margin-bottom: 0; }
.s2 .s2-info .s2-muted { color: var(--text-2); }
.s2 .s2-info b { font-weight: 600; }

.s2 .s2-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 8px 12px;
  background: none;
  border: 0;
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  color: var(--accent-text);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.s2 .s2-info + .s2-link { margin-top: 12px; }
.s2 .s2-link + .s2-link { margin-top: 8px; }
.s2 .s2-link:hover { color: var(--accent-press); }
.s2 .s2-link:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.s2 .s2-mail { color: var(--accent-text); text-underline-offset: 3px; }

.s2 .s2-rule { border: 0; border-top: 1px solid var(--divider); margin: 14px 0; }

/* Разделитель перед «Выключить радио»: это не пятая станция, а отказ от всех,
   и линия говорит об этом раньше, чем прочитан текст. */
.s2 .s2-item--sep { position: relative; margin-top: 14px; }
.s2 .s2-item--sep::before {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  top: -8px;
  border-top: 1px solid var(--divider);
}

/* --- Уважение к системным настройкам -------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .s2 .s2-item,
  .s2 .s2-switch,
  .s2 .s2-knob,
  .sheet.s2-dialog .sheet-card { transition: none; }
}