@charset "utf-8";
/* ═══════════════════════════════════════════════════════════════════════════════
   ЭКРАН ПЛАНИРОВЩИКА. ЗНАЧЕНИЙ ЗДЕСЬ НЕТ — ТОЛЬКО РОЛИ.

   Система оформления объявлена в src/Shared.Ui/ui-tokens.css и приезжает сюда
   сборкой (src/Shared.Ui/Оформление.props); подключена первой строкой в index.html.
   Волна 0: цвета, кегли, отступы и скругления этого файла заменены ссылками на
   роли системы. Ни один класс не переименован, разметка не тронута.

   ⛔ ПОЧЕМУ ПРЕЖНИЕ ИМЕНА (`--ink`, `--muted`, `--line`, `--accent`, `--st-*`,
   `--load-*`) ОСТАЛИСЬ. Их читает не только этот файл: `app.js` печатает
   `var(--load-warn)`, `var(--load-ok)`, `var(--load-over)` и `var(--st-overdue)`
   прямо в атрибуты `style` (сигналы, светофор загрузки, сроки). Переименование
   было бы правкой JS, а он в эту волну не трогается. Поэтому имена остались,
   а значения стали ССЫЛКАМИ на роли системы — второй палитры больше нет.

   ⛔ ЧТО СОЗНАТЕЛЬНО НЕ СТАЛО ТОКЕНОМ — ГЕОМЕТРИЯ ДИАГРАММЫ.
   `--hour-w` равен константе `HOUR_W` в app.js (38 px, дневной масштаб — 64):
   полосы позиционированы абсолютно, и расхождение шкалы с расчётом рисует работу
   не в том часу. Ширины колонок, высоты строк и полос — тоже геометрия, а не ритм
   отступов. Их правка — это правка диаграммы, то есть редизайн (волна 2), а не
   объявление системы.
   ═══════════════════════════════════════════════════════════════════════════════ */
:root{
  /* ГЕОМЕТРИЯ ДИАГРАММЫ — не оформление. Читается кодом и рендером, см. шапку. */
  --emp-w:160px; --hour-w:38px; --row-h:60px; --head-h:46px;

  /* РОЛИ ЭКРАНА → РОЛИ СИСТЕМЫ. Здесь нет ни одного значения: только соответствие. */
  --ink:var(--цвет-текст);
  --muted:var(--цвет-текст-3);
  --line:var(--цвет-граница);
  /* Две ступени «нерабочего» на диаграмме: полоса вне рабочего времени и полностью
     нерабочий день. Обе — фон ЗАПИСИ на шкале, поэтому вторая берётся из диаграммного
     же токена, а не из третьей поверхности: третьей поверхности в системе нет. */
  --off:var(--цвет-поверхность-утопленная);
  --off2:var(--цвет-запись-план);
  --accent:var(--цвет-акцент);
  /* Статусы работы. ⛔ Закон 2 системы: в плотной таблице остаётся ОДИН цвет —
     «горит»; остальное несут знак и текст. Поэтому «в работе» и «запланировано»
     сведены к одной роли акцента, а не к двум разным оттенкам. */
  --st-planned:var(--цвет-акцент-2); --st-progress:var(--цвет-акцент-2);
  --st-done:var(--цвет-успех-текст); --st-overdue:var(--цвет-тревога-текст);
  --load-ok:var(--цвет-успех-текст); --load-warn:var(--цвет-внимание); --load-over:var(--цвет-тревога-текст);
}
*{box-sizing:border-box}
/* ⛔ ПОЛ ЦЕЛИ НАЖАТИЯ ДЕЙСТВУЕТ НА ВСЕ ОРГАНЫ, А НЕ ТОЛЬКО НА НАЗВАННЫЕ ПОИМЁННО.
   Замер браузером по всем 19 вкладкам: кнопки, живущие в строках таблиц
   («Письмо…», «Прогноз…», «Срок…», удаление интервала в настройках), не имели
   НИ ОДНОГО правила и держались 21–23 px — ниже пола системы (24 px,
   WCAG 2.2 SC 2.5.8). Правило по элементу закрывает и те кнопки, которых ещё нет;
   у главных кнопок ниже стоит свой `max(…, 44px)`, и он сильнее по специфичности. */
button{min-height:var(--высота-органа);min-width:var(--цель-нажатия);font-family:var(--шрифт);font-size:var(--кегль-таблица)}
/* Заголовок без своего класса берёт ступень шкалы, а не умолчание браузера:
   `h3` по умолчанию 1.17em, то есть 17,55 px — седьмая ступень, которой в системе
   нет и которая на снимке неотличима от 19 px. Начертание — выделенное (600):
   700 разрешено ровно одному месту продукта, и это счётчик «горит». */
h1,h2,h3,h4{font-weight:var(--начертание-выделенное)}
h2{font-size:var(--кегль-заголовок)}
h3,h4{font-size:var(--кегль-основной)}
/* ⛔ НАЧЕРТАНИЙ ДВА, И ТРЕТЬЕ ЗАВОДИТ БРАУЗЕР, А НЕ МЫ. Умолчание `b`/`strong`
   и `th` — 700, а вложенное `bolder` даёт вовсе 900 (замер: 34 + 8 + 10 случаев
   по девятнадцати вкладкам). 700 в системе разрешено ровно одному месту —
   счётчику «горит» (`.deskcard .flame`), и класс сильнее правила по элементу,
   поэтому он остаётся 700 один. */
b,strong,th{font-weight:var(--начертание-выделенное)}
body{margin:0;font-family:var(--шрифт);font-size:var(--кегль-основной);
  line-height:var(--интерлиньяж-обычный);color:var(--ink);background:var(--цвет-фон-страницы)}
header.top{display:flex;justify-content:space-between;align-items:center;padding:var(--отступ-средний) var(--отступ-крупный);background:var(--accent);color:var(--цвет-текст-на-акценте);flex-wrap:wrap;gap:var(--отступ-малый)}
header.top h1{margin:0;font-size:var(--кегль-заголовок);font-weight:var(--начертание-выделенное)}
header.top p{margin:var(--отступ-микро) 0 0;font-size:var(--кегль-служебный);opacity:.85}
/* Цель нажатия главных органов — 44×44 (WCAG 2.2 SC 2.5.5). Пол системы
   (`--цель-нажатия`, 24 px) — это МИНИМУМ уровня AA, ниже которого не опускается
   ничто; вкладки, кнопки панели, диалога и формы входа доводятся до 44. Записано
   через `max()`, поэтому ручка плотности не может пробить ни тот, ни другой. */
/* ⛔ ВКЛАДКИ В ОДИН РЯД. Девятнадцать вкладок переносились на ВТОРОЙ ряд и съедали
   88 px из тех 900, что есть на экране; замер 24.08.2026 показал, что до первой
   строки диаграммы 668 px, и строк видно ЦЕЛИКОМ — ОДНА.

   ⚠ У селектора `.tabs` не было НИ ОДНОГО правила: запись «перенос заменён
   прокруткой» в карте проекта была ЛОЖНОЙ и снята 23.08.2026. Теперь прокрутка
   действительно есть, и это проверяется замером, а не утверждением.

   Цель нажатия не трогается: у кнопок остаётся 44 px (SC 2.5.5). Сжимать буквы
   ради числа строк здесь запрещено — правило «сжимать поля, а не буквы».

   ⚠ Это половина решения. Вторая — группировка вкладок: девятнадцать штук в один
   ряд не помещаются и требуют прокрутки, а какие экраны Заказчику нужны рядом,
   решает он. */
.tabs{display:flex;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;
      scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.tabs button{flex:0 0 auto;background:var(--цвет-акцент-2);color:var(--цвет-текст-на-акценте);border:0;padding:var(--отступ-малый) var(--отступ-средний);border-radius:var(--скругление);font-family:var(--шрифт);font-size:var(--кегль-таблица);font-weight:var(--начертание-выделенное);cursor:pointer;margin-left:var(--отступ-малый);min-height:max(var(--высота-органа),44px);min-width:max(var(--цель-нажатия),44px)}
.tabs button.active{background:var(--цвет-поверхность);color:var(--accent)}
/* ⛔ ЧЕРЕЗ ЭТОТ УЗЕЛ ПРОХОДИТ КАЖДЫЙ, а кольца фокуса у него не было — при том
   что оно объявлено у восьми других селекторов файла. Человек, идущий клавиатурой,
   не видел, где он находится, ровно в главном органе навигации (WCAG 2.2 SC 2.4.11).
   Токен `--цвет-фокус` уже проверен сторожем контраста на 3:1 в обеих темах. */
.tabs button:focus-visible{outline:var(--обводка-фокуса) solid var(--цвет-фокус);outline-offset:var(--отступ-обводки-фокуса)}
main{padding:var(--отступ-крупный)}
.view{display:none}
.view.active{display:block}
.hint{font-size:var(--кегль-служебный);color:var(--muted);margin-bottom:var(--отступ-малый)}
/* Панель инструментов руководителя (ФТ-3.2/3.8/3.10/3.12) */
.toolbar{display:flex;gap:var(--отступ-малый);align-items:center;flex-wrap:wrap;margin-bottom:var(--отступ-малый)}
.toolbar input[type=search]{min-width:230px;padding:0 var(--отступ-малый);min-height:var(--высота-органа);border:1px solid var(--цвет-граница-сильная);border-radius:var(--скругление);font-family:var(--шрифт);font-size:var(--кегль-таблица)}
.toolbar select{padding:0 var(--отступ-малый);min-height:var(--высота-органа);border:1px solid var(--цвет-граница-сильная);border-radius:var(--скругление);font-family:var(--шрифт);font-size:var(--кегль-таблица);background:var(--цвет-поверхность)}
.toolbar button{border:1px solid var(--цвет-граница-сильная);background:var(--цвет-поверхность);border-radius:var(--скругление);padding:0 var(--отступ-средний);font-family:var(--шрифт);font-size:var(--кегль-таблица);font-weight:var(--начертание-выделенное);cursor:pointer;color:var(--ink);min-height:max(var(--высота-органа),44px);min-width:max(var(--цель-нажатия),44px)}
.toolbar button:hover{background:var(--цвет-фон-наведение)}
.toolbar button:active{background:var(--цвет-фон-нажатие)}
.toolbar button:focus-visible{outline:var(--обводка-фокуса) solid var(--цвет-фокус);outline-offset:var(--отступ-обводки-фокуса)}
.toolbar button.primary{background:var(--accent);color:var(--цвет-текст-на-акценте);border-color:var(--accent);margin-left:auto}
.zoom{display:flex;border:1px solid var(--line);border-radius:var(--скругление);overflow:hidden}
.zoom button{border:0;border-radius:0;padding:0 var(--отступ-средний)}
.zoom button.active{background:var(--accent);color:var(--цвет-текст-на-акценте)}
/* Линия текущего времени */
.nowline{position:absolute;top:0;bottom:0;width:2px;background:var(--st-overdue);z-index:4;pointer-events:none}
.nowline::before{content:'';position:absolute;top:-1px;left:-3px;width:8px;height:8px;border-radius:50%;background:var(--st-overdue)}
/* Приглушение строк, не подходящих под поиск */
.row.dim{opacity:.28}
.bar.hit{outline:var(--обводка-фокуса) solid var(--цвет-внимание);outline-offset:1px}
@media print{
  /* ЛЕГЕНДА ОСТАЁТСЯ НА ЛИСТЕ. Требование ТЗ сформулировано буквально: «печатная
     форма периода С ЛЕГЕНДОЙ». Распечатанная диаграмма без расшифровки цветов —
     это набор разноцветных полос, который на совещании читать нечем. */
  header.top, .toolbar, .hint, .tester, .tabs { display:none !important; }
  .legend { display:flex !important; break-inside:avoid; margin-top:var(--отступ-малый); }
  .panel.scroll{overflow:visible !important}
  .view{display:none} .view.active{display:block}
  body{background:var(--цвет-фон-страницы)}
  .warnbox{break-inside:avoid}
  /* Шапка листа видна ТОЛЬКО на печати. */
  .printhead{display:block !important;break-inside:avoid;margin-bottom:var(--отступ-малый)}
  /* ⛔ СТРОКА ДИАГРАММЫ НЕ РВЁТСЯ МЕЖДУ ЛИСТАМИ: разорванная строка — это работа
     человека, половина которой на одном листе, половина на другом; на совещании
     её прочитают как две разные. */
  .row{break-inside:avoid}
}
/* На экране шапка листа не нужна — там всё это уже написано в интерфейсе. */
.printhead{display:none}

/* Долг литералов: строка ошибки диалога стояла ВОСЬМЬЮ одинаковыми инлайн-стилями.
   Копии расходятся при первой же правке, и часть диалогов сообщала бы об отказе
   другим красным. `min-height` обязателен: без неё появление ошибки ПОДПРЫГИВАЕТ
   диалогом, и человек теряет поле, в которое печатал. */
.dlgerr{color:var(--цвет-отказ);font-size:var(--кегль-подпись);min-height:16px}
.panel{background:var(--цвет-поверхность);border:1px solid var(--line);border-radius:var(--скругление-крупное);box-shadow:var(--тень-карточки)}
.scroll{overflow-x:auto}
.grid{position:relative}
/* header */
/* width:max-content обязателен: иначе строка равна ширине окна, уезжает при прокрутке
   и вместе с ней уезжает «липкая» колонка с именами (sticky работает внутри родителя). */
.head{display:flex;height:var(--head-h);border-bottom:2px solid var(--line);position:sticky;top:0;background:var(--цвет-поверхность);z-index:5;width:max-content;min-width:100%}
.head .corner{width:var(--emp-w);flex:0 0 var(--emp-w);border-right:2px solid var(--line);display:flex;align-items:center;padding:0 var(--отступ-средний);font-weight:var(--начертание-выделенное);color:var(--muted);font-size:var(--кегль-служебный);position:sticky;left:0;background:var(--цвет-поверхность);z-index:6}
.head .days{display:flex}
/* ⚠ ЦЕНТРИРОВАНИЕ ЗДЕСЬ ОСТАЁТСЯ, И ЭТО НЕ УПУЩЕНИЕ. `.dcol` — не числовая ячейка
   таблицы, а ПОДПИСЬ КОЛОНКИ ШКАЛЫ над отрезком времени: её место задаёт середина
   суток, а не разряды. Правило «числа вправо» действует там, где числа стоят
   столбцом друг под другом и сравниваются глазом. */
.dcol{border-right:1px solid var(--line);text-align:center;display:flex;flex-direction:column;justify-content:center}
.dcol.off{background:var(--off)}
.dcol .dow{font-size:var(--кегль-подпись);color:var(--muted);text-transform:capitalize}
.dcol .date{font-size:var(--кегль-служебный);font-weight:var(--начертание-выделенное);font-variant-numeric:tabular-nums}
.hours{display:flex;height:15px}
.hr{font-size:var(--кегль-подпись);color:var(--muted);border-right:1px dotted var(--line);padding-left:2px;overflow:hidden;font-variant-numeric:tabular-nums}
/* rows */
.row{display:flex;height:var(--row-h);border-bottom:1px solid var(--line);width:max-content;min-width:100%}
.row .emp{width:var(--emp-w);flex:0 0 var(--emp-w);border-right:2px solid var(--line);display:flex;flex-direction:column;justify-content:center;padding:0 var(--отступ-средний);background:var(--цвет-поверхность-утопленная);position:sticky;left:0;z-index:3}
.row .emp b{font-size:var(--кегль-таблица)}
.row .emp span{font-size:var(--кегль-подпись);color:var(--muted)}
.row.drop{background:var(--подсветка-акцент)}
.track{position:relative;flex:0 0 auto}
.bg{position:absolute;inset:0;z-index:0}
.band{position:absolute;top:0;bottom:0;background:var(--off)}
.band.full{background:var(--off2)}
.sep{position:absolute;top:0;bottom:0;width:1px;background:var(--line)}
.loadcell{position:absolute;top:0;bottom:0;z-index:0}
.loadcell.over{background:var(--подсветка-тревога)}
/* ФТ-3.4: отсутствие сотрудника (отпуск/больничный) — видно глазами, а не только в сводке */
/* Штриховка берётся ролью системы (`--штриховка-нет-данных`): «этих дней у человека
   нет» и «данных нет» на диаграмме читаются одним языком, и он объявлен один раз. */
.absent{position:absolute;top:0;bottom:0;z-index:1;
  background:var(--штриховка-нет-данных);
  border-left:1px solid var(--цвет-граница-сильная);border-right:1px solid var(--цвет-граница-сильная)}
.absent-lbl{position:absolute;z-index:2;font-size:var(--кегль-подпись);font-weight:var(--начертание-выделенное);color:var(--цвет-текст-2);top:50%;transform:translateY(-50%);
  padding:0 var(--отступ-малый);background:var(--цвет-поверхность);border-radius:var(--скругление);white-space:nowrap;pointer-events:none}
/* Диалог подтверждения переназначения (ФТ-5.7) */
/* Затемнение ЗА окном. Своей роли под полупрозрачную завесу в системе нет, поэтому
   она собирается из роли «самый тёмный текст»: первая строка — запасная для браузера
   без `color-mix` (там завеса просто непрозрачная, окно остаётся читаемым). */
/* ⛔ КЛАССЫ ДИАЛОГОВ НЕ БЫЛИ ОБЪЯВЛЕНЫ ВООБЩЕ — НАЙДЕНО СКЕПТИКОМ 24.08.2026.

   `.ovl`, `.dlg`, `.dlgbtns`, `.dlgrow` употребляются в двадцати местах разметки
   (диалог роли сотрудника, «Что мне можно», «Передать работу»), а правил у них
   не было ни одного: диалог рисовался обычным блоком В КОНЦЕ СТРАНИЦЫ — без
   подложки, без центрирования, без тени. Работало это ровно до показа Заказчику.

   ⚠ ОФОРМЛЕНИЕ ОДНО С `.modal`, а не второе рядом: два визуальных языка для одного
   и того же («окно поверх экрана») разошлись бы на первой правке токенов — здешний
   класс дефекта. Значения берутся из тех же переменных, что у `.modal`. */
.ovl{position:fixed;inset:0;background:color-mix(in srgb, var(--цвет-текст) 45%, transparent);
     display:flex;align-items:center;justify-content:center;z-index:50}
.dlg{background:var(--цвет-поверхность);border-radius:var(--скругление-крупное);
     max-width:560px;width:92%;padding:var(--отступ-крупный) var(--отступ-раздел);
     box-shadow:var(--тень-парения);max-height:86vh;overflow:auto}
.dlg h3{margin:0 0 var(--отступ-малый);font-size:var(--кегль-основной)}
.dlg label{display:block;margin:var(--отступ-малый) 0}
/* Ряд кнопок: цель нажатия держат сами кнопки (`button` уже на полу 44 px),
   здесь только раскладка. */
.dlgbtns,.dlgrow{display:flex;gap:var(--отступ-малый);justify-content:flex-end;
                 margin-top:var(--отступ-средний);flex-wrap:wrap}
.modal{position:fixed;inset:0;background:var(--цвет-текст);background:color-mix(in srgb, var(--цвет-текст) 45%, transparent);display:flex;align-items:center;justify-content:center;z-index:50}
.modal .box{background:var(--цвет-поверхность);border-radius:var(--скругление-крупное);max-width:520px;width:92%;padding:var(--отступ-крупный) var(--отступ-раздел);box-shadow:var(--тень-парения)}
.modal h3{margin:0 0 var(--отступ-малый);font-size:var(--кегль-основной)}
.modal .w{background:var(--подсветка-тревога);border-left:3px solid var(--st-overdue);padding:var(--отступ-малый) var(--отступ-средний);border-radius:0 var(--скругление) var(--скругление) 0;margin:var(--отступ-малый) 0;font-size:var(--кегль-таблица)}
.modal .w.warn{background:var(--подсветка-внимание);border-left-color:var(--load-warn)}
.modal .sug{color:var(--accent);font-size:var(--кегль-служебный);margin-top:var(--отступ-микро)}
.modal .alts{margin:var(--отступ-средний) 0 var(--отступ-микро);font-size:var(--кегль-таблица)}
.modal .alts b{font-size:var(--кегль-служебный);color:var(--muted);font-weight:var(--начертание-выделенное);display:block;margin-bottom:var(--отступ-микро)}
.modal .alt{display:inline-block;background:var(--подсветка-акцент);border:1px solid var(--цвет-акцент-2);color:var(--accent);border-radius:var(--скругление);padding:var(--отступ-микро) var(--отступ-средний);margin:0 var(--отступ-малый) var(--отступ-малый) 0;font-size:var(--кегль-служебный);cursor:pointer;min-height:var(--высота-органа)}
.modal .alt:hover{background:var(--цвет-фон-нажатие)}
/* «Загрузка неизвестна» обязана отличаться ГЛАЗОМ, а не только словами: одинаково
   выглядящие плашки читаются как один список равных кандидатов, и человек берёт первую. */
.modal .alt-unknown{background:var(--цвет-поверхность-утопленная);border-color:var(--цвет-граница);color:var(--muted)}
.modal .alt-unknown:hover{background:var(--цвет-фон-нажатие)}
.modal .acts{display:flex;gap:var(--отступ-малый);justify-content:flex-end;margin-top:var(--отступ-крупный)}
.modal button{border:0;border-radius:var(--скругление);padding:0 var(--отступ-крупный);font-family:var(--шрифт);font-weight:var(--начертание-выделенное);cursor:pointer;font-size:var(--кегль-таблица);min-height:max(var(--высота-органа),44px);min-width:max(var(--цель-нажатия),44px)}
.modal button:focus-visible{outline:var(--обводка-фокуса) solid var(--цвет-фокус);outline-offset:var(--отступ-обводки-фокуса)}
.modal .cancel{background:var(--цвет-поверхность-утопленная);color:var(--ink)}
.modal .ok{background:var(--accent);color:var(--цвет-текст-на-акценте)}
.loadchip{position:absolute;top:2px;font-size:var(--кегль-подпись);font-weight:var(--начертание-выделенное);padding:0 var(--отступ-микро);border-radius:var(--скругление);color:var(--цвет-текст-на-заливке);z-index:1;font-variant-numeric:tabular-nums}
.bar{position:absolute;height:32px;top:13px;border-radius:var(--скругление);color:var(--цвет-текст-на-заливке);font-size:var(--кегль-подпись);line-height:30px;padding:0 var(--отступ-малый);white-space:nowrap;overflow:hidden;z-index:2;box-shadow:var(--тень-карточки);cursor:grab}
.bar:active{cursor:grabbing}
.bar.cont{border-left-style:dashed;opacity:.92}
.bar .lbl{overflow:hidden;text-overflow:ellipsis;display:block}
.bar .doc{opacity:.8;font-size:var(--кегль-подпись)}
/* Сводка противоречий (ФТ-5.11) */
.warnbox{background:var(--цвет-поверхность);border:1px solid var(--line);border-left:4px solid var(--st-overdue);border-radius:var(--скругление-крупное);padding:var(--отступ-средний) var(--отступ-крупный);margin-bottom:var(--отступ-средний);box-shadow:var(--тень-карточки)}
.warnbox h3{margin:0 0 var(--отступ-малый);font-size:var(--кегль-таблица);display:flex;align-items:center;gap:var(--отступ-малый)}
.warnbox .cnt{background:var(--st-overdue);color:var(--цвет-текст-на-заливке);border-radius:var(--скругление);padding:0 var(--отступ-малый);font-size:var(--кегль-подпись);font-variant-numeric:tabular-nums}
.warnbox ul{margin:0;padding:0;list-style:none}
.warnbox li{padding:var(--отступ-малый) 0;border-top:1px solid var(--line);font-size:var(--кегль-таблица);display:flex;gap:var(--отступ-малый);align-items:flex-start}
.warnbox li:first-child{border-top:0}
.warnbox .sev{flex:0 0 auto;font-size:var(--кегль-подпись);font-weight:var(--начертание-выделенное);padding:0 var(--отступ-малый);border-radius:var(--скругление);color:var(--цвет-текст-на-заливке);margin-top:0}
.warnbox .sev.Critical{background:var(--st-overdue)}
.warnbox .sev.Warning{background:var(--load-warn)}
.warnbox .sev.Info{background:var(--muted)}
.warnbox .sug{color:var(--accent);font-size:var(--кегль-служебный)}
.warnbox .more{font-size:var(--кегль-служебный);color:var(--muted);padding-top:var(--отступ-малый)}
.bar.warned{outline:var(--обводка-фокуса) solid var(--st-overdue);outline-offset:1px}
.legend{display:flex;gap:var(--отступ-крупный);margin-top:var(--отступ-малый);font-size:var(--кегль-служебный);color:var(--muted);flex-wrap:wrap}
.legend i{display:inline-block;width:12px;height:12px;border-radius:var(--скругление);vertical-align:-2px;margin-right:var(--отступ-микро)}
/* tester */
.tester{margin-top:var(--отступ-крупный);padding:var(--отступ-средний) var(--отступ-крупный)}
.tester h2{margin:0 0 var(--отступ-малый);font-size:var(--кегль-основной)}
.row2{display:flex;gap:var(--отступ-средний);flex-wrap:wrap;align-items:flex-end}
label{display:flex;flex-direction:column;font-size:var(--кегль-служебный);color:var(--muted);gap:var(--отступ-микро)}
input,select{font-family:var(--шрифт);font-size:var(--кегль-таблица);padding:0 var(--отступ-малый);min-height:var(--высота-органа);border:1px solid var(--цвет-граница-сильная);border-radius:var(--скругление);background:var(--цвет-поверхность);color:var(--ink)}
input:focus-visible,select:focus-visible{outline:var(--обводка-фокуса) solid var(--цвет-фокус);outline-offset:var(--отступ-обводки-фокуса)}
button#tGo,button.primary{background:var(--accent);color:var(--цвет-текст-на-акценте);border:0;border-radius:var(--скругление);padding:0 var(--отступ-средний);font-family:var(--шрифт);font-size:var(--кегль-таблица);font-weight:var(--начертание-выделенное);cursor:pointer;min-height:max(var(--высота-органа),44px);min-width:max(var(--цель-нажатия),44px)}
.out{margin-top:var(--отступ-средний);font-size:var(--кегль-таблица)}
.out b{color:var(--accent)}
/* executor */
.exlist{margin-top:var(--отступ-средний)}
.exday{margin-bottom:var(--отступ-средний)}
.exday h3{margin:0 0 var(--отступ-малый);font-size:var(--кегль-таблица);color:var(--accent)}
.extask{display:flex;align-items:center;gap:var(--отступ-малый);background:var(--цвет-поверхность);border:1px solid var(--line);border-left:4px solid var(--st-planned);border-radius:var(--скругление-крупное);padding:var(--отступ-малый) var(--отступ-средний);margin-bottom:var(--отступ-малый)}
.extask .t{font-size:var(--кегль-служебный);color:var(--muted);width:120px;flex:0 0 120px;font-variant-numeric:tabular-nums}
.extask .ti{font-weight:var(--начертание-выделенное);flex:1}
.extask .doc{font-size:var(--кегль-подпись);color:var(--muted)}
.extask .badge{font-size:var(--кегль-подпись);font-weight:var(--начертание-выделенное);color:var(--цвет-текст-на-заливке);padding:0 var(--отступ-малый);border-radius:var(--скругление)}
.exempty{color:var(--muted);font-size:var(--кегль-таблица);padding:var(--отступ-раздел)}
/* ФТ-4.2/4.3: отметки исполнителя */
.exacts{display:flex;gap:var(--отступ-малый);flex:0 0 auto}
.ex-btn{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--цвет-граница-сильная);background:var(--цвет-поверхность);border-radius:var(--скругление);padding:0 var(--отступ-средний);font-family:var(--шрифт);font-size:var(--кегль-служебный);font-weight:var(--начертание-выделенное);cursor:pointer;color:var(--ink);min-height:max(var(--высота-органа),44px);min-width:max(var(--цель-нажатия),44px)}
.ex-btn:hover{background:var(--цвет-фон-наведение)}
.ex-btn:focus-visible{outline:var(--обводка-фокуса) solid var(--цвет-фокус);outline-offset:var(--отступ-обводки-фокуса)}
.ex-btn.take{border-color:var(--цвет-акцент-2);color:var(--accent)}
.ex-btn.done{border-color:var(--цвет-успех);color:var(--цвет-успех-текст)}
.ex-btn.late{border-color:var(--цвет-граница-отказа);color:var(--цвет-отказ)}
.ex-btn:disabled{opacity:var(--непрозрачность-отключено);cursor:var(--курсор-отключено)}
/* ФТ-8.1/8.2: понятное состояние ошибки загрузки */
.loaderr{padding:var(--отступ-раздел);text-align:center;color:var(--muted);font-size:var(--кегль-таблица);background:var(--цвет-поверхность);border-radius:var(--скругление-крупное)}
.loaderr b{display:block;color:var(--ink);font-size:var(--кегль-основной);margin-bottom:var(--отступ-микро)}
.loaderr button{margin-top:var(--отступ-средний)}
/* pointer-events:none — плашка информационная и НЕ перехватывает клики: у нижнего края экрана она накрывала органы на 3,5 с (обход 06.09.2026). */
.toast{position:fixed;left:50%;bottom:var(--отступ-раздел);transform:translateX(-50%);pointer-events:none;background:var(--ink);color:var(--цвет-текст-на-заливке);
  padding:var(--отступ-малый) var(--отступ-крупный);border-radius:var(--скругление-крупное);font-size:var(--кегль-таблица);z-index:60;box-shadow:var(--тень-парения)}
/* Журнал изменений (ФТ-7.4) */
.audit{margin-top:var(--отступ-средний)}
.audit table{width:100%;border-collapse:collapse;font-size:var(--кегль-таблица);background:var(--цвет-поверхность)}
.audit th{background:var(--accent);color:var(--цвет-текст-на-акценте);text-align:left;padding:var(--поле-клетки-по-вертикали) var(--поле-клетки-по-горизонтали);font-weight:var(--начертание-выделенное)}
.audit td{padding:var(--поле-клетки-по-вертикали) var(--поле-клетки-по-горизонтали);border-bottom:1px solid var(--line)}
.audit tr:nth-child(even) td{background:var(--цвет-поверхность-утопленная)}
.audit .chg{color:var(--muted)}
.audit .chg b{color:var(--ink)}
/* admin form */
.form{padding:var(--отступ-крупный);max-width:760px}
.form h2{margin:0 0 var(--отступ-микро);font-size:var(--кегль-основной)}
.form h3{margin:var(--отступ-крупный) 0 var(--отступ-малый);font-size:var(--кегль-таблица);color:var(--accent);border-top:1px solid var(--line);padding-top:var(--отступ-средний)}
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--отступ-средний)}
.form .ivrow{display:flex;gap:var(--отступ-малый);align-items:flex-end;margin-bottom:var(--отступ-малый)}
.form textarea{font-family:var(--шрифт);font-size:var(--кегль-таблица);padding:var(--отступ-малый);border:1px solid var(--цвет-граница-сильная);border-radius:var(--скругление);min-height:70px;width:100%;color:var(--ink);background:var(--цвет-поверхность)}
.form .actions{margin-top:var(--отступ-крупный);display:flex;gap:var(--отступ-малый);align-items:center}
.form .saved{color:var(--load-ok);font-size:var(--кегль-таблица);font-weight:var(--начертание-выделенное)}
.chk{flex-direction:row;align-items:center;gap:var(--отступ-малый)}

/* ---------- НЕДЕЛЬНЫЙ ТАБЕЛЬ ФАКТА ---------- */
/* ⛔ ЧИСЛА — ВПРАВО, И ШАПКА ВМЕСТЕ С НИМИ. Табличные цифры на центрированной клетке
   бесполезны: разряды всё равно не выстраиваются, и «7,5» под «10» читается как
   одно число. Слева остаётся только колонка названия (`.tsname`). */
.tsheet{margin:var(--отступ-крупный) 0 var(--отступ-малый)}
.tsheet h3{margin:0 0 var(--отступ-малый);font-size:var(--кегль-основной)}
.tsheet table{border-collapse:collapse;width:100%;font-size:var(--кегль-таблица)}
.tsheet th,.tsheet td{border:1px solid var(--line);padding:var(--поле-клетки-по-вертикали) var(--поле-клетки-по-горизонтали);text-align:right;font-variant-numeric:tabular-nums}
.tsheet th{background:var(--цвет-поверхность-утопленная);font-weight:var(--начертание-выделенное)}
/* Ячейка названия недельной сетки. Прежде вся ячейка была nowrap + overflow:hidden, и кнопка
   «Предложить план» после длинного названия обрезалась справа: человеку доставался её огрызок,
   а обход (06.09.2026) — «td.tsname intercepts pointer events» на центре кнопки.
   Теперь внутри — flex-обёртка `.tsn`: НАЗВАНИЕ ужимается многоточием (не ниже 120 px), признаки
   и органы остаются целыми на той же строке; на вторую строку они уходят ТОЛЬКО когда не помещаются
   сами по себе — строка сетки не растёт у каждой работы с признаком (ограничение VDI 1366×768,
   см. `.tsheet td.fact` ниже). Обёртка — div, а не сам td: td с display:flex перестаёт быть ячейкой. */
.tsname{text-align:left!important;max-width:460px;overflow:hidden}
.tsname .tsn{display:flex;flex-wrap:wrap;align-items:center;gap:var(--отступ-микро) var(--отступ-малый)}
.tsname .tlink{flex:1 1 auto;min-width:120px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* ⛔ САМАЯ НАЖИМАЕМАЯ ЦЕЛЬ ПРОДУКТА — И ОНА БЫЛА НИЖЕ ПОЛА.
   Здесь стояло `min-height:var(--высота-органа)` = 32 px при обычной плотности,
   а WCAG 2.2 SC 2.5.5 требует 44. Соседние клетки не отличаются ничем, кроме
   выходных, — то есть промах мимо строки или дня уводит часы в ЧУЖОЙ день МОЛЧА,
   и они попадают в табель как свидетельство человека.

   ⚠ `display:block; width:100%` — цель обязана занимать клетку целиком: поле
   в 46 px посреди столбца оставляло вокруг себя мёртвую зону, по которой человек
   и попадал. Минимальную ширину столбца держит `td.fact`, чтобы узкие дни
   не схлопывались.

   ⚠ Кегль НЕ трогаем: аудитория — проектировщики 50+ на VDI 1366×768, и правило
   продукта «сжимать поля, а не буквы» здесь действует в обратную сторону. */
.tscell{width:100%;display:block;border:0;text-align:right;font-size:var(--кегль-таблица);padding:0 var(--отступ-микро);background:transparent;min-height:max(var(--высота-органа),44px);font-variant-numeric:tabular-nums}
/* Вертикальное поле у ячейки ВВОДА снято: иначе строка вырастает на величину
   поля сверх сорока четырёх пикселей, и таблица недели перестаёт помещаться
   на экран — цель нажатия была бы куплена ценой обзора. */
.tsheet td.fact{padding-top:0;padding-bottom:0;min-width:46px}

/* СЕГОДНЯШНИЙ СТОЛБЕЦ. Отмечается фоном И точкой: только цветом — значит невидимо
   для дальтоников (8 % мужчин) и на чёрно-белой печати листа, который кладут
   на стол совещания. */
.tsheet th.today{background:var(--цвет-поверхность-утопленная);
  box-shadow:inset 0 -3px 0 var(--цвет-акцент)}
.tsheet th.todaydot,.todaydot{color:var(--цвет-акцент);margin-left:var(--отступ-микро)}

/* НЕЗАКРЫТЫЙ ДЕНЬ — приглушённая метка, НЕ тревога: это подсказка, а не долг.
   Красный здесь превратил бы добровольную отметку в обвинение, а отмечает
   именно тот, кого обвинили бы. */
.tsheet th.unmarked{border-bottom:2px dashed var(--цвет-текст-3)}

/* Подсказка о незакрытых днях и переходы к ним. */
.tsmissing{margin:var(--отступ-малый) 0;padding:var(--отступ-малый) var(--отступ-средний);
  background:var(--цвет-поверхность-утопленная);border-radius:var(--скругление);
  font-size:var(--кегль-таблица);color:var(--цвет-текст-2)}
.daylinks{margin-top:var(--отступ-микро);color:var(--цвет-текст-3);font-size:var(--кегль-подпись)}
/* Цель нажатия не ниже пола WCAG 2.2 SC 2.5.5: имя дня — орган, а не текст. */
.daylink{min-height:max(var(--высота-органа),44px);min-width:max(var(--цель-нажатия),44px);
  background:var(--цвет-поверхность);border:1px solid var(--цвет-граница);
  border-radius:var(--скругление);color:var(--accent);cursor:pointer;
  font-family:var(--шрифт);font-size:var(--кегль-таблица);padding:0 var(--отступ-малый);
  margin-right:var(--отступ-микро)}
/* Название работы как орган: выглядит текстом (в таблице кнопка-«кирпич» ломала бы
   строку), но ведёт себя кнопкой — фокус, клавиатура, цель нажатия по высоте строки. */
/* Действия в строке «Стола». Цель нажатия — пол WCAG 2.2 SC 2.5.5: по этим
   кнопкам работают весь день, а промах в таблице уводит на соседнюю работу. */
/* ═══ ГРАФИКИ ═══
   Своя палитра здесь не заводится: цвета берутся токенами и проверены сторожем
   контраста. Анимации нет вовсе — люди работают на VDI, и движение там стоит
   дороже, чем на своей машине (в контуре ноль @keyframes, и это достижение). */
.chart-box{margin:var(--отступ-средний) 0;padding:var(--отступ-малый) 0}
.chart-title{font-size:var(--кегль-таблица);font-weight:var(--начертание-выделенное);
  color:var(--цвет-текст-2);margin-bottom:var(--отступ-микро)}
.chart{width:100%;height:auto;max-width:100%;display:block}
/* Подпись о полноте — РЯДОМ с графиком, а не в сноске: график без неё читается
   как «вот как обстоят дела», хотя правда бывает «у двух месяцев из двенадцати». */
.chart-cov{font-size:var(--кегль-подпись);color:var(--цвет-текст-3);margin-top:var(--отступ-микро)}
.chart-empty{padding:var(--отступ-средний);background:var(--цвет-поверхность-утопленная);
  border-radius:var(--скругление);color:var(--цвет-текст-2);font-size:var(--кегль-таблица)}
/* Числа графика — доступная замена картинке: экранный диктор чисел из SVG
   не берёт, а на чёрно-белой печати штриховка и цвет сливаются. */
.chart-data{margin-top:var(--отступ-микро);font-size:var(--кегль-подпись)}
.chart-data summary{cursor:pointer;color:var(--accent);min-height:max(var(--высота-органа),44px);
  display:flex;align-items:center}
.chart-data table{border-collapse:collapse;margin-top:var(--отступ-микро)}
.chart-data td,.chart-data th{border:1px solid var(--цвет-граница);padding:2px var(--отступ-малый)}
/* Групповой график: ряды различаются ФОРМОЙ (штриховка, контур), поэтому легенда
   обязательна — восемь форм без подписей это восемь загадок. */
.chart-legend{display:flex;flex-wrap:wrap;gap:var(--отступ-малый);
  font-size:var(--кегль-подпись);color:var(--цвет-текст-2);margin:var(--отступ-микро) 0}
.chart-legend-item{display:inline-flex;align-items:center;gap:var(--отступ-микро)}
.chart-swatch{width:12px;height:12px;flex:none}
/* Полотно, выросшее под тонкие столбики, ПРОКРУЧИВАЕТСЯ, а не сжимается: сжатое
   до нечитаемости оно врёт видом исправного графика. */
.chart-scroll{overflow-x:auto;max-width:100%}
.chart-scroll .chart{width:auto;max-width:none}
@media print{.chart-legend{display:flex}.chart-scroll{overflow:visible}.chart-scroll .chart{width:100%}}

.dkacts{white-space:nowrap}
.dkacts button{min-height:max(var(--высота-органа),44px);min-width:max(var(--цель-нажатия),44px);
  background:var(--цвет-поверхность);border:1px solid var(--цвет-граница);
  border-radius:var(--скругление);color:var(--accent);cursor:pointer;
  font-family:var(--шрифт);font-size:var(--кегль-подпись);padding:0 var(--отступ-малый);
  margin-right:var(--отступ-микро)}
.dkacts button:hover{background:var(--цвет-поверхность-утопленная)}
.dkacts button:focus-visible{outline:var(--обводка-фокуса) solid var(--цвет-фокус);outline-offset:var(--отступ-обводки-фокуса)}

.tlink{background:none;border:0;padding:0;margin:0;text-align:left;cursor:pointer;
  color:var(--accent);font-family:var(--шрифт);font-size:var(--кегль-таблица);
  font-weight:inherit;min-height:max(var(--высота-органа),44px)}
.tlink:hover{text-decoration:underline}
.tlink:focus-visible{outline:var(--обводка-фокуса) solid var(--цвет-фокус);outline-offset:var(--отступ-обводки-фокуса)}
.daylink:focus-visible{outline:var(--обводка-фокуса) solid var(--цвет-фокус);outline-offset:var(--отступ-обводки-фокуса)}
.tscell:focus{outline:var(--обводка-фокуса) solid var(--цвет-фокус);border-radius:var(--скругление);background:var(--цвет-поверхность)}
.tscell::placeholder{color:var(--цвет-текст-отключено)}
.tssum{font-weight:var(--начертание-выделенное)}
.tsday{font-weight:var(--начертание-выделенное);background:var(--цвет-поверхность-утопленная)}
/* Больше 12 часов за день — почти наверняка опечатка, а не подвиг. Подсвечиваем,
   но НЕ запрещаем: бывают авралы, и запрет заставил бы человека промолчать. */
.tsday.over{color:var(--st-overdue)}
.tshint{margin-top:var(--отступ-малый);font-size:var(--кегль-подпись);color:var(--muted)}

/* ---------- СИГНАЛЫ ПО СРОКАМ ---------- */
.sigbox{margin:var(--отступ-малый) 0;padding:var(--отступ-малый);background:var(--подсветка-внимание);border:1px solid var(--цвет-внимание);border-radius:var(--скругление)}
.sighead{font-weight:var(--начертание-выделенное);margin-bottom:var(--отступ-микро)}
.sig-crit{color:var(--цвет-тревога-текст)}
.sig-warn{color:var(--цвет-внимание)}
.sig-info{color:var(--muted)}
.sigmore{color:var(--muted);font-size:var(--кегль-подпись);margin-top:var(--отступ-микро)}

/* ---------- БЛОК «ВЧЕРА» У ИСПОЛНИТЕЛЯ ---------- */
/* Стоит первым на экране и не уходит, пока день не закрыт: отметка должна быть
   на пути человека, а не в отдельном разделе. */
.yest{margin:var(--отступ-малый) 0;padding:var(--отступ-малый) var(--отступ-средний);border:1px solid var(--line);border-radius:var(--скругление);background:var(--цвет-поверхность-утопленная)}
.yest.done{background:var(--подсветка-успех);border-color:var(--цвет-успех);color:var(--цвет-успех-текст);padding:var(--отступ-малый) var(--отступ-средний)}
.ytitle{font-weight:var(--начертание-выделенное);margin-bottom:var(--отступ-микро)}
.yplan{color:var(--цвет-текст-2);font-size:var(--кегль-таблица);margin-bottom:var(--отступ-малый)}
.yacts{display:flex;gap:var(--отступ-малый);flex-wrap:wrap}
.ybtn{padding:0 var(--отступ-средний);border:1px solid var(--цвет-граница-сильная);background:var(--цвет-поверхность);border-radius:var(--скругление);cursor:pointer;font-family:var(--шрифт);font-size:var(--кегль-таблица);color:var(--ink);min-height:max(var(--высота-органа),44px);min-width:max(var(--цель-нажатия),44px)}
.ybtn.main{background:var(--accent);color:var(--цвет-текст-на-акценте);border-color:var(--accent);font-weight:var(--начертание-выделенное)}
.ybtn:hover{background:var(--цвет-фон-наведение)}
.ybtn.main:hover{background:var(--цвет-акцент-2);border-color:var(--цвет-акцент-2)}
.ybtn:focus-visible,.ylink:focus-visible{outline:var(--обводка-фокуса) solid var(--цвет-фокус);outline-offset:var(--отступ-обводки-фокуса)}
.ylink{background:none;border:0;color:var(--цвет-успех-текст);text-decoration:underline;cursor:pointer;font-size:var(--кегль-служебный)}

/* ---------- Вход ---------- */
/* Наложение поверх всего: пока человек не вошёл, он не должен видеть даже очертания
   чужой загрузки — заголовки заданий института это тоже данные. */
#loginOverlay{position:fixed;inset:0;background:var(--цвет-текст);display:flex;align-items:center;
  justify-content:center;z-index:9999}
#loginOverlay .box{background:var(--цвет-поверхность);border-radius:var(--скругление-крупное);padding:var(--отступ-раздел) var(--отступ-экран);width:340px;
  box-shadow:var(--тень-парения)}
#loginOverlay h2{margin:0 0 var(--отступ-микро);font-size:var(--кегль-заголовок)}
#loginOverlay .sub{color:var(--muted);font-size:var(--кегль-таблица);margin-bottom:var(--отступ-крупный)}
#loginOverlay label{display:block;font-size:var(--кегль-служебный);color:var(--цвет-текст-2);margin:var(--отступ-малый) 0 var(--отступ-микро)}
#loginOverlay input{width:100%;box-sizing:border-box;padding:0 var(--отступ-малый);min-height:var(--высота-органа);border:1px solid var(--цвет-граница-сильная);
  border-radius:var(--скругление);font-size:var(--кегль-основной)}
#loginOverlay button{width:100%;margin-top:var(--отступ-крупный);padding:0 var(--отступ-средний);border:0;border-radius:var(--скругление);
  background:var(--accent);color:var(--цвет-текст-на-акценте);font-family:var(--шрифт);font-size:var(--кегль-основной);cursor:pointer;min-height:max(var(--высота-органа),44px);min-width:max(var(--цель-нажатия),44px)}
#loginOverlay button:disabled{opacity:var(--непрозрачность-отключено);cursor:var(--курсор-отключено)}
#loginErr{color:var(--цвет-отказ);font-size:var(--кегль-таблица);margin-top:var(--отступ-средний);min-height:18px}
#whoami{margin-left:auto;font-size:var(--кегль-служебный);color:var(--цвет-текст-на-акценте);display:flex;align-items:center;gap:var(--отступ-малый)}
#whoami a{color:var(--цвет-текст-на-акценте);cursor:pointer;text-decoration:underline}

/* Полоса состояния источника данных. Показывается ТОЛЬКО когда что-то не так:
   постоянно висящая зелёная плашка «всё хорошо» перестаёт читаться через день,
   и вместе с ней перестаёт читаться красная. */
/* РЕЖИМ ПРОСМОТРА (ФТ-14.6). Заметнее строки состояния источника: это не сообщение
   о данных, а объяснение того, почему на экране нет половины кнопок. */
#roBanner{display:none;padding:var(--отступ-малый) var(--отступ-крупный);font-size:var(--кегль-таблица);line-height:var(--интерлиньяж-обычный);
  border-bottom:2px solid var(--цвет-внимание);background:var(--подсветка-внимание);color:var(--цвет-внимание)}
#roBanner.on{display:block}
#roBanner b{font-weight:var(--начертание-выделенное)}
#srcBanner{display:none;padding:var(--отступ-малый) var(--отступ-крупный);font-size:var(--кегль-таблица);border-bottom:1px solid}
#srcBanner.bad{display:block;background:var(--подсветка-тревога);border-color:var(--цвет-тревога-текст);color:var(--цвет-тревога-текст)}
#srcBanner.warn{display:block;background:var(--подсветка-внимание);border-color:var(--цвет-внимание);color:var(--цвет-внимание)}
#srcBanner b{font-weight:var(--начертание-выделенное)}

/* ШТАМП КОНТУРА (пакет 5.4). ⛔ Гейт 06.09.2026: класс «bad» тут ставился без единого
   правила — самые опасные состояния (УЧЕБНЫЙ, «НЕ НАЗНАЧЕН») рисовались обычным текстом,
   а менее опасный ТЕСТ — плашкой. Правила по образцу #srcBanner, оба класса названы. */
#contourBanner{display:none;padding:var(--отступ-малый) var(--отступ-крупный);font-size:var(--кегль-таблица);border-bottom:1px solid;font-weight:var(--начертание-выделенное)}
#contourBanner.bad{display:block;background:var(--подсветка-тревога);border-color:var(--цвет-тревога-текст);color:var(--цвет-тревога-текст)}
#contourBanner.warn{display:block;background:var(--подсветка-внимание);border-color:var(--цвет-внимание);color:var(--цвет-внимание)}

/* Роль в шапке. Видна всегда: неверная роль без подписи не диагностируется. */
#whoami .role{background:var(--цвет-акцент-2);padding:0 var(--отступ-малый);border-radius:var(--скругление);font-size:var(--кегль-подпись)}

/* ---------- Реестр проектов ---------- */
#prTable table{width:100%;border-collapse:collapse;font-size:var(--кегль-таблица)}
#prTable th{text-align:left;padding:var(--поле-клетки-по-вертикали) var(--поле-клетки-по-горизонтали);border-bottom:2px solid var(--line);color:var(--цвет-текст-2);
  font-weight:var(--начертание-выделенное);white-space:nowrap;position:sticky;top:0;background:var(--цвет-поверхность)}
#prTable td{padding:var(--поле-клетки-по-вертикали) var(--поле-клетки-по-горизонтали);border-bottom:1px solid var(--line);vertical-align:top}
#prTable tr:hover td{background:var(--цвет-фон-наведение)}
#prTable .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
#prTable .code{font-weight:var(--начертание-выделенное);white-space:nowrap}
/* Светофор из ЧИСЛА тревожности, а не из трёх зашитых градаций: девятнадцать статусов
   оплаты между собой тремя цветами не упорядочить. */
#prTable .st{display:inline-block;padding:0 var(--отступ-малый);border-radius:var(--скругление);font-size:var(--кегль-служебный);white-space:nowrap}
#prTable .st.ok{background:var(--подсветка-успех);color:var(--цвет-успех-текст)}
#prTable .st.low{background:var(--подсветка-внимание);color:var(--цвет-внимание)}
#prTable .st.mid{background:var(--подсветка-внимание);color:var(--цвет-внимание)}
#prTable .st.high{background:var(--подсветка-тревога);color:var(--цвет-тревога-текст)}
#prTable .st.nodata{background:var(--цвет-поверхность-утопленная);color:var(--цвет-текст-2)}
#prTable .late{color:var(--st-overdue);font-weight:var(--начертание-выделенное)}
#prTable .soon{color:var(--цвет-внимание)}

/* Состояние производственного календаря. Те же цвета, что у баннера источника:
   человек уже знает, что жёлтая полоса — это «работает, но чего-то не знаем»,
   а красная — «данным верить нельзя». Заводить третий язык цветов незачем. */
#calBanner{display:none;margin:0 0 var(--отступ-малый);padding:var(--отступ-малый) var(--отступ-средний);font-size:var(--кегль-таблица);border-radius:var(--скругление-крупное);border:1px solid}
#calBanner.warn{display:block;background:var(--подсветка-внимание);border-color:var(--цвет-внимание);color:var(--цвет-внимание)}
#calBanner.bad{display:block;background:var(--подсветка-тревога);border-color:var(--цвет-тревога-текст);color:var(--цвет-тревога-текст)}

/* Личный вид диаграммы (13.09.2026): оси состава, порядок строк, подсветка объекта.
   Фраза оси и плашка подсветки — теми же цветами, что баннер календаря: «работает,
   но чего-то не знаем» уже жёлтое, третьего языка цветов не заводим. */
.viewflag{display:inline-flex;flex-direction:row;align-items:center;gap:var(--отступ-микро);white-space:nowrap;font-size:var(--кегль-таблица);min-height:var(--высота-органа)}
.viewflag input{margin:0}
#viewScopeBox.warn,#focusBox.warn{display:block;margin:0 0 var(--отступ-малый);padding:var(--отступ-малый) var(--отступ-средний);font-size:var(--кегль-таблица);border-radius:var(--скругление-крупное);border:1px solid var(--цвет-внимание);background:var(--подсветка-внимание);color:var(--цвет-внимание)}
#focusBox.focusbox{margin:0 0 var(--отступ-малый);padding:var(--отступ-малый) var(--отступ-средний);font-size:var(--кегль-таблица);border-radius:var(--скругление-крупное);border:1px solid var(--line);background:var(--цвет-поверхность-утопленная);color:var(--цвет-текст-2)}
#focusBox[hidden]{display:none}

/* ФТ-3.2, месячная шкала: шапка выше на строку подписи недели; столбец — день. */
.head.month{height:calc(var(--head-h) + var(--отступ-средний))}
.dcol .wkc{height:1.2em;font-size:var(--кегль-подпись);color:var(--цвет-текст-2);white-space:nowrap;overflow:visible;text-align:left;padding-left:var(--отступ-микро);position:relative;z-index:1}
.dcol.wk{border-left:2px solid var(--line)}

/* ⛔ ПРАЗДНИКИ — СТРОКА, КОТОРАЯ ПЕЧАТАЕТСЯ ВСЕГДА.
   Спокойный вариант намеренно НЕ жёлтый: «праздники заведены, записей 14» — это
   справка, и красить её тревожным цветом значит приучить не читать жёлтое.
   Измеренный НОЛЬ праздников красится как предупреждение: он означает, что
   1 января уйдёт в расчёт загрузки рабочим днём. */
#calHolidays{display:none;margin:0 0 var(--отступ-малый);padding:var(--отступ-малый) var(--отступ-средний);font-size:var(--кегль-таблица);border-radius:var(--скругление-крупное);border:1px solid transparent}
#calHolidays.hint{display:block;color:var(--muted);padding:0;border:0;margin:0 0 var(--отступ-малый)}
#calHolidays.warn{display:block;background:var(--подсветка-внимание);border-color:var(--цвет-внимание);color:var(--цвет-внимание)}

/* Версия сборки. Мелко и неярко: читают её редко, но обязаны находить сразу
   и на любом экране — вкладка «Настройки» открыта не всем. */
.buildstamp{font-size:var(--кегль-подпись);color:var(--muted);padding:0 var(--отступ-крупный) var(--отступ-малый);user-select:all}

/* Строка «НЕ РАСПРЕДЕЛЕНО»: работа, которую никто не делает. Выделена рамкой,
   а не цветом полос — сами полосы должны читаться так же, как у людей. */
.row.orphan{background:var(--подсветка-внимание);border-left:3px solid var(--цвет-внимание)}
.row.orphan .emp b{color:var(--цвет-внимание)}

/* ================== ОЖИДАНИЕ ==================
   Отдельный ВИД полосы, а не ещё один цвет статуса: «стоит, потому что ждём
   смежника» — это причина простоя, а не состояние задания, и путать их нельзя.
   Штриховка выбрана намеренно: она читается как «время идёт, а работы нет»
   тем же языком, что и штриховка отсутствия сотрудника — и берётся ТЕМ ЖЕ
   токеном (`--штриховка-нет-данных`), чтобы этот язык был объявлен один раз. */
.bar.wait{
  border:1.5px solid var(--цвет-внимание);
  background:var(--штриховка-нет-данных), var(--подсветка-внимание) !important;
  box-shadow:none;
}
.bar.wait .lbl{color:var(--цвет-внимание);font-weight:var(--начертание-выделенное)}

/* «0 (РАБОТЫ НЕТ)» — МАРКЕР, А НЕ ПОЛОСА.
   Длительности у такой работы нет, поэтому ядро отдаёт полосу нулевой ширины: выдумывать
   часы там нельзя. Но исчезнуть с диаграммы она не имеет права — это ОСОЗНАННЫЙ ответ
   человека и самое частое состояние базы Заказчика (634 работы из 781). Маркер намеренно
   узкий и без заливки: он говорит «здесь работа есть, а часов у неё нет», и спутать его
   с обычной полосой невозможно. Подпись выносится ВПРАВО, иначе шесть пикселей её съедают. */
.bar.zero{
  background:var(--цвет-поверхность) !important;
  border:1.5px solid var(--muted);
  border-radius:var(--скругление);
  box-shadow:none;
  overflow:visible;
  padding:0;
}
.bar.zero .lbl{color:var(--muted);position:absolute;left:9px;top:0;overflow:visible}

.waitsum{padding:var(--отступ-средний);margin:0 0 var(--отступ-малый)}
.waitsum h3{margin:0 0 var(--отступ-малый);font-size:var(--кегль-основной)}
.waitsum table{border-collapse:collapse;width:100%;font-size:var(--кегль-таблица)}
.waitsum th{text-align:left;font-size:var(--кегль-подпись);color:var(--muted);font-weight:var(--начертание-выделенное);padding:0 var(--отступ-малый) var(--отступ-малый) 0;border-bottom:1px solid var(--line)}
.waitsum td{padding:var(--отступ-малый) var(--отступ-малый) var(--отступ-малый) 0;border-bottom:1px solid var(--line);vertical-align:top}
.waitsum .holder{display:inline-block;background:var(--подсветка-внимание);border:1px solid var(--цвет-внимание);color:var(--цвет-внимание);border-radius:var(--скругление);padding:0 var(--отступ-малый);margin:0 var(--отступ-микро) var(--отступ-микро) 0;font-size:var(--кегль-служебный)}
/* «Часов 0» при десяти стоящих работах — это «мы не знаем», а не «почти ничего
   не стоит». Число работ без часов стоит РЯДОМ с часами, а не в подсказке. */
.waitsum .nohours{font-size:var(--кегль-подпись);color:var(--цвет-внимание);background:var(--подсветка-внимание);border-radius:var(--скругление);padding:0 var(--отступ-малый);margin-left:var(--отступ-микро)}
/* ⛔ ЧИСЛА ЭТОЙ ТАБЛИЦЫ АДРЕСУЮТСЯ ПОЛОЖЕНИЕМ, А НЕ КЛАССОМ. Клетки «Часов»,
   «Работ» и «Ещё стоят» приходят из app.js без класса, а JS в эту волну не
   трогается. Слепое правило `.waitsum td` задело бы «Подразделение» (текст)
   и «Кто держит» (плашки), поэтому названы ровно столбцы 2–4 — и шапка вместе
   с ними, иначе подпись слева над числом справа читается как два столбца. */
.waitsum th:nth-child(n+2):nth-child(-n+4),
.waitsum td:nth-child(n+2):nth-child(-n+4){text-align:right;font-variant-numeric:tabular-nums}

/* ⛔ «ПОЧЕМУ СТОИМ»: столбцы «Раб. дн.» и «Кал. дн.» — числа, и им положено
   стоять справа табличными цифрами. Клетки идут без класса, поэтому названы
   положением и ТОЛЬКО внутри своего блока: соседние столбцы этой же таблицы —
   объект, работа, сторона, причина и срок, то есть текст. */
#ssTable th:nth-child(5),#ssTable th:nth-child(6),
#ssTable td:nth-child(5),#ssTable td:nth-child(6){text-align:right;font-variant-numeric:tabular-nums}

/* ⛔ ПОКРЫТИЕ РАСЧЁТА ЧАСОВ. Числа там уже справа (их ставит app.js атрибутом),
   а табличных цифр не было: «12» и «2» в столбце разной ширины. Класс `grid`
   у этой таблицы совпал с классом полотна диаграммы, поэтому правил у неё
   не было вовсе — селектор `table.grid` полотна не задевает, там это <div>. */
#hrCoverage table.grid td{font-variant-numeric:tabular-nums}

/* ФТ-11.1 (М-2): метка источника работы на полосе. Приглушена намеренно — она
   служебная, а читают на полосе название работы. */
.bar .src{opacity:.75;font-size:var(--кегль-подпись);border:1px solid currentColor;border-radius:var(--скругление);padding:0 var(--отступ-микро);margin-right:var(--отступ-микро)}

/* ФТ-11.1: параллельная работа с TASQ. Строка правила приоритета ВЫДЕЛЕНА — она
   отвечает на вопрос «а не отменит ли система мою правку сама», и потеряться среди
   служебных чисел не имеет права. */
.parallel{padding:var(--отступ-средний);margin:0 0 var(--отступ-малый)}
.parallel h3{margin:0 0 var(--отступ-малый);font-size:var(--кегль-основной)}
.parallel h4{margin:var(--отступ-малый) 0 var(--отступ-микро);font-size:var(--кегль-таблица)}
.parallel .rule{background:var(--подсветка-внимание);border:1px solid var(--цвет-внимание);color:var(--цвет-внимание);border-radius:var(--скругление-крупное);padding:var(--отступ-малый) var(--отступ-средний);margin:0 0 var(--отступ-малый);font-size:var(--кегль-таблица)}
.parallel .warn{background:var(--подсветка-тревога);border:1px solid var(--цвет-тревога-текст);color:var(--цвет-тревога-текст);border-radius:var(--скругление-крупное);padding:var(--отступ-малый) var(--отступ-средний);margin:0 0 var(--отступ-малый);font-size:var(--кегль-таблица)}
.parallel table{border-collapse:collapse;width:100%;font-size:var(--кегль-таблица)}
.parallel th{text-align:left;font-size:var(--кегль-подпись);color:var(--muted);font-weight:var(--начертание-выделенное);padding:0 var(--отступ-малый) var(--отступ-малый) 0;border-bottom:1px solid var(--line)}
.parallel td{padding:var(--отступ-малый) var(--отступ-малый) var(--отступ-малый) 0;border-bottom:1px solid var(--line);vertical-align:top}
.parallel ul{margin:var(--отступ-микро) 0 var(--отступ-малый) var(--отступ-крупный);font-size:var(--кегль-таблица)}
.parallel .note{font-size:var(--кегль-служебный);color:var(--muted);margin:var(--отступ-микро) 0 0}

/* ================== СОСТАВ РАБОТ ================== */
.srcnote{font-size:var(--кегль-служебный);color:var(--muted);background:var(--цвет-поверхность);border:1px solid var(--line);border-radius:var(--скругление-крупное);padding:var(--отступ-малый) var(--отступ-средний);margin:0 0 var(--отступ-малый)}
.srcnote b{color:var(--ink)}
.srcnote span{display:block;margin-top:var(--отступ-микро)}
.srcnote .rep{font-family:var(--шрифт-моно);font-size:var(--кегль-подпись);color:var(--цвет-текст-2)}
.srcnote.bad,.srcnote .bad{color:var(--цвет-тревога-текст)}

/* Минимальная ширина выросла с 760 до 1210 px вместе с тремя колонками готовности
   (3 x 150 px). Оставь прежнюю — колонки сожмутся друг на друга и «отстаёт
   на 40 п.п.» станет нечитаемым ровно там, где его читают. Панель прокручивается
   (`.panel.scroll`), поэтому узкое окно даёт прокрутку, а не кашу. */
#wbsTree{min-width:1210px}
.wbsrow{display:flex;align-items:center;border-bottom:1px solid var(--line);padding:var(--отступ-микро) var(--отступ-малый);font-size:var(--кегль-таблица);gap:var(--отступ-малый)}
.wbsrow.head{position:sticky;top:0;background:var(--цвет-поверхность);z-index:2;font-size:var(--кегль-подпись);color:var(--muted);font-weight:var(--начертание-выделенное);text-transform:uppercase}
.wbsrow.sum{background:var(--цвет-поверхность-утопленная);font-weight:var(--начертание-выделенное)}
.wbsrow .c{flex:0 0 130px;color:var(--muted);font-family:var(--шрифт-моно);font-size:var(--кегль-служебный)}
/* Код TASQ рядом с кодом дерева — приёмочный критерий 3. Другим цветом, чтобы
   два кода не читались как один длинный. */
.wbsrow .c .tq{color:var(--accent);font-style:normal;margin-left:var(--отступ-малый)}
.wbsrow .c .tq::before{content:"TASQ "}
/* Отступ по уровню — единственная арифметика в разметке состава, и она про уровень,
   а не про время: координат диаграммы здесь нет вовсе. Шаг взят из ритма системы,
   а не из отдельного числа. */
.wbsrow .t{flex:1 1 auto;min-width:220px;display:flex;align-items:center;gap:var(--отступ-малый);padding-left:calc((var(--lvl) - 1) * var(--отступ-крупный))}
.wbsrow .h{flex:0 0 190px}
.wbsrow .a{flex:0 0 160px;color:var(--muted);font-size:var(--кегль-служебный)}

/* ═══ ТРИ КОЛОНКИ ГОТОВНОСТИ ═══
   Ширина одинаковая у всех трёх намеренно: колонки читают ВМЕСТЕ (заявлено против
   планового), и разная ширина сбивала бы сравнение глазом. */
.wbsrow .rd{flex:0 0 150px;font-size:var(--кегль-служебный);font-variant-numeric:tabular-nums}
.wbsrow.head .rd{font-size:var(--кегль-подпись)}
/* Пометка источника цифры — маленькая, но ПОСТОЯННАЯ. Появляясь только иногда,
   она была бы незаметна именно там, где нужна: рядом с числом из чужого источника. */
.wbsrow .rsrc{font-style:normal;font-size:var(--кегль-подпись);color:var(--muted);
  border:1px solid var(--line);border-radius:var(--скругление);padding:0 var(--отступ-микро);margin-left:var(--отступ-микро)}
/* Разрыв красится ТОЛЬКО когда он шире порога — решает это сервер, не разметка. */
.wbsrow .gap{font-style:normal;font-size:var(--кегль-подпись);border-radius:var(--скругление);padding:0 var(--отступ-микро);margin-left:var(--отступ-микро);
  background:var(--цвет-поверхность-утопленная);color:var(--цвет-текст-2)}
.wbsrow .gap.behind{background:var(--подсветка-тревога);color:var(--цвет-тревога-текст);font-weight:var(--начертание-выделенное)}
.wbsrow .gap.ahead{background:var(--подсветка-акцент);color:var(--цвет-акцент-2);font-weight:var(--начертание-выделенное)}
/* Старые сведения видно без наведения: колонка возраста существует ради того,
   чтобы протухшее число нельзя было принять за свежее. */
.wbsrow .rd .old{color:var(--цвет-внимание);font-weight:var(--начертание-выделенное)}
/* Колонка действий строки: «поля» + ожидание. Шире прежнего (было 210px) — рядом
   с отметкой ожидания встала кнопка карточки своих полей, и при прежней ширине
   «поставить ожидание» переносилось на вторую строку у каждой работы. */
.wbsrow .x{flex:0 0 270px;text-align:right}
.wbsrow .tw{width:14px;cursor:pointer;color:var(--muted);user-select:none}
.wbsrow .tw.empty{cursor:default}
.wbsrow .part{font-style:normal;font-size:var(--кегль-подпись);color:var(--цвет-внимание);background:var(--подсветка-внимание);border-radius:var(--скругление);padding:0 var(--отступ-малый);margin-left:var(--отступ-микро)}

/* ================== ЕДИНОЕ ДЕРЕВО: ДВА ИСТОЧНИКА ==================
   Разделитель панели свой (.tbsep), а НЕ общий .sep: тот позиционирован абсолютно
   и растянут на высоту диаграммы — в панели он лёг бы поверх кнопок. */
.tbsep{width:1px;align-self:stretch;background:var(--line);margin:0 var(--отступ-микро)}
.toolbar .chk{font-size:var(--кегль-служебный);color:var(--muted);cursor:pointer;user-select:none;display:flex}

/* КОРЕНЬ ИСТОЧНИКА виден сразу: два дерева в базе не связаны ничем, и человек обязан
   понимать, в какой половине института он сейчас смотрит. */
.wbsrow.root{background:var(--подсветка-акцент);font-weight:var(--начертание-выделенное);border-bottom-color:var(--цвет-акцент-2)}
.wbsrow.root .ttl{letter-spacing:.02em}

/* НАЗВАННЫЕ КОНТЕЙНЕРЫ ПОТЕРЬ. Отличаются от разделов плана намеренно: «БЕЗ ШИФРА
   ОБЪЕКТА» — это не раздел работ, а сообщение о том, чего в данных не хватает. */
.wbsrow.unplaced{background:var(--подсветка-внимание)}
.wbsrow.unplaced .ttl{color:var(--цвет-внимание)}
.wbsrow.restricted{background:var(--цвет-поверхность-утопленная)}
.wbsrow.restricted .ttl{color:var(--цвет-текст-2);font-style:italic}

/* ОТКУДА РАБОТА — метка в строке. Задача TASQ и штатное задание выглядят одинаково,
   а живут по разным правилам, и выдать одно за другое проще всего молчанием. */
.wbsrow .src{font-style:normal;font-size:var(--кегль-подпись);font-weight:var(--начертание-выделенное);border-radius:var(--скругление);
             padding:0 var(--отступ-малый);letter-spacing:.03em;white-space:nowrap}
.wbsrow .src.tasq{color:var(--accent);background:var(--подсветка-акцент);border:1px solid var(--цвет-акцент-2)}
.wbsrow .src.staff{color:var(--цвет-акцент-2);background:var(--подсветка-акцент);border:1px solid var(--цвет-акцент-2)}
.wbsrow .src.box{color:var(--muted);background:var(--цвет-поверхность-утопленная);border:1px solid var(--line)}

/* «НЕ РАСПРЕДЕЛЕНО» — в колонке исполнителя, а не отдельной веткой (правило Р-5):
   работа остаётся в своём плане, потому что там её ищут. */
.wbsrow .free{font-style:normal;color:var(--цвет-внимание);background:var(--подсветка-внимание);border-radius:var(--скругление);padding:0 var(--отступ-малый);font-size:var(--кегль-подпись)}

/* ЧТО В ДЕРЕВО НЕ ПОПАЛО — заметно, но не тревожно: документооборот скрыт правильно,
   и красным это красить нельзя, иначе рядом потеряется настоящая беда. */
.srcnote .excl{color:var(--цвет-текст-2);background:var(--цвет-поверхность-утопленная);border-left:3px solid var(--цвет-граница);padding:var(--отступ-микро) var(--отступ-малый);margin-top:var(--отступ-микро)}

/* ТРИ СОСТОЯНИЯ ТРУДОЁМКОСТИ РАЗЛИЧАЮТСЯ ГЛАЗОМ, а не только текстом: «0 (работы нет)»
   это ответ, «не оценено» — его отсутствие, и решения по ним разные. */
.hv{cursor:pointer;border-radius:var(--скругление);padding:0 var(--отступ-малый);border:1px dashed transparent;min-height:var(--высота-органа);display:inline-flex;align-items:center}
.hv:hover{border-color:var(--line);background:var(--цвет-фон-наведение)}
.hv.est{color:var(--цвет-успех-текст);background:var(--подсветка-успех);font-weight:var(--начертание-выделенное)}
.hv.est.range{color:var(--цвет-акцент-2);background:var(--подсветка-акцент)}
.hv.zero{color:var(--цвет-текст-2);background:var(--цвет-поверхность-утопленная)}
.hv.none{color:var(--цвет-внимание);background:var(--подсветка-внимание);font-style:italic}
.hv.broken{color:var(--цвет-тревога-текст);background:var(--подсветка-тревога);font-weight:var(--начертание-выделенное)}

.waitmark{display:inline-block;background:var(--подсветка-внимание);border:1px solid var(--цвет-внимание);color:var(--цвет-внимание);border-radius:var(--скругление);padding:0 var(--отступ-малый);font-size:var(--кегль-подпись);margin-right:var(--отступ-микро)}
.wbtn{border:1px solid var(--line);background:var(--цвет-поверхность);border-radius:var(--скругление);padding:0 var(--отступ-малый);font-size:var(--кегль-подпись);cursor:pointer;color:var(--muted);min-height:var(--высота-органа)}
.wbtn:hover{background:var(--цвет-фон-наведение);color:var(--ink)}

/* ═══════════ «МОЯ НЕДЕЛЯ», ОТЧЁТЫ И КАЛЕНДАРЬ ═══════════
   Предупреждения (.warn) намеренно живут ВНЕ прокручиваемых панелей: строка, уехавшая
   вправе вместе с таблицей, исчезает ровно тогда, когда на неё смотрят. */
.warn{background:var(--подсветка-внимание);border:1px solid var(--цвет-внимание);color:var(--цвет-внимание);border-radius:var(--скругление-крупное);
      padding:var(--отступ-малый) var(--отступ-средний);margin:0 0 var(--отступ-малый);font-size:var(--кегль-таблица);line-height:var(--интерлиньяж-обычный)}
.nodata{color:var(--muted);font-size:var(--кегль-служебный)}

.exrange{font-size:var(--кегль-таблица);font-weight:var(--начертание-выделенное);color:var(--ink)}
.extotals{display:flex;flex-wrap:wrap;gap:var(--отступ-малый) var(--отступ-крупный);background:var(--цвет-поверхность);border:1px solid var(--line);
          border-radius:var(--скругление-крупное);padding:var(--отступ-малый) var(--отступ-средний);margin:0 0 var(--отступ-малый);font-size:var(--кегль-таблица);align-items:baseline}
.extotals .k{color:var(--muted);font-size:var(--кегль-подпись);text-transform:uppercase}
.extotals .v{font-weight:var(--начертание-выделенное);margin-right:var(--отступ-средний);font-variant-numeric:tabular-nums}
.extotals .bad{color:var(--st-overdue)}

.extask.col{flex-direction:column;align-items:stretch;gap:var(--отступ-малый)}
.extask.col .exacts{flex-wrap:wrap}
.extask details{font-size:var(--кегль-служебный);color:var(--muted)}
.extask details summary{cursor:pointer}
.extask .blocked{padding:var(--отступ-микро) 0;border-top:1px solid var(--line);line-height:var(--интерлиньяж-обычный)}
.extask .blocked b{color:var(--ink)}

.flag{font-size:var(--кегль-подпись);font-weight:var(--начертание-выделенное);border-radius:var(--скругление);padding:0 var(--отступ-малый);margin-left:var(--отступ-малый);white-space:nowrap}
.flag.wait{background:var(--подсветка-внимание);border:1px solid var(--цвет-внимание);color:var(--цвет-внимание)}
.flag.bad{background:var(--подсветка-тревога);border:1px solid var(--цвет-тревога-текст);color:var(--цвет-тревога-текст)}
.flag.slip{background:var(--подсветка-акцент);border:1px solid var(--цвет-акцент-2);color:var(--цвет-акцент-2)}
.tsro{color:var(--muted);font-size:var(--кегль-таблица)}
.tsheet th.off{background:var(--off2);color:var(--muted)}
.tsheet td.over{background:var(--подсветка-тревога)}
.tsheet .plan{color:var(--muted);font-weight:var(--начертание-обычное)}
.slipbar{background:var(--цвет-поверхность);border:1px solid var(--line);border-radius:var(--скругление-крупное);padding:var(--отступ-малый) var(--отступ-средний);
         margin:var(--отступ-малый) 0;font-size:var(--кегль-таблица)}
.slipbar.bad{background:var(--подсветка-тревога);border-color:var(--цвет-тревога-текст);color:var(--цвет-тревога-текст);font-weight:var(--начертание-выделенное)}

/* ---- отчёты ---- */
.stamp{font-size:var(--кегль-служебный);color:var(--muted);margin:0 0 var(--отступ-малый)}
.caveats{background:var(--цвет-поверхность);border:1px solid var(--line);border-left:4px solid var(--load-warn);
         border-radius:var(--скругление-крупное);padding:var(--отступ-малый) var(--отступ-средний);margin:0 0 var(--отступ-средний);font-size:var(--кегль-таблица);line-height:var(--интерлиньяж-обычный)}
.caveats ul{margin:var(--отступ-малый) 0 0;padding-left:var(--отступ-крупный)}
.caveats li{margin:var(--отступ-микро) 0}
.verdicts{display:flex;gap:var(--отступ-средний);flex-wrap:wrap;margin:0 0 var(--отступ-средний)}
.verdict{flex:1 1 320px;background:var(--цвет-поверхность);border:1px solid var(--line);border-left:4px solid var(--muted);
         border-radius:var(--скругление-крупное);padding:var(--отступ-малый) var(--отступ-средний);font-size:var(--кегль-таблица);font-weight:var(--начертание-выделенное)}
.verdict.ok{border-left-color:var(--load-ok)}
.verdict.no{border-left-color:var(--st-overdue)}
.verdict .sub{display:block;font-weight:var(--начертание-обычное);color:var(--muted);font-size:var(--кегль-служебный);margin-top:var(--отступ-микро)}
/* ⛔ ЧИСЛА ОТЧЁТОВ — ВПРАВО, И ШАПКА ВМЕСТЕ С НИМИ (было 26 из 26 по центру).
   Слева остаются названия строк (`.tsname`) и пояснительные подстроки (`tr.sub`) —
   у них `!important` и своя специфичность, поэтому правило ниже их не задевает. */
table.rep{border-collapse:collapse;width:100%;font-size:var(--кегль-таблица);background:var(--цвет-поверхность);min-width:900px}
table.rep th{background:var(--цвет-поверхность-утопленная);text-align:right;padding:var(--поле-клетки-по-вертикали) var(--поле-клетки-по-горизонтали);font-weight:var(--начертание-выделенное);
             border:1px solid var(--line);font-size:var(--кегль-подпись);position:sticky;top:0;z-index:1}
table.rep td{padding:var(--поле-клетки-по-вертикали) var(--поле-клетки-по-горизонтали);border:1px solid var(--line);text-align:right;
             font-variant-numeric:tabular-nums}
table.rep td.tsname{text-align:left!important;white-space:normal;max-width:340px}
table.rep tr.sub td{background:var(--цвет-поверхность-утопленная);color:var(--muted);text-align:left;font-size:var(--кегль-служебный)}
table.rep td.over{color:var(--st-overdue);font-weight:var(--начертание-выделенное)}
table.rep .h-Green{background:var(--подсветка-успех);color:var(--цвет-успех-текст);font-weight:var(--начертание-выделенное)}
table.rep .h-Yellow{background:var(--подсветка-внимание);color:var(--цвет-внимание);font-weight:var(--начертание-выделенное)}
table.rep .h-Red{background:var(--подсветка-тревога);color:var(--цвет-тревога-текст);font-weight:var(--начертание-выделенное)}
table.rep .h-NoData{background:var(--цвет-поверхность-утопленная);color:var(--цвет-текст-2)}
table.rep .h-NoBasis{background:var(--цвет-поверхность-утопленная);color:var(--цвет-текст-2);font-style:italic}
.spread{white-space:nowrap;text-align:left!important}
.bk{display:inline-block;width:22px;height:38px;position:relative;vertical-align:bottom;margin-right:1px}
.bk i{position:absolute;bottom:12px;left:2px;right:2px;background:var(--accent);border-radius:var(--скругление) var(--скругление) 0 0;min-height:2px}
.bk em{position:absolute;bottom:0;left:0;right:0;text-align:center;font-size:var(--кегль-подпись);color:var(--muted);font-style:normal;font-variant-numeric:tabular-nums}

/* ---- календарь ---- */
.scopebox{border:1px solid var(--line);border-radius:var(--скругление-крупное);padding:var(--отступ-малый) var(--отступ-средний);margin:var(--отступ-средний) 0}
.scopehead{font-size:var(--кегль-подпись);font-weight:var(--начертание-выделенное);color:var(--muted);text-transform:uppercase;margin-bottom:var(--отступ-малый)}
.picklist{max-height:230px;overflow:auto;border:1px solid var(--line);border-radius:var(--скругление);
          padding:var(--отступ-малый);margin:var(--отступ-малый) 0;background:var(--цвет-поверхность-утопленная)}
.picklist .chk{display:flex;font-size:var(--кегль-таблица);padding:var(--отступ-микро) 0}
.wkrow{display:flex;flex-direction:row;align-items:center;gap:var(--отступ-малый);margin:var(--отступ-микро) 0}
.wkrow span{flex:0 0 120px;font-size:var(--кегль-таблица);color:var(--muted)}
.wkrow input{flex:1;padding:0 var(--отступ-малый);border:1px solid var(--цвет-граница-сильная);border-radius:var(--скругление);font-family:var(--шрифт);font-size:var(--кегль-таблица)}
.planhead{background:var(--цвет-поверхность);border:1px solid var(--line);border-left:4px solid var(--muted);
          border-radius:var(--скругление-крупное);padding:var(--отступ-малый) var(--отступ-средний);margin:var(--отступ-средний) 0;font-size:var(--кегль-таблица);font-weight:var(--начертание-выделенное)}
.planhead.ok{border-left-color:var(--load-ok)}
.planhead.no{border-left-color:var(--st-overdue)}

/* Панель действий календаря: кнопки идут подряд слева. Общее правило
   `.toolbar button.primary{margin-left:auto}` разносило их по краям экрана,
   и «Проверить» оказывалось в другом конце строки от «Записать». */
.calacts button.primary{margin-left:0}
#calRemoveBox{display:flex;align-items:center;gap:var(--отступ-малый)}

/* МОНИТОР ОБЪЕКТА (docs/Монитор-ГИПа.md).
   Прочерк отличается от числа НЕ ТОЛЬКО текстом: клетка «данных нет» приглушена,
   иначе строка из прочерков читается как строка нулей. Причина живёт в подсказке
   и в самом тексте клетки — не в подписи колонки, которая теряется при переносе. */
.omdash{color:var(--muted);font-style:italic}
table.rep td .sub{color:var(--muted);font-size:var(--кегль-подпись);font-weight:var(--начертание-обычное)}

/* ⛔ ЗАПОЛНЕННОЕ АВТОМАТИЧЕСКИ И ВВЕДЁННОЕ ЧЕЛОВЕКОМ РАЗЛИЧАЮТСЯ НА ВИД.
   Праздник из справочника — статья закона, он одинаков каждый год. Перенос выходного
   назначил человек по постановлению, которого модуль не знает, и ошибка в одной дате
   даёт неверную загрузку всему институту на неделю. Одинаковые на вид строки скрыли бы
   ровно ту из них, которую надо перечитать. */
.origin-auto{color:var(--muted)}
.origin-manual{color:var(--цвет-внимание);font-weight:var(--начертание-выделенное)}

/* ⛔ БАЗОВЫЙ ПЛАН И ОТКЛОНЕНИЕ (ФТ-9.4, критерий 4 этапа 3).

   План БЕЗ снятого базового отличается на вид (`.bl.none`) — приглушённой рамкой,
   а не отсутствием блока. Пропав с экрана, он читался бы как «сравнивать нечего,
   значит всё в порядке»; ровно наоборот — по нему нельзя сказать НИЧЕГО, и это
   первое, что человек обязан увидеть.

   Числа отклонения стоят отдельной строкой от словесных: слова отвечают «что
   происходит», числа — «насколько», и смешанные в один абзац они не читаются
   ни как то, ни как другое. */
.baseline{padding:var(--отступ-средний);margin:0 0 var(--отступ-малый)}
.baseline h3{margin:0 0 var(--отступ-малый);font-size:var(--кегль-основной)}
.baseline .warn{background:var(--подсветка-тревога);border:1px solid var(--цвет-тревога-текст);color:var(--цвет-тревога-текст);
                border-radius:var(--скругление-крупное);padding:var(--отступ-малый) var(--отступ-средний);margin:0 0 var(--отступ-малый);font-size:var(--кегль-таблица)}
.baseline .stamp{font-size:var(--кегль-служебный);color:var(--muted);margin:0 0 var(--отступ-малый)}
.baseline .note{font-size:var(--кегль-служебный);color:var(--muted);margin:var(--отступ-микро) 0 0}
.bl{border:1px solid var(--line);border-left:4px solid var(--load-ok);
    border-radius:var(--скругление-крупное);padding:var(--отступ-малый) var(--отступ-средний);margin:var(--отступ-малый) 0;background:var(--цвет-поверхность)}
.bl.none{border-left-color:var(--muted);background:var(--цвет-поверхность-утопленная)}
.blhead{font-weight:var(--начертание-выделенное);font-size:var(--кегль-таблица);margin-bottom:var(--отступ-микро)}
.blline{font-size:var(--кегль-таблица);margin:var(--отступ-микро) 0}
.blnums{display:flex;flex-wrap:wrap;gap:var(--отступ-микро) var(--отступ-крупный);margin-top:var(--отступ-малый);font-size:var(--кегль-служебный);color:var(--muted);font-variant-numeric:tabular-nums}
.blnums b{color:var(--ink)}
.bljournal{margin-top:var(--отступ-малый);font-size:var(--кегль-служебный)}
.bljournal summary{cursor:pointer;color:var(--muted)}
.baseline button.primary{margin-top:var(--отступ-малый)}

/* ═══ СВОИ ПОЛЯ РАБОТ ═══
   Столбец своего поля выглядит как штатный: одно поле, отличающееся видом,
   читается как «менее настоящее», а Заказчик заводит его именно затем, чтобы
   по нему принимать решения. Отличается ТОЛЬКО незаполненное значение — оно
   и есть отдельное состояние («неизвестно», а не ноль). */
.wbsrow .f{flex:0 0 130px;font-size:var(--кегль-служебный);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wbsrow .f.num{text-align:right;font-variant-numeric:tabular-nums}
.wbsrow .f.empty{color:var(--muted);opacity:.65}
.wbsrow.head .f{color:var(--muted)}
.fieldbar{display:flex;align-items:center;gap:var(--отступ-малый);flex-wrap:wrap;margin:var(--отступ-малый) 0}
.fieldbar select,.fieldbar input{padding:0 var(--отступ-малый);font-size:var(--кегль-таблица)}
.fieldbar .notice{font-style:normal;font-size:var(--кегль-служебный);color:var(--цвет-внимание);background:var(--подсветка-внимание);
                  border-radius:var(--скругление);padding:0 var(--отступ-малый)}
.fieldbar .hint{font-style:normal;font-size:var(--кегль-служебный);color:var(--muted)}
.fieldbar .groups{display:flex;gap:var(--отступ-малый);flex-wrap:wrap}
.fieldbar .groups b{font-size:var(--кегль-служебный);font-weight:var(--начертание-выделенное);background:var(--подсветка-акцент);border-radius:var(--скругление);padding:0 var(--отступ-малый)}
.fieldbar .groups b.nf{background:var(--цвет-поверхность-утопленная);color:var(--muted)}
/* ЧИП ЗНАЧЕНИЯ — там, где столбца нет: строка «Моей недели» и карточка.
   Название поля печатается РЯДОМ со значением: «вторая» без слова «Очередь»
   не значит ничего, а места на отдельный столбец в этих экранах нет. */
.ofchip{display:inline-block;margin-left:var(--отступ-малый);font-size:var(--кегль-подпись);padding:0 var(--отступ-малый);border-radius:var(--скругление);
        background:var(--подсветка-акцент);color:var(--accent);white-space:nowrap}
.ofchip i{font-style:normal;color:var(--muted)}

/* ═══ РАЗРЕЗ ПО СВОЕМУ ПОЛЮ В ДАШБОРДЕ ПОДРАЗДЕЛЕНИЙ ═══
   Столбцы разреза отделены от штатных ЛИНИЕЙ, а не цветом: цветом в этой таблице
   уже сказано про светофор, и второй смысл у того же приёма читается как первый.
   Столбец «не заполнено» приглушён — это отсутствие сведений, а не значение
   признака, и спутать их в решении дороже, чем не заметить. */
table.rep th.sl,table.rep td.sl{background:var(--подсветка-акцент)}
table.rep th.sl:first-of-type{border-left:2px solid var(--line)}
table.rep th.sl.nf,table.rep td.sl.nf{background:var(--цвет-поверхность-утопленная);color:var(--muted)}
table.rep tr.sltot td{background:var(--цвет-поверхность-утопленная);font-weight:var(--начертание-выделенное)}

/* Свои поля В ЗАПИСИ ЖУРНАЛА: снимок признаков на момент действия. Печатаются
   мелко и под названием работы — это ответ на вопрос «что это была за работа»,
   а не самостоятельный столбец: сроков и авторов в журнале и так пять колонок. */
.audit .afl{margin-top:var(--отступ-микро);display:flex;gap:var(--отступ-малый);flex-wrap:wrap}
.audit .afl .f{font-size:var(--кегль-подпись);padding:0 var(--отступ-малый);border-radius:var(--скругление);background:var(--подсветка-акцент);color:var(--accent);
               white-space:nowrap}
.audit .afl .f.num{font-variant-numeric:tabular-nums}

/* ═══ ВЕДЕНИЕ СВОИХ ПОЛЕЙ В НАСТРОЙКАХ ═══ */
.wfadmin table{width:100%;border-collapse:collapse;font-size:var(--кегль-таблица);margin-top:var(--отступ-малый)}
.wfadmin th,.wfadmin td{border-bottom:1px solid var(--line);padding:var(--поле-клетки-по-вертикали) var(--поле-клетки-по-горизонтали);text-align:left;vertical-align:top}
.wfadmin th{color:var(--muted);font-weight:var(--начертание-выделенное);font-size:var(--кегль-служебный)}
.wfadmin tr.arch td{opacity:var(--непрозрачность-загрузки)}
.wfadmin .wfmsg{font-size:var(--кегль-служебный);margin-top:var(--отступ-малый)}
.wfadmin .wfmsg.bad{color:var(--цвет-отказ)}
.wfadmin .wfrow{display:flex;gap:var(--отступ-малый);align-items:flex-end;flex-wrap:wrap;margin-top:var(--отступ-малый)}
.wfadmin .wfrow label{display:flex;flex-direction:column;font-size:var(--кегль-служебный);color:var(--muted);gap:var(--отступ-микро)}
.wfadmin .wfrow input,.wfadmin .wfrow select{padding:0 var(--отступ-малый);font-size:var(--кегль-таблица)}
.wfadmin .wfrow label.chk{flex-direction:row;align-items:center;gap:var(--отступ-микро);color:inherit;font-size:var(--кегль-таблица)}
.wfadmin .wfbad{background:var(--подсветка-внимание);border-radius:var(--скругление-крупное);padding:var(--отступ-малый) var(--отступ-средний);font-size:var(--кегль-служебный);color:var(--цвет-внимание);margin-top:var(--отступ-малый)}

/* ПЕЧАТЬ. Своё поле — такой же столбец таблицы, как штатные, поэтому на лист оно
   попадает само. Убирается ТОЛЬКО панель отбора: орган управления на бумаге
   бессмыслен, а число скрытых и подпись отбора обязаны остаться — иначе
   распечатанная выборка выглядит полным составом работ. */
@media print{
  .fieldbar select,.fieldbar input,.fieldbar button{display:none !important}
  .fieldbar{break-inside:avoid}
}

/* ═══ КАРТОЧКА СВОИХ ПОЛЕЙ РАБОТЫ (ввод значений в вебе) ═══ */
.modal .box.fieldcard{max-width:560px}
.fieldcard #fcBody{max-height:52vh;overflow:auto;padding-right:var(--отступ-микро)}
.fcrow{display:block;margin:0 0 var(--отступ-малый)}
.fcname{display:block;font-size:var(--кегль-служебный);color:var(--muted);font-weight:var(--начертание-выделенное);margin-bottom:var(--отступ-микро)}
.fcname .req{font-style:normal;color:var(--цвет-отказ);margin-left:var(--отступ-микро)}
.fcrow input,.fcrow select{width:100%;padding:0 var(--отступ-малый);min-height:var(--высота-органа);border:1px solid var(--цвет-граница-сильная);
  border-radius:var(--скругление);font-size:var(--кегль-таблица);background:var(--цвет-поверхность)}
.fcrow input:disabled,.fcrow select:disabled{background:var(--цвет-поверхность-утопленная);color:var(--цвет-текст-отключено);cursor:var(--курсор-отключено)}
.fchint{display:block;font-style:normal;font-size:var(--кегль-подпись);color:var(--muted);margin-top:var(--отступ-микро)}
.fcnote{font-size:var(--кегль-служебный);color:var(--muted);background:var(--цвет-поверхность-утопленная);border:1px solid var(--line);
  border-radius:var(--скругление);padding:var(--отступ-малый) var(--отступ-средний);margin:0 0 var(--отступ-малый)}
.fcnote.bad{color:var(--цвет-внимание);background:var(--подсветка-внимание);border-color:var(--цвет-внимание)}
.fcerr{color:var(--цвет-отказ);font-size:var(--кегль-служебный);min-height:16px;margin-top:var(--отступ-малый)}
.modal button:disabled{opacity:var(--непрозрачность-отключено);cursor:var(--курсор-отключено)}

/* ═══════════════════════════════════════════════════════════════════════════
   СТОЛ РУКОВОДИТЕЛЯ

   Четыре карточки в сетке. Ширина карточки задана `minmax`, а не долями:
   на узком окне разделы встают друг под друга, а не сжимаются в нечитаемую
   колонку — «единая картина» должна оставаться читаемой, иначе руководитель
   вернётся к четырём экранам.
   ═══════════════════════════════════════════════════════════════════════════ */
.deskgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(560px,1fr));gap:var(--отступ-средний)}
.deskcard{padding:var(--отступ-средний) var(--отступ-крупный)}
/* ⛔ ШИРОКАЯ ТАБЛИЦА ПРОКРУЧИВАЕТСЯ ВНУТРИ КАРТОЧКИ, А НЕ ОБРЕЗАЕТСЯ.
   Найдено браузером: столбец «Отмечался» уезжал за край, и единственный
   честный ответ этого столбца («отметок нет») обрезался до «отметок н…».
   Обрезанная причина через неделю читается как пустая клетка. */
.deskcard .tw{overflow-x:auto}
.deskcard h2{margin:0 0 var(--отступ-малый);font-size:var(--кегль-основной);color:var(--accent)}
.deskcard .cap{font-size:var(--кегль-служебный);color:var(--muted);margin-bottom:var(--отступ-малый);line-height:var(--интерлиньяж-обычный)}
.deskcard table{width:100%;border-collapse:collapse;font-size:var(--кегль-таблица)}
.deskcard th{text-align:left;background:var(--цвет-поверхность-утопленная);padding:var(--поле-клетки-по-вертикали) var(--поле-клетки-по-горизонтали);font-weight:var(--начертание-выделенное);
  color:var(--muted);border-bottom:1px solid var(--line);white-space:nowrap}
.deskcard td{padding:var(--поле-клетки-по-вертикали) var(--поле-клетки-по-горизонтали);border-bottom:1px solid var(--line);vertical-align:top}
.deskcard tr:last-child td{border-bottom:0}
.deskcard .more{font-size:var(--кегль-служебный);color:var(--muted);padding-top:var(--отступ-малый)}
.deskcard .none{font-size:var(--кегль-таблица);color:var(--muted);padding:var(--отступ-малый) 0}
/* Пустое ОСТАЁТСЯ пустым: прочерк с причиной, а не ноль. */
.deskcard .nodata{color:var(--muted);font-style:italic}
/* Число и его шапка — вправо и табличными цифрами (правило системы: `th` вместе с `td`). */
.deskcard .num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
/* ⚡ Единственное место продукта, которому разрешено начертание «горит»: счётчик
   того, что горит. Так записано в самом файле токенов. */
.deskcard .flame{font-weight:var(--начертание-горит);color:var(--st-overdue)}
.deskcard .risk{font-weight:var(--начертание-выделенное);color:var(--load-warn)}
.deskcard .side-foreign{color:var(--цвет-акцент-2);font-weight:var(--начертание-выделенное)}
.deskcard .side-own{color:var(--ink)}
.deskcard .side-unknown{color:var(--muted);font-style:italic}
.deskcard .gapbar{height:6px;border-radius:var(--скругление);background:var(--цвет-поверхность-утопленная);overflow:hidden;margin-top:var(--отступ-микро)}
.deskcard .gapbar i{display:block;height:100%;background:var(--load-warn)}
.deskcard details{margin-top:var(--отступ-малый)}
.deskcard summary{cursor:pointer;font-size:var(--кегль-служебный);color:var(--accent);font-weight:var(--начертание-выделенное)}

/* ═══ ПУСТЫЕ СОСТОЯНИЯ ПО ПЕРЕПИСИ (C9) ═══
   Пустой экран обязан ОБЪЯСНЯТЬ СЕБЯ, а не показывать «нет данных». Блок заметный,
   но не тревожный: это приглашение, а не ошибка. */
.emptystate{border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:var(--скругление-крупное);
  background:var(--цвет-поверхность);padding:var(--отступ-средний) var(--отступ-крупный);margin:var(--отступ-малый) 0;font-size:var(--кегль-таблица);max-width:760px}
.emptystate b{display:block;font-size:var(--кегль-основной);margin-bottom:var(--отступ-микро)}
.emptystate p{margin:var(--отступ-микро) 0 0}
.emptystate .why{color:var(--muted);font-size:var(--кегль-служебный)}
/* Перепись ещё не доехала — видно, что это состояние загрузки, а не ответ. */
.emptystate.wait{border-left-color:var(--muted);opacity:var(--непрозрачность-загрузки)}
@media print{ .emptystate{break-inside:avoid} }

/* ═══ СЧЁТЧИК ГОТОВНОСТИ К ОБУЧЕНИЮ (C10) ═══ */
.learnbox{border:1px solid var(--line);border-left:4px solid var(--muted);border-radius:var(--скругление-крупное);
  background:var(--цвет-поверхность);padding:var(--отступ-малый) var(--отступ-средний);margin:0 0 var(--отступ-средний);font-size:var(--кегль-таблица);max-width:900px}
.learnbox.ok{border-left-color:var(--load-ok)}
.learnbox b{display:block;margin-bottom:var(--отступ-микро)}
.learnbox p{margin:0;color:var(--muted)}

/* Светофор объекта: цвет остаётся, но он ТРЕТИЙ признак — значок и слово стоят в тексте. */
.light{white-space:nowrap}
.light.Red{color:var(--st-overdue);font-weight:var(--начертание-выделенное)}
.light.Yellow{color:var(--load-warn);font-weight:var(--начертание-выделенное)}
.light.Green{color:var(--load-ok)}
.light.NoData{color:var(--muted);font-style:italic}

/* В-3: ручка плотности. Цель нажатия — не ниже пола WCAG 2.2 SC 2.5.5 (44 px):
   сжимать интерфейс уменьшением органов управления значит платить доступностью. */
.density{display:flex;align-items:center;gap:8px;margin:6px 0}
.density span{color:var(--цвет-текст-3);font-size:var(--кегль-подпись)}
.density button{min-height:44px;min-width:44px;padding:0 12px}
.density button.on{background:var(--цвет-акцент);color:var(--цвет-фон)}

/* П-1: заголовок свёрнутой сводки. Критическое видно ДО раскрытия. */
#deskSummary>summary{cursor:pointer;padding:6px 0;color:var(--цвет-текст-2)}
#deskSummary>summary.crit{color:var(--цвет-отказ);font-weight:600}

/* Библиотека шаблонов: строка ввода переносится на узком экране,
   иначе последняя кнопка уезжает за край панели настроек. */
.tplrow{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.tplrow input{flex:1 1 160px;min-width:0}

/* Подробности работы по клику на полосу. Две колонки: подпись и значение —
   человек читает карточку глазами по левому краю, а не выискивает двоеточия. */
.dtlhead{font-weight:600;margin-bottom:10px}
.dtlbody{max-height:60vh;overflow:auto}
.dtl{display:flex;gap:12px;padding:4px 0;border-bottom:1px solid var(--цвет-граница)}
.dtl span{flex:0 0 40%;color:var(--цвет-текст-3)}
.dtl b{flex:1;font-weight:500}
.dtl i{color:var(--цвет-текст-3);font-style:normal}
.bar{cursor:pointer}


/* Карточка человека: подзаголовки разделов и список работ.
   Список ограничен по высоте — у сотрудника бывает сорок работ, и без предела
   кнопка «Закрыть» уезжает за край экрана. */
.dtlsub{margin:12px 0 6px;font-weight:600;color:var(--цвет-текст-2)}
.prsList{max-height:34vh;overflow:auto}
.prsRow{padding:5px 0;border-bottom:1px solid var(--цвет-граница)}
.prsRow b{display:block;font-weight:500}
.prsRow span{color:var(--цвет-текст-3);font-size:var(--кегль-подпись)}
.emp[data-person]:hover b{text-decoration:underline}

/* Строка быстрого перехода. Цель нажатия не ниже пола WCAG 2.2 SC 2.5.5:
   в неё попадают и с ноутбучного тачпада. */
.jumpbar{position:relative;margin:6px 0}
.jumpbar input{width:100%;min-height:44px;padding:0 12px}
.jumplist{position:absolute;z-index:30;left:0;right:0;top:46px;
  background:var(--цвет-поверхность);border:1px solid var(--цвет-граница);
  border-radius:6px;box-shadow:var(--тень-парения);max-height:46vh;overflow:auto}
.jumpitem{padding:8px 12px;cursor:pointer;border-bottom:1px solid var(--цвет-граница)}
.jumpitem:last-child{border-bottom:none}
.jumpitem:hover{background:var(--цвет-поверхность-утопленная)}
.jumpitem b{display:block;font-weight:500}
.jumpitem span{color:var(--цвет-текст-3);font-size:var(--кегль-подпись)}
.jumpempty{padding:10px 12px;color:var(--цвет-текст-3);font-size:var(--кегль-подпись)}

/* Полоса, к которой перешли: подсветка обязательна — иначе человек попал
   куда надо и не знает об этом. Гаснет сама на следующем переходе. */
.bar.jumped{outline:3px solid var(--цвет-акцент);outline-offset:2px}
/* Та же подсветка для СТРОКИ таблицы: переход к работе есть и на «Столе»,
   и в своей неделе, а строка без отметки оставляет человека перед двумя
   десятками одинаковых строк — он попал куда надо и не знает об этом.
   `outline` вместо рамки намеренно: рамка сдвигает содержимое таблицы. */
tr.jumped>td{outline:3px solid var(--цвет-акцент);outline-offset:-3px;background:var(--цвет-поверхность-утопленная)}


/* Строка «вы видите своё рабочее место» живёт в ТЁМНОЙ шапке, поэтому берёт
   цвет для текста на акценте, а не общий приглушённый: серое по синему
   не читается, а строку, которую не прочли, всё равно что не написали. */
.rolenote{color:var(--цвет-текст-на-акценте);opacity:.92;font-size:var(--кегль-подпись);margin-top:4px}

/* ═══ Г4 (аналитика 30.08.2026): МОБИЛЬНАЯ ВЁРСТКА «МОЕЙ НЕДЕЛИ» ═══
   Отметка факта с телефона (пакет приживаемости): узкий экран получает читаемую
   сетку недели без пинч-зума. Печать не задета (свои @media print выше);
   десктоп не задет (блок работает только ≤480px).
   Клетки держат 44px по WCAG 2.2 SC 2.5.5 (правило .tscell уже общее). */
@media (max-width:480px){
  /* таблица недели скроллится сама, страница вбок не едет */
  .tsheet{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .tsheet table{min-width:560px}
  .tsname{max-width:140px}
  /* строки задач складываются в столбик — кнопки действий не давятся */
  .extask{flex-direction:column;align-items:stretch}
  .extask .t{width:auto;flex:1 1 auto}
  .exacts{flex-wrap:wrap}
  .ex-btn{min-height:44px}
  /* крупные главные кнопки исполнителя */
  #exSelfAbsence,#exCopyWeek,#exNoWork,button[data-право="factMark"]{min-height:44px}
  /* панель вкладок скроллится в одну строку */
  .tabs{overflow-x:auto;white-space:nowrap;display:flex}
  .tabs button{flex:0 0 auto}
}

/* ═══ ПАКЕТ 5.3: РЕЕСТР ДОСТУПА ═══
   Подсветка «учётка закрыта — доступ остался» — токенами оформления, не литералами
   (сторож ЦветИКегльВнеТокеновTests держит app.js/app.css на счёту). Наблюдателю ИБ без роли
   администратора на вкладке «Настройки» видна ТОЛЬКО панель реестра (режим ledger-only). */
#admin.ledger-only > .panel:not(#accessLedgerPanel){display:none}
.al-table,.al-sources{border-collapse:collapse;width:100%;font-size:var(--кегль-таблица);margin-top:var(--отступ-малый)}
.al-table th,.al-sources th{background:var(--цвет-поверхность-утопленная);text-align:left;padding:var(--поле-клетки-по-вертикали) var(--поле-клетки-по-горизонтали);border:1px solid var(--line)}
.al-table td,.al-sources td{padding:var(--поле-клетки-по-вертикали) var(--поле-клетки-по-горизонтали);border:1px solid var(--line);vertical-align:top}
.al-table tr.al-closed-has-access td{background:var(--подсветка-внимание);border-left:4px solid var(--st-overdue)}
.al-table tr.al-unknown td{background:var(--подсветка-внимание)}
.al-sources tr.al-src-bad td{background:var(--подсветка-внимание)}

/* Пакет 6.2: строка объекта в разделе «Кто держит объект». Отступы и цвета —
   токенами оформления: перепись литералов цвета и кегля этого требует. */
.holderobj { margin: var(--отступ-малый) 0; }
.holderobj ul { margin: var(--отступ-микро) 0 0 var(--отступ-средний); }

/* ══════════════════ НИЗКИЙ ЭКРАН: СЖИМАЕМ ПОЛЯ, А НЕ БУКВЫ ══════════════════
   ⛔ ЗАМЕР 09.09.2026 на 1366×768 (типичный VDI Заказчика): над предметом экрана
   от 466 до 714 px из 768 — на «Моей неделе» от сетки факта оставалось около 50 px.
   Постоянная часть (шапка 133 + ряд вкладок 44 + строка перехода 44 = 221 px) плюс
   рабочие панели съедали экран целиком.

   ⛔ ПРАВИЛО ПРОЕКТА: сжимать ПОЛЯ, а не кегль и не цели нажатия. Кегль здесь
   не трогается вовсе, высота органов (44 px, WCAG 2.2 SC 2.5.5) — тоже: уменьшены
   только вертикальные поля и разрывы, и только когда окно ниже 820 px. На большом
   экране всё остаётся как было.

   ⚠ Что это НЕ чинит: число вкладок (23) и состав панелей. Это отдельная работа
   и отдельный разговор с Заказчиком о том, какие экраны ему нужны рядом. */
@media (max-height: 820px) {
  header.top { padding-top: var(--отступ-малый); padding-bottom: var(--отступ-малый); }
  header.top p { display: none; }            /* подпись под заголовком — на низком экране лишняя строка */
  .toolbar { margin-top: var(--отступ-малый); margin-bottom: var(--отступ-малый); }
  .jumpbar { margin-top: 0; margin-bottom: var(--отступ-микро); }
  .panel { padding-top: var(--отступ-малый); padding-bottom: var(--отступ-малый); }
  .panel + .panel { margin-top: var(--отступ-малый); }
  #exMinePanel, #exYesterday { padding-top: var(--отступ-микро); padding-bottom: var(--отступ-микро); }
  #exMinePanel { margin-bottom: var(--отступ-микро); }
}

/* ══════════════ ЦЕЛЬ НАЖАТИЯ: ЧЕКБОКС БЫЛ 13×13 ПРИ ПОРОГЕ 24 ══════════════
   ⛔ ЗАМЕР 09.09.2026 (1366×768) назвал их поимённо: wbsOnlyTasq, scOnlyEmpty,
   ssOnlyForeign, dlOnlyBreached и другие — 13×13 при требовании WCAG 2.2 SC 2.5.8
   в 24×24. Это фильтры списков: промах по ним меняет ВЫБОРКУ, и человек делает
   вывод о данных по не тому набору, не заметив промаха.
   Кегль не трогается — растёт только цель нажатия. */
input[type=checkbox], input[type=radio] {
  inline-size: var(--цель-нажатия-минимум, 24px);
  block-size: var(--цель-нажатия-минимум, 24px);
  accent-color: var(--цвет-акцент);
}

/* Ссылки-действия в панелях («выгрузить одним действием» — замер дал высоту 16 px)
   получают вертикальное поле до того же порога, не меняя кегля. */
/* ⛔ ССЫЛКА-ДЕЙСТВИЕ ВНУТРИ ПАНЕЛИ. Селектор по классу не сработал: ссылки
   рисуются разметкой без класса (замер назвал «выгрузить одним действием» 156×16).
   Поэтому правило — по МЕСТУ: ссылка на выгрузку внутри панели это действие,
   а не текст, и цель нажатия у неё та же, что у кнопки. */
a[href$=".csv"], a[href$=".xlsx"], a[href*="/api/"],
a.actionlink, a[data-действие] {
  display: inline-block;
  padding-block: var(--отступ-малый);
  min-block-size: var(--цель-нажатия-минимум, 24px);
}

/* Ш21 · «Мой день»: вид над той же неделей. Цвета и кегли — ТОЛЬКО токенами
   (перепись литералов О-1 краснеет в обе стороны). */
.exdaybar{display:flex;align-items:center;gap:var(--отступ-малый);margin:var(--отступ-малый) 0}
.exviewnote{color:var(--цвет-текст-3);font-size:var(--кегль-подпись)}
.exday{border:1px solid var(--цвет-граница);border-radius:var(--скругление);
       padding:var(--отступ-средний);margin:var(--отступ-малый) 0;background:var(--цвет-поверхность)}
.exday.today{border-color:var(--цвет-акцент)}
.exday h4{margin:0 0 var(--отступ-малый) 0;font-size:var(--кегль-заголовок)}
.exday .sum{color:var(--цвет-текст-2);font-size:var(--кегль-подпись);margin-bottom:var(--отступ-малый)}
.exday table{width:100%;border-collapse:collapse}
.exday td{padding:var(--отступ-микро) var(--отступ-малый);border-top:1px solid var(--цвет-граница);
          font-size:var(--кегль-таблица)}
.exday td.num{text-align:right;font-variant-numeric:tabular-nums}
.exday td.nomark{color:var(--цвет-внимание)}