/* ═══════════════════════════════════════════════════════════════════════════
   ТЕЛЕФОН И ПЛАНШЕТ (11.10.2026)

   ГЛАВНОЕ ПРАВИЛО ФАЙЛА: вне медиазапросов — только «#mnav, #msheet {
   display:none}» (на ПК панели нет). ПК с мышью этот файл не меняет — это
   проверяется сравнением геометрии ПК-вида до и после (каждый элемент на
   1920×1080 на своём месте до пикселя). На ПК меняет поведение только JS:
   регистрируется работник push (без перехвата запросов) и после выкатки
   появляется плашка «Портал обновился» (mobile.js) — обе вещи нужны и там.

   Три вида медиазапросов, и путать их нельзя:
   • ОБОЛОЧКА (нижняя панель вместо вкладок шапки) — телефон по ширине
     (max-width: 768px) ИЛИ сенсорный планшет до 1366px. На iPad 1024×768 в
     строку шапки влезало две вкладки из четырёх главных (замер 11.10:
     «Структура» и «Заявки» уезжали в «Ещё»), а нижняя панель держит все
     четыре под пальцем — как в приложениях. Разделы на планшете при этом
     остаются в своей обычной раскладке: она рассчитана на эту ширину.
   • РАСКЛАДКА ТЕЛЕФОНА — по ширине (max-width: 768px). Порог 768 тот же, что
     уже зашит в JS портала (auth.js — редактор схемы, app.js — сайдбар схемы),
     иначе CSS и JS разойдутся на ширинах 769–1024.
   • «ПОД ПАЛЕЦ» — по устройству ввода ((hover: none) and (pointer: coarse)),
     а НЕ по ширине: ноутбук 1280 при масштабе Windows 125% — это 1024 CSS px,
     1366 при 150% — 911; по одной ширине ПК получил бы «планшетный» вид.
     Сенсорный ноутбук с мышью сюда тоже не попадает: главный указатель у
     него мышь (pointer: fine).

   Нижняя панель (#mnav) и лист «Ещё» (#msheet) строятся в mobile.js — это
   ОТДЕЛЬНЫЕ кнопки, а не копии вкладок шапки: navbar.js и auth.js опираются
   на id и inline-видимость кнопок nav-*, копии сломали бы и то, и другое.

   Правила разделов перебивают стили, которые разделы вставляют сами (home.js
   кладёт свой <style> в разметку ПОСЛЕ этого файла): поэтому у них приставка
   #home-wrap / #view-… — специфичность выше, и !important не нужен. Там, где
   перебивать приходится inline-стиль из JS, без !important нельзя.
═══════════════════════════════════════════════════════════════════════════ */

#mnav, #msheet { display: none; }

/* ═══ ОБОЛОЧКА: телефон и сенсорный планшет ═══════════════════════════════ */
@media (max-width: 768px), (hover: none) and (pointer: coarse) and (max-width: 1366px) {
  /* Высота нижней панели — одна переменная на все отступы ниже. Объявлена в
     медиазапросе: на ПК её нет, и calc() с ней там не встречается. */
  :root { --mnav-h: 58px; --mnav-niz: calc(var(--mnav-h) + env(safe-area-inset-bottom, 0px)); }

  /* ── Шапка ──────────────────────────────────────────────────────────────
     Вкладки — в нижней панели. Строку вкладок прячем ЦЕЛИКОМ (сам
     .header-nav), а не кнопки по одной: видимость кнопок — inline-стиль от
     auth.js, и правило CSS на кнопках обмануло бы подсчёт доступных пунктов в
     navbar.js (main.css, «Корзина и Лог отсюда убраны намеренно»). Плашку
     .nav-ind отдельно не прячем по той же причине: она уходит вместе с
     родителем. */
  .header {
    padding: 0 max(10px, env(safe-area-inset-right, 0px)) 0 max(10px, env(safe-area-inset-left, 0px));
    /* Прокрутка шапки вбок (main.css, телефон) больше не нужна: всё
       помещается, а прокручиваемая шапка прятала вкладки за край — их не было
       видно вовсе. */
    overflow-x: visible;
  }
  .header-nav { display: none !important; }
  #nav-admin-panel, #nav-more-panel { display: none !important; }
  .header-right { margin-left: auto; gap: 6px; min-width: 0; }
  /* main.css (телефон) запрещает правой части шапки сжиматься
     (.header > div:last-child{flex-shrink:0}), и на схеме выбор офиса
     уезжал за правый край экрана: колокольчик + имя + офис шире 360px.
     Разрешаем — сжимается самое широкое (выбор офиса), его подпись
     обрезается многоточием (так одета кнопка списка, dress_select.js). */
  .header > .header-right { flex-shrink: 1; }
  /* Тема, анимация и «Выйти» — в листе «Ещё»; роли — на личной странице. */
  #theme-toggle, .header-right .anim-btn { display: none !important; }
  #ub-roles { display: none !important; }
  #user-badge > button { display: none !important; }
  #user-badge { padding: 4px 6px !important; min-width: 0; }
  #ub-name {
    display: inline-block; max-width: 34vw; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap; vertical-align: middle;
  }
  #notif-bell { padding: 7px 10px !important; }

  /* ── Низ разделов — над нижней панелью ──────────────────────────────────
     Все коробки разделов в main.css прибиты к низу окна (bottom:0), часть —
     с !important. Без этого панель закрыла бы последние строки списков. У
     восьми «спец-разделов» height:100% выигрывает у bottom (см. main.css про
     переопределённую коробку) — поэтому им height:auto: пусть коробку задают
     top и bottom. */
  .root-layout { bottom: var(--mnav-niz) !important; }
  #view-bot.active, #view-trash.active, #view-log.active, #view-cards.active,
  #view-admin.active, #view-tickets.active, #view-acs.active, #view-storage.active {
    bottom: var(--mnav-niz) !important; height: auto !important;
  }
  .view.view-leaving { bottom: var(--mnav-niz); }
  #view-bot.view-leaving, #view-trash.view-leaving, #view-log.view-leaving,
  #view-cards.view-leaving, #view-admin.view-leaving, #view-tickets.view-leaving,
  #view-acs.view-leaving, #view-storage.view-leaving { height: auto; }
  #profile-page-root { bottom: var(--mnav-niz) !important; }
  /* Всплывающие сообщения — над панелью, а не под ней. */
  #ui-toast-host { bottom: calc(var(--mnav-niz) + 10px) !important; }
  #welcome-toast { bottom: calc(var(--mnav-niz) + 10px) !important; }
  /* Свои всплывашки разделов (снизу 18–24px, inline-стилем) и плашка окна
     копирования (z 30000, 15 минут) лежали поверх панели и перехватывали
     касания «Структуры» и «Заявок» (код-ревью). Поднимаем над панелью. */
  #app-notify, #org-notify, #ed-notify, #acs-notify, #cam-notify, #st-notify,
  #at-toast, #rm-toast, #tk-toast, #copy-window-bar { bottom: calc(var(--mnav-niz) + 10px) !important; }
  /* Альбомная ориентация iPhone с вырезом: при viewport-fit=cover содержимое
     заходило бы под вырез (без cover Safari сам добавлял поля по бокам). В
     книжной ориентации отступы нулевые — ничего не меняется. */
  .root-layout { left: env(safe-area-inset-left, 0px); right: env(safe-area-inset-right, 0px); }
  #view-bot.active, #view-trash.active, #view-log.active, #view-cards.active,
  #view-admin.active, #view-tickets.active, #view-acs.active, #view-storage.active,
  #profile-page-root {
    left: env(safe-area-inset-left, 0px) !important; right: env(safe-area-inset-right, 0px) !important;
  }
  #notif-dropdown { max-height: calc(100vh - 58px - var(--mnav-niz) - 20px) !important; }

  /* ── Нижняя панель ───────────────────────────────────────────────────── */
  #mnav {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0;
    /* НИЖЕ ВСЕХ ОКОН портала: подложки окон начинаются с 1000 (.modal-bg —
       1000, окна org.js — 2000–3000, «Техника» — 5000, --z-modal — 9500).
       Окно, открытое на телефоне, обязано закрыть панель собой: при 8550
       (первая редакция) панель лежала ПОВЕРХ окна-листа «Новая заявка» и
       прятала его низ с кнопками — так показал замер 11.10. Выше содержимого
       разделов (.view — 0–10) и плавающей кнопки схемы (200; она стоит над
       панелью и с ней не пересекается). Личная страница (8500) выше панели,
       но её низ поднят над панелью (правило выше) — они не пересекаются. */
    z-index: 900;
    height: var(--mnav-niz);
    padding: 0 env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
    background: var(--bg2); border-top: 1px solid var(--border);
    box-shadow: 0 -6px 24px -12px rgba(0, 0, 0, .5);
  }
  /* Высоту кнопок задаёт панель (растягивание по умолчанию), а не своя
     цифра: при height:58px кнопка вместе с рамкой панели вылезала на 1px за
     низ экрана — замер «разделов на виду» честно давал 0 из 4. */
  #mnav button {
    flex: 1 1 0; min-width: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    background: none; border: 0; padding: 0 2px; cursor: pointer;
    color: var(--text3); font: inherit; font-size: 10.5px; font-weight: 600; letter-spacing: .1px;
    -webkit-tap-highlight-color: transparent;
  }
  #mnav button span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #mnav button svg { width: 22px; height: 22px; flex-shrink: 0; }
  #mnav button.on { color: var(--accent-h, var(--accent)); }
  #mnav button:active { transform: scale(.94); }
  /* Рамка фокуса с клавиатуры (планшет с клавиатурой) — в цвет портала, а не
     белый квадрат браузера поверх соседних кнопок. */
  #mnav button:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; border-radius: 12px; }

  /* ── Лист «Ещё»: всё, что не поместилось в панель, плюс тема, выйти ───── */
  #msheet.open { display: block; position: fixed; inset: 0; z-index: 9400; }
  /* cursor:pointer — не украшение: iOS Safari не присылает click с элемента,
     который не считает нажимаемым, если обработчик висит на предке (#msheet).
     Без него касание по затемнению на iPhone лист не закрывало бы. */
  #msheet .ms-fon { position: absolute; inset: 0; background: rgba(0, 0, 0, .5); cursor: pointer; }
  /* На планшете лист не во всю ширину: 1024px кнопок в две колонки читаются
     как пустыня. margin:auto при left/right 0 центрирует абсолютный блок. */
  #msheet .ms-list {
    position: absolute; left: 0; right: 0; bottom: 0; margin: 0 auto; max-width: 560px;
    max-height: calc(100% - 64px); overflow-y: auto; -webkit-overflow-scrolling: touch;
    background: var(--bg2); border-top: 1px solid var(--border2);
    border-radius: 18px 18px 0 0;
    padding: 8px 12px calc(14px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -18px 48px -12px rgba(0, 0, 0, .6);
  }
  #msheet .ms-ruchka { width: 40px; height: 4px; border-radius: 2px; background: var(--border2); margin: 4px auto 10px; }
  #msheet .ms-zag { font-size: 11px; font-weight: 700; color: var(--text3); text-transform: uppercase;
    letter-spacing: .5px; margin: 10px 4px 6px; }
  #msheet .ms-setka { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  #msheet .ms-setka button, #msheet .ms-dej button {
    display: flex; align-items: center; gap: 10px; min-height: 48px; width: 100%;
    padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border);
    background: var(--bg3); color: var(--text); font: inherit; font-size: 13.5px; font-weight: 600;
    text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  #msheet .ms-setka button.on { border-color: var(--accent); color: var(--accent-h, var(--accent)); }
  #msheet .ms-setka button span, #msheet .ms-dej button span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  #msheet .ms-dej { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
  #msheet .ms-dej button.ms-vyjti { color: var(--red, #e5484d); }
  #msheet .ms-podskazka { font-size: 12.5px; line-height: 1.5; color: var(--text2);
    background: var(--bg3); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; }

  /* Шапка комментария заявки: имя автора делило строку с плашкой
     «Внутренний» и кнопками «Изменить»/«Удалить», которые не сжимаются, —
     имени оставалось ~20px, и оно шло столбиком по буквам (живой iPhone,
     11.10). Шапка переносится: имени — не меньше 160px, плашка и кнопки
     уходят на следующую строку, к правому краю. Пока всё помещается в
     строку, перенос не наступает — на широком экране вид прежний.
     !important — у блока автора встроенный flex:1 (основа 0), иначе перенос
     не наступил бы никогда. */
  .tk-cmt-shapka { flex-wrap: wrap; justify-content: flex-end; }
  .tk-cmt-avtor { flex: 1 1 160px !important; }
  /* Картинка мероприятия на главной: блок с пропорцией картинки (4:1) в
     карточке «картинка слева, текст справа» растягивался по высоте текста,
     и картинка, заполняя блок, обрезалась по краям (живой iPad, 11.10:
     «20 лет ЮНИПРО» срезано слева). Теперь она вписывается целиком, по
     краям блока — его фон. Приставка #home-wrap: home.js вставляет свои
     стили ПОСЛЕ этого файла. */
  #home-wrap .hm-ev-cover { background-size: contain; background-repeat: no-repeat; }
  /* Строка заголовка статьи базы знаний (заголовок и четыре кнопки) — с
     переносом: на телефоне лёжа и iPad стоя кнопки уходили за правый край
     на 100–130px. Пока всё помещается, перенос не наступает. */
  .kb-zag-ryad { flex-wrap: wrap; }
}

/* ═══ ТЕЛЕФОН: раскладка (≤768) ═══════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Шапка телефона — 56px (main.css), а «спец-разделы» по-прежнему отступали
     на 58: щель в 2px между шапкой и разделом. */
  #view-bot.active, #view-trash.active, #view-log.active, #view-cards.active,
  #view-admin.active, #view-tickets.active, #view-acs.active, #view-storage.active { top: 56px !important; }
  #view-bot.view-leaving, #view-trash.view-leaving, #view-log.view-leaving,
  #view-cards.view-leaving, #view-admin.view-leaving, #view-tickets.view-leaving,
  #view-acs.view-leaving, #view-storage.view-leaving { top: 56px; }
  /* Сам список офиса спрятан (dress_select.js), видна кнопка-двойник —
     ограничиваем их общий контейнер. */
  .office-select, #office-select-wrap { max-width: 46vw; }
  #office-select-wrap { min-width: 0; }
  /* «Управление офисами» (домик в шапке) — для редактора схемы, а редактор
     на телефоне скрыт (auth.js); кнопка только отнимала место у шапки. */
  #office-manage-btn { display: none !important; }
  #mob-map-toggle { bottom: calc(var(--mnav-niz) + 14px); }
  /* В «Структуре» список отделов раскрывает сам заголовок «Департаменты»;
     плавающая кнопка там лишняя и закрывала собой карточку сотрудника. */
  .root-layout:has(> #view-org.active) > #mob-map-toggle { display: none !important; }
  /* Сообщения на 360–390px — во всю ширину. */
  #ui-toast-host { left: 10px !important; right: 10px !important; max-width: none !important; }
  #welcome-toast { left: 10px !important; right: 10px !important; min-width: 0 !important; max-width: none !important; }
  /* Выпадашка колокольчика шириной 380px не помещалась на 360. */
  #notif-dropdown { left: 8px !important; right: 8px !important; width: auto !important; }
  /* Форма входа: 392px не помещалась в 360–375 — первый экран портала. */
  #login-modal > div { width: min(392px, calc(100vw - 24px)) !important; padding: 28px 20px !important; }

  /* ── Окна (.modal) — «листом» снизу ─────────────────────────────────────
     В main.css это уже задумано, но правило написано для .modal-overlay —
     такого класса в портале нет, подложка называется .modal-bg, и правило не
     работало. */
  .modal-bg { align-items: flex-end !important; padding: 0 !important; }
  /* 92vh в мобильном браузере с видимыми панелями больше видимой высоты, и
     при окне «листом снизу» весь обрез уходил вверх — заголовок и «×» за
     краем. dvh — видимая высота (iOS 15.4+, Chrome 108+); где его нет,
     объявление отбрасывается и остаётся 92vh из main.css. */
  .modal { max-height: 92dvh !important; }
  /* Окно «Уведомления о заявках» (profile.js) — своя подложка без предела
     высоты; со строкой push оно не помещалось на 360×640 и iPhone SE, и
     «Сохранить» уходила за край без прокрутки (код-ревью). */
  #profile-notify-modal > div {
    max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px);
    overflow-y: auto; -webkit-overflow-scrolling: touch;
  }

  /* ── Главная ─────────────────────────────────────────────────────────── */
  /* Пять плиток по одной в ряд занимали весь первый экран — до мероприятий
     надо было листать. Две в ряд, значок над подписью. */
  #home-wrap .hm-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; }
  #home-wrap .hm-tile { flex-direction: column; align-items: flex-start; gap: 9px; padding: 13px 13px 12px; }
  #home-wrap .hm-tile-l { font-size: 13.5px; }
  /* Нечётная последняя — во всю ширину, иначе справа от неё дыра. */
  #home-wrap .hm-tiles > .hm-tile:last-child:nth-child(odd) { grid-column: 1 / -1; flex-direction: row; align-items: center; }
  #home-wrap .hm-hello-t { font-size: 21px; }
  /* minmax(360px,1fr) на экране 332px давал колонку шире экрана: карточка
     мероприятия уезжала за правый край вместе с кнопками. */
  #home-wrap .hm-ev-grid { grid-template-columns: minmax(0, 1fr); }

  /* ── Схема ───────────────────────────────────────────────────────────────
     Боковая панель на телефоне занимала полэкрана над схемой, а список
     сотрудников в ней сжимался до НУЛЯ (у блоков flex-shrink:0, у списка —
     1): поиск печатал, а результатов не было видно вовсе. Теперь сверху
     только строка поиска; результаты выпадают поверх схемы, пока в поиске
     есть текст (класс m-poisk ставит mobile.js); дни рождения и ссылки — по
     плавающей кнопке (класс m-razvernut, app.js mobToggleSidebar). */
  #view-map .sidebar { display: block; max-height: none; overflow: visible; position: relative; z-index: 6; }
  #view-map .sidebar > .sidebar-block:first-child { padding: 10px 12px; }
  #view-map .sidebar > .sidebar-block:first-child .block-title { display: none; }
  #view-map .sidebar > .sidebar-block:first-child .sort-bar { display: none !important; }
  #view-map .sidebar:not(.m-razvernut) > :not(:first-child) { display: none; }
  #view-map .sidebar:not(.m-poisk) > .emp-list { display: none; }
  #view-map .sidebar.m-poisk:not(.m-razvernut) > .emp-list {
    display: block; position: absolute; left: 0; right: 0; top: 100%;
    max-height: min(52vh, 440px); overflow-y: auto; -webkit-overflow-scrolling: touch;
    background: var(--bg2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border2);
    box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .55);
  }
  #view-map .sidebar.m-razvernut { max-height: 62vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  #view-map .sidebar.m-razvernut > .emp-list { max-height: 40vh; }
  /* Подпись офиса дублирует выбор офиса в шапке, а PDF с телефона не
     печатают — оба занимали треть видимой схемы. */
  #view-map .map-label, #view-map .pdf-btn { display: none; }
  #view-map .zoom-bar { top: 10px; right: 10px; }

  /* ── Структура ───────────────────────────────────────────────────────────
     Правило main.css для телефона написано на .org-sidebar — такого класса
     нет, у раздела .sidebar шириной 296px, и он занимал весь экран, а список
     людей уходил под него. Теперь: строка поиска и под ней заголовок
     «Департаменты» — нажатие раскрывает список (класс m-razvernut, mobile.js
     и плавающая кнопка); выбор отдела сворачивает его обратно. */
  #view-org .sidebar {
    display: block; width: 100% !important; min-width: 0 !important; height: auto !important;
    max-height: none; overflow: visible; flex-shrink: 0;
    border-right: 0 !important; border-bottom: 1px solid var(--border);
  }
  #view-org .sidebar > .sidebar-block { padding: 10px 12px; }
  #view-org .sidebar > .sidebar-block:first-child { border-bottom: 0; padding-bottom: 6px; }
  #view-org .sidebar > .sidebar-block:first-child .block-title { display: none; }
  /* inline overflow-y:auto у блока отделов (index.html) — без !important не перебить. */
  #view-org .sidebar > .sidebar-block:nth-child(2) { padding-top: 0; overflow: visible !important; border-bottom: 0; }
  #view-org .sidebar > .sidebar-block:nth-child(2) > .block-title {
    margin: 0; padding: 8px 2px; cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  #view-org .sidebar > .sidebar-block:nth-child(2) > .block-title::after {
    content: '▾'; margin-left: auto; font-size: 13px; letter-spacing: 0; transition: transform .15s;
  }
  #view-org .sidebar.m-razvernut > .sidebar-block:nth-child(2) > .block-title::after { transform: rotate(180deg); }
  #view-org .sidebar:not(.m-razvernut) .dept-list { display: none; }
  #view-org .sidebar.m-razvernut .dept-list { max-height: 42vh; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: 8px; }
  .org-toolbar { padding: 10px 12px; gap: 7px; }
  /* Выгрузки, импорт и подсказка про перетаскивание — работа за ПК. Кнопки
     выгрузки прячем блоком (.org-vygruzki): самим кнопкам auth.js ставит
     display inline-стилем с !important, а он сильнее любого правила. */
  .org-toolbar .org-vygruzki, #csv-import-btn, #dnd-hint { display: none !important; }
  /* Список людей — карточками: таблица с колонками фиксированной ширины
     уходила вбок на два экрана. Остаются имя, должность, отдел, график;
     почта и телефоны — в карточке сотрудника по нажатию. */
  .emp-table-head, .h-scroll-wrap { display: none !important; }
  .emp-table-outer > div:not(.emp-table-wrap):not(.h-scroll-wrap) { display: none; }
  .emp-table-wrap { overflow-x: hidden; }
  .emp-table-row {
    display: flex !important; flex-wrap: wrap; align-items: center;
    width: auto !important; min-width: 0 !important; gap: 4px 10px; padding: 10px 12px !important;
  }
  .emp-table-row.selected { padding-left: 9px !important; }
  /* Ячейки таблицы наследуют стиль шапки (.etc: заглавные, разрядка) — на
     ПК так задумано, а в карточке телефона имя заглавными с разрядкой не
     помещалось и читалось хуже. */
  .emp-table-row > .etc { overflow: visible; text-transform: none; letter-spacing: 0; }
  .emp-table-row .etr-name { font-size: 14px; }
  .emp-table-row > .etc-drag, .emp-table-row > .etc-check, .emp-table-row > .etc-num,
  .emp-table-row > .etc-contact, .emp-table-row > .etc-actions { display: none; }
  .emp-table-row > .etc-name { flex: 1 1 100%; min-width: 0; }
  .emp-table-row > .etc-name > div { min-width: 0; }
  .emp-table-row .etr-name { white-space: normal; }
  .emp-table-row > .etc-pos { padding-right: 0; }

  /* ── Заявки ─────────────────────────────────────────────────────────────
     Классы tk-* расставлены в tickets.js ровно для этих правил; на ПК у них
     нет ни одного правила. */
  .tk-stranica { padding: 14px 12px 24px !important; }
  .tk-m-skryt { display: none !important; }
  /* Фильтры свёрнуты: видно поиск и кнопку «Все фильтры». Двенадцать полей
     подряд отодвигали список заявок на два экрана вниз. Состояние — класс на
     <html>: список перерисовывается целиком, а класс корня это переживает. */
  .tk-m-filtry-knopka { display: inline-flex !important; align-items: center; gap: 6px; margin-top: 10px; }
  .tk-m-filtry-knopka::after { content: '▾'; }
  html.tk-m-filtry .tk-m-filtry-knopka::after { content: '▴'; }
  html:not(.tk-m-filtry) .tk-filtry-setka > :not(:first-child) { display: none; }
  html:not(.tk-m-filtry) .tk-filtry-dop { display: none !important; }
  .tk-filtry-prostye { grid-template-columns: minmax(0, 1fr) !important; }
  /* Готовые отборы («Мои открытые», «Закрытые»…) — одной лентой с прокруткой
     вбок, а не тремя строками: до первой заявки и так экран шапки. */
  #tk-presets { flex-wrap: nowrap !important; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; padding-bottom: 2px; }
  #tk-presets::-webkit-scrollbar { display: none; }
  #tk-presets > * { flex-shrink: 0; }
  /* Список — карточками: строка 1 — номер, отметки и «когда»; строка 2 —
     заголовок в две строки; дальше статус, приоритет, люди. Колонки выбирает
     человек (Колонки), поэтому раскладка держится на data-col, а не на
     порядке ячеек. */
  .tk-list-head { display: none !important; }
  .tk-row { display: flex !important; flex-wrap: wrap; align-items: center; gap: 6px 10px !important; padding: 12px 14px !important; }
  .tk-row > div:not([data-col]) { order: 0; }
  .tk-row > [data-col] { order: 3; }
  .tk-row > [data-col="indicators"], .tk-row > [data-col="ticket_number"] { order: 0; }
  .tk-row > [data-col="updated_at"] { order: 1; margin-left: auto; }
  .tk-row > [data-col="title"] { order: 2; flex: 1 1 100%; }
  .tk-row > [data-col="title"] > div > div:first-child {
    white-space: normal !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  }
  /* Карточка заявки: описание и переписка — во всю ширину, боковая колонка
     (сроки, люди, вложения) — под ними. В две колонки описание сжималось до
     одной буквы в строке (замер: «сжатый текст» 6 мест). */
  .tk-card-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .tk-dash-ryad { grid-template-columns: minmax(0, 1fr) !important; }

  /* ── Прочие разделы: «чтобы не ломались» (решение заказчика 11.10) ──────
     Цели: боковая панель 230px оставляла содержимому полоску в одну букву
     («Ц / е / л / и» столбиком) — панель над содержимым. Таблица целей и
     так в своей прокрутке вбок. */
  #goals-wrap > div { flex-direction: column; }
  #goals-wrap > div > aside { width: auto !important; min-width: 0 !important; border-right: 0 !important;
    border-bottom: 1px solid var(--border); padding: 12px !important; }
  #goals-wrap > div > div { padding: 14px 12px 40px !important; }
  /* База знаний: боковая панель 300px (пространство и дерево страниц) не
     сжимается и оставляла статье ~60px — статья шла столбиком (разбор
     11.10). Как у «Целей»: панель над статьёй, статья во всю ширину; дерево
     — не выше трети экрана, со своей прокруткой. */
  #kb-view-wrap > div { flex-direction: column; }
  #kb-sidebar { width: auto !important; max-height: 38vh; border-right: 0 !important;
    border-bottom: 1px solid var(--border); }
  /* Заголовок статьи делил строку с четырьмя кнопками («История»,
     «Редактировать», «Подстраница», «Удалить»), и они уходили за правый край.
     Заголовок — во всю ширину и помельче, кнопки — под ним с переносом; поля
     по краям — 14px вместо 28 (встроенные стили — отсюда !important). */
  #kb-main > header { padding: 14px 14px 0 !important; }
  .kb-zag { flex: 1 1 100% !important; font-size: 21px !important; }
  #kb-main > article, #kb-main > section { padding-left: 14px !important; padding-right: 14px !important; }
  /* Админ-панель: вкладки после «Логи» уходили за край без прокрутки — до
     «Тикетов», «Лицензий», «Ссылок» и «Домена» было не добраться. Лента
     вкладок прокручивается вбок, широкие таблицы — тоже. */
  .adm-vkladki { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .adm-vkladki::-webkit-scrollbar { display: none; }
  .adm-vkladki > button { flex-shrink: 0; }
  #admin-view-wrap > div { padding: 14px 12px 40px !important; }
  #admin-tab-body { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ═══ ПОД ПАЛЕЦ: телефон и планшет любой ширины ═══════════════════════════ */
@media (hover: none) and (pointer: coarse) {
  /* Размытие подложки — дорогая перерисовка на каждом кадре прокрутки, а
     шапка на экране всегда. На касании — плотный фон вместо размытия. */
  .header {
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
    background: var(--bg2) !important;
  }
  .modal-bg { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  /* Долгое нажатие на iOS даёт «Сохранить в Фото» и «Поделиться» мимо запрета
     копирования (contextmenu по касанию iOS не присылает). Только когда
     копировать нельзя — то же условие, что у защиты копирования, ВКЛЮЧАЯ её
     исключения: в «Заявках» и на доске объявлений копировать можно всем
     (index.html, «Защита от копирования») — там снимок из заявки сохранить
     можно, как и на ПК. */
  html:not([data-can-copy="1"]) img { -webkit-touch-callout: none; }
  #view-tickets img, html.tickets-active .modal-bg img,
  #view-board img, html.board-active .modal-bg img { -webkit-touch-callout: default; }
  /* Подсказка схемы живёт на наведении мыши. Касание присылает «наведение»
     вместе с нажатием, и подсказка оставалась висеть поверх открывшейся
     карточки сотрудника (её слой 10600 выше окон). Всё, что в ней написано,
     есть в самой карточке. */
  #tooltip { display: none !important; }
  /* Кнопки 24–28px — промах пальцем по соседней («удалить» рядом с
     «изменить»). */
  #home-wrap .hm-mini { width: 34px; height: 34px; }
  #home-wrap .hm-nav { width: 36px; height: 36px; }
}