/* public-mobile.css — общие мобильные правила публичных страниц.
   Волна A1 программы «две версии всегда» (Закон 26), 2026-09-03.

   ЗАЧЕМ ОТДЕЛЬНЫЙ ФАЙЛ. Из 23 публичных страниц у 17 нет своего css вообще —
   вся вёрстка живёт в инлайновом <style> каждой страницы. Десять страниц не
   имели НИ ОДНОГО правила для ширины ≤768 (замер 03.09: welcome, legal/privacy,
   legal/terms, help/flow, help/overzone и help-страницы, где был только 480).
   Вписывать одни и те же двадцать строк в двадцать три файла — гарантированная
   рассинхронизация уже через месяц, поэтому общая часть лежит здесь, а в
   странице остаётся только её собственное.

   ЧТО СЮДА НЕ КЛАДЁМ. Тач-цели конкретных кнопок. Слепое `min-height:44px` на
   всё, что похоже на кнопку, ломает две вещи сразу: канонические контейнеры с
   фиксированной высотой (урок SEG-ALIGN — кнопки торчали из рамки на 11 px) и
   строчные ссылки, которым min-height вообще не действует. Поэтому цели
   поднимаются поимённо, в css самой страницы.

   ГРАНИЦА. Файл подключается ТОЛЬКО публичным страницам (список — в MANIFEST.md
   волны). Каркас, кабинет и инструменты его не видят.

   ДЕСКТОП НЕ ТРОГАЕМ. Всё, кроме блока 1 (обёртка таблицы), лежит внутри
   @media (max-width:768px). Обёртка вынесена наружу намеренно: это заявленное
   улучшение волны, и на ширине ПК она ничего не меняет — уместившейся таблице
   прокручивать нечего.

   БРЕЙКПОИНТЫ — только канон 480/768/1024/1440 (Закон 15.28). */

/* ─────────────────────────────────────────────────────────────────────────
   1. Обёртка таблицы со скроллом.
   На страницах с каркасом класс .ft-table-wrap уже описан в
   lib/app-shell/shell-bundle.css и lib/ui/theme.css — значения там ровно
   такие же. Повтор нужен страницам БЕЗ каркаса (welcome, legal/*, help/flow,
   help/overzone): им ни один из тех файлов не подключён.
   ───────────────────────────────────────────────────────────────────────── */
.ft-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;                              /* тонкая промотка, 15.42 */
  scrollbar-color: var(--scrollbar-thumb, var(--border)) transparent;
}
/* Обёртка обязана быть НЕЙТРАЛЬНОЙ по раскладке: она добавлена ради мобильной
   прокрутки и на ПК не должна двигать ни пикселя. Отступ таблицы поэтому
   ПЕРЕЕЗЖАЕТ на обёртку: сама таблица внутри получает ноль, а обёртка берёт
   ровно ту величину, что был у таблицы. Без этого блок «дышит» в обе стороны —
   сверка на 1440 поймала оба случая: обёртка со своими 16px давала +32 px
   высоты блоку цен на лендинге (у .pr-table своего отступа нет), а обёртка без
   отступа отнимала 20 px у руководства по скринеру (у .ft-table он 16px).
   Отступ обёртки внутри BFC (overflow:auto) с соседями не схлопывается, а
   отступ таблицы — схлопывался бы, поэтому величина переносится, а не
   дублируется. Платформенное правило .ft-table-wrap в shell-bundle.css задаёт
   только overflow-x, вертикальных отступов там нет. */
.ft-table-wrap > table { margin: 0; }
.ft-table-wrap:has(> .ft-table) { margin: 16px 0; }
.ft-table-wrap::-webkit-scrollbar { width: 4px; height: 4px; }
.ft-table-wrap::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb, var(--border));
  border-radius: 2px;
}

@media (max-width: 768px) {
  /* ───────────────────────────────────────────────────────────────────────
     2. Ничто не шире экрана. Главные источники горизонтального выезда на
     публичных страницах — картинка с натуральной шириной и длинная строка
     кода или адреса, которую нечем перенести.
     ─────────────────────────────────────────────────────────────────────── */
  img, video, iframe, embed, object { max-width: 100%; }
  img, video { height: auto; }
  pre { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  pre, code, kbd, samp { overflow-wrap: anywhere; }
  p, li, dd, blockquote, figcaption { overflow-wrap: break-word; }

  /* ───────────────────────────────────────────────────────────────────────
     3. Поля страницы. Ширина телефона 390 px, из них десктопные 24-32 px
     отступов с каждой стороны съедали шестую часть строки (канон §9.2).
     ─────────────────────────────────────────────────────────────────────── */
  .help-wrap, .legal-wrap, .legal-page, .wel-wrap, .doc-wrap, .page-wrap,
  body > .wrap {                 /* так называется контейнер у help/flow и help/overzone */
    padding-left: 14px;
    padding-right: 14px;
    max-width: 100%;
  }
  .help-wrap, .legal-wrap, .legal-page, .doc-wrap, body > .wrap { line-height: 1.65; }

  /* ───────────────────────────────────────────────────────────────────────
     4. Поля ввода — не мельче 16px, иначе iOS зумит страницу при касании
     (канон §9.4). Галки и радио исключены: они не зумят и от 16px только
     растут.
     ─────────────────────────────────────────────────────────────────────── */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,
  textarea { font-size: 16px; }
  select { min-height: 44px; }

  /* ───────────────────────────────────────────────────────────────────────
     5. Таблицы: липкая первая колонка (канон §9.2).
     Применяется ТОЛЬКО внутри обёртки со скроллом — то есть там, где
     горизонтальная прокрутка вообще возможна. Пока таблица уместилась,
     правило себя ничем не проявляет: прокручивать нечего, а фон первой
     колонки совпадает с фоном страницы.
     Фон обязателен и обязан быть НЕПРОЗРАЧНЫМ — иначе сквозь залипшую колонку
     просвечивают уезжающие соседние ячейки.
     Живая проверка (урок JM-05): смотреть не наличие правила, а поведение при
     реальной прокрутке — position должен остаться sticky, а ячейка у левого
     края. Замеры — в MEASUREMENTS.md волны.
     ─────────────────────────────────────────────────────────────────────── */
  .ft-table-wrap table th:first-child,
  .ft-table-wrap table td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--bg, #0b0e11);
    min-width: 96px;
  }
  .ft-table-wrap table th:first-child {
    z-index: 3;                        /* заголовок выше ячеек — канон §9.2 */
    background: var(--bg3, var(--bg2, #1e2329));
  }
  .ft-table-wrap table th:first-child::after,
  .ft-table-wrap table td:first-child::after {
    content: "";                       /* тень-разделитель: видно, что колонка залипла */
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 1px;
    background: var(--border, #2a2e39);
  }
  .ft-table-wrap table th,
  .ft-table-wrap table td { padding-left: 10px; padding-right: 10px; }

  /* ───────────────────────────────────────────────────────────────────────
     5a. Элемент flex/grid не ужимается ниже min-content своего содержимого,
     пока ему явно не сказано min-width:0. Замер 03.09 на /help/screener.html:
     .step-body{flex:1} внутри шага раздувался до 411 px при экране 390 —
     держал его один <code> с длинной неразрывной строкой списка символов.
     Перенос самой строки даёт правило про code/pre выше, а это — про то,
     чтобы контейнер вообще имел право сузиться.
     Класс .step-* повторяется во всех руководствах help/* (общий шаблон).
     ─────────────────────────────────────────────────────────────────────── */
  .step-body, .step, .steps > * { min-width: 0; }

  /* ───────────────────────────────────────────────────────────────────────
     6. Резерв под плашку согласия на cookie.
     Плашка .ft-cookie-banner прибита к нижнему краю (position:fixed) и на
     390×844 занимает 191 px. Короткие страницы при этом НЕ прокручиваются
     (замер: docScrollable=false), и всё под плашкой недостижимо: на /welcome/
     туда попадали обе кнопки шага — «Назад» и «Далее», то есть единственный
     способ пройти приветствие; на / — две карточки экосистемы и кнопка
     «наверх»; на /auth/ — «Забыли пароль?».
     Резерв живёт ровно столько, сколько видна плашка: класс is-visible
     снимается вместе с ответом пользователя, пустоты внизу не остаётся.
     Две ветки: страница без каркаса прокручивает body, страница с каркасом —
     колонку .ft-shell-main (там body не прокручивается вовсе).
     ─────────────────────────────────────────────────────────────────────── */
  body:has(.ft-cookie-banner.is-visible):not(:has(.ft-shell-root)) {
    padding-bottom: 208px;
  }
  body:has(.ft-cookie-banner.is-visible) .ft-shell-main {
    padding-bottom: 208px;
  }

  /* ───────────────────────────────────────────────────────────────────────
     7. Собственная модалка публичной страницы — лист снизу (канон §5.1/§9.7).
     Селекторы только собственные; канонические FT.ui.modal и модалки каркаса
     называются иначе и своё поведение уже имеют.
     ─────────────────────────────────────────────────────────────────────── */
  .modal-box, .modal-panel {
    max-width: 100%;
    min-width: 0;
  }
}

@media (max-width: 480px) {
  /* Маленькие телефоны: поля ещё уже, таблицы плотнее. */
  .help-wrap, .legal-wrap, .legal-page, .wel-wrap, .doc-wrap, .page-wrap,
  body > .wrap {
    padding-left: 10px;
    padding-right: 10px;
  }
  .ft-table-wrap table th,
  .ft-table-wrap table td { padding-left: 8px; padding-right: 8px; }
  .ft-table-wrap table th:first-child,
  .ft-table-wrap table td:first-child { min-width: 84px; }
}

/* ═════════════════════════════════════════════════════════════════════════
   ТАЧ-ЦЕЛИ ПУБЛИЧНЫХ СТРАНИЦ (A1, 2026-09-03).

   Список поимённый: каждая строка — конкретная цель, которую замер 03.09 на
   390×844 показал мельче 44 px (WCAG 2.5.5, канон §9.4). Слепого «все кнопки
   по 44» здесь нет намеренно — оно ломает канонические контейнеры с
   фиксированной высотой (урок SEG-ALIGN) и не действует на строчные ссылки.

   Чего здесь НЕТ и почему:
   • ссылки внутри предложений (.pr-highlight на / и /pricing/, адрес почты в
     политике) — WCAG 2.5.5 изымает их явным исключением «Inline»; блок на их
     месте разваливает абзац;
   • кнопки мини-терминала, шапки и нижней панели — это каркас (lib/app-shell,
     lib/ui), чужая зона, правится своей волной;
   • стрелки канонического степпера .ft-numstep-btn на /calculator/ (44×19) —
     компонент из lib/ui/theme.css, общий для всей платформы; поднимать его
     высоту здесь значит менять вид степпера во всех модулях.
   Оба последних пункта вынесены в отчёт волны как находки платформенного слоя.
   ═════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* ── help/* : содержание руководства ──────────────────────────────────
     Пункты содержания — навигация по странице, каждый на своей строке.
     Высоту добираем строкой-блоком, а НЕ подушкой поверх межстрочного
     интервала: подушка на строчном элементе с line-height 26 px перекрыла бы
     соседние пункты, и тап уходил бы не туда (класс дефекта «сосед крадёт
     касание»). Список от этого длиннее на ~18 px на пункт — это цена
     работающего попадания пальцем. */
  .toc ol, .toc ul { line-height: 1.4; }
  .toc li { margin: 0; }
  .toc a {
    display: flex;
    align-items: center;
    min-height: 44px;
  }

  /* ── help/* : подвал руководства и одиночные ссылки-строки ────────────
     «Все гайды», «← Вернуться в Помощь», «Посмотреть полные тарифы →».
     Ссылка, которая занимает абзац целиком (p > a:only-child), — это не
     ссылка внутри предложения, а самостоятельная цель. */
  .guide-footer a,
  .guide-cta,
  a.back {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* ── /help/ : вкладки и ссылки карточек ──────────────────────────────── */
  .tab-btn {
    min-height: 44px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .guide-open-link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* ── /about/ : ссылки-чипы карточек ──────────────────────────────────── */
  .ab-card-link { min-height: 44px; }

  /* ── /reviews/ : кнопка отзыва, страничная навигация, выбор количества ── */
  .rev-btn { min-height: 44px; }
  .rev-pager-btn {
    min-height: 44px;
    min-width: 44px;
  }
  .rev-toolbar select,
  .rev-head select { min-height: 44px; }

  /* ── /cryptorg/ : чипы бренда ────────────────────────────────────────── */
  .crg-brand-chip { min-height: 44px; }
  .ces-brand {
    min-height: 44px;
    align-items: center;
  }

  /* ── /changelog/ : ссылка на полный список обновлений ────────────────── */
  .rm-recent-link { min-height: 44px; }

  /* ── /calculator/ : поля и переключатель направления ──────────────────
     Кегль поля 16px здесь уже стоял (calculator.css), поднимаем высоту.
     Стрелки степпера остаются 19 px — это канонический компонент платформы,
     см. оговорку в шапке блока. */
  .calc-input { min-height: 44px; }
  .calc-dir-btn { min-height: 44px; }
  #calc-share-btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}