/* Ассистент — выезжающая панель справа.

   Не модалка по центру: ответ почти всегда ведёт в раздел, и человек
   должен видеть, куда попадёт. Платформа остаётся слева.

   Оформление плоское, как везде: блоки разделены линиями, без теней и
   скруглённых островов. */

.as {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  justify-content: flex-end;
  background: rgba(0, 0, 0, .28);
  opacity: 0;
  transition: opacity .16s var(--ease);
}
.as.on { opacity: 1; }
.as[hidden] { display: none; }

.as-panel {
  width: min(430px, 100vw);
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--card);
  border-left: 1px solid var(--line);
  transform: translateX(14px);
  transition: transform .16s var(--ease);
}
.as.on .as-panel { transform: none; }

.as-head {
  flex: none;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 15px 18px;
  border-bottom: 1px solid var(--line2);
}
.as-head b { font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
/* Честная метка: разбор вопроса пока простой, и человек должен это
   знать, а не думать, что ассистент понимает любую фразу. */
.as-beta {
  padding: 2px 7px;
  border-radius: 20px;
  background: var(--box-bg);
  color: var(--ink3);
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.as-x {
  margin-left: auto;
  border: 0; background: none; cursor: pointer;
  color: var(--ink3); font-size: 15px; line-height: 1;
  padding: 4px 6px; border-radius: 7px;
}
.as-x:hover { background: var(--box-bg); color: var(--ink); }

.as-body { flex: 1; overflow-y: auto; }

/* ── подсказка на пустой панели ─────────────────────────────── */
.as-hint { padding: 18px; color: var(--ink2); font-size: 12.5px; line-height: 1.5; }
.as-hint p { margin: 0 0 10px; }
.as-ex {
  display: block; width: 100%; text-align: left;
  margin-bottom: 7px; padding: 9px 11px;
  background: var(--raise); border: 1px solid var(--line2); border-radius: 9px;
  color: var(--ink); font: inherit; font-size: 12.5px; cursor: pointer;
}
.as-ex:hover { border-color: var(--brand); color: var(--brand-deep); }
.as-note { margin-top: 14px; color: var(--ink3); font-size: 11.5px; }

/* ── ответ ──────────────────────────────────────────────────── */
.as-ans { padding: 18px; }
.as-ttl { font-size: 14px; font-weight: 600; line-height: 1.35; }
.as-sub { margin-top: 3px; color: var(--ink2); font-size: 12px; }
.as-where {
  margin-top: 2px; color: var(--ink3); font-size: 11.5px;
}

/* Числа столбиком, а не в тексте: «осталось 300 из 1200» читается
   заметно хуже таблицы, а именно эти числа человек и пришёл узнать. */
.as-nums { margin-top: 15px; }
.as-row {
  display: flex; align-items: baseline; gap: 10px;
  padding: 6px 0;
  font-size: 12.5px; color: var(--ink2);
}
.as-row b { margin-left: auto; color: var(--ink); font-size: 13.5px; font-weight: 600; }
.as-row.dim, .as-row.dim b { color: var(--ink3); font-weight: 500; }
/* Источник под названием показателя: бриф требует, чтобы было видно,
   откуда число, а не только само число. */
.as-row span i {
  display: block; margin-top: 1px;
  font-style: normal; font-size: 10.5px; color: var(--ink3);
}
/* «Сколько из скольких» рядом с процентом. Процент никогда не стоит
   один — иначе 100% из одного дела читается как отличная работа. */
.as-cnt {
  flex: none; min-width: 66px; text-align: right;
  color: var(--ink3); font-size: 11.5px;
}
.as-row b + .as-cnt { margin-left: 0; }
.as-row b { margin-left: auto; }
/* Номер места в рейтинге — узкой колонкой, чтобы имена шли по одной
   вертикали независимо от того, одна цифра или две. */
.as-pl {
  display: inline-block; min-width: 20px;
  margin-right: 6px;
  color: var(--ink3); font-weight: 600;
}
.as-warn {
  margin-top: 13px; padding: 9px 11px;
  background: var(--box-bg); border-radius: 9px;
  color: var(--ink2); font-size: 11.5px; line-height: 1.45;
}

/* Три остатка отбиты линией: выше — что произошло, ниже — что осталось. */
.as-left {
  margin-top: 4px; padding-top: 10px;
  border-top: 1px solid var(--line2);
}
.as-left .as-row b { color: var(--brand-deep); }

.as-last {
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--line2);
  color: var(--ink2); font-size: 11.5px; line-height: 1.5;
}
.as-last.dim { color: var(--ink3); }

/* Ссылка, а не кнопка: это переход по адресу, и человек вправе открыть
   его в новой вкладке средним щелчком, как любую ссылку. */
.as-go {
  display: block; box-sizing: border-box;
  width: 100%; margin-top: 15px; padding: 10px;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--raise); color: var(--ink); text-decoration: none;
  text-align: center;
  font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.as-go:hover { border-color: var(--brand); color: var(--brand-deep); }

/* ── похожие ────────────────────────────────────────────────── */
/* Нашлось несколько — показываем, а не выбираем за человека. */
.as-more { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--line2); }
.as-more-t {
  margin-bottom: 8px; color: var(--ink3);
  font-size: 10.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .07em;
}
.as-alt {
  display: block; width: 100%; text-align: left;
  padding: 8px 0; border: 0; background: none; cursor: pointer;
  border-top: 1px solid var(--line2);
}
.as-alt:first-of-type { border-top: 0; }
.as-alt b { display: block; font-size: 12px; font-weight: 500; color: var(--ink); }
.as-alt i { display: block; margin-top: 2px; font-style: normal;
  font-size: 11px; color: var(--ink3); }
.as-alt:hover b { color: var(--brand-deep); }

.as-wait, .as-none { padding: 18px; color: var(--ink2); font-size: 12.5px; }
.as-none b { display: block; margin-bottom: 6px; color: var(--ink); font-size: 13.5px; }
.as-none p { margin: 0; line-height: 1.5; }

/* ── строка вопроса ─────────────────────────────────────────── */
.as-ask {
  flex: none; display: flex; gap: 8px;
  padding: 13px 18px;
  border-top: 1px solid var(--line2);
}
.as-ask input {
  flex: 1; min-width: 0;
  padding: 10px 12px;
  background: var(--raise); border: 1.5px solid transparent; border-radius: 10px;
  color: var(--ink); font: inherit; font-size: 13px; outline: none;
}
.as-ask input:focus { border-color: var(--brand); background: var(--card); }
.as-ask button {
  flex: none; width: 40px;
  border: 0; border-radius: 10px; cursor: pointer;
  background: var(--grad-brand); color: #FFF7F2;
  font: inherit; font-size: 15px;
}
.as-ask button:hover { filter: brightness(1.06); }

/* ── кнопка в шапке платформы ───────────────────────────────── */
/* Вопрос возникает там, где человек уже работает, поэтому вход в
   ассистента живёт в шапке и доступен из любого раздела. */
.ask-btn {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px 7px 12px;
  background: var(--raise); border: 1px solid var(--line2); border-radius: 9px;
  color: var(--ink3); font: inherit; font-size: 12.5px; cursor: pointer;
  transition: .15s var(--ease);
}
.ask-btn:hover { border-color: var(--brand); color: var(--ink2); }
.ask-btn svg {
  width: 14px; height: 14px; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.ask-btn kbd {
  padding: 2px 5px; border-radius: 5px;
  background: var(--box-bg); border: 1px solid var(--line2);
  color: var(--ink3); font: inherit; font-size: 10.5px;
}
@media (max-width: 900px) { .ask-btn span, .ask-btn kbd { display: none; } }

/* ── объекты ──────────────────────────────────────────────────
   Шапка, вкладки и таблицы приезжают из общего шаблона раздела
   (page.css). Здесь остаётся только то, чего в шаблоне нет и быть не
   должно: значки форматов, метки редакций, связки договора с проектами.

   Панель действий над списком: один акцент — «Загрузить»; всё
   остальное рядом и приглушённо, чтобы кнопки не спорили за внимание. */
/* ── окно загрузки ──────────────────────────────────────────
   Одно на все места, откуда грузят. Зона броска — label, а не div:
   нативное поле файла спрятано, но клик по подписи открывает его сам,
   без обработчика. */
.up-card { width: min(480px, 94vw); }
.up-drop {
  display: flex; flex-direction: column; align-items: center;
  gap: 6px; margin: 4px 0 14px; padding: 26px 20px;
  border: 1.5px dashed var(--line); border-radius: var(--r);
  background: var(--raise); cursor: pointer; text-align: center;
  transition: .15s var(--ease);
}
.up-drop:hover { border-color: var(--ink4); }
/* Пока файл тащат над окном — граница фирменная: видно, что бросать
   можно именно сюда, а не в любое место страницы. */
.up-drop.over { border-color: var(--brand); background: var(--brand-tint); }
.up-drop.has { border-style: solid; border-color: var(--ok); background: var(--card); }
.up-drop svg {
  width: 26px; height: 26px; fill: none; stroke: var(--ink3);
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.up-drop.has svg { stroke: var(--ok); }
.up-drop b { font-size: 13.5px; font-weight: 600; overflow-wrap: anywhere; }
.up-drop i { font-style: normal; font-size: 11.5px; color: var(--ink3); }
.up-card .sit-prog { margin-bottom: 12px; }
.sit-hint { font-size: 12px; color: var(--ink3); }
.sit-hint.bad { color: var(--bad); }
/* Полоса отправки. Проектный том грузится десятками секунд, и без неё
   человек решает, что всё повисло, и жмёт кнопку второй раз. */
.sit-prog {
  flex: 1 1 160px; height: 5px; border-radius: 999px;
  background: var(--box-bg); overflow: hidden;
}
.sit-prog i { display: block; height: 100%; width: 0; background: var(--brand);
              transition: width .15s linear; }

/* Строка документа: значок формата, название с приметами, кто и когда,
   действия. Раньше дата и автор стояли отдельными колонками и растягивали
   строку на пол-экрана пустотой.

   Раскладку в ряд делает вложенный блок, а не сама ячейка: display:flex
   на td отнимает у него роль table-cell — он перестаёт тянуться до
   высоты строки, и линия под ним повисает выше соседних. */
.sit-doc { display: flex; align-items: center; gap: 11px; }
.sit-docs tbody td { height: 58px; }
.sit-doc-t { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sit-doc-t b { color: var(--ink); font-size: 13px; font-weight: 600; }
.sit-doc-t i {
  font-style: normal; font-size: 11px; color: var(--ink3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sit-docs td.sit-who { white-space: nowrap; font-size: 12px; }
.sit-who i { display: block; font-style: normal; font-size: 11px; color: var(--ink3); }

/* Значок формата. Не украшение: в списке из десятка бумаг глаз ищет,
   где здесь excel, который можно разобрать, — цвет отвечает быстрее,
   чем расширение в подписи. */
.fi {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 9px;
  font-size: 9.5px; font-weight: 700; letter-spacing: .02em;
  text-transform: uppercase; color: var(--ink3);
  background: var(--box-bg); border: 1px solid var(--line2);
}
.fi-x { color: #1E7A4B; border-color: rgba(30, 122, 75, .3); }
.fi-w { color: #2B5CA8; border-color: rgba(43, 92, 168, .3); }
.fi-p { color: var(--bad); border-color: var(--bad-soft); }
.fi-i { color: var(--warn); border-color: var(--warn-soft); }

/* Сверка. Цветом отмечаем не «хорошо/плохо», а насколько уверенно
   нашлась пара: решает всё равно человек. */
.mrow.sure td { background: transparent; }
.mrow.maybe td { background: var(--warn-soft); }
.mrow.none td { background: var(--bad-soft); }
.mrow.off td { opacity: .45; text-decoration: line-through; }
.sit-sheet {
  display: flex; align-items: baseline; gap: 7px; padding: 5px 9px;
  border: 1px solid var(--line2); border-radius: var(--r-sm); cursor: pointer;
}
.sit-sheet:hover { border-color: var(--brand); }
.sit-sheet i { margin-left: auto; }

/* ── таблица позиций ─────────────────────────────────────────
   Сотня строк с полями ввода: строки здесь плотнее обычных, иначе
   таблица на экран не влезает вовсе. Всё остальное — из общего
   шаблона. */
.pos-tbl td.pos-name { color: var(--ink); }
/* Марка бывает длиной в строку («НАРТИС-И300-W133…-EHCM0a1732»). При
   заданных ширинах колонок она не переносится, а вылезает поверх
   соседних — обрезаем многоточием, целиком её видно в подсказке. */
.pos-tbl td.pos-brand {
  color: var(--ink3); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
/* Правленые строки видно сразу: слева полоса. Это ответ на вопрос
   «что здесь моё, а что из книги». */
.pos-tbl tr.ed .pos-name { box-shadow: inset 3px 0 0 var(--brand); }
.pos-calc { color: var(--ink2); font-variant-numeric: tabular-nums;
            white-space: nowrap; }

/* Поле правится на месте и в покое не выглядит полем: сотня рамок в
   таблице читается как решётка, а не как данные. Отступы ячейки и
   высоту строки задаёт page.css — они одинаковы для всех таблиц с
   правкой, а не только для позиций. */
/* min-width: 0 — колонки таблицы теперь заданы явно, и собственный
   минимум поля вылезал бы за узкую колонку «Кол-во». */
.pos-in {
  width: 100%; min-width: 0; padding: 5px 7px;
  background: transparent; border: 1px solid transparent;
  border-radius: var(--r-sm); color: var(--ink);
  font: inherit; font-size: 12.5px;
}
.pos-in.num { text-align: right; font-variant-numeric: tabular-nums; }
.pos-in:hover { border-color: var(--line2); }
.pos-in:focus {
  outline: none; border-color: var(--brand); background: var(--card);
  box-shadow: 0 0 0 3px var(--brand-soft);
}
.pos-in.bad { border-color: var(--bad); }

/* ── шапка ведомости ─────────────────────────────────────────
   Два яруса, как в файле заказчика: сверху «Стоимость единицы» и
   «Общая стоимость», под ними — материал, работа и что вышло. Иначе
   шесть чисел в строке читаются как шесть независимых цен.

   Нижний ярус липнет на высоту верхнего: оба ряда объявлены sticky, и
   без сдвига второй уехал бы под первый. */
.pos-tbl thead tr:nth-child(2) th { top: 36px; }
.pos-tbl thead th.grp {
  text-align: center; color: var(--ink2);
  border-left: 1px solid var(--line2); border-right: 1px solid var(--line2);
}
.pos-tbl thead th.src { border-right: 1px solid var(--line2); }
.pos-tbl thead th.src:first-of-type { border-left: 1px solid var(--line2); }
/* Левый блок — то, что прислал проектировщик, и трогать его нельзя.
   Подписан отдельно, чтобы это было видно без объяснений. */
.calc-tbl thead th.grp.spec { color: var(--ink3); border-left: 0; }
/* Второй ярус — без капители. Прописные шире строчных примерно на
   десятую, и «Русский свет» в колонку шириной семьдесят четыре пикселя
   не влезал, а обрезанное «РУССКИЙ С» не подпись, а загадка. */
.calc-tbl thead tr:nth-child(2) th {
  top: 30px; height: 34px;
  font-size: 10.5px; line-height: 1.15; letter-spacing: 0;
  text-transform: none; white-space: normal;
}
/* ── плотная сетка расчёта ───────────────────────────────────
   Пятнадцать колонок должны поместиться в экран целиком: расчёт читают,
   сравнивая цены поставщиков со стоимостью строки, а при горизонтальной
   прокрутке сравнивать нечего — половина чисел за краем. Отсюда мелкий
   шрифт, узкие отступы и линии по каждой колонке: тесная таблица
   держится линиями, а не воздухом. */
.calc-tbl { font-size: 12px; }
.calc-tbl th, .calc-tbl td { padding: 0 7px; }
.calc-tbl th:first-child, .calc-tbl td:first-child { padding-left: 14px; }
.calc-tbl th:last-child, .calc-tbl td:last-child { padding-right: 14px; }
.calc-tbl thead th { height: 30px; }
.calc-tbl tbody td {
  height: 34px; padding-top: 2px; padding-bottom: 2px;
  border-right: 1px solid var(--line2);
}
.calc-tbl tbody td:last-child { border-right: 0; }
.calc-tbl .pos-in { padding: 3px 5px; font-size: 12px; }
/* Наименование бывает в четыре строки. Держим два ряда: строка перестаёт
   расти вчетверо против соседних, а целиком название видно в подсказке. */
.calc-tbl td.pos-name {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; line-height: 1.3; white-space: normal;
}
/* Номер позиции — из ведомости, составной. Приглушён: это ориентир, а
   не значение, по которому что-то решают. */
/* Наценка на материал — прямо в шапке расчёта. Её крутят, глядя на
   итог, а не открывая окно и возвращаясь к цифрам по памяти. */
.mk {
  flex: none; align-self: center;
  display: flex; align-items: center; gap: 6px;
  margin-left: 18px; padding: 0 10px 0 12px;
  height: 34px; border: 1px solid var(--line2); border-radius: 9px;
  background: var(--raise);
}
.mk span { font-size: 10px; letter-spacing: .07em; text-transform: uppercase;
           color: var(--ink3); white-space: nowrap; }
.mk input {
  width: 44px; padding: 0; border: 0; background: none;
  color: var(--ink); font: inherit; font-size: 13px; font-weight: 600;
  text-align: right; outline: none; font-variant-numeric: tabular-nums;
}
.mk input.bad { color: var(--bad); }
.mk i { font-style: normal; color: var(--ink3); font-size: 12px; }
/* Материал с наценкой — то, что пойдёт заказчику. Отбит от справочных
   колонок поставщиков, чтобы не спутать одно с другим. */
.calc-tbl td.mat-run { border-left: 2px solid var(--line); }

/* Номер составной — «1.3.1», пять знаков, — и переноситься не должен:
   разорванный пополам, он читается как два разных номера. Но и вылезать
   за ячейку ему нельзя, поэтому кегль здесь меньше общего, а поля у́же:
   это ориентир, а не величина, которую сравнивают разрядами. */
.calc-tbl td.pos-no {
  color: var(--ink3); font-variant-numeric: tabular-nums;
  white-space: nowrap;
  font-size: 11px; letter-spacing: -.01em;
  padding-left: 10px; padding-right: 6px;
}
/* Правая колонка — то, ради чего таблицу и читают. */
.calc-tbl td.tot { color: var(--ink); font-weight: 600; }
.calc-tbl td.pos-calc { background: var(--raise); }

/* ── колонки поставщиков ─────────────────────────────────────
   Три цены рядом, чтобы сравнивать глазами. В счёт идёт выбранная —
   у неё и стоит поле ввода, потому что править руками просили именно
   выбранную. Остальные две остаются кнопками: нажал — выбрал. */
.calc-tbl td.mat { border-left: 1px solid var(--line2); }
.calc-tbl td.mat.on { background: var(--brand-tint); }
.mat-pick, .mat-add {
  width: 100%; padding: 4px 6px;
  border: 1px solid transparent; border-radius: var(--r-sm);
  background: none; color: var(--ink2);
  font: inherit; font-size: 12.5px; text-align: right; cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.mat-pick:hover, .mat-add:hover {
  border-color: var(--brand); background: var(--card); color: var(--brand-deep);
}
/* Цены у поставщика нет вовсе. Прочерк остаётся кнопкой: по нему
   открывают колонку под ручной ввод. */
.mat-add { color: var(--ink4); }
/* Сошлось не наверняка — видно у самой цифры: примечание под таблицей
   на сотне строк не читает никто. */
.calc-tbl td.mat.doubt .mat-pick { color: var(--warn); }
.calc-tbl td.mat .q {
  margin-left: 3px; font-style: normal; font-size: 10px; font-weight: 700;
  vertical-align: super; opacity: .8;
}
/* ── файл и то, что из него достали ──────────────────────────
   Разбор порождает новый документ, а не открывает окно: присланный
   PDF — исходник, его не меняют, а таблица позиций с ценами и
   калькуляцией наша и живёт своей жизнью. Поэтому она отдельной
   строкой под родителем, со сдвигом и уголком связи, — иначе не видно,
   откуда взялись позиции. */
.sit-docs tr.kid > td { border-top: 0; }
.sit-docs tr.has-kid > td { border-bottom: 0; }
.sit-docs tr.kid > td:first-child { padding-left: calc(var(--gut) + 30px); }
/* Уголок от родителя к потомку. Рисуем рамкой на псевдоэлементе: линия
   в разметке была бы пустой ячейкой, которую читает озвучка. */
.sit-docs tr.kid > td:first-child::before {
  content: ""; position: absolute;
  left: calc(var(--gut) + 12px); top: 0; bottom: 50%;
  width: 11px;
  border-left: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-bottom-left-radius: 6px;
}
.sit-docs tr.kid > td:first-child { position: relative; }
.sit-docs tr.kid { background: var(--raise); }
.sit-docs tr.kid .sit-doc-t b { color: var(--ink); }
/* Значок расчёта — не расширение файла, а таблица: этот документ не
   лежит файлом нигде, он собран нами. */
.fi.fi-calc {
  display: inline-grid; place-items: center;
  background: var(--brand-tint); color: var(--brand-deep);
}
.fi.fi-calc svg {
  width: 17px; height: 17px; fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}

/* Кнопка в строке таблицы — та же, что в полосе раздела, но ниже:
   строки плотные, и полноразмерная их распирает. */
.btn-ghost.sm, .btn-brand.sm {
  height: 28px; padding: 0 11px; font-size: 12px; border-radius: 8px;
}
.btn-brand.sm svg, .btn-ghost.sm svg { width: 14px; height: 14px; }

/* Скачать и убрать — обслуживание, а не работа: значка достаточно.
   Приглушены, пока не наведёшь, чтобы не спорить с главным действием
   строки. */
.ico {
  display: inline-grid; place-items: center;
  width: 28px; height: 28px; margin-left: 4px; padding: 0;
  border: 1px solid transparent; border-radius: 8px;
  background: none; color: var(--ink4); cursor: pointer;
  transition: .15s var(--ease);
}
.ico svg {
  width: 16px; height: 16px; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.tbl tr:hover .ico { color: var(--ink3); }
.ico:hover { border-color: var(--line); background: var(--card);
             color: var(--ink) !important; }
.ico.warn:hover { border-color: var(--bad); color: var(--bad) !important; }

/* ── стадия объекта ──────────────────────────────────────────
   Не подпись, а переключатель: нажал — поменял, по кругу. Три значения
   выпадающего списка не стоят, а цвет отличает их быстрее слова. */
.st {
  display: inline-block; padding: 3px 9px; border-radius: 999px;
  border: 1px solid transparent; font: inherit; font-size: 11.5px;
  line-height: 16px; white-space: nowrap;
}
button.st { cursor: pointer; }
button.st:hover { filter: brightness(.97); border-color: currentColor; }
.st-tender { background: var(--warn-soft); color: var(--warn); }
.st-work { background: var(--brand-tint); color: var(--brand-deep); }
.st-done { background: var(--ok-soft); color: var(--ok); }

/* Отбор по стадии — тремя кнопками подряд, а не списком: их всего три,
   и видеть все разом полезнее, чем открывать перечень ради одной. */
.seg { display: inline-flex; border: 1px solid var(--line2); border-radius: 9px;
       overflow: hidden; }
.seg-b {
  padding: 0 11px; height: 34px; border: 0; border-left: 1px solid var(--line2);
  background: var(--card); color: var(--ink3);
  font: inherit; font-size: 12.5px; cursor: pointer; white-space: nowrap;
}
.seg-b:first-child { border-left: 0; }
.seg-b:hover { background: var(--raise); color: var(--ink); }
.seg-b.on { background: var(--raise); color: var(--ink); font-weight: 600; }
.seg-b.on.st-tender { color: var(--warn); }
.seg-b.on.st-work { color: var(--brand-deep); }
.seg-b.on.st-done { color: var(--ok); }

/* Подобранная расценка — под ценой работы, той же меткой, что и цены
   поставщиков: и то и другое найдено, а не решено. */
.calc-tbl .offers {
  display: flex; justify-content: flex-end; gap: 3px; margin-top: 2px;
}
.offer-chip {
  padding: 1px 5px; border: 1px solid var(--line2); border-radius: 6px;
  background: var(--raise); color: var(--ink3);
  font: inherit; font-size: 10.5px; line-height: 15px;
  white-space: nowrap; cursor: pointer; font-variant-numeric: tabular-nums;
}
.offer-chip:hover {
  border-color: var(--brand); background: var(--brand-tint);
  color: var(--brand-deep);
}
.offer-chip.doubt { color: var(--warn); border-color: var(--warn-soft); }

/* Подписи верхнего яруса означают источник — тем же, чем в файле
   заказчика был цвет: откуда взялось число, видно до того, как его
   станут проверять. */
.calc-tbl thead th.grp.lk { color: var(--brand-deep); }
.calc-tbl thead th.grp.adc { color: var(--warn); }
.calc-tbl thead th.grp.calc { color: var(--ok); }

/* Сколько бумаг приложено. Связь видна с обеих сторон: загрузил
   документ вида «Проект» — счётчик у проекта вырос. */
.sit-doccount {
  display: inline-block; min-width: 22px; padding: 1px 7px;
  border-radius: 999px; text-align: center;
  background: var(--box-bg); border: 1px solid var(--line2);
  font-size: 11px; line-height: 17px; color: var(--ink2);
}

/* Действующая редакция в строке договора или проекта. */
.sit-rev { display: flex; flex-direction: column; gap: 1px; align-items: flex-start; }
.sit-rev b { font-weight: 600; color: var(--ink); }
/* Отрицательное поле гасит внутренний отступ кнопки: без него подпись
   сверху и действие под ней стоят на разных вертикалях. */
.sit-rev .lnk { margin-left: -8px; }
.sit-revs td { padding: 7px 10px; border-bottom: 1px solid var(--line2); }
.sit-cur {
  padding: 1px 7px; border-radius: 999px; font-size: 10.5px;
  background: var(--ok-soft); color: var(--ok); white-space: nowrap;
}
/* Метка редакции у файла: действующая выделена, прежние приглушены —
   в списке из пяти калькуляций иначе не понять, по какой работают. */
.sit-revtag {
  display: inline-block; margin-left: 6px; padding: 0 7px;
  border-radius: 999px; font-size: 10.5px; line-height: 17px;
  border: 1px solid var(--line2); color: var(--ink3);
}
.sit-revtag.on { border-color: var(--ok-soft); color: var(--ok); }

/* Связка договора с проектами — набор галочек, а не выпадающий список:
   у договора бывает несколько проектов и наоборот.

   Сама галочка спрятана: рядом с меткой она вдвое выше её текста и
   рисуется движком ОС, то есть выбивается из оформления. Состояние
   несёт метка целиком — заливкой и знаком слева. */
.sit-links { display: flex; flex-wrap: wrap; gap: 4px; }
.sit-link {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 0 9px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line2); background: var(--box-bg);
  color: var(--ink2);
  font-size: 11px; line-height: 19px; white-space: nowrap;
  transition: .15s var(--ease);
}
.sit-link::before {
  content: "＋"; font-size: 9px; color: var(--ink3);
}
.sit-link:hover { border-color: var(--line); color: var(--ink); }
.sit-link.on {
  border-color: var(--brand); background: var(--brand-tint);
  color: var(--brand-deep);
}
.sit-link.on::before { content: "✓"; color: var(--brand); }
.sit-link:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 1px; }
.sit-link input { position: absolute; width: 1px; height: 1px; opacity: 0; }

/* ── контрагенты ──────────────────────────────────────────────
   Список приезжает из общего шаблона (page.css); здесь — карточка и
   характеристики.

   Описание под названием: единственное поле, которое читают глазами,
   остальные сверяют. Осталось для окон — в списке ту же роль играет
   .t-sub из шаблона. */
.cnt-note {
  display: block; margin-top: 2px;
  font-style: normal; font-size: 11px; color: var(--ink3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 40ch;
}
/* Чего не хватает — приглушённо, а не красным: пустой ИНН у нового
   поставщика это нормальный рабочий этап, а не ошибка. Кричать здесь
   значит приучить не замечать настоящие предупреждения. */
.cnt-gap { color: var(--ink3); font-size: 12px; }
.cnt-ok { color: var(--ok); }
.cnt-card { width: min(620px, 94vw); max-height: 88vh; overflow-y: auto; }
/* Реквизиты в две колонки: по одному в строку карточка вытягивается
   на два экрана, и банк уезжает под сгиб. */
.cnt-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 11px; margin-top: 11px;
}
/* Подписи групп. Порядок полей был осмысленным и раньше, но пятнадцать
   подряд читались сплошной стеной — разделители дают глазу опору. */
.cnt-group { margin-top: 16px; }
.cnt-group h4 {
  margin: 0; padding-bottom: 5px;
  border-bottom: 1px solid var(--line2);
  font: 600 11px var(--sans); letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink3);
}
/* Адрес и полное наименование в половину ширины обрезаются на середине,
   а их читают целиком, а не сверяют по цифрам. */
.cnt-grid .fld.wide { grid-column: 1 / -1; }

/* Поле с кнопкой рядом — «Заполнить по ИНН». Кнопка не переносится и не
   сжимается: она подписана словами, а не значком. */
.fld-row { display: flex; gap: 6px; align-items: center; }
.fld-row input { flex: 1; min-width: 0; }
.cnt-lookup { flex: 0 0 auto; white-space: nowrap; padding: 0 12px; font-size: 12px; }
.cnt-lookup[disabled] { opacity: .6; cursor: default; }

/* Свободные характеристики. Название уже́ значения: названия короткие
   («Отсрочка», «Склад»), а в значении бывает фраза целиком. */
/* Плотнее остальных полей карточки: характеристик бывает под два
   десятка, и с общими отступами список уезжает на второй экран. */
.cnt-props { display: flex; flex-direction: column; gap: 5px; margin-top: 9px; }
.cnt-prop { display: grid; grid-template-columns: 4fr 6fr auto; gap: 5px; }
.cnt-prop input {
  width: 100%; height: 30px; padding: 0 9px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 9px; color: var(--ink);
  font: 400 12.5px var(--sans);
}
.cnt-prop input:focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}
/* Крестик крупнее обычного действия и без подложки — он стоит вплотную
   к полю. Два класса в селекторе, чтобы перебить общий вид .lnk. */
.cnt-prop .cnt-prop-del {
  padding: 0 8px; font-size: 17px; line-height: 1;
  border: 0; border-radius: 7px; background: none; cursor: pointer;
  color: var(--ink3);
}
.cnt-prop .cnt-prop-del:hover { color: var(--bad); background: var(--bad-soft); }
.cnt-card .cnt-addprop { margin-top: 9px; margin-left: -8px; font-size: 12px; }
/* На узком экране пара встаёт в два ряда: три поля на 320px ужимаются
   до нечитаемых огрызков. Позиции задаём явно — иначе крестик уезжает
   третьим рядом и растягивается на всю ширину. */
@media (max-width: 560px) {
  .cnt-prop { grid-template-columns: 1fr auto; }
  .cnt-prop .cnt-prop-n   { grid-column: 1; grid-row: 1; }
  .cnt-prop .cnt-prop-del { grid-column: 2; grid-row: 1; }
  .cnt-prop .cnt-prop-v   { grid-column: 1 / -1; grid-row: 2; }
}
.cnt-card textarea {
  width: 100%; padding: 8px 11px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 10px; color: var(--ink);
  font: 400 13px var(--sans); line-height: 1.45; resize: vertical;
}
.cnt-card textarea:focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}
.pf-modal-foot .grow { flex: 1; }

/* Тип и ИНН переносить нельзя: «Поставщик» разрывается пополам и держит
   всю строку вдвое выше, а ИНН — это число, и число, разорванное между
   строками, читается как два разных. Ширины колонок задаёт colgroup в
   разметке: там их видно рядом с самими колонками. */
.cnt-tbl td:nth-child(2),
.cnt-tbl td:nth-child(3) { white-space: nowrap; }

/* Метки характеристик. Компактно и в несколько рядов: две-три коротких
   пары занимают меньше места, чем одна развёрнутая фраза. */
.cnt-chips { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.cnt-chip {
  display: inline-flex; align-items: baseline; gap: 5px;
  max-width: 100%; padding: 1px 8px;
  background: var(--box-bg); border: 1px solid var(--line2);
  border-radius: 999px;
  font-size: 11px; line-height: 18px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
/* Название приглушено: в метке важно значение, имя нужно лишь чтобы
   понять, о чём оно. */
.cnt-chip i { font-style: normal; color: var(--ink3); }
.cnt-chip-add {
  padding: 0 7px; line-height: 18px;
  border: 1px dashed var(--line); border-radius: 999px;
  background: none; cursor: pointer;
  color: var(--ink3); font: inherit; font-size: 12px;
}
.cnt-chip-add:hover { color: var(--brand-deep); border-color: var(--brand); }

/* Форма на месте кнопки «+». Поля узкие намеренно: сюда пишут «14 дней»
   и «Екатеринбург», а не абзац. */
.cnt-chip-new { display: inline-flex; gap: 3px; align-items: center; }
.cnt-chip-new input {
  width: 92px; padding: 2px 7px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-sm); color: var(--ink);
  font: 400 11px var(--sans);
}
.cnt-chip-new input:focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 2px var(--brand-soft);
}
.cnt-chip-new.bad input { border-color: var(--bad); }
.cnt-chip-ok, .cnt-chip-no {
  padding: 0 5px; line-height: 18px;
  border: 0; background: none; cursor: pointer;
  color: var(--ink3); font: inherit; font-size: 13px;
}
.cnt-chip-ok:hover { color: var(--ok); }
.cnt-chip-no:hover { color: var(--bad); }
.cnt-chip-ok[disabled] { opacity: .5; cursor: default; }
/* Ячейка с метками дышит своими отступами: меток бывает три ряда, и
   общая высота строки её только растянула бы. */
.cnt-tbl td.cnt-pcell { padding-top: 8px; padding-bottom: 8px; }

/* Единица цены не сошлась с единицей позиции. Цену видно — по ней
   сверяются, — но в счёт она не пошла, и это должно быть заметно: молча
   пропущенная строка выглядит как забытая. */
.calc-tbl td.mat.clash { background: var(--warn-soft); }
.calc-tbl td.mat.clash .mat-pick { color: var(--warn); }
.calc-tbl .q.clash-mark {
  display: inline-block; margin-left: 3px; padding: 0 4px;
  border-radius: 5px; background: var(--warn-soft); color: var(--warn);
  font-style: normal; font-size: 9.5px; font-weight: 700;
  vertical-align: middle;
}

/* ── прайс материалов ────────────────────────────────────────
   Возраст цены цветом. Три недели назад взятая цена материала — уже не
   цена, и единственный способ увидеть это в списке на три сотни строк —
   заливка. К расценкам на работы такое не прикручено намеренно: они не
   протухают, и цветные строки там стали бы шумом. */
.mat-tbl td.mat-p { border-left: 1px solid var(--line2); position: relative; }
.mat-tbl td.mat-p.fresh { background: var(--ok-soft); }
.mat-tbl td.mat-p.warm { background: var(--warn-soft); }
.mat-tbl td.mat-p.stale { background: var(--bad-soft); }
.mat-tbl td.mat-p .when {
  display: block; margin-top: -2px;
  font-style: normal; font-size: 9.5px; color: var(--ink3);
  text-align: right; padding-right: 7px;
}
.mat-tbl td.mat-p.stale .when { color: var(--bad); font-weight: 600; }

/* Вариации названий — под самим названием, мелко и в строку. Ради них
   справочник и нужен: позицию помнят так, как её называет свой
   поставщик, и найтись она должна любым написанием. */
.mat-name { padding-top: 6px; padding-bottom: 6px; }
.mat-alt { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 3px; }
.mat-alt .alt {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 1px 6px; border-radius: 6px;
  background: var(--raise); border: 1px solid var(--line2);
  font-size: 10.5px; color: var(--ink3);
}
.mat-alt .alt b {
  color: var(--ink4); cursor: pointer; font-weight: 400; padding: 0 1px;
}
.mat-alt .alt b:hover { color: var(--bad); }
.mat-alt .alt.add {
  cursor: pointer; border-style: dashed; color: var(--ink4);
  font: inherit; font-size: 10.5px;
}
.mat-alt .alt.add:hover { border-color: var(--brand); color: var(--brand-deep); }