/* «Тендерный помощник» — дизайн-система «Проектная документация».
   Мир темы: чертёжная рамка (ГОСТ 2.104), унифицированные формы (КС-2),
   штамповая синь, сурик для пометок «заполнить вручную».
   Шрифты: Oswald (узкая техническая надпись), Golos Text (гос-сервисы),
   PT Mono (индексы форм, графы, числа). */

:root {
  --paper: #eef0ec;        /* ватман, холодный */
  --sheet: #fdfdfb;        /* лист */
  --ink: #1e2733;          /* типографская чернота */
  --ink-soft: #5b6673;     /* пояснения */
  --ruled: #b9c2cc;        /* линовка рамок */
  --ruled-soft: #dde2e7;   /* линовка таблиц */
  --stamp: #23409a;        /* штамповая синь */
  --stamp-press: #182e75;
  --minium: #c24e00;       /* сурик: ручное заполнение, предупреждения */
  --minium-pale: #fdf1e4;
  /* Янтарь светофора AI-анализа. Отдельно от сурика намеренно: сурик — рыжий, рядом с
     ним «жёлтое» читалось как оттенок красного, и светофор выглядел одноцветным.
     Тёмный тон для текста, яркий — для точки: на бумаге яркий жёлтый как текст не виден. */
  --attention: #8a6400;
  --attention-dot: #d9a412;
  --approved: #1d7a4b;     /* виза «согласовано» */
  --approved-pale: #e7f4ec;
  --error: #a02c2c;
  --error-pale: #fbeaea;

  --display: "Oswald", "Arial Narrow", sans-serif;
  --body: "Golos Text", "Segoe UI", system-ui, sans-serif;
  --mono: "PT Mono", "Consolas", monospace;
  /* Засечный — только для газетной полосы «Новостей» (шрифт подключает её шаблон). */
  --serif: "PT Serif", "Georgia", "Times New Roman", serif;
}

* { box-sizing: border-box; }

html { background: var(--paper); }

body {
  margin: 0;
  font: 16px/1.55 var(--body);
  color: var(--ink);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ── Лист с чертёжной рамкой ─────────────────────────────────────────────── */

.sheet {
  /* Лист тянется по ширине монитора; потолок только для сверхшироких экранов,
     чтобы шапка и таблицы не расползались на 3440 px. */
  width: min(2200px, calc(100% - 48px));
  margin: 24px auto 40px;
  background: var(--sheet);
  border: 1.5px solid var(--ink);
  outline: 1px solid var(--ruled);
  outline-offset: 5px;
  flex: 1;
  display: flex;
  flex-direction: column;
}


/* ── Штамп-навигация (основная надпись сверху) ──────────────────────────── */

/* Штамп в одну строку: знак с наименованием, вкладки, графа пользователя.
   Строка не должна переноситься — перенесённый ряд повисает без разделителя, а
   вертикальные линовки обрываются на полуслове. Поэтому названия вкладок короткие,
   а номер листа и подпись под наименованием уходят раньше, чем строка сломается. */
.stamp-bar {
  display: flex;
  align-items: stretch;
  border-bottom: 1.5px solid var(--ink);
}

.brand {
  padding: 9px 18px 8px 14px;
  border-right: 1px solid var(--ruled);
  text-decoration: none;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 11px;
  white-space: nowrap;
}
/* Знак — первая графа штампа. Высота 40 px укладывается в две строки наименования,
   поэтому шапка от логотипа не подросла. */
.brand-mark { display: block; width: auto; height: 40px; }
.brand-text { display: block; }
.brand-name {
  display: block;
  font-family: var(--display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1.2;
}
.brand-sub {
  display: block;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink-soft);
  letter-spacing: .04em;
}
/* Отметка о бете — приписка при наименовании, а не второй заголовок: мелкий моноширинный
   шрифт в рамке, как графа штампа. По верхней линии наименования, чтобы не спорить с ним. */
.brand-beta {
  margin-left: 8px;
  padding: 1px 4px;
  border: 1px solid var(--ruled);
  border-radius: 2px;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: lowercase;
  color: var(--ink-soft);
  vertical-align: 3px;
  white-space: nowrap;
}

/* Прокрутки вбок у меню больше нет намеренно: пунктов три, они помещаются всегда, а
   overflow обрезал бы выпадающую группу «Инструменты» по краю штампа. */
nav.tabs {
  display: flex;
  flex: 1;
  min-width: 0;
}
/* Пункты делят свободную ширину поровну и подписаны по центру: в штампе графы идут
   от края до края, а пустое поле между последней вкладкой и почтой выглядело провалом. */
nav.tabs > a, nav.tabs > .nav-group { flex: 1 1 0; justify-content: center; }
/* На служебных страницах (вход, регистрация, оферта) меню не рисуется вовсе — тогда
   всю ширину забирает наименование, чтобы графа не осталась пустой. */
.stamp-bar.no-tabs .brand { flex: 1; }

/* Группа «Инструменты»: <details>, раскрывается без скриптов. Заголовок выглядит как
   обычный пункт штампа, а подсветка «active» — как у пункта, когда открыт любой инструмент. */
.nav-group { position: relative; border-right: 1px solid var(--ruled); }
.nav-group > summary {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 8px 10px;
  color: var(--ink);
  font-size: 14px;
  white-space: nowrap;
  cursor: pointer;
  list-style: none;
}
.nav-group > summary::-webkit-details-marker { display: none; }
.nav-group > summary::after { content: "▾"; margin-left: 6px; font-size: 11px; }
.nav-group[open] > summary::after { content: "▴"; }
.nav-group > summary:hover { color: var(--stamp); background: #f2f4f0; }
.nav-group.active > summary {
  color: var(--stamp);
  font-weight: 600;
  box-shadow: inset 0 -3px 0 var(--stamp);
}
.nav-menu {
  position: absolute;
  top: 100%;
  left: -1px;
  z-index: 30;
  min-width: 230px;
  max-width: calc(100vw - 32px);
  background: var(--sheet);
  border: 1px solid var(--ink);
  box-shadow: 0 6px 18px rgba(30, 39, 51, .12);
}
nav.tabs .nav-menu a {
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-right: 0;
  border-bottom: 1px solid var(--ruled-soft);
  color: var(--ink);
}
nav.tabs .nav-menu a:last-child { border-bottom: 0; }
nav.tabs .nav-menu a.active { box-shadow: inset 3px 0 0 var(--stamp); }
/* Тариф, который открывает закрытый пункт: «BUSINESS 🔒» объясняет больше замка. */
.plan-badge { font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em;
  color: var(--stamp); border: 1px solid currentColor; padding: 1px 5px; }
/* Кликабельное в штампе — цвета текста, а не серое: серый на бумаге читается как
   «недоступно» и сливается с линовкой. Серыми остаются пояснения и счётчики. */
nav.tabs a {
  display: flex;
  align-items: center;
  padding: 8px 10px;
  border-right: 1px solid var(--ruled);
  color: var(--ink);
  text-decoration: none;
  font-size: 14px;
  white-space: nowrap;
  position: relative;
}
/* За последней вкладкой до графы пользователя остаётся пустое место — фехтовать его
   линовкой с двух сторон незачем: разделитель там даёт сама графа. */
nav.tabs a:last-child { border-right: 0; }
/* Счётчик карточек в работе у вкладки «Тендеры». */
nav.tabs a .tab-count { font-family: var(--mono); font-size: 10.5px; margin-left: 5px;
  color: var(--ink-soft); }
nav.tabs a.active .tab-count { color: var(--stamp); }
/* Непрочитанные новости — сурик на плашке: это «новое», а не спокойный счётчик. */
nav.tabs a .tab-count.fresh, nav.tabs a.active .tab-count.fresh { color: #fff;
  background: var(--minium); padding: 1px 5px; border-radius: 8px; line-height: 1.3; }
nav.tabs a:hover { color: var(--stamp); background: #f2f4f0; }
nav.tabs a.active {
  color: var(--stamp);
  font-weight: 600;
  box-shadow: inset 0 -3px 0 var(--stamp);
}
nav.tabs a:focus-visible,
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--stamp);
  outline-offset: 2px;
}

/* ── Содержимое листа ────────────────────────────────────────────────────── */

main { padding: 34px 44px 44px; flex: 1; }

.form-index {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--stamp);
  text-transform: uppercase;
  margin: 0 0 10px;
}

h1 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 32px;
  letter-spacing: .02em;
  text-transform: uppercase;
  margin: 0 0 10px;
  line-height: 1.15;
}

.lead { color: var(--ink-soft); margin: 0 0 26px; max-width: 62ch; }

.muted { color: var(--ink-soft); }

a { color: var(--stamp); }

/* ── Карточки-формы на титульном листе ──────────────────────────────────── */

.forms-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin-top: 28px;
}

.form-card {
  display: block;
  position: relative;
  text-decoration: none;
  color: var(--ink);
  border: 1px solid var(--ink);
  padding: 46px 20px 18px;
  background: var(--sheet);
  transition: box-shadow .12s ease, transform .12s ease;
}
.form-card:hover {
  box-shadow: 3px 3px 0 var(--stamp);
  transform: translate(-1px, -1px);
}
.form-card .index {
  position: absolute;
  top: 0; left: 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--stamp);
  border-right: 1px solid var(--ruled);
  border-bottom: 1px solid var(--ruled);
  padding: 5px 10px;
  text-transform: uppercase;
}
.form-card .title {
  font-family: var(--display);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.form-card .desc { color: var(--ink-soft); font-size: 14.5px; }

/* ── Формы-документы ─────────────────────────────────────────────────────── */

form.doc, .doc-sheet { max-width: 640px; display: grid; gap: 0; border: 1px solid var(--ink);
  background: var(--sheet); }
/* Длинная форма (акты, поставка) — несколько листов подряд. Шапка листа называет раздел,
   как графа-заголовок на унифицированном бланке; подпись и поле — те же doc-row. */
.doc-sheet + .doc-sheet { margin-top: 20px; }
.doc-sheet.wide { max-width: none; }
.doc-caption {
  padding: 8px 16px;
  border-bottom: 1px solid var(--ink);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--stamp);
}
/* Пояснение к листу — последней графой, мелко. Отрицательный отступ кладёт его линовку
   на линовку строки над ним, а не второй линией рядом. */
.doc-note {
  padding: 10px 16px;
  margin-top: -1px;
  border-top: 1px solid var(--ruled-soft);
  font-size: 13px;
  color: var(--ink-soft);
}
.doc-table { overflow-x: auto; }
.doc-table .installers { margin: 0; }
.doc-table td:first-child { width: 40%; }
.doc-table input { width: 100%; min-width: 3em; padding: 5px 7px; font-size: 14px; }

.doc-row {
  display: grid;
  grid-template-columns: 220px 1fr;
  border-bottom: 1px solid var(--ruled-soft);
}
.doc-row:last-of-type { border-bottom: 0; }
.doc-row > .doc-label {
  padding: 14px 16px;
  border-right: 1px solid var(--ruled-soft);
  background: #f4f6f2;
  font-size: 14px;
}
.doc-row > .doc-label .hint {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-soft);
  display: block;
  margin-top: 2px;
}
.doc-row > .doc-field { padding: 12px 16px; display: flex; align-items: center;
  flex-wrap: wrap; gap: 6px 10px; }
/* Список с подсказкой-ссылкой рядом («Этап» — «настроить воронку»): список берёт ширину
   графы, а ссылка переносится строкой ниже целиком, а не режет его до «Заявка под». */
.doc-row > .doc-field > select { flex: 1 1 10em; min-width: 0; }
/* Одиночное поле занимает графу целиком — на всех бланках одинаково, а не по ширине,
   которую браузер даёт полю по умолчанию. Графы с полем и кнопкой рядом не трогаем. */
.doc-row > .doc-field > :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  select, textarea):only-child { width: 100%; min-width: 0; }

input[type="file"] { font-size: 14px; max-width: 100%; }

/* Даты и ссылки — те же поля: без них в списке «Подписать до» и «Ссылка на площадку»
   оставались тонкими браузерными полосками рядом с обычными полями бланка. */
input[type="text"], input[type="number"], input[type="email"], input[type="password"],
input[type="url"], input[type="tel"], input[type="search"], input[type="date"],
input[type="datetime-local"], textarea, select {
  font: 15px/1.4 var(--body);
  color: var(--ink);
  background: var(--sheet);
  border: 1px solid var(--ruled);
  border-radius: 2px;
  padding: 7px 10px;
}
textarea { width: 100%; resize: vertical; }

/* Длинный реквизит («Муниципальное казённое дошкольное…») — textarea, растущая под текст:
   в однострочном поле видно только первые слова. field-sizing — Chrome 123+; где его
   нет, высоту досчитывает скрипт в base.html. */
textarea.grow { field-sizing: content; resize: none; overflow: hidden;
  min-height: calc(1.4em + 16px); }
/* Многострочное поле (запросы, требования, заметки, характеристики) тоже растёт под
   текст, а не прячет половину под прокрутку; переносы в нём — данные, Enter работает. */
textarea.grow-lines { field-sizing: content; min-height: 4.4em; resize: vertical; }
/* Графа с полем и единицей («₽», «мес.», «%») или кнопкой рядом: поле забирает остаток
   ширины, единица стоит вплотную, а не уезжает на свою строку. */
.doc-field.inline { gap: 8px; flex-wrap: wrap; }
.doc-field.inline > :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  select, textarea) { flex: 1 1 10em; min-width: 0; }
/* Бланк внутри блока этапа: те же графы, что на страницах форм. Блок уже подписан
   своей шапкой, поэтому лист без .doc-caption. */
.stage-block .doc-sheet { max-width: 760px; margin-bottom: 8px; }

.btn {
  display: inline-block;
  font: 600 15px/1 var(--body);
  letter-spacing: .02em;
  background: var(--stamp);
  color: #fff;
  border: 0;
  border-radius: 2px;
  padding: 13px 26px;
  cursor: pointer;
  text-decoration: none;
  transition: background .12s ease;
}
.btn:hover { background: var(--stamp-press); }
.btn:disabled { opacity: .55; cursor: wait; }
.btn-row { margin-top: 22px; display: flex; gap: 16px; align-items: center; }

/* ── Плашки состояний ────────────────────────────────────────────────────── */

.note { border: 1px solid; padding: 12px 16px; margin: 18px 0; font-size: 14.5px; }
.note.error { border-color: var(--error); background: var(--error-pale); color: var(--error); }
.note.warn { border-color: var(--minium); background: var(--minium-pale); color: #7c3a08; }
.note.ok { border-color: var(--approved); background: var(--approved-pale); color: var(--approved); }
.note code { font-family: var(--mono); font-size: 13px; }

/* Прогресс долгой операции (подбор идёт минуты) */
.progress-panel { display: none; margin-top: 20px; }
.progress-panel.on { display: block; }
.progress-panel .bar {
  height: 4px; background: var(--ruled-soft); overflow: hidden; position: relative;
}
.progress-panel .bar::after {
  content: "";
  position: absolute; inset: 0; width: 38%;
  background: var(--stamp);
  animation: slide 1.6s ease-in-out infinite;
}
@keyframes slide {
  0% { transform: translateX(-110%); }
  100% { transform: translateX(290%); }
}
@media (prefers-reduced-motion: reduce) {
  .progress-panel .bar::after { animation: none; width: 100%; opacity: .35; }
  .form-card, .form-card:hover { transition: none; transform: none; }
}

/* ── Таблица подбора (графы как в КС-2) ─────────────────────────────────── */

/* table-layout: fixed — графы держат заданную ширину, а текст переносится ВНУТРИ ячейки.
   Без этого браузер раздаёт ширину по содержимому: длинные описания расползались, а
   наименование позиции сжималось до столбика из отдельных слов. min-width включает
   горизонтальную прокрутку на узком экране вместо сплющивания граф. */
.ks-table { width: 100%; min-width: 1180px; table-layout: fixed;
  border-collapse: collapse; font-size: 14px; border: 1px solid var(--ink); }
.ks-table td, .ks-table th { overflow-wrap: anywhere; }
/* Из какого документа позиция. Появляется только когда смет было несколько — см. шаблон
   проверки подбора: на одной смете подпись в каждой строке ничего не различает. */
.row-doc { font-family: var(--mono); font-size: 10.5px; color: var(--ink-soft);
  margin-top: 3px; }
.ks-table th {
  font-family: var(--body);
  font-weight: 600;
  font-size: 13px;
  text-align: left;
  padding: 9px 10px;
  border: 1px solid var(--ruled-soft);
  border-bottom: 0;
  background: #f4f6f2;
}
.ks-table .grafa td {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-soft);
  text-align: center;
  padding: 2px 4px;
  border: 1px solid var(--ruled-soft);
  background: #f4f6f2;
}
.ks-table tbody:not(.grafa) td {
  padding: 9px 10px;
  border: 1px solid var(--ruled-soft);
  vertical-align: top;
}
.ks-table .num { font-family: var(--mono); font-size: 12.5px; white-space: nowrap; }
.ks-table tr.manual td { background: var(--minium-pale); }
/* разделитель блоков в проверке подбора: оборудование / монтажные работы */
.ks-table tr.group td { background: var(--sheet-alt, transparent); font-family: var(--display);
  text-transform: uppercase; font-size: 12.5px; letter-spacing: .04em; padding-top: 12px; }
.ks-table .src { font-family: var(--mono); font-size: 11px; color: var(--ink-soft); margin-top: 3px; }
.ks-table input[type="text"] { width: 100%; min-width: 90px; }
.ks-table input.manual-price { border-color: var(--minium); }
.ks-table .status-mark { font-family: var(--mono); font-size: 12px; white-space: nowrap; }
/* Подобранный товар и поставщик пишутся прямо в графе — переносить их можно и нужно. */
.ks-table .status-mark.offered { white-space: normal; }
.ks-table .status-mark .mark { margin-bottom: 4px; }
/* Список подходящих предложений: цена берётся из отмеченного, а переключают его по марке —
   регистратор одной марки и камеры другой на объекте не дружат. */
.ks-table .offer { display: grid; grid-template-columns: auto 1fr; gap: 6px;
  align-items: start; font-family: var(--body); font-size: 12.5px; line-height: 1.3;
  padding: 4px 0; border-top: 1px dotted var(--ruled-soft); cursor: pointer; }
.ks-table .offer input { margin-top: 3px; }
.ks-table .offer.picked { font-weight: 600; }
.ks-table .offer .src { margin-top: 2px; font-weight: 400; }
/* Графа «Характеристики»: требование закупки, по которому и идёт подбор. */
.ks-table .specs { font-size: 12px; line-height: 1.35; color: var(--ink-soft); }
.ks-table .specs div { margin-bottom: 2px; }
.ks-table .specs summary { cursor: pointer; font-size: 11px; font-family: var(--mono); }
/* Предложение на проверку: товар найден, но прайс не подтвердил его характеристики.
   Цену подставляет человек отметкой «принять» — молча она в расчёт не попадает. */
.ks-table .status-mark.suggesting { white-space: normal; color: var(--ink); }
.ks-table .suggest { display: flex; gap: 6px; align-items: flex-start; text-align: left;
  font-family: inherit; font-size: 12px; cursor: pointer; }
.ks-table .suggest input { margin-top: 2px; }
.status-matched { color: var(--approved); }
.status-approximate { color: var(--minium); }
.status-none { color: var(--error); }

.table-scroll { overflow-x: auto; }

/* ── Виза «сформировано» ────────────────────────────────────────────────── */

.visa {
  display: inline-block;
  font-family: var(--display);
  font-size: 15px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--stamp);
  border: 2px solid var(--stamp);
  border-radius: 3px;
  padding: 7px 18px 6px;
  transform: rotate(-2deg);
  margin-bottom: 22px;
}

/* ── Ответ консультанта ─────────────────────────────────────────────────── */

.answer-sheet {
  border: 1px solid var(--ink);
  padding: 22px 26px;
  margin-top: 26px;
  white-space: pre-wrap;
}
.sources { margin-top: 18px; }
.sources h3 {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 8px;
}
.sources ul { margin: 0; padding-left: 22px; font-size: 14px; color: var(--ink-soft); }

/* ── Нижний штамп ───────────────────────────────────────────────────────── */

footer.stamp-foot {
  border-top: 1.5px solid var(--ink);
  display: flex;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-soft);
  letter-spacing: .05em;
}
footer.stamp-foot > div { padding: 7px 16px; border-right: 1px solid var(--ruled); }
footer.stamp-foot > div:last-child { border-right: 0; margin-left: auto; }

/* ── Адаптив ────────────────────────────────────────────────────────────── */

/* Штамп держится в одну строку: первой уходит подпись под наименованием — она
   декоративна, а сломанная строка выглядит браком. */
@media (max-width: 880px) {
  .brand-sub { display: none; }
  /* Отметка о бете остаётся — она не украшение; ужимаем её до рамки без полей. */
  .brand-beta { margin-left: 6px; padding: 0 3px; font-size: 8.5px; vertical-align: 2px; }
  .brand { padding: 10px 14px; gap: 9px; }
  .brand-mark { height: 32px; }
  nav.tabs a { padding: 8px 9px; font-size: 13.5px; }
}

@media (max-width: 720px) {
  .sheet { width: calc(100% - 16px); margin: 10px auto 20px; outline-offset: 3px; }
  main { padding: 22px 18px 30px; }
  /* На телефоне наименование занимает свою строку, а вкладки прокручиваются вбок:
     перенос ряда здесь выглядел бы так же криво, как и на широком экране. */
  .stamp-bar { flex-wrap: wrap; }
  .brand { width: 100%; border-right: 0; border-bottom: 1px solid var(--ruled); }
  /* База 60%: при нулевой вкладки уместились бы в одну строку с наименованием (ширины 0
     хватает всегда) и схлопнулись бы в ничто, а при auto — вытолкнули бы почту
     на третью строку. 60% и переносит ряд, и оставляет место графе пользователя. */
  nav.tabs { flex: 1 1 60%; }
  nav.tabs > a, nav.tabs > .nav-group { flex: 0 0 auto; }
  nav.tabs a { padding: 10px 11px; font-size: 13.5px; }
  .doc-row { grid-template-columns: 1fr; }
  .doc-row > .doc-label { border-right: 0; border-bottom: 1px solid var(--ruled-soft); padding: 10px 16px 8px; }
  h1 { font-size: 25px; }
  /* Подвал: три графы в ряд на телефоне не помещаются — последняя вылезала за лист и
     раздвигала страницу вбок. Графы встают друг под другом, линовка — горизонтальная. */
  footer.stamp-foot { flex-direction: column; }
  footer.stamp-foot > div { border-right: 0; border-bottom: 1px solid var(--ruled); }
  footer.stamp-foot > div:last-child { border-bottom: 0; margin-left: 0; }
}

/* Узкие телефоны (360 px): четыре пункта меню с обычными полями не помещались — «Тарифы»
   уезжали за край листа. Поля ужимаются, строка остаётся одна. */
@media (max-width: 400px) {
  nav.tabs a, .nav-group > summary { padding: 10px 7px; font-size: 13px; }
  .nav-group > summary::after { margin-left: 4px; }
}
@media (max-width: 340px) {
  nav.tabs a, .nav-group > summary { padding: 10px 5px; }
  /* Сравнению тарифов (четыре графы, «Комплектование», «BUSINESS») 320 px не хватает даже
     без полей — таблица прокручивается сама, а лист остаётся на месте. */
  .installers { display: block; overflow-x: auto; }
}
/* Таблицы (сравнение тарифов, реквизиты в оферте) на узком телефоне раздвигали лист:
   поля ужимаются. Перенос посреди слова — только в правовых документах: там в графах
   длинные номера (ОГРНИП, расчётный счёт), а в тарифах он рвал обычные слова. */
@media (max-width: 400px) {
  .installers th { padding: 6px 4px; letter-spacing: 0; }
  .installers td { padding: 7px 4px; }
  .legal .installers td { overflow-wrap: anywhere; }
  /* Формы входа и регистрации: поле ввода по умолчанию шире узкого экрана и распирало
     графу вместе с листом. Графа может сжаться, поле занимает её ширину. */
  .doc-row > .doc-label, .doc-row > .doc-field { min-width: 0; }
  .doc-row > .doc-field input:not([type="checkbox"]):not([type="radio"]) { width: 100%; min-width: 0; }
}

/* ══ Модуль «Тендеры»: поиск, канбан, карточка, календарь ═════════════════ */

/* Перенос обязателен: на телефоне шесть пунктов настроек или подменю канбана в одну
   строку не влезают и раздвигали страницу вбок. */
.sub-nav { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center;
  margin: 0 0 20px; font-family: var(--mono); font-size: 12.5px; letter-spacing: .04em; }
.sub-nav a { color: var(--ink); text-decoration: none; }
.sub-nav a:hover { color: var(--stamp); }
/* ссылка-кнопка стоит на штамповой сини — текст белый, иначе тонет в фоне */
.sub-nav a.btn, .sub-nav a.btn:hover { color: #fff; }

.btn.small { padding: 8px 16px; font-size: 13.5px; text-decoration: none; display: inline-block; }
.small { font-size: 13px; }

/* поиск */
.search-bar { display: flex; gap: 10px; margin: 0 0 20px; }
.search-bar input { flex: 1; font: 15px/1.4 var(--body); color: var(--ink);
  background: var(--sheet); border: 1px solid var(--ruled); border-radius: 2px; padding: 10px 12px; }
.search-bar input:focus-visible { outline: 2px solid var(--stamp); outline-offset: 1px; }

.tender-list { display: flex; flex-direction: column; gap: 2px; }
.tender-item { display: flex; justify-content: space-between; gap: 16px; align-items: center;
  padding: 14px 16px; border: 1px solid var(--ruled-soft); border-left: 3px solid var(--stamp);
  background: var(--sheet); }
.tender-item + .tender-item { border-top: 0; }
/* Только что взятая в работу закупка: после возврата на выдачу глаз должен найти
   строку, ради которой нажимали кнопку. */
.tender-item.just { border-left-color: var(--approved); background: var(--approved-pale); }
.tender-title { font-weight: 600; color: var(--ink); text-decoration: none; display: block; margin-bottom: 6px; }
.tender-title:hover { color: var(--stamp); }
.tender-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; color: var(--ink-soft); }
.tender-meta .price { color: var(--ink); font-weight: 600; }
.tender-item-action { flex-shrink: 0; }

.chip { font-family: var(--mono); font-size: 11px; letter-spacing: .04em; padding: 2px 7px;
  border: 1px solid var(--ruled); border-radius: 2px; color: var(--stamp); background: #fff; white-space: nowrap; }
.chip.done { color: var(--approved); border-color: var(--approved); }
.chip.mini { font-size: 10px; padding: 1px 5px; color: var(--ink-soft); }
/* «На площадку» в выдаче: рабочая ссылка и её запертый близнец на бесплатном тарифе.
   Замок не прячем — вкладки в шапке заперты по той же причине: невидимую функцию
   не покупают. */
a.chip.link { color: var(--approved); border-color: var(--approved); text-decoration: none; }
a.chip.link:hover { background: var(--approved-pale); }
a.chip.locked { color: var(--ink-soft); border-style: dashed; text-decoration: none; }
a.chip.locked:hover { color: var(--minium); border-color: var(--minium); }

/* канбан */
.deadlines-week ul { margin: 6px 0 0; padding-left: 18px; }
.deadlines-week a { color: inherit; }
.kanban { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 10px; }
/* Вторая полоса прокрутки сверху: доска в девять колонок шире экрана, и тянуться каждый
   раз к нижнему краю неудобно. Распорку по ширине доски проставляет скрипт. */
.kanban-scroll { overflow-x: auto; overflow-y: hidden; }
.kanban-rail { height: 1px; }
.kanban-col { flex: 0 0 220px; background: #f4f6f2; border: 1px solid var(--ruled-soft);
  border-top: 3px solid var(--stage, var(--ruled)); }
.kanban-col-head { font-family: var(--mono); font-size: 12px; letter-spacing: .04em;
  text-transform: uppercase; padding: 8px 10px; border-bottom: 1px solid var(--ruled-soft);
  color: var(--stamp); display: flex; justify-content: space-between; }
.kanban-col-head .count { color: var(--ink-soft); }
.kanban-card { background: var(--sheet); border: 1px solid var(--ruled-soft); margin: 8px; padding: 10px; }
/* Плитка, которую только что перевели стрелкой или селектом: короткая вспышка, чтобы глаз
   нашёл её на новом месте. */
.kanban-card.just-moved { animation: just-moved 1.6s ease-out; }
@keyframes just-moved { from { box-shadow: 0 0 0 3px var(--stamp); } to { box-shadow: 0 0 0 3px transparent; } }
.kanban-card-title { font-weight: 600; font-size: 13.5px; color: var(--ink); text-decoration: none; display: block; }
.kanban-card-title:hover { color: var(--stamp); }
.kanban-card-meta { font-size: 12px; color: var(--ink-soft); margin-top: 6px; display: flex; gap: 8px; align-items: center; }
/* Ключевых дат на плитке до трёх (подача, подписание, исполнение): первая отбивается
   от точек прогресса, следующие идут строками вплотную. Просроченная — красная. */
.kanban-card-deadline { font-size: 12px; color: var(--minium); margin-top: 6px; }
.kanban-card-deadline + .kanban-card-deadline { margin-top: 2px; }
.kanban-card-deadline.overdue { color: var(--error); font-weight: 600; }
.kanban-card-actions { display: flex; gap: 6px; align-items: center; margin-top: 8px; }
.kanban-card-actions .status-move { flex: 1; min-width: 0; margin-top: 0; }
.kanban-card-actions .link-btn { font-size: 13px; line-height: 1; padding: 4px 3px; }
.status-move { margin-top: 8px; }

/* Архив под доской: закрытые этапы («Завершён», «Проиграно») колонками не рисуются —
   копятся годами и растягивали бы канбан. Вкладка на этап, таблица со своей прокруткой. */
.archive { margin-top: 22px; border: 1px solid var(--ruled-soft); background: var(--sheet); }
.archive > summary { cursor: pointer; padding: 10px 14px; display: flex; flex-wrap: wrap;
  gap: 4px 14px; align-items: baseline; font-family: var(--mono); font-size: 12px;
  letter-spacing: .04em; text-transform: uppercase; color: var(--stamp); }
.archive-count { color: var(--ink-soft); text-transform: none; letter-spacing: 0; }
.archive-tabs { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 10px; }
.archive-tabs a { font-family: var(--mono); font-size: 12px; padding: 4px 10px; color: var(--ink);
  text-decoration: none; border: 1px solid var(--ruled-soft);
  border-top: 3px solid var(--stage, var(--ruled)); }
.archive-tabs a.active { background: #f4f6f2; color: var(--stamp); }
.archive-tabs .count { color: var(--ink-soft); margin-left: 4px; }
.archive-scroll { overflow-x: auto; padding: 0 14px 14px; }
.archive-empty { padding: 0 14px 14px; margin: 0; }
.archive-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.archive-table th { text-align: left; font-family: var(--mono); font-size: 11px; font-weight: 400;
  letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); white-space: nowrap;
  border-bottom: 1px solid var(--ruled); padding: 6px 8px; }
.archive-table td { border-bottom: 1px solid var(--ruled-soft); padding: 7px 8px; vertical-align: top; }
.archive-table td:first-child { min-width: 220px; }
.archive-table td a { color: var(--ink); text-decoration: none; font-weight: 600; }
.archive-table td a:hover { color: var(--stamp); }
.archive-table .num { text-align: right; }
.archive-table .num, .archive-table .date { font-family: var(--mono); font-size: 12.5px; white-space: nowrap; }
.archive-table .overdue { color: var(--error); font-weight: 600; }
.archive-table .link-btn { white-space: nowrap; font-size: 13px; }
.status-move select, .deadline-add select, .card-grid select, .deadline-add input {
  font: 13px var(--body); border: 1px solid var(--ruled); border-radius: 2px; padding: 5px 7px; background: var(--sheet); width: 100%; }

/* карточка */
.link-row { margin: 18px 0 4px; }
.card-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 26px; margin-top: 22px; align-items: start; }
/* Кнопка под бланком, а за ней строка поиска (склад): без отступа они слипались. */
.btn-row + .search-form { margin-top: 20px; }
/* Бланк карточки стоит в половине листа: подпись в 220 px оставляла полю сотню пикселей,
   и список этапов резался до «Заявка под». Узкая графа подписи — только пока карточка
   в две колонки; уже́ 720 px она в одну, и бланк ведёт себя как везде. */
@media (min-width: 721px) {
  .card-grid .doc-row { grid-template-columns: minmax(120px, 36%) 1fr; }
}
.deadlines-box h3, .history summary { font-family: var(--display); text-transform: uppercase;
  font-size: 16px; letter-spacing: .02em; }
.deadline-list { list-style: none; padding: 0; margin: 0 0 14px; }
.deadline-list li { display: flex; align-items: center; gap: 8px; padding: 7px 0;
  border-bottom: 1px solid var(--ruled-soft); font-size: 14px; }
.deadline-list .dl-date { font-family: var(--mono); font-size: 12.5px; color: var(--ink); white-space: nowrap; }
.deadline-list .dl-label { flex: 1; color: var(--ink-soft); }
.deadline-add { display: flex; gap: 8px; align-items: center; }
.deadline-add select { width: auto; flex: 1; }
.inline { display: inline; }
.link-btn { background: none; border: 0; color: var(--ink); cursor: pointer; font-size: 14px; padding: 0 2px; }
.link-btn:hover { color: var(--error); }
.history { margin-top: 26px; font-size: 13.5px; color: var(--ink-soft); }
.history ul { padding-left: 18px; }
.tender-context { border-color: var(--stamp); background: #eef1fb; color: var(--stamp-press); }
.tender-context a { color: var(--stamp); text-decoration: none; }

/* календарь */
.calendar-list { list-style: none; padding: 0; margin: 0; }
.calendar-list li { display: flex; gap: 18px; padding: 12px 0; border-bottom: 1px solid var(--ruled-soft); }
.cal-date { font-family: var(--mono); font-size: 13px; color: var(--ink-soft); min-width: 90px;
  display: flex; flex-direction: column; }
.cal-date b { color: var(--stamp); font-size: 15px; }
.cal-kind { display: block; font-size: 12.5px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .04em; }
.cal-body a { color: var(--ink); text-decoration: none; font-weight: 600; }
.cal-body a:hover { color: var(--stamp); }

@media (max-width: 720px) {
  .card-grid { grid-template-columns: 1fr; }
  .tender-item { flex-direction: column; align-items: flex-start; }
}

/* ── Тендеры: аналитика (стат-плитки) и фильтры поиска ──────────────────── */
.stat-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 22px; }
.stat-tile { flex: 1 1 92px; border: 1px solid var(--ruled-soft); border-top: 3px solid var(--ruled);
  background: var(--sheet); padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.stat-tile.wide { flex: 1 1 150px; }
.stat-tile .num { font-family: var(--display); font-size: 22px; line-height: 1.1; color: var(--ink); letter-spacing: .01em; }
.stat-tile .lbl { font-family: var(--mono); font-size: 11px; letter-spacing: .04em; color: var(--ink-soft); text-transform: uppercase; }
.stat-tile.won { border-top-color: var(--approved); }
.stat-tile.won .num { color: var(--approved); }
.stat-tile.rejected { border-top-color: var(--error); }
.stat-tile.rejected .num { color: var(--error); }
a.stat-tile { text-decoration: none; }
a.stat-tile:hover { border-top-color: var(--minium); }
.stat-tile.hot { border-top-color: var(--minium); }
.stat-tile.hot .num { color: var(--minium); }

/* ── Главная вошедшего: сводка (core/dashboard.py) ──────────────────────── */
.dash-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px; margin: 0 0 26px; }
.dash-panel { border: 1px solid var(--ruled-soft); background: var(--sheet); padding: 12px 14px;
  min-width: 0; }
.dash-panel h2 { font-size: 17px; margin: 0 0 10px; }
.dash-list { list-style: none; margin: 0 0 10px; padding: 0; display: flex;
  flex-direction: column; gap: 7px; }
.dash-list li { font-size: 14.5px; overflow-wrap: anywhere; }
.dash-when { font-family: var(--mono); font-size: 12px; color: var(--ink-soft); margin-right: 4px; }
.dash-verdicts { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.dash-tools { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; }
.dash-count { margin: 0 0 8px; }
.dash-count a { font-family: var(--display); font-size: 32px; line-height: 1; text-decoration: none;
  color: var(--minium); margin-right: 6px; }
.link-btn.watching { color: var(--approved); }
.watch-error { color: var(--minium); overflow-wrap: anywhere; }
.dash-setup { border-color: var(--minium); }

/* ── Мастер первой настройки /start (portal/onboarding.py) ──────────────── */
.wizard { display: grid; grid-template-columns: minmax(180px, 240px) minmax(0, 1fr); gap: 28px;
  margin: 8px 0 24px; }
.wizard-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column;
  gap: 10px; }
.wizard-steps li { font-size: 14.5px; padding-left: 2em; position: relative; }
.wizard-steps .mark { position: absolute; left: 0; font-family: var(--mono); color: var(--ink-soft); }
.wizard-steps li.done .mark { color: var(--approved); }
.wizard-steps li.current a { color: var(--ink); font-weight: 600; text-decoration: none; }
.wizard-body { min-width: 0; }
.wizard-inline { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.wizard-inline input { flex: 1 1 160px; min-width: 0; }
.wizard-foot { display: flex; flex-wrap: wrap; gap: 16px; align-items: center;
  margin-top: 22px; padding-top: 12px; border-top: 1px solid var(--ruled-soft); }
@media (max-width: 720px) {
  .wizard { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}

.search-form { margin: 0 0 20px; }
.search-form .search-bar { margin: 0 0 10px; }
.search-filters { display: flex; flex-wrap: wrap; gap: 10px; }
.search-filters select, .search-filters input {
  font: 14px/1.4 var(--body); color: var(--ink); background: var(--sheet);
  border: 1px solid var(--ruled); border-radius: 2px; padding: 8px 10px; }
.search-filters input { max-width: 150px; }
.search-filters select:focus-visible, .search-filters input:focus-visible { outline: 2px solid var(--stamp); outline-offset: 1px; }

/* расширенный поиск: варианты строками, минус-слова, выбор галочками, сохранённые поиски */
.search-bar textarea { flex: 1; font: 15px/1.4 var(--body); color: var(--ink); resize: vertical;
  background: var(--sheet); border: 1px solid var(--ruled); border-radius: 2px; padding: 10px 12px; }
.search-bar textarea:focus-visible { outline: 2px solid var(--stamp); outline-offset: 1px; }
.search-bar-multi { align-items: flex-start; }
.search-hint { margin: -4px 0 10px; }
.search-filters input.wide { max-width: 320px; flex: 1 1 220px; }
.multi-pick { position: relative; }
.multi-pick > summary { cursor: pointer; list-style: none; white-space: nowrap;
  font: 14px/1.4 var(--body); color: var(--ink); background: var(--sheet);
  border: 1px solid var(--ruled); border-radius: 2px; padding: 8px 10px; }
.multi-pick > summary::-webkit-details-marker { display: none; }
.multi-pick > summary::after { content: "▾"; margin-left: 6px; font-size: 11px; }
.multi-pick[open] > summary::after { content: "▴"; }
.multi-pick-body { position: absolute; z-index: 30; top: calc(100% + 4px); left: 0;
  width: min(640px, 92vw); max-height: 60vh; overflow: auto; padding: 12px 14px;
  background: var(--sheet); border: 1px solid var(--ruled); box-shadow: 0 6px 18px rgba(0, 0, 0, .12); }
.multi-pick-group { border: 0; margin: 0 0 12px; padding: 0; columns: 2 220px; column-gap: 18px; }
.multi-pick-group legend { font-weight: 600; margin: 0 0 4px; padding: 0; }
.multi-pick-group legend .check { color: var(--ink); }
.multi-pick .check { display: flex; align-items: flex-start; gap: 6px; font-size: 13px;
  line-height: 1.5; padding: 1px 0; break-inside: avoid; }
.multi-pick .check input { margin: 3px 0 0; flex: none; }
/* Кнопка всегда видна у нижнего края списка — не надо листать все округа до конца. */
.multi-pick-actions { position: sticky; bottom: -12px; margin: 0 -14px -12px; padding: 10px 14px;
  background: var(--sheet); border-top: 1px solid var(--ruled-soft); }
/* Внутри большой формы (мастер, профиль агента) список раскрывается в потоке и сдвигает
   поля ниже, а не накрывает их вместе с кнопкой сохранения. */
.multi-pick.inline > summary::after { float: right; }
.multi-pick.inline .multi-pick-body { position: static; width: auto; max-height: 50vh;
  margin-top: -1px; box-shadow: none; }
@media (max-width: 720px) {
  .multi-pick[open] { flex-basis: 100%; }
  .multi-pick-body { position: static; width: auto; margin-top: -1px; box-shadow: none; }
  .multi-pick > summary { white-space: normal; }
}
.saved-searches { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin: 0 0 12px; }
.saved-search { display: inline-flex; align-items: center; gap: 2px; font-size: 13px;
  border: 1px solid var(--ruled-soft); background: var(--sheet); padding: 2px 4px 2px 8px; }
.saved-search a { color: var(--stamp); text-decoration: none; }
.saved-search a:hover { text-decoration: underline; }
.saved-search form { display: inline; margin: 0; }
.save-search { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 12px; }
.save-search input { font: 13px/1.4 var(--body); border: 1px solid var(--ruled);
  border-radius: 2px; padding: 6px 8px; min-width: 220px; }

/* пагинация выдачи и правка тендера */
.pager { display: flex; gap: 16px; align-items: center; margin: 20px 0 6px;
  font-family: var(--mono); font-size: 13px; }
.pager a { color: var(--stamp); text-decoration: none; }
.pager a:hover { text-decoration: underline; }
.show-more { display: block; width: 100%; margin: 20px 0 6px; }
.edit-tender { margin: 18px 0; border: 1px solid var(--ruled-soft); }
.edit-tender > summary { cursor: pointer; padding: 10px 14px; font-family: var(--mono);
  font-size: 12.5px; letter-spacing: .04em; color: var(--stamp); background: #f4f6f2; }
.edit-tender[open] > summary { border-bottom: 1px solid var(--ruled-soft); }
.edit-tender .doc { margin: 0; border: 0; }

/* файлы карточки, исполнители */
.chip.warn { color: var(--minium); border-color: var(--minium); background: var(--minium-pale); }
.kanban-card-installer { font-size: 12px; color: var(--ink-soft); margin-top: 6px; }
.kanban-card-installer.warn { color: var(--minium); }

.files-box { margin-top: 26px; border-top: 1px solid var(--ruled-soft); padding-top: 16px; }
.files-box h3 { font-family: var(--display); text-transform: uppercase;
  font-size: 16px; letter-spacing: .02em; }
.files-head { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; }
.file-group-head { font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--stamp); margin-top: 12px; }
.file-list { list-style: none; padding: 0; margin: 4px 0 0; }
.file-list li { display: flex; align-items: center; gap: 10px; padding: 6px 0;
  border-bottom: 1px solid var(--ruled-soft); font-size: 14px; }
.file-list a { color: var(--ink); }
.file-list .file-note { flex: 1; color: var(--ink-soft); font-size: 13px; }
.eis-docs { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 10px 0 4px; }
.file-add { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 14px; }
.file-add select, .file-add input[type="text"], .file-add input[type="file"] {
  font: 13px var(--body); border: 1px solid var(--ruled); border-radius: 2px;
  padding: 5px 7px; background: var(--sheet); }
.file-add input[type="text"] { flex: 1; min-width: 160px; }

.installers { width: 100%; border-collapse: collapse; font-size: 14px; margin-bottom: 18px; }
.installers th { font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--stamp); text-align: left;
  border-bottom: 1px solid var(--ruled); padding: 6px 8px; }
.installers td { padding: 8px; border-bottom: 1px solid var(--ruled-soft); }
.installers tr.archived td { color: var(--ink-soft); }
/* Справочник исполнителей правится прямо в строке: поля тянутся по графе, а не по
   умолчанию браузера, иначе длинная почта обрезается. Пять граф с полями в телефон не
   влезают — таблица прокручивается вбок внутри .table-scroll, а не жмёт «Иванов И.И.»
   до «Иванов И». */
.installers input[type="text"], .installers input[type="email"] {
  width: 100%; min-width: 0; padding: 5px 7px; font-size: 14px; }
.installers-edit { min-width: 720px; }
.installers-edit .row-actions { gap: 10px; }
.installer-add { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.installer-add input { font: 14px var(--body); border: 1px solid var(--ruled);
  border-radius: 2px; padding: 8px 10px; background: var(--sheet); }

/* каталог прайсов */
.prices-table td { vertical-align: middle; }
.prices-table tr.archived td, .ks-table tr.archived td { color: var(--ink-soft); }
.section-h { font-family: var(--display); text-transform: uppercase; font-size: 16px;
  letter-spacing: .02em; margin: 26px 0 10px; }
.price-supplier { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.price-supplier select, .price-supplier input { font: 14px var(--body); padding: 6px 8px;
  border: 1px solid var(--ruled); border-radius: 2px; background: var(--sheet); }
.catalog-panel { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.catalog-suppliers { display: flex; flex-wrap: wrap; gap: 6px; }
.gone-list { columns: 2; font-size: 13.5px; color: var(--ink-soft); }
.check { font-size: 13px; color: var(--ink-soft); display: flex; align-items: center; gap: 6px; }
/* Длинная подпись у галочки (согласия при регистрации) — один элемент, который переносится. */
.check > span { min-width: 0; }
.rename input { font: 13px var(--body); padding: 4px 6px; border: 1px solid var(--ruled);
  border-radius: 2px; background: var(--sheet); width: 150px; }
/* описание позиции: показываем целиком, но не даём таблице разъехаться */
.item-desc { max-height: 4.5em; overflow-y: auto; white-space: normal; max-width: 520px; }

/* отчётность по периодам: выбор разреза и таблица разбивки */
.report-picker { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.report-picker select { font: 14px var(--body); padding: 6px 8px; border: 1px solid var(--ruled);
  border-radius: 2px; background: var(--sheet); }
.report-table tr.current td { background: var(--minium-pale); font-weight: 600; }
.report-table tr.empty td { color: var(--ink-soft); }
.report-table tr.total td { border-top: 2px solid var(--ink); font-weight: 700; }

/* --- «Заявка»: массовая простановка страны и таблица позиций ------------------------- */
.bulk-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  margin: 18px 0 10px; font-size: 14px; }
.bulk-row input { font: 14px var(--body); border: 1px solid var(--ruled);
  padding: 7px 10px; background: #fff; width: 170px; }
.bid-table textarea { width: 100%; font: 13px var(--body); border: 1px solid var(--ruled);
  padding: 6px 8px; background: #fff; resize: vertical; min-height: 62px; }
.bid-table input[type=text] { width: 100%; }
.bid-table td { vertical-align: top; }

/* --- служебная графа штампа («Админ») ------------------------------------------------- */
/* Раздел для персонала: та же ячейка, что у почты, но словом — иконке тут не поверят. */
.stamp-link {
  display: flex;
  align-items: center;
  padding: 8px 14px;
  border-left: 1px solid var(--ruled);
  color: var(--ink);
  text-decoration: none;
  line-height: 1;
}
.stamp-link:hover { color: var(--stamp); background: #f2f4f0; }
.stamp-link.active { color: var(--stamp); background: #f2f4f0; }

/* --- «Реквизиты»: действия в строке профиля ------------------------------------------ */
.row-actions { display: flex; gap: 12px; align-items: center; white-space: nowrap; }
.link-btn.danger { color: var(--error); }
.btn.secondary { background: transparent; color: var(--stamp); border: 1px solid var(--stamp); }
.btn.secondary:hover { background: var(--stamp); color: #fff; }

/* --- пользователь в шапке ------------------------------------------------------------- */
/* Последняя графа штампа — кто подписывает лист. Две строки (почта и выход) держат ту же
   высоту, что и наименование слева, поэтому строка штампа выглядит ровной с обоих краёв. */
.user-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 1px;
  padding: 8px 16px;
  border-left: 1px solid var(--ruled);
}
.user-box .user-email {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink);
  text-decoration: none;
  max-width: 24ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-box .user-email:hover { color: var(--stamp); text-decoration: underline; }
/* Подсветка — как у активной вкладки: почта ведёт в кабинет и настройки. */
.user-box.active { background: #f2f4f0; }
.user-box.active .user-email { color: var(--stamp); font-weight: 600; }
.user-box form { margin: 0; }
.user-box button {
  background: none;
  border: none;
  padding: 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--ink);
  cursor: pointer;
}
.user-box button:hover { color: var(--stamp); text-decoration: underline; }
/* «Войти» у гостя — одна строка, поэтому графа центрируется по вертикали целиком. */
.user-box .user-email.enter { font-family: var(--body); font-size: 14px; color: var(--stamp); }

/* На телефоне почта переносится на свою строку — значит, это уже не боковая графа, а
   строка штампа: во всю ширину, с линовкой сверху и выходом у правого края.
   Правило стоит здесь, а не в общем блоке адаптива: там оно шло раньше по файлу и
   проигрывало колоночной раскладке выше при той же специфичности. */
@media (max-width: 720px) {
  .user-box {
    width: 100%;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-left: 0;
    border-top: 1px solid var(--ruled);
    padding: 8px 14px;
  }
  .user-box .user-email { max-width: none; }
}

/* --- подписка: замок на вкладке и остаток квоты ---------------------------------------- */
.tabs a.locked { opacity: .62; }
.tabs a.locked .lock { font-size: 10px; vertical-align: 1px; }
.stamp-link.admin-link { font-family: var(--mono); font-size: 12px; letter-spacing: .04em; }

/* --- админка подписок ------------------------------------------------------------------ */
.admin-nav a.active { color: var(--stamp); border-bottom: 2px solid var(--stamp); }
.admin-stats { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 26px; }
.admin-stat { flex: 1 1 150px; border: 1px solid var(--ruled); padding: 12px 14px;
  display: flex; flex-direction: column; gap: 4px; }
.admin-stat .num { font-family: var(--display); font-size: 24px; color: var(--ink);
  text-decoration: none; }
.admin-stat .lbl { font-family: var(--mono); font-size: 11.5px; color: var(--ink-soft); }
.admin-stat.hot { border-color: var(--minium); background: var(--minium-pale); }
.extend-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

/* Ворон (ИИ-агент) в карточке: кнопка, ход шагов. Иконка — ворон из логотипа. */
.raven-ico { width: 1.3em; height: 1.3em; vertical-align: -0.3em; }
.agent-panel { margin: 16px 0; padding: 12px 14px; border: 1px dashed var(--stamp);
  background: #f7f9fe; display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.agent-busy { color: var(--stamp-press); font-weight: 600; }
.agent-steps { list-style: none; margin: 4px 0 0; padding: 0; width: 100%; font-size: 13.5px; }
.agent-step { padding: 3px 0; }
.agent-mark { display: inline-block; width: 1.2em; font-weight: 700; }
.agent-step.ok .agent-mark { color: var(--approved); }
.agent-step.error .agent-mark { color: var(--error); }
.agent-step.skip { color: var(--ink-soft); }
/* Вердикт агента: на канбане и в списке рассмотренного. */
.verdict-chip.go { color: var(--approved); border-color: var(--approved);
  background: var(--approved-pale); }
.verdict-chip.caution { color: var(--attention); border-color: var(--attention-dot); }
.verdict-chip.stop { color: var(--ink-soft); }
/* Шаг «Что ищете» мастера: подпись над полем, одинаковые отступы между полями. */
.wizard-form { display: flex; flex-direction: column; gap: 16px; }
.wizard-form > label, .wizard-form .wizard-label { display: flex; flex-direction: column; gap: 6px; }
.wizard-form .btn-row { margin-top: 4px; }
.wizard-form .agent-row { display: flex; flex-wrap: wrap; gap: 10px 18px; }
.wizard-form .agent-row label { display: flex; flex-direction: column; gap: 6px; flex: 1 1 160px; }

/* Чат по карточке: реплики человека и агента, шаги инструментов мелко — откуда ответ. */
.card-chat { margin: 26px 0 0; border-top: 1px solid var(--ruled); padding-top: 16px; }
.chat-log { list-style: none; margin: 0 0 12px; padding: 0; display: flex;
  flex-direction: column; gap: 8px; }
.chat-msg { max-width: 80%; padding: 8px 12px; font-size: 14px; white-space: pre-wrap; }
.chat-msg.user { align-self: flex-end; background: #eef2fb; border: 1px solid var(--ruled-soft); }
.chat-msg.assistant { align-self: flex-start; background: var(--sheet);
  border: 1px solid var(--ruled); }
.chat-msg.tool { align-self: flex-start; padding: 0 12px; font-family: var(--mono);
  font-size: 11.5px; color: var(--ink-soft); }
.chat-form { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.chat-form textarea { flex: 1 1 320px; min-height: 2.6em; }
@media (max-width: 720px) { .chat-msg { max-width: 100%; } }

/* Ориентир снижения по похожим закупкам: в блоке торгов и на странице анализа проигранных тендеров. */
.hint-line { margin: 8px 0 0; padding: 6px 10px; font-size: 13px; color: var(--stamp-press);
  background: #eef2fb; border-left: 3px solid var(--stamp); }
.reset-link { word-break: break-all; }
/* Пробный период — сведение, а не тревога: штамповая синь, а не сурик квоты. */
.trial-bar {
  border: 1px solid var(--stamp);
  background: #eef2fb;
  color: var(--stamp-press);
  padding: 8px 16px;
  margin: 0 0 18px;
  font-size: 13.5px;
}
.quota-bar {
  border: 1px solid var(--minium);
  background: var(--minium-pale);
  color: #7c3a08;
  padding: 10px 16px;
  margin: 0 0 18px;
  font-size: 14px;
}
.plan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
  margin: 22px 0;
}
.plan-card { border: 1px solid var(--ink); padding: 18px 18px 20px; background: var(--sheet); }
.plan-card.current { box-shadow: 3px 3px 0 var(--stamp); }
.plan-card h2 { margin: 0 0 4px; font-size: 20px; }
.plan-card .price { font-family: var(--mono); font-size: 22px; margin: 6px 0 2px; }
.plan-card .year { color: var(--ink-soft); font-size: 13px; margin-bottom: 12px; }
.plan-card ul { margin: 12px 0 0; padding-left: 18px; font-size: 14px; }
.plan-card li { margin-bottom: 5px; }
.plan-card .chip { display: inline-block; margin-bottom: 8px; }

.form-card.locked { opacity: .78; }
.form-card.locked .lock { font-size: 12px; }
/* Кнопка-контур. Определение одно на весь портал: раньше их было два, и при наведении
   белый текст из первого ложился на белый фон второго — кнопка становилась пустой. */
.btn.ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
}
.btn.ghost:hover { background: #f2f4f0; color: var(--ink); }


/* ── этапы воронки: цвет, шаг по этапам, редактор ─────────────────────────────────────── */

/* Цвет этапа — ключ палитры, а не произвольный hex: лист свёрстан на нескольких чернилах,
   и свободный цвет из него выпадает. Одна переменная --stage красит и колонку, и панель. */
.stage-c-grey   { --stage: var(--ruled); }
.stage-c-blue   { --stage: var(--stamp); }
.stage-c-teal   { --stage: #2b7a78; }
.stage-c-green  { --stage: var(--approved); }
.stage-c-orange { --stage: var(--minium); }
.stage-c-red    { --stage: var(--error); }
.stage-c-violet { --stage: #6b4fa0; }

.kanban-col .kanban-col-head { color: var(--stage, var(--stamp)); }

.step-btn { font-family: var(--mono); font-size: 13px; line-height: 1; padding: 4px 6px;
  background: var(--sheet); color: var(--ink); border: 1px solid var(--ruled-soft);
  cursor: pointer; }
.step-btn:hover:enabled { border-color: var(--stamp); color: var(--stamp); }
.step-btn:disabled { color: var(--ruled); cursor: default; }

.stage-panel { display: flex; align-items: center; gap: 12px; margin: 18px 0 10px;
  padding: 8px 12px; background: var(--sheet); border: 1px solid var(--ruled-soft);
  border-left: 4px solid var(--stage, var(--ruled)); }
.stage-panel-title { flex: 1; display: flex; align-items: center; gap: 10px;
  font-family: var(--display); font-size: 16px; letter-spacing: .02em; }
.stage-dot { width: 10px; height: 10px; border-radius: 50%;
  background: var(--stage, var(--ruled)); }

.stages-table td { vertical-align: top; }
.stages-table input[type=text] { width: 100%; }
.stages-table .num-cell { text-align: right; font-family: var(--mono); }
.stage-colors { display: flex; gap: 4px; }
.stage-swatch { position: relative; cursor: pointer; }
.stage-swatch input { position: absolute; opacity: 0; width: 0; height: 0; }
.stage-swatch span { display: block; width: 16px; height: 16px;
  background: var(--stage); border: 1px solid var(--ruled-soft); }
.stage-swatch input:checked + span { outline: 2px solid var(--ink);
  outline-offset: 1px; }
.stage-blocks { display: flex; flex-direction: column; gap: 2px; font-size: 12px; }

/* ── действия этапа в карточке ────────────────────────────────────────────────────────── */

.stage-actions { display: flex; flex-direction: column; gap: 8px; margin: 0 0 18px; }
.stage-block { background: var(--sheet); border: 1px solid var(--ruled-soft);
  border-left: 3px solid var(--stage, var(--ruled)); padding: 10px 12px; }
.stage-block.locked { opacity: .7; }
.stage-block-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px;
  font-family: var(--mono); font-size: 12px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--stamp); }
.stage-block-head .muted { text-transform: none; letter-spacing: 0; }
.block-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0; }
.block-main { flex: 1; min-width: 220px; display: flex; align-items: baseline;
  gap: 8px; flex-wrap: wrap; }
.block-main label { display: flex; align-items: baseline; gap: 6px; }
.kanban-card-dots { display: flex; gap: 4px; margin-top: 6px; }
.kanban-card-dots .dot { width: 7px; height: 7px; border-radius: 50%;
  border: 1px solid var(--ruled); background: transparent; }
.kanban-card-dots .dot.done { background: var(--approved); border-color: var(--approved); }
.bid-table { display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: baseline;
  margin-bottom: 8px; }
.bid-table > div, .bid-table label { display: flex; align-items: baseline; gap: 6px; }
.bid-limit { padding: 6px 10px; margin-bottom: 8px; background: var(--minium-pale);
  border-left: 3px solid var(--minium); }
.send-files { display: flex; flex-direction: column; gap: 2px; margin: 8px 0; }
.send-files label { display: flex; align-items: baseline; gap: 6px; font-size: 13px; }
.settings-nav a.active { color: var(--stamp); border-bottom: 2px solid var(--stamp); }
.settings-nav a.locked { color: var(--ink-soft); }

/* Комплектование: широкая таблица закупки внутри блока этапа. Девять колонок влезают
   в лист 1060px только с заданными ширинами — по содержимому браузер ужимает поля до
   нечитаемых полосок: «шт» в поле шириной 20px не видно вовсе, и единицы измерения
   выглядят непроставленными. */
.proc-table { font-size: 12.5px; table-layout: fixed; min-width: 900px; }
.proc-table th { padding: 6px 7px; }
.proc-table tbody:not(.grafa) td { padding: 6px 7px; vertical-align: top; }
.proc-table .c-num { width: 26px; }
.proc-table .c-qty { width: 104px; }
.proc-table .c-where { width: 136px; }
.proc-table .c-price { width: 76px; }
.proc-table .c-stage { width: 152px; }
.proc-table .c-ship { width: 100px; }
.proc-table .c-stock { width: 82px; }
.proc-table .c-del { width: 38px; }
/* Кнопки строки — по мерке графы: «вернуть» и «есть 120» в неё не влезали и наезжали
   на соседнюю. */
.proc-table .btn.small { padding: 4px 6px; font-size: 11.5px; max-width: 100%; }
.proc-table input[type="text"], .proc-table select, .proc-table textarea {
  width: 100%; min-width: 0; font: inherit; padding: 4px 6px; }
/* Наименование видно целиком: поле переносит строки и растёт под текст. field-sizing —
   Chrome 123+; где его нет, остаются две строки с прокруткой, а не обрезанная строка. */
.proc-table textarea.proc-name { line-height: 1.3; field-sizing: content; }
.proc-table input.proc-art, .proc-table .proc-note, .proc-table .proc-track { margin-top: 3px; }
/* Количество и единица — одной графой: врозь они читаются как два разных числа, а
   вместе занимают меньше места и всегда помещаются в строку. */
.proc-table .proc-qty { display: flex; gap: 4px; }
.proc-table .proc-qty input { flex: 1 1 auto; text-align: right; }
.proc-table input.proc-unit { flex: 0 0 40px; text-align: left; }
.proc-table select { max-width: none; }
.proc-table tr.proc-done td { background: var(--approved-pale); }
.proc-table tr.proc-done input, .proc-table tr.proc-done select,
.proc-table tr.proc-done textarea { background: transparent; }
.proc-add .block-main input { width: auto; }
/* «Что купить» — наименование позиции: растёт под текст и забирает ширину строки. */
.proc-add .block-main textarea.grow { flex: 1 1 280px; width: auto; }
/* Ссылка-кнопка внутри подсказки: это действие формы, но выглядеть должно ссылкой. */
.linkish { background: none; border: 0; padding: 0; font: inherit; color: var(--stamp);
  text-decoration: underline; cursor: pointer; }
/* Кнопка «сохранить», спрятанная в начале формы: только чтобы Enter в поле таблицы
   отправлял форму ею, а не первой видимой кнопкой строки. display:none не годится —
   такую кнопку браузер кнопкой по умолчанию не считает. */
.default-submit { position: absolute; width: 1px; height: 1px; padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%); }

/* --- профиль участника: галочки статуса одной колонкой ------------------------------- */
.doc-field.checks { flex-direction: column; align-items: flex-start; gap: 6px; }
/* Шрифт, рамка и поля — общие с input (правило выше): на бланке многострочное поле не
   должно выглядеть другим элементом, чем однострочное рядом. */
.doc-field textarea { width: 100%; }

/* --- вывод AI-анализа: светофор под полями обеспечений ------------------------------- */
/* Отбивка слева цветом вывода: с доски видно, чем кончился разбор, не читая находок.
   Цвета — те же чернила листа, что у остальных статусов, новых в палитру не заводим. */
.verdict { margin-top: 14px; padding: 10px 12px; border: 1px solid var(--ruled-soft);
  border-left: 3px solid var(--ink-soft); background: var(--sheet); }
.verdict.go { border-left-color: var(--approved); }
.verdict.caution { border-left-color: var(--attention-dot); }
.verdict.stop { border-left-color: var(--error); }
.verdict-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
  font-size: 14px; }
.verdict-head strong { font-family: var(--display); text-transform: uppercase;
  letter-spacing: .04em; font-size: 13px; }
.verdict.go .verdict-head strong { color: var(--approved); }
.verdict.caution .verdict-head strong { color: var(--attention); }
.verdict.stop .verdict-head strong { color: var(--error); }
.verdict-summary { color: var(--ink-soft); font-size: 13px; }
.verdict-foot { margin-top: 8px; }

.findings { list-style: none; margin: 8px 0 0; padding: 0; }
.finding { display: grid; grid-template-columns: 10px auto 1fr; gap: 2px 8px;
  align-items: baseline; padding: 5px 0; border-top: 1px solid var(--ruled-soft);
  font-size: 13.5px; }
.finding .dot { width: 8px; height: 8px; border-radius: 50%; align-self: center; }
.findings.green .dot { background: var(--approved); }
.findings.yellow .dot { background: var(--attention-dot); }
.findings.red .dot { background: var(--error); }
.finding-topic { font-family: var(--mono); font-size: 11px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-soft); white-space: nowrap; }
/* Заголовок группы: светофор должен читаться и в чёрно-белой печати, и дальтоником. */
.findings-head { font-family: var(--mono); font-size: 11px; letter-spacing: .04em;
  text-transform: uppercase; margin: 10px 0 0; display: flex; align-items: center; gap: 6px; }
.findings-head .dot { width: 9px; height: 9px; border-radius: 50%; }
.findings-head.green { color: var(--approved); }
.findings-head.yellow { color: var(--attention); }
.findings-head.red { color: var(--error); }
.findings-head.green .dot { background: var(--approved); }
.findings-head.yellow .dot { background: var(--attention-dot); }
.findings-head.red .dot { background: var(--error); }
/* Справочное — без светофора: серая точка, чтобы не читалось как «внимание». */
.findings-head.info { color: var(--ink-soft); }
.findings-head.info .dot, .findings.info .dot { background: var(--ruled); }
.finding-detail, .finding-source { grid-column: 3; color: var(--ink-soft);
  font-size: 12.5px; }
.finding-source { font-family: var(--mono); font-size: 11.5px; }

/* Условия договора: подпись слева, значение справа — те же линейки, что у находок. */
.terms { display: grid; grid-template-columns: max-content 1fr; gap: 0 12px;
  margin: 6px 0 0; font-size: 13.5px; }
.terms dt, .terms dd { margin: 0; padding: 5px 0; border-top: 1px solid var(--ruled-soft); }
.terms dt { font-family: var(--mono); font-size: 11px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-soft); }
.terms .finding-source { display: block; color: var(--ink-soft); }


@media (max-width: 720px) {
  .finding { grid-template-columns: 10px 1fr; }
  .finding-topic { grid-column: 2; }
  .finding-title, .finding-detail, .finding-source { grid-column: 2; }
  .terms { grid-template-columns: 1fr; }
  .terms dd { border-top: 0; padding-top: 0; }
}

/* Правовые документы: узкая колонка, читаемые абзацы. */
.legal { max-width: 62em; }
.legal h2 { margin: 22px 0 8px; font-size: 17px; }
.legal h3 { margin: 16px 0 6px; font-size: 15px; }
.legal p, .legal li { font-size: 14px; line-height: 1.55; }
.legal ol, .legal ul { padding-left: 20px; }
.legal table { margin: 10px 0 16px; }
.foot-legal { display: flex; gap: 14px; flex-wrap: wrap; }
.foot-legal a { color: var(--ink); text-decoration: none; }
.foot-legal a:hover { color: var(--stamp); text-decoration: underline; }

/* ── Новости: газетная полоса ───────────────────────────────────────────── */

/* Раздел нарочно выпадает из чертёжной стилистики: сюда приходят читать, а не заполнять
   формы. Всё под .newspaper — стили газеты не протекают на остальной портал. Бумага
   тёплая, газетная; линейки чёрные, как типографская краска. */
.newspaper {
  --newsprint: #f3f1e9;
  --newsink: #1b1a17;
  --newsgrey: #5a554c;
  background: var(--newsprint);
  color: var(--newsink);
  border: 1px solid var(--ruled);
  padding: 22px 30px 30px;
  font-family: var(--serif);
}
.newspaper a { color: inherit; text-decoration: none; }
.newspaper a:hover { color: var(--stamp); }

/* Шапка издания между двойными линейками: сверху 3px + 1px (вторая — тенью внутри рамки,
   без лишней разметки), снизу — строка-дата. */
.np-masthead {
  text-align: center;
  border-top: 3px solid var(--newsink);
  box-shadow: inset 0 4px 0 var(--newsprint), inset 0 5px 0 var(--newsink);
  padding-top: 12px;
}
.np-kicker { font-family: var(--mono); font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--newsgrey); margin: 2px 0 6px; }
.newspaper .np-title {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(30px, 6.4vw, 62px);
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1;
  margin: 0 0 12px;
}
.np-masthead-small .np-title { font-size: clamp(22px, 3.4vw, 32px); margin: 2px 0 10px; }
.np-dateline {
  display: flex;
  justify-content: space-between;
  gap: 6px 16px;
  flex-wrap: wrap;
  border-top: 1px solid var(--newsink);
  border-bottom: 4px double var(--newsink);
  padding: 6px 2px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .04em;
}

.np-rubrics { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 20px;
  padding: 9px 0; border-bottom: 1px solid var(--newsink); font-family: var(--mono);
  font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.np-rubrics a.active { color: var(--stamp); box-shadow: inset 0 -2px 0 var(--stamp); }

.np-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px;
  flex-wrap: wrap; margin-top: 10px; font-family: var(--mono); font-size: 12px;
  color: var(--newsgrey); }
.newspaper .np-read-all { font-family: var(--mono); font-size: 12px; color: var(--stamp);
  text-decoration: underline; }

/* Непрочитанное — квадратик сурика, того же цвета, что значок в меню. */
.np-fresh { display: inline-block; width: 8px; height: 8px; background: var(--minium);
  margin-right: 7px; vertical-align: 1px; }

.np-overline { font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--newsgrey); margin: 0 0 8px; }

/* Гвоздь номера: крупный заголовок, анонс курсивом, текст в две колонки с буквицей. */
.np-lead { padding: 22px 0 20px; border-bottom: 3px solid var(--newsink); }
.np-lead h2 { font-family: var(--serif); font-weight: 700; font-size: clamp(26px, 3.6vw, 40px);
  line-height: 1.12; margin: 0 0 12px; }
.np-standfirst { font-size: 19px; line-height: 1.5; font-style: italic; margin: 0 0 16px; }
.np-columns { columns: 2; column-gap: 34px; column-rule: 1px solid var(--ruled);
  font-size: 16.5px; line-height: 1.62; text-align: justify; hyphens: auto; }
.np-columns p, .np-body p { margin: 0 0 .8em; }
.np-dropcap > p:first-child::first-letter {
  float: left;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 3.7em;
  line-height: .8;
  padding: 6px 8px 0 0;
}
.np-more { font-family: var(--mono); font-size: 12px; letter-spacing: .06em;
  text-transform: uppercase; margin: 4px 0 0; }
.newspaper .np-more a { color: var(--stamp); }

/* Остальные материалы — три столбца через вертикальные линейки, ряды — через горизонтальные. */
.np-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.np-story { padding: 18px 20px 20px; border-left: 1px solid var(--ruled); }
.np-story:nth-child(3n+1) { border-left: 0; padding-left: 0; }
.np-story:nth-child(3n) { padding-right: 0; }
.np-story:nth-child(n+4) { border-top: 1px solid var(--ruled); }
.np-story h3 { font-family: var(--serif); font-weight: 700; font-size: 20px; line-height: 1.22;
  margin: 0 0 8px; }
.np-teaser { font-size: 15px; line-height: 1.55; margin: 0; color: #36332d; }
.np-empty { text-align: center; padding: 44px 0; font-style: italic; color: var(--newsgrey); }

/* Статья: узкая мера строки — длинную строку засечного текста трудно читать. */
.np-article { max-width: 68ch; margin: 0 auto; padding: 26px 0 6px; }
.newspaper .np-article h1 { font-family: var(--serif); font-weight: 700; text-transform: none;
  letter-spacing: 0; font-size: clamp(28px, 4vw, 42px); line-height: 1.12; margin: 0 0 14px; }
.np-body { font-size: 18px; line-height: 1.7; }
.newspaper .np-body a { color: var(--stamp); text-decoration: underline; overflow-wrap: anywhere; }
.np-source { border-top: 1px solid var(--newsink); margin-top: 24px; padding-top: 10px;
  font-family: var(--mono); font-size: 12.5px; overflow-wrap: anywhere; }
/* Подвал статьи — той же ширины, что текст: 68ch считается в засечном шрифте полосы,
   поэтому мера задаётся обёртке, а не моноширинной строке «Все новости» внутри. */
.np-article-foot { max-width: 68ch; margin: 18px auto 0; }
.np-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
  border-top: 3px solid var(--newsink); padding-top: 12px;
  font-weight: 700; line-height: 1.3; }
.np-pager small { display: block; font-family: var(--mono); font-size: 11px; font-weight: 400;
  letter-spacing: .1em; text-transform: uppercase; color: var(--newsgrey); margin-bottom: 4px; }
.np-pager .np-next { grid-column: 2; text-align: right; }
.np-back { margin-top: 16px; }

/* Редактор новости в админке. */
.news-edit { display: grid; gap: 16px; max-width: 820px; }
.news-edit label { display: grid; gap: 6px; font-size: 14px; font-weight: 600; }
.news-edit label .muted { font-weight: 400; }

@media (max-width: 900px) {
  .np-grid { grid-template-columns: 1fr; }
  .np-story, .np-story:nth-child(n) { border-left: 0; padding: 16px 0;
    border-top: 1px solid var(--ruled); }
  .np-story:first-child { border-top: 0; }
  .np-columns { columns: 1; }
}

@media (max-width: 720px) {
  .newspaper { padding: 14px 14px 20px; }
  .np-body { font-size: 17px; }
  .np-dropcap > p:first-child::first-letter { font-size: 3em; }
  .np-pager { grid-template-columns: 1fr; }
  .np-pager .np-next { grid-column: 1; text-align: left; }
}

/* Токен обмена с 1С: выделяется целиком одним кликом и не рвёт узкий экран. */
code.select-all { user-select: all; word-break: break-all; }