/* Телефон и «как приложение» (этап 4, ПЕРЕЕЗД_НА_САЙТ.md). Подключён последним — поверх app.css и стекла.
   Основа раскладки узкого экрана (меню панелью снизу, люди лентой) — в app.css, «ширина экрана»; здесь — доводка:
   вырез и полоска iPhone (env(safe-area-inset-*) работает благодаря viewport-fit=cover в index.html), подписи в нижнем меню,
   шапки разделов одной строкой, поля ввода без увеличения страницы, тема в профиле. */

/* ---------- везде ---------- */
html { -webkit-text-size-adjust: 100%; }              /* телефон боком не раздувает шрифт */
html, body { overscroll-behavior: none; }             /* страница целиком не тянется и не обновляется потягиванием вниз */
/* долгое нажатие на кнопку не выделяет подпись и не открывает предпросмотр ссылки; :where — не перебивает правила кнопок */
:where(button, .rail-btn, .person-row) { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.phone-only { display: none; }

/* iPhone: поле мельче 16 точек — Safari увеличивает страницу при вводе и не возвращает обратно */
@media (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), textarea, select { font-size: 16px !important; }
  .field-search.as-btn kbd { display: none; }           /* «/» — клавиша, на телефоне её нет */
}

/* Открыт с экрана «Домой» на iPhone: строка состояния — белым текстом поверх сайта; в светлой теме под ней лёгкая тень */
@media (display-mode: standalone) {
  [data-theme="light"] body::before { content: ""; position: fixed; z-index: 100; top: 0; left: 0; right: 0;
    height: calc(env(safe-area-inset-top, 0px) + 6px); background: linear-gradient(rgba(22, 24, 29, .5), rgba(22, 24, 29, 0)); pointer-events: none; }
}

/* ---------- телефон и узкое окно ---------- */
@media (max-width: 899px) {
  /* --bar-gap — от низа экрана до меню: над полоской «домой» iPhone, иначе 10; --tabbar — сколько снизу занимает меню */
  :root { --bar-gap: max(10px, env(safe-area-inset-bottom, 0px) - 12px); --tabbar: calc(68px + 10px + var(--bar-gap)); }
  #app { padding: max(10px, env(safe-area-inset-top, 0px)) max(10px, env(safe-area-inset-right, 0px)) var(--tabbar) max(10px, env(safe-area-inset-left, 0px)); }
  .phone-only { display: block; }

  /* нижнее меню: семь пунктов с подписями (на телефоне — короткими: «Задачи»); число — у правого края значка */
  .rail { bottom: var(--bar-gap); left: max(10px, env(safe-area-inset-left, 0px)); right: max(10px, env(safe-area-inset-right, 0px));
    padding: 5px; gap: 0; }
  .rail-items { gap: 0; }
  .rail-btn { height: 58px; border-radius: 29px; gap: 3px; }
  .rail-btn .ico { width: 22px; height: 22px; }
  .rail-items > .rail-btn .rail-label { font-size: 10px; line-height: 12px; font-weight: 600; letter-spacing: -.1px; }
  .rail-badge { top: 4px; right: auto; left: calc(50% + 4px); }
  /* восемь пунктов (23.10: «База знаний» и «Загрузка знаний» — два раздела) — подпись чуть мельче, чтобы «Загрузка» и
     «Профиль» влезали целиком и на 375 пикселях */
  .rail-items > .rail-btn.wide-only { display: none; }     /* «Сотрудники и доступы» на телефоне — из профиля (23.10) */
  .rail:has(.rail-items > .rail-btn:nth-child(8)) { padding: 5px 3px; }
  .rail-items:has(> .rail-btn:nth-child(8)) > .rail-btn .rail-label { font-size: 9.5px; letter-spacing: -.25px; }

  /* шапка раздела: кнопки и фильтры — одной строкой, листается вбок (было до четырёх строк над задачами); «+ Задача» — первой */
  .sec-head { gap: 10px 12px; margin-bottom: 12px; }
  .head-actions { flex: 1 1 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 2px 16px; }
  .head-actions::-webkit-scrollbar { display: none; }
  .head-actions > * { flex: none; }
  .head-actions > .btn.primary { order: -1; }
  .head-actions .epic-chips { flex-wrap: nowrap; }
  .field-search.as-btn { flex: none; width: auto; }

  /* главная: кто выбран — видно в ленте людей сверху; стрелки на телефоне не тянут (цепочка — в задаче: «До неё / После неё»);
     подпись цветов — одной строкой; колонки шире — название задачи читается, полосы листаются вбок */
  .home-main .sec-head > .avatar { display: none; }
  .links-chip { display: none; }
  .home-legend { flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; scrollbar-width: none; margin-bottom: 10px; }
  .home-legend::-webkit-scrollbar { display: none; }
  .lanes { --colw: 148px; }

  /* панель задачи во весь экран: шапка — под вырезом, кнопка внизу — над полоской «домой» */
  .detail { padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
  /* лист снизу — по видимой высоте экрана (строка адреса Safari её меняет) и над полоской «домой» */
  .sheet { max-height: 88dvh; }
  .overlay:not(.pop):not(.center) .sheet { padding-bottom: env(safe-area-inset-bottom, 0px); }
  .toast { bottom: calc(var(--bar-gap) + 150px); }
}

/* Телефон боком: на раздел остаётся около 200 точек, а шапка с фильтрами — почти столько же, задач не было видно.
   Главная, канбан и списки листаются целиком — шапка уезжает вверх вместе с задачами */
@media (max-width: 899px) and (max-height: 500px) {
  #app:is([data-section="home"], [data-section="board"], [data-section="list"]) .panel.main { overflow-y: auto; }
  #app:is([data-section="home"], [data-section="board"], [data-section="list"]) .panel.main > :is(.lanes-scroll, .board, .scroll) {
    flex: none; overflow-y: visible; }
  #app:is([data-section="board"], [data-section="list"]) .float-switch { position: sticky; bottom: 10px; left: auto; transform: none;
    align-self: center; margin-top: -60px; }
  #app[data-section="board"] .bcol-body { padding-bottom: 70px; }
  .sec-title p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}