/* ═══════════════════════════════════════════════════════════
   Правки под телефон, общие для всех страниц портала.
   Подключается последней в <head>, поэтому перебивает
   страничные стили без !important, кроме отступа шапки.
   ═══════════════════════════════════════════════════════════ */

/* ── чтобы это ощущалось приложением, а не страницей ── */

/* Сдвиг вбок пальцем — не «ощущение», а последствие того, что
   что-то шире экрана. На главной шапка не переносилась, и кнопка
   «Выйти» уезжала за край, растягивая страницу до 448 px при 375. */
/* Тонкое место, на котором я уже споткнулся. Если overflow задать у body,
   а не у html, браузер переносит эту настройку на всё окно — и обрезает
   заодно вертикальную ось. Страница перестаёт прокручиваться вообще.
   Поэтому правило живёт только на html, где оно ведёт себя предсказуемо:
   вбок обрезаем, вниз прокручиваем. */
/* Ничего, что трогает прокрутку, здесь намеренно НЕТ.
   Ни overflow, ни overscroll-behavior: оба свойства управляют окном
   целиком, и любая ошибка в них убивает листание всего сайта.
   Сдвиг вбок лечится причиной, а не запретом: он был из-за того,
   что шапка на главной не переносилась (правило .topbar ниже). */
body { max-width: 100%; }
.topbar { flex-wrap: wrap; }

* { -webkit-tap-highlight-color: transparent; }   /* без серой вспышки по тапу */

a, button, .btn, .btn-ghost, .seg a, .tile, .row, .p {
  touch-action: manipulation;     /* убирает задержку 300 мс на двойной тап */
  -webkit-touch-callout: none;    /* долгое нажатие не открывает меню iOS */
}

/* Шапку и кнопки не выделяют, их нажимают. Содержимое страницы
   выделять по-прежнему можно — оттуда текст копируют. */
.hero, .topbar, .btn, .btn-ghost, .seg, .legend, h1 {
  -webkit-user-select: none; user-select: none;
}

/* ── вырезы и полоска жеста ── */

/* iPhone рисует страницу ПОД часами: так задано через viewport-fit=cover,
   чтобы фон шапки шёл во всю высоту. Отступ под вырез задаём руками. */
.hero { padding-top: calc(16px + env(safe-area-inset-top)) !important; }
body  { padding-bottom: env(safe-area-inset-bottom); }

.wrap {
  padding-left:  max(22px, env(safe-area-inset-left));
  padding-right: max(22px, env(safe-area-inset-right));
}

/* ── размеры под палец ── */

@media (pointer: coarse) {
  /* Пальцем страницу не растягивают двумя пальцами и не оттягивают
     за край — это выдаёт сайт. Мета-тег с user-scalable=no iOS давно
     игнорирует ради доступности, а touch-action работает.
     pan-x pan-y оставляет обычное листание, запрещая только щипок.
     Всё это живёт внутри «сенсорного» условия: на ноуте прокрутка
     не должна пострадать ни при каких обстоятельствах. */
  html {
    touch-action: pan-x pan-y;
    overscroll-behavior-y: none;
  }

  .btn-ghost, .btn, button,
  select, input[type=text], input[type=email], input[type=password], textarea {
    min-height: 44px;
  }
  .btn-ghost { padding: 11px 18px; }
  .topbar    { gap: 10px; }
  .row, .p, .tile { min-height: 52px; }
}

@media (max-width: 560px) {
  .wrap {
    padding-left:  max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }
  .hero { padding-bottom: 38px; }
  h1    { font-size: 25px; }
}

/* ── переходы между страницами ──
   Каждая вкладка портала — отдельная страница, и браузер по умолчанию
   гасит одну и рисует другую рывком: получается белая вспышка.
   Эта строка просит браузер сделать переход плавным. Кто её не понимает,
   просто игнорирует — хуже не станет. */
@view-transition { navigation: auto; }

::view-transition-old(root),
::view-transition-new(root) { animation-duration: .18s; }

/* у кого в системе выключены анимации — не навязываем */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none; }
}