/* Облик «Площадка» (17.09.2026, выбор владельца из трёх демо): графит
   и сигнальный оранжевый — цвета каски и разметки, крупные заголовки
   своим шрифтом, линии как на чертеже. Имена переменных прежние: компоненты
   ниже берут цвета только отсюда, поэтому облик меняется в одном месте. */
:root {
  color-scheme: light;

  /* Светлая — основная: инженеру и бухгалтерии она привычнее, снимки в
     отчёт и печать выходят в ней же. Тёмная — тем же набором переменных
     ниже, по переключателю; «поехать» в одной из них не может.
     Полотно — светлый бетон, панели белые: таблица лежит на листе. */
  --bg: #ECEEF0;
  --bg-sunken: #E2E5E8;
  --panel: #FFFFFF;
  --panel-2: #F3F4F6;
  --fg: #15171A;
  --fg-soft: #383E45;
  --muted: #5C636B;
  --line: #DADDE1;
  --line-strong: #BFC4CA;
  --grid: rgba(21, 23, 26, .035);

  /* Графит — опора: верхняя полоса компании и шапка телефона. Оранжевый —
     действие: главная кнопка, ссылка, текущий раздел; ровно один акцент,
     чтобы на экране была одна главная кнопка, а не пять. Жёлтый —
     внимание: система остановилась и ждёт человека. Красный — потеря.
     Зелёный — сделано, подписано, сдано. Синий — в работе и «ждём других».
     Больше цветов нет. */
  --nav: #1A1D21;
  --nav-2: #121417;
  --nav-fg: #F1F2F3;
  --nav-muted: #9AA1A9;
  --nav-line: #2E3238;
  --accent: #D04A08;
  --accent-hover: #B03E06;
  --accent-fg: #FFFFFF;
  --accent-soft: rgba(224, 82, 11, .11);
  --accent-2: #FF7A33;

  --danger: #C1121F;
  --danger-soft: rgba(193, 18, 31, .09);
  --warn: #7A5600;
  --warn-soft: rgba(245, 183, 0, .17);
  --ok: #23764A;
  --ok-soft: rgba(35, 118, 74, .11);
  --info: #2F5E80;
  --info-soft: rgba(47, 94, 128, .11);
  --точка: #E8A400;

  /* Три шрифта, у каждого своя роль. Onest — текст и числа в таблицах
     (у него табличные цифры). Unbounded — заголовки и крупные числа: по нему
     экран узнают издалека. JetBrains Mono — шифры: номера позиций, коды
     объектов. Все три российские, свободная лицензия (OFL, файлы в fonts/). */
  --sans: "Onest", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --display: "Unbounded", "Onest", -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Лестница скруглений — пять ступеней и пилюля. С облика «Меню и лента»
     (23.09) углы мягче: владелец выбрал макет, где карточки и меню скруглены
     сильнее, чем в чертёжной «Площадке». До лестницы в стилях жило
     двенадцать разных радиусов — разница в пиксель читается как небрежность,
     а не как решение. */
  --radius-xs: 4px;   /* полоски, мелкие метки внутри строки */
  --radius-sm: 8px;   /* кнопки, поля, пункты меню */
  --radius: 10px;     /* карточки, панели, таблицы */
  --radius-lg: 14px;  /* крупные блоки, всплывающие окна */
  --radius-xl: 20px;  /* слои поверх страницы: листы, поиск, шторка на телефоне */

  /* Лестница теней — три ступени по высоте слоя над страницей. Лист
     на полотне тени почти не даёт: его отделяет линия, как на чертеже. */
  --shadow: 0 1px 0 rgba(21, 23, 26, .05);
  --shadow-md: 0 8px 20px -6px rgba(21, 23, 26, .22);
  --shadow-lg: 0 22px 48px -12px rgba(21, 23, 26, .34);

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;

  /* Высоты — одни на весь сайт: кнопка и поле 36 на ПК, 44 на телефоне;
     строка таблицы 44. Всё остальное подгоняется под них. */
  --h-ctl: 40px;
  /* Крупный размер — только для двери: там одно поле на строке и одно
     действие на экране, и 36 px среди воздуха выглядят случайной мелочью.
     На рабочих экранах эта высота не применяется: плотность там дороже. */
  --h-ctl-lg: 44px;
  --h-row: 40px;
  --верх-в: 56px;
}

/* Тёмная тема — выбор человека, а не системы: ночью на объекте белый экран
   слепит. Поэтому переключатель, а не prefers-color-scheme. */
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: #0F1113;
  --bg-sunken: #0A0B0D;
  --panel: #171A1D;
  --panel-2: #1F2327;
  --fg: #ECEEF0;
  --fg-soft: #BCC2C8;
  --muted: #8A929B;
  --line: #262A2F;
  --line-strong: #383E45;
  --grid: rgba(255, 255, 255, .03);

  /* Полоса и панель в тёмной теме темнее полотна и отчёркнуты линией:
     на одном тоне с фоном их край терялся, а текущий пункт был невидим. */
  --nav: #0B0C0E;
  --nav-2: #060708;
  --nav-fg: #ECEEF0;
  --nav-muted: #8A929B;
  --nav-line: #262A2F;
  --accent: #FF7A33;
  --accent-hover: #FF9A5C;
  --accent-fg: #1A0B02;
  --accent-soft: rgba(255, 122, 51, .16);
  --accent-2: #FF7A33;

  --danger: #FF5A5F;
  --danger-soft: rgba(255, 90, 95, .13);
  --warn: #F5C04A;
  --warn-soft: rgba(245, 192, 74, .13);
  --ok: #4CC38A;
  --ok-soft: rgba(76, 195, 138, .13);
  --info: #7FB4DA;
  --info-soft: rgba(127, 180, 218, .14);
  --точка: #F5C04A;

  /* Та же лестница, но в тёмной теме тень работает иначе: света вокруг
     нет, и слой отделяется не мягким пятном, а плотной глубиной. */
  --shadow: 0 1px 0 rgba(0, 0, 0, .5);
  --shadow-md: 0 8px 18px -6px rgba(0, 0, 0, .6);
  --shadow-lg: 0 18px 40px -12px rgba(0, 0, 0, .65);
}

/* Шрифты лежат у нас (папка fonts/, урезаны до латиницы, кириллицы, знака рубля
   и «№», 17–26 КБ на начертание). Наружу за шрифтом не ходим: без VPN
   Google Fonts не открывается. font-display: swap — текст виден сразу
   системным, шрифт подменяется, как долетит. */
@font-face { font-family: "Onest"; font-weight: 400; font-style: normal; font-display: swap; src: url("/fonts/Onest-400.woff2") format("woff2"); }
@font-face { font-family: "Onest"; font-weight: 500; font-style: normal; font-display: swap; src: url("/fonts/Onest-500.woff2") format("woff2"); }
@font-face { font-family: "Onest"; font-weight: 600; font-style: normal; font-display: swap; src: url("/fonts/Onest-600.woff2") format("woff2"); }
@font-face { font-family: "Onest"; font-weight: 700; font-style: normal; font-display: swap; src: url("/fonts/Onest-700.woff2") format("woff2"); }
@font-face { font-family: "Unbounded"; font-weight: 500; font-style: normal; font-display: swap; src: url("/fonts/Unbounded-500.woff2") format("woff2"); }
@font-face { font-family: "Unbounded"; font-weight: 600; font-style: normal; font-display: swap; src: url("/fonts/Unbounded-600.woff2") format("woff2"); }
@font-face { font-family: "Unbounded"; font-weight: 700; font-style: normal; font-display: swap; src: url("/fonts/Unbounded-700.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 400; font-style: normal; font-display: swap; src: url("/fonts/JetBrainsMono-400.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 500; font-style: normal; font-display: swap; src: url("/fonts/JetBrainsMono-500.woff2") format("woff2"); }

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 16px/1.5 var(--sans);
  /* Вбок ездят только таблицы — внутри своей рамки. Сама страница
     не ездит никогда: на телефоне уехавшая страница выглядит поломкой,
     и вернуть её обратно пальцем удаётся не с первого раза.
     clip, а не hidden: hidden ломает прилипшую шапку. */
  overflow-x: clip;
}

/* Миллиметровки на фоне больше нет. Она была единственным украшением
   и единственным, что спорило с числами: под таблицей на сорок строк
   сетка читалась как ещё одна таблица. Полотно ровное, слои различаются
   линией, а не фоном. */
main { position: relative; z-index: 1; }

a { color: var(--accent); text-underline-offset: 2px; }
a:hover { text-decoration: underline; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/* --- Каркас: облик «Меню и лента» ------------------------------------
   Выбор владельца 23.09 из четырёх макетов. Одно меню слева на весь сайт:
   сверху выбор объекта и сегодняшнее, ниже разделы объекта группами-
   гармошками и «Компания», внизу «Ещё» и строка человека. Верхней полосы
   разделов больше нет — над работой только строка поиска и «Рядом».
   На телефоне то же меню выезжает сбоку, внизу четыре кнопки. */
:root { --панель-ш: 272px; }
html.панель-узкая { --панель-ш: 72px; }
.каркас { display: grid; grid-template-columns: var(--панель-ш) minmax(0, 1fr); min-height: 100vh; }

.панель {
  position: sticky; top: 0; align-self: start; height: 100vh; z-index: 30;
  display: flex; flex-direction: column; min-width: 0;
  background: var(--panel); color: var(--fg); border-right: 1px solid var(--line);
}
:root[data-theme="dark"] .панель { border-right: 1px solid var(--line); }

/* Меню — своим цветом, сине-графитовым, как у рабочих систем, к которым
   люди привыкли (владелец 23.09 показал Saby): навигация отделена от
   работы цветом, а не одной линией. Цвета меню переопределены на самой
   панели, поэтому все её пункты, счётчики и гармошки перекрашиваются
   сами. Всплывающие списки (объекты, «Ещё», человек) остаются светлыми
   карточками — им возвращаются цвета страницы, сохранённые на :root. */
:root {
  --меню-фон: #253240; --меню-2: rgba(255, 255, 255, .08); --меню-текст: #EEF2F6; --меню-мягко: #C9D2DC;
  --меню-тихо: #93A1B0; --меню-линия: rgba(255, 255, 255, .10);
  --стр-panel: var(--panel); --стр-panel-2: var(--panel-2); --стр-fg: var(--fg); --стр-fg-soft: var(--fg-soft);
  --стр-muted: var(--muted); --стр-line: var(--line); --стр-line-strong: var(--line-strong); --стр-accent-soft: var(--accent-soft);
  --стр-accent: var(--accent); --стр-bg-sunken: var(--bg-sunken);
}
:root[data-theme="dark"] { --меню-фон: #141A21; --меню-2: rgba(255, 255, 255, .06); --меню-линия: rgba(255, 255, 255, .07); }
.панель {
  --panel: var(--меню-фон); --panel-2: var(--меню-2); --fg: var(--меню-текст); --fg-soft: var(--меню-мягко);
  --muted: var(--меню-тихо); --line: var(--меню-линия); --line-strong: rgba(255, 255, 255, .22);
  --accent: #FF8A4C; --accent-soft: rgba(255, 138, 76, .18); --bg-sunken: rgba(255, 255, 255, .12);
  border-right-color: transparent; color-scheme: dark;
}
/* Текущий пункт — светлой полосой с оранжевой чертой слева, как в
   привычных рабочих системах; инициалы — светлым по полупрозрачному. */
.каркас .панель nav a[aria-current="page"] { background: rgba(255, 255, 255, .12); }
.панель .ава { background: rgba(255, 255, 255, .14); color: var(--меню-текст); }
.панель .всплывашка, html.панель-узкая .панель .п-гр.всплыла .п-гр-тело {
  --panel: var(--стр-panel); --panel-2: var(--стр-panel-2); --fg: var(--стр-fg); --fg-soft: var(--стр-fg-soft);
  --muted: var(--стр-muted); --line: var(--стр-line); --line-strong: var(--стр-line-strong);
  --accent: var(--стр-accent); --accent-soft: var(--стр-accent-soft); --bg-sunken: var(--стр-bg-sunken); color-scheme: normal;
}
.п-верх { position: relative; flex: none; display: flex; align-items: center; height: 60px; padding: 0 60px 0 18px; }
.панель .brand {
  display: flex; align-items: center; gap: 10px; min-height: 40px; color: var(--fg); text-decoration: none;
  font: 600 15px/1 var(--display); letter-spacing: .06em; white-space: nowrap; overflow: hidden;
}
.панель .brand:hover { text-decoration: none; }
.панель .brand svg { flex: none; }
.п-кн {
  display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: var(--radius);
  background: transparent; color: var(--muted); cursor: pointer; font: inherit;
  transition: background-color .15s, color .15s;
}
.п-кн:hover { background: var(--panel-2); color: var(--fg); }
.п-кн-свернуть { position: absolute; right: 12px; top: 10px; }
.п-кн-свернуть svg { transition: transform .3s cubic-bezier(.3, .7, .2, 1); }
.п-кн-закрыть { display: none; position: absolute; right: 10px; top: 8px; width: 44px; height: 44px; }

/* Выбор объекта — плашкой: видно, на какой стройке человек. */
.п-место { position: relative; }
.п-место-объект { flex: none; padding: 0 12px 8px; }
.п-объект-выбор {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; margin: 0;
  border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--panel-2); color: var(--fg);
  text-align: left; font: inherit; cursor: pointer; transition: border-color .15s, transform .15s;
}
.п-объект-выбор:hover { border-color: var(--line-strong); }
.п-объект-выбор:active { transform: scale(.98); }
.п-объект-выбор .о-знак { display: inline-flex; flex: none; color: var(--accent); }
.п-о-т { flex: 1; min-width: 0; display: grid; line-height: 1.3; }
.п-о-т b { font-weight: 600; font-size: 15px; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.п-о-т span { color: var(--muted); font-size: 14px; }
.п-вв { display: inline-flex; flex: none; color: var(--muted); }

.п-прокрутка { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
  padding: 2px 12px 12px; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.панель nav { display: flex; flex-direction: column; gap: 2px; }
.панель nav + nav { margin-top: 6px; }
.панель nav a, .п-гр-шапка, .п-ещё {
  position: relative; display: flex; align-items: center; gap: 12px; width: 100%;
  min-height: 40px; padding: 6px 10px 6px 14px; border: 0; border-radius: var(--radius);
  background: transparent; color: var(--fg-soft); font: 500 16px/1.3 var(--sans);
  text-align: left; text-decoration: none; cursor: pointer;
  transition: background-color .15s, color .15s;
}
.панель nav a:hover, .п-гр-шапка:hover, .п-ещё:hover { background: var(--panel-2); color: var(--fg); text-decoration: none; }
.панель nav a[aria-current="page"] { background: var(--accent-soft); color: var(--fg); font-weight: 600; }
.панель nav a[aria-current="page"]::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 0 var(--radius-xs) var(--radius-xs) 0; background: var(--accent); }
.панель nav a .о-знак, .п-гр-шапка .о-знак, .п-ещё svg { display: inline-flex; flex: none; color: var(--muted); }
.панель nav a[aria-current="page"] .о-знак { color: var(--accent); }
.панель .о-имя { flex: 1 1 auto; min-width: 0; }
.панель nav a .n { flex: none; min-width: 22px; text-align: right; font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.панель nav a .n[hidden] { display: none; }
.панель nav a .п-чат-счёт { min-width: 22px; padding: 0 7px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); text-align: center; font-weight: 600; }
/* Жёлтая точка — в разделе что-то ждёт человека. Число — «сколько»,
   точка — «требует внимания». */
.панель nav a.warn .о-имя::after, .п-точка { content: ""; display: inline-block; width: 8px; height: 8px; margin-left: 8px; border-radius: 50%; background: var(--точка); vertical-align: 2px; }
.п-точка { flex: none; margin: 0; }

/* Гармошка: раскрыта группа, где человек сейчас; остальные — одной строкой. */
.п-гр-шапка { font-weight: 600; color: var(--fg); }
.п-шеврон { display: inline-flex; flex: none; margin-left: auto; color: var(--muted); transition: transform .3s cubic-bezier(.3, .7, .2, 1); }
.п-гр.открыта .п-шеврон { transform: rotate(90deg); }
.п-гр-тело { display: grid; grid-template-rows: 0fr; visibility: hidden;
  transition: grid-template-rows .3s cubic-bezier(.3, .7, .2, 1), visibility 0s linear .3s; }
.п-гр.открыта .п-гр-тело { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows .3s cubic-bezier(.3, .7, .2, 1), visibility 0s; }
.п-гр-в { min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 2px; padding-top: 2px; }
.п-гр-в a { padding-left: 46px; min-height: 38px; }
.панель .п-гр-в a .о-знак { display: none; }
.п-группа { display: none; margin: 0; padding: 6px 12px 4px; font: 600 14px/1.3 var(--sans); color: var(--muted); }

.п-подвал { flex: none; display: flex; flex-direction: column; gap: 2px; padding: 8px 12px 12px; border-top: 1px solid var(--line); }
.п-ещё .п-счёт, .п-счёт { margin-left: auto; min-width: 22px; height: 22px; padding: 0 7px; display: inline-grid; place-items: center;
  border-radius: 999px; background: var(--accent); color: var(--accent-fg); font-size: 13px; font-weight: 600; }
.п-я { display: flex; align-items: center; gap: 12px; width: 100%; padding: 6px; border: 0; border-radius: var(--radius);
  background: transparent; color: var(--fg); text-align: left; font: inherit; cursor: pointer; }
.п-я:hover { background: var(--panel-2); }
.ава { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%;
  background: var(--info-soft); color: var(--info); font: 600 14px/1 var(--sans); letter-spacing: .02em; }
.п-я-т { flex: 1; min-width: 0; display: grid; line-height: 1.3; }
.п-я-т b { font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.п-я-т span { color: var(--muted); font-size: 14px; }

/* Всплывающие списки меню: объекты, «Ещё», человек. */
.всплывашка {
  position: absolute; left: 12px; right: 12px; top: calc(100% - 2px); z-index: 60; min-width: 240px;
  display: flex; flex-direction: column; gap: 1px; max-height: min(70vh, 560px); overflow-y: auto; padding: 6px;
  background: var(--panel); color: var(--fg); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  animation: всплыть .22s cubic-bezier(.2, .9, .25, 1) both;
}
.всплывашка[hidden] { display: none; }
.всплывашка.вверх { top: auto; bottom: calc(100% + 6px); left: 0; right: 0; }
@keyframes всплыть { from { opacity: 0; transform: translateY(4px) scale(.98); } }
.всплывашка a, .всплывашка button {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 6px 10px;
  border: 0; border-radius: var(--radius-sm); background: none; color: var(--fg);
  font: 500 15px/1.3 var(--sans); text-align: left; text-decoration: none; cursor: pointer;
}
.всплывашка a:hover, .всплывашка button:hover { background: var(--panel-2); color: var(--fg); text-decoration: none; }
.всплывашка a[aria-current] { background: var(--accent-soft); font-weight: 600; }
.всплывашка svg { flex: none; color: var(--muted); }
.всплывашка .о-имя { flex: 1; min-width: 0; }
.всплывашка .n { flex: none; color: var(--muted); font-size: 14px; }
/* Строки списка не сжимаются: список — колонка с ограниченной высотой, и
   без этого при десятке объектов браузер ужимал каждую строку до 40 px, а
   длинные названия наезжали друг на друга (снимок владельца 23.09). */
.всплывашка > * { flex-shrink: 0; }
/* Объекты — шире меню: названия у строек длинные. Название — не больше
   двух строк, полное — в подсказке; код — тихой строкой под ним. */
#в-объекты { right: auto; width: 380px; max-width: calc(100vw - 24px); }
#в-объекты a { flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 10px; }
#в-объекты a .о-имя { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; width: 100%; line-height: 1.3; }
#в-объекты a .n { font-size: 14px; }
#в-объекты a.всп-все { flex-direction: row; }
.всп-заг { margin: 6px 10px 2px; font: 600 14px/1.3 var(--sans); color: var(--muted); }
.всплывашка .всп-все { border-top: 1px solid var(--line); border-radius: 0 0 var(--radius-sm) var(--radius-sm); margin-top: 4px; color: var(--accent); }
.всплывашка a.кто-имя { flex-direction: column; align-items: flex-start; gap: 2px; min-height: 48px; margin-bottom: 4px;
  border-bottom: 1px solid var(--line); border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.всплывашка a.кто-имя span { font-size: 14px; font-weight: 400; color: var(--muted); }
.верх-счёт { margin-left: auto; min-width: 22px; height: 22px; padding: 0 7px; display: inline-grid; place-items: center;
  border-radius: 999px; background: var(--accent); color: var(--accent-fg); font: 600 13px/1 var(--sans); }

/* Строка над работой: поиск и «Рядом» — соседние разделы по логике работы. */
.полотно { min-width: 0; display: flex; flex-direction: column; }
.верх-строка {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 16px; min-height: 60px;
  padding: 10px var(--s5); background: var(--panel); border-bottom: 1px solid var(--line);
}
.поиск-кн {
  flex: 0 1 440px; min-width: 0; display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 6px 0 12px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel-2); color: var(--muted);
  font: 400 15px/1 var(--sans); text-align: left; cursor: pointer; transition: border-color .15s, color .15s;
}
.поиск-кн:hover { border-color: var(--line-strong); color: var(--fg-soft); }
.поиск-кн > span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.поиск-кн kbd, .пал-низ kbd { flex: none; padding: 4px 7px; border: 1px solid var(--line); border-radius: var(--radius-xs); background: var(--panel);
  color: var(--muted); font: 500 13px/1 var(--sans); }
.рядом { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.рядом::-webkit-scrollbar { display: none; }
/* «Рядом» — тоном меню: это навигация, а не содержимое страницы. */
.рядом-заг { flex: none; color: var(--fg-soft); font-size: 14px; font-weight: 600; margin-right: 2px; }
.рядом a {
  flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 13px;
  border: 1px solid transparent; border-radius: 999px; background: rgba(37, 50, 64, .08); color: #253240;
  font-size: 15px; font-weight: 500; text-decoration: none; white-space: nowrap; transition: background-color .15s, color .15s;
}
.рядом a:hover { background: #253240; color: #FFFFFF; text-decoration: none; }
:root[data-theme="dark"] .рядом a { background: rgba(147, 161, 176, .14); color: #D6DEE6; }
:root[data-theme="dark"] .рядом a:hover { background: #3A4A5C; color: #FFFFFF; }
.рядом a.warn::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--точка); }
/* Справа в строке над работой — Чат, Платформа (главному) и «?» (12.10):
   значки с числом в углу, слева в меню — только работа. */
.верх-право { flex: none; margin-left: auto; display: flex; align-items: center; gap: 8px; }
.верх-иконка, .справка-кн { position: relative; }
.верх-иконка { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 50%;
  background: var(--panel-2); color: var(--fg-soft); }
.верх-иконка:hover, .верх-иконка[aria-current="page"] { border-color: var(--line-strong); color: var(--fg); text-decoration: none; }
.верх-право .верх-счёт { position: absolute; top: -4px; right: -6px; margin: 0; min-width: 20px; height: 20px; padding: 0 5px; font-size: 12px; }
.верх-право .верх-счёт[hidden] { display: none; }
.шт-справка { position: relative; }
.шт-справка .верх-счёт { position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 4px; font-size: 11px; }
.справка-низ { display: flex; flex-direction: column; gap: var(--s2); }
.справка-поддержка { display: flex; flex-direction: column; gap: 4px; }
.справка-поддержка a { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 var(--s2); border-radius: var(--radius-sm);
  color: var(--fg); }
.справка-поддержка a:hover { background: var(--panel-2); text-decoration: none; }
.справка-поддержка a svg { flex: none; color: var(--muted); }
.справка-поддержка .верх-счёт { margin-left: auto; }
/* Справка «?»: значок в шапке и шторка справа с текстом раздела из карты Ксении. */
.справка-кн { flex: none; display: grid; place-items: center; width: 40px; height: 40px; padding: 0;
  border: 1px solid var(--line); border-radius: 50%; background: var(--panel-2); color: var(--fg-soft); cursor: pointer; }
.справка-кн:hover, .справка-кн[aria-expanded="true"] { border-color: var(--line-strong); color: var(--fg); }
.сп-знак { font: 700 17px/1 var(--sans); }
.справка { position: fixed; z-index: 9999; top: 0; right: 0; bottom: 0; width: min(420px, 100vw); display: flex; flex-direction: column;
  background: var(--panel); border-left: 1px solid var(--line); box-shadow: -12px 0 32px rgba(0, 0, 0, .28); }
.справка[hidden] { display: none; }
.справка-шапка { display: flex; align-items: center; gap: var(--s2); padding: var(--s2) var(--s3); border-bottom: 1px solid var(--line); }
.справка-шапка b { margin-right: auto; min-width: 0; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.справка-тело { flex: 1; min-height: 0; overflow-y: auto; padding: var(--s3); font-size: 15px; line-height: 1.5; }
.справка-тело p { margin: 0 0 var(--s2); }
.справка-тело .сп-зачем { font-size: 16px; font-weight: 600; }
.справка-тело ul { margin: 0 0 var(--s2); padding-left: 20px; }
.справка-тело li { margin-bottom: 6px; }
.справка-тело .сп-термины { color: var(--muted); font-size: 14px; }
.справка-низ { padding: var(--s2) var(--s3) calc(var(--s2) + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }


/* Поиск Ctrl K. */
.палитра-фон { position: fixed; inset: 0; z-index: 10000; background: rgba(10, 11, 13, .45); opacity: 0; transition: opacity .2s; }
.палитра-фон.вкл { opacity: 1; }
.палитра {
  position: fixed; z-index: 10001; left: 50%; top: 11vh; width: min(640px, calc(100vw - 32px)); max-height: min(600px, 78vh);
  display: flex; flex-direction: column; background: var(--panel); color: var(--fg);
  border: 1px solid var(--line); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); overflow: hidden;
  opacity: 0; transform: translate(-50%, -10px) scale(.98); transition: transform .3s cubic-bezier(.2, .9, .25, 1), opacity .18s;
}
.палитра.вкл { opacity: 1; transform: translate(-50%, 0); }
.палитра[hidden], .палитра-фон[hidden] { display: none; }
.пал-голова { display: flex; align-items: center; gap: 10px; min-height: 64px; padding: 8px 10px 8px 18px; border-bottom: 1px solid var(--line); }
.пал-голова > svg { flex: none; color: var(--muted); }
#пал-запрос { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; color: var(--fg); font: 400 20px/1.3 var(--sans); padding: 8px 0; box-shadow: none; }
#пал-запрос::placeholder { color: var(--muted); }
.пал-закрыть { min-height: 36px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel-2); color: var(--muted); font: 500 14px/1 var(--sans); cursor: pointer; }
.пал-список { flex: 1; overflow: auto; overscroll-behavior: contain; padding: 6px; }
.пал-гр { padding: 10px 12px 4px; color: var(--muted); font: 600 14px/1.3 var(--sans); }
.пал-пункт { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 6px 12px; border-radius: var(--radius); cursor: pointer; line-height: 1.3; }
.пал-пункт[aria-selected="true"] { background: var(--accent-soft); }
.пал-т { flex: 1; min-width: 0; font-size: 16px; }
.пал-т mark { background: none; color: var(--fg); font-weight: 600; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.пал-п { flex: none; max-width: 45%; color: var(--muted); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.пал-пункт svg { flex: none; color: var(--muted); opacity: 0; }
.пал-пункт[aria-selected="true"] svg { opacity: 1; color: var(--accent); }
.пал-пусто { padding: 28px 12px; color: var(--muted); text-align: center; }
.пал-низ { display: flex; flex-wrap: wrap; gap: 16px; padding: 10px 18px; border-top: 1px solid var(--line); background: var(--panel-2); color: var(--muted); font-size: 14px; }

/* Круглой оранжевой кнопки чата больше нет: чат — пункт меню и кнопка
   внизу телефона. Кнопка остаётся в разметке — через неё меню открывает
   окно чата. Свои стили чат объявляет ниже по документу, отсюда !important. */
#ч-кнопка { display: none !important; }

/* Шапка телефона: на столе её нет. */
header.шапка-тел { display: none; }
.панель-фон { display: none; }

/* Узкая полоса значков — для ноутбука, где таблице нужна ширина. Разделы
   не прячутся: группа раскрывается рядом подписью, значки на месте. */
@media (min-width: 1024px) {
  html.панель-узкая .п-верх { padding: 0; justify-content: center; }
  html.панель-узкая .панель .brand span, html.панель-узкая .панель .о-имя, html.панель-узкая .п-о-т,
  html.панель-узкая .п-вв, html.панель-узкая .п-я-т, html.панель-узкая .панель nav a .n,
  html.панель-узкая .п-шеврон, html.панель-узкая .п-ещё .п-счёт { display: none; }
  html.панель-узкая .п-кн-свернуть { position: static; }
  html.панель-узкая .п-кн-свернуть svg { transform: rotate(180deg); }
  html.панель-узкая .панель .brand { display: none; }
  html.панель-узкая .п-место-объект { padding: 0 12px 8px; }
  html.панель-узкая .п-объект-выбор { justify-content: center; padding: 9px 0; }
  html.панель-узкая .п-прокрутка { overflow: visible; }
  html.панель-узкая .панель nav a, html.панель-узкая .п-гр-шапка, html.панель-узкая .п-ещё { justify-content: center; padding: 0; gap: 0; min-height: 44px; }
  html.панель-узкая .п-гр-тело { display: none; }
  html.панель-узкая .п-точка { position: absolute; top: 8px; right: 12px; }
  html.панель-узкая .верх-счёт { position: absolute; top: 2px; right: 6px; }
  html.панель-узкая .п-гр { position: relative; }
  html.панель-узкая .п-гр.всплыла .п-гр-тело {
    display: block; visibility: visible; position: absolute; left: calc(100% + 10px); top: 0; width: 260px; z-index: 60;
    background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 6px;
  }
  html.панель-узкая .п-гр.всплыла .п-группа { display: block; }
  html.панель-узкая .п-гр.всплыла .п-гр-в a { padding-left: 12px; justify-content: flex-start; gap: 10px; }
  html.панель-узкая .панель .п-гр.всплыла .п-гр-в a .о-знак { display: inline-flex; }
  html.панель-узкая .п-гр.всплыла .п-гр-в .о-имя, html.панель-узкая .п-гр.всплыла .п-гр-в a .n { display: initial; }
  html.панель-узкая .п-я { justify-content: center; }
  html.панель-узкая .всплывашка, html.панель-узкая .всплывашка.вверх { left: calc(100% + 10px); right: auto; width: 280px; }
  html.панель-узкая .всплывашка { top: 0; }
  html.панель-узкая .всплывашка.вверх { top: auto; bottom: 0; }
}

@media (max-width: 1023px) {
  .каркас { display: block; }
  .панель {
    /* align-self сбрасываем: у фиксированной панели «start» сжимает её
       по содержимому, и низ меню («Ещё», человек) уезжал за экран. */
    position: fixed; left: 0; top: 0; bottom: 0; height: auto; align-self: auto; width: min(320px, 86vw); z-index: 9995;
    transform: translateX(-104%); visibility: hidden; border-right: 0;
    transition: transform .38s cubic-bezier(.2, .9, .25, 1), visibility 0s linear .38s;
    padding-top: env(safe-area-inset-top);
  }
  html.меню-открыто .панель { transform: none; visibility: visible; box-shadow: var(--shadow-lg);
    transition: transform .38s cubic-bezier(.2, .9, .25, 1), visibility 0s; }
  .п-кн-свернуть { display: none; }
  .п-кн-закрыть { display: grid; }
  .панель nav a, .п-гр-шапка, .п-ещё { min-height: 44px; }
  .п-гр-в a { min-height: 44px; }
  .панель-фон { display: block; position: fixed; inset: 0; z-index: 9994; background: rgba(10, 11, 13, .5); opacity: 0; pointer-events: none; transition: opacity .25s; }
  html.меню-открыто .панель-фон { opacity: 1; pointer-events: auto; }
  html.меню-открыто { overflow: hidden; }

  header.шапка-тел {
    position: sticky; top: 0; z-index: 9990; display: flex; align-items: center; gap: 4px;
    min-height: 56px; padding: env(safe-area-inset-top) 6px 0;
    background: var(--меню-фон); color: var(--nav-fg);
  }
  .шт-кн { flex: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--radius);
    background: transparent; color: var(--nav-fg); cursor: pointer; text-decoration: none; }
  .шт-кн:active { background: rgba(255, 255, 255, .08); }
  .шт-я .ава { background: rgba(255, 255, 255, .14); color: var(--nav-fg); width: 34px; height: 34px; }
  header.шапка-тел .шт-объект { flex: 1; min-width: 0; padding-left: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: 16px; font-weight: 600; color: var(--nav-fg); }
  /* На телефоне строка — только «Рядом», лентой под шапкой: поиск внизу. */
  .верх-строка { position: static; min-height: 0; padding: 10px var(--s3); gap: 0; }
  .верх-строка .поиск-кн { display: none; }
  .справка-кн, .верх-право { display: none; }
  .верх-строка:not(:has(.рядом)) { display: none; }
  .рядом-заг { display: none; }
  .рядом a { min-height: 40px; }
  /* Лента едет вбок — края растворяются, а не обрываются: видно, что
     дальше есть ещё. */
  .рядом {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 10px, #000 calc(100% - 28px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 10px, #000 calc(100% - 28px), transparent 100%);
    padding: 0 10px;
  }
  .палитра { left: 0; top: 0; width: 100%; height: 100%; max-height: none; border-radius: 0; border: 0;
    padding-top: env(safe-area-inset-top); transform: translateY(24px); }
  .палитра.вкл { transform: none; }
  .пал-низ { display: none; }
  .пал-закрыть { min-height: 44px; }
  .пал-пункт { flex-wrap: wrap; row-gap: 0; min-height: 48px; }
  .пал-п { flex-basis: 100%; max-width: none; white-space: normal; }
  .пал-пункт svg { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .панель, .панель-фон, .п-гр-тело, .п-шеврон, .палитра, .палитра-фон, .всплывашка { transition: none; animation: none; }
}

/* --- Полотно ----------------------------------------------------------- */

main {
  max-width: 1600px;
  margin: 0;
  padding: var(--s4) var(--s5) var(--s6);
}
/* Полоса справа — под Ксению и кнопку чата. Они висят у края поверх всего,
   и таблица, дотянутая до самого края, уезжала под них: последняя графа и
   кнопки в строках оказывались закрыты. Урезать виджеты незачем — им нужно
   место, и место мы даём. На телефоне их там нет: Ксения язычком, чат —
   нижней вкладкой. */
/* Кнопка чата с облика «Меню и лента» (23.09) живёт в меню, у края висит
   одна Ксения: ей хватает 76 пикселей. */
@media (min-width: 821px) { main { padding-right: 76px; } }
@media (max-width: 720px) { main { padding: var(--s4) var(--s3) var(--s5); } }

/* --- Оболочка объекта -------------------------------------------------
   С облика «Меню и лента» (23.09) разделы объекта живут только в боковом
   меню, группами; на телефоне оно выезжает сбоку, а соседние разделы —
   лентой «Рядом» под шапкой. Прежней полосы из двадцати вкладок нет. */

/* Заголовок страницы — крупно, как в выбранном макете (23.09): по нему
   экран узнают издалека. На телефоне чуть меньше: длинное имя объекта
   иначе встаёт в четыре строки. */
h1 {
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: -.02em;
  margin: 0 0 var(--s1);
  font-family: var(--display);
  font-weight: 600;
}
h1 + .sub { margin-top: 0; }
@media (max-width: 720px) { h1 { font-size: 24px; } }

p.sub {
  color: var(--muted);
  font-size: 16px;
  margin: 0 0 var(--s4);
  max-width: 900px;
}

.hint {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.45;
  margin: var(--s2) 0 0;
  max-width: 720px;
}

/* --- Плитки со счётчиками ---------------------------------------------- */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: var(--s3);
  margin: 0 0 var(--s5);
}
/* Дашборд аудита: две колонки на широком экране, findings-список. */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); align-items: start; }
@media (max-width: 720px) { .two-col { grid-template-columns: 1fr; } }
.findings { margin: 0; padding-left: 1.2em; }
.findings li { margin: 0 0 var(--s3); line-height: 1.45; }
.card span:last-child { display: block; font-size: 14px; color: var(--muted); }
/* Денежный ряд (баланс объекта): суммы в рублях длинные, и в моно-26px они
   не влезали в узкую плитку и наползали на соседей. Здесь колонки шире, а
   число ужимается по ширине экрана и не выходит за край плитки. */
.money-cards { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.money-cards .card b {
  font-size: clamp(15px, 1.4vw, 22px);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  display: block; max-width: 100%;
}
@media (max-width: 720px) { .money-cards .card b { font-size: 16px; } }
.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s3) var(--s4);
  /* Подпись сверху, число снизу: иначе плитка с длинной подписью
     («не закрыто актами») роняет число ниже соседей, и ряд рябит. */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 82px;
}
/* Плитка-ссылка: цифра, по которой можно провалиться. Подчёркивания
   не нужно — иначе ряд плиток начинает выглядеть как список ссылок. */
a.card { text-decoration: none; color: inherit; }
a.card:hover { border-color: var(--accent); text-decoration: none; }

.card span {
  display: block;
  color: var(--muted);
  font-size: 14px;
  margin-bottom: 2px;
}
.card b {
  /* Число не выезжает за плитку: «10 192 477,14» в моно-26px шире любой
     разумной плитки, и в шторке и на телефоне оно обрезалось на полуслове.
     Размер плывёт от ширины окна, а слишком длинное переносится по пробелу
     между разрядами, а не режется. */
  display: block; min-width: 0;
  font-size: clamp(17px, 1.6vw, 24px);
  line-height: 1.2;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  overflow-wrap: anywhere;
}
.card { min-width: 0; }
@media (max-width: 820px) { .card b { font-size: 20px; } }
html[data-шторка] .card b { font-size: 20px; }

/* --- Таблицы ----------------------------------------------------------- */

.wrap {
  background-color: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: auto;
  max-height: 70vh;
  overscroll-behavior-x: contain;

  /* Тень у края — только когда есть куда прокручивать, и гаснет, доехав до
     края. Ни одной строки JS: две «шторки» цвета панели прибиты к содержимому
     (background-attachment: local) и наезжают на тени, прибитые к рамке.
     Без этого признака широкая таблица выглядит обрезанной, а не длинной. */
  background-image:
    linear-gradient(to right, var(--panel) 40%, rgba(0, 0, 0, 0)),
    linear-gradient(to left, var(--panel) 40%, rgba(0, 0, 0, 0)),
    radial-gradient(farthest-side at 0 50%, rgba(15, 32, 51, .16), rgba(0, 0, 0, 0)),
    radial-gradient(farthest-side at 100% 50%, rgba(15, 32, 51, .16), rgba(0, 0, 0, 0));
  background-repeat: no-repeat;
  background-size: 44px 100%, 44px 100%, 16px 100%, 16px 100%;
  background-position: left center, right center, left center, right center;
  background-attachment: local, local, scroll, scroll;
}

/* Первая графа стоит на месте. Прокручивая широкую таблицу вбок, человек
   не должен терять из виду, о какой строке речь: номер позиции и есть имя
   строки. Фон непрозрачный — иначе под ней проступает то, что уехало. */
.wrap > table th:first-child,
.wrap > table td:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--panel);
  box-shadow: inset -1px 0 0 var(--line);
}
.wrap > table thead th:first-child { z-index: 3; }
.wrap > table tbody tr:hover td:first-child { background: var(--panel-2); }
table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 15px; }

th, td {
  padding: 8px 9px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
  vertical-align: middle;
  line-height: 1.35;
}
/* Строка таблицы — 40 пикселей при одной строке текста: плотность
   рабочего инструмента, а не витрины. Двухстрочное наименование растёт само. */
tbody td { height: var(--h-row); box-sizing: border-box; }
th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--panel);
  border-bottom: 1px solid var(--line-strong);
  font-weight: 500;
  font-size: 14px;
  color: var(--muted);
  white-space: nowrap;
}
tbody tr:hover td { background: var(--panel-2); }
tbody tr:last-child td { border-bottom: 0; }

td.name, th.name { white-space: normal; min-width: 320px; line-height: 1.45; }
/* Шапка числовой графы — в две строки, если длинная: «Сметная стоимость, руб.»
   держала графу шире любых её чисел, и таблица уезжала вбок (облик 23.09,
   текст крупнее). Сама цифра не переносится никогда. */
thead th.num { white-space: normal; min-width: 72px; line-height: 1.25; vertical-align: bottom; }
/* «Откуда» — пояснение словами, а не число: переносится, как наименование. */
td.откуда { white-space: normal; min-width: 200px; line-height: 1.45; }
/* Та же переносимая колонка, но узкая: в таблице расхождений справа стоят
   две кнопки, и широкое наименование выдавливало их за край. */
td.name-narrow, th.name-narrow { white-space: normal; min-width: 200px; line-height: 1.45; }
/* Короткая графа имени (поставщик, человек) — переносом по словам, без
   нижней границы ширины: в одну строку она распирала узкую таблицу. Слово
   длиннее графы тоже переносится, по буквам. */
td.переносом { white-space: normal; line-height: 1.35; overflow-wrap: anywhere; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td.act, th.act { white-space: nowrap; text-align: right; }
/* Слова вместо кнопки в графе действий («вернёт руководитель объекта или
   админ» в «Убранных записях») переносятся: без переноса графа раздвигала
   таблицу за рамку (восьмой круг 25.09). */
td.act .ож-вернёт, td.act-wrap .ож-вернёт { display: inline-block; max-width: 14em; white-space: normal; text-align: right; }
td .src { display: block; color: var(--muted); font-size: 14px; margin-top: 1px; }
/* Минус денег в ячейке — цветом, без плашки: плашка раздвигала графу
   платёжного календаря за край телефона (28.10). */
td .минус { color: var(--danger); font-weight: 600; }
/* Подпись «заказано» под количеством в заявке. Ей разрешено переноситься:
   ячейки в таблице не переносятся вовсе, и «заказано целиком» в одну строку
   растягивало графу так, что таблица уезжала за правый край (19.09). */
td .зак-подпись { white-space: normal; max-width: 84px; margin: 0; }
/* Кнопка выбора поставщика в листе сравнения: она главная на странице, и
   спутать её с подписью нельзя (19.09 владелец её просто не заметил). */
.взять-строку {
  min-height: 26px; height: 26px; padding: 0 10px; margin: 0;
  border: 1px solid var(--accent); border-radius: 999px;
  background: var(--bg); color: var(--accent); font-size: 15px; white-space: nowrap;
}
.взять-строку:hover { background: var(--accent); color: var(--on-accent, #fff); }
td .дельта { color: var(--muted); font-size: 14px; }
td .дельта b { color: var(--warn); font-weight: 600; }
/* «Куда» в закупках: статья и позиция рядом, в одну строку. */
td .куда { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; }
td .куда .cost-pick { margin: 0; flex: 0 0 auto; }
td .куда .cost-pick select { width: 118px; min-width: 118px; max-width: 118px; height: 30px; min-height: 30px; padding: 0 24px 0 8px; font-size: 15px; }
td .куда .куда-поз { font-size: 15px; white-space: nowrap; }
/* Подсказка позиции у строки без привязки: маленькая кнопка рамкой под «разнести». */
td .куда:has(.куда-похоже) { flex-wrap: wrap; row-gap: 4px; }
td .куда .куда-похоже { margin: 0; flex-basis: 100%; }
td .куда .куда-похоже button { min-height: 26px; padding: 2px 10px; font-size: 14px; white-space: nowrap;
  color: var(--accent); background: var(--accent-soft); border: 1px dashed var(--accent); border-radius: 999px; }
td .куда .куда-похоже button:hover { border-style: solid; filter: none; }
/* Колонке «Куда» нужно место под статью и позицию в одну строку;
   иначе таблица ужмёт её первой, и позиция уедет под выпадающий список. */
th.stack, td.stack { min-width: 196px; }
/* Девять граф на 1400 px: наименованию в закупках хватает 150 — оно и так
   переносится, а «Изменить» должно быть видно без прокрутки вбок. */
td.name-narrow.тесно, th.name-narrow.тесно { min-width: 150px; }
/* Наименование шире графы поставщика: имя позиции длиннее имени ИП. */
td.name-narrow.шире, th.name-narrow.шире { min-width: 300px; }

/* Сегменты отбора над таблицей — состояние с числом. Число в сегменте
   заменяет плитку «5 не закрыто актами» на полэкрана выше: то же знание,
   но там, где им пользуются — рядом с таблицей, одним нажатием. */
.сегменты { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); overflow: hidden; background: var(--panel); }
.сегменты a { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 11px; font-size: 15px;
  color: var(--muted); text-decoration: none; border-left: 1px solid var(--line); white-space: nowrap; }
.сегменты a:first-child { border-left: 0; }
.сегменты a .n { font-variant-numeric: tabular-nums; }
.сегменты a:hover { background: var(--panel-2); text-decoration: none; color: var(--fg); }
.сегменты a[aria-current]:not([aria-current="false"]) { background: var(--accent-soft); color: var(--fg); font-weight: 600; }
/* Ставка прямо в строке ФОТ «нет ставки» (05.11). */
.ставка-тут { display: inline-flex; gap: 6px; align-items: center; justify-content: flex-end; margin: 0; }
.ставка-тут input { flex: 0 0 6.5em; width: 6.5em; min-height: 32px; text-align: right; }
.ставка-тут button { min-height: 32px; padding: 0 10px; white-space: nowrap; }
@media (max-width: 760px) { .ставка-тут { flex-wrap: wrap; justify-content: flex-start; } }

/* Строка-заголовок группы во всю ширину (23.09): повторявшаяся в каждой
   строке графа съедала ширину, и числа уезжали за правый край. Не липнет
   слева, как первая ячейка: она и так во всю ширину. */
.wrap > table tbody tr.группа th {
  position: static; box-shadow: none;
  text-align: left; white-space: normal; line-height: 1.4;
  padding: 12px 10px 8px; font-size: 15px; font-weight: 600;
  color: var(--fg-soft); background: var(--panel-2);
  border-bottom: 1px solid var(--line);
}
.wrap > table tbody tr.группа:hover th { background: var(--panel-2); }

/* Цена позиции ДС-черновика полем в строке: по ширине числа, справа. */
td input.цена-дс { width: 8em; min-width: 0; height: 30px; min-height: 30px; padding: 0 6px; text-align: right; font-variant-numeric: tabular-nums; }

/* Ноутбук 1280–1440 (аудит 20.10, § 4.3): за боковым меню рабочей полосе
   остаётся 870–1030 px, и у восьми таблиц правые графы — деньги и
   состояние — уезжали за край. Наименование переносится раньше, поля ячеек
   уже, многословная шапка — в две строки; число по-прежнему в одну. */
@media (min-width: 769px) and (max-width: 1440px) {
  td.name, th.name { min-width: 240px; }
  td.name-narrow, th.name-narrow { min-width: 160px; }
  td.name-narrow.шире, th.name-narrow.шире { min-width: 200px; }
  td form.оплата.в-строке { flex-wrap: wrap; max-width: 230px; }
  td .зак-дата { max-width: 118px; }
  th, td { padding-left: 7px; padding-right: 7px; }
  thead th { white-space: normal; line-height: 1.25; vertical-align: bottom; }
}
/* ── Сводка: герой, плитки, графики, освоение ─────────────────────────
   Один ряд — одна краска (акцент); текст всегда цветом текста. Движение —
   только на появлении и только там, где оно объясняет форму: столбцы растут
   от основания, заливки освоения — слева направо. Всё на CSS, без библиотек;
   при prefers-reduced-motion движения нет. */
.сводка-верх { display: grid; grid-template-columns: minmax(260px, 1.1fr) minmax(0, 2fr); gap: var(--s3); margin: 0 0 var(--s3); }
.герой, .плитка { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s4) var(--s4) var(--s3);
  display: flex; flex-direction: column; gap: 4px; min-width: 0; color: inherit; text-decoration: none; }
a.плитка:hover { border-color: var(--line-strong); text-decoration: none; }
.герой { justify-content: center; }
.пл-подпись { font-size: 15px; color: var(--muted); line-height: 1.3; }
.герой-число { font-size: 40px; line-height: 1.05; font-weight: 600; letter-spacing: -0.01em; font-variant-numeric: proportional-nums; color: var(--fg); }
.орг-список { display: grid; gap: var(--s2); max-width: 560px; }
.орг-стр { display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s3); }
.орг-тут { border-color: var(--accent); }
.орг-стр .badge { margin-left: var(--s2); }
.who .орг { color: var(--fg-soft); }
.герой-из { font-size: 16px; color: var(--fg-soft); margin-top: 4px; }
.герой-из b, .герой-из strong { color: var(--fg); font-weight: 600; }
.герой-за30 { font-size: 15px; color: var(--fg-soft); margin-top: 2px; }
.плитки { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s3); }
.пл-значение { font-size: 20px; line-height: 1.1; white-space: nowrap; font-weight: 600; color: var(--fg); font-variant-numeric: proportional-nums; }
.плитка.риск .пл-значение { color: var(--warn); }
.пл-под { font-size: 15px; color: var(--muted); }
.пл-сдвиг { font-size: 15px; font-weight: 600; margin-top: 2px; }
.пл-сдвиг .lo { font-weight: 400; }
.пл-сдвиг.хорошо { color: var(--ok); }
.пл-сдвиг.плохо { color: var(--danger); }
.пл-сдвиг.ровно { color: var(--muted); font-weight: 400; }
.искра { width: 100%; max-width: 160px; height: 32px; margin-top: auto; overflow: visible; }
.и-плоск { fill: var(--accent); opacity: .10; }
.и-линия { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.и-точка { fill: var(--accent); stroke: var(--panel); stroke-width: 2; }

.чарты { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--s3); margin: 0 0 var(--s4); }
.чарт-карта { margin: 0; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s3) var(--s4) var(--s2); min-width: 0; }
.чарт-карта figcaption { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); margin: 0 0 4px; font-size: 16px; }
.чарт-карта figcaption .lo { font-size: 15px; }
.чарт { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--sans); }
.ч-сетка { stroke: var(--line); stroke-width: 1; shape-rendering: crispEdges; }
.ч-база { stroke: var(--line-strong); stroke-width: 1; shape-rendering: crispEdges; }
.ч-ось { font-size: 11px; fill: var(--muted); }
.ч-год { font-size: 10px; fill: var(--muted); opacity: .8; }
.ч-метка { font-size: 11.5px; font-weight: 600; fill: var(--fg-soft); }
.ч-столб { fill: var(--accent); opacity: .72; transition: opacity .15s ease; }
.ч-столб.тек { opacity: 1; }
.ч-нуль { stroke: var(--line-strong); stroke-width: 2; }
.ч-мишень { fill: transparent; outline: none; cursor: default; }
.ч-ст:hover .ч-столб, .ч-мишень:focus-visible ~ .ч-столб, .ч-ст:focus-within .ч-столб { opacity: 1; }
.ч-ст:focus-within .ч-мишень { stroke: var(--accent); stroke-width: 1; stroke-dasharray: 2 2; }
/* Столбцы растут от основания, по одному слева направо; повторного движения
   при наведении нет — оно объясняет форму один раз. */
.ч-ст .ч-столб { transform-origin: 50% 100%; transform-box: fill-box; animation: ч-рост .6s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--i, 0) * 35ms); }
.ч-ст .ч-метка { animation: ч-проявить .4s ease both; animation-delay: calc(var(--i, 0) * 35ms + .3s); }
@keyframes ч-рост { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes ч-проявить { from { opacity: 0; } to { opacity: 1; } }

.освоение { display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.осв-строка { display: grid; grid-template-columns: minmax(140px, 1.2fr) minmax(120px, 2fr) 52px minmax(120px, 1fr); align-items: center; gap: var(--s3);
  padding: 8px var(--s4); border-top: 1px solid var(--line); color: inherit; text-decoration: none; min-height: 40px; }
.осв-строка:first-child { border-top: 0; }
.осв-строка:hover { background: var(--panel-2); text-decoration: none; }
.осв-имя { font-size: 15px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.осв-полоса { position: relative; height: 12px; min-width: 0; }
.осв-дорожка, .осв-заливка { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 0 var(--radius-xs) var(--radius-xs) 0; }
.осв-дорожка { background: var(--accent-soft); }
.осв-заливка { background: var(--accent); opacity: .85; transform-origin: 0 50%; animation: осв-рост .7s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--i, 0) * 45ms); }
.осв-строка.почти .осв-заливка { opacity: 1; }
/* Закрыто больше сметы — это не успех, а вопрос к смете или к ДС: янтарным. */
.осв-строка.перебор .осв-заливка { background: var(--warn); opacity: .9; }
.осв-строка.перебор .осв-процент { color: var(--warn); }
@keyframes осв-рост { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.осв-процент { font-size: 15px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; color: var(--fg); }
.осв-суммы { font-size: 15px; color: var(--fg-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ч-тип { position: absolute; z-index: 30; max-width: 320px; padding: 6px 10px; font-size: 12.5px; line-height: 1.35;
  background: var(--fg); color: var(--bg); border-radius: var(--radius-sm); box-shadow: var(--shadow-md); pointer-events: none; }
:root[data-theme="dark"] .ч-тип { background: #E6EDF5; color: #0F1A26; }

@media (max-width: 1023px) {
  .сводка-верх { grid-template-columns: 1fr; }
  .герой-число { font-size: 32px; }
}
@media (max-width: 720px) {
  .осв-строка { grid-template-columns: minmax(0, 1fr) 48px; grid-template-areas: "имя проц" "полоса полоса" "суммы суммы"; row-gap: 4px; }
  .осв-имя { grid-area: имя; white-space: normal; }
  .осв-процент { grid-area: проц; }
  .осв-полоса { grid-area: полоса; }
  .осв-суммы { grid-area: суммы; }
  .чарты { grid-template-columns: 1fr; }
  /* На телефоне график не ужимается до нечитаемых подписей — он едет вбок
     внутри своей карточки, как книга журнала. */
  .чарт-карта { overflow-x: auto; overscroll-behavior-x: contain; }
  .чарт { min-width: 440px; }
}
@media (prefers-reduced-motion: reduce) {
  .ч-ст .ч-столб, .ч-ст .ч-метка, .осв-заливка { animation: none; }
}
@media print {
  .ч-ст .ч-столб, .ч-ст .ч-метка, .осв-заливка { animation: none; }
  .ч-тип { display: none; }
}

/* ── Кабинет ─────────────────────────────────────────────────────────
   Паспорт (фото, имя, должность), вкладки разделов, формы под содержимое,
   списки «встало» для устройств и уведомлений. */
.каб-паспорт { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: var(--s4); align-items: center;
  padding: var(--s4) var(--s5); background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.каб-аватар { position: relative; width: 56px; height: 56px; border-radius: 50%; overflow: hidden; background: var(--panel-2); margin: 0; }
.каб-аватар img { width: 100%; height: 100%; object-fit: cover; display: block; }
.каб-инициалы { display: grid; place-items: center; width: 100%; height: 100%; font-weight: 600; font-size: 20px; color: var(--fg-soft); }
.каб-фото-кнопка { position: absolute; left: 0; right: 0; bottom: 0; height: 18px; font-size: 14px; line-height: 18px; text-align: center;
  background: rgba(15, 32, 51, .62); color: #fff; cursor: pointer; opacity: 0; transition: opacity .15s; }
.каб-аватар:hover .каб-фото-кнопка, .каб-аватар:focus-within .каб-фото-кнопка { opacity: 1; }
.каб-фото-кнопка input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.каб-имя h1 { margin: 0; font-size: 28px; line-height: 1.2; }
.каб-кто { color: var(--muted); font-size: 15px; margin-top: 2px; }
.каб-кто b { color: var(--fg-soft); font-weight: 500; }
.каб-действия { display: flex; gap: var(--s2); }
.каб-вкладки { display: flex; gap: 2px; margin: var(--s4) 0 var(--s4); border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.каб-вкладки a { padding: 10px 14px; margin-bottom: -1px; border-bottom: 2px solid transparent; color: var(--muted); font-weight: 500; font-size: 15px;
  text-decoration: none; white-space: nowrap; }
.каб-вкладки a:hover { color: var(--fg); text-decoration: none; }
.каб-вкладки a[aria-current="page"] { color: var(--fg); border-bottom-color: var(--accent); }
.каб-форма { max-width: 720px; }
.каб-форма .row-actions .hint { margin: 0 0 0 var(--s3); }
.каб-список { max-width: 720px; }
.каб-список.широкий { max-width: none; }
.каб-раздел details.tool { max-width: 720px; }
.каб-список .встало-строка.без-полосы { box-shadow: none; }
.каб-список .встало-строка > div { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; }
.каб-список .встало-строка > div > b { line-height: 1.3; }
.каб-список .встало-строка > div > span { display: block; }
.каб-знач code { font-family: var(--mono); font-size: 15px; }

/* Кабинет с 22.09 (снимок владельца: «как будто черновой вариант, всё
   криво»). Одна колонка на все вкладки и по центру: шапка карточкой во всю
   ширину над узкой колонкой полей читалась как недостроенная страница.
   Шапка — строкой без карточки; разделы — «подпись слева, поля справа», как
   у реквизитов организации; состояния — метками, а не абзацами. */
.каб { max-width: 960px; margin: 0 auto; }
.каб .каб-паспорт { grid-template-columns: 48px minmax(0, 1fr) auto; gap: var(--s3); padding: 0;
  background: none; border: 0; border-radius: 0; box-shadow: none; }
.каб .каб-аватар { width: 48px; height: 48px; }
.каб .каб-имя h1 { font-size: 28px; }
.каб-кто .badge { vertical-align: 1px; }
.каб .каб-форма, .каб .каб-список, .каб .каб-опасно, .каб .каб-площадка, .каб .каб-раздел details.tool { max-width: none; }
.каб-список .встало-строка > div:first-child { flex: 1 1 auto; min-width: 0; }
.каб-список .встало-строка > .badge, .каб-список .встало-строка > .hint { flex: none; }
.каб-профиль { margin: 0 0 var(--s4); }
.каб-профиль .field label .badge { margin-left: 6px; font-weight: 500; }
.каб-пояснение { align-self: end; }
.каб-пояснение .hint { display: block; margin: 0 0 6px; line-height: 1.4; }
.каб-почта-о { margin: 6px 0 0; }
.каб button.linkish { background: none; border: 0; padding: 0; min-height: 0; color: var(--accent); font: inherit;
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.каб-поддержка { margin: 0 0 var(--s2); color: var(--fg-soft); font-size: 15px; line-height: 1.5; }
.каб-вход h2.раздел { margin-top: var(--s4); }
.каб-пароль { border-top: 1px solid var(--line); }
.каб-пароль > summary { list-style: none; display: flex; align-items: center; gap: var(--s4);
  padding: 9px var(--s3) 9px var(--s4); cursor: pointer; }
.каб-пароль > summary::-webkit-details-marker { display: none; }
.каб-пароль > summary > div { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.каб-пароль > summary b { font-size: 16px; }
.каб-пароль > summary > div > span { color: var(--fg-soft); font-size: 15px; }
.каб-пароль > summary .btn { flex: none; min-height: 30px; padding: 0 10px; font-size: 15px; pointer-events: none; }
.каб-пароль[open] > summary .btn { opacity: .5; }
.каб-пароль > form, .каб-пароль > div.каб-форма { padding: 0 var(--s3) var(--s3) var(--s4); }
.каб-пароль > div.каб-форма > p { margin: 0 0 var(--s2); line-height: 1.5; }
.каб-тумблер > .badge { font-variant-numeric: tabular-nums; }
.каб-пусто { max-width: none; margin: var(--s3) 0; padding: 14px 16px; border: 1px dashed var(--line-strong); border-radius: var(--radius);
  background: var(--panel); color: var(--fg-soft); font-size: 15px; line-height: 1.5; }
.каб-части { margin: 0 0 var(--s4); }
.каб-части .n { color: var(--muted); }
.каб-часть > h2.раздел:first-child { margin-top: 0; }
.каб-плитки { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--s3); margin: 0 0 var(--s4); }
.каб-плитка { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--panel); color: var(--fg); text-decoration: none; }
a.каб-плитка:hover { border-color: var(--accent); text-decoration: none; }
.каб-плитка b { font-size: 16px; font-weight: 600; }
a.каб-плитка b::after { content: " →"; color: var(--muted); font-weight: 400; }
.каб-плитка span { color: var(--muted); font-size: 15px; line-height: 1.4; }
@media (max-width: 720px) {
  .каб .каб-паспорт { grid-template-columns: 48px minmax(0, 1fr); padding: 0; }
  .каб-пароль > summary { flex-direction: column; align-items: flex-start; gap: var(--s2); padding: 12px var(--s4); }
  .каб-пароль > summary .btn { width: 100%; justify-content: center; }
  .каб-пояснение { align-self: auto; }
  .каб-части { display: flex; }
  .каб-части a { flex: 1; justify-content: center; }
}
/* Дверь на платформу во вкладке «Организация»: одна строка, одна кнопка. */
.каб-площадка { display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  max-width: 720px; padding: var(--s3) var(--s4); border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.каб-площадка > div { display: flex; flex-direction: column; gap: 2px; }
.каб-площадка .sub { margin: 0; font-size: 15px; }
.каб-площадка .btn { flex: none; }
@media (max-width: 640px) { .каб-площадка { flex-direction: column; align-items: stretch; }
  .каб-площадка .btn { width: 100%; justify-content: center; } }

/* Экран платформы.
   ------------------------------------------------------------------
   Второй разбор владельца (20.10): «склад, старый интерфейс, кнопки где
   попало». Теперь порядок по частоте: сверху то, что ждёт решения, и решение
   стоит справа в той же строке; компании — одним списком строк, три
   действия над ним кнопками в один ряд; редкая настройка — карточками
   с состоянием, поля открываются по нажатию. */
.пл-шапка { margin-bottom: var(--s4); }
.пл-шапка h1 { margin: 0 0 4px; }
.пл-шапка .sub { margin: 0; }
.пл-ждёт { color: var(--warn); font-weight: 600; }

/* Три действия над компаниями — ряд кнопок. Первая залита: заводить
   компанию — главное дело списка. Открытое уходит под ряд целой
   панелью, а остальные кнопки остаются на месте. */
.пл-дела { display: flex; flex-wrap: wrap; gap: var(--s2); margin: 0 0 var(--s3); align-items: flex-start; }
.пл-дело { flex: none; min-width: 0; margin: 0; padding: 0; border: 0; background: none; }
.пл-дело > summary { display: inline-flex; align-items: center; gap: var(--s2); min-height: 40px; padding: 0 var(--s4);
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--panel); color: var(--fg);
  font-weight: 500; font-size: 15px; cursor: pointer; list-style: none; user-select: none; transition: background .12s, border-color .12s; }
.пл-дело > summary::-webkit-details-marker { display: none; }
.пл-дело > summary:hover { background: var(--panel-2); }
.пл-главное > summary { background: var(--accent); border-color: var(--accent); color: #fff; }
.пл-главное > summary:hover { background: var(--accent); filter: brightness(.94); }
.пл-плюс { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 18px; height: 18px;
  border-radius: var(--radius-xs); background: var(--panel-2); color: var(--muted); font-size: 15px; line-height: 1; transition: transform .15s; }
.пл-главное .пл-плюс { background: rgba(255, 255, 255, .22); color: #fff; }
.пл-дело[open] { order: 9; flex: 1 1 100%; border: 1px solid var(--accent); border-radius: var(--radius-lg);
  background: var(--panel); box-shadow: var(--shadow-md); }
.пл-дело[open] > summary { display: flex; width: 100%; min-height: 48px; border: 0; border-bottom: 1px solid var(--line);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0; background: none; color: var(--fg); font-size: 16px; font-weight: 600; filter: none; }
.пл-дело[open] .пл-плюс { transform: rotate(45deg); background: var(--panel-2); color: var(--fg); }
.пл-дело form { padding: var(--s4); }
.пл-форма { max-width: 560px; }
.пл-форма-широкая { max-width: none; }

/* Счётчик у заголовка раздела: сколько заявок, сколько компаний. Числом,
   а не словами — его считывают краем глаза. */
/* Лента журнала: время узкой графой моноширинно, подробности — тише
   основного текста. Строки короткие и читаются столбиком, а не абзацем. */
.лн-время { font-family: var(--mono); font-size: 15px; color: var(--muted); white-space: nowrap; }
.лн-что { color: var(--fg-soft); font-size: 15px; }

h2.раздел .счёт { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px;
  padding: 0 6px; border-radius: 999px; background: var(--panel-2);
  color: var(--muted); font-size: 14px; font-weight: 600; }

/* Заявки и просьбы перезвонить — карточками ленты: кто слева, когда
   и решение справа. Полоса слева — знак, что ждут ответа. */
.пл-заявки { display: flex; flex-direction: column; gap: 10px; margin-bottom: var(--s4); }
.пл-заявка { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "кто когда" "кто действия";
  gap: 6px var(--s5); padding: 14px 18px; border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--panel); box-shadow: inset 3px 0 0 var(--accent), var(--shadow); }
.пл-заявка .пл-кто { grid-area: кто; min-width: 0; line-height: 1.45; }
.пл-заявка .пл-кто b { font-size: 16px; }
.пл-заявка .пл-кто .src { margin-top: 2px; color: var(--fg-soft); font-size: 15px; }
.пл-заявка .пл-кто .src a { color: inherit; }
.пл-записка { margin-top: 6px; padding: 6px 10px; border-radius: var(--radius-sm); background: var(--panel-2); color: var(--fg-soft); font-size: 15px; }
.пл-заявка .пл-когда { grid-area: когда; justify-self: end; color: var(--muted); font-size: 14px; white-space: nowrap; }
.пл-заявка .row-actions { grid-area: действия; justify-self: end; align-self: end; margin: 0; gap: var(--s2); flex-wrap: nowrap; }
.пл-заявка form.inline { margin: 0; }
.пл-пусто { margin: 0 0 var(--s4); color: var(--muted); }

/* Компании — строки одного списка. Имя, числа, админ, бот и вход стоят
   графами, и вход у всех на одной линии справа. */
.пл-карты { display: flex; flex-direction: column; margin-bottom: var(--s4); border: 1px solid var(--line);
  border-radius: var(--radius-lg); background: var(--panel); box-shadow: var(--shadow); overflow: hidden; }
.пл-карта { display: grid; grid-template-columns: minmax(0, 1.5fr) 180px minmax(0, 1.2fr) minmax(0, 1fr) 264px;
  gap: var(--s3) var(--s5); align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.пл-карта:last-child { border-bottom: 0; }
.пл-карта.пл-тут { box-shadow: inset 3px 0 0 var(--accent); }
.пл-карта.пл-выкл { opacity: .65; }
.пл-карта > header { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.пл-карта > header b { font-size: 16px; line-height: 1.3; overflow-wrap: anywhere; }
.пл-метки { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.пл-метки code { font-family: var(--mono); font-size: 13px; color: var(--muted); }
.пл-карта dl { display: flex; gap: var(--s4); margin: 0; }
.пл-карта dl > div { display: flex; flex-direction: row-reverse; justify-content: flex-end; align-items: baseline; gap: 5px; }
.пл-карта dt { color: var(--muted); font-size: 14px; }
.пл-карта dd { margin: 0; font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.пл-карта .пл-админ, .пл-карта .пл-бот { display: flex; flex-direction: column; gap: 1px; min-width: 0; margin: 0; color: var(--fg-soft); font-size: 15px; }
.пл-карта .пл-админ > span, .пл-карта .пл-бот > span { color: var(--muted); font-size: 13px; }
.пл-карта .пл-админ .лихо { color: var(--warn); font-style: normal; }
/* «Бота нет» — не беда, а состояние: сайт работает весь, молчит только
   Telegram. Поэтому тихо-серым, а не янтарным. */
.пл-карта .пл-бот .тихо { color: var(--muted); font-style: normal; }
/* Строки карточки — div, а не p: в строке про бота стоит форма отключения,
   а абзац не может содержать форму — браузер молча закрыл бы его перед ней. */
.пл-карта .пл-бот > span.пл-строка { display: flex; align-items: center; gap: var(--s2);
  flex-wrap: wrap; color: var(--fg-soft); font-size: 15px; }
.пл-строка form.inline { margin: 0; }
.пл-строка form.inline button { min-height: 0; padding: 0; }
/* Кнопка, которая читается ссылкой: действие редкое и не должно спорить
   с главной кнопкой рядом.
   (Слова со страницы в комментариях стилей не повторяем: STYLE встраивается
   в каждую страницу, и такой комментарий однажды сошёл за содержимое —
   проверка «этого слова на странице нет» нашла его в стилях.) */
button.как-ссылка { padding: 0; border: 0; background: none; color: var(--muted); font: inherit;
  font-size: 15px; cursor: pointer; }
button.как-ссылка:hover { color: var(--fg); text-decoration: underline; }
/* Удаление — ссылкой, не кнопкой: рядом со входом две одинаковые кнопки
   читались бы как равные, а это не равные действия. */
.пл-убрать { color: var(--muted); font-size: 15px; text-decoration: none; }
.пл-убрать:hover { color: var(--danger); text-decoration: underline; }
/* Удаление в меню человека: тот же вес, что у выключения, но краснее —
   потому что назад дороги нет. */
.btn.danger-quiet { color: var(--danger); }
.btn.danger-quiet:hover { border-color: var(--danger); background: var(--danger-soft); }
.пл-карта > footer { display: flex; align-items: center; justify-content: flex-end; gap: var(--s4); margin: 0; padding: 0; border: 0; }
.пл-карта > footer .btn { white-space: nowrap; }
.badge.стоп { background: var(--panel-2); color: var(--muted); }
.пл-потери { margin: 0 0 var(--s3); padding-left: 1.1em; color: var(--fg-soft); font-size: 16px; line-height: 1.55; }
.пл-потери li { margin-bottom: 4px; }

/* Подробности под раскрывашкой: таблицы воронки, поля настройки. Строка
   с уголком, а не кнопка — это заглянуть, а не сделать. */
.пл-изменить { margin: 0; }
.пл-изменить > summary { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; color: var(--fg-soft);
  font-weight: 500; font-size: 15px; cursor: pointer; list-style: none; user-select: none; }
.пл-изменить > summary::-webkit-details-marker { display: none; }
.пл-изменить > summary::after { content: ""; width: 7px; height: 7px; margin-left: 2px; border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .15s; }
.пл-изменить[open] > summary::after { transform: rotate(225deg) translate(-1px, -1px); }
.пл-изменить > summary:hover { color: var(--fg); }
.пл-изменить[open] > summary { margin-bottom: var(--s2); }
.пл-подробно { margin: 0 0 var(--s4); }
.пл-две { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); align-items: start; }
.пл-две > * { margin: 0; }
.пл-текст { margin: 0; color: var(--fg-soft); font-size: 15px; line-height: 1.5; }

/* Настройка установки — карточки в две колонки: имя, состояние, одна
   кнопка. Карточка с открытыми полями занимает всю ширину. Янтарная
   полоса слева — здесь не всё в порядке. */
.пл-настройки { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: var(--s3); align-items: start; }
.пл-настр { display: flex; flex-direction: column; gap: var(--s2); min-width: 0; padding: 16px 18px;
  border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--panel); box-shadow: var(--shadow); }
.пл-настр:has(.пл-изменить[open]) { grid-column: 1 / -1; }
.пл-настр.пл-беда { box-shadow: inset 3px 0 0 var(--warn), var(--shadow); }
.пл-настр-шапка { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s3); }
.пл-настр-шапка h3 { margin: 0; font: 600 17px/1.3 var(--sans); }
.пл-статус { margin: 3px 0 0; color: var(--fg-soft); font-size: 15px; line-height: 1.4; }
.пл-статус code { font-size: 13px; color: var(--muted); }
.пл-настр-шапка > form.inline, .пл-настр-шапка > .btn { flex: none; margin: 0; }
.пл-настр .note, .пл-настр p.hint { margin: 0; }
.пл-настр .состояние { margin: 0; }
.пл-письмо { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.пл-письмо form.inline { margin: 0; }
.пл-письмо .пробное { display: flex; gap: var(--s2); flex: 1 1 320px; }
.пл-письмо .пробное input { flex: 1 1 200px; min-width: 0; }

@media (max-width: 1100px) {
  .пл-карта { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); }
  .пл-карта > footer { grid-column: 1 / -1; justify-content: flex-start; }
  .пл-карта > footer:empty { display: none; }
}
@media (max-width: 640px) {
  .пл-заявка { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "кто когда" "действия действия"; padding: 14px; }
  .пл-заявка .row-actions { justify-self: stretch; }
  .пл-заявка .row-actions form.inline { flex: 1; }
  .пл-заявка .row-actions button { width: 100%; justify-content: center; }
  .пл-карта { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s2) var(--s3); padding: 14px; }
  .пл-карта > header, .пл-карта dl, .пл-карта > footer { grid-column: 1 / -1; }
  .пл-карта > footer { justify-content: space-between; }
  .пл-дела { display: grid; grid-template-columns: 1fr 1fr; }
  .пл-дела .пл-главное { grid-column: 1 / -1; }
  .пл-дело > summary { display: flex; justify-content: center; width: 100%; padding: 0 var(--s2); font-size: 14px; white-space: nowrap; }
  .пл-дело:not(.пл-главное):not([open]) .пл-плюс { display: none; }
  .пл-дело[open] { grid-column: 1 / -1; }
  .пл-дело[open] > summary { justify-content: flex-start; }
  .пл-настр { padding: 14px; }
  .пл-настр-шапка { flex-wrap: wrap; }
  .пл-настр-шапка > form.inline, .пл-настр-шапка > .btn { width: 100%; }
  .пл-настр-шапка > form.inline button { width: 100%; justify-content: center; }
  .пл-настр-шапка > .btn { justify-content: center; }
}

.каб-тумблер { cursor: pointer; }
.каб-тумблер input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.каб-тумблер i { position: relative; flex: none; width: 38px; height: 22px; border-radius: 999px; background: var(--line-strong); transition: background .15s; }
.каб-тумблер i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: transform .15s; }
.каб-тумблер input:checked + i { background: var(--accent); }
.каб-тумблер input:checked + i::after { transform: translateX(16px); }
.каб-тумблер input:focus-visible + i { outline: 2px solid var(--accent); outline-offset: 2px; }
.каб-опасно { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); max-width: 720px;
  margin-top: var(--s4); padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.каб-опасно b { display: block; font-size: 15px; } .каб-опасно span { font-size: 15px; color: var(--muted); }
.каб-объект { grid-template-columns: 40px minmax(0, 1fr) auto; display: grid !important; }
.каб-объект .кольцо { width: 40px; height: 40px; }
.каб-объект .кольцо-в span { display: none; }
.каб-объект .кольцо-в b { font-size: 10.5px; }
.каб-объект .кольцо-в b.три { font-size: 8px; letter-spacing: -.03em; }
.каб-объект b a { color: inherit; text-decoration: none; }
.каб-объект b a:hover { color: var(--accent); }
/* Граф в строке объекта столько, сколько их видит роль: у прораба нет актов,
   и жёсткие три колонки оставляли на их месте пустое поле. */
.каб-список .каб-объект .каб-числа { display: grid; grid-auto-flow: column; grid-auto-columns: 64px; text-align: right; gap: 0; }
.каб-числа > span { font-size: 14px; color: var(--muted); display: block; }
.каб-числа b { display: block; font-size: 16px; color: var(--fg); font-variant-numeric: tabular-nums; }
.янтарь { color: var(--warn); }
/* Организация: реквизиты списком «подпись — значение», люди строками. */
.каб-h2 { display: flex; align-items: baseline; gap: var(--s3); }
.каб-h2 .n { color: var(--muted); font-weight: 400; font-size: 15px; }
.каб-h2 a { margin-left: auto; font-weight: 400; font-size: 15px; }
.каб-h3 { font-size: 15px; color: var(--muted); font-weight: 500; margin: var(--s3) 0 var(--s2); }
/* Вкладка «Организация» с 22.09 — три части под переключателем (люди,
   реквизиты, настройки плитками) в общей колонке кабинета; прежняя
   раскладка в две колонки читалась простынёй. */

/* Реквизиты — одна панель, разбитая на группы: слева, о чём группа и куда
   попадут её поля, справа сами поля. Четырнадцать полей подряд без групп
   читались как анкета: не видно, где кончается юрлицо и начинается банк. */
.орг-паспорт { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 0 var(--s4); }
.орг-группа { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: var(--s3) var(--s5);
  padding: var(--s4) 0; border-top: 1px solid var(--line); }
.орг-группа:first-child { border-top: 0; }
.орг-группа-о b { display: block; font-size: 16px; line-height: 1.3; }
.орг-группа-о span { display: block; margin-top: 4px; font-size: 15px; color: var(--muted); line-height: 1.45; }
.орг-группа .поля { margin: 0; gap: var(--s3); }
.орг-группа .поля .field label { font-size: 15px; }
/* Метка у подписи настройки переносится по словам, а не уходит за край
   поля: на 390 и 360 точках «в сборке заявки по отмеченным — пока не
   действует» обрезалась (проверка 26.09, второй круг). В строку — пилюля. */
.орг-группа .field label .badge { display: inline-block; white-space: normal; border-radius: var(--radius-lg); max-width: 100%; }
.орг-группа dl { display: grid; grid-template-columns: 150px minmax(0, 1fr); row-gap: 6px; column-gap: var(--s4);
  font-size: 15px; margin: 0; align-content: start; }
.орг-группа dt { color: var(--muted); margin: 0; }
.орг-группа dd { margin: 0; font-variant-numeric: tabular-nums; }
.орг-низ { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); margin: 0 calc(-1 * var(--s4));
  border-top: 1px solid var(--line); }
.орг-низ .hint { margin: 0; }
@media (max-width: 720px) { .орг-группа { grid-template-columns: 1fr; gap: var(--s2); } .орг-низ { flex-wrap: wrap; } }

.реквизиты { display: grid; grid-template-columns: 180px minmax(0, 1fr); row-gap: 6px; column-gap: var(--s4); font-size: 15px; max-width: 720px; margin: 0; }
.реквизиты dt { color: var(--muted); margin: 0; }
.реквизиты dd { margin: 0; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.каб-люди { border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--panel); overflow: visible; }
/* Люди группами по ролям (24.09): у группы заголовок с числом и строка —
   что эта роль видит. Карточка человека: имя и связь сверху, роль и «⋯»
   справа, объекты — второй строкой на всю ширину. */
.каб-группа { margin-top: var(--s4); }
.каб-группа-шапка { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: var(--s3); row-gap: 2px; margin: 0 0 var(--s2); }
.каб-группа-шапка .каб-h3, .каб-выключены > summary .каб-h3 { margin: 0; font-size: 17px; font-weight: 650; color: var(--fg); }
.каб-группа-шапка .hint { margin: 0; font-size: 14px; }
.каб-группа .n { color: var(--muted); font-weight: 600; }
.каб-выключены > summary { cursor: pointer; display: flex; align-items: baseline; flex-wrap: wrap; column-gap: var(--s3); margin: 0 0 var(--s2); list-style: none; }
.каб-выключены > summary::-webkit-details-marker { display: none; }
.каб-выключены > summary::before { content: '▸'; color: var(--accent); width: 12px; }
.каб-выключены[open] > summary::before { content: '▾'; }
.каб-выключены > summary .hint { font-size: 14px; }
.каб-человек { display: grid; grid-template-columns: 32px minmax(0, 1fr) 176px 32px; column-gap: var(--s3); row-gap: var(--s2); align-items: center; padding: 12px var(--s3); }
.каб-человек + .каб-человек { border-top: 1px solid var(--line); }
.каб-человек > .каб-мини { align-self: start; }
.каб-человек .кто { min-width: 0; }
.каб-человек .кто b { font-size: 16px; font-weight: 600; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.каб-человек .о-подпись { font-size: 14px; color: var(--muted); }
.каб-главный { margin: 2px 0; cursor: help; }
.каб-должн { font-weight: 400; color: var(--muted); }
.каб-человек > .каб-его-объекты { grid-column: 2 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--s2); font-size: 15px; min-width: 0; }
.каб-человек > .каб-его-объекты .hint { margin: 0; font-size: 14px; }
.каб-об-заг { color: var(--muted); font-size: 14px; }
.каб-об { display: inline-block; max-width: 100%; padding: 2px 10px; border-radius: 999px; background: var(--panel-2); color: var(--fg); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.каб-об-правка > summary { cursor: pointer; color: var(--accent); font-size: 14px; }
.каб-об-правка[open] { flex-basis: 100%; }
.каб-об-правка[open] > summary { margin-bottom: var(--s2); }
.каб-человек.выключен .кто b, .каб-человек.выключен .каб-мини { opacity: .55; }
.каб-человек.приглашение .кто b { font-weight: 500; }
.каб-человек .роль select { width: 100%; }
.каб-человек.заявка { grid-template-columns: 32px minmax(0, 1fr); box-shadow: inset 4px 0 0 var(--warn); }
.каб-впустить { grid-column: 2; display: flex; flex-wrap: wrap; gap: var(--s2); }
.каб-впустил { margin: 0; font-size: 14px; }
.каб-мини { width: 32px; height: 32px; border-radius: 50%; background: var(--panel-2); color: var(--fg-soft); font-size: 14px; font-weight: 600; display: grid; place-items: center; object-fit: cover; flex: none; }
.каб-ещё { position: relative; justify-self: end; }
.каб-ещё summary { list-style: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: var(--radius-sm); color: var(--muted); cursor: pointer; }
.каб-ещё summary::-webkit-details-marker { display: none; }
.каб-ещё summary:hover, .каб-ещё[open] summary { background: var(--panel-2); color: var(--fg); }
.каб-ещё > div { position: absolute; right: 0; top: calc(100% + 4px); z-index: 5; min-width: 260px; padding: var(--s3); display: flex; flex-direction: column; align-items: flex-start; gap: var(--s2);
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: 0 8px 24px rgba(0,0,0,.12); }
.каб-ещё > div label { font-size: 15px; color: var(--muted); display: flex; align-items: center; gap: var(--s2); }
.каб-ещё > div input[readonly] { width: 100%; font-family: var(--mono); font-size: 14px; }
/* Объекты человека (24.09) — в приглашении и в карточке человека (у гостя —
   в меню «⋯»). Плитками в сетку: имя крупно, код мелко; отмеченная —
   с рамкой цвета акцента. Длинный список прокручивается внутри, сверху —
   поиск, «Выбрать все», «Снять все» и счёт отмеченных. */
.field.каб-объекты, .каб-ещё > div .field.каб-объекты { display: flex; flex-direction: column; align-items: stretch; gap: var(--s2); margin: 0; padding: 10px 14px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); min-width: 0; }
.каб-объекты legend { padding: 0 4px; font-size: 15px; font-weight: 600; color: var(--fg); }
.каб-объекты > .hint { font-size: 14px; margin: 0; }
.каб-об-панель { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.каб-об-панель[hidden] { display: none; }
.каб-об-панель .каб-об-поиск { flex: 1 1 220px; min-width: 0; width: auto; }
.каб-об-панель button { min-height: 36px; padding: 6px 12px; font-size: 14px; }
.каб-об-сетка { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--s2); max-height: 336px; overflow-y: auto; padding: 2px; }
.каб-объекты .каб-об-карта, .каб-ещё > div .каб-объекты .каб-об-карта { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; row-gap: 0; align-items: start; align-content: start; margin: 0;
  padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel); color: var(--fg); cursor: pointer; white-space: normal; }
.каб-объекты .каб-об-карта[hidden] { display: none; }
.каб-объекты .каб-об-карта:hover { border-color: var(--fg-soft); }
.каб-объекты .каб-об-карта:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.каб-об-карта input { width: auto; min-height: 0; margin: 3px 0 0; flex: none; grid-row: 1 / span 2; }
.каб-об-имя { font-size: 15px; line-height: 1.3; overflow-wrap: anywhere; }
.каб-об-код { grid-column: 2; font-family: var(--mono); font-size: 13px; color: var(--muted); }
.каб-объекты-форма { display: flex; flex-direction: column; align-items: stretch; gap: var(--s2); width: 100%; min-width: 0; }
.каб-объекты-форма button { align-self: flex-start; }
.каб-галочка { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 600; color: var(--fg); }
.каб-галочка input { width: auto; min-height: 0; margin: 0; flex: none; }
.каб-ссылка input { display: block; width: 100%; margin-top: var(--s2); font-family: var(--mono); font-size: 15px; }
/* Поле карточки, взятое из реквизитов организации: серое значение — подложка, а не ввод. */
.field.из-орг input::placeholder { color: var(--fg-soft); font-style: italic; }
.из-орг-хинт { margin: calc(-1 * var(--s2)) 0 var(--s3); }
@media (max-width: 720px) {
  .каб-паспорт { grid-template-columns: 48px minmax(0, 1fr); padding: var(--s3) var(--s4); }
  .каб-действия { grid-column: 1 / -1; }
  /* Строка объекта складывается, как в списке объектов: кольцо и имя
     сверху, числа ровным рядом под ними. Прятать их нельзя — по ним прораб
     видит, что по объекту уже есть. */
  .каб-объект { grid-template-columns: 40px minmax(0, 1fr); }
  .каб-список .каб-объект .каб-числа { grid-column: 1 / -1; grid-auto-columns: minmax(0, 1fr); text-align: left;
    border-top: 1px solid var(--line); padding-top: var(--s2); }
  .орг-группа dl { grid-template-columns: 1fr; row-gap: 2px; }
  .орг-группа dt { margin-top: 6px; }
  .реквизиты { grid-template-columns: 1fr; row-gap: 2px; }
  .реквизиты dt { margin-top: 8px; }
  /* На телефоне: имя и «⋯» сверху, под ними роль, ниже объекты. */
  .каб-человек { grid-template-columns: 32px minmax(0, 1fr) 32px; }
  .каб-человек .роль { grid-column: 2; grid-row: 2; }
  .каб-человек .роль select { width: auto; min-width: 150px; }
  .каб-человек .каб-ещё { grid-column: 3; grid-row: 1; }
  .каб-человек > .каб-его-объекты { grid-column: 2 / -1; }
  .каб-человек.заявка .каб-впустить { grid-column: 1 / -1; }
  .каб-ещё > div { min-width: 0; width: min(320px, calc(100vw - 32px)); }
}

/* Чип состояния объекта — не кнопка: курсор-вопрос и подсказка говорят, что
   он считается сам, а не переключается. */
.badge.о-состояние { cursor: help; }
.badge.о-состояние:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.сегменты a.риск .n { color: var(--warn); }
.toolbar .тб-прочее { margin-left: auto; display: inline-flex; gap: var(--s2); }
.сегменты.ож-виды { margin: var(--s3) 0 var(--s2); }
.сегменты.ож-этажи { margin: 0 0 var(--s2); }
/* Под словами о месте — что из них легло в план: «2 эт · оси 1–4 · пом. 101». */
.ож-книга td.ож-место { min-width: 170px; }
.ож-книга .ож-план { display: block; font-size: 14px; line-height: 1.2; color: var(--muted); padding: 1px 6px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
.ож-книга .ож-план:empty { display: none; }
@media (max-width: 820px) {
  .сегменты { width: 100%; overflow-x: auto; scrollbar-width: none; }
  .toolbar .тб-прочее { margin-left: 0; }
}

/* Строка-цель: карточку открывает нажатие в любое место строки, а не только
   кнопка в её конце. Ссылка растянута на всю строку из первой ячейки —
   так её видят и клавиатура, и чтение с экрана; кнопки, поля и ссылки внутри
   строки лежат выше по слою и остаются отдельными целями. */
tr.кликабельная { position: relative; cursor: pointer; }
tr.кликабельная td:first-child { position: relative; }
a.строка-цель { position: absolute; inset: 0; width: 100%; z-index: 0; }
tr.кликабельная td > *:not(.строка-цель) { position: relative; z-index: 1; }
tr.кликабельная:hover td { background: var(--panel-2); }

/* Действия в строке таблицы: «Смотреть · Excel · PDF» читались как текст,
   а не как кнопки, — мелкие, слитые в одну строку, промахнуться мимо
   нужной проще, чем попасть. Форма важнее размера: рамка и просвет делают
   их видимыми, не раздувая колонку. На телефоне высота честные 44 пикселя:
   по экрану стучат в перчатках. */
/* Сорок рамочных кнопок на экран — это сорок одинаковых рамок, среди
   которых не видно ни строк, ни состояний. Действие в строке — призрачная
   кнопка: текст акцентом, рамка и фон появляются по наведению. Место
   и цель нажатия те же, шума — нет. */
td.act a, td.act-wrap a, td.act button, td.act-wrap button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 8px;
  margin: 1px 0 1px 2px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: 500;
  color: var(--accent);
  background: transparent;
  text-decoration: none;
  white-space: nowrap;
}
td.act a:hover, td.act-wrap a:hover, td.act button:hover, td.act-wrap button:hover {
  border-color: var(--line-strong); background: var(--panel-2); text-decoration: none; }
@media (max-width: 820px) {
  /* На телефоне пальцем, но в одну строку: три кнопки по 44 пикселя вставали
     столбиком и раздували строку таблицы втрое. Настоящее лечение здесь —
     карточки вместо широкой таблицы (как в ведомости просчёта); до них
     держим кнопки крупнее настольных, но в один ряд. */
  td.act, td.act-wrap { white-space: nowrap; }
  td.act a, td.act-wrap a, td.act button, td.act-wrap button {
    min-height: 36px; padding: 0 12px; font-size: 16px; margin-left: 4px;
  }
}
/* Решение по расхождению: кнопкам можно встать в два ряда, лишь бы не уехать
   за край таблицы — там их не найдут. */
/* Графа действий, которой можно встать в два ряда, — но рядом, а не
   столбиком: раньше white-space: normal разрешал перенос, и две кнопки
   на балансе вставали друг под другом, разделённые точкой из разметки.
   Ряд один и тот же в обеих графах, переносится он только при нехватке
   ширины. */
td.act-wrap, th.act-wrap { text-align: right; }
td.act-wrap { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 2px; }

/* Скрин к заметке: в списке — ноготок, в карточке — во всю ширину карточки,
   но не выше экрана: замечания приходят и со сверхдлинных страниц. */
img.thumb {
  width: 84px;
  height: 48px;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  display: block;
}
img.shot {
  max-width: 100%;
  max-height: 70vh;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-top: var(--s3);
}

.empty {
  color: var(--muted);
  padding: var(--s6) var(--s4);
  text-align: center;
  font-size: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s3);
}
/* Кнопка в пустом состоянии — не украшение: пустой раздел должен звать
   к первому делу, а не сообщать о пустоте. */
.empty .btn { flex: 0 0 auto; }

@media (max-width: 720px) {
  th, td { padding: 9px 10px; font-size: 15px; }
  /* Наименование на телефоне сжимаем сильнее и разрешаем рвать длинные
     артикулы: «КПСнг(А)-FRHF 1x2x0,75» иначе распирает таблицу так, что
     цифры уезжают за экран. */
  td.name, th.name { min-width: 180px; }
  td.name-narrow, th.name-narrow { min-width: 150px; }
  td.name, td.name-narrow { overflow-wrap: anywhere; }

  /* Высоту не ограничиваем — страница листается целиком, — а вбок таблица
     ездит внутри своей рамки и страницу за собой не тянет. */
  .wrap { max-height: none; overflow-x: auto; overscroll-behavior-x: contain; }
  /* Липкая шапка таблицы без ограничения высоты не липнет ни к чему
     и в мобильных браузерах оставляет за собой полосы при прокрутке. */
  th { position: static; }

  /* Второстепенные колонки на узком экране прячем: на телефоне важнее
     увидеть наименование и цену, чем раздел. */
  th.lo, td.lo { display: none; }

  /* Первая графа не уезжает вместе с остальными: пролистав таблицу вбок
     до цены, человек должен видеть, к какой строке она относится. Без
     этого числа на телефоне бесполезны — непонятно, чьи они. */
  th:first-child, td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--panel);
    box-shadow: 1px 0 0 var(--line);
  }
  tbody tr:hover td:first-child { background: var(--panel-2); }
}

/* ── Кабинет со своим меню (вариант А, 08.10) ───────────────────────────
   Слева на самой странице — меню кабинета: кто я, группа «Я», группа
   «Компания». Справа — выбранный раздел целиком, с шапкой страницы, как
   везде на сайте. Левое рабочее меню сайта не меняется. На телефоне
   без раздела в адресе — только список разделов; в разделе — «назад». */
.каб-сетка { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 28px; align-items: start; }
.каб-нав { position: sticky; top: var(--s4); display: grid; gap: 2px; }
.каб-нав .каб-кто { display: flex; gap: 12px; align-items: center; padding: 2px 6px 14px; margin: 0 0 4px; border-bottom: 1px solid var(--line); color: inherit; font-size: inherit; }
.каб-нав .каб-кто > span:last-child { display: grid; line-height: 1.3; min-width: 0; gap: 2px; }
.каб-нав .каб-кто b { font-size: 15px; font-weight: 600; color: var(--fg); overflow-wrap: anywhere; }
.каб-нав .каб-кто i { font-style: normal; font-size: 13px; color: var(--muted); }
.каб-ава { flex: none; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; background: var(--panel-2); display: grid; place-items: center; }
.каб-ава img { width: 100%; height: 100%; object-fit: cover; display: block; }
.каб-ава .каб-инициалы { font-size: 15px; }
.каб-нав .заг { margin: 12px 10px 4px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.каб-нав .заг b { display: block; margin-top: 2px; text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 500; color: var(--fg-soft); }
.каб-нав a { display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 6px 10px; border-radius: var(--radius-sm); color: var(--fg-soft); text-decoration: none; font-size: 15px; font-weight: 500; }
.каб-нав a:hover { background: var(--panel); color: var(--fg); text-decoration: none; }
.каб-нав a[aria-current] { background: var(--panel); color: var(--fg); font-weight: 600; box-shadow: inset 3px 0 0 var(--accent), var(--shadow); }
.каб-нав a .з { flex: none; display: grid; place-items: center; width: 18px; height: 18px; color: var(--muted); }
.каб-нав a:hover .з { color: var(--fg-soft); }
.каб-нав a[aria-current] .з { color: var(--accent); }
.каб-нав a .о { flex: 1; min-width: 0; }
.каб-нав a .м { font-size: 13px; color: var(--muted); }
.каб-нав a .тчк { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--точка); }
.каб-тело { min-width: 0; display: flex; flex-direction: column; gap: var(--s4); }
.каб-тело .page-head { margin-bottom: 0; }
.каб-назад { display: none; }
.каб-фото .каб-ава { width: 56px; height: 56px; }
.каб-фото-ряд { display: flex; align-items: center; gap: var(--s3); }
.каб-фото-ряд .каб-фото-кнопка { position: relative; height: auto; opacity: 1; background: transparent; color: inherit; font-size: inherit; line-height: inherit; }
@media (max-width: 860px) {
  .каб-сетка { grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
  .каб-нав { position: static; }
  .каб-нав a { min-height: 48px; border-top: 1px solid var(--line); border-radius: 0; }
  .каб-нав a[aria-current] { box-shadow: none; background: transparent; }
  .каб-сетка.корень .каб-тело { display: none; }
  .каб-сетка.корень .каб-нав a[aria-current] { font-weight: 500; color: var(--fg-soft); }
  .каб-сетка.корень .каб-нав a[aria-current] .з { color: var(--muted); }
  .каб-сетка:not(.корень) .каб-нав { display: none; }
  .каб-назад { display: inline-flex; align-self: flex-start; min-height: 40px; align-items: center; font-weight: 500; }
}

/* --- Панели и формы ---------------------------------------------------- */

.card2, details.note-form, form.upload {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s4);
  margin: 0 0 var(--s4);
}
.card2 h1 { font-size: 20px; margin: 0 0 var(--s2); }
.card2 h1:not(:first-child) { margin-top: var(--s5); }

.field {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: var(--s3);
  align-items: center;
  margin: 0 0 var(--s3);
}
.field label { color: var(--fg-soft); font-size: 16px; }
.field > span { color: var(--fg-soft); font-size: 16px; line-height: 1.45; }
/* Подсказка — под своим полем, а не в колонке подписей: уехав влево, она
   читалась как вторая подпись к следующему полю, и форма из шести строк
   выглядела как форма из двенадцати. */
.field > .hint { grid-column: 2; margin: -6px 0 0; color: var(--muted); font-size: 15px; line-height: 1.4; }

/* Большая форма: подписи над полем и ширина поля по смыслу.
   ------------------------------------------------------------------
   Подпись слева хороша для трёх полей в шторке. В карточке объекта их
   шестьдесят, и колонка подписей в двести пикселей резала каждое имя
   на две строки, а поле ИНН при этом растягивалось на семьсот — двенадцать
   цифр посреди пустоты. Страница выходила в пять экранов подряд, и внизу
   ждала одна кнопка «Сохранить».

   Здесь подпись стоит над полем, а поля лежат на сетке в двенадцать
   долей: ИНН, КПП, ОКПО и ОГРН встают в один ряд, наименование и адрес
   занимают всю ширину. Класс .field тот же самый — раскладку задаёт
   обёртка, поэтому маленькие формы в шторке остаются какими были. */
.поля {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--s3) var(--s4);
  margin: 0 0 var(--s4);
}
.поля .field { display: block; margin: 0; grid-column: span 12; }
.поля .field label {
  display: block; margin-bottom: 4px;
  font-size: 15px; color: var(--muted); line-height: 1.3;
}
.поля .field.к3 { grid-column: span 3; }
.поля .field.к4 { grid-column: span 4; }
.поля .field.к6 { grid-column: span 6; }
@media (max-width: 900px) {
  .поля .field.к3 { grid-column: span 6; }
  .поля .field.к4 { grid-column: span 6; }
}
@media (max-width: 600px) {
  .поля .field.к3, .поля .field.к4, .поля .field.к6 { grid-column: span 12; }
}

/* П5. Карточка объекта: поля 36 px, форма слева, оглавление разделов справа
   (липкое). Сорок два поля на пяти экранах — без оглавления в них ищут
   «Договор» прокруткой. */
.поля .field input[type=text] { min-height: var(--h-ctl); height: var(--h-ctl); padding: 0 10px; font-size: 16px; }
.карт-раскладка { display: grid; grid-template-columns: minmax(0, 1fr) 188px; gap: var(--s4); align-items: start; }
.карт-раскладка .card2 { margin: 0; min-width: 0; }
.карт-разделы { position: sticky; top: var(--s4); display: flex; flex-direction: column; gap: 2px;
  padding: var(--s2) 0; }
.карт-разделы a { display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  padding: 6px 10px; border-radius: var(--radius-sm); color: var(--fg-soft); font-size: 15px; text-decoration: none;
  box-shadow: inset 2px 0 0 transparent; }
.карт-разделы a .n { font-family: var(--mono); font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.карт-разделы a.полно .n { color: var(--ok); }
.карт-разделы a:hover { background: var(--panel-2); color: var(--fg); text-decoration: none; }
.карт-разделы a[aria-current="true"] { color: var(--fg); font-weight: 600; box-shadow: inset 2px 0 0 var(--accent); background: var(--accent-soft); }
.card2 h2.группа { scroll-margin-top: var(--s4); }
@media (max-width: 1100px) {
  /* Уже 1100 — оглавление полосой над формой, прокручивается вбок. */
  .карт-раскладка { grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
  .карт-разделы { order: -1; position: static; flex-direction: row; gap: 4px; padding: 0 0 2px;
    overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
  .карт-разделы::-webkit-scrollbar { display: none; }
  .карт-разделы a { flex: none; border: 1px solid var(--line); background: var(--panel); padding: 6px 10px; box-shadow: none; white-space: nowrap; }
  .карт-разделы a[aria-current="true"] { box-shadow: none; border-color: var(--accent); }
}

/* Заголовок группы внутри формы — тот же язык, что и разделы страницы,
   только на ступень ниже: страница остаётся с одним h1. */
.card2 h2.группа {
  display: flex; align-items: center; gap: 12px;
  margin: var(--s5) 0 var(--s3);
  font-size: 16px; font-weight: 650; color: var(--fg);
}
.card2 h2.группа:first-child, .card2 > input[type=hidden]:first-child + h2.группа { margin-top: 0; }
.card2 h2.группа::after { content: ''; flex: 1; height: 1px; background: var(--line); }

/* Приказы на представителей (ИД-6): каждый — своя форма под карточкой. */
.приказы { margin-top: var(--s4); }
.приказы .приказ { padding: var(--s3) 0; border-bottom: 1px solid var(--line); }
.приказы .приказ .поля { margin-bottom: var(--s2); }
.приказы .поля .field input[type=date], .приказы .поля .field select { min-height: var(--h-ctl); height: var(--h-ctl); font-size: 16px; }
.приказы .метка-черновик { color: var(--warn); }
.приказы .метка-действует { color: var(--ok); }
.приказы .приказ-новый { flex-wrap: wrap; gap: var(--s2); margin-top: var(--s3); }

/* Кнопка сохранения не уезжает вниз на пять экранов: пока форма на виду,
   полоса с ней стоит у нижнего края. Заполнил три поля наверху — сохранил,
   не разыскивая кнопку. */
.card2 .row-actions.липкая {
  position: sticky; bottom: 0; z-index: 3;
  margin: var(--s4) calc(var(--s4) * -1) calc(var(--s4) * -1);
  padding: var(--s3) var(--s4);
  background: var(--panel);
  border-top: 1px solid var(--line);
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: var(--shadow-md);
}
.card2 .row-actions.липкая .хинт { color: var(--muted); font-size: 15px; margin-left: auto; }
@media (max-width: 720px) {
  .card2 .row-actions.липкая { margin: var(--s3) calc(var(--s3) * -1) calc(var(--s3) * -1);
    padding: var(--s2) var(--s3); }
  .card2 .row-actions.липкая .хинт { display: none; }
}
@media (max-width: 820px) {
  /* На телефоне снизу стоит панель разделов — полоса сохранения садится
     над ней, а не под неё. Открылась клавиатура — панель уезжает, и
     кнопка опускается на её место: печатать и сохранять надо в одном
     экране, не листая. */
  .card2 .row-actions.липкая { bottom: calc(74px + env(safe-area-inset-bottom)); }
  body.клавиатура .card2 .row-actions.липкая { bottom: 0; }
}

@media (max-width: 720px) {
  .field { grid-template-columns: 1fr; gap: var(--s1); }
  .field label { color: var(--muted); font-size: 15px; }
  .field > .hint { grid-column: 1; margin: 0; }

  /* Шестнадцать пикселей — не про красоту: при меньшем кегле Safari
     на iPhone приближает страницу, как только палец попадает в поле,
     и обратно она уже не отъезжает. */
  input[type=text], input[type=number], input[type=search],
  input[type=password], input[type=date], select, textarea { font-size: 16px; }

  .card2, details.note-form, form.upload { padding: var(--s3); }
  form.upload input[type=text] { min-width: 0; width: 100%; }
  form.search input[type=search], form.search select { max-width: none; flex: 1 1 100%; }
  /* Ссылка-кнопка в ряду действий — той же ширины, что кнопки рядом. */
  .row-actions button, .row-actions .btn { flex: 1 1 auto; }
}

input[type=text], input[type=number], input[type=search], input[type=tel], input[type=email],
input[type=password], input[type=date], select, textarea {
  width: 100%;
  min-height: var(--h-ctl);
  padding: 6px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: var(--fg);
  font: inherit;
}
input::placeholder { color: var(--muted); }
input:focus, select:focus, textarea:focus {
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-soft);
}
input[type=checkbox] { width: 20px; height: 20px; min-height: 0; accent-color: var(--accent); vertical-align: -4px; }
input[type=file] { max-width: 100%; font-size: 15px; color: var(--muted); }
/* 21.09. Поле ввода — белое, как карточка, а не серое, как полотно: серое
   поле на белой карточке читалось выключенным, и пример в подсказке
   («ООО «Ромашка»») — уже вписанным значением. Кнопка выбора файла — нашей
   обычной кнопкой, а не серой коробкой браузера. */
input[type=file]::file-selector-button {
  min-height: var(--h-ctl); margin-right: 10px; padding: 0 14px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--panel); color: var(--fg); font: inherit; font-weight: 600; cursor: pointer;
}
input[type=file]::file-selector-button:hover { background: var(--panel-2); }

.row-actions {
  display: flex;
  gap: var(--s2);
  margin-top: var(--s4);
  align-items: center;
  flex-wrap: wrap;
}

button {
  min-height: var(--h-ctl);
  padding: 0 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: var(--fg);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
}
/* Ссылка, выглядящая кнопкой: «Привязать Telegram», «Перейти ко входу».
   Это переходы, а не отправка формы, поэтому ссылка, а не button. */
/* Лестница кнопок: обычная — рамкой, главная — заливкой, тихая — та же
   обычная под другим именем (осталась с тех пор, когда .btn по умолчанию
   заливалась акцентом, и «ссылка-кнопка» была неотличима от «ссылки
   главной»). Главная на экране одна, и она одна заливается. */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--h-ctl); padding: 0 16px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--panel); color: var(--fg); font-weight: 500; text-decoration: none;
}
.btn:hover { text-decoration: none; background: var(--panel-2); }
.btn.quiet { background: var(--panel); color: var(--fg); border-color: var(--line-strong); }
.btn.quiet:hover { background: var(--panel-2); filter: none; }
/* Выбранный отбор в панели — заливкой мягким акцентом: это состояние
   списка, а не второе главное действие. */
.btn.quiet.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); font-weight: 600; }
button:hover { background: var(--bg-sunken); }
button:active { transform: translateY(1px); }

/* Главное действие формы — заливкой: на панели обычно одна кнопка, и она
   же ответ на вопрос «что тут делать». */
.card2 button[type=submit], form.upload button[type=submit], .дв-карта button[type=submit],
button.primary, .btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-fg);
}
.card2 button[type=submit]:hover, form.upload button[type=submit]:hover, .дв-карта button[type=submit]:hover,
button.primary:hover, .btn.primary:hover {
  filter: brightness(1.06);
}
/* Тихая кнопка — без рамки: вторичные действия рядом с главной. */
/* Тихая кнопка. В карточке формы главной заливается любая кнопка отправки,
   и «тихий» второй вариант выходил такой же заливкой — на экране две
   одинаково главные кнопки с противоположным смыслом («Комплект закрыт
   целиком» и «Это часть комплекта»). Здесь тихая перебивает это правило. */
button.ghost, .card2 button.ghost, form.upload button.ghost {
  background: transparent; border-color: transparent; color: var(--fg-soft); font-weight: 500;
}
button.ghost:hover, .card2 button.ghost:hover, form.upload button.ghost:hover {
  background: var(--panel-2); border-color: var(--line); filter: none;
}

/* 21.09. Следующий шаг карточки — контуром акцента, а не заливкой.
   Заливка на экране одна: главное действие страницы. А у каждой карточки
   задачи и у срочной строки «что встало» есть свой следующий шаг, и залитыми
   их на главной набиралось пять: глаз не находил, с чего начать. Контур
   говорит «вот куда нажать в этой карточке» и не спорит с главной кнопкой. */
button.контур, .btn.контур, .card2 button.контур[type=submit] {
  background: var(--panel); border-color: var(--accent); color: var(--accent); font-weight: 600;
}
button.контур:hover, .btn.контур:hover, .card2 button.контур[type=submit]:hover {
  background: var(--accent-soft); filter: none;
}
/* Кнопка формы загрузки рядом с залитой «Загрузить документ» в шапке — тоже
   рамкой (аудит 23.09, «может подождать», пункт 2): общее «отправка формы
   загрузки — залита» сильнее класса, поэтому правило своё. */
form.upload button.контур[type=submit] { background: var(--panel); border-color: var(--accent); color: var(--accent); font-weight: 600; }
form.upload button.контур[type=submit]:hover { background: var(--accent-soft); filter: none; }
/* Вторая отправка в карточке формы — рамкой. В карточке заливается любая
   отправка, и две формы на экране (профиль и почта) давали две главные. */
.card2 button.quiet[type=submit], form.upload button.quiet[type=submit] {
  background: var(--panel); border-color: var(--line-strong); color: var(--fg);
}
.card2 button.quiet[type=submit]:hover, form.upload button.quiet[type=submit]:hover {
  background: var(--panel-2); filter: none;
}

button.danger, .card2 button.danger {
  background: var(--panel);
  border-color: var(--danger);
  color: var(--danger);
}
button.danger:hover { background: var(--danger-soft); }

/* Чат. Рисует его готовый компонент, поэтому здесь остались только рамка,
   в которую он вставлен, и инструменты вокруг него. */
.chat-tool { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); padding: var(--s2) var(--s3); }
.chat-tool { padding: 0; }
.chat-tool summary { cursor: pointer; color: var(--muted); font-size: 15px; min-height: 38px; display: flex; align-items: center; padding: 0 12px; }
.chat-tool[open] { padding-bottom: var(--s3); }
.chat-tool[open] form { padding: 0 12px; }
.chat-tool form { margin-top: var(--s3); min-width: 260px; }
.chat-tool .field { display: block; margin-bottom: var(--s3); }
.chat-tool .field label { display: block; margin-bottom: 4px; font-size: 14px; color: var(--muted); }
.chat-actions { display: contents; }
.chat-actions button { min-height: 40px; font-size: 16px; }
.chat-frame { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--panel); }

/* Окно «новая тема» — своё, а не браузерное: в приложении на телефоне
   окно браузера блокируется молча, и человек решает, что кнопка сломана. */

/* «Это КП — в сравнение» на странице разбора: выбор запроса цен не шире экрана. */
.в-сравнение select { max-width: 100%; }

/* Ввод оплаты одной строкой (Д-1, Д-2): поступление на балансе, оплата счёта
   в списке документов. На телефоне поля встают по два, кнопка — во всю ширину. */
form.оплата { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; margin: 0 0 var(--s3); }
form.оплата input, form.оплата select { width: auto; min-width: 0; flex: 1 1 120px; }
form.оплата input[type=date] { flex: 0 1 160px; }
form.оплата select { flex: 2 1 240px; }
form.оплата.в-строке { margin: 0; flex-wrap: nowrap; }
form.оплата.в-строке input { flex: 0 1 110px; }
form.оплата.в-строке input[type=date] { flex: 0 1 140px; }
@media (max-width: 720px) {
  form.оплата input, form.оплата input[type=date] { flex: 1 1 40%; }
  form.оплата select, form.оплата button { flex: 1 1 100%; }
  form.оплата.в-строке { flex-wrap: wrap; width: 100%; min-width: 0; }
  form.оплата.в-строке input, form.оплата.в-строке input[type=date] { flex: 1 1 100%; }
}
/* ── Телефон: сайт становится приложением ──────────────────────
   С главного экрана человек ждёт не «сайт без адресной строки», а
   приложение: разделы внизу большими кнопками, шапка узкая, ничего
   лишнего. На компьютере всё остаётся как было — там верхние вкладки
   удобнее и привычнее. */
.таббар { display: none; }
/* АОСР: записи журнала для сборки — группами по системам, шаблон системы —
   отдельной карточкой. Поля акта — двенадцатидольная сетка, как в карточке:
   номер, дата, система и состояние в одном ряду, тексты пунктов во всю ширину. */
.аоср-группа { margin: 0 0 var(--s3); padding: var(--s2) var(--s3); border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.аоср-система { font-weight: 600; font-size: 15px; color: var(--fg-soft); margin: 0 0 4px; }
.аоср-группа label.check { margin-top: 6px; }
.аоср-шаблон { margin: 0 0 var(--s4); padding: var(--s3); border: 1px solid var(--line); border-radius: var(--radius); }
.аоср-шаблон h3 { margin: 0 0 var(--s2); font-size: 16px; }
.аоср-форма textarea { width: 100%; resize: vertical; }

/* «.лист» — нижняя шторка телефона. Рамка бланка (КС-2, КС-6а, предпросмотр
   ИД) звалась тем же словом и на компьютере пропадала целиком: страница
   предпросмотра показывала заголовок и ничего под ним, и людям оставалось
   только скачать PDF. Теперь рамка — «.бланк-рамка», имена не пересекаются. */
.лист { display: none; }
@media (max-width: 1023px) {
  /* Внизу четыре кнопки: сегодня, поиск, чат, меню. Пальцем туда
     дотягиваться, а не тянуться к верхнему краю телефона. */
  main { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }

  .таббар {
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 9993;
    background: var(--panel); border-top: 1px solid var(--line);
    /* Снизу запас больше, чем кажется нужным: у телефонов с закруглёнными
       углами и полоской «домой» край экрана съедает кнопки. По бокам —
       то же самое, поэтому крайние вкладки отодвинуты от края. */
    padding: 4px max(8px, env(safe-area-inset-left)) calc(6px + env(safe-area-inset-bottom))
             max(8px, env(safe-area-inset-right));
    transition: transform .18s ease;
  }
  /* Открылась клавиатура — панель уезжает: иначе она сидит поверх поля
     и половина кнопок оказывается под клавиатурой. */
  body.клавиатура .таббар { transform: translateY(120%); }
  body.клавиатура #ai-btn { opacity: 0; pointer-events: none; }
  .тб {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    min-height: 56px; padding: 4px 0; font-size: 16px; font-weight: 500; line-height: 1.2;
    color: var(--muted); text-decoration: none; background: none; border: 0;
    position: relative; cursor: pointer; font-family: inherit;
  }
  .тб:hover { text-decoration: none; color: var(--fg); }
  .тб[aria-current="page"] { color: var(--accent); font-weight: 600; }
  .тб svg { display: block; }
  .тб-счёт {
    position: absolute; top: 2px; right: 24%;
    min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
    background: var(--danger); color: #fff; font-size: 14px; font-weight: 700;
    line-height: 18px; text-align: center; display: none;
  }
  .тб-счёт.есть { display: block; }

  /* Ксения — выше нижней панели, чтобы не спорить с ней за угол. */
  #ai-btn { bottom: calc(80px + env(safe-area-inset-bottom)); width: 48px; height: 48px; }
  #ai-panel { bottom: calc(136px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) { .лист-в { animation: none; } }

/* «На главный экран» — узкая полоска снизу, а не окно во весь экран:
   человек пришёл работать, а не устанавливать приложение. */
#наглавный { position: fixed; left: 8px; right: 8px; bottom: 8px; z-index: 9998; }
#наглавный .нг-в {
  display: grid; grid-template-columns: 44px 1fr; gap: 10px 12px;
  padding: 12px 14px 12px 12px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}
#наглавный .нг-з {
  width: 44px; height: 44px; border-radius: var(--radius-lg);
  background: #0E141B url(/icon.png) center/contain no-repeat;
  border: 1px solid var(--line);
}
#наглавный .нг-т b { display: block; font-size: 16px; }
#наглавный .нг-т span { display: block; margin-top: 3px; font-size: 15px; color: var(--muted); line-height: 1.45; }
#наглавный .нг-к { grid-column: 2; display: flex; gap: 8px; justify-content: flex-end; }
#наглавный .нг-к button { padding: 9px 14px; border-radius: var(--radius-lg); border: 0; background: var(--accent); color: var(--accent-fg); font-weight: 600; }
#наглавный .нг-к button.ghost { background: transparent; color: var(--muted); border: 1px solid var(--line); font-weight: 400; }
@media (min-width: 560px) { #наглавный { left: auto; right: 12px; width: 380px; } }

/* Окна чата — в src/stil/chat.js. */
/* Ход расчёта — крупно и сверху. Просчёт сметы идёт минуты, и серая строчка
   «Считается: 1» неотличима от повисшей страницы: человек не знает, ждать ему
   или перезагружать. */
.работа { border: 1px solid var(--accent); border-radius: var(--radius-lg); padding: 14px 16px;
  margin: 0 0 var(--s3); background: var(--accent-soft); }
.работа.готово { border-color: var(--accent); background: transparent; }
.работа-строка { display: flex; align-items: center; gap: 12px; }
.работа-текст { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.работа-текст b { font-size: 16px; }
.работа-текст span { color: var(--muted); font-size: 15px; }
.работа-время { color: var(--muted); font-size: 15px; white-space: nowrap; }
.работа .hint { margin: 10px 0 0; }
.работа .галка { color: var(--accent); font-size: 20px; line-height: 1; }
.крутится { width: 18px; height: 18px; flex: 0 0 auto; border-radius: 50%;
  border: 2px solid var(--line); border-top-color: var(--accent); animation: кручение 1s linear infinite; }
@keyframes кручение { to { transform: rotate(360deg); } }
.работа-полоса { height: 3px; margin-top: 12px; border-radius: var(--radius-xs); background: var(--line); overflow: hidden; }
.работа-полоса i { display: block; height: 100%; width: 35%; border-radius: var(--radius-xs);
  background: var(--accent); animation: бегунок 1.6s ease-in-out infinite; }
@keyframes бегунок { 0% { margin-left: -35%; } 100% { margin-left: 100%; } }
@media (prefers-reduced-motion: reduce) {
  .крутится, .работа-полоса i { animation: none; }
}

/* Книга ОЖР: журнал таблицей, как в Excel. Строитель живёт в таблицах, и
   анкета на двенадцать полей вместо строки — это переучивание на пустом месте. */
/* Книга ОЖР ездит вбок внутри своей рамки — и говорит об этом тем же
   способом, что остальные таблицы: тень у края, гаснущая, когда доехали. */
.ож-обёртка {
  overflow-x: auto; overscroll-behavior-x: contain;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background-image:
    linear-gradient(to right, var(--panel) 40%, rgba(0, 0, 0, 0)),
    linear-gradient(to left, var(--panel) 40%, rgba(0, 0, 0, 0)),
    radial-gradient(farthest-side at 0 50%, rgba(15, 32, 51, .16), rgba(0, 0, 0, 0)),
    radial-gradient(farthest-side at 100% 50%, rgba(15, 32, 51, .16), rgba(0, 0, 0, 0));
  background-repeat: no-repeat;
  background-size: 44px 100%, 44px 100%, 16px 100%, 16px 100%;
  background-position: left center, right center, left center, right center;
  background-attachment: local, local, scroll, scroll;
}
.ож-книга { border-collapse: collapse; width: max-content; min-width: 100%; font-size: 15px; }
.ож-книга th { position: sticky; top: 0; background: var(--panel-2); color: var(--muted);
  font-weight: 500; text-align: left; padding: 8px 6px; white-space: nowrap; border-bottom: 1px solid var(--line); }
.ож-книга td { padding: 0; border-bottom: 1px solid var(--line); }
.ож-книга td.ож-п select { width: 240px; text-overflow: ellipsis; }
/* День без работ: строка приглушена, «что делали» читается сразу, без прокрутки к графе «Не работали». */
.ож-книга tr.простой td { background: var(--warn-soft); }
.ож-книга tr.простой td:first-child { box-shadow: inset 3px 0 0 var(--warn); }
.ож-книга tr.простой input[name=works] { color: var(--muted); font-style: italic; }
.ож-книга tr.простой input::placeholder { color: transparent; } /* «8 ч», «м3» в день без работ — не подсказка, а путаница */
/* Книга пишется сама: строка мигает зелёным, когда записалась; красная полоса — не принята. */
.ож-книга tr.сохранено td { background: var(--ok-soft); transition: background .2s; }
.ож-книга tr.пишется td { opacity: .7; }
.ож-книга tr.не-сохранено td:first-child { box-shadow: inset 3px 0 0 var(--danger); }
#ож-статус.плохо { color: var(--danger); }
/* Табель: месяц по дням, первая колонка не уезжает при прокрутке, выходные подкрашены. */
.таб-обёртка { overflow-x: auto; }
.табель { border-collapse: collapse; font-size: 14px; width: max-content; min-width: 100%; }
.табель th, .табель td { padding: 5px 4px; text-align: center; border-bottom: 1px solid var(--line); white-space: nowrap; min-width: 26px; }
.табель th { color: var(--muted); font-weight: 500; font-size: 14px; }
.табель .таб-кто { text-align: left; position: sticky; left: 0; background: var(--panel); min-width: 160px; padding-left: 10px; box-shadow: inset -1px 0 0 var(--line); }
.табель thead .таб-кто { background: var(--panel-2); }
.табель .num { text-align: right; padding-right: 10px; }
.табель .таб-вых { background: var(--warn-soft); }
.табель tfoot td { font-weight: 600; border-top: 1px solid var(--line-strong); }
.таб-месяц { min-width: 11ch; text-align: center; display: inline-block; }
/* Подбор позиции сметы: окошко с поиском, разделами и списком вместо списка на пятьсот строк. */
#ож-подбор { position: absolute; z-index: 60; background: var(--panel); border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; overflow: hidden; }
#ож-подбор[hidden] { display: none; }
#ож-подбор .ож-подбор-верх { display: flex; gap: 6px; padding: 8px; border-bottom: 1px solid var(--line); flex-shrink: 0; }
#ож-подбор .ож-подбор-верх input { flex: 1; min-width: 0; font-size: 16px; }
#ож-подбор .ож-закрыть { width: 36px; padding: 0; font-size: 20px; line-height: 1; color: var(--muted); background: transparent; border-color: transparent; }
#ож-подбор .ож-разделы { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px; border-bottom: 1px solid var(--line); max-height: 96px; overflow: auto; flex-shrink: 0; }
#ож-подбор .ож-чип { min-height: 26px; height: auto; padding: 2px 10px; font-size: 14px; font-weight: 400; border-radius: 999px;
  border: 1px solid var(--line); background: transparent; color: var(--fg-soft); }
#ож-подбор .ож-чип.актив { background: var(--accent-soft, rgba(37,99,235,.12)); border-color: var(--accent); color: var(--accent); }
#ож-подбор .ож-список { overflow: auto; max-height: 46vh; padding: 4px 0; flex: 1 1 auto; min-height: 0; }
#ож-подбор .ож-раздел { color: var(--muted); font-size: 14px; letter-spacing: .04em; text-transform: uppercase; padding: 10px 12px 4px; }
#ож-подбор .ож-ещё, #ож-подбор .ож-похоже { text-transform: none; letter-spacing: 0; font-size: 14px; }
#ож-подбор .ож-похоже { color: var(--accent); }
#ож-подбор .ож-поз { display: block; width: 100%; text-align: left; border: 0; border-radius: 0; background: transparent;
  min-height: 0; height: auto; padding: 7px 12px; font-size: 15px; font-weight: 400; line-height: 1.3; color: var(--fg); }
#ож-подбор .ож-поз b { font-weight: 600; margin-right: 4px; }
#ож-подбор .ож-поз:hover, #ож-подбор .ож-поз.актив { background: var(--panel-2); }
#ож-подбор .ож-поз.выбран { box-shadow: inset 3px 0 0 var(--accent); }
@media (max-width: 720px) {
  /* На телефоне — лист снизу, поверх нижних вкладок: пока выбирают позицию, вкладки не нужны. */
  #ож-подбор { position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: auto; max-height: 82vh; z-index: 9996;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0; padding-bottom: env(safe-area-inset-bottom); }
  #ож-подбор .ож-список { max-height: none; flex: 1; }
  #ож-подбор .ож-поз { padding: 10px 14px; font-size: 16px; }
}
.ож-книга td.ож-у input { width: 70px; }
/* П-1: строка без числа — янтарная, графа имени шире, узкие графы уже. */
.ож-книга tr.сп-вопрос td { background: var(--warn-soft); }
.ож-книга tr.сп-вопрос td:first-child { box-shadow: inset 3px 0 0 var(--warn); }
.ож-книга td.сп-имя input { width: 360px; }
.ож-книга td.сп-узко input { width: 56px; }
.сп-выходы { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; margin: 0 0 var(--s2); }
.сп-выходы form.inline { display: inline-flex; gap: var(--s2); align-items: center; margin: 0; }
.сп-выходы select { width: auto; max-width: 280px; }
.note.ok { border-left-color: var(--ok); background: var(--ok-soft); }
.ож-книга input, .ож-книга select { border: 0; border-radius: 0; background: transparent;
  min-height: 34px; height: 34px; padding: 0 6px; width: 130px; font-size: 15px; color: var(--fg); }
.ож-книга td.ож-ш input { width: 220px; }
.ож-книга input:focus, .ож-книга select:focus { outline: 2px solid var(--accent); outline-offset: -2px; background: var(--panel); }
.ож-книга tr:hover td { background: var(--panel-2); }
.ож-книга td.act { padding: 0 8px; white-space: nowrap; }
/* 21.09. Книга ОЖР шириной 2 350 px на экране 1 078: при прокрутке вбок
   дата уезжала, и строка теряла имя. Первая графа стоит на месте, как во
   всех таблицах системы. Фон у неё непрозрачный: полупрозрачные фоны
   состояний кладутся поверх фона панели, иначе под графой проступает то,
   что уехало. Узкие графы ужаты по содержимому, чтобы основные восемь —
   от даты до исполнителей — помещались на 1 440 без прокрутки. */
.ож-книга th:first-child, .ож-книга td:first-child {
  position: sticky; left: 0; z-index: 2; background: var(--panel);
  box-shadow: inset -1px 0 0 var(--line);
}
.ож-книга thead th:first-child { z-index: 3; background: var(--panel-2); }
.ож-книга tr:hover td:first-child { background: linear-gradient(var(--panel-2), var(--panel-2)), var(--panel); }
.ож-книга tr.простой td:first-child { background: linear-gradient(var(--warn-soft), var(--warn-soft)), var(--panel);
  box-shadow: inset 3px 0 0 var(--warn), inset -1px 0 0 var(--line); }
.ож-книга tr.сп-вопрос td:first-child { background: linear-gradient(var(--warn-soft), var(--warn-soft)), var(--panel);
  box-shadow: inset 3px 0 0 var(--warn), inset -1px 0 0 var(--line); }
.ож-книга tr.сохранено td:first-child { background: linear-gradient(var(--ok-soft), var(--ok-soft)), var(--panel); }
.ож-книга tr.свежая td:first-child { background: linear-gradient(var(--ok-soft), var(--ok-soft)), var(--panel);
  box-shadow: inset 3px 0 0 var(--ok), inset -1px 0 0 var(--line); }
.ож-книга tr.не-сохранено td:first-child { box-shadow: inset 3px 0 0 var(--danger), inset -1px 0 0 var(--line); }
.ож-книга input[name=date] { width: 108px; }
.ож-книга input[name=volume_num] { width: 80px; }
.ож-книга td.ож-ш input[name=crew] { width: 180px; } /* сильнее общего правила широких граф (220), иначе графа уходила за край */
.ож-книга td.ож-место { min-width: 160px; }
.ож-книга td.ож-место .ож-план { max-width: 150px; }
.ож-книга td.ож-п select { width: 200px; }
/* Кнопка «Ещё поля» живёт только в карточке на телефоне. */
.ож-книга .ож-ещё-ячейка { display: none; }
.ож-книга .ож-ещё { background: transparent; border: 0; padding: 0; min-height: 36px;
  color: var(--accent); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
/* 21.09. Книга ОЖР на телефоне — карточками. Шестнадцать граф в строке
   таскались вбок, и прораб видел только дату и место: что записал, сколько
   и на какую позицию — за краем. Здесь строка — карточка: что делали —
   заголовком, дата и позиция, объём с единицей и сменой в одну строку, место
   и бригада; семь редких граф — по «Ещё поля». Поля те же и правятся так
   же, сохранение то же: меняется раскладка, а не форма. */
@media (max-width: 720px) {
  .ож-обёртка:has(> #ож-строки) { overflow: visible; border: 0; border-radius: 0; background: none; }
  #ож-строки, #ож-строки tbody { display: block; width: 100%; min-width: 0; }
  #ож-строки thead { display: none; }
  #ож-строки tr {
    display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: var(--s2); row-gap: 6px;
    margin: 0 0 var(--s2); padding: var(--s2) var(--s3) var(--s1);
    border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel);
  }
  #ож-строки td {
    display: flex; flex-direction: column; grid-column: 1 / -1; min-width: 0;
    padding: 0; border: 0; position: static; box-shadow: none; background: none; height: auto;
  }
  #ож-строки td::before { content: attr(data-метка); font-size: 14px; line-height: 1.2; color: var(--muted); }
  #ож-строки td.ож-что { order: -3; }
  #ож-строки td.ож-что::before { display: none; }
  #ож-строки td.ож-д { order: -2; grid-column: span 2; }
  #ож-строки td.ож-п { order: -2; grid-column: span 4; }
  #ож-строки td.ож-об, #ож-строки td.ож-ед, #ож-строки td.ож-смена { order: -1; grid-column: span 2; }
  #ож-строки input, #ож-строки select {
    width: 100%; min-height: 40px; height: 40px; padding: 0 2px;
    border-bottom: 1px solid var(--line); font-size: 16px;
  }
  #ож-строки td.ож-что input { font-size: 16px; font-weight: 600; border-bottom-color: transparent; }
  #ож-строки td.ож-место .ож-план { max-width: none; padding: 2px 2px 0; }
  #ож-строки tr:not(.развёрнута) td.ож-доп { display: none; }
  #ож-строки tr.простой td.ож-простой { display: flex; }
  #ож-строки td.ож-ещё-ячейка, #ож-строки td.act { flex-direction: row; align-items: center; grid-column: span 3; }
  #ож-строки td.act { justify-content: flex-end; }
  #ож-строки td.ож-ещё-ячейка::before, #ож-строки td.act::before { display: none; }
  #ож-строки tr:hover td { background: none; }
  #ож-строки tr.простой { background: linear-gradient(var(--warn-soft), var(--warn-soft)), var(--panel); box-shadow: inset 3px 0 0 var(--warn); }
  #ож-строки tr.свежая, #ож-строки tr.сохранено { background: linear-gradient(var(--ok-soft), var(--ok-soft)), var(--panel); }
  #ож-строки tr.свежая { box-shadow: inset 3px 0 0 var(--ok); }
  #ож-строки tr.не-сохранено { box-shadow: inset 3px 0 0 var(--danger); }
}
.ож-книга .ож-убрать { background: transparent; border: 0; color: var(--muted); font-size: 14px;
  min-height: 34px; padding: 0 6px; cursor: pointer; }
.ож-книга .ож-убрать:hover { color: var(--danger); }
/* Книги разделов ОЖР по форме: графы бланка, у широких — место под фразу. */
.сегменты.ож-разделы { margin: var(--s3) 0 var(--s2); flex-wrap: wrap; }
.сегменты.ож-системы { margin: 0 0 var(--s3); }
.ож-форма td.ож-дата input { width: 110px; }
.ож-форма td.ож-обычная input { width: 220px; }
.ож-форма td.ож-широкая input { width: 340px; }
.ож-форма td.ож-широкая textarea { width: 340px; border: 0; background: transparent; font: inherit; padding: 6px 8px; resize: vertical; }
.ож-форма td.кж-номер { padding: 0 8px; color: var(--muted); }
.ож-титул textarea { width: 100%; }
.кж-книга th { text-align: center; }
.кж-книга td input { width: 120px; }
.кж-книга td input.кж-группа { width: 150px; color: var(--muted); }
.кж-книга td.кж-текст input { width: 170px; }
.кж-книга td.кж-число input { width: 80px; text-align: right; }
.кж-книга td.кж-число { text-align: right; }
.кж-книга tr.кж-заголовок td { padding: 8px 8px 4px; font-weight: 600; background: var(--panel-2); }
.кж-книга tr.кж-итого td { padding: 4px 8px; color: var(--muted); font-size: 15px; border-bottom: 2px solid var(--line); }
.ожр-фраза textarea { width: 100%; min-height: 84px; font-size: 16px; }
.ожр-фраза .field { display: block; }
.ожр-фраза .field label { display: block; margin-bottom: 6px; }
.ожр-фраза select { width: 100%; max-width: 420px; }

.ч-уч { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 0; font-size: 14px; }
a.ч-уч { color: var(--fg); text-decoration: none; padding: 8px 6px; border-radius: var(--radius); }
a.ч-уч::after { content: '→'; color: var(--muted); }
a.ч-уч:hover { background: var(--panel-2); color: var(--accent); }
.ч-убрать { min-height: 32px; padding: 0 10px; font-size: 12px; background: transparent; color: var(--muted); border-color: var(--line); }
.ч-убрать:hover { color: var(--danger); border-color: var(--danger); }
.ч-снести { width: 100%; }
.ч-окно-к { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }
.ч-окно-к button { min-height: 42px; }

form.search {
  display: flex;
  gap: var(--s2);
  margin: 0 0 var(--s4);
  flex-wrap: wrap;
  align-items: center;
}
form.search input[type=search], form.search select { max-width: 420px; }

form.upload {
  display: flex;
  gap: var(--s3);
  align-items: center;
  flex-wrap: wrap;
  max-width: none;
}
form.upload span { color: var(--muted); font-size: 15px; flex: 1 1 320px; line-height: 1.45; }
form.upload input[type=text] { min-width: 240px; width: auto; }

/* Маленькая форма в строке — выпадающий список и кнопка рядом.
   Была inline-block, а поле внутри — width: 100%. Проценты при расчёте
   ширины inline-block не считаются, поэтому коробка формы получалась по
   ширине одного списка, кнопка вылезала за её край, и следующая форма
   ложилась поверх неё. На «Доступе» это значило, что кнопка «Сменить роль»
   стояла ровно под «Ссылка на пароль»: роль меняли в списке, нажимали —
   и ничего не сохранялось, потому что нажималась чужая кнопка. Теперь
   форма — flex-строка, а поля в ней по содержимому. */
form.inline { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle;
  margin: 0 var(--s1) var(--s1) 0; }
form.inline button { min-height: 34px; padding: 0 12px; font-size: 15px; }
/* Пробное письмо: адрес и кнопка в строку, на телефоне — друг под другом. */
form.inline.пробное { flex-wrap: wrap; max-width: 100%; }
form.inline.пробное input { width: min(300px, 100%); min-height: 34px; }
form.inline select, form.inline input[type=text], form.inline input[type=number],
form.inline input[type=search], form.inline input[type=date] { width: auto; }
/* В графе действий просветы держат поля самих кнопок — иначе к ним
   прибавится ещё и зазор формы, и ряд разъедется. */
td.act form.inline, td.act-wrap form.inline { margin: 0; gap: 0; }

/* Телефон, особенно приложение с главного экрана (снимок владельца 24.09:
   «некоторые поля можно двигать, пол-экрана сдвигается»).
   1. Поле со шрифтом мельче 16 пикселей айфон при нажатии увеличивает — и
      увеличенную страницу потом таскают вбок. Поэтому на телефоне любое
      поле, список и область ввода — не меньше 16.
   2. Страховка: полотно не шире экрана. Широкое внутри (бланк, таблица)
      ездит в своей рамке, а если что-то выпрет — обрежется, а не потащит
      за собой страницу с нижней панелью. clip, а не hidden: прилипающие
      шапки таблиц и строка «Рядом» продолжают работать. */
@media (max-width: 1023px) {
  input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea { font-size: 16px !important; }
  html, body, .каркас, .полотно { overflow-x: clip; }
  body { overscroll-behavior-x: none; }
  /* Подпись числа в полосе переносится: «экономия: не выбрана система
     налогообложения» одной строкой выпирала за край. */
  .сост-число { max-width: 100%; }
  .сост-число span { white-space: normal; }
  /* Отбор сегментами едет вбок в своей полосе — правый край растворяется,
     чтобы было видно, что дальше есть ещё. */
  .сегменты { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent); }
}

/* --- Вкладки документов ------------------------------------------------ */

.tabs {
  display: flex;
  gap: var(--s2);
  margin: 0 0 var(--s4);
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.tabs::-webkit-scrollbar { display: none; }
.tabs a {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--fg-soft);
  text-decoration: none;
  font-size: 16px;
  white-space: nowrap;
}
.tabs a:hover { text-decoration: none; border-color: var(--line-strong); color: var(--fg); }
.tabs a[aria-current="page"], .tabs a.on {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}

/* Неподписанное допсоглашение помечено точкой на вкладке: его сумма в
   сметную базу объекта не входит, и это видно до того, как человек сравнит
   освоение с планом. Цвет — тот же, которым везде помечено «требует вас». */
.tabs a.черновик { border-style: dashed; }
.tabs a .точка {
  width: 7px;
  height: 7px;
  margin-left: 8px;
  border-radius: 999px;
  background: var(--warn);
  flex: 0 0 auto;
}

/* Строка состояния документа: подписан ли, с какого числа, и одна кнопка.
   Стоит между вкладками и таблицей позиций — на пути взгляда к суммам. */
.дс-состояние {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  flex-wrap: wrap;
  margin: 0 0 var(--s4);
  padding: var(--s3) var(--s4);
  border: 1px solid var(--warn);
  border-radius: var(--radius-lg);
  background: var(--warn-soft);
}
.дс-состояние.ok { border-color: var(--line); background: var(--bg-sunken); }
.дс-состояние b { display: block; font-size: 16px; color: var(--warn); }
.дс-состояние.ok b { color: var(--ok); }
.дс-состояние span { display: block; margin-top: 2px; font-size: 15px; color: var(--fg-soft); }
.дс-состояние form.inline { margin: 0; flex: 0 0 auto; }

/* Вторая строка под значением ячейки: состав комплекта, разбор, пояснение.
   Мельче и тише основного текста, переносится — в отличие от ож-плана, где
   строка одна и обрезается многоточием. */
.под {
  display: block;
  margin-top: 2px;
  font-size: 14px;
  line-height: 1.35;
  color: var(--muted);
}
.под:empty { display: none; }

/* --- Мелочи ------------------------------------------------------------ */

.badge {
  display: inline-flex;
  align-items: center;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
  color: var(--fg-soft);
  background: var(--bg-sunken);
  white-space: nowrap;
}
/* Четыре состояния на весь сайт — и не больше: серый «ничего», синий
   «в работе», зелёный «сделано», янтарный «внимание», красный «беда».
   Глаз находит нужную строку по цвету, не читая слово. */
.badge.work { color: var(--accent); background: var(--accent-soft); }
.badge.ok { color: var(--ok); background: var(--ok-soft); }
.badge.warn { color: var(--warn); background: var(--warn-soft); }
.badge.bad { color: var(--danger); background: var(--danger-soft); }
.badge.new { color: var(--muted); background: var(--bg-sunken); }
/* Точка перед словом: цвет читается раньше слова, а на снимке в отчёт,
   где чипы выцветают до серого, состояние всё равно различимо по точке. */
.badge.work::before, .badge.ok::before, .badge.warn::before,
.badge.bad::before, .badge.new::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; margin-right: 6px; flex: none;
}

/* Шапка страницы: крошки, заголовок, справа — одно главное действие.
   Крошки — координаты одной строкой: «Объекты → объект → Закупки».
   Без них человек не знает, где он, и «возвращается не пойми куда». */
.crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin: 0 0 var(--s2); font-size: 15px; color: var(--muted);
}
.crumbs a, .crumbs b {
  display: inline-block; max-width: 34ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom;
}
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--accent); text-decoration: none; }
.crumbs .sep { opacity: .55; }
.crumbs b { color: var(--fg-soft); font-weight: 500; }

/* Крошки на телефоне — один шаг назад, а не вся цепочка.
   ------------------------------------------------------
   Полная цепочка с длинным названием объекта не помещалась в строку и
   вставала в три, а последний шаг слово в слово повторял заголовок под ним:
   двести пикселей экрана уходило на то, что и так написано дважды.
   Оставляем ближайшего родителя со стрелкой назад — это и есть то, зачем
   крошки на телефоне трогают.
   Названия настоящих объектов в этом блоке не пишем ни в примерах, ни в
   комментариях: STYLE встраивается в каждую страницу, включая витрину, —
   значит любое слово отсюда лежит в исходнике страницы до входа. */
@media (max-width: 820px) {
  .crumbs { flex-wrap: nowrap; gap: 4px; margin-bottom: var(--s2); }
  .crumbs b, .crumbs .sep { display: none; }
  .crumbs a { display: none; }
  .crumbs a:last-of-type {
    display: inline-block; max-width: 100%;
    color: var(--fg-soft); font-size: 15px;
  }
  .crumbs a:last-of-type::before { content: '← '; }
}
.page-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--s4); margin: 0 0 var(--s4);
}
.page-head h1 { margin: 0; }
.page-head .page-actions { display: flex; gap: var(--s2); flex-shrink: 0; padding-top: 2px; }

/* Панель над таблицей — везде одна: поиск слева и тянется, фильтры за ним,
   главная кнопка справа. Человек не ищет кнопку на каждой странице заново. */
.toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2);
  margin: var(--s3) 0;
}
.toolbar input, .toolbar select { width: auto; }
.toolbar select { max-width: 240px; }
.toolbar .grow { flex: 1 1 240px; min-width: 0; width: auto; }
.toolbar .spacer { flex: 1 1 auto; }
.toolbar form { display: contents; }
@media (max-width: 820px) {
  .page-head { flex-direction: column; gap: var(--s2); }
  /* Кнопки у заголовка на телефоне — в ряд по ширине содержимого, а не
     по кнопке на всю строку: две кнопки во всю ширину съедали 110 px
     первого экрана, и поле «Расскажите, как прошёл день» уезжало за сгиб. */
  .page-head .page-actions { width: 100%; flex-wrap: wrap; }
  .page-head .page-actions > * { flex: 0 1 auto; }
  .toolbar .grow { flex-basis: 100%; }
}

/* «Сайт обновился» — узкая полоска сверху, не модальное окно: человек
   посреди ввода, и решать ему. */
#свежесть {
  /* Снизу по центру: сверху она лезла под шапку (на телефоне шапка выше по
     слою и с отступом под часы) и выглядывала из-под неё краем, а на ПК
     ложилась поверх разделов. Внизу на ПК свободно; на телефоне — над
     нижней панелью приложения. */
  position: fixed; bottom: calc(env(safe-area-inset-bottom) + 20px); left: 50%; transform: translateX(-50%);
  z-index: 9997; display: flex; align-items: center; gap: var(--s2); max-width: calc(100vw - 24px);
  padding: 8px 8px 8px 14px; border-radius: 999px;
  background: var(--fg); color: var(--bg); font-size: 15px; box-shadow: var(--shadow);
}
/* Атрибут hidden слабее правила с display: flex — без этой строки полоска
   висела всегда, и на ПК, и на телефоне, независимо от проверки сборки.
   Те же грабли, что у листов ниже. */
#свежесть[hidden] { display: none; }
#свежесть span { white-space: nowrap; }
#свежесть button { min-height: 30px; padding: 0 12px; border-radius: 999px; background: var(--accent); color: var(--accent-fg); border: 0; font-size: 15px; }
#свежесть #свежесть-закрыть { background: none; color: var(--bg); opacity: .7; padding: 0 6px; font-size: 20px; line-height: 1; }
@media (max-width: 820px) { #свежесть { bottom: calc(env(safe-area-inset-bottom) + 76px); } }
#птянуть {
  position: fixed; top: calc(env(safe-area-inset-top) + 64px); left: 50%; transform: translateX(-50%);
  z-index: 9995; padding: 6px 12px; border-radius: 999px; font-size: 14px;
  background: var(--panel); color: var(--fg-soft); border: 1px solid var(--line); box-shadow: var(--shadow);
  opacity: 0; transition: opacity .1s; pointer-events: none;
}

/* Шторка: документ поверх списка. Справа на ПК, во весь экран на телефоне. */
#шторка[hidden] { display: none; }
#шторка { position: fixed; inset: 0; z-index: 9996; display: block; }
.шторка-фон { position: absolute; inset: 0; background: rgba(15, 23, 42, .35); }
.шторка-окно {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(880px, 92vw);
  display: flex; flex-direction: column;
  background: var(--panel); box-shadow: var(--shadow-lg);
  animation: шторка-въезд .18s ease-out;
}
@keyframes шторка-въезд { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.шторка-шапка {
  display: flex; align-items: center; gap: var(--s2);
  min-height: 52px; padding: 0 var(--s2) 0 var(--s4);
  border-bottom: 1px solid var(--line); flex: 0 0 auto;
}
/* Название теперь только здесь — внутри рамы его больше не дублируют,
   поэтому одной строки с многоточием мало: «БСГ В25 (М350) F200 П4 W6»
   обрезалось на телефоне до «БСГ В25 (М3…». Разрешаем две строки. */
.шторка-заголовок { flex: 1 1 auto; min-width: 0; font-weight: 600; font-size: 16px;
  line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; }
.шторка-отдельно, .шторка-крест {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--radius-sm); border: 0; background: none;
  color: var(--fg-soft); font-size: 20px; text-decoration: none; cursor: pointer;
}
.шторка-отдельно:hover, .шторка-крест:hover { background: var(--panel-2); color: var(--fg); text-decoration: none; }
.шторка-рама { flex: 1 1 auto; width: 100%; border: 0; background: var(--panel); }
html.шторка-открыта, html.шторка-открыта body { overflow: hidden; }
@media (max-width: 820px) {
  .шторка-окно { top: env(safe-area-inset-top); left: 0; width: auto; box-shadow: none; border-radius: var(--radius-xl) var(--radius-xl) 0 0; animation: шторка-подъём .2s ease-out; }
  @keyframes шторка-подъём { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
  .шторка-шапка { min-height: 48px; }
}

/* Ответ Ксении под полем «как прошёл день»: там, куда смотрят, а не
   плашкой наверху. Зелёная рамка — записала, обычная — переспросила. */
.ксения-ответ {
  margin: var(--s2) 0 0; padding: var(--s3) var(--s4);
  border: 1px solid var(--line-strong); border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm); background: var(--bg); font-size: 16px; line-height: 1.45;
}
.ксения-ответ.ok { border-left-color: var(--ok); }
.ксения-ответ b { color: var(--accent); font-weight: 600; margin-right: 4px; }
/* Поле ответа на уточнение — в той же рамке, под вопросом; на телефоне
   кнопки переносятся под поле. */
.ожр-ответ { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin-top: var(--s3); }
.ожр-ответ label { font-weight: 600; }
.ожр-ответ input { flex: 1 1 200px; min-width: 0; }
/* Только что записанная строка книги — подсвечена, пока страницу не перечитают. */
.ож-книга tr.свежая td { background: var(--ok-soft); }
.ож-книга tr.свежая td:first-child { box-shadow: inset 3px 0 0 var(--ok); }

/* Пагинация: номера страниц слева, плотность справа. */
.пагинация { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s2) var(--s4); margin: var(--s3) 0; font-size: 15px; color: var(--muted); }
.пагинация a, .пагинация b { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; min-height: 30px; padding: 0 8px; border-radius: var(--radius-sm); }
.пагинация b { background: var(--accent-soft); color: var(--accent); }
.пагинация a:hover { background: var(--panel-2); text-decoration: none; }

/* Таблица карточками на телефоне. Каждая строка — карточка, каждая ячейка —
   строка «подпись: значение»; наименование — заголовком карточки, действия —
   кнопками внизу. Таблица шире экрана не бывает. */
@media (max-width: 820px) {
  .wrap.карточки { overflow: visible; border: 0; background: none; }
  /* В карточках граф нет и прокручивать вбок нечего: закрепление первой
     ячейки только мешало бы — она стала бы липнуть внутри карточки. */
  .wrap.карточки > table th:first-child,
  .wrap.карточки > table td:first-child { position: static; box-shadow: none; background: none; }
  .wrap.карточки table, .wrap.карточки tbody, .wrap.карточки tr, .wrap.карточки td { display: block; width: auto; }
  .wrap.карточки thead { display: none; }
  /* Заголовок группы на телефоне — подписью над своими карточками. */
  .wrap.карточки tbody tr.группа { display: block; margin: var(--s4) 0 var(--s2); padding: 0; border: 0; background: none; }
  .wrap.карточки tbody tr.группа th { display: block; padding: 0; border: 0; background: none; font-size: 15px; color: var(--fg-soft); }
  .wrap.карточки tbody tr {
    display: flex; flex-direction: column;
    margin: 0 0 var(--s2); padding: var(--s3) var(--s3) var(--s2);
    border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel);
  }
  /* Наименование — заголовком карточки, каким бы по счёту столбцом оно ни шло. */
  .wrap.карточки td.name, .wrap.карточки td.name-narrow { order: -1; }
  /* Ячейка со сложным содержимым (объект + статья + позиция) — столбиком,
     подпись сверху: в строку с подписью она не помещается. */
  .wrap.карточки td.stack { display: block; }
  .wrap.карточки td.stack::before { display: block; margin-bottom: 4px; }
  .wrap.карточки td.stack { min-width: 0; }
  .wrap.карточки td.stack .куда { flex-wrap: wrap; }
  .wrap.карточки td.stack .cost-pick { flex: 1 1 100%; }
  .wrap.карточки td.stack .cost-pick select { max-width: none; width: 100%; }
  /* Подпись под количеством в карточке телефона: ширины хватает, узкий столбик не нужен. */
  .wrap.карточки td .зак-подпись { max-width: none; }
  .wrap.карточки tbody tr:hover td { background: none; }
  /* 23.09. Значения стоят по общему левому краю, сразу за подписью.
     Прежде их разводило по краям ячейки (space-between), и край у значения
     получался разный: короткое («шт», «etm.ru», дата) липло к правому краю
     карточки, а длинное («договор 17/03-2026 от 17.03.2026») не влезало и
     начиналось от подписи. Строка за строкой значение прыгало то вправо, то
     к середине — база цен на телефоне читалась как рассыпанная. */
  .wrap.карточки td {
    display: flex; justify-content: flex-start; align-items: baseline; gap: var(--s3);
    padding: 3px 0; border: 0; white-space: normal; text-align: left; min-width: 0; font-size: 16px;
    height: auto;
  }
  .wrap.карточки td .src { font-weight: 400; }
  .wrap.карточки td::before {
    content: attr(data-метка); flex: 0 0 38%; font-size: 14px; color: var(--muted);
  }
  .wrap.карточки td:empty { display: none; }
  .wrap.карточки td.name, .wrap.карточки td.name-narrow { display: block; padding-bottom: 6px; font-weight: 600; font-size: 16px; min-width: 0; }
  .wrap.карточки td.name::before, .wrap.карточки td.name-narrow::before { display: none; }
  .wrap.карточки td.num { font-variant-numeric: tabular-nums; }
  .wrap.карточки td.act, .wrap.карточки td.act-wrap {
    display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 6px;
    padding-top: var(--s2); margin-top: 4px; border-top: 1px solid var(--line);
  }
  .wrap.карточки td.act::before, .wrap.карточки td.act-wrap::before { display: none; }
  .wrap.карточки td.act a, .wrap.карточки td.act-wrap a, .wrap.карточки td.act button, .wrap.карточки td.act-wrap button { margin: 0; }
  .wrap.карточки td.act form { display: contents; }
  /* 21.09. Числа — по два в ряд. Смета из тринадцати позиций была на
     телефоне в 4 400 px: каждая цифра («Кол-во 170», «Материал 612», «Работа
     180») — отдельной строкой во всю ширину. Короткие числовые графы теперь
     встают парами, всё остальное — как было, во всю ширину карточки. */
  .wrap.карточки tbody tr { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--s4); }
  .wrap.карточки td { grid-column: 1 / -1; }
  /* В пару встаёт и единица измерения: «Ед. шт · Кол-во 170» (21.09). */
  .wrap.карточки td.num, .wrap.карточки td[data-метка="Ед."] { grid-column: auto; }
  .wrap.карточки td.num::before, .wrap.карточки td[data-метка="Ед."]::before { flex-basis: auto; }
  /* В паре подпись — над числом (24.09): «Сметная стоимость, руб. 134 640»
     в половину карточки не влезало и выпирало за край экрана, и вся
     страница начинала ездить вбок. */
  .wrap.карточки td.num, .wrap.карточки td[data-метка="Ед."] { flex-direction: column; align-items: flex-start; gap: 0; overflow-wrap: anywhere; }
  /* Число без пары (соседи — не числа) — снова во всю ширину: половинная
     ячейка ставила значение посреди карточки. */
  .wrap.карточки td:not(.num):not([data-метка="Ед."]) + td.num:has(+ td:not(.num)),
  .wrap.карточки td:not(.num):not([data-метка="Ед."]) + td.num:last-child,
  .wrap.карточки td[data-метка="Ед."]:has(+ td:not(.num)) { grid-column: 1 / -1; }
  .wrap.карточки td:not(.num):not([data-метка="Ед."]) + td.num:has(+ td:not(.num))::before,
  .wrap.карточки td:not(.num):not([data-метка="Ед."]) + td.num:last-child::before,
  .wrap.карточки td[data-метка="Ед."]:has(+ td:not(.num))::before { flex-basis: 38%; }
  /* Пара распадается и тогда, когда соседняя графа пуста: пустую ячейку мы
     прячем совсем, и «Ед.» оставалась половинной с пустой половиной справа —
     значение висело посреди карточки. В базе цен так выглядит каждая
     расценка на работу: цены материала у неё нет (23.09). */
  .wrap.карточки td[data-метка="Ед."]:has(+ td:empty) { grid-column: 1 / -1; }
  .wrap.карточки td[data-метка="Ед."]:has(+ td:empty)::before { flex-basis: 38%; }
}

/* Витрина: плитки цветов, ступени лестниц, значки. */
.ui-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--s2); }
.ui-swatch { display: flex; align-items: center; gap: var(--s2); font-size: 14px; }
.ui-swatch i { display: inline-block; width: 28px; height: 28px; border-radius: var(--radius-sm); border: 1px solid var(--line); }
.ui-ряд { display: flex; flex-wrap: wrap; gap: var(--s4); margin: var(--s3) 0 var(--s5); }
.ui-обр { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 14px; color: var(--muted); }
.ui-обр i { display: block; width: 56px; height: 40px; }
.ui-обр code { font-size: 14px; }
.ui-знк { width: 84px; color: var(--fg-soft); }
.ui-лестница { display: grid; gap: 2px; margin: var(--s3) 0 var(--s5); }
.ui-стр {
  display: grid; grid-template-columns: 140px 90px 1fr; gap: var(--s3); align-items: baseline;
  padding: 8px var(--s3); border-radius: var(--radius-sm); background: var(--panel);
  border: 1px solid var(--line); font-size: 15px;
}
.ui-стр b { font-weight: 500; color: var(--fg-soft); font-variant-numeric: tabular-nums; }
.ui-стр span { color: var(--muted); }
@media (max-width: 720px) { .ui-стр { grid-template-columns: 1fr auto; } .ui-стр span { grid-column: 1 / -1; } }

/* Галочка с подписью в одну строку: отдельной колонкой она отрывается
   от текста, и непонятно, к чему относится. */
label.check { display: flex; gap: 8px; align-items: center; margin-top: var(--s3); font-size: 16px; }

/* Предупреждение в потоке страницы: тот же блок, что и обычная заметка,
   но цветом видно, что это не «готово», а «посмотрите». */
.note.warn { border-left-color: var(--warn); background: var(--warn-soft); color: var(--fg); }

/* Лист документа на экране: белая бумага в любой теме и прокрутка вбок
   на узком экране. Высоту не ограничиваем — документ проверяют целиком,
   а не подглядывают в него через окошко. */
@media (max-width: 720px) {
  /* Плитки со счётчиками: по две в ряд вместо одной длинной ленты —
     четыре числа должны читаться без прокрутки. */
  .cards { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--s2); margin-bottom: var(--s3); }
  .card { min-height: 68px; padding: var(--s2) var(--s3); }
  .card b { font-size: 20px; }
  /* Бланк документа шире любого телефона: он ездит вбок внутри рамки,
     а не растягивает страницу. */
  .sheet-wrap { padding: 8px; }
}

.sheet-wrap {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  padding: 16px;
}
.paper { background: #fff; min-width: 900px; }
/* Предпросмотр бланка живёт в рамке: у шаблона печати свой полный CSS,
   и без изоляции он перекрасил бы весь сайт. Ширина — лист А4, высоту
   подставляет скрипт по загрузке, чтобы не было внутренней прокрутки. */
.paper-frame { display: block; width: 210mm; min-width: 210mm; height: 297mm; border: 0; background: #fff; }
/* PDF в рамке: просмотрщик браузера сам листает страницы, высота — под экран. */
.pdf-лист { padding: 0; overflow: hidden; }
.paper-frame.pdf { width: 100%; min-width: 0; height: min(297mm, calc(100vh - 220px)); min-height: 480px; }

/* Вид документов: переключатели слева, живой лист справа. */
.вид-раскладка { display: grid; grid-template-columns: minmax(300px, 420px) minmax(0, 1fr); gap: var(--s4); align-items: start; }
.вид-форма { margin: 0; }
.вид-группа { border: 0; padding: 0; margin: 0 0 var(--s4); min-width: 0; }
.вид-группа legend { font-size: 15px; font-weight: 600; color: var(--fg); padding: 0; margin-bottom: 6px; }
.вид-группа .hint { margin: 6px 0 0; }
.сегменты.вид-выбор { margin: 0; flex-wrap: wrap; }
.сегменты.вид-выбор label { display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; min-height: 34px; cursor: pointer;
  color: var(--fg-soft); font-size: 15px; border-right: 1px solid var(--line); }
.сегменты.вид-выбор label:last-child { border-right: 0; }
.сегменты.вид-выбор label.on, .сегменты.вид-выбор label:has(input:checked) { background: var(--accent-soft); color: var(--fg); font-weight: 600; }
.сегменты.вид-выбор input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.сегменты.вид-выбор label:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: -2px; }
.вид-просмотр { position: sticky; top: var(--s4); min-width: 0; }
.вид-просмотр .toolbar { margin: 0 0 var(--s3); }
@media (max-width: 1023px) {
  .вид-раскладка { grid-template-columns: 1fr; }
  .вид-просмотр { position: static; }
}

.note {
  background: var(--accent-soft);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: var(--s3) var(--s4);
  margin: 0 0 var(--s4);
  line-height: 1.45;
}

.pager {
  display: flex;
  gap: var(--s3);
  align-items: center;
  margin: var(--s4) 0 0;
  flex-wrap: wrap;
  color: var(--fg-soft);
  font-size: 16px;
}
.pager .off { color: var(--muted); }

details.note-form summary,
details.card2 summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 16px;
  min-height: 28px;
  display: flex;
  align-items: center;
  gap: var(--s2);
  list-style: none;
}
details summary::-webkit-details-marker { display: none; }
details.note-form summary::before,
details.card2 summary::before {
  content: "＋";
  font-size: 15px;
  color: var(--muted);
}
details[open].note-form summary::before,
details[open].card2 summary::before { content: "－"; }
details[open].note-form summary,
details[open].card2 summary { color: var(--fg); margin-bottom: var(--s3); font-weight: 500; }

details.note-form { margin-top: var(--s6); }

/* Чек-лист сдачи на странице ИД (Сд-2, 31.10): пункт, состояние и кто
   одной строкой; на телефоне состояние уходит под пункт, без прокрутки. */
ul.сдача { list-style: none; margin: 0 0 var(--s3); padding: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
ul.сдача li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s3); padding: var(--s2) var(--s3); border-top: 1px solid var(--line); }
ul.сдача li:first-child { border-top: 0; }
ul.сдача li > :first-child { flex: 1 1 200px; }
ul.сдача .badge { white-space: normal; }
.warn-text { color: var(--warn); }

/* --- Инструменты страницы ---------------------------------------------- */

/* Инструменты страницы — редкие действия: загрузить книгу, добавить ДС,
   очистить. Тремя полосами во всю ширину подряд они читались как мусор в
   подвале и весили столько же, сколько таблица над ними. Ставим их в ряд:
   свёрнутые занимают одну строку, раскрытый разворачивается на всю ширину —
   формы внутри широкие, и ломать их в треть экрана нельзя. */
.tools {
  margin: var(--s5) 0 var(--s4);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s2);
  align-items: start;
}
.tools details.tool[open] { grid-column: 1 / -1; }
@media (max-width: 720px) { .tools { grid-template-columns: 1fr; } }
/* Опасное — своей полосой под обычными инструментами и на всю ширину: оно не
   одно из дел, а последствие. */
.tools.опасные { grid-template-columns: 1fr; margin-top: var(--s4); }

details.tool {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
details.tool > summary {
  cursor: pointer;
  list-style: none;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: 0 var(--s4);
  font-size: 16px;
  font-weight: 500;
  color: var(--fg-soft);
}
details.tool > summary::-webkit-details-marker { display: none; }
details.tool > summary::before { content: "＋"; color: var(--muted); font-size: 15px; }
details.tool[open] > summary::before { content: "－"; }
details.tool[open] > summary { color: var(--fg); border-bottom: 1px solid var(--line); }
details.tool:hover { border-color: var(--line-strong); }
.tool-body { padding: var(--s4); }
.tool-body > .card2, .tool-body > form.upload {
  border: 0; padding: 0; margin: 0; background: none; max-width: none;
}
.tool-body > .card2 > h1:first-child { display: none; }

details.tool.warn { border-color: var(--warn); background: var(--warn-soft); }
details.tool.warn > summary { color: var(--warn); font-weight: 600; }

/* «Удалить и залить заново» (План_облика_продаж.md) — не карточка
   инструмента, а последствие: ссылка красным, без рамки и фона; тот же
   клик по строке всё равно раскрывает форму под ней. Высота строки —
   прежние 44px: на телефоне по ссылке в одну строку текста пальцем не
   попасть. */
details.tool.danger-link { background: none; border: 0; }
details.tool.danger-link > summary {
  padding: 0; color: var(--danger); font-weight: 500;
  text-decoration: underline; text-underline-offset: 2px;
}
details.tool.danger-link[open] > summary { border-bottom: 0; color: var(--danger); }
/* Значок «＋/－» — у карточек; у ссылки он вставал подчёркнутым вместе с текстом. */
details.tool.danger-link > summary::before { content: none; }
details.tool.danger-link:hover { border-color: transparent; }

/* Две кнопки выбора в строке расхождения: рядом, а не столбиком, и мельче
   обычных — иначе колонка решений шире самих чисел, о которых спор. */
.conflict-act { margin-top: 0; flex-wrap: wrap; justify-content: flex-end; }
/* Поле «сколько на эту позицию» — узкое: в него вписывают штуки и метры,
   а не сочинения. */
input.part { width: 96px; min-width: 0; text-align: right; font-family: var(--mono); }
/* Ответ «сколько её единиц в одной сметной» у строки в чужой единице
   (29.09): узкое поле и кнопка — одним рядом; сам вопрос — в графе
   «Станет», иначе графа действий уводила таблицу за край экрана. */
form.чужая-единица { display: inline-flex; align-items: center; gap: 6px; }
td .чужая-вопрос { display: inline-block; max-width: 11em; white-space: normal; }
/* Имя документа — переносом по словам, а не по буквам. */
td.чужая-док { white-space: normal; min-width: 9em; }
.conflict-act button { min-height: 36px; padding: 0 12px; font-size: 15px; }
.conflict-act button[value="смета"] { border-color: var(--accent); color: var(--accent); }

/* --- Кнопка-призыв и подзаголовок раздела ------------------------------ */
a.cta {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: 0 22px;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--accent-fg);
  font-weight: 600;
  text-decoration: none;
}
a.cta:hover { filter: brightness(1.08); text-decoration: none; }

h2.section { font-size: 15px; color: var(--muted); margin: 0 0 var(--s3); font-weight: 600; }

/* --- Схема движения документа ------------------------------------------ */
/*
   Просчёт: таблица, которую читают, а не только заполняют.

   Раньше страница целиком состояла из полей ввода — пятьдесят четыре строки
   по семь коробок. Читать её было нельзя: глаз спотыкался о рамки, а данные
   тонули. При этом наименование обрезалось на двадцати символах, хотя справа
   от него пустовала половина листа.

   Здесь поле выглядит ячейкой таблицы и обводится только когда в нём стоит
   курсор. Наименованию отдана вся свободная ширина, числа выровнены вправо
   моноширинными цифрами — иначе их не сравнить, — а сумма считается на лету
   и правке не подлежит: это произведение, а не мнение.
*/
.sheet { width: 100%; border-collapse: collapse; table-layout: fixed; }

/* Одиннадцать граф с деньгами не влезают в узкий экран, а ширины у них
   заданы жёстко: остаток достаётся наименованию, и на 1400 точках он
   оказывался нулевым — строка превращалась в столбик букв во весь экран
   по высоте. Поэтому у таблицы есть нижний предел ширины, а на узком
   экране она прокручивается вбок. На широком ничего не меняется: обёртка
   без прокрутки, и шапка по-прежнему липнет к окну. */
.sheet { min-width: 1340px; }
@media (max-width: 1500px) {
  .лист-прокрутка { overflow-x: auto; overscroll-behavior-x: contain; }
}
.sheet th {
  position: sticky; top: 0; z-index: 2;
  background: var(--panel); border-bottom: 1px solid var(--line);
  font-size: 14px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted); font-weight: 500; text-align: left; padding: 8px 6px;
}
.sheet th.n, .sheet td.n { text-align: right; }
.sheet td { border-bottom: 1px solid var(--line); padding: 0; height: 34px; vertical-align: middle; }
.sheet tr:hover td { background: var(--panel-2); }

.sheet input {
  width: 100%; height: 33px; padding: 0 6px; margin: 0;
  border: 1px solid transparent; border-radius: var(--radius-xs);
  background: transparent; color: inherit; font: inherit;
}
.sheet input:focus {
  outline: none; border-color: var(--accent);
  background: var(--bg); position: relative; z-index: 1;
}
.sheet input.n { text-align: right; font-variant-numeric: tabular-nums; }
.sheet .sum { display: block; padding: 0 6px; line-height: 33px; text-align: right;
              font-variant-numeric: tabular-nums; color: var(--muted); }

/* Удаление — действие редкое и необратимое: пусть молчит, пока на него
   не навели. Красный крест в каждой строке спорил за внимание с данными. */
.sheet .kill {
  width: 28px; height: 28px; line-height: 1; padding: 0; margin: 0 4px;
  border: 0; border-radius: var(--radius-xs); background: transparent;
  color: var(--muted); cursor: pointer; opacity: .35;
}
.sheet tr:hover .kill { opacity: 1; }
.sheet .kill:hover { background: var(--bad); color: #fff; }

/* Заголовок раздела внутри ведомости: строкой во всю ширину, как в бумаге,
   а не графой, повторяющейся в каждой строке. Два уровня — раздел и подраздел. */
.sheet tr.grp td { background: var(--panel-2); border-bottom: 1px solid var(--line); }
.sheet tr.grp input {
  font-weight: 600; text-transform: none; color: inherit;
}
.sheet tr.grp1 input { text-transform: uppercase; letter-spacing: .04em; }
.sheet tr.grp2 input { padding-left: 22px; font-weight: 500; color: var(--muted); }
.sheet tr.grp:hover td { background: var(--panel-2); }

.sheet tfoot td { border-top: 2px solid var(--line); border-bottom: 0;
                  padding: 8px 6px; font-weight: 600;
                  font-variant-numeric: tabular-nums; }

/* Панель сохранения не должна уезжать за пятьдесят строк вверх. */
.sheet-bar {
  position: sticky; bottom: 0; z-index: 3;
  display: flex; align-items: center; gap: var(--s3);
  padding: 10px 0; margin-top: 0;
  background: var(--bg); border-top: 1px solid var(--line);
}
.sheet-bar .hint { margin: 0; }

/*
   Коэффициент — отдельный слой поверх цены, и на странице он выглядит именно
   слоем: в графе стоит базовая цена, а под ней мелко — во что она превратилась.
   Прятать множитель внутрь цены нельзя: через неделю никто не вспомнит,
   базовая там цифра или уже с наценкой, и торговаться с заказчиком будет
   не от чего.
*/
.sheet .eff { display: block; padding: 0 6px 3px; text-align: right;
              font-size: 14px; line-height: 1; color: var(--accent);
              font-variant-numeric: tabular-nums; }
/* Пустая подпись не должна раздвигать строки: без наценки строка обязана
   выглядеть ровно так, как выглядела. */
.sheet .eff:empty { display: none; }

/* «Найти цену» стоит рядом с крестиком, в графе действий, и молчит, пока
   на строку не навели. Раньше кнопка жила в графе наименования — а там поле
   во всю ширину, и она вылезала на соседнюю графу. Действиям место среди
   действий: там для них отведено место и там их ищут глазами. */
/* Значки действий: общий стиль кнопок задаёт min-height 44px — размер пальца,
   и для панелей это правильно. В строке таблицы такая кнопка выше самой
   строки: две штуки вставали друг под другом и распирали графу. Здесь
   действия мелкие и мышиные, поэтому размер задаём явно. */
.sheet .act { white-space: nowrap; text-align: right; }
.sheet .act button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; min-height: 28px; padding: 0; margin: 0 2px;
  border: 0; border-radius: var(--radius-xs); background: transparent;
}
.sheet .find {
  width: 28px; height: 28px; line-height: 1; padding: 0; margin: 0;
  border: 0; border-radius: var(--radius-xs); background: transparent;
  color: var(--muted); cursor: pointer; opacity: 0; font-size: 16px;
}
.sheet tr:hover .find, .sheet tr:focus-within .find { opacity: .55; }
.sheet .find:hover { opacity: 1; background: var(--accent-soft); color: var(--accent); }

/* Убранная строка: видно, что её не станет, и видно, что она ещё здесь. */
.sheet tr.убрана td { opacity: .45; text-decoration: line-through; }
.sheet tr.убрана .kill { opacity: 1; color: var(--accent); text-decoration: none; }
.sheet tr.снаценкой td { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.sheet th.pick, .sheet td.pick, .wrap th.pick, .wrap td.pick { text-align: center; padding: 0; }
.sheet .pick input[type=checkbox], .wrap .pick input[type=checkbox] { width: auto; height: auto; margin: 0; }
/* Поле даты в строке заявки: десять граф и так на пределе ширины, а календарю
   хватает и этого — год в нём всё равно четырёхзначный. */
.зак-дата { max-width: 132px; }
/* Что покупаем по строке: поле в ширину графы, сомнительный вывод — янтарём. */
.зак-товар { width: 100%; min-width: 10em; resize: none; field-sizing: content; min-height: 0; }
.зак-товар.warn { box-shadow: inset 0 0 0 1px var(--warn); }
/* Выбор строки заявки: подпись вокруг галочки — нажимная зона около 44
   пикселей; отрицательное поле держит прежнюю вёрстку таблицы. На телефоне
   и сама галочка крупнее (аудит 14.10, № 16). */
.выбор-строки { display: inline-flex; align-items: center; justify-content: center;
  padding: 12px; margin: -12px; cursor: pointer; }
@media (max-width: 820px) {
  .выбор-строки input[type=checkbox], .wrap .выбор-строки input[type=checkbox] { width: 22px; height: 22px; }
}
/* Позиция, от которой отказался заказчик: в смете видна, но бледной
   (совещание 15.10, С1). Кнопка «исключить» — тихая, в строку. */
.позиция-исключена { opacity: .5; text-decoration: line-through; }
form.встроенная { display: inline; margin: 0 0 0 6px; }
form.встроенная button.quiet { padding: 0 4px; min-height: 0; font-size: 13px; }
/* Панель действий над ведомостью. Кнопка «Собрать заявку» стояла под
   таблицей на шестьдесят строк — владелец её не видел вовсе. Место главного
   действия — над таблицей, рядом с тем, что оно делает. */
.зак-панель {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2);
  margin: var(--s3) 0 var(--s2);
}
/* Упрощение снабжения (10.10): одна главная кнопка, остальное — «Другие способы». */
.зак-панель .зак-все { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 15px; color: var(--muted); }
.зак-панель .зак-ещё { position: relative; }
.зак-панель .зак-ещё > summary { list-style: none; cursor: pointer; }
.зак-панель .зак-ещё > summary::-webkit-details-marker { display: none; }
.зак-панель .зак-ещё-список { position: absolute; z-index: 5; top: 100%; left: 0; margin-top: 4px; padding: var(--s2);
  display: flex; flex-direction: column; gap: var(--s1); min-width: 280px; background: var(--card, var(--bg)); border: 1px solid var(--line, currentColor); border-radius: var(--radius-sm); }
.зо-добавить > h2 { margin: var(--s2) 0 var(--s1); font-size: 18px; }
/* Фото и текст — рядом, а не друг под другом: блок вдвое ниже (10.10). */
.зо-добавить .зо-пара { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); align-items: start; }
.зо-добавить .зо-пара > form { margin: 0; }
.зо-листки-заг { margin: var(--s2) 0 var(--s1); font-size: 18px; }
/* Линейка над таблицей: отборы слева, «Добавить заявку» справа; шторка раскрывается на всю ширину и сдвигает таблицу вниз. */
.зак-линейка { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin: var(--s2) 0; }
.зак-линейка > .сегменты { margin: 0; }
.зак-шторка { margin-left: auto; }
/* «Заявки с объекта» — справа, рядом с «Добавить заявку». */
.зак-зо { margin-left: auto; }
.зак-зо + .зак-шторка { margin-left: 0; }
.зак-зо .n { margin-left: 6px; color: var(--muted); font-weight: 600; }
/* «Заявки с объекта» — справа, рядом с «Добавить заявку». */
.зак-зо { margin-left: auto; }
.зак-зо + .зак-шторка { margin-left: 0; }
.зак-шторка > summary { list-style: none; cursor: pointer; }
.зак-шторка > summary::-webkit-details-marker { display: none; }
.зак-шторка[open] { flex: 0 0 100%; }
.зак-шторка[open] > summary { margin-left: auto; display: block; width: max-content; }
.зак-шторка-тело { margin-top: var(--s1); }
.зак-шторка:not([open]) > .зак-шторка-тело { display: none; }
.зак-шторка-тело .зо-добавить > h2 { display: none; }
@media (max-width: 900px) { .зо-добавить .зо-пара { grid-template-columns: 1fr; } }
.зак-панель .зак-панель-хвост { margin-left: auto; display: flex; align-items: center; gap: var(--s2); }
/* «Кому» перед кнопкой сборки: пусто — каждой строке её поставщик, выбран —
   все отмеченные строки одной заявкой ему. Подпись и поле — одной строкой. */
.зак-панель .зак-кому { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 15px; color: var(--muted); }
.зак-панель .зак-кому select { max-width: 320px; height: 36px; min-height: 36px; font-size: 15px; }
.зак-панель .n {
  display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 4px;
  border-radius: 999px; background: var(--accent-soft); color: var(--accent);
  font-size: 15px; text-align: center;
}
@media (max-width: 700px) {
  .зак-панель .зак-панель-хвост { margin-left: 0; }
  .зак-панель .зак-кому { flex-basis: 100%; }
  .зак-панель .зак-кому select { flex: 1 1 auto; max-width: none; }
}
/* Значок поиска цены живёт и в обычной таблице — в заявке на материалы он
   перепроверяет рынок по одной позиции. */
.wrap .find {
  width: 28px; height: 28px; line-height: 1; padding: 0; margin: 0 0 0 4px;
  border: 0; border-radius: var(--radius-xs); background: transparent;
  color: var(--muted); cursor: pointer; opacity: .55; font-size: 16px;
}
.wrap .find:hover { opacity: 1; background: var(--accent-soft); color: var(--accent); }

/* Панель коэффициента стоит под таблицей, а не в шапке: сначала смотрят на
   строки и выделяют нужные, и только потом решают, что с ними сделать. */
.k-bar {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2);
  padding: 10px 12px; margin-top: var(--s3);
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel);
}
.k-bar .k-title { font-weight: 600; margin-right: var(--s2); }
.k-bar input[name=k] { width: 90px; text-align: right; font-variant-numeric: tabular-nums; }
.k-bar select, .k-bar input { height: 34px; }
/* Общий стиль полей растягивает список на всю строку — в панели это ломает
   ряд на лесенку. Здесь списки короткие и стоят в строку с полями. */
.k-bar select { width: auto; min-width: 172px; max-width: 240px; flex: 0 0 auto; }
.k-bar .hint { margin: 0; margin-left: auto; }
.k-bar.итоговый { margin-top: var(--s2); }
.k-bar .доля { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; color: var(--fg-soft); }
.k-bar .доля input { width: 72px; text-align: right; font-variant-numeric: tabular-nums; }
.k-bar .доля .знак { color: var(--muted); font-size: 15px; }

/* Итог сметы — то, ради чего всё и делается. Стоит под таблицей, крупно,
   и пересчитывается на лету: искать эту цифру в другом месте человек
   не должен. */
.итог-сметы {
  margin-top: var(--s3); margin-left: auto; max-width: 520px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel);
  padding: 8px 14px;
}
.итог-сметы .строка {
  display: flex; align-items: baseline; gap: var(--s3);
  padding: 5px 0; border-bottom: 1px solid var(--line);
}
.итог-сметы .строка:last-child { border-bottom: 0; }
.итог-сметы .что { color: var(--fg-soft); font-size: 16px; }
.итог-сметы .сколько {
  margin-left: auto; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.итог-сметы .главная { padding-top: 8px; }
.итог-сметы .неполный .что { color: var(--danger); font-weight: 600; }
.итог-сметы .главная .что { color: var(--fg); font-weight: 600; font-size: 16px; }
.итог-сметы .главная .сколько { font-size: 20px; font-weight: 600; color: var(--accent); }

/* Предпросмотр листа — панель на половину экрана, как перед печатью.
   Таблица остаётся видна слева: правку и её последствие смотрят рядом,
   иначе приходится помнить, что было на другой странице. */
.лист-панель {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 60;
  width: min(50vw, 980px); min-width: 460px;
  display: flex; flex-direction: column;
  background: var(--bg); border-left: 1px solid var(--line-strong);
  box-shadow: var(--shadow-lg);
}
/* Свой display перебивает атрибут hidden — браузер прячет элементы правилом
   [hidden]{display:none}, а класс сильнее его. Без этой строки панель висела
   открытой всегда и не закрывалась: «Закрыть» честно ставил hidden, а он
   ничего не значил. */
.лист-панель[hidden] { display: none; }
.лист-шапка {
  display: flex; align-items: center; gap: var(--s2);
  padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--panel);
}
.лист-шапка .лист-имя { font-weight: 600; margin-right: auto; }
.лист-шапка form { margin: 0; }
.лист-тело { flex: 1; overflow: auto; padding: 16px; background: var(--bg-sunken); }
/* Лист — белая бумага в любой теме: заказчик увидит его именно таким. */
.лист-масштаб { transform-origin: top left; }
#панельЛиста .paper {
  /* Ширина печатного листа, а не панели: заказчик увидит именно её,
     а панель просто показывает лист целиком, ужав его. */
  width: 1080px; background: #fff; color: #111; padding: 18px 20px;
  box-shadow: var(--shadow-md);
}
@media (max-width: 900px) {
  .лист-панель { width: 100vw; min-width: 0; }
}

/* На печать уходит один лист — тот, что открыт в панели. Всё остальное:
   шапка сайта, таблица правки, кнопки самой панели — на бумаге не нужно,
   и лист печатается во всю страницу, без масштабирования под панель. */
@media print {
  body > *:not(#панельЛиста) { display: none !important; }
  #панельЛиста {
    position: static; width: auto; min-width: 0; border: 0; box-shadow: none;
    background: #fff;
  }
  .лист-шапка { display: none !important; }
  .лист-тело { overflow: visible; padding: 0; background: #fff; }
  .лист-масштаб { transform: none !important; height: auto !important; }
  #панельЛиста .paper { width: auto; box-shadow: none; padding: 0; }
  @page { size: A4 landscape; margin: 10mm; }
}

/* Журнал наценок: короткий список того, что уже применили. Без него через
   месяц не объяснить, откуда в просчёте эти проценты. */
.k-log { margin-top: var(--s3); }
.k-log li { padding: 4px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.k-log li:last-child { border-bottom: 0; }
.k-log .when { color: var(--muted); font-size: 15px; margin-left: var(--s2); }

/* Отметить заметку сделанной — прямо в списке: заходить внутрь ради одного
   слова никто не станет, и замечания копились «новыми» месяцами. */
.быстро { display: flex; gap: 6px; margin: 0; }
.быстро button { min-height: 30px; height: 30px; padding: 0 10px; font-size: 15px; }

/* Предложения поставщиков — подписью под наименованием. Цену видно и так,
   а вот на чём она стоит — нет: три предложения от 210 до 265 и три от 210
   до 900 это разная степень доверия к цифре. */
.sheet .offers { display: block; padding: 0 6px 3px; font-size: 14px;
                 line-height: 1; color: var(--muted); }
.sheet .offers.спорно { color: var(--warn); }
.sheet .offers:empty { display: none; }
.sheet .offers[role=button] { cursor: pointer; border-bottom: 1px dotted currentColor; }
.sheet .offers.выбрано { color: var(--accent); }

/* Откуда цена. Своя (база, история, руки сметчика) и найденная в интернете
   различаются не цифрой, а доверием к ней — и это должно быть видно. */
.sheet .origin { display: block; padding: 0 6px 1px; font-size: 14px; line-height: 1.2;
                 color: var(--muted); }
.sheet .origin.своё { color: var(--accent); }
.sheet .origin.нет { color: var(--warn); }
.sheet .origin.далеко { color: var(--warn); white-space: normal; }
/* С пересчётом подпись длиннее графы: переносится, а не режется краем (24.09). */
.sheet .origin.с-пересчётом { white-space: normal; overflow-wrap: anywhere; }

/* Расценка под наименованием: шифр, цена работы по ней и кнопка «взять».
   Графа «Наименование» узкая, а подпись длинная: цена за единицу, субъект,
   квартал и проценты. Одной строкой она обрезалась по краю ячейки, и кнопка,
   стоявшая в конце, уезжала за край: нажать её было нельзя. Поэтому здесь
   перенос по словам и кнопка своей строкой. */
.sheet .расценка { display: block; padding: 2px 6px 3px; font-size: 14px;
                   line-height: 1.3; color: var(--accent);
                   white-space: normal; overflow-wrap: anywhere; }
.sheet .расценка .как-считали { display: block; color: var(--muted); }
.sheet .расценка .взять {
  /* Своей строкой и с неразрывным текстом: рядом с длинной подписью кнопка
     оказывалась в остатке строки шириной в букву: перенос по любому месту,
     нужный длинной подписи, ломает и её. Так она всегда целиком в ячейке. */
  display: block; width: fit-content; max-width: 100%;
  margin-top: 3px; padding: 1px 8px; height: auto;
  min-height: 0; font-size: 14px; line-height: 1.6;
  white-space: nowrap; overflow-wrap: normal;
  border: 1px solid currentColor; border-radius: var(--radius-xs);
  background: transparent; color: var(--accent); cursor: pointer;
}
.sheet .расценка .взять:hover { background: var(--panel-2); }
.sheet .omenu li.из-базы .sup { color: var(--accent); }

/* Меню предложений: список того, что нашли, с ценой, продавцом и ссылкой.
   Нажатие на цену берёт её в просчёт, ссылка ведёт на товар — проверить,
   тот ли это товар вообще. Раньше здесь была подсказка: посмотреть можно,
   сделать нельзя. */
.sheet td { position: relative; }
.omenu {
  position: absolute; z-index: 30; top: calc(100% - 4px); left: 6px;
  min-width: 420px; max-width: 560px; max-height: 320px; overflow-y: auto;
  padding: 8px; border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: var(--panel); box-shadow: var(--shadow-lg);
  white-space: normal;
}
.omenu .ohead { font-size: 14px; color: var(--muted); padding: 2px 4px 6px; }
.omenu .ohead .близнецы { display: block; color: var(--accent, #2b6cb0); margin-top: 2px; }
.omenu ul { list-style: none; margin: 0; padding: 0; }
.omenu li {
  display: flex; align-items: center; gap: var(--s2);
  padding: 3px 4px; border-bottom: 1px solid var(--line); font-size: 15px;
}
.omenu li:last-child { border-bottom: 0; }
/* Подсвечено то предложение, чья цена стоит в графе прямо сейчас: список
   из семнадцати цен иначе не читается — непонятно, какая уже работает. */
.omenu li.сейчас { background: var(--accent-soft); border-radius: var(--radius-xs); }
.omenu li.сейчас .take { border-color: var(--accent); color: var(--accent); font-weight: 600; }
.omenu li.взято .take { border-width: 2px; }
.omenu .метка-сейчас { font-size: 14px; color: var(--accent); white-space: nowrap; }
.omenu .take {
  min-height: 26px; height: 26px; padding: 0 8px; margin: 0;
  border: 1px solid var(--line); border-radius: 999px; background: var(--bg);
  font-variant-numeric: tabular-nums; font-size: 15px; white-space: nowrap;
}
.omenu .take:hover { border-color: var(--accent); color: var(--accent); }
.omenu .sup { flex: 1; color: var(--fg-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.omenu a { font-size: 14px; white-space: nowrap; }
.omenu .метка { font-size: 14px; color: var(--warn); white-space: nowrap; }
.omenu .склад { font-size: 14px; color: var(--muted); line-height: 1.3; }
/* Пересчёт цены или исходная строка со страницы магазина: своей строкой под
   ценой, чтобы продавец и ссылка не сжимались до многоточия (24.09). */
.omenu li.с-пересчётом { flex-wrap: wrap; }
.omenu .пересчёт { flex-basis: 100%; font-size: 14px; color: var(--muted); line-height: 1.3;
                   overflow-wrap: anywhere; }
.omenu .ofoot { padding-top: 6px; }
.omenu .ofoot button { min-height: 28px; height: 28px; padding: 0 10px; font-size: 15px; }

/* Сценарий выбирают до правки руками, поэтому панель стоит над таблицей. */
.scen {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2);
  padding: 10px 12px; margin: var(--s3) 0;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel);
}
.scen .hint { margin: 0; margin-left: auto; }
.k-log ul { list-style: none; margin: 0; padding: 0; }

/* Корзина строк: список того, что убрали, с возвратом на место. */
.bin ul { list-style: none; margin: 0; padding: 0; }
.bin li { display: flex; align-items: center; gap: var(--s2);
          padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 16px; }
.bin li:last-child { border-bottom: 0; }
.bin form { margin: 0; }
.bin .что { font-weight: 500; }
.bin .when { color: var(--muted); font-size: 15px; margin-left: auto; text-align: right; }

/* Подпись, которую видит только читалка экрана: на панели и так понятно, что
   за поля, а вслух их надо называть. */
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden;
      clip-path: inset(50%); white-space: nowrap; }

/*
   Действия страницы — кнопками, а не строкой ссылок.

   Под заголовком объекта стояла строка вида «OBJ-205 · позиций 378 · карточка
   объекта — не заполнена · объёмы · документы · ко всем объектам»: справка
   и действия одним кеглем, одним цветом, вперемешку. Отличить кликабельное
   от несущественного можно было, только вглядевшись, — и мимо проходили.

   Теперь справка отдельно и тихо, действия отдельно и крупно: рамка, высота
   под палец (44 px — минимум, при котором на телефоне не промахиваются),
   и подпись словами, а не намёком. Незаполненная карточка горит янтарным
   прямо на кнопке: это не украшение, это то, из-за чего документы выйдут
   в пометках.
*/
.actions { display: flex; flex-wrap: wrap; gap: var(--s2); margin: var(--s3) 0 var(--s5); }
.act {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 18px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel); color: inherit; text-decoration: none;
  font-size: 16px; font-weight: 500;
}
.act:hover { background: var(--panel-2); border-color: var(--muted); text-decoration: none; }
.act .sub { color: var(--muted); font-weight: 400; font-size: 15px; }
.act.warn { border-color: var(--warn); background: var(--warn-soft); }
.act.warn .sub { color: var(--warn); }
/* Возврат — тоже кнопка, только тише. Пунктиром она читалась
   как отключённая, и на неё не нажимали. */
.act.back { color: var(--muted); }
@media (max-width: 640px) {
  .actions { gap: 8px; }
  .act { flex: 1 1 calc(50% - 8px); justify-content: center; text-align: center; }
  .act.back { flex-basis: 100%; }
}
/* На телефоне журналы объекта — плитки в два столбца: название сверху,
   под ним то, что в разделе лежит («12 записей», «пусто», «простой 3 дня»).
   Одной строкой по центру это читалось сплошной лентой слов, в которой не
   видно, где раздел, а где его состояние. */
@media (max-width: 820px) {
  .actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: var(--s3) 0 var(--s4); }
  .act {
    flex-direction: column; align-items: flex-start; justify-content: center;
    text-align: left; min-height: 64px; padding: 10px 12px; gap: 3px;
    font-size: 16px; line-height: 1.3;
  }
  .act .sub { font-size: 14px; line-height: 1.3; }
  .act.back { grid-column: 1 / -1; min-height: 44px; flex-direction: row; align-items: center; }
}

/* Колонка действий в таблице зовётся тем же словом «act», что и плитки
   разделов, — и стили плиток на неё налезали: ячейка становилась флекс-
   контейнером с рамкой, а на телефоне ещё и колонкой, отчего три кнопки
   вставали столбиком и раздували строку втрое. Ячейка есть ячейка. */
td.act, th.act, td.act-wrap, th.act-wrap {
  display: table-cell;
  flex: none;
  /* Направление сбрасываем тоже: на телефоне плитка .act встаёт колонкой,
     и в карточке строки, где ячейка сама становится флекс-контейнером,
     две кнопки из-за этого вставали друг под другом. */
  flex-direction: row;
  min-height: 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: none;
  font-size: 16px;
  font-weight: 400;
  padding: 10px 12px;
}
tbody tr:last-child td.act, tbody tr:last-child td.act-wrap { border-bottom: 0; }

/* Подвал раздела: настройки и правила работы одной панелью.
   ----------------------------------------------------------
   Под книгой ОЖР стояло пять разнокалиберных элементов подряд: кнопка
   «Добавить строку», серая строка про автосохранение, серая строка про
   Enter и стрелки, форма «Ответственный за журнал» с селектом и кнопкой,
   и ещё серая строка про напоминание в 19:00. Разного кегля, без рамок,
   без порядка — самое неопрятное место на экране.

   Подвал — та же панель, что над таблицей, только внизу и потише:
   действие слева, справка уходит вправо и не спорит с ним за внимание. */
.подвал {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3);
  margin: var(--s3) 0 0; padding: var(--s3) var(--s4);
  background: var(--bg-sunken); border: 1px solid var(--line);
  border-radius: var(--radius); font-size: 15px;
}
.подвал + .подвал { margin-top: var(--s2); }
.подвал .подвал-справка { color: var(--muted); margin-left: auto; text-align: right; }
.подвал label { color: var(--muted); }
.подвал select { width: auto; min-width: 180px; }
@media (max-width: 720px) {
  .подвал { padding: var(--s2) var(--s3); }
  .подвал .подвал-справка { margin-left: 0; width: 100%; text-align: left; }
  .подвал select { width: 100%; }
}

/* Тихая справочная строка: код объекта, счётчики. Не действие — не кнопка. */
.facts { color: var(--muted); font-size: 15px; margin: 0; }

/*
   Список объектов — то, с чего начинается день. У каждого объекта своя полоса:
   позиции → объёмы → закупки → согласование → акты → деньги. Янтарная бусина
   означает, что на этом шаге что-то встало именно здесь, и ведёт прямо туда.

   Раньше на главной стоял конвейер, сложенный по всем объектам сразу. Числа
   в нём не принадлежали никому: «5 записей без позиции сметы» — а чьих и где?
   Конвейер уехал внутрь объекта, где у каждого числа есть хозяин.
*/
.объекты { display: flex; flex-direction: column; gap: 10px; margin-top: var(--s4); }

.объект {
  position: relative;                 /* якорь для растянутой ссылки */
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s5);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  padding: 14px 18px;
}
.объект:hover { border-color: var(--line-strong); }
/* Объект, где что-то встало, помечен полосой слева, а не рамкой целиком:
   рамка вокруг всей строки читается как «выделено», а нам нужно «здесь». */
.объект.встал { box-shadow: inset 3px 0 0 var(--warn), var(--shadow); }

/* Кольцо освоения. */
.кольцо { position: relative; width: var(--d, 76px); height: var(--d, 76px); flex: none; }
.кольцо svg { display: block; }
.кольцо-в { position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; line-height: 1.2; }
.кольцо-в b { font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.кольцо-в span { font-size: 9.5px; color: var(--muted); }

.о-середина { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.о-имя { display: flex; align-items: center; gap: 10px; min-width: 0; }
.о-имя a {
  font-size: 16px; font-weight: 600; color: inherit; text-decoration: none;
  letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.о-имя a:hover { text-decoration: none; color: var(--accent); }
/*
   Растянутая ссылка. Строка выглядит как цель — значит должна ею быть:
   попадать в буквы имени, чтобы провалиться в объект, человек не обязан.
   Ссылкой остаётся само имя (её видит клавиатура и чтение с экрана), а её
   область клика накрывает строку целиком. Числа и метки лежат выше по слою
   и остаются отдельными целями.
*/
.о-имя a::after { content: ""; position: absolute; inset: 0; }
.о-подпись { color: var(--muted); font-size: 15px; }
.о-код { font-family: var(--mono); letter-spacing: .03em; }
.о-метки { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 4px 18px; }
.о-метка {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--warn); font-size: 15px; text-decoration: none;
}
.о-метка::before { content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: currentColor; flex: none; }
.о-метка:hover { text-decoration: underline; }
.о-метка.ровно { color: var(--ok); }

.о-числа { position: relative; z-index: 1; display: flex; align-items: flex-end; gap: 28px; }
.о-число { display: flex; flex-direction: column; align-items: flex-end; gap: 1px;
  color: inherit; text-decoration: none; }
.о-число b { font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.о-число span { color: var(--muted); font-size: 14px; white-space: nowrap; }
.о-число:hover { text-decoration: none; }
.о-число:hover b { text-decoration: underline; }
.о-число.warn b, .о-число.warn span { color: var(--warn); }
.о-число.нуль b { font-weight: 500; color: var(--muted); opacity: .6; }
.о-число.нуль span { opacity: .6; }

.о-деньги { display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
  min-width: 160px; color: inherit; text-decoration: none; }
.о-деньги b { font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.о-деньги span { color: var(--muted); font-size: 14px; white-space: nowrap; }
.о-деньги:hover { text-decoration: none; }
.о-деньги:hover b { text-decoration: underline; }
.о-деньги.нуль b { font-weight: 500; color: var(--muted); opacity: .6; }
.о-полоса { display: block; width: 100%; height: 5px; border-radius: var(--radius-xs);
  background: var(--panel-2); overflow: hidden; margin-top: 5px; }
.о-полоса > i { display: block; height: 100%; border-radius: var(--radius-xs); background: var(--accent); }

@media (max-width: 900px) {
  /* На телефоне та же строка складывается: кольцо и имя сверху, числа —
     ровным рядом под ними, чтобы их можно было сравнивать между объектами. */
  .объект { grid-template-columns: auto minmax(0, 1fr); gap: 12px 14px; padding: 14px;
    align-items: start; }
  .о-имя { flex-wrap: wrap; gap: 6px 8px; }
  .о-имя a { white-space: normal; font-size: 16px; line-height: 1.3;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
  .о-метки { flex-direction: column; gap: 5px; }
  .о-числа { grid-column: 1 / -1; justify-content: space-between; gap: 10px;
    align-items: flex-start; border-top: 1px solid var(--line); padding-top: 12px; }
  .о-число { align-items: flex-start; }
  .о-число b { font-size: 20px; }
  .о-деньги { min-width: 0; align-items: flex-end; }
  .о-полоса { width: 120px; }
}

/*
   Обзор объекта: состояние и то, что встало.

   Первое, что человек видит, открыв объект, — где он в деньгах и что
   ждёт его руки. Кольцо и числа стоят одной полосой, каждое число —
   ссылка в свой раздел; ниже строкой перечислено вставшее, и у каждой
   строки кнопка, которая ведёт разбирать.
*/
.состояние {
  display: flex; align-items: center; gap: var(--s5); flex-wrap: wrap;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel);
  padding: var(--s3) var(--s4); margin: 0 0 var(--s3);
}
.сост-числа { display: flex; flex-wrap: wrap; gap: var(--s5) var(--s6); flex: 1; min-width: 0; }
.сост-число { display: flex; flex-direction: column; gap: 2px; color: inherit; text-decoration: none; }
.сост-число b { font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.сост-число span { color: var(--muted); font-size: 15px; white-space: nowrap; }
.сост-число.пусто b { color: var(--muted); font-weight: 500; }
.сост-число:hover { text-decoration: none; }
.сост-число:hover b { text-decoration: underline; }
/* Число, за которым стоит работа, а не факт: «ждут разбора», «без цены».
   Янтарь тут тот же, что у плашек и точек в меню, — одно значение цвета. */
.сост-число.риск b { color: var(--warn); }

/* Что ждёт человека — одним списком, а не стопкой одинаковых карточек:
   три карточки с одинаковой тенью и кнопкой справа читались как реклама,
   а не как список дел. Полоса слева — состояние, кнопка справа — действие. */
.встало { display: flex; flex-direction: column; margin: 0 0 var(--s4);
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.встало-строка { display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  box-shadow: inset 4px 0 0 var(--warn); padding: 9px var(--s3) 9px var(--s4); border-top: 1px solid var(--line); }
.встало-строка:first-child { border-top: 0; }
.встало.ровно .встало-строка { box-shadow: inset 4px 0 0 var(--ok); }
.встало-строка > div { display: flex; align-items: baseline; gap: var(--s2); flex-wrap: wrap; min-width: 0; }
.встало-строка b { font-size: 16px; }
.встало-строка span { color: var(--fg-soft); font-size: 15px; }
/* Заголовок блока стоит вплотную к нему: между «Требует вас · 3» и самими
   строками не должно быть воздуха, иначе счёт читается как заголовок всей
   страницы. */
h2.раздел.встало-шапка { margin-bottom: var(--s2); }
.встало-строка .btn { flex: none; min-height: 30px; padding: 0 10px; font-size: 15px; }

/* «Почему так бывает» — объяснение под одной строкой сути. Раскрывается,
   когда человек впервые сюда попал, и не мешает тому, кто заходит каждый
   день. Выглядит как ссылка, а не как ещё одна панель: это текст. */
details.почему > summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  list-style: none; font-size: 15px; color: var(--accent); margin: 0 0 var(--s2); }
details.почему > summary::-webkit-details-marker { display: none; }
details.почему > summary::before { content: '+'; font-weight: 600; }
details.почему[open] > summary::before { content: '−'; }
details.почему > p { margin-top: 0; }

/* Отклик на нажатие. Полоса перехода — две секунды до трёх четвертей ширины
   и там замирает: она честно говорит «идёт», а не врёт, что осталось чуть-чуть.
   Нажатая ссылка помечается сразу — на телефоне это единственный признак, что
   нажатие засчитано. Кнопка в работе гаснет и получает кружок. */
.полоса-перехода {
  position: fixed; top: 0; left: 0; height: 2px; width: 0; z-index: 10001;
  background: var(--accent); box-shadow: 0 0 8px var(--accent);
  animation: полоса-идёт 2s cubic-bezier(.2, .7, .2, 1) forwards;
}
@keyframes полоса-идёт { from { width: 0; } to { width: 75%; } }
a.идёт { opacity: .6; }
button[aria-busy="true"] { opacity: .75; cursor: progress; }
button[aria-busy="true"]::after {
  content: ""; display: inline-block; width: 12px; height: 12px; margin-left: 8px;
  vertical-align: -2px; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent;
  animation: кручение .8s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .полоса-перехода { animation: none; width: 75%; }
  button[aria-busy="true"]::after { animation: none; }
}

/* Светофор баланса: та же строка списка, но раскрывается — под ней позиции. */
details.светофор-вид { display: block; padding: 0; }
details.светофор-вид > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  padding: 9px var(--s3) 9px var(--s4); cursor: pointer; list-style: none; }
details.светофор-вид > summary::-webkit-details-marker { display: none; }
details.светофор-вид > summary > div { display: flex; align-items: baseline; gap: var(--s2); flex-wrap: wrap; min-width: 0; }
details.светофор-вид > summary > div::before { content: '+'; color: var(--muted); font-weight: 600; width: 12px; }
details.светофор-вид[open] > summary > div::before { content: '−'; }
details.светофор-вид > summary:hover b { color: var(--accent); }
.светофор-позиции { padding: 0 var(--s3) var(--s3) calc(var(--s4) + 20px); }
.светофор-позиции .wrap { margin: 0; border-radius: var(--radius-sm); }
.светофор-позиции table { width: 100%; }
/* Норма расхода — поле в строке, без кнопки: сохраняется по Enter и уходу из поля. */
th.норма-графа, td.норма-графа { width: 84px; }
.норма-форма { margin: 0; display: flex; justify-content: flex-end; }
input.норма { width: 64px; min-width: 0; min-height: 30px; height: 30px; padding: 0 8px; text-align: right;
  font-family: var(--mono); font-size: 15px; }

@media (max-width: 720px) {
  .состояние { padding: var(--s4); gap: var(--s4); }
  .сост-числа { gap: var(--s4); }
  .встало-строка { flex-direction: column; align-items: flex-start; gap: var(--s2); padding: 12px var(--s4); }
  .встало-строка .btn { width: 100%; }
  details.светофор-вид > summary { flex-direction: column; align-items: flex-start; gap: var(--s2); padding: 12px var(--s4); }
  details.светофор-вид > summary .btn { width: 100%; }
  .светофор-позиции { padding: 0 var(--s2) var(--s2); }
  .wrap.карточки td.норма-графа { width: auto; }
  .wrap.карточки .норма-форма { width: auto; margin-left: auto; }
  .wrap.карточки input.норма, input.норма { width: 96px; max-width: 96px; flex: none; min-height: 40px; height: 40px; font-size: 16px; }
}

/* Сводка по компании: деньги крупно, застрявшее рядом. */
.money-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--s3); margin: var(--s4) 0; }
.money-card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); padding: var(--s4); }
.money-card .k { color: var(--muted); font-size: 14px; }
.money-card .v { font-size: 28px; font-weight: 600; font-variant-numeric: tabular-nums; margin-top: 4px; }

/*
   Главный экран кабинета — не список, а конвейер: смета → цены → объёмы →
   акт → справка. Узел показывает, сколько через него прошло, и загорается
   янтарным, когда что-то встало и ждёт человека. Никакой декоративной
   графики: каждое число здесь настоящее и кликабельно.
*/
/*
   Конвейер помещается в экран целиком.

   Раньше узлы стояли одной строкой с прокруткой вбок, и последний —
   «деньги» — уезжал под правый край: самое важное число объекта человек
   не видел, пока не догадается прокрутить. Теперь узлы переносятся:
   шесть в ряд на широком экране, три на среднем, один на телефоне.
   Разделены они не рамками (при переносе рамки сходятся вдвое), а зазором
   в один пиксел на общей подложке — линии всегда ровно по сетке.
*/
.flow {
  display: grid;
  /* Три в ряд — по два ряда: при шести в строку узел сжимается до ста
     восьмидесяти пикселов, и пометка «1 запись без позиции сметы» в него
     не влезает. Шесть в ряд включаются только на действительно широком
     экране, где им есть где стоять. */
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1px;
  align-items: stretch;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--line);
  overflow: hidden;
  margin-top: var(--s4);
  margin: 0 0 var(--s5);
}

.node {
  position: relative;
  display: block;
  padding: var(--s3) var(--s3) var(--s3);
  background: var(--panel);
  color: inherit;
  text-decoration: none;
  min-width: 0;
}
.node:hover { background: var(--panel-2); text-decoration: none; }

/* Лента шести шагов — конвейер, а не таблица из шести ячеек.
 *
 * Было: шесть равных плашек, и по ним не прочитать ни направления, ни того,
 * где объект стоит сегодня. Человек смотрит на них каждый день и каждый день
 * ищет глазами, что дальше.
 *
 * Стало: пройденное приглушено и помечено точкой, текущий шаг подсвечен
 * слева акцентом, между плашками — стрелка направления. Янтарь остался один
 * на странице: он значит «здесь встало», и сильнее подсветки текущего. */
.node .step::before {
  content: ""; display: none; width: 6px; height: 6px; margin-right: 6px;
  border-radius: 50%; background: var(--ok); vertical-align: middle;
}
.node.done .step::before { display: inline-block; }
.node.done .what, .node.done .n { color: var(--fg-soft); }
.node.сейчас { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
.node.сейчас .what { color: var(--fg); }
.node.stuck { box-shadow: inset 3px 0 0 var(--warn); }
/* Стрелка между плашками: направление ленты. Рисуется на разделителе и
   потому не занимает места в сетке. */
.flow .node + .node::before {
  content: ""; position: absolute; left: -5px; top: 50%; z-index: 1;
  width: 8px; height: 8px; margin-top: -4px;
  border-right: 1.5px solid var(--line-strong); border-top: 1.5px solid var(--line-strong);
  transform: rotate(45deg); background: var(--panel);
}

.node .step { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.node .what { display: block; font-weight: 600; font-size: 13px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.node .n {
  display: block;
  font-size: 20px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
  margin-top: 6px;
  line-height: 1.1;
}
.node .unit { color: var(--muted); font-size: 12px; }

/* Узел, где что-то ждёт человека. Единственный янтарь на странице. */
.node.stuck .n { color: var(--warn); }
.node .risk {
  display: inline-block;
  margin-top: 6px;
  font-size: 11.5px;
  color: var(--warn);
  background: var(--warn-soft);
  border-radius: 999px;
  padding: 2px 8px;
  white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}

@media (max-width: 1400px) { .flow { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* На телефоне лента едет вбок, а не ломается на две строки: в сетке 2×3
   шестой шаг оказывается под первым, и порядок — единственное, ради чего
   лента существует, — теряется. */
@media (max-width: 720px) {
  .flow {
    grid-template-columns: repeat(6, 62vw); overflow-x: auto; scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
  }
  .flow .node { scroll-snap-align: start; }
  .flow .node + .node::before { display: none; }
}

/* --- Заявка с объекта (ЗО, 25.09) ---------------------------------------- */
/* Форма снимка в ведомости. */
.зо-фото .row-actions { align-items: center; flex-wrap: wrap; }
/* Подпись под количеством в ведомости: что просит объект. Шире обычной
   подписи — в ней номер заявки ссылкой. Нижнего предела ширины нет (второй
   круг 25.09): со 104 точками графа «Купить» раздвигала таблицу у админа
   шире обёртки — подпись переносится по словам. */
td .зак-просит { min-width: 0; max-width: 132px; }
/* Подпись под датой строки («с объекта: 26.09.2026», «по графику: …») —
   переносится, а не раздвигает графу «Нужно к» шире поля даты. */
td .зак-дата-подпись { white-space: normal; }
/* Снимок над строками: его сверяют со строками глазами. Высоту держим,
   чтобы таблица была видна без прокрутки; целиком — по нажатию. */
.зо-раскладка { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s3); align-items: start; }
.зо-правка { min-width: 0; }
.зо-снимок { margin: 0; }
/* Подложка снимка — белая и в тёмной теме: прозрачный PNG с чёрным
   текстом на тёмной панели читался бы чёрным по чёрному (второй круг 25.09). */
.зо-снимок img {
  display: block; max-width: 100%; max-height: 340px; height: auto;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff;
}
.зо-снимок figcaption { margin-top: 4px; }
.зо-форма .wrap td { vertical-align: top; }
.зо-сравнить { display: inline; margin: 0 0 0 var(--s2); }
.зо-как { white-space: normal; min-width: 260px; max-width: 420px; }
.зо-написано { color: var(--muted); font-size: 14px; line-height: 1.35; margin-bottom: 4px; }
.зо-как .зо-имя { width: 100%; }
.зо-поз { white-space: normal; max-width: 250px; }
.зо-поз select, .зо-поз .зо-другая { width: 100%; max-width: 250px; }
.зо-поз .зо-другая { margin-top: 4px; }
.зо-колед { display: flex; gap: 4px; }
.зо-колед .зо-кол { width: 76px; }
.зо-колед .зо-ед { width: 60px; }
.зо-срок { width: 118px; }
.зо-отметка { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 14px; white-space: nowrap; }
/* Снимок заявки — шторкой справа поверх страницы, в этом же окне. */
.зо-шторка { position: fixed; z-index: 60; top: 0; right: 0; bottom: 0; width: min(680px, 100vw); display: flex; flex-direction: column;
  background: var(--bg); border-left: 1px solid var(--line, currentColor); box-shadow: -12px 0 32px rgba(0, 0, 0, .35); }
.зо-шторка[hidden] { display: none; }
/* Шторка не закрывает таблицу: на широком экране страница сдвигается, оригинал и строки рядом. */
@media (min-width: 1280px) { body.зо-со-шторкой { padding-right: 680px; } }
.зо-шторка-ярлык { position: fixed; z-index: 55; right: 0; top: 50%; transform: translateY(-50%); border-radius: var(--radius-sm) 0 0 var(--radius-sm); background: var(--bg); }
.зо-шторка:not([hidden]) ~ .зо-шторка-ярлык { display: none; }
.зо-шторка-шапка { display: flex; align-items: center; gap: var(--s2); padding: var(--s2); border-bottom: 1px solid var(--line, currentColor); }
.зо-шторка-шапка b { margin-right: auto; }
.зо-шторка-тело { flex: 1; min-height: 0; overflow: auto; }
.зо-шторка-тело iframe { width: 100%; height: 100%; border: 0; display: block; }
.зо-шторка-тело img { display: block; max-width: 100%; margin: 0 auto; }
.зо-убрать { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
/* Убранная строка остаётся в списке притушенной: видно, что отмечено, и можно вернуть. */
.зо-убрать .зо-у-нет, .зо-убрать input:checked ~ .зо-у-да { display: none; }
.зо-убрать input:checked ~ .зо-у-нет { display: inline; color: var(--warn); }
tr:has(.зо-убрать input:checked) > td:not(:last-child) { opacity: .45; }
tr:has(.зо-убрать input:checked) > td:not(:last-child) :is(input, select, textarea) { text-decoration: line-through; }
.зо-предупр { color: var(--warn); white-space: normal; max-width: 180px; }
.зо-действия { align-items: center; flex-wrap: wrap; }
.зо-неповтор { display: inline-flex; align-items: center; gap: 6px; margin-right: var(--s2); }
.зо-почему { margin: 6px 0 0; padding-left: 18px; }
.зо-перенос { border: 0; padding: 0; margin: 0 0 var(--s3); display: grid; gap: 4px; }
.зо-перенос legend { font-size: 15px; color: var(--muted); margin-bottom: 4px; padding: 0; }
.зо-перенос label { display: flex; gap: 6px; align-items: baseline; }
/* Второй круг 25.09. Ячейки карточки переносятся: на 1440 точках таблица
   проверки была шире своей обёртки (1214 против 1066) — «к закупке», «уже
   просят», «доступно» и значок «сверх сметы» стояли в одну строку. Значок —
   своей строкой; подписи под числом — в узком столбике. */
.зо-ячейка, .зо-ост { white-space: normal; min-width: 0; }
.зо-ост { max-width: 200px; }
.зо-стр { margin: 2px 0 0; }
.зо-ост .badge { display: inline-block; white-space: normal; margin-top: 4px; }
.зо-ячейка .зо-предупр { margin-top: 4px; }
/* Первая кнопка формы строк — «Сохранить правки», скрытая: Enter в поле
   сохраняет, а подтверждает только кнопка «Подтвердить заявку». */
.зо-форма .зо-по-умолчанию { display: none !important; }
/* Телефон: строка — карточка, поле — во всю её ширину. Количество и
   единица — не сжимаются, подсказка «на листке бух., в смете м» — своей
   строкой под ними, а не поверх поля (390 точек). */
@media (max-width: 820px) {
  .wrap.карточки .зо-колед { flex: none; }
  .wrap.карточки .зо-ячейка { flex: 1 1 auto; display: block; }
  .wrap.карточки .зо-ост { max-width: none; }
  .wrap.карточки .зо-как, .wrap.карточки .зо-поз, .wrap.карточки .зо-предупр { max-width: none; min-width: 0; flex: 1 1 auto; }
  .wrap.карточки .зо-поз select, .wrap.карточки .зо-поз .зо-другая { max-width: 100%; }
  .wrap.карточки td > div { min-width: 0; }
  .зо-снимок img { max-height: 260px; }
}

/* --- Сравнение КП (26.09) -------------------------------------------------- */
/* Ячейки из нескольких строк: имя и подпись под ним. Переносятся по
   словам, чтобы таблица КП целиком влезала в обёртку на 1440 точках. */
.кп-что, .кп-ячейка { white-space: normal; min-width: 0; }
.кп-что { max-width: 260px; }
.кп-ячейка { max-width: 200px; }
/* «Докупка у …» с доменом магазина — слово без пробелов в полсотни букв:
   переносится где угодно, иначе на 1440 уходило из ячейки на соседнюю
   (проверка 29.09, этап 4Д). Только эта строка: цифры сумм не рвутся. */
.кп-у { overflow-wrap: anywhere; }
.кп-стр { margin: 2px 0 0; }
.кп-ячейка .badge { display: inline-block; white-space: normal; margin-top: 2px; }
.кп-вывод { font-weight: 500; }
/* Имя файла КП без пробелов («Коммерческое_предложение_…pdf») переносится
   где угодно: на 390 точках оно уходило за край (проверка 26.09, К10). */
.кп-файл { overflow-wrap: anywhere; word-break: break-word; }
/* Две формы внесения КП рядом, на узком экране — одна под другой. */
.кп-убранные { margin: var(--s2) 0; color: var(--muted); }
.кп-убранные ul { margin: var(--s1) 0 0; padding-left: var(--s4); }
.кп-убрать-сравнение { margin: 0 0 var(--s2); display: flex; justify-content: flex-end; }
.кп-новое { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin: var(--s3) 0; }
.кп-новое-заявка { display: inline-flex; align-items: center; gap: 6px; margin: 0; white-space: nowrap; }
.кп-добавить-формы { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s4); align-items: start; }
.кп-форма-добавить .поля { margin-bottom: var(--s2); }
.кп-о-форме { margin: 0 0 var(--s2); }
/* Шапка КП: поля сеткой, как в карточке объекта. */
.кп-шапка { border: 0; padding: 0; margin: 0 0 var(--s3); min-width: 0; }
.кп-шапка legend { font-size: 15px; color: var(--muted); margin-bottom: 6px; padding: 0; }
.кп-разбор { margin: -6px 0 0; }
.кп-факты { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--s2) var(--s4); margin: var(--s3) 0; }
.кп-факт { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.кп-факт span { color: var(--muted); font-size: 14px; }
.кп-факт b { font-weight: 500; overflow-wrap: anywhere; }
/* Поля строк КП: узкие, числа — моноширинными цифрами. Вес селектора —
   выше общего правила полей ввода (ширина во всю ячейку): иначе три поля
   количества в карточке телефона вылезают за её край. */
.кп-форма .wrap td { vertical-align: top; }
.кп-форма .кп-что { min-width: 180px; max-width: 230px; }
.кп-форма .кп-ячейка { max-width: 170px; }
.кп-подпись { display: block; margin-top: 6px; font-size: 14px; color: var(--muted); }
.кп-подпись input { display: block; margin-top: 2px; }
.кп-форма input.кп-имя { width: 100%; }
.кп-форма select.кп-вид { width: 160px; }
.кп-форма input.кп-срок { width: 160px; }
.кп-форма input.кп-число { width: 96px; font-variant-numeric: tabular-nums; }
.кп-колед { display: flex; gap: 4px; }
.кп-форма input.кп-кол { width: 66px; font-variant-numeric: tabular-nums; }
.кп-форма input.кп-ед { width: 54px; }
.кп-форма input.кп-упак { width: 78px; font-variant-numeric: tabular-nums; }
.кп-действия { align-items: center; flex-wrap: wrap; }
/* Первая кнопка формы КП — скрытая «Сохранить»: Enter сохраняет, а в
   сравнение отправляет только своя кнопка. */
.кп-форма .кп-по-умолчанию { display: none !important; }
@media (max-width: 900px) {
  .кп-добавить-формы { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 820px) {
  .wrap.карточки .кп-что, .wrap.карточки .кп-ячейка { max-width: none; flex: 1 1 auto; }
}

/* --- Печать страницы браузером ----------------------------------------- */

@media print {
  header, form, details, .note, .pager, .панель, .таббар, .верх-строка, .палитра, .палитра-фон { display: none !important; }
  .каркас { display: block; }
  body, main { background: #fff; padding: 0; max-width: none; }
  .wrap { border: 0; max-height: none; overflow: visible; }
  th { position: static; }
}
/* ── Телефон не должен приближать экран ──────────────────────
   Айфон увеличивает страницу, когда палец попадает в поле со шрифтом
   меньше 16 пикселей, — и обратно она сама не возвращается: человек
   тычет в «Новый чат», а потом разводит пальцами весь сайт. Лечится
   одним: на телефоне у всех полей шрифт ровно 16. Ничего не ломает —
   поля и так растянуты на всю ширину. */
@media (max-width: 820px) {
  input:not([type="checkbox"]):not([type="radio"]),
  select, textarea {
    font-size: 16px;
  }
  /* Строчки сметы от этого не разъезжаются: высоту держим прежней. */
  .sheet input { font-size: 16px; height: 36px; }
}

/* ── Ведомость на телефоне: не таблица, а карточки ───────────
   Смета — двенадцать граф. На телефоне это значит, что страницу
   таскают вбок вместе с нижними кнопками, а прочитать строку целиком
   всё равно нельзя. Поэтому ниже 820 пикселей каждая строка сметы
   становится карточкой: наименование сверху, под ним подписанные
   пары «графа — значение». Ничего не прячем: правится всё то же
   самое, теми же полями. */
@media (max-width: 820px) {
  .sheet-wrap { overflow: visible; border: 0; }
  /* Но предпросмотр бланка листом и остаётся: это картинка того, что уйдёт
     в PDF, и «переверстать» её нельзя — иначе она перестанет быть тем, что
     печатается. Лист шириной девятьсот пикселей ездит внутри своей рамки,
     а не таскает за собой всю страницу вместе с нижними кнопками. */
  .sheet-wrap.бланк-рамка { overflow-x: auto; overscroll-behavior-x: contain;
    border: 1px solid var(--line); border-radius: var(--radius); padding: 8px; }
  .sheet, .sheet tbody, .sheet tr, .sheet td { display: block; width: auto; }
  .sheet thead, .sheet colgroup, .sheet tfoot { display: none; }
  /* Нижний предел 1340 пикселей — для настольной таблицы. Карточке он не
     нужен: с ним карточка просчёта была шире экрана впятеро, и цены
     уезжали за правый край (аудит 14.10, № 24). */
  .sheet { table-layout: auto; min-width: 0; max-width: 100%; }
  .sheet td input, .sheet td select { min-width: 0; max-width: 100%; }

  .sheet tbody tr {
    position: relative;
    border: 1px solid var(--line); border-radius: var(--radius-xl);
    background: var(--panel);
    margin: 10px 0; padding: 10px 12px 8px;
  }
  .sheet tbody tr.убрана { opacity: .55; }
  .sheet td {
    display: flex; align-items: center; gap: 10px;
    height: auto; min-height: 34px; padding: 3px 0; border: 0;
    text-align: left;
  }
  .sheet td::before {
    content: attr(data-метка);
    flex: 0 0 104px;
    font-size: 14px; letter-spacing: .06em; text-transform: uppercase;
    color: var(--muted); line-height: 1.3;
  }
  .sheet td[data-метка=""]::before { display: none; }
  .sheet td.n { text-align: left; }
  .sheet td input, .sheet td select { width: 100%; text-align: left; }
  .sheet td.n input { text-align: right; }
  .sheet td .sum { margin-left: auto; font-weight: 600; }
  /* Длинные подписи под наименованием (про источник цены и про пустую
     графу) переносятся, а не уезжают за край. Одна такая строка
     растягивала всю страницу, а вместе с ней и нижнюю панель. */
  .sheet td > * { min-width: 0; }
  .sheet .origin, .sheet .offers {
    display: block; white-space: normal; overflow-wrap: anywhere; line-height: 1.3;
  }

  /* Наименование — заголовок карточки, а не строка с подписью. */
  .sheet td[data-метка="Наименование"] { display: block; padding-bottom: 6px; }
  .sheet td[data-метка="Наименование"]::before { display: none; }
  .sheet td[data-метка="Наименование"] input { font-weight: 600; font-size: 16px; }

  /* Галочка и крестик — в правый верхний угол карточки, а не строками.
     Фон у них с настольной вёрстки (там первая графа прилипшая) — здесь
     его надо снять: непрозрачная ячейка закрашивала наименование. */
  .sheet td.pick, .sheet td.act {
    position: absolute; top: 8px; padding: 0; width: auto; left: auto;
    background: none; box-shadow: none; z-index: 4;
  }
  .sheet td.pick { right: 44px; }
  .sheet td.act { right: 8px; top: 6px; gap: 4px; }
  .sheet td.pick::before, .sheet td.act::before { display: none; }
  /* Наименование не заезжает под галочку и крестик. */
  .sheet td[data-метка="Наименование"] { padding-right: 78px; }
  .sheet-bar { margin-left: 0; margin-right: 0; }

  /* Заголовок раздела — полоска во всю ширину, как в ведомости. */
  .sheet tr.grp { margin: 18px 0 6px; padding: 0; border: 0; background: none; }
  .sheet tr.grp td { padding: 0; }
  .sheet tr.grp .grp-name { font-weight: 700; letter-spacing: .04em; }
  .sheet tr.grp1 .grp-name { text-transform: uppercase; font-size: 15px; color: var(--accent); }

  /* Кнопки ведомости прилипают над нижней панелью, а не под неё: раньше
     две полосы стояли друг на друге и разъезжались при прокрутке. Ряд
     листается вбок внутри себя — страница при этом стоит на месте. */
  .sheet-bar {
    position: sticky; bottom: calc(72px + env(safe-area-inset-bottom)); z-index: 9994;
    display: flex; flex-wrap: nowrap; gap: 8px;
    margin: 12px -14px 0; padding: 9px 14px;
    overflow-x: auto; scrollbar-width: none;
    background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
  }
  .sheet-bar::-webkit-scrollbar { display: none; }
  .sheet-bar > * { flex: none; }
  .sheet-bar .hint { display: none; }
  body.клавиатура .sheet-bar { bottom: 8px; }
}

/* Кнопка «Надиктовать» в журнале — главная кнопка для того, кто на
   объекте: руки в перчатках, писать нечем. Поэтому она не серая
   вспомогательная, а с микрофоном и таймером, и во время записи
   пульсирует красным. */
.запись {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 42px; padding: 0 16px; border-radius: var(--radius-lg);
  border: 1px solid var(--accent); background: var(--accent-soft); color: var(--accent);
  font: inherit; font-weight: 600; cursor: pointer;
}
.запись:hover { background: var(--accent); color: var(--accent-fg); }
.запись.идёт {
  border-color: var(--danger); background: var(--danger); color: #fff;
  animation: пульс 1.6s infinite;
}
@keyframes пульс {
  0%, 100% { box-shadow: 0 0 0 0 rgba(228, 103, 95, .45); }
  70% { box-shadow: 0 0 0 14px rgba(228, 103, 95, 0); }
}

/* ── Читаемость: воздух, ступени, полоски ─────────────────────
   Жалоба была одна и точная: «много текста, мало отличий, глаза
   плывут». Лечится не украшениями, а тремя вещами — ступенями
   размеров, воздухом между блоками и тонкими полосками, которые
   говорят, где кончается одно и начинается другое. Правила стоят
   в конце листа нарочно: они правят то, что описано выше. */

/* Строка текста длиннее 75 знаков читается вдвое хуже: глаз теряет
   начало следующей. Ограничиваем прозу, а не таблицы. */
/* Строка текста длиннее 75 знаков читается вдвое хуже — но ограничивать
   надо строку, а не коробку. Прежде абзацы обрывали свой блок на 68–74
   знаках, и на странице получалось три разных правых края: подпись
   кончалась на 823 пикселях, карточка на 1132, таблица на 1314. Теперь
   коробки идут до края колонки, а внутри них проза держит свою меру. */
main p, main li { max-width: 74ch; }
p.sub { font-size: 15px; line-height: 1.45; max-width: 68ch; }
/* Внутри карточки, плашки и инструмента абзац уже стоит в узком блоке —
   вторая мера ему не нужна и рвала бы край изнутри. */
.card2 p, .note p, details.tool p, .card2 .hint, .note .hint { max-width: none; }

/* Лестница заголовков с облика «Меню и лента» (23.09): страница — 28,
   раздел — 20, текст — 16. Владелец выбрал макет с крупным заголовком:
   мелкое «всё одинаковое» читалось складом. Имя объекта в заголовок
   страниц объекта не ставится — оно в меню, поэтому 28 первый экран не
   съедает; на телефоне — 24. */
h1 { font-size: 28px; line-height: 1.2; letter-spacing: -.012em; }
h2 { font-size: 20px; line-height: 1.3; letter-spacing: -.008em; }
h3 { font-size: 16px; }

/* Заголовок раздела внутри страницы. Раньше каждый блок открывался
   вторым, третьим и четвёртым <h1> в двадцать пять пикселей — страница
   читалась складом одинаково крупных вывесок, и настоящее название
   объекта в этом ряду терялось. Теперь наверху ровно один заголовок,
   а разделы под ним — на ступень тише, с тонкой линией вправо: видно,
   что блок отдельный, но спорить с названием страницы он не пытается. */
h2.раздел, h2.полоска {
  display: flex; align-items: center; gap: 12px;
  margin: var(--s5) 0 var(--s2);
  font-size: 20px; line-height: 1.3; font-weight: 600;
  letter-spacing: -.005em; color: var(--fg);
}
h2.раздел::after, h2.полоска::after {
  content: ''; flex: 1; height: 1px; background: var(--line-strong);
}
h2.раздел + p.sub, h2.полоска + p.sub { margin-top: 0; }

/* Карточки и таблицы дышат: между блоками — заметный шаг, внутри —
   ровные отступы. Раньше всё стояло с одинаковым зазором, и страница
   читалась одной простынёй. */
main > * + * { margin-top: var(--s4); }
main > h1 + p.sub { margin-top: calc(var(--s1) * -1); }
.card, .card2, table.grid, .wrap { margin-top: var(--s4); }

/* Строки таблиц разделяем полоской и подсвечиваем ту, на которую
   смотрят: в ведомости из сорока строк глаз иначе съезжает. */
table.grid tbody tr + tr td { border-top: 1px solid var(--line); }
table.grid tbody tr:hover td { background: var(--bg-sunken); }
table.grid th { font-size: 14px; color: var(--muted); font-weight: 500; }
/* Шапка таблицы не уезжает при прокрутке: без неё через десять строк
   уже не помнишь, какая графа где. */
table.grid thead th { position: sticky; top: 0; z-index: 2; background: var(--panel); }

/* Числа в столбик — только табличными цифрами, иначе разряды пляшут. */
td, .num, .money, .sum { font-variant-numeric: tabular-nums; }

@media (max-width: 820px) {
  h1 { font-size: 24px; }
  p.sub { font-size: 15px; }
  main > * + * { margin-top: var(--s3); }
  /* Первый столбец таблицы прилипает к краю: наименование видно всегда,
     а вбок едут только цифры. Это единственное, что спасает ведомость
     на телефоне, пока она остаётся таблицей. */
  table.grid td:first-child, table.grid th:first-child {
    position: sticky; left: 0; z-index: 1;
    background: var(--panel);
    box-shadow: 1px 0 0 var(--line);
    max-width: 46vw;
  }
  table.grid thead th:first-child { z-index: 3; }
}

/* Статья расходов прямо в строке списка: выбор — это перенос, а не форма. */
.cost-pick { margin: 2px 0 0; }
.куда-поз { margin-top: 2px; font-size: 14px; }
/* Вид снятой бумаги в корзине — второй строкой под именем файла, тише его. */
.вид-снятого { display: block; margin-top: 2px; font-size: 14px; font-weight: 400; color: var(--muted); }
.cost-pick select {
  font-size: 14px;
  padding: 2px 4px;
  min-height: 26px;
  /* Не меньше, чем «транспортные»: колонка сама раздвинется, а обрезанное
     «не о…» в выпадающем списке читается как поломка. */
  min-width: 136px;
  max-width: 180px;
  color: var(--fg-soft);
}

/* ── Айфон и приближение: последнее слово за этим блоком ──────
   Safari увеличивает страницу, когда палец попадает в поле со шрифтом
   меньше шестнадцати пикселей, и обратно сам не отдаляет. Правило выше
   по листу перебивалось теми, что описывают конкретные поля: у них
   специфичность выше. Поэтому здесь они перечислены поимённо и стоят
   последними — после них шрифт в полях на телефоне уже никто не
   уменьшает. Проверять надо на самом телефоне: в «телефонном режиме»
   настольного браузера этого приближения не бывает вовсе. */
@media (max-width: 820px) {
  :root { --h-ctl: 44px; }
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea,
  .sheet input,
  .sheet td[data-метка="Наименование"] input,
  .ож-книга input,
  .ож-книга select,
  .ож-книга textarea,
  .ожр-фраза textarea,
  .search input,
  .search select,
  .card2 input,
  .card2 select,
  .card2 textarea {
    font-size: 16px;
  }
  /* Двойное касание тоже не должно приближать: на объекте по экрану
     стучат в перчатках, и половина нажатий читается как двойное. */
  body { touch-action: manipulation; }
}

/* Уведомление о технических cookie: тонкая строка у нижнего края во всю
   ширину, а не коробка поверх меню. Кнопки ассистента и переписки справа
   она не закрывает — справа у неё поля. */
.куки-плашка { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9990;
  display: flex; align-items: center; justify-content: center; gap: var(--s3); flex-wrap: wrap;
  padding: 6px 96px calc(6px + env(safe-area-inset-bottom)) var(--s4); min-height: 44px;
  background: var(--panel); color: var(--fg); border-top: 1px solid var(--line);
  box-shadow: 0 -4px 14px rgba(21, 23, 26, .06); font-size: 15px; line-height: 1.4; }
.куки-плашка p { margin: 0; color: var(--fg-soft); }
.куки-плашка button { flex: none; min-height: 30px; padding: 0 12px; font-size: 15px; }
@media (max-width: 820px) {
  .куки-плашка { padding: 6px var(--s3) calc(6px + env(safe-area-inset-bottom)); justify-content: space-between; }
}
/* Над нижней панелью — на всех ширинах, где панель видна (до 1023 px).
   До 24.09 подъём стоял только до 820 px, и на телефоне боком или на
   планшете строка целиком уходила под панель: кнопку было не нажать. */
@media (max-width: 1023px) {
  .таббар ~ .куки-плашка { bottom: calc(72px + env(safe-area-inset-bottom)); }
}
/* Отметка согласия на формах двери: флажок слева от текста, текст переносится. */
.согласие { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 var(--s4);
  font-size: 15px; line-height: 1.45; color: var(--fg-soft); cursor: pointer; }
.согласие input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; }


/* Панель поручений (зд-). Карточка поручения: слева бублик срока, в
   середине суть, справа действие. Полоса слева — состояние: синяя — ждёт
   человека, красная с розовым полем — срок вышел, без полосы — закрыто. */
.зд-список { display: flex; flex-direction: column; margin: 0 0 var(--s3);
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.зд-строка { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: var(--s2) var(--s3);
  padding: 9px var(--s3) 9px var(--s4); border-top: 1px solid var(--line); box-shadow: inset 4px 0 0 var(--accent); }
.зд-строка:first-child { border-top: 0; }
.зд-строка.зд-просрочка { box-shadow: inset 4px 0 0 var(--danger); background: var(--danger-soft); }
.зд-строка.зд-закрыта { box-shadow: none; }
.зд-строка.зд-закрыта .зд-что a { color: var(--fg-soft); }
.зд-суть { min-width: 0; }
.зд-что { font-size: 16px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.зд-что a { color: var(--fg); }
.зд-что .badge { vertical-align: 1px; }
.зд-кто { margin-top: 2px; color: var(--fg-soft); font-size: 15px; line-height: 1.45; }
.зд-кто a { color: var(--fg-soft); }
.зд-красно { color: var(--danger); font-weight: 600; }
.зд-сост { display: flex; gap: var(--s1); flex-wrap: wrap; justify-content: flex-end; }
.зд-кнопки { display: flex; gap: var(--s1); flex-wrap: wrap; justify-content: flex-end; }
.зд-кнопки form.inline { margin: 0; }
.зд-кнопки .btn, .зд-кнопки button { min-height: 30px; padding: 0 10px; font-size: 15px; }

/* Бублик срока: доля прошедшего времени, в середине — дней до срока. */
.зд-бублик { position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: var(--d, 38px); height: var(--d, 38px); flex: none; color: var(--accent); }
.зд-бублик svg { position: absolute; inset: 0; }
.зд-бублик circle { fill: none; stroke-width: 4; }
.зд-бублик circle.фон { stroke: var(--panel-2); }
.зд-бублик circle.ход { stroke: currentColor; stroke-linecap: round; }
.зд-бублик i { position: relative; font-style: normal; font-size: 14px; font-weight: 650; line-height: 1;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em; color: var(--fg); }
.зд-бублик.пора { color: var(--warn); }
.зд-бублик.пора i { color: var(--warn); }
.зд-бублик.просрочка { color: var(--danger); }
.зд-бублик.просрочка i { color: var(--danger); }
.зд-бублик.сдана { color: var(--ok); }
.зд-бублик.сдана i { color: var(--ok); }
.зд-бублик.нет { border: 2px dashed var(--line-strong); border-radius: 50%; }
.зд-бублик.нет i { color: var(--muted); font-weight: 500; }

.зд-группы { display: flex; flex-direction: column; gap: var(--s2); margin: 0 0 var(--s4); }
.зд-группа .зд-список, .зд-группа .встало { margin-bottom: var(--s2); }
h3.зд-объект { display: flex; align-items: baseline; gap: var(--s2); margin: var(--s3) 0 var(--s2);
  font-size: 16px; line-height: 1.3; font-weight: 650; }
h3.зд-объект a { color: var(--fg); }
h3.зд-объект .n { color: var(--muted); font-weight: 500; font-size: 15px; }
.зд-дела .встало-строка { padding-top: 7px; padding-bottom: 7px; }
.зд-на-объекте { margin-bottom: var(--s2); }

.зд-панель { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; }
.зд-отбор .n { color: var(--muted); }
.зд-отбор a.риск .n { color: var(--warn); font-weight: 600; }
.зд-объект-выбор { margin: 0; }
.зд-объект-выбор select { min-width: 220px; max-width: 100%; }

.зд-доска { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); margin: 0 0 var(--s4); align-items: start; }
.зд-колонка { background: var(--bg-sunken); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s2);
  display: flex; flex-direction: column; gap: var(--s2); min-width: 0; }
.зд-колонка h3 { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 2px var(--s1) 0; font-size: 15px; font-weight: 650; }
.зд-колонка h3 .n { color: var(--muted); font-weight: 500; }
.зд-колонка h3 .badge { margin-left: auto; }
.зд-колонка .зд-строка { grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: var(--s2); background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow); padding: 10px var(--s3); }
.зд-колонка .зд-строка.зд-просрочка { border-color: var(--danger); background: var(--danger-soft); box-shadow: inset 4px 0 0 var(--danger), var(--shadow); }
.зд-колонка .зд-сост, .зд-колонка .зд-кнопки { grid-column: 1 / -1; justify-content: flex-start; }
.зд-пустая-доска { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); flex-wrap: wrap;
  margin: 0 0 var(--s4); padding: var(--s3) var(--s4); background: var(--panel);
  border: 1px dashed var(--line-strong); border-radius: var(--radius); }
.зд-пустая-доска > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.зд-пустая-доска b { font-size: 16px; }
.зд-пустая-доска span { color: var(--fg-soft); font-size: 15px; }
.зд-система h2.раздел { margin-top: var(--s4); }
.зд-сетка { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(380px, 100%), 1fr)); gap: var(--s3); align-items: start; margin: 0 0 var(--s3); }
.зд-объект-карта { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; min-width: 0; }
.зд-объект-карта header { display: flex; align-items: flex-start; gap: var(--s2); padding: 10px var(--s3) 8px var(--s4);
  border-bottom: 1px solid var(--line); background: var(--panel-2); }
.зд-объект-имя { flex: 1; min-width: 0; font-weight: 650; font-size: 16px; line-height: 1.3; color: var(--fg);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.зд-объект-карта header .n { flex: none; color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums; }
.зд-дело { display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  padding: 8px var(--s3) 8px var(--s4); border-top: 1px solid var(--line); }
.зд-объект-карта header + .зд-дело { border-top: 0; }
.зд-дело > div { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.зд-дело b { font-size: 16px; line-height: 1.3; overflow-wrap: anywhere; }
.зд-дело span { color: var(--fg-soft); font-size: 15px; line-height: 1.35; overflow-wrap: anywhere; }
.зд-дело .btn { flex: none; min-height: 30px; padding: 0 10px; font-size: 15px; }
.зд-ещё { margin: 0 0 var(--s4); font-size: 15px; }
.зд-имя-объекта { display: -webkit-inline-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
  max-width: 100%; vertical-align: bottom; }
.зд-пусто { color: var(--muted); font-size: 15px; padding: var(--s2) var(--s1); }
.зд-закрытые { margin: var(--s3) 0; }

.зд-форма textarea { width: 100%; min-height: 72px; resize: vertical; }
.зд-форма select option[hidden] { display: none; }
.зд-подсказка { margin: -6px 0 var(--s3); }
.зд-карточка { display: flex; gap: var(--s4); align-items: flex-start; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s3) var(--s4); margin: 0 0 var(--s4); }
.зд-карточка.зд-просрочка { border-color: var(--danger); box-shadow: inset 4px 0 0 var(--danger); }
.зд-карточка-тело { flex: 1; min-width: 0; }
.зд-просьба { margin: 0 0 var(--s4); }
.зд-просьба form { margin-top: var(--s2); }
.зд-что a.badge { text-decoration: none; }
.зд-карточка .зд-бублик circle { stroke-width: 6; }
.зд-карточка .зд-бублик i { font-size: 16px; }
.зд-поля { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--s2) var(--s4); margin: 0; }
.зд-поля div { min-width: 0; }
.зд-поля dt { color: var(--muted); font-size: 14px; }
.зд-поля dd { margin: 2px 0 0; font-size: 16px; overflow-wrap: anywhere; }
.зд-подробно { margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--line); line-height: 1.45; overflow-wrap: anywhere; }
.зд-лента { list-style: none; margin: 0 0 var(--s4); padding: 0 0 0 var(--s4); border-left: 2px solid var(--line-strong); }
.зд-событие { position: relative; margin: 0 0 var(--s3); }
.зд-событие::before { content: ''; position: absolute; left: -22px; top: 6px; width: 10px; height: 10px;
  border-radius: 50%; background: var(--panel); border: 2px solid var(--line-strong); }
.зд-событие.зд-выполнена::before, .зд-событие.зд-принята::before { border-color: var(--ok); background: var(--ok-soft); }
.зд-событие.зд-возвращена::before, .зд-событие.зд-снята::before { border-color: var(--warn); background: var(--warn-soft); }
.зд-событие.зд-передана::before, .зд-событие.зд-взята::before { border-color: var(--accent); background: var(--accent-soft); }
.зд-событие time { margin-left: var(--s2); color: var(--muted); font-size: 15px; font-variant-numeric: tabular-nums; }
.зд-событие p { margin: 2px 0 0; color: var(--fg-soft); overflow-wrap: anywhere; }
.объекты-шапка { margin-top: var(--s5); }
.объекты-шапка h2.раздел { margin-top: 0; }
.объекты-шапка details.почему { margin-top: 2px; }

/* Главная (22.09, снимок владельца: «не читаемо и не понятно что тут
   происходит»). Строка состояния под заголовком вместо полосы нулей; дела —
   одним списком по срочности, объект — своей графой, чтобы глаз шёл сверху
   вниз, а не зигзагом по карточкам разной высоты; настройка объектов — одной
   свёрнутой строкой, чтобы четырнадцать одинаковых «назначьте команду» не
   топили одно срочное. */
.гл-строка a { color: inherit; text-decoration: underline; text-decoration-color: var(--line-strong);
  text-underline-offset: 3px; }
.гл-строка a:hover { color: var(--accent); text-decoration-color: currentColor; }
.гл-строка a.риск { color: var(--warn); }
.гл-решить h2.раздел { margin-top: var(--s4); }
.гл-список .встало-строка { display: grid; grid-template-columns: 30px minmax(0, 1fr) minmax(0, 240px) auto;
  align-items: center; gap: var(--s3); }
.гл-список .встало-строка > div { flex-direction: column; align-items: flex-start; gap: 1px; }
.гл-список .встало-строка b { font-size: 16px; line-height: 1.3; }
.гл-список .встало-строка > div > span { font-size: 15px; line-height: 1.35; }
.ур-объект { min-width: 0; color: var(--muted); font-size: 15px; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; text-decoration: none; }
a.ур-объект:hover { color: var(--accent); text-decoration: none; }
.гл-список .встало-строка .btn { justify-self: end; }

details.гл-настроить { margin: 0 0 var(--s4); background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; }
details.гл-настроить > summary { list-style: none; display: flex; align-items: center; gap: var(--s3);
  padding: 9px var(--s3); cursor: pointer; }
details.гл-настроить > summary::-webkit-details-marker { display: none; }
details.гл-настроить > summary > div { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
details.гл-настроить > summary b { font-size: 16px; font-weight: 600; line-height: 1.3; }
details.гл-настроить > summary b .n { margin-left: 8px; color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums; }
details.гл-настроить > summary > div > span { color: var(--fg-soft); font-size: 15px; line-height: 1.35; }
.гл-показать { flex: none; min-height: 30px; padding: 0 10px; font-size: 15px; pointer-events: none; }
.гл-показать > span + span, details.гл-настроить[open] .гл-показать > span:first-child { display: none; }
details.гл-настроить[open] .гл-показать > span + span { display: inline; }
.гл-вид { border-top: 1px solid var(--line); padding: 10px var(--s3) 12px calc(var(--s3) + 30px + var(--s3)); }
.гл-вид > b { display: block; font-size: 16px; font-weight: 600; }
.гл-вид > span { display: block; color: var(--fg-soft); font-size: 15px; line-height: 1.35; }
.гл-объекты { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.гл-объекты a { display: inline-block; max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 3px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel);
  color: var(--fg); font-size: 15px; text-decoration: none; }
.гл-объекты a:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.о-метка.настроить { color: var(--muted); }

@media (max-width: 1023px) {
  .зд-доска { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .гл-список .встало-строка { grid-template-columns: 30px minmax(0, 1fr); align-items: start; }
  .гл-список .ур-объект, .гл-список .встало-строка .btn { grid-column: 2; justify-self: stretch; }
  .гл-вид { padding-left: var(--s3); }
  .гл-объекты a { max-width: 100%; }
  .зд-строка { grid-template-columns: auto minmax(0, 1fr); }
  .зд-сост, .зд-кнопки { grid-column: 1 / -1; justify-content: flex-start; }
  .зд-колонка.пусто { display: none; }
  .зд-карточка { flex-direction: column; }
  .зд-кнопки .btn, .зд-кнопки button { min-height: 40px; padding: 0 14px; font-size: 16px; }
  .зд-панель .сегменты { max-width: 100%; overflow-x: auto; }
}

/* === Облик «Площадка» (17.09.2026) ======================================
   Слой поверх компонентов: шрифт заголовков и крупных чисел, лента шагов
   с цветной кромкой, уровни дел, окно замечания, строка про cookie.
   Цвета — только переменными из начала файла. */

/* Знак и рисунок стройки: рама знака — оранжевая, буква — цветом текста. */
.знак-марки { flex: none; display: inline-block; vertical-align: middle; }
.знак-марки .зм-рама { stroke: var(--accent-2); }
.знак-марки .зм-буква { stroke: currentColor; }
.знак-марки .зм-тихо { opacity: .55; }
.рисунок-стройки { display: block; max-width: 100%; height: auto; }
.рисунок-стройки .рс-линия { stroke: currentColor; }
.рисунок-стройки .рс-тихо { opacity: .5; }
.рисунок-стройки .рс-акцент { stroke: var(--accent-2); }
.рисунок-стройки .рс-заливка { fill: var(--accent-2); fill-opacity: .16; }
.рисунок-стройки .рс-точка { fill: var(--accent-2); }

/* Заголовки и крупные числа — Unbounded: по нему экран узнают издалека. */
h1, h2.раздел, h2.полоска, .герой-число, .пл-значение, .сост-число b, .кольцо-в b,
.node .n, .card b, .page-head h1 { font-family: var(--display); font-weight: 600; letter-spacing: -.02em; }
h2.раздел, h2.полоска { font-size: 16px; }
.сост-число b { font-size: 20px; }
.node .n { font-size: 18px; }
.node .n .unit, .node .unit { font-family: var(--sans); font-weight: 400; letter-spacing: 0; margin-left: 4px; }
.кольцо-в b { font-size: 15px; }
th { font-weight: 600; color: var(--muted); background: var(--panel-2); }
.wrap > table th:first-child { background: var(--panel-2); }
td.num, th.num { font-family: var(--sans); }

/* Лента шагов: у шага цветная кромка сверху — пройдено, встало, сейчас,
   ждём. Текущий шаг — графитом: самое тёмное пятно ленты, его находят
   первым. Направление по-прежнему показывает стрелка между шагами. */
.node { box-shadow: inset 0 3px 0 var(--line); padding-top: calc(var(--s3) + 3px); }
.node.done { box-shadow: inset 0 3px 0 var(--ok); }
.node.stuck { box-shadow: inset 0 3px 0 var(--точка); }
.node.сейчас { background: var(--nav); color: var(--nav-fg); box-shadow: inset 0 3px 0 var(--accent-2); }
.node.сейчас .what, .node.сейчас .n { color: var(--nav-fg); }
.node.сейчас .step, .node.сейчас .unit { color: var(--nav-muted); }
.node.сейчас:hover { background: var(--nav-2); }
.node.сейчас .risk { background: rgba(255, 255, 255, .12); color: var(--nav-fg); }
.node .risk { border-radius: var(--radius-xs); }

/* Состояние «в работе» — синим: оранжевый на сайте значит только действие. */
.badge.work { color: var(--info); background: var(--info-soft); }

/* Вкладки документов — прямоугольные, как всё на «Площадке». */
.tabs a { border-radius: var(--radius-sm); }
.tabs a[aria-current="page"], .tabs a.on { background: var(--nav); border-color: var(--nav); color: var(--nav-fg); }
.btn, button { font-weight: 600; }
button.primary:hover, .btn.primary:hover,
.card2 button[type=submit]:hover, form.upload button[type=submit]:hover, .дв-карта button[type=submit]:hover {
  filter: none; background: var(--accent-hover); border-color: var(--accent-hover);
}

/* Уровни дел от системы: значок в квадрате вместо жёлтой полосы у каждой
   строки. Пять одинаково жёлтых строк не говорили, какая из них срочная. */
.ур-знак { flex: none; display: inline-grid; place-items: center; width: 30px; height: 30px;
  border-radius: var(--radius-sm); background: var(--panel-2); color: var(--muted); }
.встало-строка .ур-знак, .зд-дело .ур-знак { font-size: 0; }
.ур-беда .ур-знак { background: var(--danger-soft); color: var(--danger); }
.ур-внимание .ур-знак { background: var(--warn-soft); color: var(--warn); }
.ур-ждём .ур-знак { background: var(--info-soft); color: var(--info); }
.ур-настроить .ур-знак { background: var(--panel-2); color: var(--muted); }
.встало-строка.ур-беда, .встало-строка.ур-внимание, .встало-строка.ур-ждём, .встало-строка.ур-настроить {
  box-shadow: none; justify-content: flex-start; padding-left: var(--s3); }
.встало-строка[class*="ур-"] > div { flex: 1 1 auto; }
.встало-строка.ур-настроить b, .зд-дело.ур-настроить b { font-weight: 500; }
.зд-дело { justify-content: flex-start; }
.зд-дело > div { flex: 1 1 auto; }
h2.раздел::after, h2.полоска::after { order: 1; }
.ур-сводка { order: 2; display: inline-flex; gap: 6px; flex-wrap: wrap; font-family: var(--sans); letter-spacing: 0; }
.ур-сводка .badge { font-weight: 500; }
@media (max-width: 720px) { .ур-сводка { display: none; } }

/* Действие в строке — маленькая кнопка с рамкой, а не голая ссылка:
   «Позиция», «Изменить», «Снять документ» текстом читались как админка.
   Рамка тонкая и серая, акцент — только по наведению. */
td.act a, td.act-wrap a, td.act button, td.act-wrap button {
  border-color: var(--line); background: var(--panel); color: var(--fg); font-weight: 600; }
td.act a:hover, td.act-wrap a:hover, td.act button:hover, td.act-wrap button:hover {
  border-color: var(--accent); background: var(--panel); color: var(--accent); }
td.act a.danger-quiet, td.act button.danger-quiet { color: var(--danger); }

/* Свёрнутое опасное и спорное — белым листом с жёлтой кромкой, а не
   заливкой: заливка во всю ширину читалась грязным пятном. */
details.tool.warn { background: var(--panel); border-color: var(--line); box-shadow: inset 3px 0 0 var(--точка); }
details.tool.warn > summary { color: var(--fg); }

/* Тарифы витрины на «Платформе» — тремя колонками, подписи над полями. */
.пл-тарифы { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--s3); margin: var(--s3) 0; }
.пл-тариф { min-width: 0; margin: 0; padding: var(--s2) var(--s3) var(--s3); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.пл-тариф legend { padding: 0 6px; font-weight: 600; font-size: 15px; }
.пл-тариф .field { display: block; margin: 0 0 var(--s2); }
.пл-тариф .field label { display: block; margin-bottom: 4px; font-size: 15px; color: var(--muted); }
.пл-тариф input, .пл-тариф textarea { width: 100%; }

/* Телефон: значок уровня слева от текста, кнопка — во всю ширину под ними. */
@media (max-width: 720px) {
  .встало-строка[class*="ур-"], .зд-дело[class*="ур-"] {
    display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 8px 12px; align-items: start; }
  .встало-строка[class*="ур-"] > div { flex-direction: column; align-items: flex-start; gap: 2px; }
  .встало-строка[class*="ур-"] .btn, .зд-дело[class*="ур-"] .btn { grid-column: 1 / -1; width: 100%; }
}
@media (max-width: 1023px) {
  .obj-tabs a { border-radius: var(--radius-sm); }
  .obj-tabs a[aria-current="page"] { background: var(--nav); border-color: var(--nav); color: var(--nav-fg); }
}
@media (max-width: 820px) {
  .куки-плашка { flex-wrap: nowrap; }
  .куки-плашка p { flex: 1 1 auto; font-size: 14px; }
}

/* Замечание к странице — окном по кнопке «Помощь», а не полосой под
   каждой страницей. Форма та же и уходит туда же; на телефоне её
   открывает «+» → «Заметку об этой странице». */
details.note-form:not([open]) { display: none; }
details.note-form[open] {
  position: fixed; right: var(--s5); bottom: var(--s5); z-index: 9996;
  width: min(460px, calc(100vw - 32px)); max-height: calc(100vh - 120px); overflow: auto;
  margin: 0; padding: var(--s4); background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
}
details.note-form[open] > summary { font-family: var(--display); font-size: 16px; }
details.note-form[open] .field { grid-template-columns: 1fr; gap: 4px; margin-bottom: var(--s3); }
details.note-form[open] .field > span { font-size: 15px; color: var(--muted); }
details.note-form[open] > summary::before { content: "×"; order: 2; margin-left: auto; font-size: 20px; }
@media (max-width: 1023px) {
  details.note-form[open] { left: var(--s3); right: var(--s3); bottom: calc(92px + env(safe-area-inset-bottom)); width: auto; }
}


/* ── Календарь графика работ: имя слева, полосы по неделям справа ─────
   Рамка прокручивается вбок сама, страница — нет. Полоса плана серая,
   сделанное — цветом поверх, черта — текущий день. Слова со страницы
   в комментарии не повторяются намеренно. */
.гр-кал { --гр-имя: 220px; --гр-клетка: 38px; margin: var(--s4) 0; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--panel); overflow-x: auto; }
.гр-ряд { display: grid; grid-template-columns: var(--гр-имя) minmax(calc(var(--гр-недель) * var(--гр-клетка)), 1fr);
  min-height: 42px; border-top: 1px solid var(--line); }
.гр-ряд:first-child { border-top: 0; }
.гр-шапка { position: sticky; top: 0; z-index: 2; background: var(--panel-2); min-height: 30px; }
.гр-имя { position: sticky; left: 0; z-index: 3; display: flex; flex-direction: column; justify-content: center; gap: 2px;
  padding: 6px 12px; background: var(--panel); border-right: 1px solid var(--line); min-width: 0; }
.гр-шапка .гр-имя { background: var(--panel-2); font-size: 14px; color: var(--muted); }
.гр-имя a { font-weight: 600; color: var(--fg); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.гр-имя a:hover { color: var(--accent); }
.гр-даты { font-family: var(--mono); font-size: 14px; color: var(--muted); }
.гр-лента { position: relative; display: flex; min-width: 0;
  background-image: linear-gradient(to right, var(--line) 1px, transparent 1px);
  background-size: calc(100% / var(--гр-недель)) 100%; }
.гр-шапка .гр-лента { background-image: none; }
.гр-неделя { flex: 1 1 0; min-width: var(--гр-клетка); font-family: var(--sans); font-size: 11px; font-variant-numeric: tabular-nums; letter-spacing: -.02em; color: var(--muted);
  padding: 8px 0 0; text-align: center; border-left: 1px solid var(--line); white-space: nowrap; overflow: hidden; }
.гр-план { position: absolute; top: 11px; height: 20px; border-radius: var(--radius-xs); background: var(--line-strong); overflow: hidden; }
.гр-факт { position: absolute; top: 0; bottom: 0; left: 0; background: var(--info); }
.гр-отстаёт .гр-факт { background: var(--danger); }
.гр-выполнен .гр-факт { background: var(--ok); }
.гр-отстаёт .гр-план { box-shadow: inset 0 0 0 1px var(--danger); }
.гр-было { position: absolute; top: 34px; height: 4px; border-radius: var(--radius-xs); background: var(--warn); }
.гр-сегодня { position: absolute; top: 0; bottom: 0; width: 0; border-left: 2px solid var(--accent); z-index: 1; }
.гр-шапка .гр-сегодня { border-left-style: dashed; }
.гр-легенда { margin: 0; padding: 6px 12px; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center;
  border-top: 1px solid var(--line); position: sticky; left: 0; }
.гр-л { display: inline-block; width: 18px; height: 10px; border-radius: var(--radius-xs); vertical-align: middle; }
.гр-л-план { background: var(--line-strong); }
.гр-л-факт { background: var(--info); }
.гр-л-было { height: 4px; background: var(--warn); }
.гр-л-сегодня { width: 2px; height: 14px; background: var(--accent); }
form.inline { display: inline; margin: 0; }
.page-actions form.inline { display: inline-flex; }
/* Кнопка формы в шапке — той же высоты, что соседние кнопки-ссылки: «Утвердить
   график» стояла на 34 px рядом с 40-пиксельными (аудит 23.09, пункт 2). */
.page-head .page-actions form.inline { margin: 0; }
.page-head .page-actions form.inline button { min-height: var(--h-ctl); padding: 0 16px; font-size: inherit; }
.гр-форма { margin-bottom: var(--s3); }
.гр-убрать { display: flex; align-items: center; gap: var(--s3); margin-top: var(--s3); }
td.act form.inline { display: inline-flex; gap: 6px; align-items: center; }
td.act form.inline select { min-height: 30px; height: 30px; padding: 0 6px; font-size: 15px; max-width: 150px; }
/* Группа системы в календаре — строка-подпись во всю ширину. */
.гр-группа { min-height: 28px; background: var(--panel-2); }
.гр-группа .гр-имя { background: var(--panel-2); font-size: 14px; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: .03em; }
/* Критическая цепочка: обводка полосы акцентом, не заливка. */
.гр-крит .гр-план { box-shadow: inset 0 0 0 2px var(--accent); }
.гр-отстаёт.гр-крит .гр-план { box-shadow: inset 0 0 0 2px var(--danger); }
.гр-л-крит { background: var(--line-strong); box-shadow: inset 0 0 0 2px var(--accent); }
.гр-метка-крит { color: var(--accent); }
.гр-система { margin: var(--s4) 0 var(--s2); font-size: 16px; }
.гр-система .hint { font-weight: 400; margin-left: 6px; }
.гр-почему { margin: 0 0 var(--s3); padding: var(--s2) var(--s3); border-left: 3px solid var(--line-strong);
  background: var(--panel-2); border-radius: var(--radius-xs); }
.гр-почему p { margin: 4px 0; }
.гр-после { margin: 4px 0 6px; padding-left: 20px; }
.гр-после li { margin: 2px 0; }
.гр-заметка { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2) var(--s3); }
.гр-заметка span { flex: 1 1 360px; }
input.гр-число { width: 88px; }
/* Перенос позиций между работами (24.09): отметка в строке и одна форма на
   страницу, прилипшая к низу экрана, — выбор работы у руки, где бы ни была
   отмеченная строка. */
.гр-отметка { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 32px; cursor: pointer; }
.гр-отметка input { width: 18px; height: 18px; }
.гр-перенос { position: sticky; bottom: 0; z-index: 3; display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--s2) var(--s3); margin: var(--s4) 0; padding: var(--s3) var(--s4);
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-md); }
.гр-перенос label { font-weight: 600; }
.гр-перенос select { max-width: min(420px, 100%); }
@media (max-width: 720px) {
  input.гр-число { width: 64px; min-width: 0; }
  .гр-кал { --гр-имя: 132px; --гр-клетка: 36px; }
  .гр-даты { display: none; }
  .гр-имя { padding: 6px 8px; }
}
/* --- Сегодня: лента дел и быстрые переходы ----------------------------
   Облик «Меню и лента» (выбор владельца 23.09). Слева — что сделать сейчас:
   задачи и дела от системы карточками, срочное сверху, у каждой одна кнопка,
   у первой она залита. Справа — быстрые переходы в частые разделы. */
.сегодня { display: grid; gap: var(--s5); align-items: start; margin-top: var(--s2); }
@media (min-width: 1180px) { .сегодня { grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); gap: 32px; } }
.сг-лента { display: flex; flex-direction: column; gap: var(--s4); min-width: 0; }
.лента { display: flex; flex-direction: column; gap: 12px; }
.лента-карта {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 4px 16px; align-items: center;
  padding: 16px 18px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow); animation: лента-вход .38s cubic-bezier(.3, .7, .2, 1) both;
}
.лента-карта:nth-child(2) { animation-delay: .03s; } .лента-карта:nth-child(3) { animation-delay: .06s; }
.лента-карта:nth-child(4) { animation-delay: .09s; } .лента-карта:nth-child(n+5) { animation-delay: .12s; }
@keyframes лента-вход { from { opacity: 0; transform: translateY(6px); } }
.лента-карта:first-child { border-color: var(--line-strong); }
.лента-карта.ур-беда, .лента-карта.просрочка { box-shadow: inset 3px 0 0 var(--danger), var(--shadow); }
.лк-знак { display: grid; place-items: center; width: 44px; height: 44px; align-self: start; }
.лк-знак .ур-знак { width: 44px; height: 44px; border-radius: var(--radius-lg); }
.лк-знак .ур-знак svg { width: 22px; height: 22px; }
.лк-тело { min-width: 0; display: grid; gap: 3px; }
.лк-тело h3 { margin: 0; font: 600 16px/1.35 var(--sans); color: var(--fg); overflow-wrap: anywhere; }
.лк-тело h3 a { color: var(--fg); text-decoration: none; }
.лк-тело h3 a:hover { color: var(--accent); }
.лк-пояснение { margin: 0; color: var(--fg-soft); font-size: 15px; line-height: 1.45; max-width: none; }
.лк-мета { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; color: var(--muted); font-size: 15px; max-width: none; }
.лк-мета a { color: var(--muted); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.лк-мета a:hover { color: var(--fg); }
.лк-точка { color: var(--line-strong); }
.лк-ур { font-weight: 600; }
.лк-ур.беда { color: var(--danger); } .лк-ур.внимание { color: var(--warn); } .лк-ур.ждём { color: var(--info); } .лк-ур.задача { color: var(--fg-soft); } .лк-ур.настроить { color: var(--muted); }
.лк-действия { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.лк-действия form.inline { margin: 0; }
.лента-ещё { margin: 0; }
.лента-ещё a { font-weight: 500; }
.лента-пусто { display: grid; justify-items: center; gap: 6px; padding: 32px 20px; text-align: center; color: var(--muted);
  background: var(--panel); border: 1px dashed var(--line-strong); border-radius: var(--radius-lg); }
.лента-пусто svg { color: var(--ok); }
.лента-пусто h2 { margin: 0; color: var(--fg); font: 600 20px/1.3 var(--sans); }
.лента-пусто p { margin: 0 0 6px; max-width: 46ch; }
@media (max-width: 719px) {
  .лента-карта { grid-template-columns: 40px minmax(0, 1fr); padding: 14px; gap: 4px 12px; }
  .лк-знак, .лк-знак .ур-знак { width: 40px; height: 40px; }
  .лк-действия { grid-column: 1 / -1; justify-content: flex-start; margin-top: 8px; }
}

.сг-сбоку { display: flex; flex-direction: column; gap: var(--s4); min-width: 0; }
@media (min-width: 1180px) { .сг-сбоку { position: sticky; top: 76px; } }
.сг-быстро h2 { margin: 0 0 10px; font: 600 20px/1.3 var(--sans); }
.сг-быстро-список { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
@media (min-width: 1180px) { .сг-быстро-список { grid-template-columns: minmax(0, 1fr); } }
.сг-быстро-пункт {
  position: relative; display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px 14px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); color: var(--fg); text-decoration: none;
  transition: border-color .15s, transform .15s cubic-bezier(.3, .7, .2, 1), box-shadow .2s;
}
.сг-быстро-пункт:hover { border-color: var(--line-strong); box-shadow: var(--shadow-md); text-decoration: none; transform: translateY(-1px); }
.сг-быстро-пункт:active { transform: scale(.98); }
.бп-знак { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius); background: var(--panel-2); color: var(--fg-soft); }
.бп-т { flex: 1; min-width: 0; display: grid; line-height: 1.35; }
.бп-т b { font-weight: 500; font-size: 16px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.бп-т span { color: var(--muted); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.бп-точка { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--точка); }
.бп-поиск { margin-top: 10px; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0; border: 0; background: none;
  color: var(--muted); font: 400 15px/1.3 var(--sans); cursor: pointer; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 4px; }
.бп-поиск:hover { color: var(--fg); }
.бп-поиск kbd { padding: 3px 7px; border: 1px solid var(--line-strong); border-radius: var(--radius-xs); font: 500 13px/1 var(--sans); color: var(--fg-soft); text-decoration: none; }
@media (prefers-reduced-motion: reduce) { .лента-карта { animation: none; } .сг-быстро-пункт { transition: none; } }

/* --- Системные клавиши -------------------------------------------------
   Печать, выгрузка, загрузка, «+» — квадраты со значком у заголовка, перед
   главной кнопкой. Подпись всплывает при наведении и фокусе; редкое — в «⋯»
   строками. Так у заголовка остаётся одна залитая кнопка, а служебное не
   спорит с ней текстом. */
.page-head .page-actions { align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.сист { display: inline-flex; align-items: center; gap: 4px; padding: 3px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--panel); }
.сист + .btn, .сист + a.btn, .сист + button, .сист + form { margin-left: 4px; }
.сист form.сист-ф { display: contents; }
.сист-кн {
  position: relative; display: inline-grid; place-items: center; width: 34px; height: 34px; min-height: 34px; padding: 0;
  border: 0; border-radius: var(--radius); background: transparent; color: var(--fg-soft); cursor: pointer; box-shadow: none;
  transition: background .15s, color .15s;
}
.сист-кн:hover, .сист-ещё[open] > .сист-кн { background: var(--panel-2); color: var(--fg); text-decoration: none; }
.сист-кн:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.сист-кн svg { width: 18px; height: 18px; }
.сист-п {
  position: absolute; top: calc(100% + 8px); left: 50%; transform: translate(-50%, -2px); z-index: 30;
  padding: 5px 9px; border-radius: var(--radius-sm); background: var(--fg); color: var(--bg);
  font: 500 14px/1.2 var(--sans); white-space: nowrap; pointer-events: none; opacity: 0;
  transition: opacity .12s, transform .12s;
}
.сист-кн:hover > .сист-п, .сист-кн:focus-visible > .сист-п { opacity: 1; transform: translate(-50%, 0); }
.сист-ещё[open] > .сист-кн > .сист-п { opacity: 0; }
.сист-ещё { position: relative; }
.сист-ещё > summary { list-style: none; }
.сист-ещё > summary::-webkit-details-marker { display: none; }
.сист-меню {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 40; min-width: 240px; padding: 6px;
  display: grid; gap: 2px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
}
.сист-меню form.сист-ф { display: block; margin: 0; }
.сист-строка {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 8px 10px; border: 0; border-radius: var(--radius);
  background: none; color: var(--fg); font: 400 15px/1.3 var(--sans); text-align: left; cursor: pointer; box-shadow: none;
  text-decoration: none;
}
.сист-строка:hover { background: var(--panel-2); text-decoration: none; }
.сист-строка svg { flex: none; color: var(--fg-soft); }
@media (max-width: 820px) {
  .page-head .page-actions { justify-content: flex-start; }
  .сист-кн { width: 40px; height: 40px; min-height: 40px; }
  .сист-п { display: none; }
  /* На узком экране «⋯» раскрывается от левого края всей группы клавиш,
     а не от самой «⋯»: от неё список уезжал за правый край (24.09). */
  .сист { position: relative; }
  .сист-ещё { position: static; }
  .сист-меню { left: 0; right: auto; max-width: calc(100vw - 32px); }
}
@media (prefers-reduced-motion: reduce) { .сист-кн, .сист-п { transition: none; } }

/* Действие в строке таблицы значком: «привязать к позиции», «изменить».
   Подпись — во всплывающей подсказке и в имени кнопки для чтеца. */
td.act a.ряд-кн, td.act-wrap a.ряд-кн { width: 32px; min-height: 32px; padding: 0; color: var(--fg-soft); }
td.act a.ряд-кн:hover, td.act-wrap a.ряд-кн:hover { color: var(--accent); }
@media (max-width: 820px) { td.act a.ряд-кн, td.act-wrap a.ряд-кн { width: 40px; min-height: 40px; } }
/* Смета на обзоре объекта — свёрнутой строкой со сводкой: длинную смету
   не пролистывают, чтобы добраться до инструментов под ней. */
.смета-свёртка { margin-top: var(--s3); background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.смета-свёртка > summary {
  display: flex; align-items: center; gap: 16px; padding: 14px 18px; cursor: pointer; list-style: none;
}
.смета-свёртка > summary::-webkit-details-marker { display: none; }
.сс-что { flex: 1; min-width: 0; display: grid; gap: 2px; }
.сс-что b { font-size: 16px; font-weight: 600; }
.сс-что span { color: var(--muted); font-size: 15px; }
.сс-кн { flex: none; display: inline-flex; align-items: center; min-height: var(--h-ctl); padding: 0 16px; border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm); font-weight: 600; color: var(--fg); background: var(--panel); }
.смета-свёртка > summary:hover .сс-кн { background: var(--panel-2); }
.сс-закрыть, .смета-свёртка[open] .сс-открыть { display: none; }
.смета-свёртка[open] .сс-закрыть { display: inline; }
.смета-свёртка[open] > summary { border-bottom: 1px solid var(--line); }
.смета-свёртка > .wrap, .смета-свёртка > table { margin: 0; border: 0; border-radius: 0 0 var(--radius-lg) var(--radius-lg); box-shadow: none; }
.сс-низ { margin: 0; padding: 12px 18px; border-top: 1px solid var(--line); }
@media (max-width: 719px) { .смета-свёртка > summary { flex-wrap: wrap; } }

/* Шапка графы действий — тем же фоном, что вся шапка: сброс фона у ячейки
   действий (shema.js) оставлял в серой полосе белый зуб справа. */
thead th.act, thead th.act-wrap { background: var(--panel-2); }

/* --- Чат: окна, плашки, страница ------------------------------------
   Разбор чата 24.09: окна чата (новая тема, кто в чате, позвать,
   переименовать, удалить) были в прежнем облике — мелкие подписи 12 px,
   свои скругления. Теперь они как всплывающие окна сайта: крупный заголовок,
   подписи 14 px, поля 16 px, кнопки на всю ширину на телефоне. */
.ч-окно { position: fixed; inset: 0; z-index: 10000; background: rgba(12, 16, 22, .5);
  display: flex; align-items: center; justify-content: center; padding: 16px;
  animation: ч-окно-фон .16s ease both; }
@keyframes ч-окно-фон { from { opacity: 0; } }
.ч-окно-в { width: min(460px, 100%); max-height: calc(100vh - 32px); overflow-y: auto;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius-xl); padding: 22px 22px 18px; box-shadow: var(--shadow-lg);
  animation: ч-окно-вход .2s cubic-bezier(.3, .7, .2, 1) both; }
@keyframes ч-окно-вход { from { opacity: 0; transform: translateY(8px) scale(.98); } }
.ч-окно-ш { display: flex; align-items: flex-start; gap: 8px; }
.ч-окно-в h2 { margin: 2px 0 0; font-size: 19px; line-height: 1.3; flex: 1 1 auto; overflow-wrap: anywhere; }
.ч-окно-в .hint { margin: 8px 0 0; font-size: 15px; line-height: 1.45; color: var(--muted); }
.ч-окно-в .hint:empty { display: none; }
.ч-окно-х { width: 36px; height: 36px; min-height: 36px; flex: 0 0 auto; padding: 0; border: 0; background: transparent;
  color: var(--muted); border-radius: var(--radius-sm); display: inline-flex; align-items: center; justify-content: center; }
.ч-окно-х:hover { background: var(--panel-2); color: var(--fg); }
.ч-окно-п { margin-top: 16px; display: flex; flex-direction: column; gap: 14px; }
.ч-окно-п:empty { display: none; }
.ч-окно-п label { display: block; font-size: 14px; font-weight: 600; color: var(--fg-soft, var(--fg)); }
.ч-окно-п input, .ч-окно-п select { width: 100%; margin-top: 6px; font-size: 16px; }
.ч-окно-п select[multiple] { min-height: 132px; }
.ч-окно-к { display: flex; gap: 8px; justify-content: flex-end; margin-top: 20px; }
.ч-окно-к button { min-height: 44px; padding: 0 18px; border-radius: var(--radius-sm); }
.ч-уч-список { border: 1px solid var(--line); border-radius: var(--radius); padding: 4px; max-height: min(360px, 50vh); overflow-y: auto; }
.ч-уч-шапка { font-size: 14px; color: var(--muted); margin-bottom: 6px; }
.ч-уч { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 10px; font-size: 15px; border-radius: var(--radius-sm); min-height: 44px; }
.ч-уч + .ч-уч { border-top: 1px solid var(--line); }
a.ч-уч { color: var(--fg); text-decoration: none; }
a.ч-уч::after { content: '→'; color: var(--muted); }
a.ч-уч:hover { background: var(--panel-2); color: var(--accent); }
.ч-убрать { min-height: 34px; padding: 0 12px; font-size: 14px; background: transparent; color: var(--muted); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.ч-убрать:hover { color: var(--danger); border-color: var(--danger); }
.ч-позвать-сюда { align-self: flex-start; min-height: 40px; }
/* Список на повторное приглашение (24.09): мягкая плашка под списком
   участников, у каждой строки своя кнопка контуром, под списком тихая. */
.ч-снова { display: flex; flex-direction: column; gap: 8px; padding: 12px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--warn-soft); }
.ч-снова-т { font-size: 14px; line-height: 1.45; color: var(--fg-soft, var(--fg)); }
.ч-снова .ч-уч-список { background: var(--panel); max-height: min(240px, 40vh); }
.ч-снова .ч-уч span { min-width: 0; overflow-wrap: break-word; }
.ч-снова-позвать { flex: 0 0 auto; min-height: 34px; padding: 0 12px; font-size: 14px; }
.ч-снова-скрыть { align-self: flex-start; min-height: 36px; padding: 0 12px; font-size: 14px; }
@media (max-width: 640px) {
  .ч-окно { align-items: flex-end; padding: 0; }
  .ч-окно-в { width: 100%; border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    padding-bottom: calc(18px + env(safe-area-inset-bottom)); max-height: 88vh; }
  .ч-окно-к { flex-direction: column-reverse; }
  .ч-окно-к button { width: 100%; }
}

/* Файл тащат на чат — рамка показывает, что его примут. */
.ч-бросок { outline: 2px dashed var(--accent); outline-offset: -6px; }
.ч-превью { display: block; max-width: 100%; max-height: 240px; margin: 0 auto; border-radius: var(--radius); object-fit: contain; background: var(--panel-2); }
.ч-файлы { font-size: 14px; color: var(--muted); overflow-wrap: anywhere; }

/* Короткая плашка «Текст скопирован» — внизу по центру, уходит сама. */
.ч-плашка { position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom)); z-index: 10001;
  transform: translateX(-50%); padding: 10px 16px; border-radius: 999px; font-size: 15px;
  background: var(--fg); color: var(--bg); box-shadow: var(--shadow-md); pointer-events: none;
  animation: ч-плашка 1.8s ease both; }
@keyframes ч-плашка { 0% { opacity: 0; transform: translate(-50%, 6px); } 12%, 80% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; } }

/* Главная кнопка окна залита, как главные кнопки сайта; опасная — красная. */
.ч-окно-да { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); font-weight: 600; }
.ч-окно-да:hover { filter: brightness(1.06); background: var(--accent); }
.ч-окно-да.danger { background: var(--danger); border-color: var(--danger); color: #fff; }

/* Страница чата: высоту ставит сама страница, компонент занимает её целиком.
   Без display: block он оставался строчным, высота 100% ни к чему не
   относилась, и на телефоне поле ввода уезжало под нижнюю панель. */
.chat-frame { box-shadow: var(--shadow); }
.chat-frame > vue-advanced-chat, #ч-место > vue-advanced-chat { display: block; height: 100%; }
@media (max-width: 900px) {
  .chat-frame { border-radius: var(--radius-lg); }
}
/* На странице чата у телефона кнопка Ксении садилась на «отправить» и
   скрепку. Поднимаем её над полем ввода и делаем меньше: Ксению в чате и так
   зовут по имени, а кнопка остаётся для разговора один на один. */
@media (max-width: 900px) {
  body.стр-чат #ai-btn { bottom: calc(150px + env(safe-area-inset-bottom)); width: 40px; height: 40px; }
  body.стр-чат #ai-panel { bottom: calc(198px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
  .ч-окно, .ч-окно-в, .ч-плашка { animation: none; }
}
/* --- Поддержка (24.09) ------------------------------------------------
   Форма обращения и список своих — рядом на столе, друг под другом на
   телефоне. Очередь главного — карточками, ждущие дольше всех сверху.
   Обращение — переписка пузырями, как в чате: своё справа оттенком акцента,
   ответ поддержки слева с подписью. Скриншоты видны на месте. */
.пд-сетка { display: grid; gap: var(--s5); align-items: start; margin-top: var(--s3); }
@media (min-width: 1100px) { .пд-сетка { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 28px; } }
.пд-новое, .пд-мои { min-width: 0; }
.пд-новое h2, .пд-мои h2 { font-size: 18px; margin: 0 0 12px; }
.пд-новое { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 20px 20px 18px; box-shadow: var(--shadow); }

.пд-форма { display: flex; flex-direction: column; gap: 14px; }
.пд-форма label { display: block; font-size: 14px; font-weight: 600; }
.пд-форма input[type="text"], .пд-форма textarea { width: 100%; margin-top: 6px; font-size: 16px; }
.пд-форма textarea { min-height: 120px; resize: vertical; line-height: 1.5; }
.пд-необ { font-weight: 400; color: var(--muted); font-size: 13px; margin-left: 4px; }
.пд-скрыто { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Поле файлов: вся полоса — место, куда бросают файл и куда жмут. */
.пд-файлы { position: relative; }
.пд-файл-поле { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.пд-бросить { display: flex !important; align-items: center; gap: 12px; padding: 14px 16px;
  border: 1.5px dashed var(--line-strong); border-radius: var(--radius); background: var(--bg);
  color: var(--muted); font-weight: 400 !important; font-size: 14px !important; line-height: 1.4; cursor: pointer; }
.пд-бросить b { color: var(--fg); font-weight: 600; }
.пд-бросить svg { flex: 0 0 auto; color: var(--accent); }
.пд-бросить:hover, .пд-файлы.над .пд-бросить { border-color: var(--accent); background: var(--accent-soft); }
.пд-файл-поле:focus-visible + .пд-бросить { outline: 2px solid var(--accent); outline-offset: 2px; }
.пд-превью { display: flex; flex-wrap: wrap; gap: 10px; }
.пд-файлы.есть .пд-превью { margin-top: 10px; }
.пд-пр { position: relative; width: 96px; height: 72px; border-radius: var(--radius-sm); overflow: hidden;
  border: 1px solid var(--line); background: var(--panel-2); display: flex; align-items: center; justify-content: center; }
.пд-пр img { width: 100%; height: 100%; object-fit: cover; }
.пд-пр-имя { font-size: 12px; padding: 6px; text-align: center; overflow-wrap: anywhere; line-height: 1.25; }
.пд-убрать { position: absolute; top: 3px; right: 3px; width: 24px; height: 24px; min-height: 24px; padding: 0;
  border-radius: 50%; border: 0; background: rgba(0, 0, 0, .6); color: #fff; font-size: 16px; line-height: 1; }
.пд-низ { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.пд-низ .hint { margin: 0 auto 0 0; flex: 1 1 220px; font-size: 14px; overflow-wrap: anywhere; }
.пд-отправить { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); font-weight: 600; min-width: 140px; }
.пд-отправить:hover { filter: brightness(1.06); background: var(--accent); }
.пд-ошибка { margin: 0; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--danger-soft); color: var(--danger); font-size: 14px; }

/* Список обращений — карточки-ссылки. */
.пд-список { display: flex; flex-direction: column; gap: 10px; }
.пд-карта { display: grid; gap: 4px; padding: 14px 16px; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius-lg); color: var(--fg); text-decoration: none; position: relative; }
.пд-карта:hover { border-color: var(--line-strong); text-decoration: none; background: var(--panel-2); }
.пд-карта.новое { border-color: var(--accent); }
.пд-верх { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--muted); }
.пд-время { margin-left: auto; font-variant-numeric: tabular-nums; }
.пд-орг { font-weight: 600; color: var(--fg-soft, var(--fg)); overflow-wrap: anywhere; }
.пд-тема { font-size: 16px; line-height: 1.35; display: flex; align-items: center; gap: 8px; overflow-wrap: anywhere; }
.пд-точка { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: 0 0 auto; }
.пд-кусок { font-size: 14px; color: var(--muted); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.пд-кусок em { font-style: normal; color: var(--fg-soft, var(--fg)); }
.пд-вл { position: absolute; right: 14px; bottom: 12px; display: inline-flex; align-items: center; gap: 3px; font-size: 13px; color: var(--muted); }

/* Состояние обращения — чип. */
.пд-сост { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 999px; font-size: 13px; font-weight: 600;
  background: var(--panel-2); color: var(--muted); white-space: nowrap; }
.пд-сост.ждёт { background: var(--warn-soft); color: var(--warn); }
.пд-сост.ответ { background: var(--accent-soft); color: var(--accent); }
.пд-сост.закрыто { background: var(--ok-soft); color: var(--ok); }
.пд-отбор { margin: var(--s3) 0; }
.пд-отбор b { margin-left: 4px; }
.пд-пусто { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 48px 16px; color: var(--muted);
  border: 1px dashed var(--line); border-radius: var(--radius-lg); text-align: center; }
.пд-пусто p { margin: 0; font-size: 16px; }
.пд-кому { margin-top: var(--s5); font-size: 15px; }
.пд-кому summary { cursor: pointer; color: var(--muted); }
.пд-кому ul { margin: 10px 0; padding-left: 20px; }
.пд-нет { color: var(--warn); }

/* Обращение: лента и сведения сбоку. */
.пд-назад { margin: 0 0 6px; font-size: 14px; }
.пд-шапка h1 { overflow-wrap: anywhere; }
.пд-шапка .sub { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.пд-состояние { margin: 0; }
.пд-обращение { display: grid; gap: var(--s4); align-items: start; margin: var(--s3) 0 var(--s4); }
@media (min-width: 1100px) { .пд-обращение { grid-template-columns: minmax(0, 1fr) 300px; } }
.пд-лента { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.пд-сообщение { max-width: min(680px, 92%); align-self: flex-start; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius-lg) var(--radius-lg) var(--radius-lg) var(--radius-xs); padding: 12px 14px; box-shadow: var(--shadow); }
.пд-сообщение.моё { align-self: flex-end; background: var(--accent-soft); border-color: transparent; border-radius: var(--radius-lg) var(--radius-lg) var(--radius-xs) var(--radius-lg); }
.пд-сообщение header { display: flex; align-items: baseline; gap: 10px; font-size: 13px; margin-bottom: 4px; }
.пд-сообщение header b { color: var(--fg-soft, var(--fg)); }
.пд-сообщение.поддержка header b { color: var(--accent); }
.пд-сообщение time { color: var(--muted); margin-left: auto; white-space: nowrap; }
.пд-текст { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 15px; line-height: 1.5; }
.пд-снимки { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; margin-top: 8px; }
.пд-снимки a { display: block; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--line); background: var(--panel-2); }
.пд-снимки img { display: block; width: 100%; height: 120px; object-fit: cover; }
.пд-снимки a:only-child { grid-column: 1 / -1; }
.пд-снимки a:only-child img { height: auto; max-height: 360px; object-fit: contain; }
.пд-вложения { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.пд-вложения a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--panel); font-size: 14px; color: var(--fg); max-width: 100%; }
.пд-вложения a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.пд-вложения small { color: var(--muted); }
.пд-отметка { align-self: center; font-size: 13px; color: var(--muted); background: var(--panel-2); border-radius: 999px; padding: 4px 12px; }
.пд-сведения { margin: 0; padding: 16px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg);
  display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.пд-сведения dt { color: var(--muted); font-size: 13px; }
.пд-сведения dd { margin: 2px 0 0; overflow-wrap: anywhere; }
.пд-тех { font-size: 12.5px; color: var(--muted); }
.пд-ответ { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 16px; box-shadow: var(--shadow); }
.пд-ответ textarea { margin-top: 0; min-height: 96px; }
@media (max-width: 640px) {
  .пд-новое, .пд-ответ { padding: 14px; }
  .пд-сообщение { max-width: 100%; }
  .пд-низ button { flex: 1 1 100%; }
}
/* ── Главная: две колонки ──────────────────────────────────────────── */
.гв { --д-карта: var(--panel); --д-рамка: var(--line); --д-тень: none; --д-текст: var(--fg); --д-тихо: var(--muted); --д-сетка: var(--line);
  --д-р1: var(--accent); --д-р2: #0F9D8A; --д-плохо: var(--danger); --д-внимание: var(--warn); --д-хорошо: var(--ok); --д-число: var(--display);
  display: grid; gap: var(--s4); min-width: 0; max-width: 1240px; color: var(--fg); }
:root[data-theme="dark"] .гв { --д-р2: #3CC7B2; }
.гв a { color: inherit; text-decoration: none; }
.гв-шапка { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s3); flex-wrap: wrap; }
.гв-шапка span { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.гв-шапка h1 { margin: 2px 0 0; font-family: var(--display); font-size: 24px; line-height: 1.25; font-weight: 600; }

.гв-вн { display: grid; gap: var(--s3); padding: var(--s4); min-width: 0; }
.гв-вн header { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); }
.гв-вн header b { font-size: 15px; }
.гв-вн header a, .гв-стройки header a { display: inline-flex; align-items: center; gap: 2px; font-size: 14px; color: var(--muted); }
.гв-вн header a:hover, .гв-стройки header a:hover { color: var(--accent); }
.гв-вн-счёт { display: flex; gap: var(--s4); flex-wrap: wrap; }
.гв-вн-счёт a { display: grid; gap: 2px; }
.гв-вн-счёт b { font-family: var(--display); font-size: 28px; line-height: 1; font-weight: 600; font-variant-numeric: tabular-nums; }
.гв-вн-счёт span { font-size: 13px; color: var(--muted); }
.гв-вн-счёт .ур-беда b { color: var(--danger); }
.гв-вн-счёт .ур-внимание b { color: var(--warn); }
.гв-вн-счёт .ур-ждём b { color: var(--info); }
.гв-вн-первое { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; gap: var(--s3); align-items: center; padding: 10px var(--s3);
  border-radius: var(--radius-sm); background: var(--warn-soft); }
.гв-вн-первое.ур-беда { background: var(--danger-soft); }
.гв-вн-первое.ур-ждём { background: var(--info-soft); }
.гв-вн-первое > i { width: 8px; height: 8px; border-radius: 50%; background: var(--warn); }
.гв-вн-первое.ур-беда > i { background: var(--danger); }
.гв-вн-первое.ур-ждём > i { background: var(--info); }
.гв-вн-первое span { display: grid; min-width: 0; }
.гв-вн-первое b { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.гв-вн-первое small { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.гв-вн-первое em { font-style: normal; font-size: 13px; font-weight: 600; color: var(--accent); white-space: nowrap; }
.гв-вн.тихо { display: flex; align-items: center; gap: var(--s2); color: var(--ok); }
.гв-вн.тихо b { color: var(--fg); font-size: 15px; }

.гв-числа { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: var(--s4) 0; min-width: 0; }
.гв-число { display: grid; align-content: start; gap: 2px; padding: 0 var(--s4); border-left: 1px solid var(--line); min-width: 0; }
.гв-число:first-child { border-left: 0; }
.гв-число > span { font-size: 13px; color: var(--muted); }
.гв-число > b { font-family: var(--display); font-size: 26px; line-height: 1.15; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.гв-число > b small { font-family: var(--sans); font-size: 13px; font-weight: 500; color: var(--muted); margin-left: 4px; }
.гв-число > em { font-style: normal; font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.гв-число > em em { font-style: normal; font-weight: 600; color: var(--fg); }
.гв .вр-полоса { background: var(--accent); }
.гв .вр-ступень:nth-child(n+3) .вр-полоса { background: color-mix(in srgb, var(--accent) 70%, var(--panel)); }
.гв-число.тон-беда > b, .гв-число.тон-беда > em em { color: var(--danger); }
.гв-число.тон-внимание > b, .гв-число.тон-внимание > em em { color: var(--warn); }
.гв-число:hover > b { color: var(--accent); }

.гв-стройки { padding: var(--s3) 0 var(--s2); min-width: 0; }
.гв-стройки header { display: flex; justify-content: space-between; align-items: baseline; padding: 0 var(--s4) var(--s2); }
.гв-стройки h2 { margin: 0; font-size: 16px; font-weight: 600; }
.гв-стройки h2 span { color: var(--muted); font-weight: 400; }
.гв-стр { display: grid; grid-template-columns: minmax(0, 2fr) minmax(150px, 1.2fr) minmax(0, 1fr) 98px; gap: var(--s4); align-items: center;
  padding: 10px var(--s4); border-top: 1px solid var(--line); min-width: 0; }
a.гв-стр:hover { background: var(--panel-2); }
.гв-стр-шапка { padding-top: 6px; padding-bottom: 6px; font-size: 12px; color: var(--muted); }
.гв-стр-имя { display: grid; min-width: 0; }
.гв-стр-имя b { font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.гв-стр-имя small { font-size: 13px; color: var(--muted); }
.гв-ход { display: grid; grid-template-columns: minmax(0, 1fr) 40px; gap: var(--s2); align-items: center; }
.гв-ход b { font-size: 13px; text-align: right; font-variant-numeric: tabular-nums; }
.гв-полоса { position: relative; height: 8px; border-radius: var(--radius-xs); background: var(--bg-sunken); overflow: hidden; }
.гв-полоса i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: var(--radius-xs); transform-origin: 0 50%; animation: дш-ширь .9s cubic-bezier(.2,.8,.2,1) both; }
.гв-полоса i.в { background: color-mix(in srgb, var(--accent) 32%, transparent); }
.гв-полоса i.з { background: var(--accent); animation-delay: .15s; }
.гв-метки { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.гв-метки em { font-style: normal; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--panel-2); color: var(--fg-soft); white-space: nowrap; }
.гв-метки .м-беда { background: var(--danger-soft); color: var(--danger); }
.гв-метки .м-внимание { background: var(--warn-soft); color: var(--warn); }
.гв-метки .м-ок { background: var(--ok-soft); color: var(--ok); }
.гв-ритм svg { display: block; }
.гв-ритм .ст-есть { fill: var(--д-р2); }
.гв-ритм .ст-нет { fill: var(--line); }

.гв-анал { padding: var(--s3) var(--s4) var(--s4); min-width: 0; }
.гв-таб-в { position: absolute; opacity: 0; pointer-events: none; }
.гв-табы { display: flex; gap: 2px; flex-wrap: wrap; border-bottom: 1px solid var(--line); margin-bottom: var(--s4); }
.гв-табы label { padding: 8px 12px; font-size: 14px; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.гв-табы label:hover { color: var(--fg); }
.гв-панель { display: none; }
#gv-t-money:checked ~ .гв-панели .п-money, #gv-t-journal:checked ~ .гв-панели .п-journal, #gv-t-gantt:checked ~ .гв-панели .п-gantt,
#gv-t-rhythm:checked ~ .гв-панели .п-rhythm, #gv-t-buy:checked ~ .гв-панели .п-buy { display: block; }
#gv-t-money:checked ~ .гв-табы label[for="gv-t-money"], #gv-t-journal:checked ~ .гв-табы label[for="gv-t-journal"], #gv-t-gantt:checked ~ .гв-табы label[for="gv-t-gantt"],
#gv-t-rhythm:checked ~ .гв-табы label[for="gv-t-rhythm"], #gv-t-buy:checked ~ .гв-табы label[for="gv-t-buy"] { color: var(--fg); font-weight: 600; border-bottom-color: var(--accent); }
.гв-таб-в:focus-visible ~ .гв-табы { outline: 2px solid var(--accent); outline-offset: 2px; }
.гв-анал .дш-карта { background: transparent; border: 0; box-shadow: none; padding: 0; border-radius: 0; animation: none; }
.гв-анал .дш-карта > figcaption > b { display: none; }
.гв-анал .дш-карта > figcaption { justify-content: flex-end; }
.гв-деньги { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: var(--s6); align-items: start; }
.гв-деньги.одна { grid-template-columns: minmax(0, 1fr); }
.гв-деньги .дш-воронка > figcaption > b { display: inline; }
.гв-деньги .дш-воронка > figcaption { justify-content: space-between; }
.гв-пусто { margin: 0; }
.гв { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; }
.гв > .гв-шапка { grid-column: 1 / -1; }
.гв-основа { display: grid; gap: var(--s4); min-width: 0; }
.гв-сбоку { display: grid; gap: var(--s4); position: sticky; top: var(--s4); min-width: 0; }
.гв .гв-вн, .гв .гв-числа, .гв .гв-стройки, .гв .гв-анал, .гв .гв-сбоку .дш-карта {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.гв .гв-сбоку .дш-карта { padding: var(--s4); animation: none; }
.гв .гв-вн-счёт { gap: var(--s4); }
.гв .гв-число > em { white-space: normal; }
.гв .гв-число > b { font-size: 22px; }

/* ── Главная: графики во вкладках и колонке ───────────────────────── */
.дш-карта { background: var(--д-карта); border: 1px solid var(--д-рамка); border-radius: var(--radius); box-shadow: var(--д-тень); min-width: 0; }
.дш-карта { margin: 0; padding: var(--s4) var(--s5); animation: дш-всплыть .6s cubic-bezier(.2,.8,.2,1) both; }
.дш-карта figcaption, .дш-карта > h2 { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); flex-wrap: wrap; margin: 0 0 var(--s3); font-size: 16px; }
.дш-легенда { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; color: var(--д-тихо); }
.дш-легенда i { display: inline-block !important; width: 12px; height: 12px; border-radius: var(--radius-xs); margin-left: 6px; }
.лг-бар { background: var(--д-р1); }
.лг-линия { height: 3px !important; border-radius: var(--radius-xs) !important; background: var(--д-р2); }
.лг-факт { background: var(--д-р2); }
.лг-отст { background: var(--д-плохо); }
.лг-сег { width: 2px !important; height: 14px !important; background: var(--д-р1); }
.дш-чарт { display: block; width: 100%; height: auto; overflow: visible; }
.дш-сетка { stroke: var(--д-сетка); stroke-width: 1; }
.дш-ось { fill: var(--д-тихо); font-size: 12px; font-family: var(--sans); }
.дш-бар { fill: var(--д-р1); transform-box: fill-box; transform-origin: 50% 100%; animation: дш-рост .8s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i) * 60ms + .1s); }
.дш-бар.пусто { fill: var(--д-сетка); }
.дш-чарт g:hover .дш-бар { filter: brightness(1.15); }
.дш-мишень { fill: transparent; }
.дш-линия { fill: none; stroke: var(--д-р2); stroke-width: 2.5; stroke-linejoin: round; stroke-dasharray: 1; animation: дш-черта 1.4s .5s ease-out both; }
.дш-точка { fill: var(--д-карта); stroke: var(--д-р2); stroke-width: 2.5; animation: дш-появ .4s both; animation-delay: calc(var(--i) * 90ms + .9s); }
.вр-список { display: grid; gap: var(--s4); }
.вр-ступень { display: grid; grid-template-columns: minmax(0, 1fr) auto 44px; gap: 4px var(--s3); align-items: center; min-height: 32px; }
.вр-имя { grid-column: 1 / -1; }
.вр-дорожка { grid-column: 1; }
.вр-ступень:hover .вр-полоса { filter: brightness(1.12); }
.вр-имя { font-size: 14px; color: var(--д-тихо); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.вр-дорожка { height: 14px; border-radius: var(--radius-sm); background: var(--д-сетка); overflow: hidden; }
.вр-полоса { display: block; height: 100%; border-radius: var(--radius-sm); background: linear-gradient(90deg, var(--д-р1), color-mix(in srgb, var(--д-р1) 60%, var(--д-р2))); transform-origin: 0 50%; animation: дш-ширь 1s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i) * 120ms + .2s); }
.вр-ступень b { font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 15px; }
.вр-ступень em { font-style: normal; font-size: 13px; color: var(--д-тихо); text-align: right; }
.гт { position: relative; display: grid; }
.гт-шкала, .гт-строка { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); gap: var(--s3); align-items: center; }
.гт-шкала { height: 22px; }
.гт-шкала .гт-поле i { position: absolute; top: 0; font-style: normal; font-size: 12px; color: var(--д-тихо); padding-left: 4px; border-left: 1px solid var(--д-сетка); height: 100%; }
.гт-поле { position: relative; height: 100%; min-height: 26px; }
.гт-поле::after { content: ""; position: absolute; top: 0; bottom: 0; left: var(--сегодня); width: 2px; background: var(--д-р1); opacity: .85; }
.гт-объект { display: flex; gap: var(--s2); align-items: baseline; padding: var(--s3) 0 4px; font-weight: 600; font-size: 15px; border-top: 1px solid var(--д-сетка); }
.гт-объект em { font-style: normal; font-size: 13px; color: var(--д-плохо); }
.гт-имя { font-size: 13px; color: var(--д-тихо); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.гт-бар { position: absolute; top: 6px; height: 14px; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--д-р2) 22%, transparent); overflow: hidden; transform-origin: 0 50%; animation: дш-ширь .9s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i) * 45ms + .2s); }
.гт-бар i { display: block; height: 100%; background: var(--д-р2); border-radius: var(--radius-sm); }
.гт-бар.отстаёт { background: color-mix(in srgb, var(--д-плохо) 18%, transparent); box-shadow: inset 0 0 0 1.5px var(--д-плохо); }
.гт-бар.отстаёт i { background: var(--д-плохо); }
.гт-бар.готово { background: var(--д-хорошо); }
.гт-бар:hover { filter: brightness(1.1); }
.гт-бар.слева { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.гт-бар.справа { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.гт-шкала .гт-поле { overflow: hidden; }
.гт-объект .гт-ещё { margin-left: auto; font-size: 13px; font-weight: 500; color: var(--д-тихо); }
.гт-хвост { margin: var(--s3) 0 0; font-size: 13px; color: var(--д-тихо); }
.тк { display: grid; grid-template-columns: minmax(0, 160px) minmax(0, 1fr); gap: 6px var(--s3); align-items: center; }
.тк-имя { font-size: 13px; color: var(--д-тихо); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.тк-ряд { display: grid; grid-template-columns: repeat(28, minmax(0, 1fr)); gap: 3px; }
.тк-ряд i { display: block; height: 22px; }
.дш-легенда i[class^="тк-"] { aspect-ratio: 1; }
.тк-ряд i, .дш-легенда i[class^="тк-"] { border-radius: var(--radius-xs); animation: дш-появ .35s both; animation-delay: calc(var(--i, 0) * 9ms + .2s); }
.тк-0 { background: var(--д-сетка); }
.тк-1 { background: color-mix(in srgb, var(--д-р2) 30%, transparent); }
.тк-2 { background: color-mix(in srgb, var(--д-р2) 50%, transparent); }
.тк-3 { background: color-mix(in srgb, var(--д-р2) 75%, transparent); }
.тк-4 { background: var(--д-р2); }
.тк-ряд i.сег { outline: 2px solid var(--д-р1); outline-offset: 1px; }
@keyframes дш-рост { from { transform: scaleY(0); } }
@keyframes дш-ширь { from { transform: scaleX(0); } }
@keyframes дш-черта { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes дш-появ { from { opacity: 0; transform: scale(.6); } }
@keyframes дш-всплыть { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) { .гв * { animation: none !important; } }
@media (max-width: 1023px) {
  .гв { grid-template-columns: minmax(0, 1fr); }
  .гв-сбоку { display: contents; }
  .гв-сбоку > .гв-вн { order: -1; }
  .гв > .гв-шапка { order: -2; }
  .гв-числа { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--s4); }
  .гв-число:nth-child(odd) { border-left: 0; }
  .гв-деньги { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .дш-карта { padding: var(--s3) var(--s4); }
  .гт-шкала, .гт-строка { grid-template-columns: minmax(0, 96px) minmax(0, 1fr); gap: var(--s2); }
  .гт-имя { font-size: 12px; }
  .гт-шкала .гт-поле i:nth-child(even) { display: none; }
  .тк { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .тк-ряд { gap: 2px; margin-bottom: var(--s2); }
  .тк-ряд i { height: 18px; }
  .гв-шапка h1 { font-size: 20px; }
  .гв-число { padding: 0 var(--s3); }
  .гв-стр { grid-template-columns: minmax(0, 1fr) auto; gap: 6px var(--s3); }
  .гв-стр-шапка { display: none; }
  .гв-стр-имя { grid-column: 1; grid-row: 1; }
  .гв-ритм { grid-column: 2; grid-row: 1; }
  .гв-ход, .гв-метки { grid-column: 1 / -1; }
  .гв-метки:empty { display: none; }
  .гв-вн-первое { grid-template-columns: 8px minmax(0, 1fr); }
  .гв-вн-первое em { grid-column: 2; }
}
/* ── Облик «Тёплый минимал» ─────────────────────────────────────── */
:root[data-облик="тёплый"] {
  --bg: #F1EFEA; --bg-sunken: #F4F2EE; --panel: #FFFFFF; --panel-2: #F7F5F1;
  --line: #ECE8E1; --line-strong: #DCD6CC; --fg: #1A1D21; --fg-soft: #3E4248; --muted: #7A7E84;
  --radius-xs: 6px; --radius-sm: 12px; --radius: 18px; --radius-lg: 22px; --radius-xl: 26px;
  --shadow: 0 1px 2px rgba(40, 30, 20, .04), 0 10px 28px -18px rgba(40, 30, 20, .18);
  --display: "Onest", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --чёрный: #1A1D21; --чёрный-текст: #FFFFFF;
  --меню-фон: #FFFFFF; --меню-2: #F4F2EE; --меню-текст: #1A1D21; --меню-мягко: #3E4248; --меню-тихо: #8A8E94; --меню-линия: #EFEBE5;
  --стр-panel: #FFFFFF; --стр-panel-2: #F7F5F1; --стр-fg: #1A1D21; --стр-line: #ECE8E1; --стр-bg-sunken: #F4F2EE;
}
:root[data-облик="тёплый"][data-theme="dark"] {
  --bg: #141210; --bg-sunken: #1B1916; --panel: #1F1D1A; --panel-2: #26231F;
  --line: #2E2A25; --line-strong: #3B362F; --fg: #F2EFEA; --fg-soft: #D6D1CA; --muted: #9A948C;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 30px -18px rgba(0, 0, 0, .6);
  --чёрный: #F2EFEA; --чёрный-текст: #141210;
  --меню-фон: #1F1D1A; --меню-2: rgba(255, 255, 255, .05); --меню-текст: #F2EFEA; --меню-мягко: #D6D1CA; --меню-тихо: #9A948C; --меню-линия: rgba(255, 255, 255, .06);
  --стр-panel: #1F1D1A; --стр-panel-2: #26231F; --стр-fg: #F2EFEA; --стр-line: #2E2A25; --стр-bg-sunken: #1B1916;
}
:root[data-облик="тёплый"] body { background: var(--bg); }

/* Меню — светлая карточка на тёплом полотне, текущий пункт — чёрной пилюлей */
:root[data-облик="тёплый"] .панель {
  --line-strong: var(--стр-line); --accent: #D04A08; --accent-soft: rgba(224, 82, 11, .11); --bg-sunken: var(--стр-bg-sunken); color-scheme: normal;
  top: 12px; height: calc(100vh - 24px); margin: 12px 0 12px 12px; border-radius: var(--radius-xl); box-shadow: var(--shadow); border-right: 0;
}
:root[data-облик="тёплый"][data-theme="dark"] .панель { color-scheme: dark; --accent: #FF8A4C; }
:root[data-облик="тёплый"] .каркас .панель nav a[aria-current="page"] { background: var(--чёрный); color: var(--чёрный-текст); }
:root[data-облик="тёплый"] .панель nav a[aria-current="page"] .о-знак, :root[data-облик="тёплый"] .панель nav a[aria-current="page"] .о-имя { color: var(--чёрный-текст); }
:root[data-облик="тёплый"] .панель nav a[aria-current="page"]::before { display: none; }
:root[data-облик="тёплый"] .панель nav a, :root[data-облик="тёплый"] .п-гр-шапка, :root[data-облик="тёплый"] .п-ещё { border-radius: var(--radius-sm); }
:root[data-облик="тёплый"] .п-объект-выбор { border-radius: var(--radius); background: var(--panel-2); }
:root[data-облик="тёплый"] .панель .ава { background: var(--bg-sunken); color: var(--fg); }
:root[data-облик="тёплый"] .поиск-кн { border-radius: 999px; background: var(--panel); border-color: transparent; box-shadow: var(--shadow); }
:root[data-облик="тёплый"] .верх-иконка, :root[data-облик="тёплый"] .справка-кн { background: var(--panel); border-color: transparent; box-shadow: var(--shadow); }

/* Кнопки — пилюли; главная — чёрная, оранжевый остаётся числам и знакам */
:root[data-облик="тёплый"] button, :root[data-облик="тёплый"] .btn { border-radius: 999px; }
:root[data-облик="тёплый"] .card2 button[type=submit], :root[data-облик="тёплый"] form.upload button[type=submit], :root[data-облик="тёплый"] .дв-карта button[type=submit],
:root[data-облик="тёплый"] button.primary, :root[data-облик="тёплый"] .btn.primary {
  background: var(--чёрный); border-color: var(--чёрный); color: var(--чёрный-текст);
}
:root[data-облик="тёплый"] .btn.quiet, :root[data-облик="тёплый"] button:not(.primary):not([type=submit]) { border-color: var(--line-strong); }

/* Поля — мягкие, без жёсткой рамки */
:root[data-облик="тёплый"] input[type=text], :root[data-облик="тёплый"] input[type=number], :root[data-облик="тёплый"] input[type=search],
:root[data-облик="тёплый"] input[type=tel], :root[data-облик="тёплый"] input[type=email], :root[data-облик="тёплый"] input[type=password],
:root[data-облик="тёплый"] input[type=date], :root[data-облик="тёплый"] select, :root[data-облик="тёплый"] textarea {
  border-radius: var(--radius-sm); background: var(--panel-2); border-color: transparent;
}
:root[data-облик="тёплый"] input:focus, :root[data-облик="тёплый"] select:focus, :root[data-облик="тёплый"] textarea:focus { background: var(--panel); border-color: var(--line-strong); }

/* Карточки и таблицы — белые без рамок, отделены полотном и мягкой тенью */
:root[data-облик="тёплый"] .card2, :root[data-облик="тёплый"] details.tool, :root[data-облик="тёплый"] details.note-form, :root[data-облик="тёплый"] form.upload,
:root[data-облик="тёплый"] .empty, :root[data-облик="тёплый"] .note, :root[data-облик="тёплый"] .card, :root[data-облик="тёплый"] .плитка, :root[data-облик="тёплый"] .герой,
:root[data-облик="тёплый"] .чарт-карта, :root[data-облик="тёплый"] .встало, :root[data-облик="тёплый"] .объекты, :root[data-облик="тёплый"] .лента-карта,
:root[data-облик="тёплый"] .гв-вн, :root[data-облик="тёплый"] .гв-числа, :root[data-облик="тёплый"] .гв-стройки, :root[data-облик="тёплый"] .гв-анал, :root[data-облик="тёплый"] .гв .гв-сбоку .дш-карта {
  border-color: transparent; box-shadow: var(--shadow); border-radius: var(--radius-lg);
}
:root[data-облик="тёплый"] table.grid { border-collapse: separate; border-spacing: 0; background: var(--panel); border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow: hidden; }
:root[data-облик="тёплый"] table.grid thead th { background: var(--panel); }
:root[data-облик="тёплый"] table.grid th:first-child, :root[data-облик="тёплый"] table.grid td:first-child { padding-left: 14px; }
:root[data-облик="тёплый"] table.grid th:last-child, :root[data-облик="тёплый"] table.grid td:last-child { padding-right: 14px; }

/* Отбор и вкладки — пилюлями в мягкой подложке */
:root[data-облик="тёплый"] .сегменты { border: 0; border-radius: 999px; background: var(--bg-sunken); padding: 3px; gap: 2px; }
:root[data-облик="тёплый"] .сегменты a { border-left: 0; border-radius: 999px; min-height: 32px; }
:root[data-облик="тёплый"] .сегменты a[aria-current]:not([aria-current="false"]) { background: var(--panel); color: var(--fg); box-shadow: 0 1px 3px rgba(0, 0, 0, .08); }
:root[data-облик="тёплый"] .badge { border-radius: 999px; }

/* Заголовки — тем же гротеском, весом 600, без широкого Unbounded */
:root[data-облик="тёплый"] h1 { font-weight: 600; letter-spacing: -.02em; }

:root[data-облик="тёплый"] .tabs { background: var(--bg-sunken); border-radius: 999px; padding: 4px; gap: 2px; width: max-content; max-width: 100%; }
:root[data-облик="тёплый"] .tabs a { border-color: transparent; border-radius: 999px; background: transparent; min-height: 34px; }
:root[data-облик="тёплый"] .tabs a[aria-current="page"], :root[data-облик="тёплый"] .tabs a.on { background: var(--чёрный); color: var(--чёрный-текст); border-color: var(--чёрный); }

/* Главная «Тёплый минимал» */
.тм { display: grid; gap: var(--s4); max-width: 1280px; grid-template-columns: minmax(0, 1fr) !important; }
.тм-шапка { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.тм-шапка h1 { margin: 0; font-size: 28px; font-weight: 500; letter-spacing: -.02em; }
.тм-шапка h1 span { color: var(--muted); font-weight: 400; }
.тм-карта { position: relative; background: var(--panel); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: var(--s4) var(--s5); min-width: 0; color: inherit; text-decoration: none; }
.тм-ряд { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3); }
.тм-число { display: grid; gap: 6px; align-content: start; padding: var(--s4); }
a.тм-карта:hover { text-decoration: none; transform: translateY(-2px); transition: transform .2s; }
.тм-стрелка { position: absolute; top: 14px; right: 14px; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line-strong); display: grid; place-items: center; font-size: 14px; color: var(--muted); }
.тм-подпись { font-size: 14px; color: var(--muted); padding-right: 36px; }
.тм-число > b { font-size: 34px; font-weight: 500; letter-spacing: -.02em; line-height: 1.1; white-space: nowrap; font-variant-numeric: tabular-nums; }
.тм-число > b small { font-size: 14px; font-weight: 400; color: var(--muted); margin-left: 4px; }
.тм-чип { justify-self: start; font-style: normal; font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: var(--bg-sunken); color: var(--fg-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.тон-беда .тм-чип, .тм-чип.м-беда { background: var(--danger-soft); color: var(--danger); }
.тон-внимание .тм-чип, .тм-чип.м-внимание { background: var(--warn-soft); color: var(--warn); }
.тм-чип.м-ок { background: var(--ok-soft); color: var(--ok); }
.тм-число.тон-беда > b { color: var(--danger); }
.тм-число.герой { background: #D04A08; color: #fff; }
.тм-число.герой .тм-подпись, .тм-число.герой > b small { color: rgba(255, 255, 255, .82); }
.тм-число.герой .тм-стрелка { border-color: rgba(255, 255, 255, .45); color: #fff; }
.тм-число.герой .тм-чип { background: rgba(255, 255, 255, .2); color: #fff; }
.тм-сетка { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr); gap: var(--s3); align-items: start; }
.тм-заг { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); margin: 0 0 var(--s3); }
.тм-заг b { font-size: 16px; font-weight: 600; }
.тм-заг b span { color: var(--muted); font-weight: 400; }
.тм-заг a { font-size: 14px; color: var(--muted); }
.тм-заг a:hover { color: var(--accent); }
.тм-чарт { display: block; width: 100%; height: auto; overflow: visible; }
.тм-кап { transform-box: fill-box; transform-origin: 50% 100%; animation: дш-рост .8s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i) * 50ms + .1s); }
.тм-кап.а { fill: #D04A08; }
.тм-кап.о { fill: url(#тм-штрих); }
.тм-кап.нуль { fill: var(--line); }
.тм-штрих-ф { fill: rgba(208, 74, 8, .12); }
.тм-штрих-л { stroke: rgba(208, 74, 8, .45); stroke-width: 2; }
.тм-ось { fill: var(--muted); font-size: 12px; font-family: var(--sans); }
.тм-выноска rect { fill: var(--чёрный); }
.тм-выноска text { fill: var(--чёрный-текст); font-family: var(--sans); }
.тм-выноска .м { font-size: 11px; opacity: .8; }
.тм-выноска .ч { font-size: 15px; font-weight: 600; }
.тм-легенда { display: flex; gap: var(--s4); margin: var(--s2) 0 0; font-size: 13px; color: var(--muted); }
.тм-легенда i { display: inline-block; width: 12px; height: 12px; border-radius: var(--radius-xs); margin-right: 6px; vertical-align: -1px; }
.тм-легенда i.а { background: #D04A08; }
.тм-легенда i.о { background: repeating-linear-gradient(45deg, rgba(208, 74, 8, .45) 0 2px, rgba(208, 74, 8, .12) 2px 6px); }
.тм-вн { display: grid; gap: var(--s3); }
.тм-вн .тм-заг { margin: 0; }
.тм-вн-счёт { display: flex; gap: var(--s5); }
.тм-вн-счёт a { display: grid; gap: 2px; text-decoration: none; }
.тм-вн-счёт b { font-size: 30px; font-weight: 600; line-height: 1; }
.тм-вн-счёт span { font-size: 12px; color: var(--muted); }
.тм-вн-счёт .ур-беда b { color: var(--danger); }
.тм-вн-счёт .ур-внимание b { color: var(--warn); }
.тм-вн-счёт .ур-ждём b { color: var(--info); }
.тм-первое { display: grid; gap: 6px; padding: var(--s3); border-radius: var(--radius); background: var(--warn-soft); }
.тм-первое.ур-беда { background: var(--danger-soft); }
.тм-первое b { font-size: 14px; }
.тм-первое small { font-size: 13px; color: var(--muted); }
.тм-первое .btn { justify-self: start; min-height: 34px; padding: 0 14px; font-size: 13px; }
.тм-тихо { margin: 0; color: var(--ok); font-weight: 600; }
.тм-шкала { position: relative; display: grid; justify-items: center; }
.тм-шкала svg { width: 220px; max-width: 100%; height: auto; }
.тм-шк-д, .тм-шк-з { fill: none; stroke-width: 18; stroke-linecap: round; }
.тм-шк-д { stroke: var(--bg-sunken); }
.тм-шк-з { stroke: #D04A08; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--доля)); animation: дш-черта 1.2s .3s cubic-bezier(.2,.8,.2,1) both; }
.тм-шкала b { position: absolute; top: 52%; font-size: 26px; font-weight: 600; }
.тм-шкала span { font-size: 12px; color: var(--muted); margin-top: -6px; }
.тм-стр { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(120px, 1.4fr) 44px minmax(0, auto); gap: var(--s4); align-items: center; padding: 12px 0; border-top: 1px solid var(--line); color: inherit; text-decoration: none; }
.тм-стройки .тм-заг + .тм-стр { border-top: 0; }
a.тм-стр:hover .тм-стр-имя b { color: var(--accent); }
.тм-стр-имя { display: grid; min-width: 0; }
.тм-стр-имя b { font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.тм-стр-имя small { font-size: 12px; color: var(--muted); }
.тм-полоса { height: 8px; border-radius: 999px; background: var(--bg-sunken); overflow: hidden; }
.тм-полоса i { display: block; height: 100%; border-radius: 999px; background: #D04A08; transform-origin: 0 50%; animation: дш-ширь .9s cubic-bezier(.2,.8,.2,1) both; }
.тм-проц { font-size: 13px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.тм-метки { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.тм .гв-анал { padding: var(--s3) var(--s5) var(--s5); }
.тм .гв-табы { border-bottom: 0; background: var(--bg-sunken); border-radius: 999px; padding: 4px; width: max-content; max-width: 100%; gap: 2px; }
.тм .гв-табы label { border: 0; border-radius: 999px; margin: 0; padding: 6px 14px; }
.тм #gv-t-gantt:checked ~ .гв-табы label[for="gv-t-gantt"], .тм #gv-t-rhythm:checked ~ .гв-табы label[for="gv-t-rhythm"], .тм #gv-t-buy:checked ~ .гв-табы label[for="gv-t-buy"] { background: var(--panel); box-shadow: 0 1px 3px rgba(0, 0, 0, .08); }
.тм .дш-карта { --д-р1: #D04A08; --д-р2: var(--ok); --д-сетка: var(--bg-sunken); --д-тихо: var(--muted); --д-текст: var(--fg); --д-плохо: var(--danger); --д-хорошо: var(--ok); --д-карта: var(--panel); }
@media (prefers-reduced-motion: reduce) { .тм * { animation: none !important; } }
@media (max-width: 1023px) {
  .тм-ряд { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .тм-сетка { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .тм-шапка h1 { font-size: 22px; }
  .тм-шапка h1 span { display: block; font-size: 14px; }
  .тм-карта { padding: var(--s4); }
  .тм-число > b { font-size: 26px; }
  .тм-стр { grid-template-columns: minmax(0, 1fr) 44px; gap: 6px var(--s3); }
  .тм-полоса { grid-column: 1; }
  .тм-метки { grid-column: 1 / -1; justify-content: flex-start; }
  .тм-вн-счёт { gap: var(--s4); }
}

/* Шапка телефона — светлая, текст тёмный */
:root[data-облик="тёплый"] header.шапка-тел { --nav-fg: var(--fg); background: var(--panel); box-shadow: 0 1px 0 var(--line); }
:root[data-облик="тёплый"] .шт-я .ава { background: var(--bg-sunken); color: var(--fg); }
:root[data-облик="тёплый"] .шт-кн:active { background: var(--bg-sunken); }

/* Меню «Графит» со значками-плитками (выбор владельца 03.11): тёмная карточка
   на тёплом полотне, у разделов и групп — цветные плитки, как в iOS, текущий
   пункт — белой пилюлей. Числа у пунктов — пилюлями, жёлтая — где ждут. */
:root[data-облик="тёплый"] .панель {
  --меню-фон: #1C1E22; --panel: #1C1E22; --panel-2: rgba(255, 255, 255, .06); --fg: #F2EFEA; --fg-soft: #D9D5CF; --muted: #969AA0;
  --line: rgba(255, 255, 255, .08); --line-strong: rgba(255, 255, 255, .14); --bg-sunken: rgba(255, 255, 255, .08); --accent: #FF8A4C;
  color: #F2EFEA; color-scheme: dark;
  background: radial-gradient(130% 55% at 0% 0%, rgba(255, 138, 76, .14), transparent 62%), linear-gradient(180deg, #24272C 0%, #17191C 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 24px 48px -24px rgba(20, 16, 12, .55), 0 2px 6px rgba(20, 16, 12, .12);
}
:root[data-облик="тёплый"][data-theme="dark"] .панель {
  --меню-фон: #0D0C0B; --panel: #0D0C0B;
  background: radial-gradient(130% 55% at 0% 0%, rgba(255, 138, 76, .10), transparent 62%), linear-gradient(180deg, #0F0E0D 0%, #0A0908 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
}
:root[data-облик="тёплый"] .панель .brand { letter-spacing: .12em; font-size: 14px; }
:root[data-облик="тёплый"] .п-объект-выбор { border: 0; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); }
:root[data-облик="тёплый"] .п-подвал { border-top: 0; gap: 4px; }
:root[data-облик="тёплый"] .п-я { background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); }
:root[data-облик="тёплый"] .панель .ава { background: linear-gradient(135deg, #FF8A4C, #D04A08); color: #FFFFFF; box-shadow: 0 0 0 2px rgba(255, 255, 255, .12); }
:root[data-облик="тёплый"] .панель nav a:hover, :root[data-облик="тёплый"] .п-гр-шапка:hover, :root[data-облик="тёплый"] .п-ещё:hover { background: rgba(255, 255, 255, .06); }
:root[data-облик="тёплый"] .п-гр-шапка { font-weight: 600; }
:root[data-облик="тёплый"] .каркас .панель nav a[aria-current="page"] {
  background: linear-gradient(180deg, #FFFFFF, #F1EEE8); color: #1A1D21;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 8px 18px -8px rgba(0, 0, 0, .55);
}
:root[data-облик="тёплый"] .панель nav a[aria-current="page"] .о-имя { color: #1A1D21; }
:root[data-облик="тёплый"] .панель nav a .n { min-width: 24px; height: 22px; padding: 0 7px; display: inline-grid; place-items: center;
  border-radius: 999px; background: var(--bg-sunken); font-size: 12px; font-weight: 600; text-align: center; }
:root[data-облик="тёплый"] .панель nav a.warn:has(.n:not([hidden])) .о-имя::after { display: none; }
:root[data-облик="тёплый"] .панель nav a.warn .n { background: rgba(240, 180, 60, .18); color: #F2C46B; }
:root[data-облик="тёплый"] .каркас .панель nav a[aria-current="page"] .n { background: #F1EFEA; color: #1A1D21; }
/* Плитки: знак белым на цветном квадрате; у подпунктов знаков нет. */
:root[data-облик="тёплый"] .п-сайт a .о-знак, :root[data-облик="тёплый"] .п-гр-шапка .о-знак {
  width: 28px; height: 28px; display: inline-grid; place-items: center; border-radius: var(--radius-xs); color: #FFFFFF;
  background: linear-gradient(180deg, #6B7280, #4B5563); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 2px 6px -2px rgba(0, 0, 0, .5);
}
:root[data-облик="тёплый"] .п-сайт a .о-знак svg, :root[data-облик="тёплый"] .п-гр-шапка .о-знак svg { width: 16px; height: 16px; stroke-width: 2; }
:root[data-облик="тёплый"] .каркас .панель nav a[aria-current="page"] .о-знак { color: #FFFFFF; }
:root[data-облик="тёплый"] .панель .п-гр-в a .о-знак { display: none; }
:root[data-облик="тёплый"] .п-сайт a:nth-child(1) .о-знак { background: linear-gradient(180deg, #FF9A5C, #E2560F); }
:root[data-облик="тёплый"] .п-сайт a:nth-child(2) .о-знак { background: linear-gradient(180deg, #5A9BFF, #2563EB); }
:root[data-облик="тёплый"] [data-гр="о0"] .п-гр-шапка .о-знак { background: linear-gradient(180deg, #FFC24D, #E8930C); }
:root[data-облик="тёплый"] [data-гр="о1"] .п-гр-шапка .о-знак { background: linear-gradient(180deg, #34D3BF, #0F9F8C); }
:root[data-облик="тёплый"] [data-гр="о2"] .п-гр-шапка .о-знак { background: linear-gradient(180deg, #4ADE80, #16A34A); }
:root[data-облик="тёплый"] [data-гр="о3"] .п-гр-шапка .о-знак { background: linear-gradient(180deg, #A78BFA, #7C3AED); }
/* Подпункты раскрытой группы — веткой от плитки группы. */
:root[data-облик="тёплый"] .п-гр.открыта .п-гр-в { margin: 2px 0 6px 21px; padding-left: 8px; border-left: 1px solid rgba(255, 255, 255, .10); gap: 1px; }
/* Всплывающая группа узкой панели — светлая карточка: пункты в ней тоном страницы. */
html.панель-узкая:root[data-облик="тёплый"] .п-гр.всплыла .п-гр-в { margin: 0; padding-left: 0; border-left: 0; }
html.панель-узкая:root[data-облик="тёплый"] .п-гр.всплыла .п-гр-в a:hover { background: var(--panel-2); }
html.панель-узкая:root[data-облик="тёплый"] .каркас .п-гр.всплыла .п-гр-в a[aria-current="page"] { background: var(--accent-soft); box-shadow: none; }

@media (min-width: 1024px) {
  /* Строка поиска — на том же полотне, без своей полосы и черты, по краям
     содержимого: белая полоса у меню читалась приклеенной (снимок владельца 03.11). */
  :root[data-облик="тёплый"] .верх-строка { background: var(--bg); border-bottom: 0; min-height: 72px; padding: 12px 76px 0 24px; }
  :root[data-облик="тёплый"] .рядом { padding-right: 24px;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); }
  :root[data-облик="тёплый"] .рядом-заг { color: var(--muted); font-weight: 500; }
  :root[data-облик="тёплый"] .рядом a { background: var(--panel); color: var(--fg); border-color: transparent; box-shadow: var(--shadow); }
  :root[data-облик="тёплый"] .рядом a:hover { background: var(--чёрный); color: var(--чёрный-текст); }
  :root[data-облик="тёплый"] .панель nav a, :root[data-облик="тёплый"] .п-гр-шапка, :root[data-облик="тёплый"] .п-ещё { min-height: 40px; padding: 6px 10px 6px 8px; font-size: 15px; }
  :root[data-облик="тёплый"] .панель nav + nav { margin-top: 10px; }
  :root[data-облик="тёплый"] .панель .п-гр-в a { padding-left: 12px; min-height: 34px; }
  :root[data-облик="тёплый"] .п-подвал { padding: 8px 12px 12px; }
  :root[data-облик="тёплый"] .п-я { padding: 8px; }
  html.панель-узкая:root[data-облик="тёплый"] .панель nav a, html.панель-узкая:root[data-облик="тёплый"] .п-гр-шапка, html.панель-узкая:root[data-облик="тёплый"] .п-ещё { padding: 0; }
}