/* ══════════════════════════════════════════════════════════════════════════
   Настройки: элементы управления на телефоне
   ──────────────────────────────────────────────────────────────────────────
   Проверка экрана настроек на 390px показала две вещи, которые видит каждый
   владелец телефона:

   1. Значение в выпадающем списке обрезалось. `learning-settings.css` даёт
      таким спискам `max-width: 122px`, и вместо «Нормальный» читалось
      «Нормалы», вместо «Уровень 4 — Уверенный» — «Уровень 4 –», вместо
      «Без времени» — «Без време». Настройка, значение которой нельзя
      прочитать, работает вслепую.

   2. Над каждым разделом висела шапка всей страницы: надзаголовок, «Настройки»
      и две строки пояснения — 150px до первой строки раздела, у которого уже
      есть собственный заголовок со стрелкой «назад».

   Лист подключён последним: правила ниже перекрывают learning-settings.css и
   settings-glass.css, которые владеют этими поверхностями.
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 599.98px) {
    /* Список уезжает на свою строку и занимает всю ширину карточки: подпись
       слева и обрезанное значение справа в 122px не помещались вдвоём. */
    #screen-settings .tp-settings-row:has(> select) {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    #screen-settings .tp-settings-row > select {
        width: 100%;
        min-width: 0;
        max-width: none;
        align-self: stretch;
    }

    /* Шапка страницы нужна на списке разделов; внутри раздела её роль уже
       выполняет заголовок раздела. Скрываем только пояснение и надзаголовок —
       `h1` остаётся якорем для `aria-labelledby`. */
    #screen-settings:not(.is-settings-index) .tp-page-heading__eyebrow,
    #screen-settings:not(.is-settings-index) .tp-page-heading > p:last-child {
        display: none;
    }

    #screen-settings:not(.is-settings-index) .tp-page-heading h1 {
        font-size: 20px;
        margin-bottom: 2px;
    }
}