/* ============================================================
   INTERN — мобильный слой. Грузится последним, после ui.css.

   Два адресата: узкий экран (телефон в браузере) и режим приложения (`.is-app` —
   страница открыта во встроенном браузере Intern, где шапка и навигация уже нативные).
   Ни одного правила на нулевом уровне вложенности без `.is-app`: десктоп не должен
   почувствовать этот файл вообще (tests/test_mobile_layer.py).
   ============================================================ */

/* ---------- режим приложения: своей шапки у портала здесь нет ---------- */
.shell.is-app .main { margin-left: 0; }
.shell.is-app .content {
  padding: 14px 14px calc(16px + env(safe-area-inset-bottom));
  max-width: none;
}
.shell.is-app .page-head { padding-top: 2px; }
/* Дублирующие выходы наружу: в приложении навигация нативная, ссылка «выйти» уводила бы
   человека на страницу входа портала внутри вкладки без шапки. */
.shell.is-app .mob-btn,
.shell.is-app .nav-scrim { display: none; }

@media (max-width: 880px) {
  /* Тап-цели: 44px — минимальная зона, в которую попадают пальцем, не целясь. */
  .btn, .seg > *, .sb-item, .link-btn, .icon-x, .tab, .chip-btn {
    min-height: 44px;
  }
  .btn-sm { min-height: 38px; }
  .icon-x { min-width: 44px; display: inline-grid; place-items: center; }
  .link-btn { display: inline-flex; align-items: center; }

  .page-head { flex-direction: column; align-items: stretch; gap: var(--space-4); }
  .page-head h1 { font-size: 22px; }
  /* Кнопки шапки: переключатель видов занимает свою строку, кнопки делят следующую.
     Без переноса «Дерево | Схема | Хронология» + две кнопки не помещаются в 360px и
     последняя кнопка уезжает за край экрана. */
  .head-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }
  .head-actions .btn { flex: 1 1 140px; }
  .head-actions > .seg { flex: 1 1 100%; overflow-x: auto; }

  /* Топбар прилипает: на длинной странице поиск и меню не должны уезжать вверх. */
  .topbar { position: sticky; top: 0; z-index: 30; }

  /* Формы: одна колонка и полноразмерные поля — двухколоночная сетка на 360px
     превращает каждое поле в марку. */
  .fgrid { grid-template-columns: 1fr; }
  .field.span { grid-column: auto; }
  .input, .sel select { min-height: 44px; font-size: 16px; }  /* 16px = iOS не зумит форму */
  .form-foot { flex-direction: column-reverse; gap: var(--space-3); }
  .form-foot .btn { width: 100%; min-height: 46px; }

  /* Модалка на телефоне — лист снизу, а не окошко посередине. */
  .modal-card {
    width: 100%; max-width: none; max-height: 92vh;
    margin-top: auto; border-radius: 18px 18px 0 0;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .modal { align-items: flex-end; }

  /* Таблицы остаются таблицами, но скроллятся внутри себя: страница не должна
     ездить вбок целиком. */
  .tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tbl { min-width: 520px; }
  /* Пустое состояние занимает всю строку и переносится: тянуть его до 520px незачем. */
  .tbl:has(td[colspan]) { min-width: 0; }

  /* Шапка карточки: заголовок и переключатель рядом ужимают друг друга в столбик
     из одиночных букв — на узком экране они встают в две строки. */
  .card-h { flex-wrap: wrap; }
  .card-h > .seg, .card-h .seg { width: 100%; margin-left: 0; }
  .card-h > div { flex: 1 1 180px; min-width: 0; }

  /* Раскрывающиеся денежные строки: подпись уезжает под сумму, а не режет её на слоги. */
  .due-box > summary { flex-wrap: wrap; }
  .due-box .db-hint { flex-basis: 100%; margin-left: 0; }
  .due-box .db-v { margin-left: auto; white-space: nowrap; }

  /* Расписание: день во всю ширину, время слева отдельной колонкой. */
  .sch-bar { flex-direction: column; align-items: stretch; }
  .sch-nav { margin-left: 0; justify-content: space-between; }
  .sch-nav .btn { flex: 1 1 auto; }
  .seg-people { overflow-x: auto; }
  .seg-people > * { white-space: nowrap; }
  .sch-day { padding: var(--space-5); }
  .sch-ev { padding-top: var(--space-5); padding-bottom: var(--space-5); }
}

@media (max-width: 560px) {
  .content { padding: 12px; }
  .page-head h1 { font-size: 20px; }
  .card { border-radius: 12px; }
  .sch-ev-time { flex-basis: 56px; }
}

/* Экран не должен ездить вбок ни на одной странице: горизонтальную прокрутку
   разрешаем только контейнерам, которые её просят сами. */
@media (max-width: 880px) {
  html, body { overflow-x: hidden; }
}