/* ============ Адаптация под устройства (02.10.2026) ============
   Владелец: «не забудь полную адаптацию под все устройства, чтобы можно было и с айфона, и с
   андроида смотреть, и с ПК, и с ноута, и с планшета». Свой файл, подключён последним перед
   themes.css (index.html): экраны, их стили и темы правятся параллельно в других ветках, а
   поправки под устройства собраны здесь одним блоком — его легко слить и легко найти.
   Цвета — только токены тем; геометрия — токены app.css (--h-touch, --space-*, --radius-*).
   Вёрстку меряет tools/e2e_devices.py (телефоны, планшеты, ноутбуки, мониторы — матрица
   «экран × устройство»), главное закрепляет tests/test_panel_responsive.py.

   Режимы раскладки (app.css):
   · телефон — до 760px в ширину: прокрутка окна, липкая шапка, таб-бар и лист «Ещё»;
   · низкое окно — от 761px в ширину и до 560px в высоту (телефон боком): узкий рейл значков,
     прокрутка окна, липкая шапка;
   · островки — от 761px и от 561px (планшет, ноутбук, монитор): рейл, шапка и рабочая
     область — отдельные панели, прокрутка внутри #workspace-body.
   Касание — не ширина: планшет 1024–1180px тоже палец, поэтому цели касания — по
   (pointer: coarse), а не по ширине окна. */


/* ---------- 1. Поля ввода телефона — не мельче 16px ----------
   WHY: iOS увеличивает страницу при фокусе в поле мельче 16px и сама обратно не возвращает —
   правка числа в окне отчёта уводила всю панель вбок, её приходилось сводить пальцами. Кегль
   полей панели — 12–14px в десятке правил (часть с !important), поэтому правило одно, общее и
   с !important. Телефон боком (до 560px в высоту, палец) — тот же айфон. */
@media (max-width: 760px), (max-height: 560px) and (pointer: coarse) {
  /* html:root body — специфичность (0,2,3) выше любого правила полей с !important в app.css
     (самое сильное — «.live-toolbar input[type="search"]», (0,2,1)). */
  html:root body :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"],
    [type="file"], [type="button"], [type="submit"], [type="reset"], [type="image"],
    [type="hidden"]), select, textarea) { font-size: 16px !important; }
}


/* ---------- 2. Вырез, «чёлка» и полоса «домой»: env(safe-area-inset-*) ----------
   viewport-fit=cover (index.html) отдаёт панели весь экран айфона, и всё, что прижато к краю,
   обязано само отступить от выреза. */

/* Телефон: строка с ботом прокручивается вместе со страницей, а липкая шапка вставала на top: 0 —
   прямо под часы и «чёлку»: заголовок раздела прятался за строкой состояния. Шапка липнет ниже
   выреза, а над ней — полоса цвета шапки, под которую уезжает прокручиваемое содержимое. */
@media (max-width: 760px), (max-height: 560px) {
  html .app-shell > .workspace > .topbar { top: env(safe-area-inset-top, 0px) !important; }
  body::before {
    content: ""; position: fixed; top: 0; left: 0; right: 0; z-index: 21;
    height: env(safe-area-inset-top, 0px); background: var(--bar-solid, var(--topbar-bg));
    pointer-events: none;
  }
}

/* Телефон боком (низкое окно): вырез слева или справа. Рейл значков у самого края уходил под
   «чёлку», а «Обновить» и тема в шапке — под скругление справа.
   WHY до 1100px: все телефоны боком уже (844–932px), а низкое широкое окно — ноутбук с
   масштабом 125–150 % (1280×540) — получало рейл в 76px без правил «только значки» (они
   живут в планшетном диапазоне 761–1100) — подписи меню резались. */
@media (min-width: 761px) and (max-width: 1100px) and (max-height: 560px) {
  .app-shell { --rail: calc(64px + env(safe-area-inset-left, 0px)); }
  .app-shell .sidebar { padding-left: calc(10px + env(safe-area-inset-left, 0px)); }
  html .app-shell > .workspace > .topbar .topbar-inner {
    padding-right: calc(18px + env(safe-area-inset-right, 0px)) !important;
  }
  main.workspace > .view { padding-right: calc(var(--space-6) + env(safe-area-inset-right, 0px)); }
  .toast-stack {
    right: calc(24px + env(safe-area-inset-right, 0px));
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }
}

/* Телефон (до 760px) боком — iPhone SE, маленький Android (667–740 x 360–375): вырез слева и
   справа. Строка с ботом и таб-бар шли от самого края экрана — знак и крайние табы уходили под
   «чёлку». */
@media (max-width: 760px) {
  .app-shell .sidebar {
    padding-left: max(var(--space-3), env(safe-area-inset-left, 0px));
    padding-right: max(var(--space-3), env(safe-area-inset-right, 0px));
  }
  .tabbar {
    padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px);
  }
  /* Поля шапки — 16px, как у экрана под ней и строки бота над ней: 24px из «TOPBAR PREMIUM»
     app.css (!important) ставили заголовок на 8px правее карточек и отнимали место у периода.
     Выреза те поля не знали — у телефона боком отступ от «чёлки» шире. */
  html .app-shell > .workspace > .topbar .topbar-inner {
    padding-left: max(16px, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(16px, env(safe-area-inset-right, 0px)) !important;
  }
  /* Период рядом с длинным заголовком («Журнал загрузок» на 360–390px) резался до «Теку…» —
     действия шапки отвечают на свою ширину (правило @container ниже). */
  .topbar-actions { container: topbar-actions / inline-size; }
}
/* Тесно действиям шапки: период — без значка календаря и с полями уже, подпись — целиком.
   Шеврон остаётся — кнопка всё так же читается как выпадающий список. */
@container topbar-actions (max-width: 199px) {
  .exec-period-trigger > svg:not(.exec-period-caret) { display: none; }
  .topbar .exec-period-trigger { gap: 6px; padding-inline: 8px 7px; }
}
/* Маленький телефон (360px): заголовок раздела — 18px (заголовок экрана в iOS — 17pt), иначе
   «Журнал загрузок» оставлял периоду 130px. html — выше 20px !important из «TOPBAR PREMIUM». */
@media (max-width: 374px) {
  html .topbar-title h1, html #page-title { font-size: 18px !important; }
}
/* Маленький телефон боком (до 760 x 500px): таб-бар 56px и шапка в две строки съедали треть
   высоты 360px. Таб-бар ниже, значок и подпись — в строку, шапка — без надзаголовка раздела. */
@media (max-width: 760px) and (max-height: 500px) {
  :root, :root[data-theme] { --tabbar-h: 48px; }
  .tabbar .tabbar-item {
    display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 8px;
  }
  .topbar .eyebrow { display: none !important; }
  html .app-shell > .workspace > .topbar .topbar-inner {
    min-height: 48px !important; padding-top: 4px !important; padding-bottom: 4px !important;
  }
}

/* Островки (планшет как приложение на экране «Домой»): строка состояния сверху и полоса «домой»
   снизу закрывали шапку и подвал рейла — рамка островков отступает от них. */
@media (min-width: 761px) and (min-height: 561px) {
  html .app-shell {
    padding:
      max(var(--island-gap), env(safe-area-inset-top, 0px))
      max(var(--island-gap), env(safe-area-inset-right, 0px))
      max(var(--island-gap), env(safe-area-inset-bottom, 0px))
      max(var(--island-gap), env(safe-area-inset-left, 0px));
  }
}

/* Окна дашборда (.modal-backdrop — не <dialog>): на телефоне с открытой клавиатурой iOS не
   меняет 100dvh, и окно по центру экрана уходило низом под клавиатуру — «Сохранить» не
   нажать. --kb-inset (core/shell.js, visualViewport) поднимает окно над клавиатурой. */
.modal-backdrop {
  padding:
    max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px))
    calc(max(16px, env(safe-area-inset-bottom, 0px)) + var(--kb-inset, 0px))
    max(16px, env(safe-area-inset-left, 0px));
}
.modal-backdrop .modal-dialog {
  max-height: calc(
    100dvh - 32px - var(--kb-inset, 0px)
    - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)
  ) !important;
}

@media (max-width: 760px) {
  /* Окна дашборда (.modal-backdrop) — нижние шторки во всю ширину, как окна-<dialog> телефона
     (app.css): по центру с полями 16px календарь «Своего периода» сжимал дни до 42px, а окна
     «Отчёт» и «Проект» теряли по 32px ширины. Шторка поднимается над клавиатурой. */
  .modal-backdrop { padding: 0; align-items: flex-end; }
  .modal-backdrop .modal-dialog {
    width: 100%; max-width: none !important; margin-bottom: var(--kb-inset, 0px);
    max-height: calc(92dvh - var(--kb-inset, 0px)) !important;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important; border-bottom: 0 !important;
  }
  .modal-backdrop .modal-footer {
    padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important;
  }
  /* Поля окна отчёта в две колонки: подпись «Итого лидов (из отчёта)» в две строки опускала
     своё поле ниже соседнего — поля ряда выравниваются по низу. */
  .modal-backdrop .form-row { align-items: end; }
  /* WHY и последнему полю ряда — нижний отступ (05.10.2026): у последнего поля его не было
     (.form-group:last-child), у соседа — 16px, и выравнивание по низу опускало последнее поле на
     16px ниже соседнего («Диалоги | Итого лидов», «План | Факт» окна отчёта). */
  .modal-backdrop .form-row > .form-group:last-child { margin-bottom: 16px; }
  /* Нижние шторки-<dialog> стоят у низа экрана; с клавиатурой iOS их низ (кнопки окна) был под
     ней — шторка поднимается на высоту клавиатуры. */
  .modal-dialog:not(.image-viewer) { margin-bottom: var(--kb-inset, 0px); }
  /* Тосты — над таб-баром во всю ширину с полями 12px, а не прижатые к правому краю. */
  .toast-stack {
    left: max(12px, env(safe-area-inset-left, 0px));
    right: max(12px, env(safe-area-inset-right, 0px));
    width: auto;
  }
}


/* ---------- 3. Касание: цели не меньше 44px ----------
   WHY: на телефоне и планшете (pointer: coarse) палец промахивался по кнопкам 26–40px — табы
   графиков, крестики окон, стрелки календаря, чипы фильтров, значки рейла планшета. 44px —
   минимум Apple и WCAG 2.5.5. Высоты кнопок и полей панели — токены app.css, на касании они
   поднимаются до --h-touch разом; ниже — компоненты со своими числами в пикселях. */
@media (pointer: coarse) {
  :root, :root[data-theme] {
    --btn-h: var(--h-touch);
    --btn-h-sm: var(--h-touch);
    --h-control: var(--h-touch);
    --h-control-sm: var(--h-touch);
  }
  /* Выпадающие списки, у которых высота задана своим числом (фильтры «Сети», «Системы»). */
  .ui-select-trigger { --ui-select-h: var(--h-touch) !important; }
  .ui-select-option, .exec-period-option, .exec-chart-style-option, .palette-item,
  .nav-custom-item, .drill-pop-link, .exec-donut-legend-row, .ingest-example-summary {
    min-height: var(--h-touch);
  }
  #command-palette-input { min-height: var(--h-touch); }
  /* Подсказки клавиш палитры (↑↓, ↵, Esc) пальцу ни к чему — место списку команд. */
  .command-palette-footer, .command-palette-search-wrap .palette-kbd { display: none; }

  /* Рейл: пункты меню (и узкий рейл значков планшета), подвал и подпись модели. */
  .app-shell .main-nav .nav-item { min-height: var(--h-touch); }
  .app-shell .rail-foot { flex-wrap: wrap; }
  .app-shell .rail-foot .icon-button {
    width: var(--h-touch); min-width: var(--h-touch);
    height: var(--h-touch); min-height: var(--h-touch);
  }
  .app-shell .rail-line-btn { min-height: var(--h-touch); }
  .sheet-dialog .sheet-item { min-height: var(--h-touch); }

  /* Компактные кнопки: на телефоне app.css держит их 40px своим числом, а не токеном. */
  .btn-compact:is(.primary-button, .secondary-button, .ghost-button, .danger-button) {
    min-height: var(--h-touch);
  }
  /* Кнопки с собственной высотой. */
  :root .text-button, :root .icon-text-button, .exec-reporters-manage, .bt-button,
  .access-rights-actions .btn-compact, .geo-row.is-editing .geo-actions button,
  .live-event-action, .toast-action, #view-system .sys-btn-sm,
  .conversation-composer .primary-button, .modal-backdrop .modal-footer .exec-delete-project-btn,
  #retry-all-dead-jobs, .dead-job .secondary-button {
    min-height: var(--h-touch); height: auto;
  }
  .exec-icon-btn, .plans-week .icon-button, .req-actions .icon-button,
  .settings-project-order .icon-button, .image-viewer .icon-button,
  .image-viewer-circle-bar .icon-button, .modal-backdrop .modal-close, .cal-nav, .cal-nav-spacer {
    width: var(--h-touch); min-width: var(--h-touch);
    height: var(--h-touch); min-height: var(--h-touch);
  }
  .cal-month-head { grid-template-columns: var(--h-touch) minmax(0, 1fr) var(--h-touch); }
  .cal-grid td, .cal-day { height: var(--h-touch); }
  .cal-day { max-width: none; }
  #test-form .test-composer-row {
    grid-template-columns: var(--h-touch) minmax(0, 1fr) var(--h-touch);
  }
  #test-form .test-attach-btn, #test-form .send-button {
    width: var(--h-touch); height: var(--h-touch); min-height: var(--h-touch);
  }
  #test-form .test-composer-row textarea { min-height: var(--h-touch); }
  /* Крестик тоста — 44px, а плашка не растёт: отрицательные поля съедают прибавку. */
  .toast-close {
    width: var(--h-touch); min-width: var(--h-touch); height: var(--h-touch);
    margin: -12px -12px -12px 0;
  }
  /* Кнопка календаря внутри поля даты — во всю высоту поля, по правому краю. */
  .date-field-button { top: 0; right: 0; width: var(--h-touch); height: 100%; margin-top: 0; }
  .date-field-input.form-input { padding-right: calc(var(--h-touch) + 4px); }

  /* Сегменты, вкладки и значки вида графика. */
  .segmented-control > button, #view-dash .dash-range, .proj-tab, .media-purpose-control span {
    min-height: var(--h-touch);
  }
  /* Кнопка вида графика — не уже --exec-head-btn-w (app.css, блок exec-head-buttons), высота —
     --btn-h, поднятый выше до 44px: своего минимума ширины ей здесь не нужно (19.10.2026). */

  /* Чипы и переключатели. */
  .exec-chip, .tag-chip, .flow-keyword-hint, .live-tag-filter, .drp-preset, .flow-audit-chip,
  .bt-chip, .access-chip, .access-jump, .exec-active-toggle, .req-toggle, .modal-switch,
  label.exec-switch, .ps-check, .bt-check,
  #view-system .sys-switch, .conversation-link, .live-open, .customer-link,
  .ps-howto summary, .ps-more summary, #view-system .sys-nav-item {
    min-height: var(--h-touch);
  }
  /* themes.css подключён позже и задаёт RU | EN свою высоту — селектор длиннее его. */
  :root .lang-segmented .lang-segment {
    height: auto; min-height: var(--h-touch); min-width: var(--h-touch);
  }
  .auth-dialog .auth-language { top: 50%; transform: translateY(-50%); }
  :root .icon-text-button, .live-open, .conversation-link { min-width: var(--h-touch); }
  /* core/live.css подключается из live.js — позже этого файла: селекторы с id. */
  #live-deploy .live-deploy-reload { min-height: var(--h-touch); }
  #live-deploy .live-deploy-close {
    flex: none; width: var(--h-touch); min-width: var(--h-touch); height: var(--h-touch);
  }
  .live-row .live-row-actions > .secondary-button { min-height: var(--h-touch); }
  /* Поиск «Системы»: на телефоне system.css держит его 42px своим числом. */
  #view-system .sys-search-input { height: var(--h-touch); }
  .live-open, .customer-link, .ps-howto summary, .ps-more summary {
    display: inline-flex; align-items: center;
  }
  .color-swatch { width: var(--h-touch); height: var(--h-touch); }

  /* Ссылка-имя проекта в таблицах и карточках KPI/БАИНГа, сортировка колонок. */
  a.drill-link.proj-avatar-inline {
    display: inline-flex; align-items: center; min-height: var(--h-touch);
  }
  .th-sort { min-height: var(--h-touch); }

  /* Поля со своей высотой. */
  .plans-input .form-input, .conversation-annotation input, .flow-edge-keywords input {
    height: var(--h-touch);
  }
  .conversation-annotation textarea, .conversation-composer textarea { min-height: var(--h-touch); }
  #view-system { --sys-field-h: var(--h-touch); }

  /* Лента фото приветствия: три кнопки по 44px не помещались в плитку 96–108px. 140px — три
     кнопки с зазором 2px, и две плитки в ряд даже на 360px. */
  .greeting-tile, .greeting-add { width: 140px; height: 140px; }
  .greeting-tile-actions { gap: 2px; padding: 2px; }
  .greeting-tile-actions .icon-button {
    width: var(--h-touch); min-width: var(--h-touch);
    height: var(--h-touch); min-height: var(--h-touch);
  }
}

/* Телефон: знак «AI CRM» в строке с ботом — тоже цель касания (ссылка на «Главную»). */
@media (max-width: 760px) {
  .sidebar a.brand {
    min-width: var(--h-touch); min-height: var(--h-touch); justify-content: center;
  }
}


/* Поповеры и «Живые» пальцем на планшете (25.10.2026): 44px у этих целей были только в
   (max-width: 760px), а iPad шире и тоже под пальцем — «Настроить шапку» 40px, языки 40px,
   «Ничего» 26px и строки групп 30px в «Настроить меню», «Открыть в Telegram» у «Живых» 38px
   (замер tools/e2e_devices.py, iPad 820 и iPad боком 1180). html — вес выше, чем у базовых
   правил themes.css (он подключён после этого файла). */
@media (pointer: coarse) {
  html :is(#appearance-topbar-customize, .lang-option, .nav-custom-item, .nav-custom-group-row,
    .nav-custom-global-btn, .live-row .customer-link) { min-height: var(--h-touch, 44px); }
}

/* ---------- 4. Касание: наведение не залипает ----------
   WHY: на касании :hover остаётся на элементе после тапа до следующего тапа — карточка медиа
   так и висела приподнятой, плитка сводки — с рамкой «под курсором». Поднятие и рамки
   наведения — только там, где наведение есть. */
@media (hover: none) {
  .media-card:hover, .pack-card:hover, .exec-kpi-card:hover, .topbar-btn:hover,
  .color-swatch:hover:not(:disabled) { transform: none; }
  /* 25.10.2026: те же залипания у кнопки помощника, карточек шаблонов ГЕО, «Регистраций» СТАТЫ,
     «Сообщить» в истории, страницы входа и образцов темы (подъём или увеличение на :hover).
     html — вес выше, чем у themes.css (подключён позже); !important — против масштаба
     .theme-swatch-color-picker:hover, заданного с !important. */
  html :is(.brand-tg-badge, .assistant-dock-trigger, .geo-template-card, .changelog-notify-btn,
    .pnl-reg-card, .welcome-btn-login, .welcome-hero-cta, .welcome-bento-card, .welcome-step-card,
    .theme-swatch-btn, .theme-swatch-color-picker):hover { transform: none !important; }
  .template-card:hover, .project-card:hover {
    border-color: var(--border); box-shadow: var(--shadow-xs);
  }
  .image-viewer-video-frame.is-playing .image-viewer-circle-play { opacity: .55; }
  /* Карточки сводки, строки таблиц и проектов, чипы, легенда бублика: после тапа «наведение»
     оставалось — карточка с акцентной рамкой и залитым значком выглядела выбранной. */
  a.exec-kpi-card.is-drill:hover, .m-card.is-drill-row:hover,
  .exec-kpi-card.is-drill[role="button"]:hover:not(.is-sorted) { border-color: var(--border); }
  a.exec-kpi-card.is-drill:hover .exec-kpi-icon-wrap {
    background: var(--accent-soft); color: var(--accent);
  }
  a.is-drill:hover:not(:focus-visible) .exec-drill-cta { color: var(--muted); }
  a.is-drill:hover:not(:focus-visible) .exec-drill-cta svg { transform: none; }
  /* Плитка плана — своя заливка: после тапа — как без наведения, а не прозрачная. */
  a.exec-prog-item.is-drill:hover {
    background: var(--surface, #fff); border-color: var(--border); box-shadow: var(--shadow-xs); transform: none;
  }
  .proj-card-header:hover, .drill-row:hover:not(:focus-visible),
  .data-table tbody tr.is-drill-row:hover, .exec-donut-legend-row:hover,
  button.exec-donut-legend-row:hover:not(.is-active) { background: transparent; }
  .exec-chip:hover:not(.is-active) { background: var(--chip-bg); color: var(--text-secondary); }
  /* Подсказка по долгому нажатию (ui/tooltip.js): системное меню «Скопировать/Открыть» iOS над
     значком с подсказкой ни к чему. */
  [data-tooltip] { -webkit-touch-callout: none; }
}


/* ---------- 5. Телефон: раскладка экранов ---------- */
@media (max-width: 760px) {
  /* Лист «Ещё»: двадцать пунктов в столбик не помещались в 92% высоты — «Система», «Доступ к
     ботам» и язык оставались ниже края без прокрутки (у окна overflow: hidden). Две колонки и
     своя прокрутка: виден весь лист, длинная подпись переносится внутри пункта. */
  .sheet-dialog[open] { overflow-y: auto; overscroll-behavior: contain; }
  .sheet-dialog .sheet-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sheet-dialog .sheet-group { grid-column: 1 / -1; }
  .sheet-dialog .sheet-item {
    min-width: 0; grid-template-columns: 18px minmax(0, 1fr);
    white-space: normal; text-align: left; line-height: 1.25; padding-block: 6px;
  }

  /* Журнал загрузок карточками: две кнопки «Открыть отчёт» и «Исходный текст отчёта» не
     помещались в 360–390px и распирали карточку за край экрана. */
  .journal-card { grid-template-columns: minmax(0, 1fr); min-width: 0; }
  .journal-card-actions { flex-wrap: wrap; }
  .journal-card-actions > * { flex: 1 1 auto; }

  /* Строка проекта: пять показателей (SMS, Спенд, ПДП, ФД, Тотал — f7806a5) остаются все, но
     встают своим рядом под именем: в одну строку с ними имя сжималось до «К…», а «данные по
     01.10» вылезало из своей колонки. Подписи и числа — снова читаемого кегля. */
  .proj-card-header {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "ava main chev" "metrics metrics metrics"; row-gap: 10px;
  }
  .proj-card-header > .proj-avatar { grid-area: ava; }
  .proj-card-header > .proj-head-main { grid-area: main; }
  .proj-card-header > .proj-chevron { grid-area: chev; }
  .proj-card-header > .proj-header-metrics {
    grid-area: metrics; justify-content: space-between; gap: 6px; margin-left: 0;
    padding-top: 8px; border-top: 1px solid var(--divider);
  }
  .proj-header-metric { min-width: 0; align-items: flex-start; }
  .proj-header-metric-label { font-size: 10.5px; }
  .proj-header-metric-value { font-size: 13.5px; }

  /* Меню периода: от правого края пилюли — слева от неё место есть всегда, справа — нет. */
  .exec-period-menu { left: auto; right: 0; min-width: max(100%, 240px); }

  /* Сегменты фильтров в тулбарах («Все / Фото / Видео…»): шире 360px — прокрутка вбок внутри
     себя, а не за край экрана. */
  .list-toolbar .segmented-control, .live-toolbar .segmented-control {
    max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
  }
  .list-toolbar .segmented-control::-webkit-scrollbar,
  .live-toolbar .segmented-control::-webkit-scrollbar { display: none; }
  .list-toolbar .segmented-control > button,
  .live-toolbar .segmented-control > button { flex: 0 0 auto; }

  /* «Компания, язык, гео»: в две колонки гео оставалось одно на полстроки. */
  .field-grid.three-columns { grid-template-columns: minmax(0, 1fr); }

  /* «Оформление» на айфоне доходит до низа экрана: последние пункты — над полосой «домой».
     :root — themes.css подключён позже и задаёт поповеру свои поля. */
  :root .theme-popover { padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }

  /* Палитра-шторка: последний пункт не под полосой «домой». */
  .command-palette-results { padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }

  /* Просмотр фото и видео: app.css ограничивал высоту по 100vh (окно без панели адреса), и
     нижний край снимка с кнопками зума уходил под панель браузера. */
  .image-viewer img, .image-viewer video { max-height: calc(100dvh - 170px); }

  /* Активный таб — светлый акцент: --accent на тёмном таб-баре давал 4,3:1 у подписи 11px. */
  .tabbar .nav-item.tabbar-item.is-active { color: var(--accent-strong); }

  /* Календарь «Своего периода» в шторке: семь колонок по 44px помещаются и в 360px. */
  .modal-backdrop .modal-dialog.modal-date-range .modal-body { padding: 14px 12px !important; }
  .drp-calendar { padding: 8px 4px 4px; }
}


/* История отчётов проекта (семь колонок с «Исправить» и «Удалить»): на телефоне таблица
   прокручивается вбок внутри карточки — дата остаётся на месте, как имя проекта в KPI
   (.data-table.sticky-first): цифры не отрываются от своего дня. */
@media (max-width: 760px) {
  .proj-history-table :is(th, td):first-child { position: sticky; left: 0; z-index: 1; }
  .proj-history-table th:first-child { background: var(--surface-muted); }
  .proj-history-table td:first-child { background: var(--surface); }
}

/* «Последние загрузки» на «Главной» в 360–480px: кнопка исходного текста уезжала за правый край
   таблицы под прокрутку вбок. Строка и так ведёт в журнал к этой записи, где кнопка есть, —
   колонка уходит, дата, проект и статус помещаются целиком. */
@media (max-width: 480px) {
  .exec-recent-table th:nth-child(6), .exec-recent-table td:nth-child(6) { display: none; }
}

/* Низкое окно — телефон боком, тем более с клавиатурой (≈210px): шапка и подвал окна
   занимали 140px из них, и поле ключа при входе оставалось ниже края тела окна, а подвал окна
   «Новый проект» срезался. Шапка, тело и подвал ужимаются — место отдаётся полю. Отступ под
   полосу «домой» в подвале здесь не нужен: окно либо по центру (боком), либо над клавиатурой. */
@media (max-height: 480px) {
  .modal-dialog:not(.auth-dialog) .modal-header, .modal-backdrop .modal-header {
    min-height: 0; padding-top: 8px !important; padding-bottom: 8px !important;
  }
  .modal-dialog .modal-header::before { display: none; }
  .modal-dialog .modal-header .eyebrow { display: none; }
  .modal-dialog .modal-actions, .modal-backdrop .modal-footer {
    min-height: 0; padding-top: 8px !important; padding-bottom: 8px !important;
  }
  .modal-dialog .modal-body, .modal-backdrop .modal-body {
    padding-top: 10px !important; padding-bottom: 8px !important;
  }
  .flow-templates-dialog .modal-header { flex: none; }
}

/* Палитра команд: список — своей прокруткой внутри окна высотой не больше экрана; в низком
   окне (телефон боком) результаты и подсказки клавиш срезались окном. */
.command-palette-dialog[open] { display: flex; flex-direction: column; }
@media (min-width: 761px) {
  .command-palette-dialog[open] { max-height: calc(100dvh - 32px - var(--kb-inset, 0px)); }
}
.command-palette-results { flex: 0 1 auto; min-height: 0; }
.command-palette-search-wrap, .command-palette-footer { flex: none; }

/* Меню «Вид графиков» и периода в низком окне: ниже края экрана — своя прокрутка. */
@media (max-height: 560px) {
  .exec-chart-style-menu, .exec-period-menu {
    max-height: calc(100dvh - 150px); overflow-y: auto; overscroll-behavior: contain;
  }
}

/* Окна без <form> (каркасы воронок, горячие клавиши): тело не было ограничено по высоте, и в
   шторке телефона нижние карточки срезались окном (overflow: hidden) — без прокрутки. */
.flow-templates-dialog[open], .shortcuts-dialog[open] { display: flex; flex-direction: column; }
.flow-templates-dialog .modal-body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
}
.shortcuts-dialog[open] { overflow-y: auto; overscroll-behavior: contain; }


/* ---------- 6. Читаемость над анимированным фоном ----------
   WHY: холст рабочей области полупрозрачный (--veil, themes.css), а у чипов и плашек на нём в
   тёмных темах фон — полупрозрачный оттенок (--accent-soft, --warning-surface): под ними
   светился фон, и подпись «italia», «0 ботов», «Итого», «335%» падала до 3,5:1. Под оттенок
   кладётся непрозрачная поверхность — вид тот же, а контраст не зависит от того, что под
   карточкой. */
:root[data-theme="dark"] :is(.models-ws, .req-ws, .bots-chip.is-total, .exec-buying-total-tag, .exec-buyers-total-tag) {
  background: linear-gradient(var(--accent-soft), var(--accent-soft)), var(--surface);
}
:root[data-theme="dark"] .m-card.is-total {
  background: linear-gradient(rgb(var(--accent-rgb) / .14), rgb(var(--accent-rgb) / .14)), var(--surface);
}
:root[data-theme="dark"] .kpi-pct.val-positive {
  background: linear-gradient(rgba(16, 185, 129, .18), rgba(16, 185, 129, .18)), var(--surface);
}
:root[data-theme="dark"] .kpi-pct.val-warning {
  background: linear-gradient(rgba(245, 158, 11, .18), rgba(245, 158, 11, .18)), var(--surface);
}
:root[data-theme="dark"] .kpi-pct.val-danger {
  background: linear-gradient(rgba(239, 68, 68, .18), rgba(239, 68, 68, .18)), var(--surface);
}
:root[data-theme="dark"] .dead-jobs {
  background: linear-gradient(var(--warning-surface), var(--warning-surface)), var(--surface);
}

/* Телефон в тёмной теме: холст под текстом плотнее (вуаль 72%), шапка и таб-бар —
   непрозрачные. Без размытия под ними: блюр поверх анимированного фона пересчитывается каждый
   кадр — на телефоне это лишняя работа видеокарты на всю ширину экрана (раздел 7). */
@media (max-width: 760px) {
  /* :root:root — выше блока тёмной темы в themes.css: тот подключён позже и иначе перебил бы. */
  :root:root[data-theme="dark"] { --veil: 72%; --veil-vivid: 64%; }
}
@media (max-width: 760px), (max-height: 560px) and (pointer: coarse) {
  /* Цвет шапки темы, положенный на холст: тот же оттенок, но непрозрачный — сквозь таб-бар без
     размытия проступали бы строки списка под ним. */
  :root { --bar-solid: linear-gradient(var(--topbar-bg), var(--topbar-bg)), var(--bg); }
  .topbar, .tabbar, .flow-toolbar-actions { background: var(--bar-solid) !important; }
}
/* Светлая тема на планшете и мониторе: шапка-островок — 88 % белого над анимированным фоном.
   Её серые подписи («Дашборд» над заголовком, «Обновлено …», «Без изменений») и на чистом
   фоне дают 4,54:1, а сквозь 12 % пятен — 4,48:1, ниже AA. Холст светлой темы по той же причине
   почти глухой (themes.css, --veil 98 %) — шапке тот же цвет, положенный на непрозрачный фон;
   размытие под непрозрачной шапкой — лишняя работа видеокарты. */
:root[data-theme-id="light"] .topbar {
  background: linear-gradient(var(--topbar-bg), var(--topbar-bg)), var(--bg) !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}


/* ---------- 7. Производительность на телефоне ----------
   Фон уже легче на телефоне (themes.css: три слоя вместо четырёх) — то же и боком. Размытие
   под шапкой, таб-баром, окнами и меню — снято: под ним анимированный фон, и каждый кадр
   размытие считалось заново. Цвета у них и так плотные. */
@media (max-width: 760px), (max-height: 560px) and (pointer: coarse) {
  .ambient-layer.layer-d { display: none; }
  .topbar, .tabbar, .flow-toolbar-actions, .modal-backdrop, .workspace-dropdown-menu,
  .command-palette-dialog, .shortcuts-dialog,
  :root[data-theme] .modal-dialog, :root[data-theme] .flow-inspector {
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  }
  .modal-dialog::backdrop, .command-palette-dialog::backdrop {
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
}


/* ---------- 8. Планшет ---------- */
/* Узкий рейл значков (761–1100px): от подписи модели остаётся значок, и кнопка сжималась до
   его ширины — 17px. */
@media (min-width: 761px) and (max-width: 1100px) {
  .app-shell .rail-model-row .rail-model-btn { flex: none; width: 40px; min-width: 40px; }
}
@media (min-width: 761px) and (max-width: 1100px) and (pointer: coarse) {
  .app-shell .rail-model-row .rail-model-btn { width: var(--h-touch); min-width: var(--h-touch); }
}
/* Сценарии и исход на планшете в портрете: с кнопками 44px строка шире списка — колонка
   условия уступает. */
@media (min-width: 761px) and (max-width: 980px) {
  .script-row { grid-template-columns: 38px minmax(120px, .8fr) minmax(0, 1.2fr) auto; }
}

/* «Свой период» на касании: два месяца рядом — по семь дней в 44px, окно шире (660 → 740px). */
@media (min-width: 761px) and (pointer: coarse) {
  .modal-backdrop .modal-dialog.modal-date-range { max-width: 740px; }
}

/* «Вид графиков»: на планшете кнопка переносится под приветствие к левому краю, а меню
   открывалось от её правого края — влево за край рабочей области (срезано на 70px). Кнопка
   держится у правого края и в перенесённой строке. С 19.10.2026 «Вид графиков» и «Настроить
   карточки» — одна пара (app.css, блок exec-head-buttons): у правого края держится пара. */
@media (min-width: 761px) {
  .exec-welcome-actions { margin-left: auto; }
}
/* Таблица «Живых» (от 1024px): пять колонок с минимумами 750px не входили в iPad боком с
   полным рейлом (1180px) — строки срезались на 46px. Минимумы колонок меньше там, где рейл
   полный, а окно ещё не широкое. */
@media (min-width: 1024px) and (max-width: 1339px) {
  .live-list-header, .live-row {
    grid-template-columns:
      minmax(150px, 1.5fr) minmax(100px, .9fr) minmax(130px, 190px) minmax(120px, 180px) 136px;
    column-gap: var(--space-3);
  }
}
/* Итог БАИНГа: семь плиток в ряд не помещались в карточку уже 1200px — «$10 052» вылезало из
   плитки. Сколько плиток в ряду, решает ширина карточки (container query), а не окна: рейл
   то полный, то значками, то скрыт. */
.exec-buying-total, .exec-buyers-total { container-type: inline-size; }
@container (max-width: 1200px) {
  .buying-summary-banner { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@container (max-width: 560px) {
  .buying-summary-banner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .buying-summary-banner > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}


/* ---------- 9. Большие мониторы ----------
   WHY: на 1920 и 2560px содержимое стояло колонкой 1180px посреди островка, по бокам — по
   200–540px пустоты, а заголовок раздела в шапке — далеко от её левого края. Шире 1680px
   колонка растёт; формы внутри (.content-column, 920px) остаются той же ширины. Графики
   перерисовываются по ширине карточки (executive.js), а не растягиваются. */
:root { --content-max: 1560px; }
@media (min-width: 1680px) and (min-height: 561px) { :root { --content-max: 1720px; } }
@media (min-width: 2100px) and (min-height: 561px) { :root { --content-max: 1980px; } }
.workspace-body > .view, main.workspace > .view {
  width: 100%;
  max-width: var(--content-max);
  padding-inline: clamp(16px, 2.5vw, 36px);
}
.topbar-inner {
  width: 100%;
  max-width: var(--content-max);
  padding-inline: clamp(16px, 2.5vw, 36px);
}
#view-dash .dash-wrap {
  width: 100%;
  max-width: var(--content-max);
}

/* ---------- Прод 02.10.2026: то, что видно только на настоящих данных ----------
   Прогон tools/e2e_devices.py по проду после выката раунда 4 (локальный посев этого не
   показывал: один бот, короткие названия, мало событий). */

/* Список ботов — в верхнем слое, его место считает app.js (placeWorkspaceMenu, ревью
   02.10.2026): правила места для телефона (лист под шапкой) и рейла значков (fixed справа от
   рейла) отсюда убраны. Рейл значков с прокруткой и маской затухания срезал fixed-список до
   ширины рейла; лист телефона теперь снизу — app.css, [data-placement="sheet"]. */

/* «Медиа»: наборы — одна колонка, которую длинное имя файла не распирает за край экрана;
   кнопки карточки переносятся, а не срезаются краем карточки (планшеты, 1280). */
.pack-list { grid-template-columns: minmax(0, 1fr); }
.pack-card { min-width: 0; }
.pack-card-head { flex-wrap: wrap; }
.pack-files li { min-width: 0; overflow-wrap: anywhere; }
.media-card-footer { flex-wrap: wrap; gap: 6px; }
.media-card-footer .row-actions { flex-wrap: wrap; justify-content: flex-end; min-width: 0; }

/* Пальцем — цели не меньше 44px и там, где их нашли настоящие данные: ссылки @username у
   ботов и в «Доступе», ссылка-заголовок таблицы, «Ещё N» у команд, строки событий «Живых
   диалогов», крестик метки в переписке (отрицательные поля держат чип компактным). */
@media (pointer: coarse) {
  .bots-card-meta a.bots-handle,
  .ps-card-meta a.access-handle-link,
  .ps-card-title h3 > a { display: inline-flex; align-items: center; min-height: 44px; }
  .bots-more { min-width: 44px; min-height: 44px; }
  #live-events .live-event[role="button"] { min-height: 44px; }
  #conversation-tags .tag-remove { min-width: 44px; min-height: 44px; margin: -12px -12px -12px -6px; }
}


/* ---------- 10. Телефон на настоящих данных, 15.10.2026 ----------
   Владелец 15.10.2026: «надо сделать адаптацию под мобилу, я зашёл с телефона в CRM — всё
   кривое, невозможно пользоваться». Прогон tools/e2e_devices.py по копии прода на 360–430px и
   боком: с 09–14.10 поверх адаптации 02.10 легли плавающий AI-Помощник, «широкий» макет и
   отступы «без пустот» — на телефоне они закрыли таб-бар, низ экранов и часть кнопок. Правила
   раздела — только для телефона (до 760px) и для пальца (pointer: coarse); ноутбук и монитор —
   как были. Экран страница знает по html[data-view] (core/shell.js, switchView). */

/* Кнопка AI-Помощника (themes.css: 24px от низа, z-index 999) лежала прямо на «Ещё» таб-бара:
   палец открывал Помощника, а до «Команды», «Системы» и «Истории» было не дойти. На телефоне
   кнопка — над таб-баром у правого края, а там, где над таб-баром своя полоса, — над ней:
   «Сохранить» у «Сети» (её высота — как --flow-savebar-h в app.css; без права правки полосы
   нет) и панель несохранённого у «Системы» (html[data-savebar] ставит screens/system.js). Слой —
   ниже тостов, тура и окон: кнопка больше не ложится поверх них. Тосты встают над кнопкой. */
@media (max-width: 760px) {
  html {
    --dock-size: 48px;
    --dock-lift: 0px;
    --dock-clear: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px) + var(--dock-lift));
  }
  html[data-view="flow"][data-caps~="edit_ai"] {
    --dock-lift: calc(var(--h-touch) + 2 * var(--space-2) + 1px);
  }
  html[data-view="system"][data-savebar] { --dock-lift: calc(var(--space-3) + 68px); }
  html .assistant-floating-dock {
    z-index: 30;
    right: max(16px, env(safe-area-inset-right, 0px));
    bottom: calc(var(--dock-clear) + 12px);
  }
  html .assistant-dock-trigger { width: var(--dock-size); height: var(--dock-size); }
  html .toast-stack { bottom: calc(var(--dock-clear) + var(--dock-size) + 24px); }
  /* Листают вниз — кнопка гаснет на месте (screens/assistant.js, .is-tucked): не уезжает вниз,
     чтобы по дороге не лечь поверх «Ещё». */
  html .assistant-floating-dock { transition: transform .18s ease, opacity .18s ease; }
  html .assistant-floating-dock.is-tucked {
    transform: translateY(12px) scale(.85); opacity: 0; pointer-events: none;
  }
}
@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  html .assistant-floating-dock { transition: none; }
}

/* Низ экрана уходил под таб-бар: «без пустот» (themes.css: .workspace-body > .view —
   padding-bottom 72px !important; «Главная» — 24px !important, в плотных режимах меньше)
   перебивал отступ телефона под таб-бар и полосу «домой» айфона — последние карточки и строки
   таблиц оставались под таб-баром (на айфоне 18px, на «Главной» 66px). Теперь снизу место под
   таб-бар, полосу «домой», кнопку Помощника и зазор — последнее докручивается над ними. ID в
   селекторе «Главной» — сильнее html[data-density] #view-exec-overview.view из themes.css. */
@media (max-width: 760px) {
  html body .workspace-body > .view,
  :root body .workspace-body > #view-exec-overview.view {
    padding-bottom: calc(var(--dock-clear) + var(--dock-size) + 24px) !important;
  }
}

/* Помощник на телефоне — на весь экран (420px дровера больше ширины телефона) и с отступами от
   выреза и полосы «домой». Закрытый дровер уезжает вправо — и прячется целиком (visibility):
   иначе его поля и кнопки за краем экрана оставались в обходе Tab и в замере «за краем окна»
   на каждом экране. Скрывается после выезда (задержка = длительность сдвига), открывается сразу. */
html .assistant-drawer.is-closed {
  visibility: hidden;
  transition: transform .3s cubic-bezier(.16, 1, .3, 1), visibility 0s linear .3s;
}
@media (max-width: 760px) {
  /* Снизу — полоса «домой» или экранная клавиатура (--kb-inset пишет visualViewport, app.css
     §4.4): поле просьбы остаётся над ней, а не под ней (20.10.2026). */
  html .assistant-drawer {
    width: 100%; max-width: none; height: 100dvh; border-left: 0;
    padding:
      env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px)
      max(env(safe-area-inset-bottom, 0px), var(--kb-inset, 0px)) env(safe-area-inset-left, 0px);
  }
  /* Шапка в одну строку не помещалась: выбор модели выдавливал «Закрыть» за правый край
     (368…412px на 390px). Сетка шапки (themes.css, 10.7): заголовок и кнопки — строкой,
     крестик у правого края, модель — строкой под ними; кнопки — 44px под палец. */
  html .assistant-drawer { --assistant-pad: 16px; }
  html .assistant-drawer-header { padding: 12px var(--assistant-pad) 12px; gap: 10px 4px; }
  html .assistant-model-field { min-height: var(--h-touch); }
  html .assistant-drawer-tools .icon-button { width: var(--h-touch); height: var(--h-touch); flex: none; }
  html .assistant-drawer-footer { padding: 10px var(--assistant-pad) 10px; }
  /* Поле — 16px (раздел 1, без увеличения iOS), инструменты — 44px под палец. */
  html #assistant-drawer-input { min-height: 48px; font-size: 16px; }
  html :is(.assistant-tool-btn, .assistant-send-btn) { width: var(--h-touch); height: var(--h-touch); }
  html .assistant-status-hint { display: none; }
  html .assistant-chip-prompt { min-height: 40px; }
}

/* БАИНГ и Баеры: строка действий не переносилась — «История срезов (Календарь)» и выбор проекта
   уезжали за край карточки (на 390px — до 422 и 444px) и срезались. На телефоне режимы — два
   равных сегмента, «История срезов» и проект — каждый своей строкой во всю ширину. */
@media (max-width: 760px) {
  .buying-mode-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .buying-mode-tabs .btn { justify-content: center; min-width: 0; white-space: normal; text-align: center; line-height: 1.2; }
  .exec-buyers-top-actions { flex-wrap: wrap; width: 100%; }
  .exec-buyers-top-actions > * { flex: 1 1 100%; min-width: 0; justify-content: center; }
  /* Число на пункте листа «Ещё» (проблемы подключений у «Системы», screens/system.js) вставало
     третьим рядом под значком и сдвигало соседний «Доступ к ботам» вниз — теперь справа, своей
     колонкой. Колонка появляется только у пункта с числом: общая третья колонка и её зазор
     отнимали ширину у подписей — «Положительный исход» вылезал на 360px. */
  .sheet-dialog .sheet-item > .nav-count { grid-column: 3; grid-row: 1; }
  /* Баеры (05.10.2026) получили карточки телефона (#exec-buyers-cards), а таблица в 952px не
     пряталась, как у KPI и БАИНГа (app.css): те же байеры шли дважды — таблицей с прокруткой
     вбок и карточками под ней. */
  #view-exec-buyers .exec-buyers-table-card { display: none; }
}

/* Кабинет, «Безопасность и 2FA»: строка способа держала значок, статус и «Подключить Google
   Authenticator» (nowrap) в одну линию — карточка распиралась до 540px и срезалась справа,
   описание сжималось в столбик по слову. С 20.10.2026 строки блока — сетка .sec-row
   (screens/person.css): в узком списке кнопки под пояснением сами, здесь — только то, что
   ничто в карточке не распирает её шире экрана. */
@media (max-width: 760px) {
  .person-block > *, .person-security .sec-list, .person-security .sec-row { min-width: 0; }
  .person-security .sec-actions { flex-wrap: wrap; }
}

/* «Сеть», схема (app.js, Pan & Zoom 14.10): кнопки масштаба кладутся внутрь #flow-canvas
   (absolute, справа снизу), а сама схема не была позиционирована — кнопки вставали в низ всего
   экрана, на телефоне под таб-бар (замер 15.10.2026: 766…820px при таб-баре с 754px). И
   touch-action: none (themes.css) на схеме в 620px высоты отдавал палец только перетаскиванию
   графа: страницу с телефона было не пролистать, если палец лёг на схему. Пальцем вертикальный
   жест листает страницу, горизонтальный — двигает граф; масштаб — кнопками. */
html #flow-canvas { position: relative; }
@media (pointer: coarse) {
  html #flow-canvas { touch-action: pan-y !important; }
}

/* Пальцем — 44px и у того, что добавилось после 02.10 (замер 15.10.2026): режимы БАИНГа, «История
   срезов» и «N среза» у Баеров, «Прежний текст» профиля, имя человека в «Команде», значок
   аватара и «Только отказы» в кабинете, масштаб «Сети», вкладки, поиск, листание, период и
   «Показать служебные» «Истории», окно «Оформление». html — сильнее themes.css, подключённого
   после. Строчные цели (имя) растут полями внутрь соседнего свободного места, а не вёрсткой. */
@media (pointer: coarse) {
  .buying-mode-tabs .btn,
  .exec-buyers-top-actions .btn,
  [data-action="exec-toggle-buyer"].btn,
  .changelog-tab-btn,
  .btn-pagination,
  #changelog-open-notify-btn,
  #view-changelog .changelog-periods > button,
  #view-changelog .changelog-service-toggle,
  html .appearance-segment-btn { min-height: var(--h-touch); }
  .text-history-before summary,
  #person-section-activity label.activity-check {
    display: inline-flex; align-items: center; min-height: var(--h-touch);
  }
  .team-person-link {
    display: inline-flex; align-items: center; min-height: var(--h-touch);
    min-width: var(--h-touch); margin-block: -10px;
  }
  /* Значок на аватаре кабинета — то же действие, что у всего аватара под ним
     (data-action="person-open-avatar-studio" на .person-avatar-uploader): пальцем жмут аватар,
     значок только рисует карандаш. С клавиатуры кнопка по-прежнему в обходе Tab. */
  .person-avatar-badge { pointer-events: none; }
  #changelog-search-input, html #theme-custom-hex { min-height: var(--h-touch); }
  html .flow-zoom-btn { min-width: var(--h-touch); height: var(--h-touch); }
  html .theme-swatch-btn { width: var(--h-touch); height: var(--h-touch); }
}


/* ---------- 11. Телефон: обход агентами 15–16.10.2026 ----------
   Многоагентный обход (владелец и КРА, светлая и тёмная темы, iPhone 390 и Android 360) нашёл
   то, чего замер tools/e2e_devices.py не видит. Подразделы — по разделам панели. */

/* 11.1 Главная */
/* «Лиды по проектам» (16.10.2026): легенда бублика — окошко 220px со своей прокруткой, сделанное
   под легенду сбоку от круга. Под кругом и со строками 44px под палец в нём было 4 строки из 8 —
   «Остальные 20,3%» и ещё два проекта не видны, а свайп по легенде листал её, а не страницу. У
   «Полос», «Леденцов» и «Таблицы» окошко ещё и не отдавало жест странице (overscroll-behavior:
   contain): палец на списке страницу не двигал вовсе, а «Итого 359» стояло под пятью строками на
   259. Строк не больше восьми (семь поимённо и «Остальные» — у проектов и у категорий): на
   телефоне список целиком, без своей прокрутки. */
@media (max-width: 760px), (max-height: 560px) and (pointer: coarse) {
  html #exec-donut-legend,
  html #exec-donut-legend .exec-donut-bars {
    max-height: none; overflow: visible; overscroll-behavior: auto;
  }
  /* Рамка таблицы скругляет углы обрезкой — overflow у неё остаётся. */
  html #exec-donut-legend .exec-chart-table-wrap { max-height: none; overscroll-behavior: auto; }
}

/* Меню «Вид графиков» и окна вида графика (16.10.2026): меню едет вместе со своей карточкой и
   закрывается только касанием мимо — палец, листающий страницу, его не закрывал, и меню со слоем
   60 ложилось поверх липкой шапки (20): «Главная» и кнопки шапки — под меню, касание туда
   выбирало вид графика. Слой меню — ниже шапки, но по-прежнему над карточками. Закрывать меню при
   прокрутке нельзя: до нижних пунктов на коротком телефоне приходится долистывать. */
@media (max-width: 760px), (max-height: 560px) {
  html #view-exec-overview :is(.exec-chart-style-menu, .exec-chart-type-menu) { z-index: 19; }
}

/* «Последние загрузки» на Android 360px (16.10.2026): перенос всех ячеек телефона (app.css,
   white-space: normal) перебивал nowrap у даты — дата со временем и «отчёт за …» шли в четыре
   строки, «IZI FIN» — по слову на строку: строка 100px вместо 62px, десять загрузок — полтора
   экрана. Дата — в строку, аватар и поля — поменьше, место — названию проекта. Уже 350px дата в
   строку рядом с проектом и статусом не помещается — там как было. */
@media (min-width: 350px) and (max-width: 480px) {
  #view-exec-overview .exec-recent-table :is(th, td) { padding-left: 8px; padding-right: 8px; }
  #view-exec-overview .exec-recent-table td.nowrap { white-space: nowrap; }
  #view-exec-overview .exec-recent-table .proj-avatar {
    width: 28px; height: 28px; border-radius: 8px; font-size: 11px;
  }
  #view-exec-overview .exec-recent-table .proj-avatar-inline { gap: 8px; }
}
/* По-английски дата длиннее («Oct 15, 2026 3:28 PM»): уже 375px в строку рядом с проектом и
   статусом она не входит, и в строке рвались по словам уже имена («NUR / 2») — там дата
   переносится, как раньше. */
@media (min-width: 350px) and (max-width: 374px) {
  :root:lang(en) #view-exec-overview .exec-recent-table td.nowrap { white-space: normal; }
}

/* 11.2 Проекты, KPI, БАИНГ, Баеры */
/* Проекты, вкладка «История» (16.10.2026): колонка «Исправить | Удалить» (265px) шире места
   справа от закреплённой даты (193px на 360, 223px на 390) — в конце прокрутки дата закрывала
   «Исправить», обе кнопки целиком не помещались ни в каком положении. На телефоне это значки
   44×44 (карандаш и корзина), подпись остаётся для чтения с экрана. И на 360 край карточки
   приходился ровно на границу колонок — таблица выглядела законченной из трёх колонок, а
   «Удалить» есть только в ней. Тень у правого края (scroll) говорит, что таблица листается
   вбок; затухание в конце таблицы (local) закрывает тень, когда таблица докручена. */
@media (max-width: 760px) {
  html .proj-history-table td .btn-compact {
    width: var(--h-touch); min-width: var(--h-touch); padding: 0; justify-content: center;
  }
  html .proj-history-table td .btn-compact > span {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
  }
  html .proj-history-card {
    background:
      linear-gradient(to right, transparent, var(--surface) 60%) 100% 0 / 32px 100% no-repeat local,
      radial-gradient(farthest-side at 100% 50%, color-mix(in srgb, var(--text) 22%, transparent),
        transparent) 100% 0 / 14px 100% no-repeat scroll,
      var(--surface);
  }
}

/* KPI, «Планы на неделю» (16.10.2026): 24 проекта — 48 полей столбиком, ≈3950px, а «Сохранить» и
   «Изменено: N» — только в самом низу, в 3700px (≈6 экранов) от первого поля; у цифровой
   клавиатуры iPhone нет «Ввода». Пока есть несохранённые правки или ошибка ввода, подвал —
   полоса над таб-баром, как у «Системы», кнопка Помощника — над полосой. Без правок подвал
   стоит на своём месте. */
@media (max-width: 760px) {
  html #exec-kpi-plans .plans-foot:has(.plans-note:is(.is-dirty, .is-error)) {
    position: sticky; z-index: 6;
    bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px) + var(--space-2));
    padding: 10px 12px; border: 1px solid var(--border); border-radius: 14px;
    background: var(--surface-raised); box-shadow: var(--shadow-lg);
  }
  /* Полоса — 95px, с ошибкой ввода в две строки — 114px (замер 360–390px). */
  html[data-view="exec-kpi"]:has(#exec-kpi-plans .plans-note.is-dirty) {
    --dock-lift: calc(var(--space-2) + 104px);
  }
  html[data-view="exec-kpi"]:has(#exec-kpi-plans .plans-note.is-error) {
    --dock-lift: calc(var(--space-2) + 124px);
  }
  /* «Отменить» и «Сохранить» — пополам во всю ширину, как в полосе «Системы» на телефоне. */
  html #exec-kpi-plans .plans-foot > .ps-actions { flex: 1 1 100%; }
  html #exec-kpi-plans .plans-foot > .ps-actions > * { flex: 1 1 0; justify-content: center; }
  /* Легенда KPI: на 360–375px плашка «≥ 100%» сжималась рядом с длинной подписью и ломалась на
     «≥» / «100%» — овал 52×36 среди пилюль по 20px. Плашка держит ширину, переносится подпись. */
  html .exec-kpi-legend .kpi-pct { flex-shrink: 0; white-space: nowrap; }
}

/* БАИНГ, «История срезов» (16.10.2026): на телефоне колонки встают друг под другом, а список дней
   оставался колонкой компьютера со своей прокруткой — 520px из ~650px видимой области. Палец по
   списку листал дни, а не страницу (9 свайпов до отчётов дня), а тап по дню менял отчёты ниже
   края экрана — внешне ничего не происходило. На телефоне дни — лентой вбок, отчёты выбранного
   дня сразу под ней; вертикальный свайп по ленте листает страницу. Телефон боком — так же:
   список в 520px был выше всего окна (390px). minmax(0, 1fr) — иначе лента из 31 карточки
   распирает колонку сетки за правый край. День недели уже есть в подписи — без значка
   «Понедельник» и «Воскресенье» не переносятся. */
@media (max-width: 760px), (max-height: 560px) and (pointer: coarse) {
  .buying-history-layout { grid-template-columns: minmax(0, 1fr); }
  .history-days-list {
    flex-direction: row; max-height: none; overflow-x: auto; overflow-y: hidden;
    overscroll-behavior-x: contain; scroll-snap-type: x proximity; padding: 0 0 6px;
  }
  .history-day-item {
    flex: 0 0 auto; width: 172px; flex-direction: column; align-items: stretch; gap: 6px;
    scroll-snap-align: start;
  }
  .history-days-list .history-day-badge { display: none; }
  .history-day-right {
    display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
    text-align: left;
  }
}
/* Пальцем в «Истории срезов» — 44px: быстрые даты «Сегодня / Вчера / 6 окт» были 21px (с
   зазором 6px), кнопки срезов «10:00: $…» — 32px, «Скопировать отчёт» — 27px. Их высоту держат
   поля из app.css, а не токен --btn-h, и подъём токенов (раздел 3) их не касался. */
@media (pointer: coarse) {
  html .history-quick-dates .btn,
  html .history-slice-btn,
  html .history-raw-actions [data-action="history-copy-report"] { min-height: var(--h-touch); }
  html .history-quick-dates .btn { font-size: 13px; }
}
/* Сданные срезы в светлой теме (16.10.2026): текст #34d399 подобран под тёмную тему — на
   светло-зелёном 1,72:1, у открытого среза 1,47:1 (норма 4,5:1), а это главные суммы режима.
   В светлых темах — зелёный текста темы на любом размере экрана; открытый срез — на светлой
   подложке темы, его и так выделяют рамка и кольцо. В тёмных темах всё как было.
   Перепроверка 16.10.2026: сам --success-text на подложке строки проекта давал ровно 4,49:1, а
   при наведении мышью — 4,13:1, впритык и ниже нормы. Зелёный темы, притемнённый на пятую
   часть: 6,2:1, при наведении 5,7:1 (у светлых тем со своим зелёным — ещё темнее). */
:root[data-theme="light"] .history-slice-btn.is-submitted {
  color: color-mix(in srgb, var(--success-text) 80%, #000);
}
:root[data-theme="light"] .history-slice-btn.is-submitted.is-open {
  background: var(--success-surface);
}
/* Несданный срез «18:00: —» в тёмной теме (перепроверка 16.10.2026): цвет — запасной #64748b
   из app.css (токена --text-muted в теме нет), на подложке строки 3,55:1 при 12px. Приглушённый
   текст самой темы — 6,6:1; зелёные сданные суммы рядом всё равно заметнее. */
:root[data-theme="dark"] .history-slice-btn.is-missing { color: var(--muted); }

/* Квитанция среза в «Истории срезов» (перепроверка 16.10.2026): плиток пять, сетка
   «сколько влезет по 110px» на iPhone 390 давала две колонки — «ФД» одна с дырой справа, на
   Android 360 — одну колонку из пяти плиток (282px), на планшете 820 — четыре и «ФД» одна во
   втором ряду. Узкая квитанция — «Спенд» во всю ширину и пары «PDP | Цена PDP», «SMS | ФД»;
   средняя — пять в ряд (плитка от 86px, сумма в неё входит). Ширину знает только сама карточка
   (у телефона боком и у планшета она разная), поэтому — запрос по контейнеру; контейнер —
   только у телефона и пальца, ноутбук и монитор — как были. */
@media (max-width: 760px), (pointer: coarse) {
  .history-receipt-card { container: receipt / inline-size; }
}
@container receipt (max-width: 463.98px) {
  .history-receipt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .history-receipt-grid > :first-child { grid-column: 1 / -1; }
}
@container receipt (min-width: 464px) and (max-width: 581.98px) {
  .history-receipt-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* БАИНГ, «Итого» (16.10.2026): первая плитка «Спенд» скрыта в разметке (display: none), а
   :nth-child считает и её — восьмая видимая «Цена ФД» выходила девятой, «нечётной последней», и
   растягивалась на весь ряд, а «ФД» стояла одна с дырой справа. Видимых плиток восемь — ровно
   4 ряда по 2. */
@container (max-width: 560px) {
  #exec-buying-summary-container .buying-summary-banner > :last-child:nth-child(odd) {
    grid-column: auto;
  }
}

/* Баеры (16.10.2026): таблица на телефоне скрыта (раздел 10), и «Итого» встал вплотную к карточке
   первого баера — зазор 0, рамки слились в двойную линию. Отступ — как у карточек БАИНГа
   (app.css, #exec-buying-cards). */
@media (max-width: 760px) {
  #exec-buyers-cards { margin-top: 14px; }
}
/* Значок «Органика» у Баеров в светлой теме (16.10.2026): цвета тёмной темы прописаны прямо в
   разметке (#818cf8 на бледном индиго — 2,47:1 при 11px). В светлых темах — акцент темы, в
   карточке телефона и в строке таблицы компьютера; !important — против стиля в разметке. */
:root[data-theme="light"] :is(#exec-buyers-cards .m-card-head, #exec-buyers-table .is-organic-row .cell-buyer) .badge {
  color: var(--accent-strong) !important; background: var(--accent-soft) !important;
}

/* 11.3 Журнал загрузок, ТЛ Ретен, Настройки проектов */

/* «Google-таблицы» на 360px (замер 16.10.2026): плашка «Давно не синхронизировалась · 15.10.2026,
   15:33» (nowrap) шире карточки — распирала её, и заголовок с кнопками уходили за край экрана.
   На телефоне плашка переносится внутри карточки, значок остаётся у первой строки. */
@media (max-width: 760px) {
  #sheets-root .sheet-card > * { min-width: 0; }
  #sheets-root .sheet-status {
    flex: 0 1 auto; max-width: 100%; white-space: normal; align-items: flex-start;
    border-radius: 12px; line-height: 1.35;
  }
  #sheets-root .sheet-status svg { flex: none; margin-top: 2px; }
}

/* Журнал загрузок (16.10.2026, m9): карточек журнала на телефоне — по 20 с «Показать ещё»
   (screens/executive.js, renderExecIngestLogs), а короткая форма «Проверить текст отчёта» встаёт
   сразу под журналом, перед длинным списком «Отчётчиков» (38 карточек, 7 600px): иначе до неё
   было 64–76 экранов прокрутки. На компьютере порядок прежний — таблица короткая. У колонки flex
   поля не схлопываются: 2px над карточками сняты, зазор под шапкой — те же 18px. */
@media (max-width: 760px) {
  #view-exec-ingest > .dash-wrap { display: flex; flex-direction: column; }
  #view-exec-ingest #exec-journal-cards { margin-top: 0; }
  #view-exec-ingest #exec-ingest-form { order: 1; }
  #view-exec-ingest #exec-reporters { order: 2; }
  #exec-journal-cards > .journal-more { width: 100%; justify-content: center; }
}

/* ТЛ Ретен, «Заметки по проектам» (16.10.2026, m32): на телефоне 14 полей стопкой уходят на
   2 200–2 300px ниже единственной «Сохранить заметки» — набрав заметку внизу, человек не видел
   ни кнопки, ни «Несохранённых правок».
   Перепроверка 16.10.2026: первая правка прилепляла всю шапку блока (заголовок, строку
   состояния и кнопку — 124px) под шапку экрана, и она закрывала поле, в котором печатают, а с
   клавиатурой на iPhone от поля оставалась щель. Теперь — как у «Планов на неделю» KPI (11.2):
   кнопка стоит в конце списка, а пока есть несохранённое, «Несохранённых правок: N» и кнопка —
   полоса над таб-баром; верх блока ничего не закрывает.
   Как устроено. Шапка блока — содержимым карточки (display: contents): заголовок остаётся
   сверху, кнопка уходит под список (order). Строка состояния лежит в одной обёртке с
   заголовком, общей коробки «строка + кнопка» в разметке нет, а кнопку из шапки над списком
   sticky к низу экрана не приклеит. Поэтому полоса — position: fixed: строка состояния рисует
   саму полосу и держит снизу место под кнопку, кнопка встаёт поверх этого места. Из потока
   уходят только элементы под полем, в котором печатают, — поле не прыгает.
   Пустая строка состояния (подсказки про Ctrl+Enter на телефоне нет) оставляла под заголовком
   дыру ~35px, а «Все заметки сохранены», появившись над полями, сдвигало бы их, — под
   заголовком строка только у того, кто заметки не правит («меняет тимлид или редактор»); о
   сохранении скажет всплывающее сообщение. */
@media (max-width: 760px) {
  html #exec-retention-notes.table-card { display: flex; flex-direction: column; }
  html #exec-retention-notes > .retention-notes-head { display: contents; }
  html #exec-retention-notes .retention-notes-heading {
    padding: 12px 14px; border-bottom: 1px solid var(--border);
  }
  html #exec-retention-notes:has(#retention-save-notes:not([hidden])) .retention-notes-status:not(.is-dirty),
  html #exec-retention-notes .retention-notes-status:empty { display: none; }
  html #exec-retention-notes .retention-notes-table { order: 1; }
  html #exec-retention-notes #retention-save-notes {
    order: 2; width: auto; min-height: var(--h-touch); margin: 4px 14px 14px;
  }
  /* Полоса: 1 + 10 + строка 19 + 8 + кнопка 44 + 10 + 1 = 93px (замер 360 и 390). */
  html #exec-retention-notes .retention-notes-status.is-dirty {
    position: fixed; z-index: 6;
    left: max(var(--space-4), env(safe-area-inset-left, 0px));
    right: max(var(--space-4), env(safe-area-inset-right, 0px));
    bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px) + var(--space-2));
    padding: 10px 12px calc(var(--h-touch) + 18px);
    border: 1px solid var(--border); border-radius: 14px;
    background: var(--surface-raised); box-shadow: var(--shadow-lg);
    font-size: 13px; font-weight: 600;
  }
  html #exec-retention-notes:has(.retention-notes-status.is-dirty) #retention-save-notes {
    position: fixed; z-index: 7; height: var(--h-touch); margin: 0;
    left: calc(max(var(--space-4), env(safe-area-inset-left, 0px)) + 13px);
    right: calc(max(var(--space-4), env(safe-area-inset-right, 0px)) + 13px);
    bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px) + var(--space-2) + 11px);
  }
  /* Кнопка Помощника — над полосой, как у KPI; низ экрана (раздел 10, --dock-clear) растёт
     вместе с ней — последнее поле докручивается над полосой. */
  html[data-view="exec-retention"]:has(#exec-retention-notes .retention-notes-status.is-dirty) {
    --dock-lift: calc(var(--space-2) + 100px);
  }
}

/* «Настройка проекта» (16.10.2026, m33): подсказка под «Гео и валютой» в 3–4 строки при ряде,
   выровненном по низу (раздел 2), опускала «Источник данных» на 60–78px, а на 360px источник
   резался до «Google-табл…». На телефоне оба поля — во всю ширину, друг под другом, с тем же
   зазором, что между остальными полями окна (16px поля + 14px тела окна). */
@media (max-width: 760px) {
  #modal-edit-project .form-row { grid-template-columns: minmax(0, 1fr); row-gap: 14px; }
}

/* «Гео и валюта», правка гео (16.10.2026, m34): подсветка лежала на ячейках без полей
   (screens.css, padding 3px 0) — подписи, «USD» и кнопки прилипали к краю полосы, отступ над
   кнопками рвал её надвое, а кольцо фокуса срезала прокрутка .geo-table-wrap. На телефоне
   подсветка одна — на всю строку, с полями и скруглением. */
@media (max-width: 760px) {
  html #exec-settings-geos .geo-table tr.geo-row.is-editing {
    background: var(--accent-soft); border-radius: var(--radius-md);
    padding: 12px; margin: 8px 0; border-bottom: 0;
  }
  html #exec-settings-geos .geo-table tr.geo-row.is-editing > td { background: transparent; }
}
/* Подписи правки гео в светлой теме («1 EUR =», «USD», на телефоне и «Гео:», «Курс:»): --muted на
   --accent-soft — 4,26:1, ниже AA. На любом экране. */
:root[data-theme="light"] .geo-row.is-editing :is(.geo-rate-prefix, .geo-rate-suffix),
:root[data-theme="light"] .geo-table tr.geo-row.is-editing > [data-label]::before {
  color: var(--text-secondary);
}

/* «Настройки проектов», карточка проекта (16.10.2026, m35): стрелки порядка и аватар стояли двумя
   колонками слева — 106px пустой полосы во всю высоту карточки, тексту оставалось 188px из 294
   на 360px, чипы шли в 7 строк. Аватар — у имени, текст — почти во всю ширину, стрелки — строкой
   слева от «Настроить» (справа их закрывала бы кнопка Помощника). */
@media (max-width: 760px) {
  .settings-project-row { align-items: start; }
  .settings-project-row:not(.is-fixed-order) { grid-template-areas: "ava main main" "order order btn"; }
  .settings-project-row:not(.is-fixed-order) > .proj-avatar { grid-area: ava; }
  .settings-project-row:not(.is-fixed-order) > .settings-project-main { grid-area: main; }
  .settings-project-row:not(.is-fixed-order) > .settings-project-order {
    grid-area: order; flex-direction: row; align-self: center;
  }
  .settings-project-row:not(.is-fixed-order) > .secondary-button { grid-area: btn; align-self: center; }
}

/* 11.4 Профиль, Сценарии, Медиа, Положительный исход, Проверка */

/* «Проверка» (m15, 16.10.2026): при открытии поля сообщения не было видно — app.css держит
   карточку на телефоне не ниже 580px, и весь запас уходил в пустую ленту (347px). Поле
   вставало под таб-бар: на айфоне — кромка рамки, на Android 360 — ничего, а подсказка в ленте
   зовёт писать. Лента — по содержимому, не ниже 180px: подсказка пустой ленты входит целиком,
   а переписка растёт, как росла. ID — сильнее .test-chat из app.css. */
@media (max-width: 760px) {
  html #view-test .test-chat {
    min-height: 0;
    grid-template-rows: 60px auto minmax(180px, auto) auto;
  }
}
/* Низкий телефон (iPhone SE 667, Android 640; m15, 16.10.2026): и с лентой в 180px поле
   уходило под таб-бар на 20–30px. Подсказке пустой ленты хватает 145px, если ужать её поля. */
@media (max-width: 760px) and (max-height: 700px) {
  html #view-test .test-chat { grid-template-rows: 60px auto minmax(140px, auto) auto; }
  html #test-chat-empty { padding-block: var(--space-2); }
}
/* «Проверка» (m42, 16.10.2026): подсказка «Сообщение клиента (или прикрепите чек)» на
   телефоне в две строки, а поле в покое — на одну (44px): вторая строка была срезана пополам.
   Рост под текст (data-autogrow) пересчитывается только при касании: при запуске экран скрыт.
   Пока поле пустое, в нём место под две строки подсказки: 2 × 22px + поля 9 + 9. С текстом
   высоту снова ведёт autogrow. */
@media (max-width: 520px) {
  html #test-form .test-composer-row textarea:placeholder-shown { min-height: 62px; }
}

/* Подсказки однострочных полей (m36, 16.10.2026): на телефоне кегль полей — 16px (раздел 1),
   и длинная подсказка («Поиск по названию, условию или инструкции...», «например, gpt-4.1 или
   anthropic/…») обрывалась посреди буквы — не видно, что текст не весь. Теперь —
   многоточием. Условие — как у раздела 1, который поднимает кегль. */
@media (max-width: 760px), (max-height: 560px) and (pointer: coarse) {
  html body input:is([type="search"], [type="text"], [type="url"], [type="email"], [type="tel"],
    :not([type])) { text-overflow: ellipsis; }
}
/* Перепроверка m36 (16.10.2026): многоточие честно показывало, что подсказка не вся, но
   главного — «…или инструкции», «…или хэшам», «anthropic/claude-sonnet-4.5» — человек так и не
   видел: на 360px подсказки шире полей на 20–130px. Текст поля остаётся 16px (раздел 1: меньше
   — и iPhone увеличивает экран при касании), а подсказка в этих полях — 13px, как подписи
   строк телефона. Самые длинные ещё и укорочены — им и 12px было мало: «Историю» в
   screens/changelog.js, «Модель» в словарях (справа браузер держит ~21px под стрелку
   подсказок); у «Сценариев» и «Сети» снято «...» в конце. Крестик пустого поля поиска не
   рисуется, но Chromium держал под него ~20px справа — в трёх этих поисках у пустого поля его
   нет (стирать нечего), с текстом он на месте; другие поиски (и PNL) не тронуты. Замер на 360px (Chromium и WebKit): самой длинной подсказке остаётся
   8–9px запаса. Условие — как у раздела 1. */
@media (max-width: 760px), (max-height: 560px) and (pointer: coarse) {
  html body :is(#scripts-search, #flow-search, #changelog-search-input, #create-project-aliases,
    #edit-project-aliases, #models-root form.models-form input[name="model"],
    #view-requisites form.req-form input[name="title"])::placeholder { font-size: 13px; }
  html body :is(#scripts-search, #flow-search,
    #changelog-search-input):placeholder-shown::-webkit-search-cancel-button { display: none; }
}

/* Окно сценария (m37, 16.10.2026): подпись «Активен» висела посреди строки, в 110–120px от
   своего тумблера. Метка — ячейка сетки во всю ширину, а колонки «тумблер | подпись» (auto
   auto, app.css) делили лишнее место пополам. Колонки — по содержимому, у начала строки; метка
   по-прежнему во всю строку. */
@media (max-width: 760px) {
  #script-dialog .switch-control.modal-switch { justify-content: start; }
}

/* Дорожка тумблера не сжимается (m38, 16.10.2026): у «Магнита» в «Профиле» подпись в две
   строки отнимала у дорожки ширину (35–39px вместо 44), а сдвиг бегунка рассчитан на 44px —
   круг вылезал за капсулу, тумблер выглядел сломанным. */
@media (max-width: 760px), (pointer: coarse) {
  html .switch-control > .switch-track { flex-shrink: 0; }
}

/* «Профиль», «Палитра эмодзи» (m39, 16.10.2026): поле было однострочным, и на телефоне (16px)
   из 27 эмодзи видно 12–14, остальное срезано без намёка. Поле стало многострочным
   (index.html): на компьютере оно выглядит и ведёт себя как прежнее — 40px, кегль 14px, как у
   полей экрана (app.css, «.view :is(input…)»), одна строка без переноса; на телефоне набор
   переносится, места — на три строки. */
#view-profile textarea[name="emoji_palette"] {
  height: var(--h-control); padding-block: 0; font-size: 14px;
  line-height: calc(var(--h-control) - 2px); white-space: pre; overflow: hidden; resize: none;
}
@media (max-width: 760px) {
  html #view-profile textarea[name="emoji_palette"] {
    height: auto; min-height: calc(3 * 1.45em + 2 * var(--space-2) + 2px);
    padding-block: var(--space-2); line-height: 1.45;
    white-space: pre-wrap; overflow-wrap: anywhere; overflow-y: auto;
  }
}

/* «Прежний текст» в «Прежних версиях текста» (m40, 16.10.2026): цель касания 44px (раздел 10)
   сделала строку гибким блоком, и у неё пропал треугольник раскрытия — его рисует только
   display: list-item. Строка читалась серой подписью, а не тем, что раскрывается. Высота 44px
   — полями. */
@media (pointer: coarse) {
  .text-history-before summary { display: list-item; padding-block: 12px; }
}

/* «Медиа», пруф-пакеты (m41, 16.10.2026): на Android 360 рядом с тремя кнопками файла имени
   оставалось 76px — «Чек / Отзыв 1…7» читались одинаково «Чек / Отзы…», стороны карты — «ID
   карта (…». Имя переносится в своей колонке, а не режется. */
@media (max-width: 760px) {
  #view-media .pack-file-name {
    flex: 1 1 auto; white-space: normal; overflow-wrap: anywhere; line-height: 1.3;
  }
}

/* 11.5 Сеть, Живые диалоги, Тексты и правила */

/* Переписка (перепроверка 16.10.2026): касание «Пометки (N)» в Android-браузере давало кнопке
   фокус, и правило app.css «фокус в пометках — лента 36dvh» сжимало ленту 418→304px: окно
   прыгало, касание уходило мимо, пометки не раскрывались. На телефоне пометки свёрнуты
   кнопкой — ленте место по содержимому и при фокусе внутри пометок. */
@media (max-width: 760px) {
  html .conversation-dialog .conversation-annotation:focus-within + .conversation-timeline {
    flex-basis: auto;
  }
}

/* «Сеть», панель масштаба (16.10.2026, перепроверка): вбок листался весь холст схемы
   (overflow-x), а панель лежала в нём — на компьютере absolute в углу, на телефоне строкой под
   графом — и прокручивалась вместе со схемой: сдвинул граф вправо — «+ − 100% Fit» уехали за
   левый край; на ноутбуке 1440 панель стояла у низа холста в 870px, за краем окна. Теперь вбок
   листается только обёртка графа (.flow-canvas-scroll, app.js — renderFlowCanvas), а панель —
   строкой под ней в самом холсте и липнет к правому нижнему углу видимой части схемы: пока схема
   листается — у низа окна, над кнопкой Помощника (на компьютере 52px в 24px от низа, на телефоне
   — --dock-clear и --dock-size, раздел 10); долистали до конца — стоит в своей строке под графом
   и не закрывает последний ряд шагов («Fine», КОНЕЦ). Из холста панель не выходит. Слой 2 — ниже
   полосы «Сохранить» (5), таб-бара и шапки: тап в «Сохранить» не попадает в масштаб (m10).
   Пальцем граф по-прежнему двигает горизонтальный жест (pan-y, раздел 10), а не прокрутка
   обёртки. */
html #flow-canvas { overflow: visible; }
html #flow-canvas > .flow-canvas-scroll { overflow-x: auto; overscroll-behavior-x: contain; }
html #flow-canvas > .flow-canvas-scroll > svg.flow-graph {
  display: block; max-width: none; height: auto; margin-inline: auto;
}
html #flow-canvas > .flow-zoom-controls {
  position: sticky; right: auto; bottom: calc(24px + 52px + var(--space-3)); z-index: 2;
  width: max-content; margin: var(--space-2) 0 0 auto;
}
@media (pointer: coarse) {
  html #flow-canvas > .flow-canvas-scroll { touch-action: pan-y; }
}
@media (max-width: 760px) {
  html #flow-canvas > .flow-zoom-controls {
    bottom: calc(var(--dock-clear) + 12px + var(--dock-size) + var(--space-2));
    margin: var(--space-2) var(--space-2) var(--space-2) auto;
  }
}

/* «Сеть», карточка «Схема» на ноутбуке (16.10.2026, m47): у панели L1 (app.css, «Верстак») нет
   своих полей — значок раздела лежал на левой рамке, «Схема» — под верхней, холст — вплотную к
   краям. Поля — как у «Сети диалога» над ней (.form-section: 20px, на телефоне 16px — ниже). */
html #flow-canvas-section { padding: var(--space-5); }

/* «Живые диалоги», «Что происходило» на ноутбуке (16.10.2026, m12): сетка темы — на четыре ячейки
   (themes.css 10.5: 80px 120px 1fr auto, !important), а в строке их две, время и текст (app.js,
   renderLiveEvents). Текст шёл второй колонкой 120px («разрешена сдача / отчётов» в две строки),
   справа пустовали 775px. Колонки — время | текст во всю ширину, у строки с «Вернуть текст» —
   ещё кнопка; время — у первой строки текста. Телефон — ниже, своей раскладкой. */
@media (min-width: 761px) {
  html #live-events .live-event {
    grid-template-columns: 80px minmax(0, 1fr) !important; align-items: baseline !important;
  }
  html #live-events .live-event.has-action {
    grid-template-columns: 80px minmax(0, 1fr) auto !important;
  }
  html:lang(en) #live-events .live-event { grid-template-columns: 108px minmax(0, 1fr) !important; }
  html:lang(en) #live-events .live-event.has-action {
    grid-template-columns: 108px minmax(0, 1fr) auto !important;
  }
}

/* Кнопки, которые нужны только телефону (их правила — ниже): «Показать все (N)» «Проблем» и
   строка «Пометки (N)» переписки. На компьютере список и пометки — целиком, как были. */
html #dead-jobs-more, html .conversation-dialog .conversation-notes-toggle { display: none; }

/* «Живые диалоги», переписка на телефоне (16.10.2026, m13): пометки — окошко 88–161px со своей
   прокруткой внутри прокрутки окна, переписке оставалось 215px на 360 и 304px на айфоне (3–4
   сообщения). Пометки свёрнуты в строку-кнопку «Пометки (N)» (index.html, app.js — N: теги и
   заметка). Лента забирает всё остальное окно: её основа — высота переписки, а не 36% окна
   (app.css), и окно сжимает её до своей высоты; надзаголовок «Переписка» над именем клиента не
   нужен. Раскрытые пометки — целиком, без своей прокрутки и затухания: листается окно, лента
   уступает до своего пола. Каждая переписка открывается свёрнутой. Телефон боком — как был: там
   окно 356px, и строка-кнопка под палец (64px с полями) выше прежнего пола пометок (47px) —
   ленте досталось бы меньше (замер 844×390: 62px против 82). */
@media (max-width: 760px) {
  html .conversation-dialog .modal-header .eyebrow { display: none; }
  html .conversation-dialog .conversation-timeline { flex-basis: auto; }
  html .conversation-dialog .conversation-annotation {
    flex: none; min-height: 0; overflow: visible; animation: none;
    -webkit-mask-image: none; mask-image: none;
  }
  html .conversation-dialog .conversation-annotation:not(.is-open) > :not(.conversation-notes-toggle) {
    display: none;
  }
  html .conversation-dialog .conversation-notes-toggle {
    display: flex; grid-column: 1 / -1; align-items: center; gap: var(--space-2);
    width: 100%; min-height: var(--h-touch); padding: 0 var(--space-3);
    border: 1px solid var(--border); border-radius: var(--radius-md);
    background: var(--surface); color: var(--text); font: inherit; font-weight: 600;
    text-align: left; cursor: pointer;
  }
  html .conversation-dialog .conversation-notes-count { color: var(--text-secondary); font-weight: 500; }
  html .conversation-dialog .conversation-notes-chevron { margin-left: auto; }
  html .conversation-dialog .conversation-annotation.is-open .conversation-notes-chevron {
    transform: rotate(180deg);
  }
}

@media (max-width: 760px) {
  /* Схема ужималась до 72% (app.js, renderFlowCanvas): подписи стрелок и тип шага — 7,9px,
     названия — 8,6px, а «100%» на кнопке значило 72%. На телефоне граф в натуральную величину
     (11–12px): правую часть двигают пальцем вбок, целиком граф показывает «Fit». !important —
     против инлайновых width и min-width из app.js. */
  html #flow-canvas .flow-canvas-scroll > svg.flow-graph {
    width: auto !important; min-width: 0 !important;
  }
  /* У карточки «Схема» не было своих полей (рамка — от панели L1 в app.css): значок раздела
     лежал на левой рамке, «Схема» — под верхней, холст — вплотную к краям. Поля — как у
     «Сети диалога» над ней. */
  html #flow-canvas-section { padding: var(--space-4); }
  /* «История схемы»: шапка карточки на телефоне — колонка (app.css), и крестик «Закрыть»
     выпадал отдельной строкой под подзаголовок, к левому краю. Здесь он один и узкий — шапка
     остаётся строкой, крестик в правом верхнем углу. */
  html #flow-history-panel .section-heading { flex-direction: row; align-items: flex-start; }
  html #flow-history-panel .section-heading > :first-child { flex: 1 1 auto; min-width: 0; }
  html #flow-history-panel #flow-history-close {
    flex: none; align-self: flex-start; margin: -6px -10px 0 0;
  }
  /* «Шаблоны воронок»: колонка сетки не уже 360px (app.css), а в шторке 318–348px — карточки
     вылезали за правый край, тело шторки ездило вбок. Сжатая шапка (60px вместо 78) подсовывала
     надзаголовок под ручку шторки. */
  html #flow-templates-dialog .flow-templates-grid { grid-template-columns: minmax(0, 1fr); }
  html #flow-templates-dialog .modal-header { flex: none; }
  /* «Добавить шаг»: меню раскрывалось вниз под таб-бар — «Завершение воронки» и «Перевод на
     оператора» оставались под ним, тап попадал в таб-бар. На телефоне меню — лист над полосой
     «Сохранить» (--dock-clear, раздел 10), длинный — со своей прокруткой. */
  html #view-flow .flow-add-menu {
    position: fixed; top: auto;
    left: max(var(--space-4), env(safe-area-inset-left, 0px));
    right: max(var(--space-4), env(safe-area-inset-right, 0px));
    bottom: calc(var(--dock-clear) + var(--space-2));
    min-width: 0; overflow-y: auto; overscroll-behavior: contain;
    max-height: calc(100dvh - var(--dock-clear) - env(safe-area-inset-top, 0px) - 64px
      - var(--space-4));
    transform-origin: 50% 100%;
  }
  /* Кнопка Помощника лежала поверх правой части пунктов — пока меню открыто, она гаснет. */
  html[data-view="flow"]:has(#flow-add-menu:not(.is-hidden)) .assistant-floating-dock {
    opacity: 0; pointer-events: none;
  }
  /* Панель шага: высота считала шапку от самого верха экрана (app.css: 100dvh − 64px), а шапка
     телефона липнет ниже выреза (раздел 2) — на айфоне подпись типа шага и кнопки «Дублировать»,
     «Свернуть», «Закрыть» уходили под шапку, тап в их центр попадал в шапку. */
  html .flow-inspector {
    --flow-inspector-max: calc(100dvh - 64px - env(safe-area-inset-top, 0px)
      - var(--flow-inspector-dock) - var(--space-2));
  }

  /* «Живые диалоги», «Что происходило» (16.10.2026): сетка темы (themes.css 10.5, !important)
     рассчитана на четыре ячейки, а в строке их две — время и текст. Текст попадал в колонку
     120px, длинное событие вытягивалось столбиком по слову выше экрана, а время стояло в его
     середине; и колонкой «время | текст» тексту оставалось 173px на айфоне и 143px на 360 при
     карточке 297/267px (перепроверка). На телефоне время — строкой над текстом, текст — во всю
     ширину карточки, «Вернуть текст» — под ним. */
  html #live-events .live-event {
    grid-template-columns: minmax(0, 1fr) !important; align-items: start !important;
    row-gap: 2px !important;
  }
  html #live-events .live-event-action { justify-self: start; margin-top: var(--space-1); }
  /* «Проблемы»: карточки задач были с прямыми углами среди скруглённых плиток экрана. Кнопка
     «Повторить все» — теперь secondary-button в разметке (index.html), как «Повторить». */
  html #dead-jobs .dead-job { border-radius: var(--radius-md); }
  /* «Проблемы» (m48, перепроверка): 50 карточек по 110–184px — 8 140px, «Очередь», «Воронка» и
     «Расход модели» — ниже 13 000px. Видны первые пять (DEAD_JOBS_PHONE_PREVIEW в app.js), под
     ними — «Показать все (N)» / «Свернуть»; «Повторить все» в шапке блока — как была. */
  html #dead-jobs-list:not(.is-expanded) > .dead-job:nth-child(n+6) { display: none; }
  html #dead-jobs-more { display: flex; width: 100%; justify-content: center; }

  /* «Тексты и правила», карточка текста (16.10.2026): «Изменить» во всю ширину шла своей
     строкой под ключом — 102 таких строки в «Закрывающих вопросах». Ключ и кнопка — одной
     строкой, когда помещаются. */
  html #view-bot-texts .bt-entry-foot > .bt-source { flex: 1 1 auto; }
  html #view-bot-texts .bt-entry-foot > .bt-actions { width: auto; margin-left: auto; }
}
/* «Тексты и правила» (16.10.2026): лента чипов групп не липла и уезжала под шапку — со
   страницы в 30 000px к другой группе было не попасть. На телефоне лента держится под шапкой
   (низ шапки меряет screens/bot_texts.js — --bt-top), заголовок группы после прыжка встаёт под
   ленту, а не под шапку (scroll-margin 84px не знал выреза). Фон — цвет шапки, без размытия
   (раздел 7). Боком (до 500px в высоту) лента не липнет: шапка, лента и таб-бар оставили бы
   списку 200px. */
@media (max-width: 760px) and (min-height: 501px) {
  html #view-bot-texts .bt-nav-slot {
    position: sticky; top: var(--bt-top, calc(env(safe-area-inset-top, 0px) + 57px)); z-index: 3;
    margin-inline: calc(-1 * clamp(16px, 2.5vw, 36px)); padding-block: 6px;
    background: var(--bar-solid, var(--bg)); border-bottom: 1px solid var(--border);
  }
  /* Чипы листаются вбок от края до края экрана, а не обрезаются в 16px от него. */
  html #view-bot-texts .bt-nav {
    padding-inline: clamp(16px, 2.5vw, 36px); scroll-padding-inline: clamp(16px, 2.5vw, 36px);
  }
  /* Ниже шапки — лента (57px) и зазор. */
  html #view-bot-texts .bt-group {
    scroll-margin-top: calc(var(--bt-top, calc(env(safe-area-inset-top, 0px) + 57px)) + 57px
      + var(--space-3));
  }
}
/* «Живые диалоги», переписка (16.10.2026): шесть кнопок шапки с подписями (542px) шли в два-три
   рваных ряда (201 из 776px на айфоне, 251 из 681 на 360, «Закрыть» один в третьем ряду) —
   пометки сжимались до 88px, лента до 215px. «Закрыть» — в угол шапки, «Копировать ID» и
   «Экспорт CSV» — значками (подпись остаётся для чтения с экрана), остальное — одним рядом под
   именем. «События» — с подписью: это переключатель. Шире 600px (телефон боком) кнопки и так
   встают в ряд с именем — там всё как было. */
@media (max-width: 600px) {
  html .conversation-dialog .conversation-header-text { padding-right: 52px; }
  html .conversation-dialog .conversation-header-actions {
    flex: 1 1 100%; justify-content: flex-start;
  }
  html .conversation-dialog #conversation-close { position: absolute; top: 12px; right: 12px; }
  html .conversation-dialog :is(#conversation-copy-id, #conversation-export-csv) {
    width: var(--h-touch); padding: 0; justify-content: center;
  }
  html .conversation-dialog :is(#conversation-copy-id, #conversation-export-csv) > span {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%);
    white-space: nowrap;
  }
}
@media (max-width: 760px) and (prefers-reduced-motion: no-preference) {
  /* Меню «Добавить шаг» листом снизу — и поднимается снизу, а не падает от кнопки (motion.css). */
  html #view-flow .flow-add-menu:not(.is-hidden) { animation-name: m-fade-in, m-list-rise; }
}

/* 11.6 Помощник, Воронка бота, Карта сценария, Боты, Доступ к ботам, светлая тема */

/* Дровер Помощника на ноутбуке (16.10.2026, перепроверка): выбор модели (158px), «Закрепить» и
   «Закрыть» стояли в одной строке с заголовком и оставляли ему 92px — «AI- / Помощник» в две
   строки, плашка «Контекст: Воронка диалогов бота» — в три, значок сплющивался. С 20.10.2026
   шапка — сетка (themes.css, 10.7): заголовок с плашкой и кнопки — строкой, модель — строкой
   под ними во всю ширину. Здесь — чтобы заголовок не переносился, а слишком длинный контекст
   обрывался многоточием, а не ломал строку. */
html .assistant-drawer-title-group > .assistant-avatar { flex: none; }
html .assistant-title-text { min-width: 0; }
html .assistant-heading { white-space: nowrap; }
html #assistant-page-context {
  display: inline-block; max-width: 100%; vertical-align: top;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
html .assistant-model-select { flex: 1 1 auto; min-width: 0; }
/* Строка статуса дровера («Claude Opus 5.5 · Готов к работе», 11px): цвет --text-tertiary,
   которого нет ни в одной теме, — запасной #64748b, на тёмном дровере 3,75:1 (норма 4,5:1).
   Цвет — приглушённый текст самой темы, читаемый на её поверхности в любой теме. */
html #assistant-drawer .assistant-drawer-status { color: var(--muted); }

/* Светлая тема (16.10.2026, m8): дровер Помощника, окно «Создать воронку / Гео», «История
   срезов» БАИНГа и раскрытые отчёты баера красятся токенами --surface-card, --border-subtle,
   --bg-subtle, --surface-subtle, --surface-hover и --text-muted, которых нет ни в одной теме, —
   срабатывали запасные цвета тёмной: дровер и окно тёмно-синие, их заголовки цвета фона (1:1),
   подсказки-кнопки Помощника без рамки и фона — как простой текст; у блоков «Истории» и строк
   отчётов рамки и подложки белые полупрозрачные — на белом их нет, цифры отчётов #888 (3,5:1).
   Токены — из светлой темы (и подобранных светлых: «Песок», «Сакура», «Лёд»). Это цвет, а не
   раскладка, — на любом размере экрана; тёмная тема — как была. */
:root[data-theme="light"] :is(#assistant-drawer, #geo-catalog-dialog, #exec-buying-history-container, #exec-buyers-cards) {
  --surface-card: var(--surface);
  --border-subtle: var(--border);
  --bg-subtle: var(--surface-muted);
  --surface-subtle: var(--surface-sunken);
  --surface-hover: var(--accent-soft);
  --text-muted: var(--text-secondary);
}
/* Плашки валюты, оплат и языка в карточке гео и несданный срез «18:00: —» — цвет зашит
   белым полупрозрачным, мимо токенов. Несданный срез — пустой ячейкой на подложке строки
   проекта: белый с рамкой, подпись приглушённая (4,8:1). */
:root[data-theme="light"] #geo-catalog-dialog .geo-badge { background: var(--surface-sunken); }
:root[data-theme="light"] #exec-buying-history-container .history-slice-btn.is-missing {
  background: var(--surface); border-color: var(--border); color: var(--muted);
}

/* «Воронка бота», «Агенты» (m52): подпись страны 11px цветом --muted на сером фоне строки —
   3,86:1 в светлой теме; та же пара, что исправлена у «Не с чем сравнить» (app.css, аудит
   28.09.2026). */
:root[data-theme="light"] #view-dash .dash-agent-geo { color: var(--text-secondary); }

@media (max-width: 760px) {
  /* Помощник, план «было → станет» (m17): «было» и «станет» стояли двумя колонками по
     91–106px — приветствие и правило шли по 1–3 слова в строке, «Весь текст» раскрывался в той
     же колонке, а на 360px заголовок действия падал под значок. На телефоне «было» — строкой во
     всю ширину, под ним «→ станет». Новое и удаляемое (.is-pair) и правка текста (.is-text) —
     и так одной колонкой. */
  html #view-assistant .as-change:not(.is-pair, .is-text) { grid-template-columns: auto minmax(0, 1fr); }
  html #view-assistant .as-change:not(.is-pair, .is-text) > :is(.as-change-field, .as-change-before) {
    grid-column: 1 / -1;
  }
  html #view-assistant .as-action-head strong { flex-basis: 120px; }

  /* Поле дровера Помощника растёт вместе с вопросом (m50, screens/assistant.js — autoGrow):
     потолок 120px из themes.css — это четыре строки, телефону — шесть; дровер здесь на весь
     экран, место над полем есть. */
  html #assistant-drawer-input { max-height: 164px; }

  /* «Воронка бота», «Диалоги и оплаты» (m18): подпись «20:00» / «18.09» (27px) не входила в
     столбец 17–25px «Суток», «30 дней» и «90 дней» и резалась без многоточия: «20:0», «18.0» —
     на 360px пропадал месяц. Подпись — шире своего столбца, по его центру; при 8 столбцах и
     больше — у каждого второго, и у последнего (свежего) — всегда. Столбец подпись не
     распирает: колонка сетки — minmax(0, 1fr). Число столбцов — без :has(): «первый из восьми и
     больше» и его соседи. */
  html #view-dash .dash-bars > .dash-bar { grid-template-columns: minmax(0, 1fr); }
  html #view-dash .dash-bars .dash-bar-label { justify-self: center; overflow: visible; font-size: 10px; }
  html #view-dash .dash-bars > .dash-bar:first-child:nth-last-child(n+8):nth-last-child(even) > .dash-bar-label,
  html #view-dash .dash-bars > .dash-bar:first-child:nth-last-child(n+8) ~ .dash-bar:nth-last-child(even) > .dash-bar-label {
    visibility: hidden;
  }

  /* «Агенты» на 360px (m52): имя и страна ужимались вместе — «Исмаилова / Малика» в две строки
     с пустотой справа и «Кыргызст…», хотя места ниже хватает. Не помещаются в строку — страна
     переходит под имя. */
  html #view-dash .dash-agent-top { flex-wrap: wrap; row-gap: 0; }
  html #view-dash .dash-agent-geo { max-width: 100%; }

  /* «Карта сценария» (m16): подпись строки держит 132px (app.css), и инструкциям шагов
     оставалась колонка 130–160px по 2–3 слова — одна инструкция на 3,6–4,7 тысячи пикселей
     прокрутки, слева под «Инструкция» пустовала половина карточки. Короткое значение — справа от
     подписи, длинное — строкой под ней во всю ширину. */
  html #overview-body .overview-line { flex-wrap: wrap; row-gap: 2px; }
  html #overview-body .overview-line > :last-child { flex: 1 1 auto; min-width: 0; }

  /* «Боты», плитки-оглавление (m53): в две колонки тексту оставалось 80–95px, и резались даже
     постоянные «Бот отчёт…», «Бот рекв…» и все @username. Узкий раздел — плитки списком. */
  @container bots-view (max-width: 440px) {
    html #view-bots .bots-strip { grid-template-columns: minmax(0, 1fr); }
  }
}

/* «Доступ к ботам», бот отчётов (m54): «Права» не шире 240px (screens.css) — правило таблицы
   компьютера; на телефоне таблица — карточками (.ps-stack, до 720px), и строка «Права» была
   уже соседних: чип и кнопки висели посередине карточки, «Проекты…» и «Сделать админом» — друг
   под другом. Даты строки «Добавлен» — к правому краю, как значения остальных строк. */
@media (max-width: 720px) {
  html .ps-stack.access-table td.access-rights { max-width: none; }
  html .ps-stack.access-table td.access-added .ps-cell { align-items: flex-end; text-align: right; }
}

/* 11.7 Команда, Система, Кабинет, История и аудит */
/* «Система», лента разделов под шапкой айфона — отступ считает screens/system.js
   (measureOffsets: нижний край прилипшей шапки, а не её высота). */

/* «Команда»: флажок строки бота спрятан (team.css: .team-bot input — opacity 0), но общее правило
   выключенных флажков (app.css: input[type="checkbox"]…:disabled — opacity .5, оно сильнее)
   возвращало его полупрозрачным квадратом поверх значка бота: у своих прав КРА и у людей без
   Telegram ID значок выглядел сломанным, с лишним флажком (обход 16.10.2026). Фокус с клавиатуры
   по-прежнему рисует дорожка тумблера (.team-bot input:focus-visible ~ .switch-track). Правила
   флажков от ширины не зависят — на ноутбуке квадрат лежал на значке так же (перепроверка m21,
   16.10.2026), поэтому на любой ширине. */
html #view-team .team-bot input[type="checkbox"] { opacity: 0; }
/* «Команда» (16.10.2026): код устройства в строке присутствия рвался на дефисе — «… macOS · D-» /
   «9WZ5QD · 2 устройства», а по коду устройство ищут в кабинете и в колокольчике. Код — span
   .team-code (screens/team.js, metaHtml): переносится только целиком. */
@media (max-width: 760px) {
  html .team-meta .team-code { white-space: nowrap; }
}

/* Кабинет, поле имени (карандаш «Изменить имя»): фон зашит тёмным (person.css: rgba(15,23,42,
   .65), в фокусе .95), а цвет текста — из темы. В светлых темах тёмное имя на почти чёрном поле —
   1,1:1, набранного не видно (обход 16.10.2026). В светлых темах — общие токены полей, на любой
   ширине: это ошибка цвета, не раскладки. */
:root[data-theme="light"] .person-name-input {
  background: var(--field-bg); border-color: var(--field-border); box-shadow: none;
}
:root[data-theme="light"] .person-name-input:focus {
  background: var(--field-bg-focus); border-color: var(--focus-outline); box-shadow: var(--focus-ring);
}
/* Кабинет, правка имени (16.10.2026, перепроверка m20): над открытым полем оставались старое имя
   и карандаш — имя было показано дважды, а карандаш звал уже открытый редактор. Пока форма открыта
   (screens/person.js снимает с неё .is-hidden), строка «имя + карандаш» спрятана и поле встаёт на
   её место; «Сохранить» и «Отмена» возвращают строку. Любая ширина: это не раскладка телефона. */
.person-head-title:has(> .person-name-form:not(.is-hidden)) > .person-name-editor { display: none; }
.person-head-title:has(> .person-name-form:not(.is-hidden)) > .person-name-form { margin-top: 0; }
/* Кабинет, окно «Студия аватара» (16.10.2026): фон — var(--surface-card, #0f172a), а токена
   --surface-card нет ни в одной теме. В светлых окно оставалось тёмным с тёмным текстом темы:
   заголовок «Студия аватара» не виден (1:1), значки — тёмные на тёмном. В светлых темах окно — на
   поверхности темы, подложки «белое на тёмном» — на её приглушённой поверхности; наведение и
   выбранный пункт — как были. Окно защиты входа (#totp-setup-modal) с 20.10.2026 на токенах
   темы целиком (screens/person.css) — правка ему не нужна. */
:root[data-theme="light"] #avatar-studio-dialog {
  --surface-card: var(--surface);
}
:root[data-theme="light"] #avatar-studio-dialog :is(.avatar-studio-tabs, .avatar-studio-footer) {
  background: var(--surface-muted);
}
:root[data-theme="light"] #avatar-studio-dialog
  :is(.preset-item, .icon-pick-btn):not(.is-selected):not(:hover) {
  background: var(--surface-muted); border-color: var(--border);
}
/* Кабинет, «Действия» (16.10.2026): переключатель «Действия человека | Изменения доступа» не
   сжимается (person.css: flex 0 0 auto, подписи nowrap) — на 360px он шире поля карточки на 14px и
   упирался в её правую рамку. На телефоне — две равные половины во всю ширину поля. */
@media (max-width: 760px) {
  #person-section-activity .activity-toolbar .segmented-control {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); flex: 1 1 100%; min-width: 0;
  }
  #person-section-activity .activity-toolbar .segmented-control > button {
    min-width: 0; padding-inline: 6px; white-space: normal; text-align: center; line-height: 1.2;
  }
}
/* Кабинет, «Устройства» (16.10.2026): список не сворачивался — у владельца 43 устройства по
   ~100px, «Права» и «Мои действия» уезжали на 4–6 тыс. px вниз, «Завершить все сеансы» — в самый
   конец. На телефоне (и боком) видны первые пять и текущее, остальные — по кнопке «Остальные
   устройства» (screens/person.js, devicesListHtml); на компьютере список целиком, кнопки нет. */
#person-section-devices .person-devices-more { display: none; }
@media (max-width: 760px), (max-height: 560px) and (pointer: coarse) {
  #person-section-devices .person-devices:not(.is-open) > .person-device.is-extra { display: none; }
  #person-section-devices .person-devices-more {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 100%;
    margin-top: 8px;
  }
  #person-section-devices .person-devices-more svg {
    width: 16px; height: 16px; transition: transform .16s ease;
  }
  #person-section-devices .person-devices-more[aria-expanded="true"] svg { transform: rotate(180deg); }
}

/* «История»: 14 вкладок разделов переносом в строки — на телефоне стена в 8–9 рядов (398–448px):
   первая правка и поиск — ниже первого экрана, нажатие вкладки ничего видимого не меняло (обход
   16.10.2026). На телефоне вкладки — лентой от края до края экрана с прокруткой вбок, как лента
   разделов «Системы»; выбранную держит в поле зрения screens/changelog.js (revealTab). */
@media (max-width: 760px) {
  #view-changelog .changelog-tabs {
    flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
    margin-inline: calc(var(--space-4) * -1); padding: 2px var(--space-4) 4px;
    scroll-padding-inline: var(--space-4);
  }
  #view-changelog .changelog-tabs::-webkit-scrollbar { display: none; }
  #view-changelog .changelog-tab-btn { flex: 0 0 auto; }
  /* Шапка карточки правки: № версии и время — дата сжималась до 88–118px и рвалась посреди
     числа: «вчера (2026-» / «10-14 22:58)». Время — целиком, при нехватке места — строкой ниже. */
  #view-changelog .commit-meta { flex-wrap: wrap; row-gap: 4px; }
  #view-changelog .commit-date { white-space: nowrap; }
  /* Период (19.10.2026): шесть сегментов на 390px в строку не входят, а лентой вбок выбранный
     («Всё время») уезжал за край. Сеткой 3 × 2 во всю ширину — все видны сразу и ровно;
     «Показать служебные» — строкой ниже. */
  #view-changelog .changelog-periods {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; gap: 2px;
  }
  #view-changelog .changelog-periods > button { justify-content: center; padding-inline: 6px; }
  #view-changelog .commit-card { padding: 12px 14px 13px; }
}
/* Узкий телефон или 390px при масштабе 110–120 % (≤360 CSS-пикселей): «Свой период» со значком
   календаря упирался в край своей клетки — значок убран, подпись говорит сама. */
@media (max-width: 360px) {
  #view-changelog .changelog-periods > button > svg { display: none; }
}
/* «Отправить в Telegram» в светлых темах (16.10.2026, перепроверка m59): окно было тёмным в любой
   теме (changelog.css зашивает фон #0f172a и белый текст), а цвета внутри брались из темы —
   серые подписи 3,75:1, белое поле «Раздел» и белый раскрытый список среди тёмных полей. В
   светлых темах окно — светлое, на токенах темы: поверхность, поля, рамки, текст; кнопка
   «Отправить» — как была (белое на акценте). Тёмная тема — без изменений. Цвет — на любой
   ширине. */
:root[data-theme="light"] #telegram-broadcast-dialog {
  background: var(--surface); border-color: var(--border); color: var(--text);
  box-shadow: 0 25px 60px -12px rgba(15, 23, 42, .3);
}
:root[data-theme="light"] #telegram-broadcast-dialog :is(.telegram-notify-head, .telegram-notify-actions) {
  border-color: var(--border);
}
:root[data-theme="light"] #telegram-broadcast-dialog .telegram-notify-recipients {
  background: var(--accent-soft); border-color: var(--accent-disabled); color: var(--text-secondary);
}
:root[data-theme="light"] #telegram-broadcast-dialog :is(.telegram-form-input, .telegram-form-textarea) {
  background: var(--field-bg); color: var(--text);
}
:root[data-theme="light"] #telegram-broadcast-dialog
  :is(.telegram-form-input, .telegram-form-textarea, .telegram-btn-cancel):not(:focus) {
  border-color: var(--field-border);
}
:root[data-theme="light"] #telegram-broadcast-dialog .telegram-btn-cancel { color: var(--text-secondary); }
:root[data-theme="light"] #telegram-broadcast-dialog .sound-popover-close:hover {
  background: var(--surface-muted); color: var(--text);
}
/* На телефоне (16.10.2026, m59): на 360px «Отправить в Telegram» не входила в строку рядом с
   «Отменой» и переносилась в две строки. Подписи — в одну строку; не помещаются рядом — кнопки
   друг под другом во всю ширину, «Отправить» сверху. */
@media (max-width: 760px) {
  html #telegram-broadcast-dialog .telegram-notify-actions { flex-wrap: wrap-reverse; }
  html #telegram-broadcast-dialog .telegram-notify-actions > button { flex: 1 0 auto; white-space: nowrap; }
}
/* Окно «Отправить в Telegram» пальцем (16.10.2026): крестик был 24px (themes.css:
   .sound-popover-close), кнопки — 36–38px своим padding; на 360px «Отправить в Telegram» в две
   строки вставала выше «Отмены». */
@media (pointer: coarse) {
  html #telegram-broadcast-dialog .sound-popover-close {
    flex: none; width: var(--h-touch); height: var(--h-touch);
  }
  html #telegram-broadcast-dialog .telegram-notify-actions { align-items: stretch; }
  html #telegram-broadcast-dialog .telegram-notify-actions > button { min-height: var(--h-touch); }
}

/* 11.9 Шапка пальцем на планшете и телефоне боком (от 761px)
   Стандарт шапки 10.1 (themes.css) — значки 34x34 с !important. До 760px шапку телефона
   поднимает до 44px раздел 10.1б, а сенсорный планшет (768–1180) и телефон боком (844x390)
   остались с 34px: «Обновить», роль, «Скрыть шапку», период, «N онлайн» — мимо пальца
   (замер tools/e2e_devices.py 16.10.2026). Пальцем — 44px, как всё касание панели; мышью —
   34px, как было. Пилюля «N онлайн» — той же высоты, что значки (19.10.2026, владелец: «все
   кнопки должны быть одного размера, цвета и оформления»): раньше она оставалась 28px на вид
   внутри прозрачной кнопки 44px и стояла зелёной таблеткой среди рамок значков. Рамка, фон и
   состояния у всех — из стандарта 10.1 (themes.css); здесь только рост коробки --tb-ctl. */
@media (min-width: 761px) and (pointer: coarse) {
  html .topbar { --tb-ctl: var(--h-touch); }
  html .topbar :is(.icon-button, .topbar-btn, .topbar-refresh, .tour-trigger, .notify-trigger,
    .exec-period-trigger, .role-badge, .me-chip, #topbar-toggle) {
    width: var(--h-touch) !important; min-width: var(--h-touch) !important;
    max-width: var(--h-touch) !important; height: var(--h-touch) !important;
    min-height: var(--h-touch) !important; max-height: var(--h-touch) !important;
  }
  html .topbar #team-presence-chip {
    height: var(--h-touch) !important; min-height: var(--h-touch) !important;
    max-height: var(--h-touch) !important;
  }
  /* Рейл пальцем: «Свернуть меню» (28px, themes.css) и листы «Основная / Onyx» широкого рейла
     (28px, app.css; узкий 761–1100 поднимает 061dbde4) — 44px, как пункты меню рядом. */
  html .sidebar .sidebar-edge-toggle {
    flex-basis: var(--h-touch) !important; width: var(--h-touch) !important;
    height: var(--h-touch) !important;
  }
  html .app-shell .team-sheet-pill { height: var(--h-touch); }
}
/* «Система» на планшете: лента разделов узкой колонки выходит в поля экрана на 16px
   (system.css), а поля экрана в островке — 12px: лента была шире рабочей области, и та
   листалась вбок. В островке (от 761px) лента стоит в своих полях, без выхода. */
@media (min-width: 761px) {
  @container sys-view (max-width: 900px) {
    html #view-system .sys-nav { margin-inline: 0; }
  }
}

/* 11.8 Окна, листы и поповеры */

/* Перепроверка 16.10.2026. «Внести отчёт» на 360px: дата в половине ряда рядом с проектом
   резалась до «16.10.20…» (поле 16px + место под значок календаря) — на узком телефоне дата
   своей строкой. «Отправить в Telegram» на 360px: кнопки друг под другом не входили в окно, и
   при открытии низ «Отмены» был срезан — поля окна телефонные, кнопки липнут к низу окна. */
@media (max-width: 374px) {
  html #modal-manual-report .form-row:has(.date-field) { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  html #telegram-broadcast-dialog { padding: 16px; }
  html #telegram-broadcast-dialog .telegram-notify-actions {
    position: sticky; bottom: -16px; margin-bottom: -16px; padding-block: 12px 16px;
    background: inherit;
  }
}

/* Компьютер и планшет: круглая кнопка AI-Помощника (themes.css, 52px в 24px от низа и края)
   лежала на крестике тоста — клик по «×» открывал Помощника (перепроверка 16.10.2026). Тосты
   встают над кнопкой; на телефоне это делает раздел 10. */
@media (min-width: 761px) {
  html .toast-stack { bottom: calc(max(24px, env(safe-area-inset-bottom, 0px)) + 64px); }
}

/* Кнопки нижних окон-<dialog> — над полосой «домой» айфона (16.10.2026, m22): телефонный отступ
   под вырез (app.css, @media 760px) перебивало общее «.modal-actions { padding: 14px 20px
   !important }» того же файла — «Сохранить», «Удалить», «Создать ключ» стояли на 787–831px из
   844 и нижним краем заходили в зону жеста (с 810px). Над открытой клавиатурой шторка и так
   поднята (--kb-inset) — там отступ под вырез уходит. Низкое окно (до 480px) держит свои 8px
   (правило выше), окно PNL правится вместе со своим экраном. */
@media (max-width: 760px) and (min-height: 481px) {
  html .modal-dialog:not(.pnl-entry-dialog) .modal-actions {
    padding-bottom: calc(14px + max(0px, env(safe-area-inset-bottom, 0px) - var(--kb-inset, 0px))) !important;
  }
}

/* Тосты на телефоне — над окнами (16.10.2026, m23): стопка (z-index 40) лежала под шторками окон
   дашборда (.modal-backdrop, 1000) — «Выберите проект и дату отчёта» и «Сервер недоступен» при
   сохранении отчёта не было видно, окно просто оставалось открытым. Выше окон, ниже выпадающих
   списков. Над окнами-<dialog>, колокольчиком, «Оформлением» и листом «Ещё» — верхним слоем
   браузера, его z-index не перекрыть, — стопку поднимает ui/toast.js (поповером; пока открыто
   модальное окно — изнутри него, иначе тост виден, но инертен: перепроверка 16.10.2026).
   Браузерные стили поповера ей ни к чему: место и вид — прежние; :where без веса — правила места
   стопки (app.css, раздел 10 этого файла) сильнее сброса. */
@media (max-width: 760px) {
  html body .toast-stack { z-index: 1100; }
}
/* Ноутбук (16.10.2026, перепроверка m23): тост под окнами дашборда лежал под их размытым
   затемнением — «Сервер недоступен» не прочесть, а клик по нему попадал в затемнение и закрывал
   «Внести отчёт». Пока такое окно открыто — стопка над ним, как на телефоне; в остальное время
   слой прежний: тост не ложится на кнопку и окно Помощника. */
html body:has(.modal-backdrop.is-open) .toast-stack { z-index: 1100; }
:where(#toast-stack-wrap[popover]) {
  inset: auto; height: auto; margin: 0; padding: 0; border: 0;
  background: transparent; color: inherit; overflow: visible;
}

@media (max-width: 760px) {
  /* Лист «Ещё» закрывается касанием по затемнению над ним (16.10.2026, m24, core/shell.js): на
     айфоне нет ни Esc, ни «Назад», и уйти из листа можно было только в другой раздел. Полоса
     затемнения — не меньше 56px под вырезом: при 92% высоты пальцу оставалось 21px между
     строкой состояния и листом. */
  html .modal-dialog.sheet-dialog {
    max-height: calc(100dvh - env(safe-area-inset-top, 0px) - 56px - var(--kb-inset, 0px));
  }
  /* Число у «Системы» в листе «Ещё» (16.10.2026, m68): счётчик сломанных подключений носил цвета
     рейла — серые 10px на подложке цвета листа (в тёмной теме 3,9:1, подложки не видно), и
     единственный на телефоне знак «подключение сломалось» легко пропустить. Это число проблем —
     цвет тревожный: 5,7:1 в тёмной теме, 5,3:1 в светлой. */
  html .sheet-dialog .sheet-item > .nav-count {
    background: var(--danger-soft); color: var(--danger-text);
  }
  /* Окно уведомлений (16.10.2026, m66): оно кончается над таб-баром (ui/notifications.js,
     positionPopover), а отступ под полосу «домой» держит сам таб-бар — 34px под вырез внизу окна
     (ui/notifications.css) оставались пустой полосой. Подвал «Отметить всё прочитанным» и «Вся
     история» не входил в строку и вставал в две: на айфоне низ окна съедал 145px из 641, видно было
     три уведомления. Кнопки подвала — одного кегля и плотнее: от 360px — одной строкой. */
  :root body .theme-popover.notify-popover { padding-bottom: 8px; }
  :root body .notify-foot { gap: 4px; }
  :root body .notify-foot .text-button { gap: 6px; padding-inline: 4px; font-size: 12.5px; }
  :root body .notify-foot .text-button svg { width: 15px; height: 15px; }
}

/* «Оформление», «Свой акцент» пальцем (16.10.2026, m25): кружкам дали 44px (раздел 10), а строку
   под них не перестроили — восемь кружков между подписью и полем HEX шли столбиком, на 360px по
   одному в ряд: строка 430px, по бокам пусто. Подпись и HEX — первой строкой, кружки — под ними,
   по четыре в ряд. Мышью кружки 26px и помещаются в строку — там как было. */
@media (pointer: coarse) {
  html .theme-custom-accent-row { flex-wrap: wrap; row-gap: 10px; }
  html .theme-custom-swatches {
    order: 1; flex: 1 1 100%;
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); justify-items: center;
  }
}

/* «Свой акцент» в светлых темах (16.10.2026, m64): цвета поля HEX и строки подобраны под тёмную —
   поле серой плашкой (чёрный 45% поверх белого окна), подсказка «#7C3AED» серым по серому
   (1,4:1), введённый код — 3:1; рамки и фона строки на белом не видно. Токены поля и поверхности
   темы, рамка в фокусе — по-прежнему акцентом (themes.css). Это цвет — на любом размере экрана. */
:root[data-theme="light"] .theme-custom-accent-row {
  background: var(--surface-muted); border-color: var(--border);
}
:root[data-theme="light"] .theme-hex-input { background: var(--field-bg); color: var(--text); }
:root[data-theme="light"] .theme-hex-input:not(:focus) { border-color: var(--field-border); }

/* Шестерёнка колокольчика в светлых темах (16.10.2026, m65): общее «.icon-button:hover»
   (app.css, !important) красит значок белым на белом 8% — окно уведомлений лежит в <body>, мимо
   исключений светлой темы для рабочей области и окон, и кнопка настроек пропадала под курсором,
   а на телефоне — после касания: наведение там залипает до следующего тапа. Как в тех
   исключениях: значок акцентом на приглушённой подложке. Цвет — на любом размере экрана. */
:root[data-theme="light"] .theme-popover .icon-button:hover:not(:disabled) {
  background: var(--surface-muted) !important; color: var(--accent-strong) !important;
}

/* «Обучение по панели», меню глав листом (16.10.2026, m67): «Закрыть» стояла в подвале после
   семи глав — на 306–392px ниже края листа, а тап мимо листа только «встряхивает» его: выхода не
   было видно, пока не долистаешь до конца. Подвал меню прилипает к низу листа — «Закрыть» видна
   сразу, главы уходят под него. Отступ под полосу «домой» — у подвала, а не у листа: иначе под
   прилипшим подвалом просвечивали бы главы; тень цвета карточки закрывает и рамку фокуса главы
   (она шире самой главы на 4px). Условие — как у листа в ui/tour.css; html — тот файл
   подключается позже этого. */
@media (max-width: 600px), (max-height: 560px) {
  html .tour-card[data-mode="menu"]:not([data-side="sheet-top"]) { padding-bottom: 0; }
  html .tour-card[data-mode="menu"]:not([data-side="sheet-top"]) > .tour-foot {
    position: sticky; bottom: 0; z-index: 1;
    padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    background: var(--popover-bg, var(--surface));
    box-shadow: 0 0 0 8px var(--popover-bg, var(--surface));
  }
}
@media (max-height: 420px) {
  html .tour-card[data-mode="menu"]:not([data-side="sheet-top"]) > .tour-foot {
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  }
}

/* 11.10 PNL и стрелка PNL в меню — пальцем и на телефоне (16.10.2026)
   Замер tools/e2e_devices.py по копии прода (телефоны и планшеты, обе темы): стрелка листов PNL
   в рейле — цель 18–40px поверх самого «PNL» (446 мелких целей и 217 наложений на всех экранах),
   цифры-кнопки отчёта и листов — 26–38px в высоту 32–36px, выбор месяца — 32px, «Раскрыть»,
   «Раскрыть всё», «Центы», сортировка и строки проектов — 32–40px. Пальцем — 44px (--h-touch),
   как всё касание панели; мышью — как было. Экран PNL и его листы правятся в своих файлах
   параллельно — поправки под палец собраны здесь, специфичность — через html. */

/* Широкий рейл пальцем (iPad боком, 1180px): стрелка лежала поверх правого края «PNL» — палец у
   края пункта попадал то в переход, то в сворачивание. Стрелка — своей колонкой 44x44 справа от
   «PNL», как стрелка ветки в листе «Ещё» телефона (ui/nav-branch.css, .sheet-branch-row); листы
   под ними — во всю ширину ветки. */
@media (min-width: 1101px) and (pointer: coarse) {
  html .main-nav .nav-branch { grid-template-columns: minmax(0, 1fr) var(--h-touch); }
  html .main-nav .nav-branch > .nav-branch-head { padding-right: 6px; }
  html .main-nav .nav-branch > .nav-branch-toggle {
    grid-area: 1 / 2; width: var(--h-touch); min-height: var(--h-touch); margin: 0;
  }
  html .main-nav .nav-branch > .nav-sub { grid-column: 1 / -1; }
}
/* Узкий рейл пальцем (планшет, телефон боком; 761–1100px, рейл 76px): уголок 18px на значке
   «PNL» — не цель для пальца, а 44px рядом со значком в 76px не встают. Касание «PNL» и так
   раскрывает список листов справа от рейла (ui/nav-branch.js, onHeadClick) — уголок остаётся
   знаком «здесь список», а касание по нему уходит в «PNL». С клавиатуры и экранным диктором
   стрелка работает как прежде: pointer-events её фокус и нажатие не трогает. */
@media (min-width: 761px) and (max-width: 1100px) and (pointer: coarse) {
  html .app-shell .main-nav .nav-branch > .nav-branch-toggle { pointer-events: none; }
  /* Шапка PNL на планшете 768px: стрелки месяца в 44px (ниже) расширили выбор месяца на 24px, и
     «Операция» уходила одна во вторую строку (нужно 642px из 618). Кнопки шапки — с полями 10px
     вместо 14px, стрелки месяца — без зазора: шапка снова в одну строку. */
  html #view-exec-pnl .pnl-actions > :is(.primary-button, .secondary-button) { padding-inline: 10px; }
  html #view-exec-pnl .pnl-month { gap: 0; }
}

@media (pointer: coarse) {
  /* Выбор месяца — в рост пальца со стрелками рядом: рамка «‹ месяц ›» растёт по ним (на
     телефоне так и было — 46px), а не режет кнопки по краю. */
  html .pnl-month { height: auto; min-height: var(--h-touch); }
  html .pnl-month .pnl-month-step {
    width: var(--h-touch); min-width: var(--h-touch); height: var(--h-touch);
  }
  html .pnl-month .ui-select-trigger {
    height: var(--h-touch) !important; min-height: var(--h-touch) !important;
  }
  /* «Раскрыть всё» и другие компактные кнопки карточек (pnl.css держит их 32px с !important),
     «Центы» отчёта. */
  html .pnl-card .btn-compact {
    height: auto !important; min-height: var(--h-touch) !important;
  }
  html #view-exec-pnl .pnl-tools .switch-control { min-height: var(--h-touch); }

  /* Цифры-кнопки (откуда цифра): отчёт P&L и проекты, сводка листа, вклад ГЕО, КУШ по дням. Цель
     растёт полями внутрь до 44x44, строка — до 44px: поля ячейки сверху и снизу отдаются кнопке,
     а не прибавляются к ней. */
  html #view-exec-pnl :is(.pnl-stmt, .pnl-proj) .pnl-num,
  html .pnl-sheet-view :is(.pnl-sh-stmt, .pnl-sh-contribs, .pnl-sh-days-table) .pnl-num {
    display: inline-flex; align-items: center; justify-content: flex-end;
    min-width: var(--h-touch); min-height: var(--h-touch);
    margin-block: 0; vertical-align: middle;
  }
  html .pnl-sheet-view .pnl-sh-st { min-height: var(--h-touch); padding-block: 0; }
  html .pnl-sheet-view .pnl-sh-days-table tbody td:has(> .pnl-num) { padding-block: 0; }
  /* «Раскрыть» статьи: 44x44, а подпись статьи — на прежнем месте (поля кнопки уходят влево в
     отступ строки и вправо в зазор до подписи); поля подписи сверху и снизу — тоже кнопке. */
  html #view-exec-pnl .pnl-stmt .st-toggle {
    width: var(--h-touch); height: var(--h-touch); margin-inline: -8px -4px;
  }
  html #view-exec-pnl .pnl-stmt .st-label-in { padding-block: 0; }
  /* Проекты: сортировка в шапке и строка проекта. Шапка — в рост кнопок сортировки: на телефоне
     её строки — flex высотой 30px (pnl.css), и «Проект · приёмка» 44px наезжала на «Чистую». */
  html #view-exec-pnl .pnl-sort { min-width: var(--h-touch); min-height: var(--h-touch); }
  html #view-exec-pnl .pnl-proj thead th { height: auto; }
  html #view-exec-pnl .pr-open { min-height: var(--h-touch); align-content: center; }
}

@media (max-width: 760px) {
  /* «По дням» на телефоне заранее не собирается (pnl.js, prerenderGrid): скрытая вкладка так и
     держала силуэт загрузки — невидимый (content-visibility: hidden, pnl.css), но в раскладке, и
     раздел «не дождался данных» навсегда. Пока во вкладке только силуэт, хранить нечего — она
     вне раскладки; открыли «По дням» — силуэт виден как обычно. */
  html #view-exec-pnl .pnl-panel[hidden]:has(> .sk-screen) { display: none !important; }
  /* Плашка итога в 360px: «ПРИБЫЛЬ ДО РАСХОДНИКОВ» рядом с кодом «Σ4E» не влезало — слово
     вылезало из плашки на 12px. Код уходит под подпись, только если самое длинное слово подписи
     рядом с ним не встаёт. */
  html .pnl-sheet-view button.pnl-sh-tile .pnl-sh-tile-head { flex-wrap: wrap; row-gap: 4px; }
  html .pnl-sheet-view button.pnl-sh-tile .pnl-sh-tile-title { flex: 1 1 0; min-width: min-content; }
  /* Вклад ГЕО: полоса — второй строкой под цифрой в 44px; зазор не нужен — поля цифры его дают. */
  html .pnl-sheet-view .pnl-sh-contrib { row-gap: 0; }
}