/* =============================================================================
   mobile.css — ОБЩИЙ МОБИЛЬНЫЙ ФУНДАМЕНТ WEWO.

   Подключается ПОСЛЕДНИМ, поэтому перекрывает по-экранные стили, не переписывая
   их. Здесь только базовый каркас: viewport/safe-area, запрет горизонтального
   скролла и единый брейкпоинт ≤600px (многоколоночное → одна колонка).
   Палитра и шрифт — из theme.css (Onest), тут цвета не вводим.

   Дальше по одному экрану адаптируются в своих файлах; тут — фундамент + Super
   Business (он сложнее всех, три колонки).
   ============================================================================= */

/* ---------- 1. Безопасные зоны и высота окна ---------------------------------
   tg.js внутри Telegram кладёт --tg-top/--tg-bottom/--tg-height. Вне Telegram
   берём системные env(safe-area-inset-*). Экраны используют эти переменные. */
:root {
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left, 0px);
  --safe-right:  env(safe-area-inset-right, 0px);
  /* Реальная высота вьюпорта: dvh корректно учитывает адресную строку/панели. */
  --app-h: 100dvh;
}

/* ---------- 2. Никакого горизонтального скролла — нигде -----------------------
   Частые причины «расползания»: фикс-ширины, min-width у flex/grid-детей,
   широкие медиа. Ставим страховку глобально. */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}
img, canvas, video, svg, iframe, table, pre {
  max-width: 100%;
}
/* Широкий контент (таблицы, код, диаграммы) — прокрутка ВНУТРИ своего блока. */
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---------- 3. Единый мобильный брейкпоинт: ≤600px — одна колонка ------------
   Сворачиваем известные многоколоночные контейнеры проекта. Правила действуют
   только на узких экранах, десктоп не затрагивается. mobile.css идёт последним,
   поэтому !important не нужен — выигрывает по порядку каскада. */
@media (max-width: 600px) {

  /* Все сетки в одну колонку. */
  .sb-cols, .sb-tools, .sb-sum, .sb-quick, .sb-sims,
  .loy-stats, .loy-list, .sh-sum, .sh-row2,
  .of-tiles, .cab-grid, .cab-team, .cab-side,
  .cl-tiles, .cl-niches {
    grid-template-columns: 1fr;
  }

  /* Флекс-строки, которые на узком экране должны переноситься. */
  .cab-grid, .cab-in, .sb, .sb-room, .of-app { min-width: 0; }

  /* Дети флекса/грида не должны распирать контейнер длинным словом/числом. */
  .sb-room *, .of-main-in *, .cab-in * { min-width: 0; }

  /* Базовый кегль на телефоне — не мельчить. */
  body { font-size: 16px; }

  /* Удобные тап-цели: минимум 44px по высоте для основных кнопок. */
  button, .btn, a.btn { min-height: 44px; }
}

/* ---------- 4. Super Business на телефоне (фундаментальная адаптация) --------
   Layout по ШИРИНЕ (≤600px), чтобы одинаково работало и в браузере, и в
   Telegram (там ширина webview ≈ ширине телефона). Боковая панель — выезжающий
   бургер; контент в одну колонку; крупные карточки. Базовый паттерн бургера уже
   есть в sb.css (@860) и telegram.css — здесь доводим до ≤600 и на новые блоки. */
@media (max-width: 600px) {

  /* Одна колонка: контент во всю ширину, панель поверх (drawer). */
  .sb { grid-template-columns: 1fr; }
  .sb-side {
    position: absolute; inset: 0 auto 0 0;
    width: min(300px, 86vw); z-index: 30;
    transform: translateX(-100%);
    transition: transform .28s cubic-bezier(.2,0,0,1);
    padding-top: var(--safe-top);
  }
  .sb.side-open .sb-side { transform: none; box-shadow: 0 0 60px rgba(0,0,0,.7); }
  .sb-scrim {
    display: block; position: absolute; inset: 0; z-index: 25;
    background: rgba(0,0,0,.55);
    opacity: 0; pointer-events: none; transition: opacity .28s;
  }
  .sb.side-open .sb-scrim { opacity: 1; pointer-events: auto; }
  .sb-burger { display: flex; }

  /* Рабочая область и её колонки — вертикально, во всю ширину. */
  .sb-room { min-width: 0; }
  .sb-sup { max-width: 100%; }
  .sb-cols { gap: 12px; }

  /* Крупные тап-цели и кегль в SB. */
  .sb-add, .sb-sup-go, .sh-add, .loy-op-go, .sh-save, .loy-op-reward {
    min-height: 52px; font-size: 17px;
  }
  .sb-tool-card, .sb-q, .sb-sim, .loy-row, .sh-item, .of-tile { min-height: 56px; }
  .sh-mini, .loy-op-sec, .sh-chip { min-height: 44px; }

  /* Заголовок раздела покрупнее, но без переполнения. */
  .sb-sup-t { font-size: 30px; }
  .sb-head-t { font-size: 17px; }

  /* Безопасные зоны: контент SB не под системные панели. */
  .sb-home, .sh, .loy { padding-bottom: calc(var(--safe-bottom) + 20px); }
}

/* ---------- 5. Совсем узкие экраны (≤380px) — чуть плотнее ------------------- */
@media (max-width: 380px) {
  .sb-sup-t { font-size: 26px; }
  .sb-home, .sh, .loy { padding-left: 14px; padding-right: 14px; }
}

/* Уважаем системную настройку «меньше движения». */
@media (prefers-reduced-motion: reduce) {
  .sb-side, .sb-scrim { transition: none; }
}