/* ══════════════════════════════════════════════════════════════════════════
   ДОБАВКИ СИСТЕМЫ К ДИЗАЙН-СИСТЕМЕ ПРОТОТИПА

   `base.css` — копия прототипа, и она копия НАМЕРЕННО: пока файлы
   совпадают побайтно, расхождение вида системы и прототипа видно одной
   командой сравнения. Как только сюда начнут дописывать, эта проверка
   перестанет работать.

   Поэтому всё, чего в прототипе нет, живёт здесь. Каждое правило —
   с причиной и с числом, которое его вызвало.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Метка с длинным текстом ────────────────────────────────────────────────
   `.badge` — ярлык («Сдан», «Просрочен»), и `white-space: nowrap` для
   ярлыка верен: перенос в двухсловном ярлыке выглядит поломкой.

   Но тем же классом набрано состояние отчёта — «Отчёт за 14.08.2026 сдан
   12:50, редакция 1». На телефоне это 573 px при экране 375, и страница
   получала горизонтальную прокрутку целиком: замер `scrollWidth` 589
   против `clientWidth` 375 при мобильной эмуляции 375×812.

   Горизонтальная прокрутка на телефоне — прямой удар по главному
   пользователю: прораб в перчатке, одна рука занята, экран под солнцем.

   Модификатор для случая, когда меткой набрано предложение, а не ярлык. */
.badge--strip{
  display: flex;
  max-width: 100%;
  white-space: normal;
  align-items: flex-start;
}
.badge--strip::before{
  /* Значок не должен съезжать вместе с переносом строки. */
  flex: none;
  margin-top: .1em;
}

/* ── Две величины над полем ввода ──────────────────────────────────────────
   Взято ПОБУКВЕННО из prototip/priemka.html (собственные стили страницы),
   вместе с причиной, которая там записана:

     «Над полем — ровно две величины: сколько сделала бригада и сколько
      проверил прораб. Технадзор стоит на пятом этаже с телефоном в одной
      руке: ступени, до которых объём ещё не дошёл, ему сейчас не нужны,
      а поле ввода обязано быть в первом экране без прокрутки.
      Полный путь объёма живёт на экране затрат, где его читают сидя.»

   В base.css этих правил нет: в прототипе они лежат в <style> самой
   страницы приёмки, а base.css — побайтная копия общего файла и правке
   не подлежит.

   Число, которое это вызвало: экран приёмки сперва показывал три плитки
   В-40 над полем, и при мобильной эмуляции 375×812 первое поле ввода
   оказалось на 1027 px от верха — ниже первого экрана, при высоте
   карточки 744 px и странице в 4,6 экрана на три работы. Начальник
   участка стоит на площадке; поле, до которого надо прокручивать,
   он не заполнит — позвонит. Три уровня В-40 при этом никуда не делись:
   они стоят строкой НИЖЕ поля, где их читают после решения, а не до. */
.pair{
  display: flex; gap: var(--p5); flex-wrap: wrap;
  margin: var(--p4) 0; padding: var(--p3) 0;
  border-top: 1px solid var(--line-inner); border-bottom: 1px solid var(--line-inner);
}
.pair__one{ flex: 1 1 120px; min-width: 100px; }
.pair__number{
  display: block; font-size: var(--t4); font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.pair__name{
  display: block; margin-top: var(--p1);
  color: var(--text2); font-size: var(--t1); font-weight: 500;
  letter-spacing: .04em; text-transform: uppercase;
}

/* ── Экран «Стройка сегодня»: день, четыре числа, метка в строке ────────────
   Взято ПОБУКВЕННО из prototip/panel-direktora.html и prototip/index.html
   (собственные стили этих страниц). В base.css их нет: в прототипе они
   лежат в <style> самих страниц, а base.css — побайтная копия общего
   файла и правке не подлежит.

   Числа, которые это вызвало, — из прототипа же: четыре плитки сводки
   при экране 375 px по умолчанию встают В ОДНУ колонку (правило
   .grid--4 в base.css), и четыре числа занимают четыре экрана
   прокрутки. Директор смотрит панель утром с телефона: сводка обязана
   читаться целиком, поэтому на узком экране она 2×2, а не 1×4. */

/* одна строка сути под заголовком экрана */
.day{ margin: 0 0 var(--p6); }
.day__date{ color: var(--text2); font-size: var(--t3); }

/* четыре числа: на телефоне 2×2, за столом в ряд */
.summary .tile__bottom{ font-size: var(--t1); }
@media (max-width: 560px){
  .summary{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* число тревоги — тем же размером, но своим цветом и знаком.
   Цвет не единственный носитель: рядом стоит знак ■. */
.tile--error .tile__number{ color: var(--error); }
.tile--error .tile__name::before{ content: "■ "; font-size: .85em; }

/* строка списка: метка справа не сжимается вместе с текстом */
.row__badge{ flex: 0 0 auto; }

/* ── Карточка наряда: отметить работы к закрытию ───────────────────────────
   Прораб в перчатке важнее красоты. Отметка браузера по умолчанию —
   13×13 px: попасть в неё пальцем в перчатке нельзя, а метка рядом
   кликабельна и об этом человек не знает. Замерено на живой странице
   04.09.2026 при настоящей эмуляции 375×812.

   Поэтому увеличена САМА отметка (24 px), а вся строка метки сделана
   целью нажатия не меньше 44 px по высоте. Цвет отметки берётся
   из акцента темы, чтобы тёмная тема не потеряла её на тёмном фоне. */
.work-order-line__mark{
  display: flex; align-items: center; gap: var(--p3);
  min-height: 44px; cursor: pointer;
}
.work-order-line__mark input[type="checkbox"]{
  flex: 0 0 auto; width: 24px; height: 24px; margin: 0;
  accent-color: var(--accent-main);
}

/* ── Бланк наряда: строки под шапкой ───────────────────────────────────────
   Строка бланка — карточка, а не ряд <table>: на 375 px таблица из четырёх
   колонок уезжает за край, а смотрит на неё прораб именно с телефона.
   Отступ слева-полосой показывает, что это ЧАСТЬ бланка, а не отдельный
   документ. */
.form-line{ border-left: 3px solid var(--line); }
.form-line + .form-line{ margin-top: var(--p4); }

/* ── Снабжение: отметка в поле формы ───────────────────────────────────────
   Тот же урок, что на карточке наряда, и та же цена: 13×13 px браузера
   в перчатке не нажимаются, а завскладом принимает машину в шесть вечера
   в темноте. Отметка — 24 px, вся подпись — цель нажатия не меньше 44 px
   по высоте.

   Правило стоит на `.field__name`, а не на отдельном классе: отметок
   в этом контуре две («принимаю эту позицию», «прямой телефонный
   заказ»), и заводить под каждую свой класс значит завести два места,
   где размер может разойтись. */
.field__name:has(input[type="checkbox"]){
  display: flex; align-items: center; gap: var(--p3);
  min-height: 44px; cursor: pointer; text-transform: none; letter-spacing: 0;
}
.field__name input[type="checkbox"]{
  flex: 0 0 auto; width: 24px; height: 24px; margin: 0;
  accent-color: var(--accent-main);
}

/* Складская таблица: числа — цифра под цифрой. Четыре остатка WHS-04
   сравнивают глазами, а пропорциональные цифры сравнивать нельзя. */
.registry td.number{ font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ── Маршрут документа: путь, а не ярлык ───────────────────────────────────
   Подрядчик спросил прямо: «на каком шаге мой акт». Ярлык «есть
   замечания» отвечает, ГДЕ акт стоит, и не отвечает, сколько шагов
   осталось до денег. Поэтому семь состояний CLS-03 показаны путём.

   Взято по образцу `.levels__path` из base.css (путь семи величин),
   но своим классом: `.levels` в прототипе показывается только на трёх
   экранах по `body[data-screen]`, и вписать сюда четвёртый значило бы
   править побайтную копию прототипа.

   Числа, которые задали правило: семь шагов при экране 375 px в ряд
   дают по 53 px на шаг — «повторная проверка» в такую колонку
   не помещается ни при каком кегле. На узком экране путь идёт
   столбцом, как и `.levels__path`.

   Цвет не единственный носитель состояния: пройденный шаг несёт
   полосу и плотный текст, текущий — ещё и точку перед именем. */
.route{
  display: flex; align-items: stretch; gap: var(--p1);
  overflow: hidden; border-radius: var(--r1);
}
.route__step{
  flex: 1 1 0; min-width: 0;
  padding: var(--p3);
  background: var(--surface2);
  border-top: 3px solid var(--edge);
  color: var(--text2); font-size: var(--t1); line-height: 1.4;
}
.route__step[data-passed="1"]{
  background: var(--accent-bg); border-top-color: var(--accent-main);
  color: var(--text); font-weight: 500;
}
.route__step[data-current="1"]{ font-weight: 600; }
/* ДЗ-16 обхода 28.09.2026: «не понадобилось» и «ещё не пройден» выглядели
   одинаково — тот же серый, разница в одном слове. Пропущенная ветка —
   пунктиром и прозрачной: шага не было и не будет. */
.route__step[data-skipped="1"]{
  background: transparent; border-top-style: dashed; color: var(--text2);
}
/* ТР-638: у пройденного шага — дата и кто; «Дальше:» — под путём. */
.route__who{ display: block; font-weight: 400; color: var(--text2); font-size: var(--t0, 12px); }
.next{ margin-top: var(--p2); }
.route__step[data-current="1"]::before{ content: "● "; color: var(--accent-main); }

@media (max-width: 720px){
  .route{ flex-direction: column; }
  .route__step{
    border-top: 0; border-left: 3px solid var(--edge);
  }
  .route__step[data-passed="1"]{ border-left-color: var(--accent-main); }
  .route__step[data-skipped="1"]{ border-left-style: dashed; }
}

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

   Тот же приём уже применён на экране склада, где на месте резерва
   стоит «не ведётся» вместо нуля. */
.tile__number.muted{ color: var(--text2); font-size: var(--t5); }

/* ══════════════════════════════════════════════════════════════════════════
   РАБОЧЕЕ МЕСТО ЗА СТОЛОМ

   Отзыв заказчика 08.09.2026: «я думал будет выглядеть как битрикс»,
   «это вариант мне как пользователю вообще не нравится».

   Разобран так: работа обязана занимать окно, а не колонку в середине окна.
   Счётом по CSS на окне 1920: рейл 256 + колонка 720 (`page--narrow`) —
   содержимое занимает 35 % ширины, по 472 px пустоты с каждой стороны.
   На экране нарядов при строке 52 и карточке-фильтре ~190 в первый экран
   ноутбука попадает 7 строк реестра.

   ПЛОТНОСТЬ ВКЛЮЧАЕТСЯ ТОЛЬКО ЗА СТОЛОМ И ТОЛЬКО ПОД МЫШЬЮ: второй блок
   закрыт `pointer: fine`. Планшет в поперечной ориентации на 1100+ отдаёт
   `pointer: coarse` и остаётся просторным. Прораб в перчатке не получает
   36-пиксельных строк никогда — правило «прораб в перчатке важнее красоты»
   здесь не отменяется, а НЕ ПРИМЕНЯЕТСЯ.

   Новых цветов не заводится: `--surface2` уже в палитре и проверен на AA.

   ПОПРАВКА 27.09.2026 (КР-01 обхода): ворота стали `any-pointer: fine`
   вместо `pointer: fine`. Сенсорный ноутбук с тачпадом отдаёт ГЛАВНЫМ
   указателем сенсор — и слой выключался у завскладом и ПТО за столом,
   ради которых он и сделан (замер критика: кабинет 6 798 px против 5 009).
   `any-pointer: fine` спрашивает, есть ли у устройства ХОТЬ ОДИН точный
   указатель: у планшета без мыши его нет, и он остаётся просторным.
   Прораба в перчатке это не задевает и тогда, когда планшет с клавиатурой:
   три полевых экрана исключены из слоя поимённо (третьи ворота ниже).
   ══════════════════════════════════════════════════════════════════════════ */

/* ── А. Ширина и рама. Действует на любом указателе ──────────────────────── */
@media (min-width: 1100px){

  /* Один токен ведёт и ширину меню, и отступ страницы. */
  :root{ --menu-width: 240px; }

  /* Рейл — своя поверхность, а не тот же лист, что карточки. */
  .menu{ background: var(--surface2); padding: var(--p2) var(--p2) var(--p5); }
  .menu__top{ margin-bottom: var(--p3); }
  .menu__role{ display: none; }   /* роль есть в профиле шапки */

  /* Подпись-объяснение уходит из рейла. Она НЕ пропадает: те же слова
     стоят подзаголовком того экрана, куда пункт ведёт. Объяснение
     читается там, где им пользуются, а не в списке из четырнадцати. */
  .menu__todo{ display: none; }
  .menu__name{ font-size: var(--t1); }
  .menu__section{ margin-bottom: var(--p3); }
  .menu__group{ margin-bottom: 0; padding: 0 var(--p2); line-height: 24px; }
  .menu__item[aria-current="page"]{ background: var(--surface); }
  .menu__bottom{ margin-top: var(--p4); }

  /* Шапка 48. Цель нажатия остаётся 44: 2 + 44 + 2. */
  .topbar{ min-height: 48px; padding: 2px var(--p4); }

  /* Рабочая область во всю ширину окна. Реестр — это реестр. */
  .page{ max-width: none; padding: var(--p4) var(--p4) var(--p7); }

  /* Узкий экран остаётся узким по МЕРЕ ЧТЕНИЯ, но прижат влево.
     Колонка, плавающая посреди пустого окна, читается как показ,
     а не как рабочее место. */
  .page--narrow{ max-width: 880px; margin-left: 0; margin-right: auto; }

  /* Заголовок экрана — строка тулбара, а не афиша. */
  .title{ font-size: var(--t5); margin-bottom: 0; }
  .subtitle{ margin-bottom: var(--p4); font-size: var(--t2); }
  .title:last-child{ margin-bottom: var(--p4); }
  .title + .grid, .title + .card, .title + .list,
  .title + .registry-wrap, .title + .tile{ margin-top: var(--p4); }
  .section{ margin-top: var(--p5); }
  .card + .card{ margin-top: var(--p3); }

  /* Плитки сводки: шесть в ряд, а не четыре в половину экрана. */
  .grid{ gap: var(--p3); }
  .grid--4{ grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
  .tile{ padding: var(--p3) var(--p4); }
  .tile__number{ font-size: var(--t5); }
  .tile__bottom{ margin-top: var(--p2); }
}

/* ── Б. Плотность. ТОЛЬКО мышь за столом ─────────────────────────────────
   WCAG 2.1 AA (2.5.8) требует 24×24 для точного указателя; 44 — правило
   проекта для пальца, и оно здесь не отменяется, а не применяется:
   ниже 1100 px и на любом грубом указателе действует прежняя раскладка. */
@media (min-width: 1100px) and (any-pointer: fine){
  .menu__item{ min-height: 36px; padding: 0 var(--p2); }
  .menu__item[aria-current="page"]::before{ top: 4px; bottom: 4px; }

  /* Высоты шапки и строки отсюда УБРАНЫ 08.09.2026: стояли 32 и 36,
     взятые на глаз. Их задаёт раздел «ТАБЛИЦА — ЯДРО УЧЁТНОГО ВИДА»
     в конце файла числами выбранного заказчиком варианта В (30 и 32),
     и две копии одного правила в одной и той же медиазапросной скобке
     держать нельзя — одна начнёт врать. */
  .registry .button{ min-height: 28px; }   /* 28 > 24, норма выполнена */

  .list .row{ min-height: 44px; padding: var(--p2) var(--p4); }
}

/* ══════════════════════════════════════════════════════════════════════════
   КРУПНОЕ — ЧИСЛУ, А НЕ ЗАГОЛОВКУ

   Разбор вида 08.09.2026, находка первая из трёх. Смотрели «Стройку
   сегодня»: самый крупный элемент на экране — заголовок «Стройка сегодня»
   (28px), и он не несёт ничего. Экран и так открыт по этому пункту меню,
   имя продублировано в верхней панели. А число «5 просрочено» — четвёртое
   по заметности, хотя ради него экран и открывают.

   Так устроены системы, к которым привыкли люди заказчика: в Битриксе
   и в 1С крупное — показатель, а имя экрана служебное и мелкое.
   Наоборот было только у нас.

   Что меняется: заголовок экрана уходит в служебный размер, числа
   показателей растут, у тревожного показателя появляется своя плитка.
   Ниже 1100px раскладка прежняя — телефон не трогаем.
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1100px){

  /* Имя экрана — строка, а не афиша: оно уже есть в верхней панели. */
  .title{ font-size: var(--t4); font-weight: 600; }

  /* Показатель — главное на экране. 28 → 34, вес выше, цифры
     моноширинные: столбец чисел должен читаться по разрядам. */
  .tile__number{
    font-size: 34px;
    font-weight: 650;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
  }
  .tile--main .tile__number{ font-size: 42px; }

  /* Подпись показателя — тише числа, но читаемо: она объясняет,
     что за число, и на неё смотрят вторым взглядом. */
  .tile__name{
    font-size: var(--t1);
    letter-spacing: 0.02em;
  }

  /* ТРЕВОЖНЫЙ ПОКАЗАТЕЛЬ ОТЛИЧАЕТСЯ ОТ СПОКОЙНОГО.
     Было: четыре плитки одинаковые, из них три с нулём, и «5 просрочено»
     не выделено ничем, кроме мелкой красной точки в подписи.
     Стало: своя левая полоса и свой фон.

     Цвет НЕ единственный носитель: полоса — это форма, и она видна
     на солнце, в печати и дальтонику. Правило проекта. */
  .tile--error{
    border-left: 3px solid var(--error);
    background: color-mix(in srgb, var(--error) 6%, var(--surface));
  }
  .tile--error .tile__number{ color: var(--error); }

  .tile--warn{
    border-left: 3px solid var(--warn);
    background: color-mix(in srgb, var(--warn) 7%, var(--surface));
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   ПУСТОЕ СОСТОЯНИЕ — ОДНА СТРОКА, А НЕ АБЗАЦ ОПРАВДАНИЙ

   Там же: «За этот день не отчиталось ни одно место» занимало четыре
   строки и треть экрана, а данных под ним не было. Объяснение нужное —
   но не такой ценой: человек открыл экран, чтобы работать, а получил
   лекцию.
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1100px){
  .empty{ padding: var(--p5) var(--p4); }
  .empty__word{ font-size: var(--t4); margin-bottom: var(--p2); }
  .empty p:not(.empty__word){
    font-size: var(--t2);
    max-width: 68ch;      /* длинная строка не читается — режем по мере */
    margin-left: auto;
    margin-right: auto;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   ТРИ ПРИЧИНЫ «2000-Х», НАЗВАННЫЕ НЕЗАВИСИМО

   08.09.2026 три дизайнера порознь делали три разных варианта вида —
   корпоративный портал, современный инструмент, учётная система, — и,
   не сговариваясь, назвали ОДНИ И ТЕ ЖЕ причины, по которым построенное
   читается как сайт двадцатилетней давности. Совпадение трёх независимых
   разборов весит больше, чем любой из них по отдельности.

   Поэтому исправляется ЗДЕСЬ, до выбора варианта: эти три вещи верны
   при любом из них.

   ── 1. КАРТОЧКА НЕ ЧИТАЕТСЯ КАК ПРЕДМЕТ ────────────────────────────────
   Было: `--shadow: none` и фон #f4f2ee под карточкой #fffefb. Два почти
   совпадающих тёплых тона без тени — карточка не лежит НА фоне, она
   нарисована на нём. Дословно из разбора: «выцветшая распечатка».
   Стало: фон холоднее и темнее, карточка чисто белая, тень 1px в 6 %.
   Разница поверхностей поднята с 3 % до 9 % светлоты.

   ── 2. ПРОПИСНЫЕ С РАЗРЯДКОЙ — САМАЯ УЗНАВАЕМАЯ ПРИМЕТА АДМИНКИ 2008 ──
   Было: семь мест с `text-transform: uppercase` — шапки таблиц, группы
   меню, подписи плиток, заголовки разделов. Прописные читаются медленнее
   строчных (нет рисунка слова) и на экране звучат как крик.
   Стало: обычный регистр, различие несёт вес и размер.

   ── 3. АКЦЕНТ СТОЯЛ ВЕЗДЕ И ПОТОМУ НЕ РАБОТАЛ УКАЗАТЕЛЕМ ───────────────
   Цвет должен отвечать на вопрос «куда нажать». Если им покрашено всё
   заметное, глазу не за что зацепиться. Здесь акцент оставлен ровно
   трём вещам: главное действие, ссылка-номер, текущий раздел.

   ЧЕГО ЗДЕСЬ НЕТ. Ни новой палитры, ни значков, ни перестройки экранов —
   это разное в трёх вариантах, и выбирает заказчик. Здесь только то,
   что все трое назвали ошибкой независимо друг от друга.
   ══════════════════════════════════════════════════════════════════════════ */

/* ЗНАЧЕНИЯ ОТСЮДА УБРАНЫ 08.09.2026, ВЫВОД ОСТАЁТСЯ В СИЛЕ.

   Здесь стояли `--bg: #eceae6`, `--surface: #ffffff` и двойная тёплая тень:
   «тёплая бумага остаётся, но фон уходит глубже». Заказчик выбрал
   вариант В — холодную сине-серую палитру, — и те же три токена теперь
   задаются разделом «ПАЛИТРА ВАРИАНТА В» в конце этого файла, вместе
   со всей остальной палитрой. Две копии одних и тех же токенов в одном
   файле — это две копии правила, и одна из них начала бы врать.

   Вывод, ради которого блок писался, никуда не делся и перенесён туда
   дословно: между фоном и карточкой обязана быть видимая ступень —
   здесь она была 17,6 процентных пункта относительной светлоты
   (#eceae6 → #ffffff), стала 15,6 (#e9edf3 → #ffffff), — и тень
   возвращена: она отвечает на вопрос, лежит карточка на поверхности
   или напечатана вместе с ней.

   Заодно снят дефект, которого тут не было видно: тёмное переопределение
   стояло на голом `:root` внутри `@media (prefers-color-scheme: dark)`,
   без защиты `:not([data-theme="light"])`. Ручной выбор светлой темы
   на тёмной системе не побеждал: base.css отдавал светлые цвета,
   а эти три токена оставались тёмными — фон тёмный, карточки светлые.
   В новом разделе защита стоит. */

/* Карточка снова предмет. */
.card, .tile, .list, .registry-wrap{ box-shadow: var(--shadow); }

/* ── Прописные убраны ───────────────────────────────────────────────────
   Различие несут вес и размер, а не регистр. Разрядку тоже снимаем:
   она нужна прописным, строчным она мешает. */
.findings__name,
.feed-item__kind,
.profile__group,
.menu__group,
.section__name,
.tile__name,
.pair__name,
.registry th{
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
}

/* ── Числа читаются по разряду ──────────────────────────────────────────
   Столбец чисел, набранный пропорциональными цифрами, не сравнивается
   глазом: «17,500» и «1050» встают вразнобой. Это правило проекта
   по существу — объём, остаток и лимит сверяют взглядом каждый день. */
.registry td, .tile__number, .row__number{
  font-variant-numeric: tabular-nums;
}

/* ══════════════════════════════════════════════════════════════════════════
   ПАЛИТРА ВАРИАНТА В. ЭТАП ПЕРВЫЙ ПЕРЕНОСА

   Заказчик 08.09.2026 выбрал из трёх видов вариант В — учётную систему:
   `static/mockups/look-c-ledger.html`. Переносится он частями, потому что
   часть его — перестройка разметки, а часть — только вид.

   ЭТОТ ЭТАП МЕНЯЕТ ТОЛЬКО ВИД. Ни один шаблон не правится; новый класс
   заводится только там, где без него нельзя. Что переносится: палитра,
   плотная таблица, метки состояний, шкала отклонения, строка состояния.
   Что НЕ переносится и почему — сказано в конце файла.

   ── ПОЧЕМУ ХОЛОДНАЯ, А НЕ ТЁПЛАЯ ──────────────────────────────────────
   Прежняя база — тёплая бумага (#f4f2ee, после моей правки #eceae6).
   Довод под ней был верный: холодный белый на солнце даёт блик. Но он
   решал задачу телефона на площадке, а платили за него все остальные
   экраны: тёплый белый на 24-дюймовом мониторе читается как
   незаконченная веб-страница, и именно это заказчик назвал словами
   «я думал будет выглядеть как битрикс».

   Холодный серый корпус с белыми панелями данных читается как рабочее
   место. Блик на площадке при этом НЕ возвращается: фон рабочей области
   #e9edf3 ТЕМНЕЕ прежнего #f4f2ee — относительная светлота по WCAG
   84,4 % против 88,9 %, то есть страница стала менее бликующей,
   а не более. Чисто белым остаётся только панель данных, там,
   где стоят цифры.

   ── ЧЕМ ПЛАТИМ ────────────────────────────────────────────────────────
   Тёплая палитра мягче на встрече и на печати; холодная суше и строже.
   Это цена, и она принята заказчиком вместе с вариантом.

   ── ЧТО ПРОВЕРЕНО ─────────────────────────────────────────────────────
   Каждая пара измерена по формуле относительной светлоты WCAG 2.1
   (скрипт `kontrast.py` в рабочем каталоге захода, 08.09.2026). Три
   значения САМОГО варианта В норму не проходили; они здесь исправлены
   и названы поимённо ниже.
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  /* ── поверхности: четыре ступени вместо двух ──────────────────────────
     Учётный экран одновременно показывает страницу, панель, шапку
     таблицы и строку под курсором. Двумя поверхностями это не
     различается — нужны четыре. */
  --bg:        #e9edf3;   /* рабочая область */
  --surface:        #ffffff;   /* панель данных, карточка, таблица */
  --surface2:       #f4f7fb;   /* шапка таблицы, полоса инструментов, рейл меню */
  --surface3:       #eaeff6;   /* наведение на строке */
  --surface4:       #dde5f0;   /* нажатие; новый токен, в тёплой палитре пары не было */

  /* ── текст ─────────────────────────────────────────────────────────────
     Замеры по порядку: на белом · на шапке таблицы · на наведении ·
     на фоне страницы. */
  --text:      #101828;   /* 17,75 · 16,52 · 15,36 · 15,10 */
  --text2:     #515c6e;   /*  6,76 ·  6,29 ·  5,85 ·  5,75 */
  /* Третья ступень — единица измерения и мелкая приписка в таблице.
     В варианте В она была #626d7f и на фоне страницы давала 4,45 —
     ниже AA. Затемнена до #5c6779: 5,72 · 5,32 · 4,95 · 4,87. */
  --text-muted: #5c6779;
  /* 2,58 на белом — НЕ ДЛЯ ТЕКСТА, как и в тёплой палитре: только
     подсказка в пустом поле и отключённое, то есть ровно то, что WCAG
     выводит из-под требования контраста. Роль та же, тон холодный. */
  --text3:     #98a2b3;
  --text-inv:  #ffffff;

  /* ── линии ─────────────────────────────────────────────────────────────
     `--line` и `--line-inner` — украшение, требования к ним нет.
     `--line2` несёт форму поля ввода и обычной кнопки, и WCAG 2.1
     п. 1.4.11 требует для неё 3:1 к соседнему цвету.

     ВНИМАНИЕ: вариант В обещал в комментарии «3:1 к белому» для своего
     #b6c0cf. Замер даёт 1,84 — обещание неверно, и перенести его значило
     бы уронить норму, которая в тёплой палитре выполнена. Взято #727e91:
     4,11 на белом · 3,83 на шапке таблицы · 3,56 на наведении · 3,50
     на фоне · 3,24 на нажатом. Ровно та же ступень, что давал тёплый
     #817c73 (4,11), только холодная. */
  --line:     #d6dde8;
  --line-inner:  #e6ebf2;
  --line2:    #727e91;
  --edge:       #515c6e;   /* обводка, несущая смысл: дорожка Ганта, рамка */

  /* ── единственный акцент ──────────────────────────────────────────────
     6,39 на белом · 5,95 на шапке таблицы · 5,44 на фоне · 5,46 на своей
     подложке; белый на нём 6,39. Акцент по-прежнему стоит ровно трём
     вещам: главное действие, ссылка-номер, текущий раздел. */
  --accent-main:        #2f56c8;
  --accent-dark:    #2647a8;   /* наведение на главной кнопке, белый 8,24 */
  --accent-bg:    #e8edfb;
  --accent-text:  #ffffff;
  --accent-ring:   0 0 0 3px rgba(47,86,200,.22);

  /* ── ШКАЛА КРИТИЧНОСТИ ────────────────────────────────────────────────
     1–7 контроль · 8–9 риск · 10–19 отставание · 20+ критично.
     Четыре порога проекта получают четыре ступени цвета. Цвет НИКОГДА
     не работает в одиночку: рядом стоит число дней, уровень назван
     словом, а метка несёт квадрат, залитый на четверть, наполовину,
     на три четверти и целиком, — см. раздел меток ниже.

     `--lvl1` в варианте В был #8a6d0f и на своей подложке давал 4,27 —
     ниже AA. Затемнён до #7d6100: 5,10 на подложке · 5,86 на белом ·
     5,46 на шапке таблицы. Остальные три замерены как есть: 5,14 ·
     4,61 · 5,14 на своих подложках. */
  --lvl1:        #7d6100;  --lvl1-bg: #f7efd5;   /* 1–7 дн.   контроль   */
  --lvl2:        #8f5405;  --lvl2-bg: #fbe9d2;   /* 8–9 дн.   риск       */
  --lvl3:        #b04510;  --lvl3-bg: #fbe3d6;   /* 10–19 дн. отставание */
  --lvl4:        #b3261e;  --lvl4-bg: #f9dedb;   /* 20+ дн.   критично   */

  /* ── состояния ────────────────────────────────────────────────────────
     `--warn` намеренно РАВЕН `--lvl2`, а `--error` — `--lvl4`. Иначе
     на одном экране оказались бы два жёлтых и два красных из разных
     наборов, и человек решал бы, значат ли они разное. Значат одно:
     внимание — это риск, сбой — это критично. */
  --ok:         #157347;  --ok-bg:   #e2f1e8;   /* 5,03 на своём чипе */
  --warn:       #8f5405;  --warn-bg: #fbe9d2;   /* 5,14 */
  --error:       #b3261e;  --error-bg: #f9dedb;   /* 5,14 */

  --backdrop:      rgba(16,24,40,.44);

  /* ── глубина ──────────────────────────────────────────────────────────
     Вывод прежнего блока перенесён дословно: тень отвечает на вопрос,
     лежит карточка на поверхности или напечатана вместе с ней. Тон
     холодный, чтобы тень не желтила холодный фон. */
  --shadow:        0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.07);
  --shadow-float:   0 8px 24px rgba(16,24,40,.14), 0 2px 6px rgba(16,24,40,.08);
  --shadow-top:   0 -1px 0 var(--line);

  /* ── штриховки: носитель смысла БЕЗ цвета ─────────────────────────────
     Штриховка говорит «это не число, это состояние». Ссылаются
     на токены, поэтому в тёмной теме переопределять их не нужно:
     var() разворачивается в момент применения, а не объявления. */
  --hatch-tender:   repeating-linear-gradient(135deg,
                   var(--text2) 0 2px, transparent 2px 5px);
  --hatch-none:  repeating-linear-gradient(135deg,
                   var(--line2) 0 2px, transparent 2px 6px);
  --hatch-error: repeating-linear-gradient(135deg,
                   var(--lvl4) 0 3px, transparent 3px 7px);

  /* ── учётная плотность ────────────────────────────────────────────────
     ОТДЕЛЬНЫЕ ИМЕНА, а не переопределение `--row`. В варианте В строка
     называется `--row: 32px`, а в нашей системе `--row: 52px` — это
     строка СПИСКА, по которой прораб попадает пальцем. Переопредели
     я `--row`, сжались бы и списки на телефоне: цель нажатия упала бы
     с 52 до 32 px при норме 44. */
  --row-table:   32px;   /* строка таблицы за столом под мышью */
  --row-header: 30px;   /* шапка таблицы там же */

  /* ── корпус программы ─────────────────────────────────────────────────
     Тёмная верхняя полоса варианта В. НА ЭТОМ ЭТАПЕ НЕ ПРИМЕНЯЕТСЯ:
     `.topbar` держит поиск, переключатель объекта, значок профиля
     и счётчик, и перекрасить её фон, не перекрасив их, значит уронить
     контраст в десяти местах сразу. Токены заведены здесь, чтобы
     на втором этапе синий корпуса не изобрели заново вторым значением.
     Замеры: 13,11 и 6,33 на корпусе. */
  --shell:       #1d2433;
  --shell-2:     #2a3446;
  --shell-text: #e8ecf4;
  --shell-muted:  #9aa6bd;

  color-scheme: light;
}

/* ─── тёмная тема: те же роли, только переопределение ────────────────────
   Защита `:not([data-theme="light"])` обязательна: ручной выбор светлой
   темы должен побеждать системную настройку. Замеры тёмной темы: текст
   14,44 на панели и 15,98 на фоне; второй текст 7,99 / 8,84; тихий текст
   6,25 / 6,91; акцент 7,49 / 8,29; уровни на своих подложках 7,50 · 6,61 ·
   6,33 · 6,36.

   `--line2` в тёмной теме варианта В был #55627a и давал 2,78
   на панели — ниже 3:1. Поднят до #7b89a3: 4,84 · 4,47 · 4,04 · 3,50. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:        #0d1117;
    --surface:        #161c26;
    --surface2:       #1c232f;
    --surface3:       #222b39;
    --surface4:       #2b3546;

    --text:      #e8ecf4;
    --text2:     #a7b2c4;
    --text-muted: #929db0;
    --text3:     #6a7688;
    --text-inv:  #0d1117;

    --line:     #2a3342;
    --line-inner:  #222a37;
    --line2:    #7b89a3;
    --edge:       #a7b2c4;

    --accent-main:        #8ea8ff;
    --accent-dark:    #a9bcff;
    --accent-bg:    #1e2a4a;
    --accent-text:  #0d1117;   /* 8,29 на акценте */
    --accent-ring:   0 0 0 3px rgba(142,168,255,.28);

    --lvl1:        #d9bc63;  --lvl1-bg: #322c1a;
    --lvl2:        #e2a25c;  --lvl2-bg: #33271a;
    --lvl3:        #ee9068;  --lvl3-bg: #352219;
    --lvl4:        #f38b80;  --lvl4-bg: #37201d;

    --ok:         #6cc691;  --ok-bg:   #17301f;
    --warn:       #e2a25c;  --warn-bg: #33271a;
    --error:       #f38b80;  --error-bg: #37201d;

    --backdrop:      rgba(0,0,0,.62);

    --shadow:        0 1px 2px rgba(0,0,0,.5);
    --shadow-float:   0 10px 28px rgba(0,0,0,.6), 0 2px 6px rgba(0,0,0,.4);
    --shadow-top:   0 -1px 0 var(--line);

    --shell:       #10151f;
    --shell-2:     #1c2430;
    --shell-text: #e6eaf2;
    --shell-muted:  #8b97ad;

    color-scheme: dark;
  }
}

/* ─── тот же набор для РУЧНОГО выбора тёмной темы ────────────────────────
   Кнопка ◐ в шапке ставит на <html> атрибут data-theme (layout.js),
   правило в base.css — `:root[data-theme="dark"]`, и здесь оно то же.
   Третья копия значений — плата за то, что CSS не умеет наследовать блок
   объявлений. Меняешь цвет — меняй в трёх местах этого раздела. */
:root[data-theme="dark"]{
  --bg:        #0d1117;
  --surface:        #161c26;
  --surface2:       #1c232f;
  --surface3:       #222b39;
  --surface4:       #2b3546;

  --text:      #e8ecf4;
  --text2:     #a7b2c4;
  --text-muted: #929db0;
  --text3:     #6a7688;
  --text-inv:  #0d1117;

  --line:     #2a3342;
  --line-inner:  #222a37;
  --line2:    #7b89a3;
  --edge:       #a7b2c4;

  --accent-main:        #8ea8ff;
  --accent-dark:    #a9bcff;
  --accent-bg:    #1e2a4a;
  --accent-text:  #0d1117;
  --accent-ring:   0 0 0 3px rgba(142,168,255,.28);

  --lvl1:        #d9bc63;  --lvl1-bg: #322c1a;
  --lvl2:        #e2a25c;  --lvl2-bg: #33271a;
  --lvl3:        #ee9068;  --lvl3-bg: #352219;
  --lvl4:        #f38b80;  --lvl4-bg: #37201d;

  --ok:         #6cc691;  --ok-bg:   #17301f;
  --warn:       #e2a25c;  --warn-bg: #33271a;
  --error:       #f38b80;  --error-bg: #37201d;

  --backdrop:      rgba(0,0,0,.62);

  --shadow:        0 1px 2px rgba(0,0,0,.5);
  --shadow-float:   0 10px 28px rgba(0,0,0,.6), 0 2px 6px rgba(0,0,0,.4);
  --shadow-top:   0 -1px 0 var(--line);

  --shell:       #10151f;
  --shell-2:     #1c2430;
  --shell-text: #e6eaf2;
  --shell-muted:  #8b97ad;

  color-scheme: dark;
}

/* ══════════════════════════════════════════════════════════════════════════
   ТАБЛИЦА — ЯДРО УЧЁТНОГО ВИДА

   Раздел 5 варианта В. Реестр — то, ради чего завсклада, ПТО и снабженец
   открывают систему; всё остальное на их экранах обслуживает таблицу.

   Что делает таблицу учётной, а не «списком на сайте»:
     1) шапка на своей поверхности, а не на той же белой, что данные;
     2) ЛИНИЯ МЕЖДУ СТОЛБЦАМИ. В тёплой дизайн-системе записано
        «вертикальных линий нет» — верно для списка из трёх колонок
        и неверно для реестра из десяти: без вертикали глаз теряет
        столбец на длинной строке и сравнивает не то с тем;
     3) строка 32 px там, где смотрят мышью за столом;
     4) числа по разряду, единица тише числа и не спорит с ним.

   ЧТО НЕ ПЕРЕНЕСЕНО ИЗ РАЗДЕЛА 5 И ПОЧЕМУ. Полосатости («зебры») нет
   ни в варианте В, ни здесь: вертикальная линия и подсветка строки
   под курсором уже ведут глаз, а зебра кладёт поверх них третью сетку
   и замедляет чтение числа. Строки группировки (`tr.grupa`) и итог
   группы не переносятся: свёртка иерархии — это Гант и разметка,
   отдельный этап.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── А. Вид таблицы. Действует на любой ширине и любом указателе ────────── */

/* Шапка — своя поверхность. Она уже `position: sticky` в base.css,
   и на белом фоне закреплённая шапка при прокрутке сливалась с данными.

   Нижняя линия продублирована `inset box-shadow` не для красоты:
   таблица собрана с `border-collapse: collapse`, а в этом режиме
   браузер теряет границу закреплённой ячейки при прокрутке. Тень
   рисуется всегда. */
.registry th{
  background: var(--surface2);
  box-shadow: inset 0 -1px 0 var(--line);
}

/* Линия столбца — тем же токеном, что и разделитель строк: сетка
   должна быть одного веса, иначе она читается как две разные таблицы,
   наложенные друг на друга. */
.registry th, .registry td{ border-right: 1px solid var(--line-inner); }
.registry th:last-child, .registry td:last-child{ border-right: 0; }

/* Наведение. В base.css оно было `--surface2`; после смены палитры
   `--surface2` занята шапкой, и строка под курсором с ней сравнялась бы.
   Наведение — своя, третья поверхность. */
.registry tbody tr:hover{ background: var(--surface3); }

/* Нажатие: четвёртая поверхность. Строка реестра часто кликабельна
   целиком, и «я попал» должно быть видно раньше, чем откроется карточка. */
.registry tbody tr:active{ background: var(--surface4); }

/* Выбор и клавиатура. Полоса слева — ФОРМА, подложка — цвет; порознь
   каждая слабая, вместе читаются с любого расстояния.
   Выбор строки живёт на `aria-selected`, а не на классе: это состояние,
   а не вид, и его обязан слышать экранный диктор. */
.registry tbody tr[aria-selected="true"]{ background: var(--accent-bg); }
.registry tbody tr[aria-selected="true"] td:first-child{
  box-shadow: inset 3px 0 0 var(--accent-main);
}
.registry tbody tr:focus{ outline: none; }
.registry tbody tr:focus-visible{ background: var(--accent-bg); }
.registry tbody tr:focus-visible td:first-child{
  box-shadow: inset 3px 0 0 var(--accent-main);
}

/* Строка, помеченная состоянием. Имена взяты СУЩЕСТВУЮЩИЕ — `row--error`
   и `row--warn` уже применяются к строкам списка (17 и 1 употребление
   в шаблонах); здесь та же пара работает на строке таблицы.
   ЖДЁТ РАЗМЕТКИ: сейчас все `<tr>` в шаблонах голые.

   В списке эта полоса рисуется через `::before` с `position: absolute`;
   у `<tr>` так нельзя, поэтому здесь `inset box-shadow`. Полоса
   состояния НЕ ГАСНЕТ при выборе строки: выбор рисуется второй полосой
   правее, а не вместо первой, — иначе выделив просроченную строку
   человек перестал бы видеть, что она просрочена. */
.registry tbody tr.row--error td:first-child{ box-shadow: inset 3px 0 0 var(--error); }
.registry tbody tr.row--warn td:first-child{ box-shadow: inset 3px 0 0 var(--warn); }
.registry tbody tr.row--error[aria-selected="true"] td:first-child,
.registry tbody tr.row--error:focus-visible td:first-child{
  box-shadow: inset 3px 0 0 var(--error), inset 6px 0 0 var(--accent-main);
}
.registry tbody tr.row--warn[aria-selected="true"] td:first-child,
.registry tbody tr.row--warn:focus-visible td:first-child{
  box-shadow: inset 3px 0 0 var(--warn), inset 6px 0 0 var(--accent-main);
}

/* Итог таблицы. Разметка есть (`tfoot` в contracting/tender-bids.html).
   Двойная верхняя линия — типографская привычка бухгалтерии: под ней
   не данные, а сумма. */
/* Подзаголовок этапа в сборке «Все этапы» (ОЧ-150) */
.registry tr.registry__stage th{ background: var(--surface3); text-align: left; font-weight: 600; }
.registry tfoot td{
  background: var(--surface2);
  color: var(--text);
  font-weight: 700;
  border-top: 2px solid var(--line2);
  border-bottom: 0;
}
.registry tfoot .missing,
.registry tfoot .note{ font-weight: 400; color: var(--text2); }

/* Единица измерения. Сейчас в шаблонах она стоит в той же клетке сразу
   за числом (`{{ объём }} {{ единица }}`) и набрана тем же кеглем —
   то есть «12,5» и «м3» конкурируют за взгляд. Класс ЖДЁТ РАЗМЕТКИ:
   `<span class="unit">м3</span>`. Цвет — третья ступень текста, она
   проверена на AA во всех четырёх подложках. */
.registry .unit{ color: var(--text-muted); font-size: var(--t1); }

/* ── Б. Учётная плотность. ТОЛЬКО МЫШЬ ЗА СТОЛОМ ─────────────────────────
   ОТМЕНЯЕТ 36/32 из моего блока «Рабочее место за столом» выше: там
   высоты были взяты на глаз, здесь — из выбранного заказчиком варианта.

   Ворота те же и по той же причине: `pointer: fine`. Планшет в поперечной
   ориентации на 1100+ отдаёт `pointer: coarse` и остаётся просторным,
   прораб в перчатке 32-пиксельных строк не получает никогда. Правило
   «прораб в перчатке важнее красоты» здесь не отменяется, а НЕ
   ПРИМЕНЯЕТСЯ. */
@media (min-width: 1100px) and (any-pointer: fine){

  /* ПРОПИСНЫЕ ВОЗВРАЩАЮТСЯ РОВНО В ОДНО МЕСТО — в шапку таблицы.
     Мой блок «три причины 2000-х» снял их в семи местах, и для шести
     это верно: прописные читаются медленнее строчных, потому что теряется
     рисунок слова. Но шапка столбца — не текст, который читают; её
     прочитывают один раз, а дальше столбец опознают по месту. Прописные
     11 px с разрядкой работают там линейкой над числами и отделяют
     служебную строку от данных без второй линии.

     Заказчик выбрал вариант В целиком, и это его шапка. В шести
     остальных местах — меню, разделы, подписи плиток, имена величин —
     прописные остаются снятыми. */
  .registry th{
    height: var(--row-header);
    padding: 4px var(--p3);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    /* «Свободный остаток» — это столбец, а не сокращение: шапка
       переносится по словам и растёт, строки данных остаются по 32. */
    white-space: normal;
    vertical-align: bottom;
    line-height: 1.2;
  }

  /* Строка данных 32 вместо 36. Кнопка внутри строки остаётся 28 px
     (при норме WCAG 2.5.8 в 24 px для точного указателя) — правило
     стоит в блоке «Рабочее место за столом» выше, второй копии
     здесь заводить нельзя. */
  .registry td{ height: var(--row-table); padding: 0 var(--p3); }
}

/* ══════════════════════════════════════════════════════════════════════════
   5.1 ОТРИЦАТЕЛЬНЫЙ ОСТАТОК — ЧЕТЫРЕ НОСИТЕЛЯ, ЦВЕТ ЛИШЬ ОДИН ИЗ НИХ

     1) знак «−» перед числом — его ставит разметка;
     2) штриховая лента у левого края клетки — форма;
     3) слово «перерасход» подписью — речь;
     4) цвет — четвёртым, а не единственным.

   Так перерасход виден дальтонику, на распечатке и на солнце.

   ПОЧЕМУ ШТРИХОВКА У КРАЯ, А НЕ ПОД ЧИСЛОМ. В варианте В штриховка
   залита по всей клетке с долей 20 %. Замер: на полосе штриха контраст
   числа падает до 3,78 при норме 4,5 — то есть носитель смысла портит
   само число, ради которого клетка существует. Даже 10 % дают 4,30.
   Поэтому лента шириной 9 px стоит у левого края, а число сидит
   на ровной подложке `--lvl4-bg`, где контраст 5,14. Носитель сохранён,
   норма выполнена.

   ЖДЁТ РАЗМЕТКИ: `<td class="number minus">`. Класс новый и намеренно
   узкий — «величина ушла в минус». Существующий `.bad` («значение
   читается как проблема») остаётся мягким: им в шаблонах помечено
   и «план не назначен», и «ждёт 12 м3», а это не перерасход.
   ══════════════════════════════════════════════════════════════════════════ */

/* Мягкая ступень: только цвет и вес. Работает на РАЗМЕТКЕ, КОТОРАЯ ЕСТЬ. */
.registry .bad{ color: var(--lvl4); font-weight: 600; }

/* Полная ступень: четыре носителя. */
.registry td.minus{
  color: var(--lvl4);
  font-weight: 700;
  background-color: var(--lvl4-bg);
  background-image: var(--hatch-error);
  background-repeat: no-repeat;
  background-size: 9px 100%;
  background-position: left top;
  box-shadow: inset 3px 0 0 var(--lvl4);
  line-height: 1.1;
}
.minus{ color: var(--lvl4); font-weight: 700; }

/* Подпись под числом. 11 px — она вторична: главное сказали знак минуса
   и лента. В строке 32 px помещается вместе с числом при line-height 1,1. */
.caption-minus{
  display: block;
  margin-top: 1px;
  color: var(--lvl4);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* ══════════════════════════════════════════════════════════════════════════
   5.2 ПЛАН НЕ НАЗНАЧЕН — ЭТО ВОПРОС, А НЕ НОЛЬ

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

   Решение варианта В: клетки числовых столбцов сливаются в одну, клетка
   штрихуется нейтрально, а поверх лежит СПЛОШНАЯ пунктирная плашка
   со словами. Текст стоит на сплошном `--surface` — контраст 6,76,
   штриховка под него не лезет.

   ЖДЁТ РАЗМЕТКИ: `<td class="no-plan" colspan="4">`. Сейчас
   в `contracting/tender.html` то же состояние набрано как
   `<span class="bad">план не назначен</span>` — красным, то есть
   как ошибка. Это к prototyper: класс поменять, слова оставить.
   ══════════════════════════════════════════════════════════════════════════ */
.registry td.no-plan{
  background-color: var(--surface2);
  background-image: var(--hatch-none);
  text-align: left;
}
.no-plan__body{
  display: inline-flex;
  align-items: center;
  gap: var(--p2);
  padding: 2px var(--p2);
  background: var(--surface);
  border: 1px dashed var(--line2);
  border-radius: var(--r1);
  color: var(--text2);
  font-size: var(--t1);
  font-weight: 600;
}
.no-plan__tail{ font-weight: 400; color: var(--text-muted); }

/* ══════════════════════════════════════════════════════════════════════════
   5.3 ПОЛОСА РАСПРЕДЕЛЕНИЯ ПЛАНА

   План = выдано + обещано по ТЗ + свободный остаток. Полоса отвечает
   не на вопрос «сколько сделано» (на него отвечают семь величин),
   а на вопрос «почему остаток такой и почему он ушёл в минус».

   Сегменты различаются НЕ ЦВЕТОМ: заливка · косая штриховка · пустая
   дорожка · штрихованный хвост за риской плана. Это читается в серой
   печати и при любом дальтонизме.

   Имя класса — `plan-bar`, а не `polosa`: в системе уже есть
   `badge--strip` (70 употреблений), и два «полосы» в одном словаре
   разошлись бы по смыслу через неделю.

   ЖДЁТ РАЗМЕТКИ.
   ══════════════════════════════════════════════════════════════════════════ */
.plan-bar{
  position: relative;
  display: block;
  /* 110 px дорожки плюс хвост перерасхода укладываются в узкий столбец
     вместе с отступами — хвост не срезается краем клетки. */
  width: 110px;
  height: 12px;
  margin: 0;
  background: var(--surface2);
  border: 1px solid var(--line2);
  border-radius: 3px;
  overflow: visible;
}
.plan-bar i{ position: absolute; top: 0; bottom: 0; display: block; }
.plan-bar .issued{ left: 0; background: var(--text2); }          /* выдано */
.plan-bar .tender{ background: var(--surface); background-image: var(--hatch-tender); }
.plan-bar .over{                                                 /* перерасход */
  background: var(--lvl4);
  background-image: repeating-linear-gradient(135deg,
    rgba(255,255,255,.55) 0 2px, transparent 2px 5px);
  border-radius: 0 3px 3px 0;
  box-shadow: -1px 0 0 var(--surface);
}
/* риска плана: где полоса обязана была кончиться */
.plan-bar .tick{
  position: absolute; top: -3px; bottom: -3px; left: 100%;
  width: 1px; background: var(--text); opacity: .5;
}
/* плана нет — дорожка пунктирная и штрихованная, а не пустая */
.plan-bar--none{ background-image: var(--hatch-none); border-style: dashed; }

/* ── Легенда. Один компонент, два словаря образцов ───────────────────────
   Полоса и шкала объясняются легендой в шапке панели, а не памятью
   пользователя: соответствие цвета и порога сказано вслух. */
.legend{
  display: inline-flex; align-items: center; flex-wrap: wrap;
  gap: var(--p3);
  font-size: var(--t0); color: var(--text-muted);
}
.legend span{ display: inline-flex; align-items: center; gap: var(--p1); white-space: nowrap; }
.legend i{
  width: 12px; height: 9px; display: block; flex: none;
  border: 1px solid var(--line2); border-radius: 2px;
  font-style: normal;
}
/* образцы полосы распределения */
.legend .l-issued{ background: var(--text2); }
.legend .l-tender{ background-image: var(--hatch-tender); }
.legend .l-free{ background: var(--surface2); }
.legend .l-over{ background: var(--lvl4); }
/* образцы шкалы отклонения */
.legend .l1{ background: var(--lvl1-bg); border-color: var(--lvl1); }
.legend .l2{ background: var(--lvl2-bg); border-color: var(--lvl2); }
.legend .l3{ background: var(--lvl3-bg); border-color: var(--lvl3); }
.legend .l4{ background: var(--lvl4-bg); border-color: var(--lvl4); }

/* ══════════════════════════════════════════════════════════════════════════
   МЕТКИ СОСТОЯНИЙ. У КАЖДОЙ ЕСТЬ ФОРМА, А НЕ ТОЛЬКО ЦВЕТ

   Раздел 6 варианта В. В тёплой дизайн-системе метка была скруглённой
   таблеткой со значком: ✓ ▲ ■ • — форма уже была, и она остаётся.
   Меняются две вещи.

   ПЕРВОЕ: форма прямоугольная, а не таблетка. Таблетка — это ярлык
   на сайте; прямоугольник со скруглением 8 px — это поле состояния
   в учётной системе. Заказчик выбрал вариант В, и это его метка.

   ВТОРОЕ, важнее: у метки появилась граница. Заливка 10 % на солнце
   вымывается почти в белое, и метка перестаёт быть предметом; граница
   держит её край при любой яркости. Граница взята от цвета состояния
   с долей 34 % — она видна, но не спорит с текстом.
   ══════════════════════════════════════════════════════════════════════════ */

.badge{
  border-radius: var(--r1);
  border: 1px solid transparent;
  font-weight: 600;
}
.badge--ok  { border-color: color-mix(in srgb, var(--ok)   34%, transparent); }
.badge--warn{ border-color: color-mix(in srgb, var(--warn) 34%, transparent); }
.badge--error{ border-color: color-mix(in srgb, var(--error) 34%, transparent); }
.badge--accent { border-color: color-mix(in srgb, var(--accent-main)  30%, transparent); }
/* Тихая метка границы не получает: она намеренно не предмет, а приписка. */
.badge--quiet{ border-color: transparent; }

/* Пометка точности объёма (ОЧ-151, ТР-695) в строке сметы, Ганта и «Собрать
   ГПР»: мелкая, не переносится и не сжимается — имя работы уступает место
   ей, а не она имени: «оценочно» без половины слова читается как «очно». */
.volume-mark--compact{ flex: none; font-size: var(--t1, 11px); padding: 0 6px; white-space: nowrap; }

/* Плотность метки — только за столом под мышью, и НЕ для `badge--strip`:
   этим модификатором набрано предложение («Отчёт за 14.08.2026 сдан
   12:50, редакция 1»), у него нет фиксированной высоты и быть не может. */
@media (min-width: 1100px) and (any-pointer: fine){
  .badge:not(.badge--strip){
    height: 20px;
    padding: 0 7px;
    font-size: var(--t0);
    line-height: 1;
  }
}

/* ── ШКАЛА КРИТИЧНОСТИ В МЕТКЕ ───────────────────────────────────────────
   Пороги проекта: 1–7 контроль · 8–9 риск · 10–19 отставание · 20+ критично.

   ПОЧЕМУ НЕ ЧЕТЫРЕ ЗНАЧКА ИЗ ОБЩЕГО НАБОРА. Значки ✓ ▲ ■ • означают вид
   состояния — «хорошо», «внимание», «сбой». Отклонение — не вид, а СТУПЕНЬ,
   и ступень обязана читаться как ступень: четыре разные картинки этого
   не дают, их надо помнить. Поэтому у всех четырёх уровней одна фигура —
   квадрат, — и различает их ДОЛЯ ЗАЛИВКИ: четверть, половина, три
   четверти, целиком. Порядок виден без легенды и без цвета.

   ПОЧЕМУ ФИГУРА РИСУЕТСЯ CSS, А НЕ СИМВОЛОМ. Символы ◔ ◑ ◕ ● сказали бы
   ровно то же и одной строкой, но U+25D4/25D1/25D5 есть не в каждом
   системном шрифте, а замены на площадке не будет — ноль внешних запросов,
   шрифт только системный. Пустой квадрат вместо ступени отклонения хуже
   отсутствия значка. Заливка градиентом рисуется браузером всегда.

   Цвет — четвёртый носитель после доли заливки, границы и слова
   в тексте самой метки («риск, 9 дн.»). */
.badge--lvl1, .badge--lvl2, .badge--lvl3, .badge--lvl4{
  background: var(--surface3);
  color: var(--text2);
}
.badge--lvl1::before,
.badge--lvl2::before,
.badge--lvl3::before,
.badge--lvl4::before{
  content: "";
  flex: none;
  width: 11px; height: 11px;
  font-size: 0;
  border: 1px solid currentColor;
  border-radius: 2px;
  background-repeat: no-repeat;
}
.badge--lvl1{ background: var(--lvl1-bg); color: var(--lvl1);
             border-color: color-mix(in srgb, var(--lvl1) 34%, transparent); }
.badge--lvl2{ background: var(--lvl2-bg); color: var(--lvl2);
             border-color: color-mix(in srgb, var(--lvl2) 34%, transparent); }
.badge--lvl3{ background: var(--lvl3-bg); color: var(--lvl3);
             border-color: color-mix(in srgb, var(--lvl3) 34%, transparent); }
.badge--lvl4{ background: var(--lvl4-bg); color: var(--lvl4);
             border-color: color-mix(in srgb, var(--lvl4) 34%, transparent); }
.badge--lvl1::before{ background-image: linear-gradient(to right, currentColor 25%,  transparent 25%); }
.badge--lvl2::before{ background-image: linear-gradient(to right, currentColor 50%,  transparent 50%); }
.badge--lvl3::before{ background-image: linear-gradient(to right, currentColor 75%,  transparent 75%); }
.badge--lvl4::before{ background-image: linear-gradient(to right, currentColor 100%, transparent 100%); }

/* ── ШКАЛА ОТДЕЛЬНЫМ ЭЛЕМЕНТОМ ───────────────────────────────────────────
   Там, где отклонение — главное на строке (панель директора, реестр
   отстающих работ), ступень показывается развёрнуто: четыре клетки,
   зажжённые слева направо. СКОЛЬКО КЛЕТОК ГОРИТ — носитель, который
   считается взглядом и не зависит ни от цвета, ни от подписи.

   ЖДЁТ РАЗМЕТКИ: <span class="scale" data-level="3">. Уровень стоит
   в data-атрибуте, а не в классе, потому что это ЗНАЧЕНИЕ, которое
   считает система, а не оформление, которое выбирает шаблонщик. */
.scale{ display: inline-flex; align-items: center; gap: var(--p2); }
.scale__cells{ display: inline-flex; gap: 2px; flex: none; }
.scale__cells i{
  display: block; width: 12px; height: 6px;
  background: var(--surface3);
  border: 1px solid var(--line2);
  border-radius: 1px;
}
.scale[data-level="1"] .scale__cells i:nth-child(1){    background: var(--lvl1); border-color: var(--lvl1); }
.scale[data-level="2"] .scale__cells i:nth-child(-n+2){ background: var(--lvl2); border-color: var(--lvl2); }
.scale[data-level="3"] .scale__cells i:nth-child(-n+3){ background: var(--lvl3); border-color: var(--lvl3); }
.scale[data-level="4"] .scale__cells i{                 background: var(--lvl4); border-color: var(--lvl4); }
/* Слово рядом с клетками. Оно обязательно: клетки говорят «сколько»,
   слово говорит «чего». */
.scale__word{ font-size: var(--t1); font-weight: 600; color: var(--text2); }

/* ══════════════════════════════════════════════════════════════════════════
   СТРОКА СОСТОЯНИЯ

   Раздел 8 варианта В. НА СУЩЕСТВУЮЩУЮ РАЗМЕТКУ НЕ ЛОЖИТСЯ: в
   `templates/layout/base.html` внизу страницы нет ничего — после <main>
   сразу скрипт. Правила ниже написаны под ОДНУ строку разметки, которую
   добавит prototyper; до неё это мёртвый код, и так и надо считать.

   ПОЧЕМУ ТОЛЬКО ЗА СТОЛОМ. Строка состояния несёт счёт записей, связь
   и подсказку горячих клавиш — то, что нужно человеку, который весь день
   сидит в реестре. На телефоне те же 26 px отнимают экран у поля ввода
   дневного отчёта, а связь и офлайн-черновик у отчёта показываются своим,
   куда более заметным способом. Правило проекта: при конфликте выигрывает
   поле.
   ══════════════════════════════════════════════════════════════════════════ */
.state{ display: none; }

@media (min-width: 1100px) and (any-pointer: fine){
  .state{
    position: sticky; bottom: 0; z-index: 30;
    display: flex; align-items: center; gap: var(--p4);
    min-height: 26px; padding: 0 var(--p3);
    background: var(--surface2); color: var(--text2);
    border-top: 1px solid var(--line);
    box-shadow: var(--shadow-top);
    font-size: var(--t0);
    white-space: nowrap; overflow-x: auto;
  }
  .state b{ color: var(--text); font-weight: 600; }
  .state__grow{ flex: 1 1 auto; }
  .state__link{
    display: inline-flex; align-items: center; gap: var(--p1);
    color: var(--ok); font-weight: 600;
  }
  /* Точка — форма, слово рядом — речь. Цвет третьим. */
  .state__dot{
    display: block; width: 7px; height: 7px; flex: none;
    border-radius: 50%; background: var(--ok);
  }
  .state__link[data-absent="1"]{ color: var(--error); }
  .state__link[data-absent="1"] .state__dot{
    background: var(--error); border-radius: 1px;   /* нет связи — квадрат */
  }
  .state kbd{
    padding: 2px var(--p1);
    background: var(--surface);
    border: 1px solid var(--line2); border-radius: 3px;
    color: var(--text2);
    font: 600 10px/1 var(--font);
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   ЧЕГО В ЭТОМ ЭТАПЕ НЕТ — И ЭТО НЕ ЗАБЫТО

   · Рамка окна с вкладками (раздел 3 варианта В) и тёмная верхняя полоса.
     Токены `--shell*` заведены выше, но не применены: `.topbar` держит
     поиск, переключатель объекта, значок профиля и счётчик, и перекрасить
     её фон, не перекрасив их, — уронить контраст в десяти местах.
   · Три колонки и дерево мест (раздел 4) — перестройка разметки.
   · Боковая панель деталей (раздел 7) — то же.
   · Окно выдачи наряда (раздел 9) — то же.
   · Строки группировки и итог группы из раздела 5 — это свёртка иерархии
     проект → очередь → блок → этап → работа, то есть Гант; отдельный этап.

   Всё перечисленное — про разметку, а не про вид, и берётся вторым
   этапом, после того как первый проверен глазами на живых экранах.
   ══════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════════
   ПОСЛЕДСТВИЯ СМЕНЫ ПАЛИТРЫ ДЛЯ РЕЙЛА МЕНЮ

   Смена палитры — не только цвет: она ломает правила, написанные под
   РАЗНИЦУ прежних поверхностей. Найдено замером, а не на глаз.

   Рейл меню за столом стоит на `--surface2`. В тёплой палитре между рейлом
   (#ece9e2) и белым пунктом текущего раздела было 1,20 — ступень видно.
   В холодной рейл #f4f7fb и белый пункт дают 1,07: ТЕКУЩИЙ РАЗДЕЛ
   ПЕРЕСТАЁТ БЫТЬ ВИДЕН. Та же беда с наведением (`--surface2` на `--surface2` —
   ноль) и со счётчиком пункта (`--surface3` на рейле — 1,08).

   Правила ниже ОТМЕНЯЮТ четыре строки моего блока «Рабочее место
   за столом» выше. Текущий раздел возвращается к тому, что стоит
   в base.css: акцентная подложка плюс акцентная полоса слева плюс
   акцентный цвет имени — три носителя, из которых подложка самый
   слабый. Для учётного вида это к тому же правильнее по существу:
   выбранная строка дерева в такой системе тонируется, а не белеет.

   Наведение и нажатие сдвигаются на ступень ВНИЗ, а не вверх: светлее
   рейла идти некуда, там уже почти белое. Наведение `--surface4` даёт 1,18
   к рейлу — ровно та же заметность, что была в тёплой палитре;
   нажатие подмешивает 10 % акцента и даёт 1,32.
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1100px){
  /* было `background: var(--surface)` — вернулось к акцентной подложке */
  .menu__item[aria-current="page"]{ background: var(--accent-bg); }
  .menu__item:hover{ background: var(--surface4); }
  .menu__item:active{ background: color-mix(in srgb, var(--accent-main) 10%, var(--surface4)); }
  /* спокойный счётчик на рейле */
  .menu__count{ background: var(--surface4); }
}

/* ══════════════════════════════════════════════════════════════════════════
   ДЕРЕВО МЕСТ — «ГДЕ», рядом с разделами «ЧТО ДЕЛАЮ»

   Перенесено из выбранного вида В (`static/mockups/look-c-ledger.html`,
   раздел «4.1 дерево мест») 09.09.2026. Заказчик показал именно этот
   блок и сказал «мне там это понравилось».

   ЗАЧЕМ ОНО, КРОМЕ ВИДА. Оно заменяет фильтр «Где» с кнопкой «Показать»,
   который стоял на каждом экране. Замер обходом 08.09.2026: на телефоне
   375×812 заголовок и этот фильтр занимали 772 px из 812 — первое поле
   ввода дневного отчёта начиналось на 886-м, то есть НИЖЕ СГИБА. Дерево
   показывает всю стройку сразу и переключает место одним нажатием.

   ССЫЛКА, А НЕ КНОПКА. В макете ветка была `<button>`; здесь это `<a>`
   с адресом `?mesto=N`. Причина — правило проекта: каждый экран обязан
   оставаться ссылкой, которой можно поделиться. Кнопка со скриптом
   этого не даёт, а «текущий объект в сессии» ломает молча: два человека
   по одной ссылке увидят разное.
   ══════════════════════════════════════════════════════════════════════════ */

.tree{ padding: 4px 0; }

.branch{
  position: relative;
  display: flex; align-items: center; gap: 6px;
  width: 100%; min-height: 26px; padding: 0 6px 0 4px;
  border-radius: var(--r1);
  color: var(--text); font-size: var(--t2); font-weight: 400;
  line-height: 1.2; text-align: left; text-decoration: none;
}
.branch:hover{ background: var(--surface3); }
.branch:active{ background: var(--surface4, var(--surface3)); }

/* Глубина отступом, а не значками: узлов немного, а каждый значок —
   ещё одна цель нажатия, которую на телефоне надо в 44 px. */
.branch--1{ padding-left: 4px; }
.branch--2{ padding-left: 18px; }
.branch--3{ padding-left: 32px; }
.branch--4{ padding-left: 46px; }
/* Пятый и шестой — дерево мест по ТР-486 неограниченно по глубине,
   и обрывать отступ на четвёртом значило бы сделать потомка
   неотличимым от соседа. Глубже шестого отступ не растёт: колонка
   меню кончается раньше. */
.branch--5{ padding-left: 60px; }
.branch--6{ padding-left: 74px; }

/* Текущее место: подложка, полоса слева и вес — ТРИ носителя, не один
   цвет. Правило проекта: на солнце и в печати цвет исчезает первым. */
.branch[aria-current="true"]{
  background: var(--accent-bg); color: var(--accent-main); font-weight: 600;
}
.branch[aria-current="true"]::before{
  content: ""; position: absolute; left: 0; top: 3px; bottom: 3px;
  width: 3px; border-radius: 0 3px 3px 0; background: var(--accent-main);
}

.branch__count{
  margin-left: auto; padding-left: 8px;
  color: var(--text2); font-size: var(--t0);
  font-variant-numeric: tabular-nums;
}

/* Подпись узла-очереди: сколько под ней блоков. Это НЕ число работ —
   тише и без табличных цифр, чтобы взгляд не считал их одним рядом. */
.branch__caption{
  margin-left: auto; padding-left: 8px;
  color: var(--text3, var(--text2)); font-size: var(--t0);
  opacity: .75;
}

.tree__group{
  margin: 10px 0 3px; padding: 0 8px;
  font-size: var(--t0); font-weight: 600;
  color: var(--text2);
}

.tree__footnote--warn{
  color: var(--warn-text, var(--text));
  border-top: 0;
}
.tree__footnote--warn + .tree__footnote{ margin-top: 4px; }

.tree__footnote{
  margin: 8px 8px 0; padding-top: 8px;
  border-top: 1px solid var(--line);
  color: var(--text2); font-size: var(--t0); line-height: 1.35;
}

/* На телефоне ветка — цель нажатия, а не строка списка.
   44 px: прораб в перчатке, и это правило проекта, а не пожелание. */
@media (max-width: 1099px){
  .branch{ min-height: 44px; font-size: var(--t3); }
  .branch__count{ font-size: var(--t2); }
}

/* ══════════════════════════════════════════════════════════════════════════
   ДНЕВНОЙ ОТЧЁТ: СТРОКИ ВМЕСТО КАРТОЧЕК

   Главный экран прораба — им пользуются каждый вечер, с телефона,
   в перчатке, в конце смены. Замер 09.09.2026 на 375×812 показал,
   почему им не будут пользоваться:

     карточка фильтра «За какой день / Где были / Показать» — 305 px
     карточка одной работы                                  — 436 px
     первое поле ввода объёма начиналось на                    635 px
     кнопка «Сдать отчёт» — на                                2638 px
     вся страница                                             2813 px

   То есть человек открывал систему ради одного действия и не видел
   ни одного поля ввода: 635 при высоте экрана 812 — ниже сгиба.
   Один объём по одной работе стоил 12–14 касаний.

   Из 436 px карточки работы:
     23  шапка (имя работы и код)
    139  поле объёма: метка + поле + подсказка об остатке
    129  выбор наряда: метка + список + подсказка в две строки
     56  «Фото по этой работе»
     ~89 отступы карточки

   Правится тремя вещами, и ни одна не убирает данные с экрана —
   убираются только повторы и воздух.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Полоса отбора вместо карточки фильтра ──────────────────────────── */
.filter-bar{
  display: flex; align-items: center; gap: var(--p3);
  flex-wrap: wrap;
  margin-bottom: var(--p4);
  padding: var(--p2) var(--p3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r2);
}
.filter-bar__field{ display: flex; align-items: center; gap: var(--p2); }
.filter-bar__name{ color: var(--text2); font-size: var(--t1); }
.filter-bar__input{
  min-height: 36px; padding: 0 var(--p2);
  background: var(--surface); color: var(--text);
  border: 1px solid var(--line2, var(--line)); border-radius: var(--r1);
  font: inherit; font-size: var(--t2);
}
/* На телефоне поле даты — ЦЕЛЬ НАЖАТИЯ, и 44 px здесь правило проекта,
   а не пожелание: прораб в перчатке. Замер 09.09.2026 на 375×812 показал
   36 px — единственная недостаточная цель на экране (флажок «работ
   не велось» мельче, но обёрнут меткой 176×56 и потому попадаем). */
@media (max-width: 1099px){
  .filter-bar__input{ min-height: 44px; }
}

/* Место показано, но не выбирается здесь: его выбирают деревом.
   Два способа выбрать одно и то же — две копии правила. */
/* Полный адрес и короткое имя места. На узком экране адрес обрезался
   с конца — «Блок Ж · Под…» — и терялся ЭТАЖ, единственное, ради чего
   на него смотрят. Ниже 560 px показывается только имя места; полный
   адрес остаётся в подсказке. */
.filter-bar__short{ display: none; }
@media (max-width: 559px){
  .filter-bar__full{ display: none; }
  .filter-bar__short{ display: inline; }
}

.filter-bar__where{
  color: var(--text2); font-size: var(--t2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── 2. Карточка работы плотнее ────────────────────────────────────────── */
.work-card{ padding: var(--p3); }
.work-card .card__header{ margin-bottom: var(--p2); }
.work-card .field{ margin-bottom: var(--p2); }
.work-card .field:last-of-type{ margin-bottom: 0; }

/* Подсказка — тише и плотнее. Она нужна (остаток по выданному сверяют
   каждый раз), но занимала по две строки под каждым полем. */
.work-card .field__hint{
  margin-top: 2px;
  font-size: var(--t0);
  line-height: 1.3;
}

/* ── 3. Имя работы и поле объёма — в одну строку ───────────────────────── */
/* Метка «Сделано за день» повторяет заголовок раздела «Сколько сделали»
   и подпись единицы у самого поля. Она остаётся в разметке для
   экранного диктора, но на экране её место занимает имя работы. */
.work-card .field:first-of-type > .field__name{
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* Поле ввода объёма — крупное: в него целятся пальцем в перчатке,
   и это единственное, ради чего экран открывают. */
.work-card .number-input__input{
  min-height: 48px;
  font-size: var(--t4);
  font-variant-numeric: tabular-nums;
}

/* ── За столом работы идут строкой: имя слева, ввод справа ─────────────── */
@media (min-width: 1100px) and (any-pointer: fine){
  .work-card{
    display: grid;
    grid-template-columns: minmax(0, 1fr) 220px;
    align-items: start;
    column-gap: var(--p4);
  }
  .work-card .card__header{ grid-column: 1; margin-bottom: 0; }
  .work-card .field:first-of-type{ grid-column: 2; grid-row: 1 / span 2; }
  .work-card .number-input__input{ min-height: 36px; font-size: var(--t3); }
}


/* ══════════════════════════════════════════════════════════════════════════
   ВИД «ПРОДУКТ» — выбран заказчиком 16.09.2026 из трёх показанных образцов
   («ekran-1 делай»). Решение В-66: вид делается заново, слоем в этом файле;
   `base.css` не трогается.

   ┌─ ПОМЕТКА 21.09.2026: ДВА ЦВЕТА ЭТОГО БЛОКА ОТМЕНЕНЫ ──────────────────┐
   │ Решение заказчика В-71, требование ТР-592 («как у Gectaro, с цветами»)│
   │ отменяет ТЁМНУЮ боковую панель и СИНЮЮ главную кнопку. Читая ниже     │
   │ «боковая панель тёмная» и строки замера «меню: #cbd5e1 на #0f172a» —  │
   │ знай: действует ВТОРАЯ РЕДАКЦИЯ ПАЛИТРЫ в конце файла (раздел         │
   │ «ПАЛИТРА „КАК У GECTARO“»), панель белая, кнопка жёлтая, и там же     │
   │ новая таблица замеров для обеих тем. Остальное этого блока — в силе.  │
   │ Блок не удалён намеренно: он путь отката.                             │
   └───────────────────────────────────────────────────────────────────────┘

   ПОЧЕМУ СЛОЙ, А НЕ ПЕРЕПИСЫВАНИЕ. Прототипная дизайн-система построена
   на переменных `:root` — цвет, радиус, отступ, размер. Поэтому вид меняется
   переопределением ПЕРЕМЕННЫХ, а правил здесь ровно столько, сколько
   переменными не выражается: тёмная боковая панель и дерево мест в ней.
   Двести правил поверх чужих двухсот разошлись бы на первом же экране.

   ЧТО ИМЕННО ПОМЕНЯЛОСЬ ПО СУЩЕСТВУ:
     · палитра с тёплой бумаги на холодную — так выглядят продукты,
       которые продают, а платформа продаётся (В-41, В-42);
     · боковая панель тёмная: она рамка, а не содержимое. Взгляд идёт
       на данные, а не на меню;
     · акцент — синий вместо сине-фиолетового, и он один на всю систему;
     · карточки с мягкой тенью вместо только границы: плитки сводки
       перестают сливаться с фоном.

   КОНТРАСТ ПРОВЕРЕН ПОПАРНО (WCAG AA — 4.5:1 для текста):
     --text #0f172a на --surface #ffffff — 17.9:1
     --text2 #5b6a7f на --surface #ffffff — 5.6:1, на --bg #f6f7f9 — 5.2:1
     (первая правка дала #64748b: на белом 4.76, а на сером фоне страницы
      4.44 — ниже порога; замерено на живой странице, не на глаз)
     --accent-main #1d4ed8 на #ffffff — 6.3:1, белый на нём — 6.3:1
     --ok #047857 на --ok-bg #ecfdf5 — 5.1:1
     --error #c81e1e на --error-bg #fef2f2 — 5.24:1, на белом — 5.74:1
     (до 27.09.2026 стояло #dc2626 с подписью «4.7:1»; пересчёт по WCAG
      дал 4.41 — ниже порога. Найдено критиком обхода, КР-10: метки
      «Критично» и «просрочен» — самые важные метки системы)
     --warn #b45309 на --warn-bg #fffbeb — 5.2:1
     меню: #cbd5e1 на #0f172a — 11.6:1; подпись #94a3b8 — 6.3:1;
     активный пункт: белый на #1d4ed8 — 6.3:1
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  --bg:        #f6f7f9;
  --surface:        #ffffff;
  --surface2:       #f1f5f9;
  --surface3:       #e2e8f0;

  --text:      #0f172a;
  --text2:     #5b6a7f;
  --text3:     #94a3b8;
  --text-inv:  #ffffff;

  --line:     #e2e8f0;
  --line-inner:  #eef2f6;
  --line2:    #94a3b8;
  --edge:       #475569;

  --accent-main:        #1d4ed8;
  --accent-dark:    #1e40af;
  --accent-bg:    #eff6ff;
  --accent-text:  #ffffff;
  --accent-ring:   0 0 0 3px rgba(29,78,216,.18);

  --ok:         #047857;
  --ok-bg:     #ecfdf5;
  --warn:       #b45309;
  --warn-bg:   #fffbeb;
  --error:       #c81e1e;
  --error-bg:   #fef2f2;

  --backdrop:      rgba(15,23,42,.45);
  --shadow:        0 1px 2px rgba(15,23,42,.04);
  --shadow-float:   0 8px 24px rgba(15,23,42,.14);

  --r1: 9px;
  --r2: 12px;
  --r3: 12px;

  /* Своё, чего у прототипа не было: тёмная боковая панель. */
  --menu-bg:    #0f172a;
  --menu-surface:    #1e293b;
  --menu-surface2:   #273449;
  --menu-text:  #cbd5e1;
  --menu-muted:   #94a3b8;
  --menu-light:   #f8fafc;
  --menu-accent:    #1d4ed8;
  --menu-accent-light: #93b4f8;
  --menu-line: #1e293b;
}

/* ── боковая панель ──────────────────────────────────────────────────────── */

.menu{
  background: var(--menu-bg);
  border-right: 1px solid var(--menu-line);
}
.menu__brand{ color: var(--menu-light); }
.menu__brand:hover{ color: var(--menu-light); }
.menu__glyph{ background: var(--menu-accent-light); }
.menu__close{ color: var(--menu-muted); }
.menu__close:hover{ background: var(--menu-surface); color: var(--menu-light); }

.menu__role{ background: var(--menu-surface); color: var(--menu-light); }
.menu__role:hover{ background: var(--menu-surface2); }
.menu__role-name{ color: var(--menu-light); }
.menu__role-sub{ color: var(--menu-accent-light); }

.menu__group{ color: var(--menu-muted); }
.menu__item{ color: var(--menu-text); }
.menu__item:hover{ background: var(--menu-surface); color: var(--menu-light); }
.menu__item:active{ background: var(--menu-surface2); }
.menu__name{ color: inherit; }
.menu__todo{ color: var(--menu-muted); }

/* Активный пункт: заливка, полоса слева и вес — три носителя, не один цвет.
   Правило прототипа сохранено, изменён только цвет. */
.menu__item[aria-current="page"]{ background: var(--menu-accent); }
.menu__item[aria-current="page"]::before{ background: var(--menu-accent-light); }
.menu__item[aria-current="page"] .menu__name{ color: var(--menu-light); }
.menu__item[aria-current="page"] .menu__todo{ color: #c7d7fb; }

.menu__count{ background: #243245; color: var(--menu-text); }
.menu__count[data-error="1"]{ background: #7f1d1d; color: #fecaca; }
.menu__item[aria-current="page"] .menu__count[data-error="0"]{
  background: rgba(255,255,255,.18); color: var(--menu-light);
}
.menu__bottom{ border-top-color: var(--menu-line); color: var(--menu-muted); }

/* ── дерево мест в тёмной панели ─────────────────────────────────────────── */

.branch{ color: var(--menu-text); }
.branch:hover{ background: var(--menu-surface); color: var(--menu-light); }
.branch:active{ background: var(--menu-surface2); }
.branch[aria-current="true"]{
  background: var(--menu-surface); color: var(--menu-light);
}
.branch[aria-current="true"]::before{ background: var(--menu-accent-light); }
.branch__count{ color: var(--menu-muted); }
.branch__caption{ color: var(--menu-muted); }
.tree__group{ color: var(--menu-muted); }
.tree__footnote{ border-top-color: var(--menu-line); color: var(--menu-muted); }
.tree__footnote--warn{ color: #fcd9a4; }

/* ── рабочая область ─────────────────────────────────────────────────────── */

/* Карточка была границей без тени — на белом фоне это читалось,
   на сером #f6f7f9 сливается. Тень мягкая: рамка данных, а не объём. */
.card,
.section,
.tile{ box-shadow: var(--shadow); }

/* Полоса «Где» — не карточка, а подпись к экрану: акцентная подложка
   отделяет её от данных и говорит, что список сужен. */
.filter-bar{
  background: var(--accent-bg);
  border-color: #bfdbfe;
}

/* ── тёмная тема ─────────────────────────────────────────────────────────── */
/* У прототипа она есть, и вид её не отменяет: холодная палитра, панель
   остаётся самой тёмной поверхностью, чтобы разделение «рамка — данные»
   не пропало. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:        #0b1220;
    --surface:        #131c2e;
    --surface2:       #1b2639;
    --surface3:       #243245;

    --text:      #e8edf5;
    --text2:     #a3b0c2;
    --text3:     #7c8ba1;
    --text-inv:  #0b1220;

    --line:     #243245;
    --line-inner:  #1b2639;
    --line2:    #7c8ba1;
    --edge:       #a3b0c2;

    --accent-main:        #93b4f8;
    --accent-dark:    #b9cefb;
    --accent-bg:    #1c2947;
    --accent-text:  #0b1220;
    --accent-ring:   0 0 0 3px rgba(147,180,248,.28);

    --ok:         #6ee7b7;
    --ok-bg:     #103328;
    --warn:       #fcd34d;
    --warn-bg:   #3a2c11;
    --error:       #fca5a5;
    --error-bg:   #3d1b1b;

    --shadow:        none;
    --shadow-float:   0 8px 24px rgba(0,0,0,.5);

    --menu-bg:    #070c16;
    --menu-surface:    #131c2e;
    --menu-surface2:   #1b2639;
    --menu-text:  #c7d2e1;
    --menu-muted:   #94a3b8;
    --menu-light:   #f1f5f9;
    --menu-accent:    #1e40af;
    --menu-accent-light: #93b4f8;
    --menu-line: #17223a;
  }
}

/* Печать: тень — экранный приём. Прототип гасил её у карточки, списка
   и обёртки таблицы; слой добавил тень ещё двум поверхностям, и гасить
   их надо там же, иначе на бумаге останется серая кайма. */
@media print{
  .section, .tile{ box-shadow: none; }
}


/* ══════════════════════════════════════════════════════════════════════════
   ДЕРЕВО МЕСТ — В ПРАВУЮ КОЛОНКУ НА ШИРОКОМ ЭКРАНЕ
   (замечание заказчика 16.09.2026: «вот это сюда нельзя красиво вставить?»
   — про пустое поле справа от содержимого)

   ПОЧЕМУ ЭТО ВЕРНО, А НЕ ПРОСТО КРАСИВО. «Где» и «что делаю» — разные
   вопросы, и до сих пор они стояли в одной колонке друг под другом:
   чтобы сменить этаж, человек уходил глазами в тот же список, где
   выбирают экран. Справа дерево становится тем, чем оно и является, —
   постоянным ответом на вопрос «где я сейчас», рядом с содержимым,
   которое от него зависит.

   А слева освобождается место: меню перестаёт быть длинным свитком
   из пунктов и веток.

   ЧТО НЕ МЕНЯЕТСЯ. На телефоне дерево остаётся в выезжающем меню:
   отдельная колонка на 375 px — это половина экрана, отнятая у полей
   ввода, ради навигации, которой пользуются раз в день. Порог — те же
   1100 px, на которых меню слева перестаёт выезжать и встаёт колонкой.
   ══════════════════════════════════════════════════════════════════════════ */

@media (min-width: 1100px){
  /* Ширина правой колонки. Уже левой: в дереве только названия мест
     и числа, длинных подписей «зачем» здесь нет. */
  :root{ --tree-width: 264px; }

  body.has-menu{ padding-right: var(--tree-width); }

  .menu .tree{
    position: fixed; top: 0; right: 0; bottom: 0;
    width: var(--tree-width);
    margin: 0; padding: var(--p4) var(--p3) var(--p6);
    overflow-y: auto; overscroll-behavior: contain;
    background: var(--surface);
    border-left: 1px solid var(--line);
    border-top: 0;
  }

  /* Заголовок колонки. Без него дерево справа читается как обрывок
     меню, уехавший не туда: человек должен видеть, что это «Где». */
  .menu .tree::before{
    content: "Где";
    display: block;
    margin: 0 0 var(--p2); padding: 0 var(--p2);
    font-size: var(--t0); font-weight: 600;
    letter-spacing: .06em; text-transform: uppercase;
    color: var(--text2);
  }

  /* ЦВЕТА ВОЗВРАЩАЮТСЯ К СВЕТЛЫМ. Слой вида «Продукт» перекрасил дерево
     под тёмную панель; в светлой колонке те же цвета читались бы как
     серое на белом. Правило стоит здесь, рядом с переносом, а не
     в палитре: оно про МЕСТО, а не про вид. */
  .menu .tree .branch{ color: var(--text); }
  .menu .tree .branch:hover{ background: var(--surface2); color: var(--text); }
  .menu .tree .branch:active{ background: var(--surface3); }
  .menu .tree .branch[aria-current="true"]{
    background: var(--accent-bg); color: var(--accent-main); font-weight: 600;
  }
  .menu .tree .branch[aria-current="true"]::before{ background: var(--accent-main); }
  .menu .tree .branch__count,
  .menu .tree .branch__caption,
  .menu .tree .tree__group{ color: var(--text2); }
  .menu .tree .tree__footnote{
    border-top-color: var(--line); color: var(--text2);
  }
  .menu .tree .tree__footnote--warn{ color: var(--warn); }
}

/* Печать: колонки нет — на бумаге нет навигации вовсе (правило
   прототипа), и отступ под неё оставлять незачем. */
@media print{
  body.has-menu{ padding-right: 0; }
}

/* ═══ СРОКИ РАБОТ: календарь и график ═════════════════════════════════════
   Экран заведён 16.09.2026 по решению заказчика: «отдельный календарь
   вкладку сделай», «чтобы мы могли видеть график работ, все ли успеваем».

   ЦВЕТА БЕРУТСЯ ИЗ ДИЗАЙН-СИСТЕМЫ, А НЕ ЗАДАЮТСЯ ЗАНОВО. Первая редакция
   этого блока завела свои `#dcfce7`, `#fee2e2`, `#f1f5f9` — то есть
   ВТОРУЮ копию палитры. Она сломалась бы в тёмной теме (её у второй копии
   нет) и разошлась бы с остальными экранами на первой же правке.
   `--ok`, `--warn`, `--error` и их подложки уже замерены на контраст
   (5,24 · 4,93 · 5,55 в светлой, 5,87+ в тёмной) — берём их.

   Цвет здесь несёт смысл, поэтому он не единственный носитель: рядом
   с меткой стоит СЛОВО («Критично», «идём по плану») и число дней.
   Человек с нарушением цветовосприятия читает то же самое.        ═══ */

.card--total{ border-left: 4px solid var(--line); }

.total{ font-size: 1.35rem; font-weight: 650; margin: 0 0 .25rem; }
.total--ok    { color: var(--ok);    }
.total--warn  { color: var(--warn);  }
.total--error  { color: var(--error);  }
.total--silent{ color: var(--text2); font-weight: 600; }

.approx{
  margin: .6rem 0 0; padding: .5rem .7rem;
  background: var(--surface2); border-radius: 6px;
  color: var(--text2); font-size: .86rem; line-height: 1.45;
}

/* ─── шапка месяца ─────────────────────────────────────────────────────── */
.month-header{
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; margin-bottom: .35rem;
}
.month-header h2{ margin: 0; text-transform: capitalize; }

/* ─── сетка месяца ─────────────────────────────────────────────────────── */
.calendar{ margin: .6rem 0; }
.calendar__week,
.calendar__grid{
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px;
}
.calendar__week{
  margin-bottom: 4px; color: var(--text2);
  font-size: .78rem; text-transform: uppercase; letter-spacing: .04em;
}
.calendar__week span{ text-align: center; }

.day{
  min-height: 46px; padding: .3rem .35rem;
  border: 1px solid var(--line); border-radius: 6px;
  background: var(--surface); display: flex; flex-direction: column; gap: 2px;
}
.day--empty{ border: 0; background: transparent; }
.day__number{ font-weight: 600; font-size: .9rem; }
.day__reason{
  font-size: .7rem; line-height: 1.2; color: var(--warn);
  overflow: hidden; text-overflow: ellipsis;
}
/* Выходной отличается не только цветом: у него бледнее число и своя
   подложка, а праздник ещё и назван словом внутри клетки. */
.day--off{ background: var(--surface2); }
.day--off .day__number{ color: var(--text2); }
.day--today{
  border-color: var(--accent-main);
  box-shadow: inset 0 0 0 1px var(--accent-main);
}

/* ─── таблица сроков ───────────────────────────────────────────────────── */
/* Сами метки (`.badge--ok`, `--warn`, `--error`) живут в `base.css`
   и здесь НЕ переопределяются: вторая копия правила разошлась бы
   с первой. Тихая метка «сказать нечего» — единственная, которой
   в наборе не было. */
.badge--muted{ background: var(--surface3); color: var(--text2); }
.badge--muted::before{ content: "—"; }

.table--schedule td{ vertical-align: top; }
.table--schedule .caption{ display: block; font-size: .78rem; color: var(--text2); }
.nowrap{ white-space: nowrap; }

/* Телефон: месяц остаётся сеткой, но клетки ниже и без причин —
   праздник читается подсказкой, а не обрезанным словом. */
@media (max-width: 560px){
  .day{ min-height: 34px; padding: .2rem .25rem; }
  .day__reason{ display: none; }
  .month-header h2{ font-size: 1.05rem; }
}

@media print{
  .day--today{ box-shadow: none; }
  .badge{ border: 1px solid var(--line); }
}


/* ══════════════════════════════════════════════════════════════════════════
   ПАЛИТРА «КАК У GECTARO»: БЕЛАЯ ПАНЕЛЬ, ЖЁЛТАЯ ГЛАВНАЯ КНОПКА
   Решение заказчика В-71 от 19.09.2026, требование ТР-592. 21.09.2026.

   ЧТО ИМЕННО ОТМЕНЕНО ИЗ ТР-578. Ровно два цвета: тёмная боковая панель
   (`--menu-bg: #0f172a`) и синяя главная кнопка (`--accent-main` под
   `.button--primary`). Остальное ТР-578 в силе и НЕ трогается: типографика,
   плотность, три носителя состояния, замер контраста как способ приёмки,
   синий как цвет ссылок и второстепенных действий.

   ПОЧЕМУ СЛОЕМ, А НЕ ПРАВКОЙ. `base.css` не правится (ТР-573), прежние
   блоки палитры не удаляются (они — путь отката), поэтому новые значения
   ПЕРЕКРЫВАЮТ старые: блок стоит в конце файла, и при равной специфичности
   выигрывает порядок.

   ЗАКРЫТА ВТОРАЯ ДВЕРЬ ТЕМЫ. У слоя «Продукт» тёмные значения стояли
   ТОЛЬКО внутри `@media (prefers-color-scheme: dark)` (строка ~1625),
   а парного `:root[data-theme="dark"]` не было вовсе. Кнопка ◐ в шапке
   ставит атрибут `data-theme` (`layout.js`) — и на светлой системе ручной
   выбор тёмной темы поднимал палитру ПРЕЖНЕГО варианта В (строка 682,
   специфичность 0,2,0). Дверей всегда больше, чем та, которую чинили:
   ниже объявлены ОБЕ — `@media` и `[data-theme="dark"]`, с одинаковым
   набором токенов. Значения продублированы; это та же плата, что названа
   у варианта В на строке 679, и она названа снова: меняешь цвет —
   меняй в двух местах ЭТОГО блока.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── СВЕТЛАЯ ТЕМА ────────────────────────────────────────────────────────── */

:root{
  /* Боковая панель. Имена токенов оставлены прежними — на них ссылаются
     тридцать с лишним правил выше по файлу, — но СМЫСЛ двух из них
     перевернулся, и это надо читать вслух:
       `--menu-light`  был «самый светлый текст на тёмном», стал
                       «самый тёмный текст на светлом» — роль та же
                       (наибольшая выразительность), полюс обратный;
       `--menu-accent-light` был «светлый синий на тёмном», стал
                       «насыщенный синий на белом».
     Переименовать их — правка тридцати правил и риск пропустить одно;
     цена оставленного имени — этот абзац. */
  --menu-bg:      #ffffff;   /* панель белая: она светлее рабочей области */
  --menu-surface:      #eef2f7;   /* наведение, плитка роли               */
  --menu-surface2:     #e2e8f0;   /* нажатие, подложка счётчика           */
  --menu-text:    #2b3648;   /* обычный пункт                        */
  --menu-muted:     #5b6a7f;   /* подпись пункта, группа, подвал       */
  --menu-light:     #0f172a;   /* самый выразительный текст панели     */
  --menu-accent:      #e7eefc;   /* ПОДЛОЖКА текущего пункта             */
  --menu-accent-light: #1d4ed8;   /* ПОЛОСА слева, знак марки, роль       */
  --menu-line:   #ccd5e0;   /* граница панели и разделители         */
  --menu-error:     #b91c1c;   /* срочный счётчик: текст               */
  --menu-error-bg: #fef2f2;   /* срочный счётчик: подложка            */

  /* ── ГЛАВНАЯ КНОПКА ЖЁЛТАЯ ────────────────────────────────────────────
     ДВА ЖЁЛТЫХ В ОДНОЙ СИСТЕМЕ — И ОНИ РАЗВЕДЕНЫ. `docs/dizajn-sistema.md`
     держит правило «тревожные цвета в этой системе — дефицитный ресурс»,
     и жёлтый уже занят ступенью шкалы отклонений «контроль» (1–7 дней).
     Оба значения рядом, замерено скриптом, а не на глаз:

       КНОПКА   --primary-bg  #ffcc00   H 48,0°  S 100%  L 50%   яркость 0,644
       ШКАЛА    --lvl1       #7d6100   H 46,6°  S 100%  L 25%   яркость 0,129
       ШКАЛА    --lvl1-bg   #f7efd5   H 45,9°  S  68%  L 90%   яркость 0,863

     Чем разведены. НЕ тоном: 48,0° против 46,6° — соседи, и делать вид,
     что это разные цвета, нечестно. Разведены СВЕТЛОТОЙ и РОЛЬЮ:
       · светлота — вдвое (L 50% против 25%), контраст пары 3,88;
       · роль — кнопка это ПОЛЕ с тёмной надписью поверх; шкала это
         ЧЕРНИЛА (цифра, клетка, кайма метки) на почти-белой подложке
         #f7efd5. Крупного жёлтого поля у шкалы не бывает нигде;
       · размер — главная кнопка единственная на экране и ростом 52 px,
         метка шкалы — строчный значок.
     Цену называем: на одном экране человек увидит два жёлтых. Отличать
     он будет их не тоном, а тем, что одно нажимается, а второе стоит
     в строке реестра рядом с числом дней.

     `--warn` #b45309 (H 26°) к спору не относится: это янтарь, не жёлтый. */
  --primary-bg:       #ffcc00;
  --primary-bg-hover: #edb800;               /* наведение: темнее, не ярче  */
  --primary-text:     #1a1400;               /* 12,14 на заливке            */
  --primary-edge:      #a68500;               /* см. абзац ниже              */
  --primary-ring:      0 0 0 6px rgba(26,20,0,.16);

  /* ПОЧЕМУ У ЖЁЛТОЙ КНОПКИ ЕСТЬ КАНТ, ХОТЯ У GECTARO ЕГО НЕТ.
     Жёлтая заливка #ffcc00 к белой поверхности даёт 1,51 — граница
     элемента управления пропадает. Это не подбирается: ЛЮБОЙ жёлтый,
     достаточно жёлтый, чтобы быть жёлтым, светлее 3:1 к белому
     (проверено перебором: #efb800 даёт 1,82, дальше темнеет в горчицу).
     Поэтому границу несёт кант #a68500 — 3,51 к белой поверхности
     и 3,28 к серому фону страницы. Плата: кнопка чуть «обведённее»,
     чем на записи у Gectaro. */
}

/* ── БОКОВАЯ ПАНЕЛЬ: ЧТО НЕ ЛЕЧИТСЯ ТОКЕНАМИ ─────────────────────────────
   Пять правил слоя выше по файлу держат цвет ЗНАЧЕНИЕМ, а не токеном,
   и на белой панели каждое из них — тёмное на светлом. Перекрываем
   поимённо; перечень собран просмотром блока «боковая панель»
   (строки ~1556–1605), а не догадкой. */

/* Было `#c7d7fb` — светло-синяя подпись под именем пункта. */
.menu__item[aria-current="page"] .menu__todo{ color: var(--menu-muted); }

/* ТРИ НОСИТЕЛЯ ТЕКУЩЕГО ПУНКТА (ТР-550, ТР-578) — и третьего не было.
   Подложка и полоса слева стояли, а ВЕС не менялся: `.menu__name`
   держит 500 и в обычном пункте, и в текущем (`base.css`, раздел
   меню). На тёмной панели разница цвета была резкой и это сходило;
   на белой панели носителей осталось бы полтора. Добавляем вес. */
.menu__item[aria-current="page"] .menu__name{
  color: var(--menu-light);
  font-weight: 600;
}

/* Счётчики. Было `#243245`, `#7f1d1d`/`#fecaca`, `rgba(255,255,255,.18)`. */
.menu__count{ background: var(--menu-surface2); color: var(--menu-text); }
.menu__count[data-error="1"]{
  background: var(--menu-error-bg); color: var(--menu-error);
}
.menu__item[aria-current="page"] .menu__count[data-error="0"]{
  background: var(--menu-bg); color: var(--menu-accent-light);
}

/* Сноска дерева мест. Было `#fcd9a4` — янтарь, подобранный к чёрной
   панели. На белой берём тот же токен внимания, что и весь остальной
   интерфейс: вторая копия цвета разошлась бы с первой. */
.tree__footnote--warn{ color: var(--warn); }

/* НАЙДЕНО ЗАМЕРОМ, А НЕ ГЛАЗОМ: `.branch__caption` несёт `opacity: .75`
   (строка ~1326). На тёмной панели это давало 4,46 — уже ниже AA, но
   незаметно; на белой панели #5b6a7f под .75 смешивается в #848f9f
   и даёт 3,28. Прозрачность снята, «тише» продолжает нести размер
   шрифта (--t0) — носитель остался, контраст вернулся к 5,51. */
.branch__caption{ opacity: 1; }

/* Марка панели: на тёмном наведение подсвечивало белым, на белом это
   ничто. Отклик даёт синий — тот же, что у ссылок. */
.menu__brand:hover{ color: var(--menu-accent-light); }

/* ── ГЛАВНАЯ КНОПКА ──────────────────────────────────────────────────────
   `.button--primary` объявлена в `base.css` и там не правится (ТР-573):
   перекрываем здесь. Отключённое состояние НЕ трогаем — `base.css`
   держит его селектором `.button--primary[disabled]` со специфичностью
   (0,2,0), которая сильнее нашей (0,1,0), и выключенная кнопка остаётся
   серой. Это верно, а не случайно: жёлтая выключенная кнопка звала бы
   нажать. */
.button--primary{
  background: var(--primary-bg);
  color: var(--primary-text);
  border-color: var(--primary-edge);
}
.button--primary:hover{
  background: var(--primary-bg-hover);
  border-color: var(--primary-edge);
}
.button--primary:active{
  background: var(--primary-bg-hover);
  border-color: var(--primary-edge);
}
/* ФОКУС. Общий контур `base.css` — `outline: 2px solid var(--accent-main)`,
   и на жёлтом он теряется: синий #93b4f8 к жёлтому в ТЁМНОЙ теме даёт
   1,21 при пороге 3,0 (в светлой 4,43 — проходит, но правило должно
   работать в обеих). Контур главной кнопки берёт её собственные
   чернила: 12,14 светлая · 10,70 тёмная. Селектор (0,2,0) сильнее
   общего, у которого `:where(...)` обнуляет всё, кроме `:focus-visible`. */
.button--primary:focus-visible{
  outline-color: var(--primary-text);
  box-shadow: var(--primary-ring);
}

/* ── ТЁМНАЯ ТЕМА, ДВЕРЬ ПЕРВАЯ: НАСТРОЙКА СИСТЕМЫ ────────────────────────
   Набор токенов здесь и в блоке `[data-theme="dark"]` ниже ОДИНАКОВ
   до значения. Перечислены не только новые токены: без `--bg`, `--surface`,
   `--text` и прочих ручной выбор тёмной темы поднял бы их из варианта В
   (строка 682) — то есть ровно тот дефект, ради которого блок и заведён.

   ПАНЕЛЬ В ТЁМНОЙ ТЕМЕ СВЕТЛЕЕ РАБОЧЕЙ ОБЛАСТИ — зеркало светлой темы,
   где белая панель светлее серой страницы. Прежний слой делал наоборот
   (панель #070c16 — самое тёмное место экрана); при белой панели такое
   зеркало сломалось бы: днём панель ярче страницы, ночью тусклее. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:        #0b1220;
    --surface:        #131c2e;
    --surface2:       #1b2639;
    --surface3:       #243245;

    --text:      #e8edf5;
    --text2:     #a3b0c2;
    --text3:     #7c8ba1;
    --text-inv:  #0b1220;

    --line:     #243245;
    --line-inner:  #1b2639;
    --line2:    #7c8ba1;
    --edge:       #a3b0c2;

    --accent-main:        #93b4f8;
    --accent-dark:    #b9cefb;
    --accent-bg:    #1c2947;
    --accent-text:  #0b1220;
    --accent-ring:   0 0 0 3px rgba(147,180,248,.28);

    --ok:         #6ee7b7;
    --ok-bg:     #103328;
    --warn:       #fcd34d;
    --warn-bg:   #3a2c11;
    --error:       #fca5a5;
    --error-bg:   #3d1b1b;

    --backdrop:      rgba(0,0,0,.62);
    --shadow:        none;
    --shadow-float:   0 8px 24px rgba(0,0,0,.5);

    --menu-bg:      #1a2740;
    --menu-surface:      #243357;
    --menu-surface2:     #2d3f68;
    --menu-text:    #ccd7e6;
    --menu-muted:     #a4b3c7;
    --menu-light:     #f1f5f9;
    --menu-accent:      #27406f;
    --menu-accent-light: #93b4f8;
    --menu-line:   #2b3c5c;
    --menu-error:     #fca5a5;
    --menu-error-bg: #4a1f1f;

    /* Жёлтый ночью. Здесь шкала «контроль» — #d9bc63, песочная и
       ПРИГЛУШЁННАЯ (S 61%), а кнопка остаётся чистой (S 100%).
       Честно: по яркости они соседи — 0,683 против 0,516, пара даёт
       1,30. Значит ночью два жёлтых разводит НАСЫЩЕННОСТЬ и роль,
       а не светлота, как днём. Ярче кнопку делать нельзя: она и так
       самое светлое пятно тёмного экрана. */
    --primary-bg:       #ffd400;
    --primary-bg-hover: #ffe04d;
    --primary-text:     #1a1400;
    --primary-edge:      #ffd400;   /* 11,89 к поверхности: канту нечего
                                    добавлять, заливка сама себе граница */
    --primary-ring:      0 0 0 6px rgba(0,0,0,.45);
  }
}

/* ── ТЁМНАЯ ТЕМА, ДВЕРЬ ВТОРАЯ: РУЧНОЙ ВЫБОР ─────────────────────────────
   Кнопка ◐ в шапке ставит `data-theme` на <html>. Специфичность (0,2,0) —
   ровно как у блока варианта В на строке 682; выигрывает порядком, потому
   что стоит ниже. Значения — копия блока выше, слово в слово. */
:root[data-theme="dark"]{
  --bg:        #0b1220;
  --surface:        #131c2e;
  --surface2:       #1b2639;
  --surface3:       #243245;

  --text:      #e8edf5;
  --text2:     #a3b0c2;
  --text3:     #7c8ba1;
  --text-inv:  #0b1220;

  --line:     #243245;
  --line-inner:  #1b2639;
  --line2:    #7c8ba1;
  --edge:       #a3b0c2;

  --accent-main:        #93b4f8;
  --accent-dark:    #b9cefb;
  --accent-bg:    #1c2947;
  --accent-text:  #0b1220;
  --accent-ring:   0 0 0 3px rgba(147,180,248,.28);

  --ok:         #6ee7b7;
  --ok-bg:     #103328;
  --warn:       #fcd34d;
  --warn-bg:   #3a2c11;
  --error:       #fca5a5;
  --error-bg:   #3d1b1b;

  --backdrop:      rgba(0,0,0,.62);
  --shadow:        none;
  --shadow-float:   0 8px 24px rgba(0,0,0,.5);

  --menu-bg:      #1a2740;
  --menu-surface:      #243357;
  --menu-surface2:     #2d3f68;
  --menu-text:    #ccd7e6;
  --menu-muted:     #a4b3c7;
  --menu-light:     #f1f5f9;
  --menu-accent:      #27406f;
  --menu-accent-light: #93b4f8;
  --menu-line:   #2b3c5c;
  --menu-error:     #fca5a5;
  --menu-error-bg: #4a1f1f;

  --primary-bg:       #ffd400;
  --primary-bg-hover: #ffe04d;
  --primary-text:     #1a1400;
  --primary-edge:      #ffd400;
  --primary-ring:      0 0 0 6px rgba(0,0,0,.45);
}


/* ══════════════════════════════════════════════════════════════════════════
   ПЛОТНОСТЬ КАБИНЕТНЫХ ЭКРАНОВ. РЕШЕНИЕ ЗАКАЗЧИКА В-73 от 22.09.2026

   Сказано после выкладки окон: «по ощущениям ничего не поменялось»,
   «совсем все не похоже на Gectaro». Решением В-71 были сделаны окна
   документов и два цвета — белая панель и жёлтая главная кнопка; похожести
   это не дало, и причина названа в самом В-73: похожесть держат не цвета,
   а ПЛОТНОСТЬ. Выбрано «сразу всё — новая плотность слоем».

   ── ЧТО ИМЕННО ВИДНО НА ЗАПИСИ GECTARO (разбор 19.09.2026) ──────────────
   Строка сметы в одну линию; справа колонки Кол-во · Ед. · Цена · Стоимость;
   12–15 строк на экран; ряд показателей вверху — число крупно, подпись
   мелко и серым; подписи полей 11–12 px, основной текст 13, заголовок
   раздела 15; строки разделены тонкой линией, без карточки вокруг каждой;
   узкая боковая панель.

   ── ЧТО БЫЛО ИЗМЕРЕНО ДО ПРАВКИ ─────────────────────────────────────────
   Живой прогон 22.09.2026, окно 1440×900 (headless Chrome, замер
   getBoundingClientRect на странице с размноженными строками, потому что
   в учебной базе их одна-две). Экран «Закупки» (/purchase-orders/):
   первая строка реестра — на 253 px от верха, высота строки 46 px,
   в экран помещается 14 строк. Экран «Платежи» (/payment-requests/):
   первая строка реестра на 1736 px, в экран не попадает НИ ОДНОЙ; плитка
   показателя ростом 252 px. Экран «Сроки работ» (/schedule/): заголовок
   набран 32 px, таблица .table не имеет вида вовсе — браузерная.

   ── ПОЧЕМУ ЭТО ШКАЛА, А НЕ ПОДБОР ЧИСЕЛ ─────────────────────────────────
   Переопределены ТОКЕНЫ, а не отдельные правила. Пропорции прежней шкалы
   сохранены: где было две ступени с одинаковым значением (--t1 и --t2 по
   13 px), одинаковыми они и остались (по 12); где был шаг вдвое (--p2 → --p4
   → --p6), шаг вдвое и остался. Поэтому ни одно правило, которое читает
   токен, не пришлось трогать: оно уплотнилось само. Правилами переписано
   только то, что держит числа ЗНАЧЕНИЕМ (высоты строк реестра, кегль числа
   в плитке, высота шапки) и то, чего у .table не было совсем.

   ── ГДЕ ЭТО НЕ ДЕЙСТВУЕТ, И ПОЧЕМУ ЭТО ГЛАВНОЕ В БЛОКЕ ──────────────────
   Трое ворот, и каждые закрывают свой вид беды:

     1) min-width: 1100px — телефон и планшет в портрете не трогаются
        вовсе;
     2) pointer: fine — планшет в поперечной ориентации отдаёт
        pointer: coarse и остаётся просторным. Прораб в перчатке
        не получает 28-пиксельных строк никогда;
     3) body:not([data-screen=…]) — ТРИ ПОЛЕВЫХ ЭКРАНА исключены поимённо,
        даже за столом и под мышью: дневной отчёт (daily-report),
        проверка на площадке (volume-verify) и выдача наряда (work-orders —
        тем же ключом идёт и карточка наряда). Это прямое ограничение
        самого В-73: «цель нажатия там остаётся не меньше 44 px».
        Ключ ставит layout/base.html атрибутом data-screen, значения —
        константы SCREEN в works/views.py, works/views_site_checks.py
        и works/views_work_orders.py. Заводится новый полевой экран —
        его ключ дописывается СЮДА, и это единственное место.

        КЛЮЧИ — ЗНАЧЕНИЯ СПРАВОЧНИКА ЭКРАНОВ, И ОНИ МЕНЯЮТСЯ. Этап 6 ОЧ-160
        (13.10.2026) переименовал их (`dnevnoj-otchet` → `daily-report`,
        `priemka` → `volume-verify`, `narjady` → `work-orders`); селекторы ниже
        остались на прежних именах, исключение перестало исключать, и «Проверка
        на площадке» получила поле ввода 36 px вместо 44 (замер в браузере
        14.10.2026) — тихо: CSS на несуществующее значение не падает, а просто
        не срабатывает. Сторож — `works/test_density_layer.py`: он сверяет ключи
        в этом файле с ключами самих экранов.

   Почему исключение селектором, а не медиазапросом: прораб открывает
   дневной отчёт и с ноутбука тоже, и там pointer: fine — вторые ворота
   его бы пропустили.

   ── ЧЕМ ПЛАТИМ ──────────────────────────────────────────────────────────
   Экран стал суше и требовательнее к зрению: основной текст 13 px вместо
   15, подписи 11–12 вместо 13. Это осознанная плата за то, ради чего
   систему открывают завсклада, ПТО и снабженец, — видеть больше строк
   сразу. Контраст при этом НЕ ослаблен: каждая пара, которой коснулось
   уменьшение кегля, замерена по формуле WCAG 2.1 (скрипт захода
   22.09.2026), и ни одна не опустилась ниже 4,5:1 — числа названы
   поимённо там, где правило их меняет.

   И вторая плата, названная вслух: уменьшение кегля НЕ отменяет правила
   «недоступное действие показывается и объясняется». Длинные пояснения
   стали мельче, но не исчезли.
   ══════════════════════════════════════════════════════════════════════════ */

@media (min-width: 1100px) and (any-pointer: fine){

/* ── 1. ШКАЛА ЦЕЛИКОМ, ОДНИМ ОБЪЯВЛЕНИЕМ ─────────────────────────────────
   Токены объявлены на body, а не на :root: исключение полевых экранов
   живёт на атрибуте data-screen, который стоит именно на body. Всё,
   что внутри, наследует их обычным порядком; собственные объявления
   самого body (padding-left: var(--menu-width) из base.css) тоже
   читают их — своё объявление элементу видно.

   Кегли: 11 · 12 · 12 · 13 · 15 · 17 · 20 · 24 · 30 (было 12 · 13 · 13 ·
   15 · 18 · 22 · 28 · 28 · 36). Совпадающая пара --t1/--t2 совпадающей
   и осталась. Пара --t6/--t7, наоборот, развелась намеренно: заголовок
   экрана (20) обязан быть ТИШЕ крупного числа (24). Это продолжение
   находки 08.09.2026 «крупное — числу, а не заголовку».

   Отступы: 4 · 6 · 8 · 12 · 16 · 20 · 28 · 40 (было 4 · 8 · 12 · 16 · 24 ·
   32 · 48 · 64). Отношение удвоения между --p2, --p4 и --p6 сохранено.
   --p1 оставлен 4: ниже начинается не плотность, а слипание. */
body:not([data-screen="daily-report"],
         [data-screen="volume-verify"],
         [data-screen="work-orders"]){

  --t0: 11px;  /* микроподпись, шапка столбца, единица измерения */
  --t1: 12px;  /* подпись плитки, чип, имя раздела               */
  --t2: 12px;  /* мелкий текст, пояснение                        */
  --t3: 13px;  /* основной текст, кнопка, поле                   */
  --t4: 15px;  /* заголовок экрана и карточки, значение в строке */
  --t5: 17px;  /* заголовок крупного раздела                     */
  --t6: 20px;  /* афиша — осталась только на печати              */
  --t7: 24px;  /* число показателя                               */
  --t8: 30px;  /* главное число экрана                           */

  --lh:     1.4;    /* было 1.5: на 13 px полтора интервала рыхлят абзац */
  --lh-heading: 1.2;

  --p1: 4px;  --p2: 6px;  --p3: 8px;  --p4: 12px;
  --p5: 16px; --p6: 20px; --p7: 28px; --p8: 40px;
  --p9: 40px;
  --p-card: 12px;

  /* Строка списка и строка таблицы — РАЗНЫЕ величины, и разными они
     остаются: по строке списка попадают курсором в ссылку целиком,
     строка таблицы — данные, в неё не целятся. */
  --row:        40px;   /* было 52 (44 в блоке «за столом») */
  --row-table:   28px;   /* было 32 */
  --row-header: 26px;   /* было 30 */

  /* ЦЕЛИ НАЖАТИЯ ЗА СТОЛОМ. 36 — не «сколько влезет», а нижняя граница,
     названная в задании; WCAG 2.1 (2.5.8) для точного указателя требует
     24×24, то есть норма перевыполнена в полтора раза. Ворота
     pointer: fine держат это правило честным: пальцу 36 не достаётся
     ни на одном устройстве. */
  --target:        36px;   /* было 44 */
  --target-primary:   40px;   /* было 52 */
  --target-topbar: 36px;   /* было 44 */

  --menu-width:  208px;  /* было 240 */
  --tree-width: 224px;  /* было 264 */
}

/* ══ ДАЛЬШЕ — ТОЛЬКО ТО, ЧТО ТОКЕНОМ НЕ ЛЕЧИТСЯ ═══════════════════════════
   Каждое правило ниже повторяет тот же отбор body:not(…). Повтор
   некрасив и намеренно не сокращён вложенностью (&): вложенность CSS
   молодая, а этот файл отдаётся без сборки, без префиксов и без запасного
   пути. Цена — длинные селекторы; выгода — что правило работает
   в браузере заказчика, а не в спецификации. */

/* ── 2. РЕЕСТР ───────────────────────────────────────────────────────────
   Строка данных 28 вместо 32, интерлиньяж 1,25 вместо 1,4. Второе важнее
   первого: 46 px, которые мерились на «Закупках», — это не высота строки,
   а ДВЕ СТРОКИ текста в первом столбце («ARM-12 · Арматура A500C ⌀12 мм»).
   Пока интерлиньяж 1,4 при 15 px, две строки стоят 42 px, и высота 32
   не значит ничего. При 13 px и 1,25 те же две строки стоят 33. */
body:not([data-screen="daily-report"],[data-screen="volume-verify"],[data-screen="work-orders"]) .registry td{
  height: var(--row-table);
  padding: 0 var(--p3);
  line-height: 1.25;
}
body:not([data-screen="daily-report"],[data-screen="volume-verify"],[data-screen="work-orders"]) .registry th{
  height: var(--row-header);
  padding: 2px var(--p3);
  font-size: var(--t0);
  line-height: 1.15;
}

/* ЧИСЛА. Выравнивание вправо у .number уже стоит в base.css;
   здесь оно повторено вместе с .table, у которой своего вида нет
   вовсе, и вместе с моноширинными цифрами.

   tabular-nums — не украшение: пропорциональные цифры ставят «17,500»
   и «1050» вразнобой, и столбец остатка перестаёт сравниваться взглядом.
   Объём, остаток и лимит сверяют каждый день. */
body:not([data-screen="daily-report"],[data-screen="volume-verify"],[data-screen="work-orders"]) .registry td,
body:not([data-screen="daily-report"],[data-screen="volume-verify"],[data-screen="work-orders"]) .registry tfoot td,
body:not([data-screen="daily-report"],[data-screen="volume-verify"],[data-screen="work-orders"]) .table td,
body:not([data-screen="daily-report"],[data-screen="volume-verify"],[data-screen="work-orders"]) .table th{
  font-variant-numeric: tabular-nums;
}
body:not([data-screen="daily-report"],[data-screen="volume-verify"],[data-screen="work-orders"]) .registry td.number,
body:not([data-screen="daily-report"],[data-screen="volume-verify"],[data-screen="work-orders"]) .registry th.number,
body:not([data-screen="daily-report"],[data-screen="volume-verify"],[data-screen="work-orders"]) .table td.number,
body:not([data-screen="daily-report"],[data-screen="volume-verify"],[data-screen="work-orders"]) .table th.number{
  text-align: right;
}

/* ПОДЗАГОЛОВОК В ЯЧЕЙКЕ — ровно то, что у Gectaro стоит под названием
   расценки серым и мельче. Разметка для этого УЖЕ ЕСТЬ и менять её
   не надо: <small>заявка № ЗВ-БР-1</small> в supply/purchase-orders.html,
   <span class="caption"> в works/schedule.html. До сих пор оба
   набирались почти тем же кеглем, что и название, и строка читалась
   как две равноправные.

   Цвет — --text-muted, а не --text2, и это НЕ вкус: замер показал
   дефект, который был здесь и до правки. --text2 (#5b6a7f) на строке
   под курсором (--surface3 #e2e8f0) даёт 4,47:1 — ниже AA, а под курсором
   строка живёт всё время, пока её читают. --text-muted (#5c6779) даёт
   4,64 под курсором, 4,51 на нажатой строке и 5,72 на белой. Тон
   на глаз тот же, норма выполнена на всех четырёх поверхностях. */
body:not([data-screen="daily-report"],[data-screen="volume-verify"],[data-screen="work-orders"]) .registry td small,
body:not([data-screen="daily-report"],[data-screen="volume-verify"],[data-screen="work-orders"]) .table .caption{
  display: block;
  margin-top: 1px;
  color: var(--text-muted);
  font-size: var(--t0);
  line-height: 1.2;
}
/* Та же замена по той же причине: прочерк «значения нет» и подпись
   строки списка стоят там, где подложка меняется под курсором. */
body:not([data-screen="daily-report"],[data-screen="volume-verify"],[data-screen="work-orders"]) .registry .missing,
body:not([data-screen="daily-report"],[data-screen="volume-verify"],[data-screen="work-orders"]) .row__where{
  color: var(--text-muted);
}

/* КНОПКА В СТРОКЕ РЕЕСТРА. Блок «Рабочее место за столом» держит её
   на 28 px доводом «28 > 24, норма WCAG выполнена». Довод верен, но
   задание этого захода ставит планку выше — 32 px для любой ссылки
   и кнопки кабинетного экрана, — и строка реестра растёт под кнопку
   до 32: это дороже трёх пикселей высоты, но дешевле промаха. */
body:not([data-screen="daily-report"],[data-screen="volume-verify"],[data-screen="work-orders"]) .registry .button{
  min-height: 32px;
  padding: 0 var(--p3);
}

/* ── 3. .table — У НЕЁ НЕ БЫЛО ВИДА ВОВСЕ ──────────────────────────────
   works/schedule.html набирает сроки работ классом .table,
   а в дизайн-системе объявлен только модификатор .table--schedule
   (два правила). То есть экран «Сроки работ», заведённый по решению
   заказчика В-69 («по нему следим укладываемся в срок или нет»),
   показывает БРАУЗЕРНУЮ таблицу — без шапки, без линий, без разрядов.
   На записи Gectaro ровно в этом месте стоит плотный реестр.

   Вид берётся у .registry, а не изобретается второй: две таблицы
   с разным видом на соседних экранах читаются как две системы.
   Вертикальная линия столбца сюда НЕ переносится — в сроках работ
   столбцов пять, а довод В-67 про вертикали был про реестр из десяти. */
body:not([data-screen="daily-report"],[data-screen="volume-verify"],[data-screen="work-orders"]) .table{
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t3);
}
body:not([data-screen="daily-report"],[data-screen="volume-verify"],[data-screen="work-orders"]) .table th,
body:not([data-screen="daily-report"],[data-screen="volume-verify"],[data-screen="work-orders"]) .table td{
  padding: var(--p1) var(--p3);
  text-align: left;
  line-height: 1.25;
  border-bottom: 1px solid var(--line-inner);
}
body:not([data-screen="daily-report"],[data-screen="volume-verify"],[data-screen="work-orders"]) .table th{
  height: var(--row-header);
  background: var(--surface2);
  color: var(--text2);         /* 5,03:1 на этой подложке */
  font-size: var(--t0);
  font-weight: 600;
  line-height: 1.15;
  border-bottom: 1px solid var(--line);
}
body:not([data-screen="daily-report"],[data-screen="volume-verify"],[data-screen="work-orders"]) .table tbody tr:hover{
  background: var(--surface3);
}

/* ── 4. КАРТОЧКА И РЯД КАРТОЧЕК ──────────────────────────────────────────
   Внутренний отступ (20 → 12) и внутренние промежутки уплотняет токен.
   Правилом чинится другое: на экране «Акты» карточка обнимает КАЖДУЮ
   строку очереди к актированию (цикл по «очередь» → <div class="card">),
   и при промежутке 12 px между ними двадцать работ занимают экран
   с лишним. Ряд одинаковых карточек — это список, и промежуток в нём
   должен читаться как разделитель, а не как поле. */
body:not([data-screen="daily-report"],[data-screen="volume-verify"],[data-screen="work-orders"]) .card + .card{
  margin-top: var(--p2);
}
body:not([data-screen="daily-report"],[data-screen="volume-verify"],[data-screen="work-orders"]) .card__header{
  margin-bottom: var(--p2);
}
/* Строка списка. Блок «за столом» держит её на 44 px — это цель пальца,
   а под мышью цель 36; 40 взято с запасом, потому что по строке списка
   действительно целятся (она вся — ссылка), в отличие от строки реестра. */
body:not([data-screen="daily-report"],[data-screen="volume-verify"],[data-screen="work-orders"]) .list .row{
  min-height: var(--row);
  padding: var(--p2) var(--p4);
}

/* ── 5. РЯД ПОКАЗАТЕЛЕЙ ──────────────────────────────────────────────────
   У Gectaro это ПОЛОСА: «Прибыль без НДС 73 596,39 ₽» · «Рентабельность
   8,69 %» · «Сроки 18 июн – 28 сен 2026» · «Длительность 103 дня» —
   четыре-шесть штук подряд, слева направо, каждая ростом в две строки.
   У нас те же данные стояли плитками во всю ширину окна: замер
   на «Платежах» — плитка 252 px, три плитки съедали первый экран
   целиком, и реестр под ними начинался на 1736-м пикселе.

   Что меняется: плитка получает ПОТОЛОК ширины. auto-fit схлопывает
   пустые дорожки, minmax(160px, 240px) не даёт трём плиткам растянуться
   на 1400 px, justify-content: start прижимает ряд влево — туда, где
   его ищут глазами.

   Правило стоит на .grid--3 и .grid--4, и это проверено, а не
   предположено: во ВСЕХ шести местах, где эти классы встречаются
   (finance/akt, finance/avansy ×2, finance/platezhi ×2, finance/platjozh,
   works/stroyka-segodnja), внутри стоят плитки. .grid--2 — сетка
   полей формы, и её правило не трогает. */
body:not([data-screen="daily-report"],[data-screen="volume-verify"],[data-screen="work-orders"]) .grid--3,
body:not([data-screen="daily-report"],[data-screen="volume-verify"],[data-screen="work-orders"]) .grid--4{
  grid-template-columns: repeat(auto-fit, minmax(160px, 240px));
  justify-content: start;
  gap: var(--p2);
}
body:not([data-screen="daily-report"],[data-screen="volume-verify"],[data-screen="work-orders"]) .tile{
  padding: var(--p3);
}
/* Число крупно, подпись мелко и серым — единственное, что у Gectaro
   в этом ряду несёт вес. Было 34 и 42 px значением; стало 24 и 30
   токеном, то есть теми же ступенями шкалы, что и всё остальное.
   Подпись 11 px цветом --text2: 5,51:1 на белой плитке, 5,14 на фоне
   страницы — AA с запасом. */
body:not([data-screen="daily-report"],[data-screen="volume-verify"],[data-screen="work-orders"]) .tile__number{
  font-size: var(--t7);
  line-height: 1.1;
}
body:not([data-screen="daily-report"],[data-screen="volume-verify"],[data-screen="work-orders"]) .tile--main .tile__number{
  font-size: var(--t8);
}
/* НАЙДЕНО ЗАМЕРОМ, И ЭТО НЕ ПЛОТНОСТЬ, А СЛОМАННОЕ ПРАВИЛО.
   `.tile__number.tiho` — это слова НА МЕСТЕ ЧИСЛА («не ведётся»,
   «не считается», «решения нет»), и правило собственника записано
   в этом же файле дословно: «слова стоят НА МЕСТЕ ЧИСЛА и тем же
   размером, что число: набери их мелко — и плитка прочтётся как „ноль“».
   Размер им задан `var(--t5)`, числу — отдельным правилом; за столом
   это давало 22 против 34, то есть правило уже не выполнялось, просто
   этого никто не мерил. Возвращаем равенство: кегль тот же, тише —
   только цвет. */
body:not([data-screen="daily-report"],[data-screen="volume-verify"],[data-screen="work-orders"]) .tile__number.muted{
  font-size: var(--t7);
}
body:not([data-screen="daily-report"],[data-screen="volume-verify"],[data-screen="work-orders"]) .tile__name{
  margin-top: var(--p1);
  font-size: var(--t0);
}
/* Единица при числе держала 15 px ЗНАЧЕНИЕМ (base.css) — при числе
   в 24 px она спорила бы с ним. */
body:not([data-screen="daily-report"],[data-screen="volume-verify"],[data-screen="work-orders"]) .tile__unit{
  font-size: var(--t2);
}
body:not([data-screen="daily-report"],[data-screen="volume-verify"],[data-screen="work-orders"]) .tile__bottom{
  margin-top: var(--p1);
  font-size: var(--t0);
  line-height: 1.3;
}

/* ── 6. БОКОВАЯ ПАНЕЛЬ ───────────────────────────────────────────────────
   Ширина 208 вместо 240 и высота пункта 32 вместо 36 — токенами выше.
   Здесь только то, что ими не берётся.

   ТРИ НОСИТЕЛЯ ТЕКУЩЕГО ПУНКТА (ТР-550) НЕ ТРОГАЮТСЯ НИ ОДНИМ ПРАВИЛОМ
   НИЖЕ. Их держат: подложка — .menu__item[aria-current="page"]
   (--menu-accent), полоса слева — ::before того же селектора, вес —
   .menu__item[aria-current="page"] .menu__name{font-weight:600}
   из слоя В-71. Проверено перечнем, а не памятью: ни один селектор
   этого раздела не содержит aria-current, значит ни один из трёх
   носителей не перекрыт.

   ИМЯ ПУНКТА ОСТАЁТСЯ 13 px. Блок «за столом» набирает его var(--t1),
   и по новой шкале это было бы 12. Навигация — не данные: по ней ищут
   раздел глазами с расстояния, и 12 px здесь экономят четырнадцать
   пикселей высоты ценой читаемости четырнадцати ссылок. Поэтому явно
   --t3. */
body:not([data-screen="daily-report"],[data-screen="volume-verify"],[data-screen="work-orders"]) .menu__item{
  min-height: 32px;
  padding: 0 var(--p2);
}
body:not([data-screen="daily-report"],[data-screen="volume-verify"],[data-screen="work-orders"]) .menu__name{
  font-size: var(--t3);
  line-height: 1.2;
}
body:not([data-screen="daily-report"],[data-screen="volume-verify"],[data-screen="work-orders"]) .menu__brand{
  min-height: 32px;
  font-size: var(--t4);
}
body:not([data-screen="daily-report"],[data-screen="volume-verify"],[data-screen="work-orders"]) .menu__group{
  line-height: 20px;
  font-size: var(--t0);
}
body:not([data-screen="daily-report"],[data-screen="volume-verify"],[data-screen="work-orders"]) .menu__count{
  height: 18px;
  min-width: 20px;
  padding: 0 6px;
  font-size: var(--t0);
}

/* ДЕРЕВО МЕСТ. Ветка стояла на 26 px — норму WCAG 2.5.8 (24) это
   проходило, планку этого захода (32) нет. Замер 22.09.2026 нашёл её
   САМОЙ НИЗКОЙ целью нажатия кабинетного экрана: 26 px при четырнадцати
   ветках подряд — промах попадает в соседний этаж, то есть переключает
   место, а не открывает его. Растёт до 32; колонка дерева прокручивается
   сама и реестру этой высоты не отдаёт. */
body:not([data-screen="daily-report"],[data-screen="volume-verify"],[data-screen="work-orders"]) .branch{
  min-height: 32px;
  font-size: var(--t2);
}
body:not([data-screen="daily-report"],[data-screen="volume-verify"],[data-screen="work-orders"]) .menu .tree{
  padding: var(--p3) var(--p2) var(--p5);
}

/* ── 7. ВЕРХНЯЯ ПОЛОСА ───────────────────────────────────────────────────
   48 → 40. Значки в ней держат 36 (--target-topbar), и полоса — ровно
   36 + 2 + 2. Меньше нельзя: под значком лупы висит счётчик
   непрочитанного, и он вылезет за край. */
body:not([data-screen="daily-report"],[data-screen="volume-verify"],[data-screen="work-orders"]) .topbar{
  min-height: 40px;
  padding: 2px var(--p4);
}

/* ── 8. ЗАГОЛОВОЧНАЯ ЗОНА: 253 ПИКСЕЛЯ ДО ПЕРВОЙ СТРОКИ ──────────────────
   Из замеренных 253 px до первой строки реестра сама шапка таблицы —
   35. Остальное — воздух: поле страницы 16 сверху, заголовок 18 px,
   подзаголовок с отступом 16, полоса «Где» с отступом 16, имя раздела
   с отступом 16.

   .screen-title — отдельная беда: этим классом набран заголовок
   «Сроки работ», в дизайн-системе класса нет вовсе, и браузер рисует
   <h1> своим умолчанием — 32 px. Экран, заведённый ради ответа
   «успеваем или нет», начинался с самой крупной надписи на нём. */
body:not([data-screen="daily-report"],[data-screen="volume-verify"],[data-screen="work-orders"]) .page{
  padding: var(--p3) var(--p4) var(--p6);
}
body:not([data-screen="daily-report"],[data-screen="volume-verify"],[data-screen="work-orders"]) .title,
body:not([data-screen="daily-report"],[data-screen="volume-verify"],[data-screen="work-orders"]) .screen-title{
  margin: 0;
  font-size: var(--t4);
  font-weight: 600;
  line-height: var(--lh-heading);
}
body:not([data-screen="daily-report"],[data-screen="volume-verify"],[data-screen="work-orders"]) .subtitle{
  margin-bottom: var(--p3);
  font-size: var(--t2);
}
body:not([data-screen="daily-report"],[data-screen="volume-verify"],[data-screen="work-orders"]) .title:last-child{
  margin-bottom: var(--p3);
}
body:not([data-screen="daily-report"],[data-screen="volume-verify"],[data-screen="work-orders"]) .title + .grid,
body:not([data-screen="daily-report"],[data-screen="volume-verify"],[data-screen="work-orders"]) .title + .card,
body:not([data-screen="daily-report"],[data-screen="volume-verify"],[data-screen="work-orders"]) .title + .list,
body:not([data-screen="daily-report"],[data-screen="volume-verify"],[data-screen="work-orders"]) .title + .registry-wrap,
body:not([data-screen="daily-report"],[data-screen="volume-verify"],[data-screen="work-orders"]) .title + .tile{
  margin-top: var(--p3);
}
body:not([data-screen="daily-report"],[data-screen="volume-verify"],[data-screen="work-orders"]) .section{
  margin-top: var(--p4);
}
body:not([data-screen="daily-report"],[data-screen="volume-verify"],[data-screen="work-orders"]) .section__name{
  margin-bottom: var(--p2);
  font-size: var(--t1);
}
body:not([data-screen="daily-report"],[data-screen="volume-verify"],[data-screen="work-orders"]) .list + .section__name,
body:not([data-screen="daily-report"],[data-screen="volume-verify"],[data-screen="work-orders"]) .card + .section__name,
body:not([data-screen="daily-report"],[data-screen="volume-verify"],[data-screen="work-orders"]) .registry-wrap + .section__name,
body:not([data-screen="daily-report"],[data-screen="volume-verify"],[data-screen="work-orders"]) .grid + .section__name{
  margin-top: var(--p4);
}
/* Полоса отбора «Где» — подпись к экрану, а не карточка: она держала
   промежуток 16 под собой при собственном росте 44. */
body:not([data-screen="daily-report"],[data-screen="volume-verify"],[data-screen="work-orders"]) .filter-bar{
  margin-bottom: var(--p3);
  padding: var(--p1) var(--p3);
}
body:not([data-screen="daily-report"],[data-screen="volume-verify"],[data-screen="work-orders"]) .filter-bar__input{
  min-height: 32px;
}

/* ── 9. СРОКИ РАБОТ: ЧИСЛА В rem, КОТОРЫХ ШКАЛА НЕ ВИДИТ ─────────────────
   Раздел «Сроки работ» набран не токенами, а долями rem (1.35rem,
   .86rem, 46px) — он писался 16.09.2026 отдельно. Шкала до них
   не дотягивается, поэтому здесь они названы поимённо. Ответ «успеваем
   или нет» (.total) остаётся САМЫМ КРУПНЫМ на экране (17 против 15
   у имени экрана): ради него экран и открывают. */
body:not([data-screen="daily-report"],[data-screen="volume-verify"],[data-screen="work-orders"]) .total{
  margin: 0 0 var(--p1);
  font-size: var(--t5);
}
body:not([data-screen="daily-report"],[data-screen="volume-verify"],[data-screen="work-orders"]) .approx{
  margin-top: var(--p3);
  padding: var(--p2) var(--p3);
  font-size: var(--t0);
  line-height: 1.35;
}
body:not([data-screen="daily-report"],[data-screen="volume-verify"],[data-screen="work-orders"]) .month-header{
  margin-bottom: var(--p2);
}
body:not([data-screen="daily-report"],[data-screen="volume-verify"],[data-screen="work-orders"]) .month-header h2{
  font-size: var(--t4);
}
body:not([data-screen="daily-report"],[data-screen="volume-verify"],[data-screen="work-orders"]) .calendar{
  margin: var(--p3) 0;
}
/* Клетка месяца 38 вместо 46: тридцать клеток — это пять рядов,
   и восемь пикселей в каждом ряду складываются в сорок. Число в клетке
   остаётся 13 px — по нему попадают взглядом, а не курсором. */
body:not([data-screen="daily-report"],[data-screen="volume-verify"],[data-screen="work-orders"]) .day{
  min-height: 38px;
  padding: var(--p1);
}
body:not([data-screen="daily-report"],[data-screen="volume-verify"],[data-screen="work-orders"]) .day__number{
  font-size: var(--t3);
}
body:not([data-screen="daily-report"],[data-screen="volume-verify"],[data-screen="work-orders"]) .day__reason{
  font-size: var(--t0);
}

/* ── 10. ПУСТОЕ СОСТОЯНИЕ ────────────────────────────────────────────────
   Правило проекта не меняется: пустое состояние — это подсказка, что
   сделать, а не «нет данных». Меняется только его рост. */
body:not([data-screen="daily-report"],[data-screen="volume-verify"],[data-screen="work-orders"]) .empty{
  padding: var(--p4) var(--p3);
}
body:not([data-screen="daily-report"],[data-screen="volume-verify"],[data-screen="work-orders"]) .empty__word{
  margin-bottom: var(--p1);
  font-size: var(--t4);
}
body:not([data-screen="daily-report"],[data-screen="volume-verify"],[data-screen="work-orders"]) .empty p:not(.empty__word){
  font-size: var(--t2);
}
body:not([data-screen="daily-report"],[data-screen="volume-verify"],[data-screen="work-orders"]) .empty__button{
  margin-top: var(--p3);
}

}  /* конец @media (min-width: 1100px) and (any-pointer: fine) */

/* ── 11. ПЕЧАТЬ ──────────────────────────────────────────────────────────
   Плотность на бумагу НЕ идёт, и этого не надо чинить: медиазапрос выше
   действует на экране, а печать — своё устройство вывода. Акт и наряд
   печатают, чтобы читать и подписывать, а не чтобы просматривать.
   Комментарий стоит здесь, чтобы следующий заход не «починил» то,
   что и так верно. */

/* ═══════════════════════════════════════════════════════════════════════════
   ВКЛАДКИ РАЗДЕЛОВ В ШАПКЕ ОБЪЕКТА — В-74, ТР-600 … ТР-603 (22.09.2026)
   ═══════════════════════════════════════════════════════════════════════════

   ЗАЧЕМ. Заказчик посмотрел выложенные окна и цвета (В-71) и плотность
   (В-73) и сказал: «по ощущениям ничего не поменялось», «совсем все
   не похоже на Gectaro». Разбор ЖИВОЙ системы назвал причину
   (`docs/vid-gectaro-razbor.md`, § 1 и § 2): похожесть держат не цвета
   и не плотность, а то, что разделы принадлежат ОБЪЕКТУ и переключаются
   вкладками в его шапке. Пока разделы лежат плоским списком слева,
   вид остаётся нашим при любой палитре.

   ОБРАЗЕЦ ВЗЯТ С ЖИВОГО ЭКРАНА, а не с записи: активная вкладка —
   синий текст и подчёркивание снизу, неактивная — тёмно-серый текст
   БЕЗ подложки, второй ряд мельче первого.

   ЦВЕТА ТОЛЬКО ТОКЕНАМИ (ТР-574): `--accent-main`, `--text2`, `--line`.
   Ни одного значения цвета в этом разделе нет — иначе тёмная тема
   и следующая смена палитры обойдут его стороной.

   `base.css` НЕ ТРОНУТ (ТР-573): всё здесь — новые классы слоя
   системы, и ни одно правило прототипа не переопределяется. */

.object-header{
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.object-header__row{
  display: flex;
  align-items: center;
  gap: var(--p3);
  /* Отступ ровно как у шапки выше: два ряда читаются одной шапкой,
     а не шапкой и полосой под ней. */
  padding: var(--p2) var(--p5);
}

/* Возврат ко всем объектам. Цель нажатия 44×44 — ТР-603 и WCAG 2.5.5:
   на телефоне это самый левый орган управления, и промах по нему
   попадает в имя объекта. */
.object-header__back{
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--target); height: var(--target);
  margin-left: calc(var(--p2) * -1);
  color: var(--text2);
  font-size: var(--t5); line-height: 1;
  text-decoration: none;
  border-radius: var(--r1);
}
.object-header__back:hover{ background: var(--surface2); color: var(--text); }

.object-header__who{
  flex: 0 1 auto;
  display: flex; flex-direction: column; justify-content: center;
  min-width: 0;
}
.object-header__name{
  color: var(--text);
  font-size: var(--t3); font-weight: 600; line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Вторая строка — где именно мы внутри объекта. Тише имени на две
   ступени: её читают вторым взглядом, а не первым. */
.object-header__place{
  color: var(--text2);
  font-size: var(--t0); line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── ряд вкладок ──────────────────────────────────────────────────────────
   ПРОКРУЧИВАЕТСЯ САМ РЯД, А НЕ СТРАНИЦА (ТР-603, ТР-593). На 375 px
   пять разделов в строку не помещаются; без `min-width:0` у flex-элемента
   ряд распирает шапку, и горизонтальную прокрутку получает ВСЯ страница —
   то есть уезжает и форма дневного отчёта. */
.tabs{
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: stretch;
  gap: var(--p1);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;             /* полоса прокрутки съедает высоту цели */
  -webkit-overflow-scrolling: touch;
}
.tabs::-webkit-scrollbar{ display: none; }

.tab{
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: var(--p2);
  /* 44 px — цель нажатия пальцем в перчатке (WCAG 2.5.5, правило
     проекта «прораб в перчатке важнее красоты»). Подчёркивание
     активной вкладки рисуется внутри этой высоты рамкой снизу. */
  min-height: var(--target);
  padding: 0 var(--p3);
  color: var(--text2);
  font-size: var(--t3); font-weight: 500; line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.tab:hover{ color: var(--text); }
.tab:active{ color: var(--accent-main); }

/* Активная вкладка: цвет И подчёркивание И вес — три носителя, а не
   один цвет. Правило палитры проекта: смысл не передаётся цветом
   в одиночку. */
.tab[aria-current="page"]{
  color: var(--accent-main);
  font-weight: 600;
  border-bottom-color: var(--accent-main);
}

/* Второй ряд — экраны текущего раздела. Мельче первого: это выбор
   внутри уже выбранного, и он не спорит с именем объекта. */
.tabs--second{
  gap: 0;
  padding: 0 var(--p5);
  border-top: 1px solid var(--line-inner);
}
.tab--small{
  /* Рост тот же, что у любой цели нажатия, — 44. Мельче здесь ТОЛЬКО
     буквы и вес, а не палец: замер 22.09.2026 поймал вторую полосу
     на 40 px, и это ниже собственной планки проекта (`--target`) ровно
     на том ряду, которым переключают экраны каждый день. */
  min-height: var(--target);
  padding: 0 var(--p3);
  font-size: var(--t2);
}

/* За столом мышью 40 px достаточно, и ряд отдаёт четыре пикселя
   реестру — там же, где действует весь слой плотности (В-73). */
@media (min-width: 1100px) and (any-pointer: fine){
  .tab--small{ min-height: 40px; }
}

/* Число у вкладки — то же число, что у пункта меню, и по тому же
   правилу: ставится только там, где означает работу для ЭТОГО
   человека. Ноль не рисуется вовсе. */
.tab__count{
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  background: var(--surface3); color: var(--text2);
  border-radius: var(--r-round);
  font-size: var(--t0); font-weight: 600; line-height: 1;
}
.tab__count[data-error="1"]{ background: var(--error-bg); color: var(--error); }
.tab[aria-current="page"] .tab__count[data-error="0"]{
  background: var(--accent-bg); color: var(--accent-main);
}

/* ── ДВЕ НАВИГАЦИИ СРАЗУ — ЗАПРЕЩЕНО ──────────────────────────────────────
   От 1100 px боковая панель стоит постоянно (`body.has-menu` в base.css,
   та же точка перелома). Значит там, где вкладки нарисованы, те же самые
   разделы висели бы в панели вторым экземпляром: человек видит «Наряды»
   дважды и решает, что это разные экраны.

   Прячется РАЗДЕЛ, уехавший во вкладки, а не панель целиком: панель
   остаётся для того, что объекту НЕ принадлежит (справочники, настройка),
   и для дерева мест — выбора самого объекта. Это прямо названо в В-74.

   До 1100 px панель выездная: одновременно с вкладками её не видно,
   и прятать нечего. Наоборот — спрятанный раздел означал бы, что
   с телефона до него не добраться. */
@media (min-width: 1100px){
  body.has-tabs .menu__section--in-tabs{ display: none; }
}

/* ── ТЕЛЕФОН, 375 px (ТР-603, ТР-593) ─────────────────────────────────────
   Поля шапки сжимаются до полей страницы. Высота цели нажатия
   не уменьшается: 44 px остаются 44 px. */
@media (max-width: 560px){
  /* ШАПКА ОБЪЕКТА НА ТЕЛЕФОНЕ МЕРЯЕТСЯ ПИКСЕЛЯМИ, А НЕ ВКУСОМ.
     Первая редакция переносила ряд в две строки (имя сверху, разделы
     под ним) — замер эмуляцией 375×812 дал шапку объекта 178 px
     и 242 px до содержимого. На дневном отчёте это прямая потеря:
     правило проекта — «любая возможность, удлиняющая дневной отчёт,
     отнимает у системы смысл», и 772 px из 812 однажды уже были
     измерены здесь же.

     Поэтому ряд НЕ переносится: имя объекта сжимается многоточием
     (и потому ограничено по ширине), а разделы прокручиваются вбок
     сами — ровно то, ради чего у `.tabs` стоит `overflow-x`. */
  .object-header__row{ padding: var(--p1) var(--p4); gap: var(--p2); }
  .object-header__who{ max-width: 40vw; }
  .object-header__back{ width: var(--target); margin-left: calc(var(--p3) * -1); }
  .tabs--second{ padding: 0 var(--p4); }
  .tab{ padding: 0 var(--p2); }
}


/* ══════════════════════════════════════════════════════════════════════════
   БОКОВАЯ ПАНЕЛЬ КАК ПОЛОСА ЗНАЧКОВ — решение заказчика 22.09.2026 (В-74)
   ══════════════════════════════════════════════════════════════════════════

   ОТКУДА ВЗЯЛАСЬ ЗАДАЧА. Вкладки в шапке объекта (ТР-600 … ТР-603) увели
   из панели ВСЕ объектные разделы, а объектные у нас — с первого по пятый,
   то есть все, кроме «Настройки». Замер на живом экране 22.09.2026 до
   правки: `/work-orders/?mesto=3` на окне 1440 — панель 240 px, и в ней
   ОДНА ссылка (марка «Стройплощадка», 193×44); все десять пунктов меню
   имеют размер 0×0, потому что их раздел спрятан правилом
   `body.has-tabs .menu__section--in-tabs`. Двести сорок пикселей
   пустоты слева от реестра, каждый день, у каждой роли.

   ЧТО ВЫБРАЛ ЗАКАЗЧИК: сузить до значков, как у Gectaro (разбор живой
   системы — `docs/vid-gectaro-razbor.md`, § 1 и § 2: полоса около 58 px,
   только значки, подпись всплывает подсказкой).

   ЧТО ПАНЕЛЬ ТЕПЕРЬ ОЗНАЧАЕТ. Она перестала отвечать на вопрос «что
   я делаю» — на него отвечают вкладки объекта, — и отвечает на вопрос
   «где я в системе»: марка (рабочий стол), выход ко всем объектам,
   служебные разделы вне объекта, арендатор. Это не обрезанное меню,
   а ДРУГАЯ навигация, и потому у неё другая ширина.

   ГДЕ НЕ ДЕЙСТВУЕТ, И ЭТО ГЛАВНОЕ ОГРАНИЧЕНИЕ:
     · до 1100 px — панель выездная, с подписями, ровно как сегодня.
       Ни одно правило этого блока туда не идёт: с телефона до раздела
       добираются ЧЕРЕЗ неё, и полоса из значков без текста отняла бы
       единственный список экранов;
     · ИЗМЕНЕНО 28.09.2026 (ТР-633, В-85-01): полоса стоит на КАЖДОМ
       экране сотрудника (`body.has-rail`), а не только там, где
       нарисованы вкладки. Прежний довод «сузить без вкладок — спрятать
       навигацию» снят тем, что вкладки теперь есть и без объекта
       (шапка «Все объекты»). Где вкладок всё же нет (роль без объектных
       разделов), разделы остаются в полосе значками — их прячет только
       `body.has-tabs .menu__section--in-tabs`, и только при вкладках.

   ЧЕМ ПЛАТИМ, НАЗВАНО ЧЕСТНО:
     1. Подпись пункта видна только при наведении или фокусе. Для редкого
        пункта это хуже подписи — ровно то, что записано ценой приёма № 6
        в `docs/vid-gectaro-razbor.md` § 7. Плата принята сознательно:
        пунктов в полосе один-два, а не двенадцать;
     2. Полоса не прокручивается (`overflow: visible`) — иначе подсказка
        обрезалась бы собственной панелью. Пока служебных пунктов
        до девяти, это ничего не стоит; десятый на низком окне уедет
        за край без полосы прокрутки. Порог назван числом, а не «потом»:
        48 px марка + 44 на пункт + 57 подвал;
     3. У роли, у которой ВСЕ разделы объектные (прораб), в полосе
        остаются два значка — марка и «Объекты». Это не дефект
        и не недосмотр: у самой Gectaro в полосе один пункт. Но честно
        и то, что полоса при этом почти пуста, и решение «а не убрать ли
        её вовсе» — вопрос заказчику, а не догадка захода.               */

/* Значок, пункт «Объекты» и буквы арендатора существуют ТОЛЬКО в полосе.
   Объявлены скрытыми снаружи медиазапроса: правило «до 1100 px ничего
   не меняется» должно держаться по умолчанию, а не по совпадению. */
.menu__icon{ display: none; }
.menu__item--in-rail{ display: none; }
.menu__bottom-glyph{ display: none; }

@media (min-width: 1100px){

  /* ── ШИРИНА. Один токен ведёт и панель, и отступ страницы ──────────────
     56 = 6 + 44 + 6: цель нажатия 44×44 (правило проекта и WCAG 2.5.5)
     плюс поля, в которых помещается контур фокуса (2 px обводки
     при `outline-offset: 2px` из base.css).

     Токен переопределяется на body, а не на :root, потому что признак
     `has-rail` стоит именно на body. Слой плотности (В-73) ставит
     `--menu-width: 208px` селектором той же силы (0,1,1) — здесь
     выигрывает порядок: этот блок последний в файле. */
  body.has-rail{ --menu-width: 56px; }

  body.has-rail .menu{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--p3) 6px var(--p3);
    /* Подсказка выезжает ВПРАВО, за край панели. `overflow-y: auto`
       из base.css по спецификации делает прокруткой и `overflow-x`,
       то есть обрезает её. Плата названа абзацем выше. */
    overflow: visible;
  }

  /* ── ПОРЯДОК СВЕРХУ ВНИЗ ───────────────────────────────────────────────
     марка · выход к объектам · (пусто) · служебные разделы · арендатор.
     Служебный раздел — тот, что НЕ уехал во вкладки, то есть не помечен
     `--vo-vkladkah`. Второго перечня разделов для этого не заводится:
     признак уже посчитан там же, где собирается меню. */
  body.has-rail .menu__top{ order: 0; margin-bottom: var(--p3); }
  body.has-rail .menu__item--in-rail{ order: 1; display: inline-flex; }
  body.has-rail .menu__section:not(.menu__section--in-tabs):not(.tree){
    order: 2;
    margin-top: auto;   /* прижать к низу, как шестерёнка у Gectaro */
    margin-bottom: 0;
  }
  body.has-rail .menu__bottom{ order: 3; }

  /* ── ЗАГОЛОВОК ГРУППЫ ПРЯЧЕТСЯ ГЛАЗАМ, НО НЕ ПРОГРАММЕ ЧТЕНИЯ ──────────
     НАЙДЕНО СНИМКОМ, А НЕ РАССУЖДЕНИЕМ (1440x900, роль «исполнительный
     директор»): слово «Настройка» вылезало ИЗ ПАНЕЛИ влево — 56 px
     на строку заголовка не хватает, а `overflow: visible` выше по блоку
     снял единственное, что это скрывало. Прокрутки страницы это
     не давало (текст уходит за левый край, а не за правый), поэтому
     замер ширины молчал — увидел глаз.

     `display: none` здесь был бы лишней потерей: заголовок группы —
     единственное, что объясняет, ПОЧЕМУ эти значки стоят вместе.
     Приём `.sr` из base.css (клип в 1 px) убирает его с экрана
     и оставляет в дереве доступности. */
  body.has-rail .menu__group{
    position: absolute; width: 1px; height: 1px;
    margin: -1px; padding: 0; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }

  /* ── МАРКА: плитка 44×44 вместо строки ────────────────────────────────
     Синий квадрат с белым знаком — тот же приём, что «g» на синем
     у Gectaro: полоса обязана начинаться чем-то, что читается как
     «система», а не как ещё один пункт. */
  body.has-rail .menu__top{ justify-content: center; }
  body.has-rail .menu__brand{
    position: relative;                 /* якорь для подсказки */
    width: 44px; min-width: 44px; height: 44px; min-height: 44px;
    padding: 0; gap: 0;
    justify-content: center;
    border-radius: var(--r1);
    background: var(--menu-accent-light);
  }
  body.has-rail .menu__glyph{
    width: 18px; height: 18px;
    background: var(--menu-bg);       /* «чернила» плитки: см. замер */
  }

  /* ── ПУНКТ: квадрат 44×44 со значком по центру ────────────────────────*/
  body.has-rail .menu__item{
    width: 44px; min-width: 44px; height: 44px; min-height: 44px;
    padding: 0; gap: 0;
    margin: 0 0 var(--p1);
    justify-content: center;
  }
  body.has-rail .menu__icon{
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px;
    flex: 0 0 auto;
  }
  body.has-rail .menu__icon .icon{
    width: 22px; height: 22px; display: block;
  }

  /* ── ТЕКУЩИЙ ПУНКТ: ТРИ НОСИТЕЛЯ, НЕ ОДИН ЦВЕТ (ТР-550) ───────────────
       1. подложка — заливка всей плитки;
       2. полоса слева — у самого края панели, в поле 6 px;
       3. вес контура значка — 1,8 против 2,5.
     Цвет меняется тоже, но он четвёртый, а не единственный. Человек
     с нарушением цветовосприятия видит залитый квадрат, засечку слева
     и более жирный рисунок. */
  body.has-rail .menu__item[aria-current="page"]{
    background: var(--menu-accent);
  }
  body.has-rail .menu__item[aria-current="page"]::before{
    left: -6px; top: 8px; bottom: 8px; width: 3px;
    background: var(--menu-accent-light);
  }
  body.has-rail .menu__item[aria-current="page"] .menu__icon{
    color: var(--menu-accent-light);
  }
  body.has-rail .menu__item[aria-current="page"] .icon{
    stroke-width: 2.5;
  }

  /* ── ПОДСКАЗКА ────────────────────────────────────────────────────────
     Тело пункта не удаляется и не заменяется — оно становится ярлыком
     сбоку. Доступное имя ссылки при этом берётся из `aria-label`
     (см. `osnova.html`), поэтому `visibility: hidden` здесь безопасно:
     спрятанный текст в имени не участвует, и имя от него не зависит.

     ПОЧЕМУ НЕ `title`. Подсказку браузера не показывают при переходе
     с клавиатуры, она появляется через секунду и её нельзя покрасить
     до нормы контраста. Здесь подсказка всплывает и по `:hover`,
     и по `:focus-visible` — то есть человек, идущий по Tab, читает
     то же, что человек с мышью.

     ЦВЕТА ПЕРЕВЁРНУТЫЕ И ОБА ТОКЕНОМ: `--menu-light` — самая
     выразительная краска панели (днём почти чёрная, ночью почти белая),
     `--menu-bg` — сама панель. Пара остаётся контрастной в обеих
     темах без второго набора значений. */
  body.has-rail .menu__body{
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    flex: 0 0 auto;
    width: max-content; max-width: 260px;
    padding: 6px 10px;
    background: var(--menu-light);
    color: var(--menu-bg);
    border-radius: var(--r1);
    box-shadow: var(--shadow-float);
    font-size: var(--t2); font-weight: 500; line-height: 1.3;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0; visibility: hidden;
    transition: opacity .12s ease, visibility 0s linear .12s;
  }
  /* Имя внутри подсказки не спорит с ней цветом: правило «текущий пункт
     красится так-то» сильнее по специфичности, поэтому перекрываем
     поимённо и наследованием. */
  body.has-rail .menu__body .menu__name{
    display: block;
    color: inherit; font-size: inherit; font-weight: inherit;
  }
  body.has-rail .menu__item:hover .menu__body,
  body.has-rail .menu__item:focus-visible .menu__body,
  body.has-rail .menu__brand:hover .menu__body,
  body.has-rail .menu__brand:focus-visible .menu__body{
    opacity: 1; visibility: visible;
    transition: opacity .12s ease, visibility 0s linear 0s;
  }
  /* Человек, попросивший систему не двигать картинку, получает подсказку
     мгновенно, а не плавно. Появление при этом не отменяется: без него
     полоса перестала бы работать вовсе. */
  @media (prefers-reduced-motion: reduce){
    body.has-rail .menu__body{ transition: none; }
    body.has-rail .menu__item:hover .menu__body,
    body.has-rail .menu__item:focus-visible .menu__body,
    body.has-rail .menu__brand:hover .menu__body,
    body.has-rail .menu__brand:focus-visible .menu__body{ transition: none; }
  }

  /* ── СЧЁТЧИК: метка на углу значка ────────────────────────────────────
     В полосе числу негде стоять строкой, но выбрасывать его нельзя:
     «видно, где горит» — то, ради чего заказчик просил плотный вид.
     Кайма цветом панели отделяет метку от рисунка под ней.

     Точка перед числом у тревожного счётчика СОХРАНЕНА (`base.css`):
     цвет не должен оставаться единственным носителем даже на 17 px. */
  body.has-rail .menu__count{
    position: absolute; top: 0; right: 0;
    align-self: auto; margin: 0;
    min-width: 17px; height: 17px; padding: 0 4px; gap: 2px;
    border: 1px solid var(--menu-bg);
    font-size: var(--t0); line-height: 1;
  }

  /* ── ПОДВАЛ: две буквы арендатора ─────────────────────────────────────*/
  body.has-rail .menu__bottom{
    margin-top: var(--p3);
    padding: var(--p3) 0 0;
    width: 44px;
    border-top: 1px solid var(--menu-line);
    text-align: center;
  }
  body.has-rail .menu__bottom-name{ display: none; }
  body.has-rail .menu__bottom-glyph{
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px;
    border-radius: var(--r-round);
    background: var(--menu-surface);
    color: var(--menu-muted);
    font-size: var(--t0); font-weight: 700; letter-spacing: .02em;
  }

  /* ── ДЕРЕВО МЕСТ НЕ ТРОГАЕМ ───────────────────────────────────────────
     Оно лежит внутри `<nav class="menu">` разметкой, но с 16.09.2026
     рисуется ОТДЕЛЬНОЙ КОЛОНКОЙ СПРАВА (`position: fixed; right: 0`,
     раздел «ДЕРЕВО МЕСТ — В ПРАВУЮ КОЛОНКУ» выше по файлу). Поэтому
     сужение панели слева его не касается вовсе: ни одно правило этого
     блока не адресует `.tree`, `.branch` и `.derevo__*`, а те, что
     адресуют `.menu__section`, исключают `.tree` явно.

     Переносить его никуда не надо, и это ответ, а не отговорка: «где»
     и «что делаю» уже разведены по разным краям экрана, и полоса
     значков ничего в этом не меняет. Правило ниже — не перенос,
     а страховка на случай, если следующий заход спрячет содержимое
     панели общим правилом. */
  body.has-rail .menu .tree{ display: block; }
}


/* ══════════════════════════════════════════════════════════════════════════
   ТЕЛО ЭКРАНА — БЕЛЫЙ ЛИСТ, А НЕ ДОСКА С КАРТОЧКАМИ
   Решение заказчика В-75 от 22.09.2026, требование ТР-604. 22.09.2026.

   ЧТО СКАЗАЛ ЗАКАЗЧИК. «Кажется вообще у нас отличается от гектаро» —
   после того, как вкладки, полоса значков, плотность и окна уже были
   показаны. Сравнение снимков назвало причину: похожей стала РАМКА,
   а тело экрана осталось нашим. У Gectaro экран — белый лист, таблица
   лежит прямо на нём; у нас серый фон #f6f7f9, поверх него белые
   карточки с тенью, скруглением 12 и серыми промежутками между ними.

   ЧТО ИМЕННО ОТМЕНЕНО ИЗ ТР-578. Ровно одно: «карточки с мягкой тенью».
   Остальное ТР-578 в силе и не трогается — типографика, синий акцент,
   шкала отступов. Тень не отменена вообще: она переехала туда, где
   означает ЛЕЖИТ ПОВЕРХ, — окно документа, выпадающее меню, подсказка,
   всплывающая панель. До этого тень стояла у всего сразу и поэтому
   не значила ничего.

   ── ГРАНИЦА, КОТОРУЮ ЭТОТ СЛОЙ НЕ ПЕРЕСЕКАЕТ ────────────────────────────
   Те же ТРОЕ ВОРОТ, что у слоя плотности (В-73, ТР-598), и по той же
   причине:
     1) min-width: 1100px — на телефоне и узком планшете лист не делается
        вовсе;
     2) pointer: fine — планшет в поперечной ориентации отдаёт
        pointer: coarse и остаётся с карточками. Пальцу лист не достаётся
        ни на одном устройстве;
     3) body:not(…) — ТРИ ПОЛЕВЫХ ЭКРАНА исключены поимённо, даже
        за столом и под мышью: дневной отчёт (daily-report), проверка
        на площадке (volume-verify), наряды (work-orders).

   ПОЧЕМУ ПОЛЕВЫЕ ЭКРАНЫ ИСКЛЮЧЕНЫ, И ЭТО НЕ ОСТОРОЖНОСТЬ. Там карточка —
   ГРАНИЦА КАСАНИЯ, а не украшение. Палец прораба в перчатке промахивается
   на 8–10 мм; карточка работы ростом 219 px ловит промах, строка ростом
   40 — отдаёт его соседней работе. Цена ошибки разная: не туда нажал
   в реестре закупок — открыл не тот заказ и вернулся; не туда нажал
   в дневном отчёте — записал объём не на ту работу, и это второй уровень
   семи величин, который потом придётся править редакцией с историей.
   Заводится новый полевой экран — его ключ дописывается СЮДА и в слой
   плотности; два места, и это названо вслух, потому что второй копии
   правила тут не избежать без правки шаблонов.

   ── ЧЕМ ТЕПЕРЬ ДЕРЖИТСЯ ГРАНИЦА, КОТОРУЮ ДЕРЖАЛА КАРТОЧКА ────────────────
   Карточка отвечала на вопрос «где кончается одна работа и начинается
   другая» ТРЕМЯ носителями сразу: заливка, обводка, тень. На листе
   остаётся два, и оба назначены явно:
     · ЛИНИЯ — `--line2` #94a3b8 между строками и между бывшими
       карточками;
     · ОТСТУП — 12 px сверху и снизу у бывшей карточки, 6–8 у строки.
   Третий носитель, заливка, возвращается при наведении (`--surface3`) —
   но только под мышью, поэтому на него нельзя опираться, и он здесь
   не считается.

   ── КОНТРАСТ ЛИНИЙ: ЗАМЕР, А НЕ ГЛАЗ ────────────────────────────────────
   Посчитано по формуле WCAG 2.1 скриптом захода на живой странице
   (значения сняты с `getComputedStyle` корня), а не по значениям,
   вычитанным из файла:

     ТОКЕН          СВЕТЛАЯ к --surface #ffffff   ТЁМНАЯ к --surface #131c2e
     --line-inner    #eef2f6  1,12             #1b2639  1,12
     --line       #e2e8f0  1,23             #243245  1,31
     --line2      #94a3b8  2,56             #7c8ba1  4,92
     --edge         #475569  7,58             #a3b0c2  7,74

   ПЕРВАЯ РЕДАКЦИЯ ЭТОЙ ТАБЛИЦЫ ВРАЛА В ОДНОЙ КЛЕТКЕ, и это стоит
   записать. Тёмное значение `--edge` было посчитано по памяти как
   #94a3b8 (это `--line2` светлой темы) и дало 6,64. Живой замер
   на странице с `data-theme="dark"` вернул #a3b0c2 и 7,74. Вывод
   не поменялся — порог 3:1 перевыполнен и там, и там, — но число
   в комментарии проверяется тем же способом, что число в документе:
   запросом, а не памятью.

   ПОРОГА 3:1 В СВЕТЛОЙ ТЕМЕ НЕ ДАЁТ НИ ОДИН ЛИНЕЙНЫЙ ТОКЕН, и это
   сказано числом, а не обойдено. Между 2,56 и 7,58 в палитре пусто,
   а выдумывать новый цвет запрещено (ТР-574: цвет берётся токеном).
   Поэтому линии разведены по РАБОТЕ, которую они делают:

     · где линия — ГРАНИЦА ОБЛАСТИ или элемента управления, к которой
       применим WCAG 1.4.11 (шапка реестра, нижний край реестра, край
       колонки дерева, край боковой панели), стоит `--edge`: 7,58 и 7,74,
       порог перевыполнен вдвое;
     · где линия — РАЗДЕЛИТЕЛЬ ОДНОРОДНЫХ СТРОК внутри одной области,
       стоит `--line2`: 2,56 в светлой теме, то есть ниже 3:1. 1.4.11
       требует 3:1 от того, без чего не опознать компонент и его
       состояние; строка реестра опознаётся своим содержимым (4,5:1
       и выше), а не линией под ним. Плата названа: при ярком солнце
       на ноутбуке разделитель строк побледнеет раньше, чем край
       реестра. Скажет заказчик «линий не вижу» — поднимать надо сюда,
       к `--edge`, одним словом в одном правиле, и тогда реестр станет
       клеткой, как в 1С. Это выбранная плата, а не недосмотр.

   ── ЧЕМ ЕЩЁ ПЛАТИМ ──────────────────────────────────────────────────────
   1. Белая панель слева и белое дерево справа теперь граничат с белым
      листом, а не с серым фоном. Обе границы подняты с `--line` (1,23)
      до `--line2` (2,56) — иначе колонки навигации слились бы
      с данными, и человек перестал бы видеть, что дерево сужает список.
   2. Плитка показателя (`.tile`) была коробкой на сером; на листе
      коробки нет, число держит полоса слева. Самым крупным на экране
      осталось число — оно и было носителем смысла.
   3. Содержимое бывшей карточки сдвинулось влево на 12 px: двойной
      отступ «поле страницы + поле карточки» стал одинарным. Это не
      побочный эффект, а то, ради чего заказчик просил лист.
   ══════════════════════════════════════════════════════════════════════════ */

@media (min-width: 1100px) and (any-pointer: fine){

/* ── 1. ЛИСТ ─────────────────────────────────────────────────────────────
   Фон ставится на body, а не на `.page`: короткая страница оставила бы
   под собой серую полосу, и лист снова читался бы карточкой. Токен
   `--bg` при этом НЕ переопределяется — он остался серым и продолжает
   работать там, где нужен именно фон-углубление: заливка поля ввода,
   полоса поиска. Переопредели его — и поля ввода стали бы невидимы. */
body:not([data-screen="daily-report"],
         [data-screen="volume-verify"],
         [data-screen="work-orders"]){
  background: var(--surface);
}

/* ── 2. БЫВШИЕ КАРТОЧКИ ЛОЖАТСЯ НА ЛИСТ ──────────────────────────────────
   Заливка, обводка, скругление и тень снимаются разом. Горизонтальное
   поле снимается тоже: поле у листа уже есть (`.page`), второе давало
   отступ 24 px там, где смысла в нём нет. Вертикальное остаётся — оно
   и есть половина границы между блоками. */
body:not([data-screen="daily-report"],[data-screen="volume-verify"],[data-screen="work-orders"]) .card,
body:not([data-screen="daily-report"],[data-screen="volume-verify"],[data-screen="work-orders"]) .list,
body:not([data-screen="daily-report"],[data-screen="volume-verify"],[data-screen="work-orders"]) .registry-wrap,
body:not([data-screen="daily-report"],[data-screen="volume-verify"],[data-screen="work-orders"]) .role{
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
body:not([data-screen="daily-report"],[data-screen="volume-verify"],[data-screen="work-orders"]) .card{
  padding: var(--p4) 0;
}
/* Скругления больше нет — обрезка содержимого была нужна только ему,
   а `overflow: hidden` ломает прилипшую шапку реестра внутри списка. */
body:not([data-screen="daily-report"],[data-screen="volume-verify"],[data-screen="work-orders"]) .list{
  overflow: visible;
}

/* ДВЕ БЫВШИЕ КАРТОЧКИ ПОДРЯД РАЗДЕЛЯЕТ ЛИНИЯ, а не промежуток: 12 px
   серого между белыми прямоугольниками читались как граница, 12 px
   белого между белыми не читаются никак. */
body:not([data-screen="daily-report"],[data-screen="volume-verify"],[data-screen="work-orders"]) .card + .card{
  margin-top: 0;
  border-top: 1px solid var(--line2);
}

/* «Тихая карточка» остаётся заливкой: это НЕ карточка, а другая
   поверхность — приглушённый блок внутри листа. Её смысл в заливке,
   и снимать её значило бы стереть различие. */
body:not([data-screen="daily-report"],[data-screen="volume-verify"],[data-screen="work-orders"]) .card--quiet{
  background: var(--surface2);
  padding: var(--p4);
}
/* «Выделенная» держалась синей ОБВОДКОЙ, которой больше нет. Носитель
   меняется на полосу слева — той же толщины, что у текущего пункта меню,
   чтобы «выделено» выглядело в системе одинаково. */
body:not([data-screen="daily-report"],[data-screen="volume-verify"],[data-screen="work-orders"]) .card--highlighted,
body:not([data-screen="daily-report"],[data-screen="volume-verify"],[data-screen="work-orders"]) .role[data-self="1"]{
  border-left: 3px solid var(--accent-main);
  padding-left: var(--p4);
}

/* Обёртка-разделитель `.section` тени не имела по смыслу и получила её
   слоем вида: тень на прозрачном блоке — это серая полоска ниоткуда. */
body:not([data-screen="daily-report"],[data-screen="volume-verify"],[data-screen="work-orders"]) .section{
  box-shadow: none;
}

/* ── 3. СТРОКА СПИСКА ────────────────────────────────────────────────────
   Линия сверху вместо стенок карточки. Горизонтальное поле уменьшено
   до 6: подложка наведения должна выходить за текст, но не повторять
   поле листа второй раз. */
body:not([data-screen="daily-report"],[data-screen="volume-verify"],[data-screen="work-orders"]) .row{
  padding-left: var(--p2);
  padding-right: var(--p2);
  border-top: 1px solid var(--line2);
}
body:not([data-screen="daily-report"],[data-screen="volume-verify"],[data-screen="work-orders"]) .row:first-child{
  border-top: 0;
}
/* Наведение было `--surface2` (1,13 к белому) — на сером фоне оно читалось
   потому, что карточка была белым пятном. На белом листе разница нужна
   своя: `--surface3` даёт 1,23. Больше палитра не предлагает, и это честная
   граница приёма: наведение — подсказка, а не носитель смысла. */
body:not([data-screen="daily-report"],[data-screen="volume-verify"],[data-screen="work-orders"]) a.row:hover,
body:not([data-screen="daily-report"],[data-screen="volume-verify"],[data-screen="work-orders"]) button.row:hover{
  background: var(--surface3);
}

/* ── 4. РЕЕСТР ───────────────────────────────────────────────────────────
   Таблица лежит на листе. Рамку ей заменяют ДВЕ линии `--edge` — под
   шапкой и под последней строкой: они и есть «здесь начинается и здесь
   кончается таблица». Между строками — `--line2`.

   Прокрутка остаётся ВНУТРИ обёртки (`overflow-x: auto` из base.css
   не трогается): широкий реестр не имеет права возить страницу. */
body:not([data-screen="daily-report"],[data-screen="volume-verify"],[data-screen="work-orders"]) .registry th{
  border-bottom: 1px solid var(--edge);
}
body:not([data-screen="daily-report"],[data-screen="volume-verify"],[data-screen="work-orders"]) .registry td{
  border-bottom: 1px solid var(--line2);
}
body:not([data-screen="daily-report"],[data-screen="volume-verify"],[data-screen="work-orders"]) .registry tbody tr:last-child td{
  border-bottom: 1px solid var(--edge);
}
body:not([data-screen="daily-report"],[data-screen="volume-verify"],[data-screen="work-orders"]) .registry tbody tr:hover{
  background: var(--surface3);
}

/* ── 5. ПЛИТКА ПОКАЗАТЕЛЯ ────────────────────────────────────────────────
   Коробки нет; число держит полоса слева. Полоса 2 px, а не 1: она
   не разделитель, а метка начала показателя, и обязана отличаться
   от линии строки — иначе ряд плиток прочитается как таблица. */
body:not([data-screen="daily-report"],[data-screen="volume-verify"],[data-screen="work-orders"]) .tile{
  background: none;
  border: 0;
  border-left: 2px solid var(--line2);
  border-radius: 0;
  box-shadow: none;
  padding: var(--p2) 0 var(--p2) var(--p4);
}

/* ── 6. КРАЯ ЛИСТА: ПАНЕЛЬ СЛЕВА, ДЕРЕВО СПРАВА ──────────────────────────
   До этого решения колонки навигации отделял СЕРЫЙ ФОН между ними
   и данными. Фона больше нет — значит вся работа досталась 1-пиксельной
   линии, а она стояла на `--line` (1,23). Поднимаем до `--line2`
   (2,56): это граница области, и без неё человек перестаёт видеть, что
   дерево сужает список — ровно тот дефект, который ТР-605 называет
   «смотрит на часть данных и не знает об этом».

   У ДЕРЕВА КРАСИТСЯ ВЕСЬ КОНТУР, А НЕ ЛЕВЫЙ КРАЙ, и это не педантизм.
   Тем же днём ТР-605 превращает дерево из постоянной колонки
   во всплывающую панель (`static/tree-button.css`), и там обводка
   идёт по всем четырём сторонам. Покрась мы `border-left-color` —
   у панели потемнел бы один край из четырёх, то есть получилась бы
   рамка-обрывок. `border-color` верен в обоих видах: у колонки
   существует только левая сторона, у панели — все.

   ЧТО ИЗ ЭТОГО НЕ В МОЕЙ ВЛАСТИ, СКАЗАНО ВСЛУХ: `tree-button.css`
   подключён ПОСЛЕ `app.css`, а его селектор
   `body.has-menu .menu .tree` имеет ту же специфичность (0,3,1),
   что и мой. При равенстве побеждает последний — значит у всплывающей
   панели останется `--line` (1,23), и поднять её должен тот, кто
   ведёт ТР-605, у себя. Лезть сюда специфичностью я не стал: война
   селекторов между двумя слоями хуже одной бледной линии. */
body:not([data-screen="daily-report"],[data-screen="volume-verify"],[data-screen="work-orders"]) .menu{
  border-right-color: var(--line2);
}
body:not([data-screen="daily-report"],[data-screen="volume-verify"],[data-screen="work-orders"]) .menu .tree{
  border-color: var(--line2);
}

/* ── 6-б. ПУСТОЕ СОСТОЯНИЕ ───────────────────────────────────────────────
   НАЙДЕНО СНИМКОМ, А НЕ ПРЕДУСМОТРЕНО. На «Закупках» блок «Незакрытых
   заявок нет» жил внутри карточки: рамка говорила «вот здесь ничего»,
   а текст — «и вот почему». Карточки не стало, и текст повис посреди
   белого листа без всякого признака того, к какому разделу он относится.

   Возвращается НЕ карточка: пунктир — это «здесь было бы содержимое»,
   а сплошная рамка означала бы предмет. Пунктир несёт смысл ФОРМОЙ,
   а не цветом, — правило дизайн-системы про дублирование носителя. */
body:not([data-screen="daily-report"],[data-screen="volume-verify"],[data-screen="work-orders"]) .empty{
  border: 1px dashed var(--line2);
  border-radius: var(--r1);
}

/* ── 7. ЧТО ЛЕЖИТ ПОВЕРХ ЛИСТА — ТЕНЬ СОХРАНЯЕТ ──────────────────────────
   Перечень закрытый и собран просмотром ВСЕХ потребителей `--shadow-float`
   в трёх файлах (base.css: `.object__menu`, `.feed`, `.profile__menu`,
   `.toast`, открытая панель `.menu[data-open="1"]`; dialog.css:
   `.dialog__frame`). Ни одно правило выше их не адресует, поэтому тень
   и скругление у них остались сами собой. Здесь правится только
   ОБВОДКА: на сером фоне белое всплывающее отделялось фоном, на белом
   листе — одной линией, и 1,23 для неё мало. */
body:not([data-screen="daily-report"],[data-screen="volume-verify"],[data-screen="work-orders"]) .object__menu,
body:not([data-screen="daily-report"],[data-screen="volume-verify"],[data-screen="work-orders"]) .feed,
body:not([data-screen="daily-report"],[data-screen="volume-verify"],[data-screen="work-orders"]) .profile__menu,
body:not([data-screen="daily-report"],[data-screen="volume-verify"],[data-screen="work-orders"]) .toast,
body:not([data-screen="daily-report"],[data-screen="volume-verify"],[data-screen="work-orders"]) .dialog__frame{
  border-color: var(--line2);
}

}  /* конец @media (min-width: 1100px) and (any-pointer: fine) — белый лист */

/* ══════════════════════════════════════════════════════════════════════════
   ФОРМА, ЗАКРЫТАЯ РОЛИ, ГАСНЕТ ЦЕЛИКОМ (Н-10, находка КР-04 обхода 26.09.2026).
   `<fieldset disabled>` гасит все поля внутри средствами самого браузера:
   на кабинете технадзора директор видел 41 живое поле под выключенной
   кнопкой и узнавал о запрете только в конце. Данные при этом видны,
   объяснение запрета стоит над формой. Рамку и отступы fieldset снимаем —
   это не группа полей, а переключатель доступности.
   ══════════════════════════════════════════════════════════════════════════ */
.borderless{ border: 0; padding: 0; margin: 0; min-width: 0; }

/* Прокрутка вбок ВНУТРИ блока, а не страницы (КР-07): таблица, шире
   экрана телефона, ездит сама, страница стоит. */
.scroll-x{ overflow-x: auto; max-width: 100%; }

/* ══════════════════════════════════════════════════════════════════════════
   ОДИН ВИД ПОКАЗАТЕЛЯ НА ВСЮ СИСТЕМУ (Н-20, дизайнер § 7 «Третье»).
   Обход 26.09.2026: показатели стояли на шести экранах в двух видах —
   `.metric` (смета: мелкая серая подпись, под ней число, без карточки)
   и `.tile` (карточка с тенью, число сверху, подпись КАПСОМ снизу).
   Переходя со «Сметы» на «Стройку сегодня», человек видел два языка
   для одного и того же.

   Разметка плиток (87 мест в пяти шаблонах) НЕ переписывается — сведён
   ВИД: плитка выглядит как показатель сметы. Подпись поднимается над
   числом порядком в колонке, карточка снимается, капс снимается.
   Пояснение под числом (`.tile__bottom`) остаётся под числом.
   ══════════════════════════════════════════════════════════════════════════ */
.tile{
  display: flex; flex-direction: column; gap: 2px;
  background: transparent; border: 0; box-shadow: none;
  border-radius: 0; padding: var(--p2) 0;
}
.tile__name{
  order: -1; margin-top: 0;
  font-size: var(--t2, 12px); font-weight: 400;
  letter-spacing: 0; text-transform: none;
  color: var(--text-muted, var(--text2));
}
.tile__number,
.tile--main .tile__number{
  font-size: var(--t6, 22px); font-weight: 400; letter-spacing: 0;
  line-height: var(--lh-heading, 1.25);
}
.tile--error .tile__name::before{ content: none; }
.tile--error .tile__number::before{ content: "■ "; font-size: .6em; vertical-align: .15em; }
@media (max-width: 767px){
  .tile__number, .tile--main .tile__number{ font-size: var(--t5, 18px); }
}

/* «Не назначено» в таблицах — словами, вторичным цветом, без капсулы
   (Н-13, дизайнер 9: капсула давала 4,47 при пороге 4,5). */
.table .missing{ color: var(--text2); }

/* Погашенное поле ВЫГЛЯДИТ погашенным (Н-29, дизайнер 27.09.2026): внутри
   `<fieldset disabled>` поля оставались белыми с тёмной рамкой и читались
   как живые — браузер гасит их, но не красит. */
/* Заперто проверкой на площадке (ОЧ-178, ТР-720): поле только для чтения ВЫГЛЯДИТ погашенным и
   в форме исправления тоже — объём проверенной работы менять нельзя, и подпись под полем объясняет почему. */
.number-input__input[readonly]{
  background: var(--surface2); color: var(--text2); cursor: not-allowed;
}
fieldset:disabled .field__input,
fieldset:disabled .number-input__input,
fieldset:disabled select,
fieldset:disabled textarea{
  background: var(--surface2); color: var(--text2);
  border-color: var(--line); cursor: not-allowed;
}


/* ══════════════════════════════════════════════════════════════════════════
   ШАПКА — ОДНОЙ СТРОКОЙ ЗА СТОЛОМ (ТР-633, В-85-01, находки ДГ-02, ДГ-03)
   ══════════════════════════════════════════════════════════════════════════

   ЗАМЕР ДО (1440×900, «Закупки», 28.09.2026): над содержимым ТРИ ряда —
   полоса 49 px, ряд объекта 48, ряд экранов раздела 41; итого 138 px,
   и имя экрана стоит трижды — в полосе, во вкладке и в заголовке.
   У Gectaro шапка проекта — одна строка 60 px.

   ЧТО СДЕЛАНО. Ряд объекта и правая часть полосы («Где», тема, профиль)
   встают в ОДНУ строку сеткой общего контейнера `#topbar`; ряд экранов
   раздела — под ними. Имя экрана из полосы убрано: его называют вкладка
   и заголовок страницы. Разметка не меняется — только раскладка, и только
   от 1100 px, где панель стоит постоянно. На телефоне всё как было:
   там полоса несёт кнопку меню, и ряд не помещается в одну строку.

   `display: contents` у `.object-header` отдаёт её ряды сетке `#topbar`;
   подложка и черта, которые были у неё, переезжают на контейнер. */
@media (min-width: 1100px){
  body.has-tabs #topbar{
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
  }
  body.has-tabs .object-header{ display: contents; }
  body.has-tabs .object-header__row{ grid-column: 1; grid-row: 1; min-width: 0; }
  body.has-tabs .tabs--second{ grid-column: 1 / -1; grid-row: 2; }
  body.has-tabs #topbar > .topbar{
    grid-column: 2; grid-row: 1;
    position: static;
    min-height: 0;
    padding: var(--p2) var(--p5) var(--p2) var(--p2);
    background: transparent;
    border-bottom: 0;
  }
  body.has-tabs .topbar__screen,
  body.has-tabs .topbar__spacer{ display: none; }
}


/* ══════════════════════════════════════════════════════════════════════════
   ПЛОТНОСТЬ ПО ЖИВОМУ ЗАМЕРУ GECTARO — ТР-634, решение В-85-02 (28.09.2026)
   ══════════════════════════════════════════════════════════════════════════

   ЧТО ИСПРАВЛЯЕТСЯ. Слой В-73 (ТР-597, выше по файлу) делался по ЗАПИСИ
   демонстрации, где Gectaro выглядел мелким. Живой замер дизайнера
   27.09.2026 (`docs/obhod-gectaro-27-09-dizajner.md`, ДГ-01, ДГ-07,
   ДГ-08) это опроверг: у них основной кегль 14 px, строки реестра
   40–76 px, суммы 18 px, белый лист на серой подложке. У нас было 13 px
   и строки 25–31 px — мельче и теснее их. Заказчик выбрал «по живому
   замеру».

   КАК. Механизм тот же — токены слоем на body, те же ворота (за столом,
   под мышью, три полевых экрана исключены поимённо): здесь переопределены
   ЧИСЛА, а не правила. Этот блок последний в файле, селектор той же силы —
   побеждает порядок. Прежние числа в слое В-73 оставлены как запись того,
   что было, с пометкой в ТР-597.

   ЦВЕТА ГЕКТАРО НЕ БЕРУТСЯ (ДГ, раздел «не брать»): их серые заголовки
   столбцов дают 1,9:1. Здесь только кегль, высота и подложка; цвета —
   наши токены, контраст пар не меняется.

   ЧЕМ ПЛАТИМ. На экран 1440×900 влезает меньше строк реестра (40 вместо
   28 px на строку). Это выбор заказчика: читать легче, чем листать меньше. */
@media (min-width: 1100px) and (any-pointer: fine){

body:not([data-screen="daily-report"],
         [data-screen="volume-verify"],
         [data-screen="work-orders"]){
  --t0: 12px;  /* микроподпись, шапка столбца   (было 11) */
  --t1: 13px;  /* подпись плитки, чип           (было 12) */
  --t2: 13px;  /* мелкий текст, пояснение       (было 12) */
  --t3: 14px;  /* основной текст, кнопка, поле  (было 13) */
  --t4: 16px;  /* заголовок карточки, значение  (было 15) */
  --t5: 18px;  /* заголовок раздела             (было 17) */

  --row-table:   40px;  /* строка реестра          (было 28) */
  --row-header: 36px;  /* шапка столбцов реестра  (было 26) */

  /* БЕЛЫЙ ЛИСТ НА СЕРОЙ ПОДЛОЖКЕ. Подложка — `--bg`, тот же токен,
     что у рабочей области палитры; лист — `.page`. */
  background: var(--bg);
}

/* Лист тянется минимум на высоту окна за вычетом шапки: короткая страница
   не должна кончаться серой полосой посреди экрана — это и был довод
   В-75 против фона у `.page`, здесь он закрыт высотой листа. */
body:not([data-screen="daily-report"],[data-screen="volume-verify"],[data-screen="work-orders"]) .page{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r2);
  /* Поля со всех сторон: без них лист упирался в полосу значков и в край
     окна, и подложки не было видно вовсе (замер 28.09.2026: лист 1384 px
     при окне 1440 и полосе 56). */
  width: auto;
  margin: var(--p5);
  min-height: calc(100vh - 140px);
}

/* Строка реестра — по токену; интерлиньяж обратно к обычному, иначе две
   строки текста в первом столбце сжимались бы в 40 px. */
body:not([data-screen="daily-report"],[data-screen="volume-verify"],[data-screen="work-orders"]) .registry td{
  line-height: 1.35;
}

/* Суммы в ряду показателей — не мельче 18 px (ТР-634). */
body:not([data-screen="daily-report"],[data-screen="volume-verify"],[data-screen="work-orders"]) .metric__value,
body:not([data-screen="daily-report"],[data-screen="volume-verify"],[data-screen="work-orders"]) .tile__number{
  font-size: max(18px, var(--t7));
}

}


/* ── ПЛИТКИ ОБЪЕКТОВ (хвост ТР-633, ГЛ-02, 28.09.2026) ──────────────────────
   Карточка объекта без выбранного объекта: по плитке на объект, клик
   открывает его. Как список проектов у Gectaro — плитки, а не таблица. */
.object-tiles{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--p4);
}
.object-tile{
  display: flex; flex-direction: column; gap: var(--p1);
  padding: var(--p5);
  color: inherit; text-decoration: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r2);
}
.object-tile:hover,
.object-tile:focus-visible{ border-color: var(--accent-main); }


/* ══════════════════════════════════════════════════════════════════════════
   РЕЕСТР: СТРОКА УПРАВЛЕНИЯ И ОКНО СОЗДАНИЯ (ТР-637, В-85-04, 28.09.2026)
   ══════════════════════════════════════════════════════════════════════════
   Над таблицей — заголовок, «⊕», капсулы отбора, поиск; форма создания —
   в окне системы (`dialog.js`, ТР-588), а не разделом на десятки полей над
   списком. Отбор — `static/registry.js`; без скрипта таблица целиком. */

.toolbar{
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--p2) var(--p3);
  margin-bottom: var(--p3);
}
.toolbar .section__name{ margin: 0 var(--p2) 0 0; }
.toolbar__search{ flex: 0 1 280px; min-width: 160px; margin-left: auto; }

.pills{ display: inline-flex; flex-wrap: wrap; gap: var(--p1); }
.pill{
  min-height: 32px;
  padding: 0 var(--p3);
  font: inherit; font-size: var(--t1);
  color: var(--text2);
  background: var(--surface2);
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
}
.pill[aria-pressed="true"]{ color: var(--accent-main); background: var(--accent-bg); border-color: var(--accent-main); }

@media (max-width: 560px){
  .toolbar__search{ flex-basis: 100%; margin-left: 0; }
}

/* ── ТР-641: галочка в реестре ────────────────────────────────────────────
   Видна всегда, а не при наведении (на телефоне наведения нет); поле
   касания — вся ячейка: подпись оборачивает флажок. */
.registry__check{ width: 44px; text-align: center; padding: 0; }
.registry__check label{ display: flex; align-items: center; justify-content: center;
  min-height: 44px; min-width: 44px; cursor: pointer; }
.registry__check input{ width: 20px; height: 20px; margin: 0; }
.is-hidden{
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ── ТР-668: блок-схема документов вкладки «Документация» ────────────────
   Узел — тот же `.route__step`, которым карточка наряда и акта
   показывает «Путь документа» (ТР-638): второй копии вида не заводится.
   Разница одна — ширина узла: там семь коротких слов в ряд, здесь узел
   несёт роль и проверку, поэтому ему нужно больше места, чем `flex: 1 1 0`
   даёт при шести-семи узлах в ветке. Брейкпоинт узкий/широкий — тот же
   720 px, что и у `.route`, специально не заводится второй. */
.doc-flow-branch{ margin-top: var(--p4); }
.doc-flow-branch h3{ margin-bottom: var(--p1); }
.doc-flow .route__step{ flex: 1 1 200px; display: flex; flex-direction: column; gap: 2px; }
/* На ширине ≤720 px `.route` переходит в column (правило выше) — и
   тогда `flex-basis` считается по ГЛАВНОЙ оси, то есть по ВЫСОТЕ: узел
   получал 200px высоты, даже когда текста в нём на треть меньше, и под
   текстом оставалось пустое место. Высота — по содержимому. */
@media (max-width: 720px){
  .doc-flow .route__step{ flex-basis: auto; }
}
.doc-flow-node-title{ font-weight: 600; color: var(--text); }
a.doc-flow-node-title{ text-decoration: underline; }
.doc-flow-node-note{ font-style: italic; }
/* Роль не нашлась в справочнике (переименовали операцию — забыли схему):
   не молчаливая клетка, а видимая пометка, что читать узлу нечего. */
.doc-flow-node--no-role .route__who{ color: var(--error); }
.doc-flow-badge{
  display: inline-block; margin: 0 0 var(--p2);
  padding: 2px var(--p2); border-radius: 999px;
  font-size: var(--t0, 12px); font-weight: 500;
}
.doc-flow-badge--code{ background: var(--accent-bg); color: var(--accent-main); }
.doc-flow-badge--manual{ background: var(--surface2); color: var(--text2); }

/* ── ТР-669: раздел «Контроли» вкладки «Документация» ────────────────────
   Находка главного 30.09.2026 (браузер, 375 px): строка `<table>` шириной
   822 px не помещалась в экран телефона ни при каком масштабировании —
   у таблицы фиксированное число колонок, и сузить её мельче заголовков
   нельзя. Здесь, как у `.route`, каждая проверка — карточка `.card`,
   а не строка таблицы: карточка блочная и одинаково влезает в 375
   и в 1440 px, брейкпоинт не нужен вовсе. Признак («правило системы…»)
   показан ОДНАЖДЫ на группу (`.doc-controls__heading`), а не в каждой
   карточке — раньше он повторялся в каждой строке и был шумом. */
.doc-controls__group{ margin-top: var(--p4); }
.doc-controls__heading{ font-weight: 600; margin-bottom: 2px; }
.doc-controls__card{ margin-top: var(--p2); }
.doc-controls__card > p{ margin: 0; }
.doc-controls__message{ margin-bottom: var(--p1); }

/* ОЧ-132 шаг 2з: поиск и оглавление над самим разделом «Контроли» —
   находка проверки удобства («690 карточек, не найти»). Оглавление —
   тот же `.doc-list`, что у самого верхнего оглавления вкладки
   (`.doc-toc`), второй уровень — список операций внутри приложения. */
.doc-controls__tools{ margin-bottom: var(--p4); }
.doc-controls__tools .doc-toc{ margin-top: var(--p2); }

/* ── ТР-686, ТР-687: документация статьями и комментарии под статьёй ────
   Оглавление — разделы по модулям, у раздела вступление и список статей
   «название + строка о чём» (как база знаний Gectaro, В-94). Статья —
   крошки, содержание, шаги, «предыдущая / следующая», комментарии.
   Поле «Написать» — во всю ширину и высокое: пишут и с телефона. Цели
   нажатия — не меньше 44 px, как у остальных кнопок системы. */
.docs-module{ margin-top: var(--p4); }
.docs-module__intro{ color: var(--text2); margin: 0 0 var(--p2); }
.docs-module__list{ list-style: none; margin: 0; padding: 0; }
.docs-module__item{ padding: var(--p2) 0; border-top: 1px solid var(--line); }
.docs-module__link{ display: inline-block; font-weight: 600; min-height: 24px; }
.docs-module__about{ display: block; color: var(--text2); }
.docs-breadcrumbs{ color: var(--text2); margin-bottom: var(--p2); }
.docs-breadcrumbs a{ color: inherit; }
.docs-back{ margin: 0 0 var(--p3); }
.docs-article__intro{ }
.docs-contents{ margin: var(--p3) 0; }
.docs-contents__title{ font-size: 1em; margin: 0 0 var(--p1); }
.docs-article__step{ margin-top: var(--p4); }
.docs-errors{ margin-top: var(--p2); }
.docs-errors > summary{ cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 600; }
.docs-pager{ display: flex; justify-content: space-between; gap: var(--p3); flex-wrap: wrap;
  margin: var(--p5) 0 var(--p4); padding-top: var(--p3); border-top: 1px solid var(--line); }
.docs-pager a{ min-height: 44px; display: inline-flex; align-items: center; }
.docs-comments{ margin-top: var(--p4); }
.docs-comment{ margin-top: var(--p3); padding-left: var(--p2); border-left: 3px solid var(--line); }
.docs-comment--resolved{ border-left-color: var(--ok); }
.docs-comment--reply{ margin-left: var(--p3); }
.docs-comment__meta{ color: var(--text2); margin: 0; }
.docs-comment__body{ margin: var(--p1) 0; white-space: normal; overflow-wrap: anywhere; }
.docs-comment__resolved{ color: var(--ok); margin: 0; }
.docs-comment__answer{ margin-top: var(--p2); }
.docs-comments__form{ margin-top: var(--p4); }
.docs-comments__field{ width: 100%; min-height: 8em; font-size: 16px; }
.docs-screen-link{ margin: 0 0 var(--p2); }
.hint-docs-link{ display: block; margin-top: var(--p1); }

/* ── ТР-642: поиск над длинным списком выбора ─────────────────────────── */
.select-search__input{ margin-bottom: var(--p1); }

/* ── Н-93: кнопка выгрузки — форма POST в строке с подписью, а не блоком ── */
.export-control__request{ display: inline; margin: 0; }

/* ── ОЧ-125: капсулы видов документов — ссылки, а не кнопки (реестр «Документы»).
   Текущий вид — тот же вид, что у нажатой капсулы отбора. */
a.pill{ display: inline-flex; align-items: center; text-decoration: none; min-height: 44px; }
a.pill[aria-current="page"]{ color: var(--accent-main); background: var(--accent-bg); border-color: var(--accent-main); }

/* ── ОЧ-114: ступени исполнительного документа (EXE-04) — цепочка в строке реестра. */
.steps{ display: flex; flex-wrap: wrap; gap: 4px; list-style: none; margin: 0; padding: 0; }
.steps li{ padding: 2px 8px; font-size: var(--t1); color: var(--text2); background: var(--surface2);
  border: 1px solid var(--line); border-radius: 999px; }
.steps li[data-done="1"]{ color: var(--text); }
.steps li[aria-current="step"]{ color: var(--accent-main); background: var(--accent-bg); border-color: var(--accent-main); }