/* Телефон.
   ---------------------------------------------------------------------------
   Отдельным файлом, а не добавками в шесть соседних, по одной причине: правила
   узкого экрана сквозные. Они трогают шапку из base.css, таблицы из bible.css,
   фильтры из practice.css и карточку окна из settings.css — и вместе читаются
   как «как всё выглядит на телефоне», а поодиночке не читаются никак.

   Грузится ПОСЛЕДНИМ. Специфичность у большинства правил ниже такая же, как у
   тех, что они уточняют, и выигрывают они порядком, а не весом селектора.

   ЧТО ЭТОТ ФАЙЛ НЕ ДЕЛАЕТ. Телефон нужен для чтения — теория, карточки,
   прогресс. Терминал и додзё на нём остаются как есть: работать в терминале
   без Ctrl и Tab всё равно нельзя, а экранный ряд клавиш и редактор кода под
   палец — отдельная работа, которую решили не делать. Поэтому ниже нет ни
   одного правила, которое пыталось бы ужать терминал или редактор: сделать их
   узкими, но по-прежнему непригодными, — значит потратить силы и обмануть.

   Порогов два, и они разные по смыслу:
     900px — уже был до этого файла: планшет, где двухколоночные экраны
             складываются в одну колонку. Здесь не трогается.
     520px — телефон: отступы, размер шрифта и ряд вкладок.
   ========================================================================= */

/* ---------------------------------------------------------------------------
   1. Ничто не тянет страницу вбок.

   Правило простое: широкое содержимое прокручивается ВНУТРИ своей рамки, а
   тело страницы не ездит горизонтально никогда. Соблазн написать
   body { overflow-x: hidden } велик и ошибочен — он не чинит вылезающий
   элемент, а прячет его вместе с концом строки.

   Вылезти могут двое. Таблицы теории: ширина 100%, но в ячейке живёт команда
   вроде git log --pretty=format:"%H", которую перенести негде. И длинные
   неразрывные строки в примерах — адреса, пути.
   --------------------------------------------------------------------------- */

.bible-table {
  /* display: block нужен, чтобы у таблицы вообще появилась своя прокрутка:
     у table-элемента overflow не работает. Заодно пропадает растягивание
     ячеек по контейнеру, поэтому ширину возвращаем max-content. */
  display: block;
  overflow-x: auto;
  max-width: 100%;
}

.bible-table tbody { display: table; width: 100%; }

/* Команды в первом столбце не переносятся посреди слова — так их и читают, —
   но и не растягивают таблицу: столбец сжимается до содержимого, а лишнее
   уезжает под прокрутку. */
.bible-table td:first-child { white-space: nowrap; }

/* Проза во втором столбце, наоборот, обязана переноситься. */
.bible-table td:last-child { word-break: break-word; }

.bible-shell,
.bible-mistake-wrong,
.bible-mistake-right,
.bible-code {
  overflow-x: auto;
  max-width: 100%;
}

/* Ссылка или путь без пробелов — единственное, что переносить действительно
   нечем. Пусть рвётся, чем уводит страницу вбок. */
.bible-body a,
.chat-text {
  overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------------------
   2. Телефон: 520px.

   Порог выбран между планшетом (768) и крупным телефоном (430) ближе к
   телефону: на 600px двухколоночная раскладка уже сложилась в колонку по
   правилу 900px, и сжимать отступы там ещё рано.
   --------------------------------------------------------------------------- */

@media (max-width: 520px) {
  /* Шрифт. База была 16 × 1.15 = 18.4px — это выбрано для монитора на
     расстоянии вытянутой руки. Телефон держат вдвое ближе, и тот же кегль
     съедает ширину, которой и так нет: при 18.4px в строку помещается около
     тридцати знаков. 1.0 даёт ~37 и остаётся крупнее системного минимума.

     Переменная, а не font-size у body: от неё считаются все rem-размеры,
     включая минимальную высоту вкладок и кнопок, — они сожмутся согласованно.
     Ручная настройка размера в «Шестерёнке» перебивает это правило, потому
     что задаётся на элементе, а не в таблице стилей. */
  :root { --ui-scale: 1; }

  header { padding: 8px 12px; }
  .tabs { padding: 6px 8px; gap: 2px; }
  .tab { padding: 6px 8px; }

  /* Ряд вкладок прокручивается вбок вместо переноса на вторую строку.
     Перенос увёл бы под вкладки половину экрана, а прокрутка занимает столько
     же места, сколько одна строка. */
  .tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    /* Полоса прокрутки на телефоне и так не показывается, а место резервирует. */
    scrollbar-width: none;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { flex: 0 0 auto; }

  /* Строка состояния уходит под вкладки: в одном ряду с ними на 390px она
     оставила бы им треть ширины. margin-left: auto из base.css здесь мешает —
     он и прижимал её вправо. */
  .status {
    margin-left: 0;
    width: 100%;
    order: 10;
    padding-top: 4px;
  }

  /* Кнопка выхода и шестерёнка не должны уезжать в прокрутку вместе с
     вкладками: до них не добраться, не пролистав весь ряд. */
  .logout-btn, .settings-btn { flex: 0 0 auto; margin-left: 4px; }

  .screen, .stats, .bible-body, .practice-shell { padding-left: 12px; padding-right: 12px; }

  /* Окно настроек и поздравления — во всю ширину с полями по 12px вместо
     фиксированной карточки, которая на 390px вылезала бы за края. */
  .lt-modal-card {
    width: auto;
    max-width: calc(100vw - 24px);
    margin: 12px;
  }

  /* Конверт переписки поднимается: снизу у телефонных браузеров своя панель,
     и кнопка в самом углу под неё попадает. */
  .mail-fab { right: 12px; bottom: 20px; }

  /* Двухколоночные сетки, которым порога 900px мало. */
  .memory-answer-grid { grid-template-columns: 1fr; }
  .stats-grid, .progress-grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
   3. Совсем узкие — 380px и меньше.

   Это старые и компактные телефоны. Отдельным порогом, потому что здесь
   отступы режутся уже до символических, и на 430px такое выглядело бы бедно
   без причины.
   --------------------------------------------------------------------------- */

@media (max-width: 380px) {
  header { padding: 6px 10px; }
  .screen, .stats, .bible-body, .practice-shell { padding-left: 8px; padding-right: 8px; }
  .tab { padding: 6px 6px; font-size: 0.75rem; }
}