@charset "UTF-8";
/* Телефонные медиазапросы: кроме ширины окна - сенсорный экран и узкая сторона экрана устройства (телефон лежа,
   широкий веб-вью, «Версия для ПК» в браузере). Пояснение - в начале style.css (01.11.2026). */
/* Панели разделов на телефоне: нижняя (кнопки под чертежом) и верхняя (вторая строка шапки, ниже в этом файле).
   Нижняя панель (304, 01.11.2026; владелец: «создай снизу панель инструментов в виде иконок, основное
   внимание на чертеже, он открыт как основной экран»). Разметка - index.html #mbar, обработчики - app.js bindMbar.
   Кнопки: Объекты на потолке, Профиль по периметру, Размеры (по центру, квадратная крупнее остальных - карточка помещения),
   Раскрой полотна, «⋯» (лист: Фото объекта, Примечания к замеру, Журнал общения, у дилера - календари замеров и монтажей
   и пункты «Сервиса» шапки: Акт сверки, Касса, Зарплата, Поиск бригады;
   «Полотно» - подраздел «Раскроя» (app.js nestSecs), «Подсветка парящего потолка» - второе окно под «Профилем» (app.js
   SEC_WITH)). На телефоне нажатие показывает раздел на весь экран вместо чертежа, без прокрутки страницы
   (app.js setSec); повторное нажатие активной кнопки возвращает к чертежу. Только экран до 640 px
   (как полоса кнопок над чертежом в две строки, style.css); в смете (.app.est-on), в 3D (body.viz-open) и у заказа без
   потолков (html.no-rooms) панели нет. На компьютере и планшете ничего не меняется. */
.mbar { display: none; }
:root { --mbar-h: 0px; } /* высота нижней панели: меню шапки и лист «⋯» встают над ней, чтобы не уходили под кнопки */
@media screen and (max-width: 640px), screen and (pointer: coarse) and (max-device-width: 540px), screen and (pointer: coarse) and (max-device-height: 540px) {
  :root { --mbar-h: calc(84px + env(safe-area-inset-bottom)); } /* 62 px кнопки + 16 px выступ «Размеров» + зазор */
  html.no-rooms, body.viz-open, body:has(.app.est-on) { --mbar-h: 0px; } /* здесь нижней панели нет - меню снова до низа экрана */
  /* панель - последняя полоса рабочей области (.mbar лежит внутри .app): order больше, чем у чертежа и карточек (style.css
     @media 960: .stage 1, .panel 2), поля в минус - на всю ширину поверх отступов .app. Вид 388 (плоская полоса без выступа
     «Размеров») отменен 05.11.2026 по просьбе автора задачи - здесь все как было до него */
  .mbar { position: relative; z-index: 30; order: 9; flex: none; margin: -6px -6px 0; display: grid; grid-template-columns: 1fr 1fr auto 1fr 1fr; align-items: end; gap: 2px;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--line); box-shadow: 0 -2px 12px rgba(20,22,29,.08); }
  .mbar .mb { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 50px; padding: 5px 2px; border: 0; border-radius: 10px;
    background: none; color: var(--muted); font: inherit; font-size: 10.5px; font-weight: 700; line-height: 1.1; cursor: pointer; -webkit-tap-highlight-color: transparent;
    transition: background-color .18s ease, color .18s ease, box-shadow .18s ease; } /* подсветка раздела не моргает, а перетекает (01.11.2026, владелец: «сделай сглаживание анимации») */
  .mbar .mb svg.i { width: 22px; height: 22px; flex: none; }
  .mbar .mb span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mbar .mb.act { color: var(--accent-ink, var(--accent)); background: var(--accent-soft); }
  /* «Размеры» - квадратная кнопка со скругленными углами по центру, чуть выше и крупнее остальных */
  .mbar .mb.mb-main { width: 62px; height: 62px; min-height: 0; margin: -16px 6px 0; border-radius: 16px; background: var(--btn-bg, var(--accent)); color: var(--accent-fg, #fff); box-shadow: 0 4px 14px rgba(11,107,211,.35); }
  .mbar .mb.mb-main svg.i { width: 26px; height: 26px; }
  .mbar .mb.mb-main.act { background: var(--btn-bg-hot, var(--accent-hot, var(--accent))); color: var(--accent-fg, #fff); box-shadow: 0 0 0 3px var(--accent-soft), 0 4px 14px rgba(11,107,211,.35); }
  .mbar .mb-more { position: relative; display: flex; }
  .mbar .mb-more .mb { flex: 1 1 auto; }
  .mbar .menu-list button { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; }
  .mbar .menu-list button svg.i { width: 18px; height: 18px; color: var(--accent-ink, var(--accent)); }
  /* Экран телефона не прокручивается: шапка, рабочая часть и нижняя панель - три полосы одной колонки, высота считается сама
     (01.11.2026, владелец: «убери ручную функцию скроллинга, оптимизируй каждый раздел под размер экрана телефона и сделай их
     неподвижными, чтобы переход между разделами осуществлялся нажатием на иконки»). Раньше страница была длинным списком
     карточек, и к разделу надо было листать. Теперь видно либо чертеж, либо один раздел - его показывает app.js setSec. */
  html, body { height: var(--vh100); overflow: hidden; } /* var(--vh100): в Telegram - высота окна из события, с клавиатурой не ломается */
  body { display: flex; flex-direction: column; min-height: 0; }
  .top { position: static; flex: none; } /* прилипать больше не к чему: страница целиком неподвижна */
  .app { flex: 1 1 auto; min-height: 0; height: auto; overflow: hidden; overflow: clip; padding: 6px 6px 0; gap: 6px; } /* поля и зазоры рабочей области меньше: высота уходит чертежу (02.11.2026) */
  .stage { gap: 6px; } /* clip: рабочую область не сдвинуть и программно (старые браузеры останутся на hidden) */
  .stage { flex: 1 1 auto; min-height: 0; }
  /* клавиатура размеров (numpad.js) закрывает низ раздела: страница на телефоне не прокручивается, поэтому отступ
     снизу получает сам раздел - поля над клавиатурой прокручиваются и видны (02.11.2026) */
  html.np-open .app.sec-on > .panel { padding-bottom: calc(var(--np-h, 400px) + 8px); }
  /* Подсказки поверх чертежа - под экран телефона (02.11.2026, автор задачи Юрий @utaliiev: «окна подсказок очень
     большие и закрывают практически весь чертеж, оптимизируй их размер; оранжевое окно блокировки уменьши до одного
     слова „разблок."; окно подсказок по действиям сделай всплывающим и работающим по вызову; добавь в угол окна
     чертежа кнопку с вызовом подсказок»). На экране остаются только суть режима и кнопки действий (текст сокращает
     app.js placeShort), полный текст - по кнопке «?» в левом верхнем углу чертежа. Плашка замка - одно слово. */
  .draw-tip { display: inline-flex; }
  /* «?» - в углу самого чертежа, под полосой кнопок (08.11.2026): полоса стоит в начале окна чертежа (style.css, две строки
     по 34 px с зазором 3 px, поля 4 px и линия 1 px - 80 px), а «?» на прежних 10 px от верха закрывал кнопку «Вписать в
     экран» - вписать чертеж на телефоне было нечем */
  .draw-tip { top: 88px; }
  .click-hint { left: 6px; right: 6px; bottom: 6px; transform: none; max-width: none; justify-content: center; gap: 5px;
    padding: 5px 9px; font-size: 12px; line-height: 1.2; border-radius: 12px; flex-wrap: wrap; white-space: normal; } /* телефон: суть строкой, кнопки под ней */
  .click-hint > span { flex: 1 1 100%; text-align: center; } /* суть режима - строкой, кнопки действий под ней */
  .hint-btn { padding: 4px 9px; font-size: 12px; }
  .lock-hint { bottom: 6px; padding: 2px 8px; font-size: 11px; gap: 4px; }
  .lock-hint svg.i { width: 12px; height: 12px; }
  /* чертеж занимает весь остаток экрана - подписи, пояснения и подсказки помещаются в поле целиком */
  .canvas-wrap { flex: 1 1 auto; height: auto; min-height: 0; }
  /* Сводка над чертежом - одна короткая строка (02.11.2026, автор задачи Юрий @utaliiev: «сетку с информацией о периметре и
     площади можно уменьшить в размере и сделать ее в одну строку минимально возможного размера, убери из нее клетку „габарит" и
     клетку „смета", так как кнопка смета уже есть выше»). Было две строки по шесть ячеек (96 px), стало около 20 px - остаток
     высоты забирает чертеж. Подпись и число - рядом в строке, ячейки в ряд без переноса и сжимаются с многоточием; габарит
     (.res.bbox) и смета (.res.money) скрыты: смета открывается кнопкой в шапке. Пояснение к числу (куски и швы у полотна,
     площади полотен) в одну строку не помещается - оно есть в карточке «Раскрой полотна». Полоса итога объекта (.res.obj)
     с 05.11.2026 на телефоне скрыта (ниже), долг дилера (.res.debt) остается строкой под сводкой. */
  .results .rs-room { display: flex; flex-wrap: nowrap; overflow: hidden; }
  .results .rs-room > .res { flex: 1 1 auto; min-width: 0; display: flex; align-items: baseline; gap: 3px; padding: 0 4px 1px; }
  .results .rs-room > .res > .k { flex: 0 1 auto; font-size: 8px; line-height: 10px; letter-spacing: 0; }
  .results .rs-room > .res > .v { flex: 0 1 auto; margin-top: 0; font-size: 11px; line-height: 12.5px; }
  .results .rs-room > .res .d { display: none; }
  .results .rs-room > .res.bbox, .results .rs-room > .res.money { display: none; }
  /* Синей полосы итога объекта («Всего · 2 пом. … 85 560 ₽») на телефоне нет, а сводка стала ниже (05.11.2026, автор задачи
     Юрий @utaliiev по фото: «убери синюю полосу, таблицу со значениями площади и периметра максимально уменьши по высоте,
     освободившуюся площадь примени к размеру поля чертежа»). Сумма объекта видна на кнопке «Смета» в шапке и на вкладке
     «Смета», долг дилера (.res.debt) остается. Полоса итога занимала около 36 px, сводка похудела с 20 до 15 px -
     вместе это около 40 px, и всю высоту забирает чертеж: .canvas-wrap тянется по остатку экрана. */
  .results .res.obj { display: none; }
  .results .rs { border-width: 0; border-radius: 10px; } /* рамка блока сводки - еще 2 px высоты; фон и тень остаются */
  .stage { gap: 5px; }
  .edit-pop .ep-bend-note { display: none; } /* окно угла точки линии (app.js openBendPop): пояснение к углу спрятано - окно короче, чертеж под ним виден (02.11.2026) */
  #messages { flex: 0 0 auto; max-height: 34%; overflow-y: auto; } /* сообщения под чертежом не съедают его, а листаются сами */
  #messages .msg { padding: 4px 9px; font-size: 12px; line-height: 1.25; } /* сообщение «Замер сходится» - в одну-две короткие строки: высота уходит чертежу (02.11.2026) */
  .panel { display: none; } /* карточки показываются по одной, кнопкой панели */
  .app.sec-on > .stage { display: none; }
  /* Раздел листается только вверх-вниз (01.11.2026, владелец; 02.11.2026, автор задачи Юрий @utaliiev: «сделай так, чтобы
     в разделе „размеры" не было возможности делать смещение всего раздела влево-вправо»). Закрыты все три пути сдвига:
     overflow-x: clip - панель перестает быть горизонтальной прокруткой (при hidden она оставалась ею и ее двигал сам
     браузер, подтягивая поле к фокусу - жест при этом был уже запрещен); touch-action: pan-y - палец ведет только
     вверх-вниз, а щипок по разделу больше не масштабирует страницу (увеличенную страницу можно было таскать вбок);
     overflow: clip у рабочей области - ее тоже нельзя сдвинуть программно. Браузеры без clip (Safari до 16) держатся на
     прежнем hidden, а уехавший сдвиг возвращает app.js (bindMbar). */
  .app.sec-on > .panel { display: flex; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 8px;
    touch-action: pan-y; overscroll-behavior-x: contain; overflow-x: clip; }
  /* и сдвигать нечего: содержимое раздела ужимается по ширине экрана - строка названия помещения с кнопками переносится,
     поля выбора в таблицах тянутся по колонке, подписи переносятся по словам (раньше они держали ширину и раздел уезжал вбок) */
  .app.sec-on > .panel > .card.cur { min-width: 0; max-width: 100%; }
  .app.sec-on > .panel .room-head, .app.sec-on > .panel .room-btns, .app.sec-on > .panel .row:not(.wrap) { flex-wrap: wrap; }
  .app.sec-on > .panel .tbl select.sel { width: 100%; min-width: 0; }
  /* «Сдвиг стены» на телефоне (05.11.2026): выбор углов, отступ и кнопка - одной строкой, подсказка про выбранные стены - под ней.
     06.11.2026: раздел стал сворачиваемым подразделом (details.cmd-sec), строка выбора - прямой потомок .cmd-sec-b; поля еще уже */
  .room-shift .seam-row { gap: 4px; }
  .room-shift .seam-row .lbl { font-size: 11.5px; gap: 3px; }
  .room-shift .seam-row .sel { min-width: 40px; padding: 4px 14px 4px 5px; font-size: 11.5px; }
  .room-shift .seam-row .sel.dir { min-width: 46px; } /* «внутрь / наружу» */
  .room-shift .seam-row input[type=number] { width: 40px; padding: 4px 4px; font-size: 11.5px; }
  .room-shift .seam-row .btn.small { padding: 4px 7px; font-size: 11.5px; }
  .room-shift .cmd-sec-b > .seam-row > .lbl #shiftDLbl { display: none; } /* единица - в подсказке поля: строка умещается вместе с окном направления */
  .app.sec-on > .panel .tbl td.n, .app.sec-on > .panel .tbl td.calc { white-space: normal; }
  /* строки таблиц - по ширине экрана (01.11.2026, владелец: «оптимизируй ширину строк в разделе „размеры" и ограничь
     возможность свайпов влево-вправо»): колонки делят ширину карточки (table-layout: fixed), буквы стороны и угла - узкими
     колонками, поля ввода шире. Шире экрана ничего не становится, и двигать вбок нечего; жест вбок выключен и у карточки */
  .app.sec-on > .panel > .card.cur { touch-action: pan-y; }
  /* и прокручивать вбок нечего: все, что внутри карточки окажется шире экрана, обрезается по ее краю (overflow-x: clip) и в
     прокручиваемую ширину панели не попадает - сдвинуть раздел не может ни палец, ни браузер, подтягивающий поле к фокусу
     (02.11.2026, автор задачи Юрий @utaliiev по фото: карточка «Размеров» уехала влево на ~80 px, левые края строк
     обрезаны, хотя запрет жеста уже стоял; какой именно элемент давал запас, на снимке не видно - справа от карточки
     пусто). Обрезаются только невидимые излишки: списки выбора и подсказки лежат вне панели (position: fixed). */
  .app.sec-on > .panel > .card.cur { overflow-x: clip; }
  .app.sec-on > .panel .tbl { table-layout: fixed; width: 100%; }
  .app.sec-on > .panel .tbl th, .app.sec-on > .panel .tbl td { padding: 3px 3px; overflow-wrap: anywhere; }
  .app.sec-on > .panel .tbl th { font-size: 10px; }
  .app.sec-on > .panel .tbl td.n { font-size: 12px; }
  .app.sec-on > .panel .tbl input[type=number], .app.sec-on > .panel .tbl input[type=text] { padding: 5px 4px; }
  .app.sec-on > .panel #anglesTable th:nth-child(1), .app.sec-on > .panel #anglesTable th:nth-child(3) { width: 19%; }
  .app.sec-on > .panel #diagSides th:nth-child(1), .app.sec-on > .panel #diagTable th:nth-child(1) { width: 26%; }
  .app.sec-on > .panel #diagTable th:nth-child(3) { width: 22%; }
  .app.sec-on > .panel #diagTable th:nth-child(4) { width: 14%; } /* колонка с крестиком - узкая */
  /* строка «Диагонали» (01.11.2026, автор задачи Юрий @utaliiev по фото со стрелками: «подчеркнутое слово „диагонали"
     съезжает вниз от своей синей метки из-за соседних слов», «перенеси слово „все" под слово „свернуть", а слово
     „диагонали" - под „подобрать"»). Кнопки «Развернуть все» и «Подобрать диагонали» в одну строку не помещались, и
     раздел становился шире экрана - его можно было двигать вбок. Теперь каждая кнопка шириной со свое самое длинное
     слово (min-content), второе слово переносится под первое. Метка-черточка и название - одним flex-рядом: черточка
     больше не остается на строке выше, а длинное название («Диагонали кривых и вырезов») переносится по словам. */
  .app.sec-on > .panel .sub-head { gap: 8px; }
  .app.sec-on > .panel .sub-head > span:first-child { display: flex; align-items: center; min-width: 0; }
  .app.sec-on > .panel .sub-head > span:first-child::before { flex: none; }
  .app.sec-on > .panel .sub-head > .btn { width: min-content; justify-content: center; text-align: center; white-space: normal; line-height: 1.15; }
  .app.sec-on > .panel > .card, .app.sec-on > .panel > .panel-foot { display: none; } /* в разделе только его карточка, подпись панели не нужна */
  /* переход между разделами - без прокрутки: один экран сменяет другой мягким появлением (01.11.2026, владелец: «сделай плавный
     переход между разделами без скроллинга») */
  .app.sec-on > .panel > .card.cur, .app:not(.sec-on):not(.est-on) > .stage { animation: secIn .22s ease; }
  .app.sec-on > .panel > .card.cur { display: block; }
  .app.est-on > .est-view { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; } /* смета листается внутри своего экрана */
  html.no-rooms .mbar, body.viz-open .mbar, .app.est-on .mbar { display: none; }
  html.no-rooms .app, .app.est-on { padding-bottom: 8px; } /* панели нет - низу нужен свой отступ */
  /* разделы плотнее, чтобы помещались в экран целиком */
  .card { padding: 10px 12px; }
  details.card > summary { min-height: 42px; margin: -10px -12px; padding: 7px 10px; font-size: 14px; }
  details.card[open] > summary { margin-bottom: 10px; }
  details.card > summary svg.i, .room-head > svg.room-ico { width: 24px; height: 24px; padding: 4px; }
  .fields { gap: 6px; } .fields.grid2 { gap: 6px 8px; }
}
@keyframes secIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* Переехавший раздел на телефоне (01.11.2026, владелец: «перенеси „полотно" в „раскрой полотна" первым подразделом,
   сворачивающимся по галочке как остальные пункты»). «Подсветка парящего потолка» сюда не входит: она осталась своей
   карточкой и показывается вторым окном под «Профилем по периметру» (app.js SEC_WITH).
   Карточку переносит app.js nestSecs, здесь - ее вид: вместо шапки карточки обычная строка подраздела с галочкой слева,
   свой значок убран (у остальных подразделов значков нет), содержимое с боковыми отступами подраздела. */
/* Заливка и метка слева - как у остальных подразделов (style.css .cmd-sec > summary, 04.11.2026): без этих двух строк
   «Полотно» на телефоне осталось бы белой строкой, а соседние разделы были бы цветными. */
.cmd-sec.sub > summary.sub-head { flex-wrap: wrap; font-size: 13px; min-height: 0; margin: 0; padding: 7px 10px; border: 0; border-radius: 10px;
  color: var(--accent-ink); background: var(--accent-soft); background: color-mix(in srgb, var(--accent) 12%, var(--surface)); box-shadow: inset 3px 0 0 var(--accent-ink); }
.cmd-sec.sub[open] > summary.sub-head { border-bottom: 1px solid var(--accent-line); border-radius: 10px 10px 0 0; }
.cmd-sec.sub > summary.sub-head::after { content: none; } /* стрелка карточки не нужна: у подраздела своя галочка слева */
.cmd-sec.sub > summary.sub-head > svg.i { display: none; }
.cmd-sec.sub > :not(summary) { padding-left: 10px; padding-right: 10px; }
.cmd-sec.sub > :last-child { padding-bottom: 9px; }
/* Верхняя панель на телефоне (305, 01.11.2026; владелец: «сделай верхнюю, помести туда точно также в виде иконки раздел „Клиент и
   объект", а после него названия помещений и кнопку их добавления»). Это вторая строка закрепленной шапки: значок «Клиент и
   объект», полоса названий помещений с прокруткой, «+» и «Смета». Разметка - index.html #btnClientSec и #btnAddRoomTop,
   обработчики - app.js bindMbar; порядок кнопок в строке задает order (строка 1 - логотип, «В базу», название объекта и значки
   справа, style.css @media 960). Кнопки видны только на телефоне, на компьютере и планшете шапка прежняя. */
.tb-sec, .tb-add, .tb-br { display: none; }
@media screen and (max-width: 640px), screen and (pointer: coarse) and (max-device-width: 540px), screen and (pointer: coarse) and (max-device-height: 540px) {
  /* перенос строки в шапке (01.11.2026, владелец: «верни иконку „клиент и объект" в строку ниже, слева от кнопки названия
     помещения»): без него значок оставался в первой строке, когда там хватало места - перенос зависел от ширины экрана и длины
     названия объекта. Пустая полоса во всю ширину всегда закрывает первую строку, а значок с помещениями начинают вторую.
     Строки шапки расставлены через row-gap: 0 - отступ между ними дает сама полоса, высота шапки прежняя */
  .top { row-gap: 0; }
  .tb-br { display: block; order: 4; flex: 0 0 100%; width: 100%; height: 8px; margin: 0; padding: 0; }
  .tb-sec { display: flex; order: 5; flex: none; align-items: center; justify-content: center; padding: 6px 10px; border: 1px solid var(--line); border-radius: 10px;
    background: var(--surface2); color: var(--muted); cursor: pointer; -webkit-tap-highlight-color: transparent;
    transition: background-color .18s ease, color .18s ease, border-color .18s ease; }
  .tb-sec svg.i { width: 20px; height: 20px; }
  .tb-sec.act { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-ink, var(--accent)); }
  /* «Смета» всегда в одной строке с названием помещения (02.11.2026, автор задачи Юрий @utaliiev: «кнопку смета и строку с
     названием помещения можно сделать в один ряд»). Полоса названий отдает ширину кнопке и прокручивается сама: при
     flex: 0 1 auto она держалась за содержимое, и «Смета» с суммой уходила третьей строкой шапки - 42 px у чертежа */
  .tabs { order: 6; flex: 1 1 56px; min-width: 56px; }
  .tabs .tab.add { display: none; } /* «+» внутри полосы не нужен: он уезжал за край вместе с названиями, вместо него закрепленный #btnAddRoomTop */
  .tb-add { display: block; order: 7; flex: none; }
  #tabEst { order: 8; margin-left: auto; } /* «Смета» - у правого края строки */
  .top .tab, .tb-add { padding-top: 5px; padding-bottom: 5px; } /* высота кнопок строки - как у значка раздела: палец попадает по названию помещения */
  /* шапка плотнее: поля и зазоры меньше, полоса переноса строк тоньше, сумма на «Смете» мельче - строка с помещениями
     умещается целиком, а сэкономленную высоту забирает чертеж (02.11.2026) */
  .top { padding: 3px 8px; gap: 5px; }
  .tb-br { height: 3px; }
  .tab.est-tab { padding-left: 9px; padding-right: 9px; }
  .tab.est-tab small { margin-left: 3px; font-size: 11px; }
  /* Строка помещений и сводка - мельче, высота уходит чертежу (04.11.2026, автор задачи Юрий @utaliiev: «немного уменьши
     размер шрифтов, кнопки и иконки в выделенной области, а освободившуюся площадь используй для увеличения размера
     чертежа»). Вторая строка шапки: шрифт названия помещения 13 px вместо 14, значок «Клиент и объект» 18 px вместо 20,
     поля кнопок на 1-2 px меньше - строка 30 px вместо 34. Вместе с полями шапки, полосой переноса и сводкой (ниже)
     чертеж получает около 12 px: .canvas-wrap тянется по остатку экрана, и чертеж вписывается в большее поле. */
  .top .tab, .tb-add, .tb-sec { font-size: 13px; }
  .tb-sec { padding: 5px 9px; }
  .tb-sec svg.i { width: 18px; height: 18px; }
  .top .tab .tab-no { min-width: 1.4em; margin: 0 5px 0 -4px; padding: 0 4px; font-size: 11px; }
}
/* узкий телефон (Android 360 px, iPhone SE 320 px): сводка в одну строку только с мелкими подписями и полями - иначе
   «ПОЛОТНО» и «ЕСТЬ ШОВ» обрезались бы многоточием (02.11.2026) */
@media screen and (max-width: 380px), screen and (pointer: coarse) and (max-device-width: 380px), screen and (pointer: coarse) and (max-device-height: 380px) {
  .results .rs-room > .res { gap: 2px; padding: 0 3px 1px; }
  .results .rs-room > .res > .k { font-size: 8px; }
  .results .rs-room > .res > .v { font-size: 11px; }
  .top .tab, .tb-add, .tb-sec { font-size: 12.5px; } /* узкий телефон: строка помещений со «Сметой» и суммой целиком */
  .tab.est-tab small { font-size: 10.5px; }
  /* первая строка шапки - одной строкой и на 360-375 px (08.11.2026): с колокольчиком кнопок справа пять (Объекты, Сервис,
     Меню, уведомления, пользователь), вместе с логотипом, «В базу» и названием им не хватало 5-20 px, и кнопки уходили
     отдельной строкой - шапка 119 px вместо 86, на 33 px меньше чертежа. Поля кнопок и зазоры между ними уже */
  .actions { gap: 2px; }
  .actions .btn { padding-left: 6px; padding-right: 6px; }
  .objnum { padding-left: 7px; padding-right: 7px; }
}
@media screen and (max-width: 340px), screen and (pointer: coarse) and (max-device-width: 340px), screen and (pointer: coarse) and (max-device-height: 340px) {
  .actions .btn { padding-left: 4px; padding-right: 4px; } /* 320 px: шапка одной строкой - кнопки и название еще уже */
  .objnum { padding-left: 5px; padding-right: 5px; }
  .top .project-name { flex-basis: 44px; min-width: 44px; }
  .cash-bar .seg.mini { flex-wrap: wrap; } /* 320 px: периоды кассы и акта сверки - в две строки, «Период» не уходит за край окна */
  /* «Сдвиг стены» на узком телефоне: списки углов и поле отступа еще уже, подпись «на, см» убрана (она есть в подсказке
     поля) - выбор углов, отступ и кнопка остаются одной строкой даже на экране 320 px */
  .room-shift .seam-row .sel { min-width: 38px; padding-left: 4px; padding-right: 13px; font-size: 11px; }
  .room-shift .seam-row .sel.dir { min-width: 44px; }
  .room-shift .seam-row input[type=number] { width: 38px; padding: 4px 4px; font-size: 11px; }
  .room-shift .seam-row .btn.small { padding: 4px 7px; font-size: 11px; }
  .room-shift .cmd-sec-b > .seam-row > .lbl:first-child { font-size: 0; } /* самый узкий экран: подписи «от» и «до» убраны (они в подсказках списков), строка остается целой */
  .room-shift .cmd-sec-b > .seam-row > .lbl:nth-child(2) { font-size: 0; }
  .room-shift .cmd-sec-b > .seam-row > .lbl .sel { font-size: 11.5px; }
  .results .rs-room > .res.cv > .k { display: none; } /* самый узкий экран: у полотна остается только «без шва» или «ЕСТЬ ШОВ» - подпись там и не нужна, зато строка целая */
}
/* лист «⋯» на экране 521-640 px - над панелью (общий .menu-list открывается вниз, с нижней панели ушел бы за экран). До 520 px
   правило не действует: там лист снизу на всю ширину по общему правилу style.css (.menu-list position: fixed; bottom: 0), а
   bottom: calc(100% + 8px) при fixed увел бы лист за верх экрана */
@media screen and (min-width: 521px) and (max-width: 640px) {
  .mbar .menu-list { top: auto; bottom: calc(100% + 8px); right: 0; left: auto; }
}
/* Меню шапки («Объекты», «Сервис», «Меню», уведомления, пользователь) и лист «⋯» - над нижней панелью (01.11.2026, владелец:
   «предыдущий вариант всплывающих окон верхнего меню стал нечитаемым, подними всплывающие окна относительно нового нижнего
   меню»). До 520 px меню - лист снизу (style.css): он прижимался к низу экрана, и нижние пункты закрывали кнопки панели -
   панель и лист лежат в одном слое (z-index 30), но панель в разметке ниже и рисуется поверх. Теперь лист кончается над
   панелью, а его высота уменьшена на ту же величину. На 521-640 px меню раскрывается вниз от кнопки шапки - ограничена высота,
   чтобы последний пункт оставался над панелью. Где панели нет (смета, 3D, заказ без потолков), --mbar-h равна нулю и меню,
   как раньше, доходит до низа экрана. */
@media screen and (max-width: 640px), screen and (pointer: coarse) and (max-device-width: 540px), screen and (pointer: coarse) and (max-device-height: 540px) {
  .menu-list { max-height: calc(var(--vh100) - 70px - var(--mbar-h)); }
}
@media screen and (max-width: 520px), screen and (pointer: coarse) and (max-device-width: 520px), screen and (pointer: coarse) and (max-device-height: 520px) {
  .menu-list, .actions .menu .menu-list { bottom: var(--mbar-h); max-height: calc(var(--vh100) - 48px - var(--mbar-h)); }
}
/* Плашка «Построитель обновлен» (update-ui.js) и всплывающие сообщения - тоже над нижней панелью (08.11.2026, задача «доведи
   мобильные версии до компьютерной»): плашка стояла у низа экрана и закрывала все пять кнопок панели, пока ее не обновят или
   не скроют, сообщения ложились на «Размеры». Где панели нет, --mbar-h равна нулю - место прежнее. Здесь же «Кастомизация»
   на телефоне: статусы одной колонкой при любом положении телефона, пояснение «сам: ...» переносится, а не обрезается. */
@media screen and (max-width: 640px), screen and (pointer: coarse) and (max-device-width: 540px), screen and (pointer: coarse) and (max-device-height: 540px) {
  .upd { bottom: calc(max(var(--mbar-h), env(safe-area-inset-bottom)) + 8px); }
  html.menu-open .upd:not(.upd-in) { display: none; } /* открыт лист меню или «⋯» - плашка не ложится на его нижние пункты, вернется после закрытия */
  .toast { bottom: calc(var(--mbar-h) + 18px); }
  .cu-st-list { grid-template-columns: minmax(0, 1fr); }
  .cu-st-how { white-space: normal; overflow: visible; }
  /* «Профиль по периметру» - подписью над списком, как «Крепление полотна» под ним: в строку подпись шла в три строки, а
     название профиля в списке обрезалось */
  .set-page[data-set="custom"] .fields label.span2:has(> .prof-pick) { flex-direction: column; align-items: stretch; gap: 4px; }
  .set-page[data-set="custom"] .fields label.span2 > .prof-pick .sel { width: 100%; }
}
/* системная настройка «меньше движения» - подсветка переключается сразу (переход к разделу в app.js scrollSoft тоже мгновенный) */
@media (prefers-reduced-motion: reduce) {
  .mbar .mb, .tb-sec { transition: none; }
  .app.sec-on > .panel > .card.cur, .app:not(.sec-on):not(.est-on) > .stage { animation: none; }
}