/* Финансовый контур института — оформление. Печать (Ctrl+P) поддержана с первого дня: реестры носят на совещания. ⛔ СВОИХ ЦВЕТОВ, КЕГЛЕЙ, ОТСТУПОВ, РАДИУСОВ И ТЕНЕЙ ЗДЕСЬ БОЛЬШЕ НЕТ НИ ОДНОГО. Всё берётся `var(--…)` из `ui-tokens.css`, который подключён в `index.html` ПЕРВЫМ стилем. Источник файла один — `src/Shared.Ui/ui-tokens.css`; в этот `wwwroot` его кладёт сборка (`src/Shared.Ui/Оформление.props`), поэтому править лежащую рядом копию бессмысленно: она перезаписывается. ⛔ ПРЕЖНИЙ БЛОК `:root` СНЯТ ЦЕЛИКОМ, А НЕ ПЕРЕВЕДЁН В ПСЕВДОНИМЫ. Девять своих имён (`--bg`, `--card`, `--ink`, `--muted`, `--line`, `--accent`, `--bad`, `--warn`, `--ok`) — это второй словарь ролей. Оставить их значить `var(--цвет-…)` было заманчиво (диффа меньше), но тогда у каждой роли снова два имени, и следующий экран берёт то, которое короче. Соответствие, по которому шла замена, записано здесь один раз и дальше не нужно: --bg → --цвет-фон-страницы --line → --цвет-граница --card → --цвет-поверхность --accent → --цвет-акцент --ink → --цвет-текст --bad → --цвет-тревога-текст --muted → --цвет-текст-3 --warn → --цвет-внимание --ok → --цвет-успех-текст Пастельные литералы (#eef3f8, #fdecea, #fffaf0, #fbf7f2…) заменены НЕ цветом, а ролью подсветки строки (`--подсветка-*`): по закону 1 системы тинт значения не несёт — значение несут знак и текст, и они в разметке уже есть. */ *{box-sizing:border-box} html,body{margin:0;padding:0; background:var(--цвет-фон-страницы);color:var(--цвет-текст); font-family:var(--шрифт);font-size:var(--кегль-основной); line-height:var(--интерлиньяж-обычный)} /* ⛔ ЯВНОЕ ПРАВИЛО ДЛЯ КАЖДОГО ЭЛЕМЕНТА, У КОТОРОГО ЗАДАН СВОЙ display. Иначе `hidden` проигрывает `display:flex`, и скрытое остаётся на экране. */ [hidden]{display:none !important} /* ⛔ ПОЛ ЦЕЛИ НАЖАТИЯ ГЛАВНЫХ ОРГАНОВ — 44 px, А НЕ 24. `--цель-нажатия` в токенах это WCAG 2.2 SC 2.5.8 (минимум, 24 px); здесь держится усиленный критерий SC 2.5.5 (44×44) — контур открывают рядом с клиентом Pilot на ноутбуке, и «Принять выгрузку заново» промахом стоит спора о составе ведомости. Записано через `max()`, чтобы ручка плотности могла орган УВЕЛИЧИТЬ и не могла опустить ниже 44. Своего числа система не объявляет, поэтому 44 живёт здесь, а не в токенах: заводить десятый радиус/отступ мимо файла токенов запрещено (§ 4.2). ⛔ КНОПКИ — ВИД БЕЗ ФЛАГА ОБОЛОЧКИ (веб-пакет «один продукт», волна 2, план §2.1 и §3.4). Под флагом data-оболочка="2" вид и размер кнопки дают компоненты.css (база 44 px — роль --высота-кнопки, кнопка в клетке таблицы — 24 px, уровни .сис-главная / .сис-тихая) и оболочка.css (вкладки, «Выйти»). Весь КЛАСТЕР — каждое правило, которое задаёт вид или размер кнопки контура (этот список, .loginBox button, .linkBtn, .actions button, .btn), — стоит здесь же, на месте и дословно, под :root:not([data-оболочка="2"]): это откат настройкой WebShell. Приставка прибавляет правилу (0,2,0), и прибавка у всего кластера одинакова — порядок внутри него прежний. В обоих режимах осталось только то, что с кластером не спорит: раскладка (width, display, align-items) и поле .loginBox input — список поделён. Печать (@media print ниже) не переводится. */ :root:not([data-оболочка="2"]) .tabs button,:root:not([data-оболочка="2"]) .linkBtn, :root:not([data-оболочка="2"]) .loginBox button,:root:not([data-оболочка="2"]) .actions button{ min-height:max(44px,var(--высота-органа));min-width:var(--цель-нажатия); font-family:var(--шрифт)} .loginBox input{ min-height:max(44px,var(--высота-органа));min-width:var(--цель-нажатия); font-family:var(--шрифт)} /* ─── полоса режима ─── ⛔ ВИД БЕЗ ФЛАГА ОБОЛОЧКИ. Под флагом data-оболочка="2" (веб-пакет «один продукт», волна 1) полосу рисует оболочка.css: база .сис-полоса в разметке, тон .сис-полоса-тревога ставит app.js через classList. Прежние правила стоят под :root:not([data-оболочка="2"]) — это откат настройкой WebShell, и с оболочкой они не спорят ни специфичностью, ни порядком. */ :root:not([data-оболочка="2"]) .modeBar{padding:var(--отступ-малый) var(--отступ-крупный); background:var(--цвет-поверхность-утопленная); border-bottom:1px solid var(--цвет-граница); color:var(--цвет-текст);font-size:var(--кегль-таблица)} :root:not([data-оболочка="2"]) .modeBar.bad{background:var(--подсветка-тревога); border-color:var(--цвет-граница-отказа);color:var(--цвет-тревога-текст)} /* Узлы полосы режима ставит app.js (полосаРежима) на оба вида сразу, выбирает — флаг (ревью волны 1): без флага знака полосы (.сис-полоса-знак, он и у полосы отказа) до пакета не было, а правило круга стояло своей строкой (перенос .modeRuleBr); под флагом правило — в строку через « · » (.modeRuleSep). */ :root:not([data-оболочка="2"]) .сис-полоса-знак, :root:not([data-оболочка="2"]) .modeRuleSep{display:none} :root[data-оболочка="2"] .modeRuleBr{display:none} /* ─── вход ─── */ .loginScreen{display:flex;align-items:center;justify-content:center;min-height:80vh; padding:var(--отступ-раздел)} .loginBox{background:var(--цвет-поверхность);border:1px solid var(--цвет-граница); border-radius:var(--скругление-крупное); padding:var(--отступ-раздел);width:min(420px,100%);box-shadow:var(--тень-карточки)} .loginBox h1{margin:0 0 var(--отступ-микро);font-size:var(--кегль-заголовок)} .loginBox .sub{margin:0 0 var(--отступ-крупный);color:var(--цвет-текст-3); font-size:var(--кегль-служебный)} .loginBox label{display:block;margin:0 0 var(--отступ-средний); font-size:var(--кегль-служебный);color:var(--цвет-текст-3)} .loginBox input{display:block;width:100%;margin-top:var(--отступ-микро); padding:var(--отступ-малый);font-size:var(--кегль-таблица); border:1px solid var(--цвет-граница-сильная);border-radius:var(--скругление); color:var(--цвет-текст);background:var(--цвет-поверхность)} /* Кнопка входа: ширина — раскладка, в обоих режимах; вид — кластер отката (под флагом «Войти» — .сис-главная в разметке, база даёт 44 px и прозрачность отключённой). */ .loginBox button{width:100%} :root:not([data-оболочка="2"]) .loginBox button{padding:0 var(--отступ-средний); font-size:var(--кегль-основной);border:0;border-radius:var(--скругление); background:var(--цвет-акцент);color:var(--цвет-текст-на-акценте);cursor:pointer} :root:not([data-оболочка="2"]) .loginBox button[disabled]{opacity:var(--непрозрачность-отключено); cursor:var(--курсор-отключено)} .loginBox .note{margin:var(--отступ-крупный) 0 0;font-size:var(--кегль-служебный); color:var(--цвет-текст-3)} .err{margin:var(--отступ-средний) 0 0;padding:var(--отступ-малый) var(--отступ-средний); background:var(--подсветка-тревога);border:1px solid var(--цвет-граница-отказа); border-radius:var(--скругление);color:var(--цвет-отказ); font-size:var(--кегль-таблица)} /* ─── рабочая область ─── */ .app{display:block;max-width:1500px;margin:0 auto; padding:0 var(--отступ-крупный) var(--отступ-экран)} /* Шапка, «кто я» и ряд вкладок — ВИД БЕЗ ФЛАГА ОБОЛОЧКИ (см. полосу режима выше): под флагом header.top.сис-шапка, .сис-верх и nav.tabs.сис-вкладки рисует оболочка.css. */ :root:not([data-оболочка="2"]) .top{display:flex;align-items:center;gap:var(--отступ-крупный);flex-wrap:wrap; padding:var(--отступ-средний) 0;border-bottom:1px solid var(--цвет-граница)} :root:not([data-оболочка="2"]) .who strong{display:block;font-size:var(--кегль-заголовок)} :root:not([data-оболочка="2"]) .who .muted{font-size:var(--кегль-служебный)} :root:not([data-оболочка="2"]) .tabs{display:flex;gap:var(--отступ-малый);flex:1 1 auto;flex-wrap:wrap} :root:not([data-оболочка="2"]) .tabs button{padding:0 var(--отступ-средний);border:1px solid var(--цвет-граница-сильная); background:var(--цвет-поверхность);border-radius:var(--скругление); cursor:pointer;font-size:var(--кегль-таблица);color:var(--цвет-текст)} :root:not([data-оболочка="2"]) .tabs button.on{background:var(--цвет-фон-выбрано);border-color:var(--цвет-фон-выбрано); color:var(--цвет-текст-выбрано)} /* Кнопка-ссылка — кластер отката; под флагом её вид даёт .сис-тихая в разметке («Выйти» рисует оболочка). */ :root:not([data-оболочка="2"]) .linkBtn{border:0;background:none;color:var(--цвет-акцент);cursor:pointer; font-size:var(--кегль-таблица);text-decoration:underline} .stamp{margin:var(--отступ-средний) 0 0; padding:var(--отступ-малый) var(--отступ-средний); background:var(--подсветка-внимание);border:1px solid var(--цвет-граница); border-radius:var(--скругление);font-size:var(--кегль-таблица)} .stamp b{font-weight:var(--начертание-выделенное)} .view{margin-top:var(--отступ-крупный)} .foot{margin-top:var(--отступ-раздел);padding-top:var(--отступ-средний); border-top:1px solid var(--цвет-граница);font-size:var(--кегль-служебный)} .muted{color:var(--цвет-текст-3)} /* ─── карточки и таблицы ─── */ .card{background:var(--цвет-поверхность);border:1px solid var(--цвет-граница); border-radius:var(--скругление-крупное); padding:var(--отступ-крупный);margin:0 0 var(--отступ-крупный)} .card h2{margin:0 0 var(--отступ-микро);font-size:var(--кегль-основной)} .card .cov{margin:0 0 var(--отступ-средний);font-size:var(--кегль-служебный); color:var(--цвет-текст-3)} .warnBox{background:var(--подсветка-внимание);border:1px solid var(--цвет-граница); border-radius:var(--скругление);padding:var(--отступ-малый) var(--отступ-средний); margin:0 0 var(--отступ-средний);font-size:var(--кегль-таблица); color:var(--цвет-внимание)} .emptyBox{background:var(--цвет-поверхность);border:1px dashed var(--цвет-граница); border-radius:var(--скругление);padding:var(--отступ-крупный); font-size:var(--кегль-основной)} .emptyBox b{display:block;margin-bottom:var(--отступ-малый)} .scroll{overflow-x:auto} table{border-collapse:collapse;width:100%;font-size:var(--кегль-таблица); line-height:var(--интерлиньяж-плотный)} th,td{padding:var(--поле-клетки-по-вертикали) var(--поле-клетки-по-горизонтали); border-bottom:1px solid var(--цвет-граница);text-align:left;vertical-align:top} th{background:var(--цвет-поверхность-утопленная); font-weight:var(--начертание-выделенное);white-space:nowrap} /* ⛔ ЧИСЛО — ВПРАВО И ТАБЛИЧНЫМИ ЦИФРАМИ, И ШАПКА ВМЕСТЕ С НИМ. Класс стоит И на `th`, И на `td`: шапка, оставшаяся слева, разъезжается с разрядами под ней — а разряды и есть то, ради чего берутся табличные цифры. Правило — общий слой (таблица.css: `td.num, th.num` вправо и табличными цифрами, `td.num` неразрывно); `th,td{text-align:left}` выше весит меньше (0,0,1). Своя копия снята (гейт ревью волны 2, MEDIUM-2). Центрированных чисел в этом контуре не было ни одного (проверено грепом `text-align:center` по app.css и app.js) — убирать было нечего. ⛔ ПОД ФЛАГОМ ШАПКА ЧИСЛА ПЕРЕНОСИТСЯ (план волны 2 §2.4): `th{white-space:nowrap}` выше держал неразрывными и шапки `th.num`. Поправка — только под флагом: без флага шапки — как до пакета (ворота 12). Держит сторож ШапкаЧислаПереноситсяTests. */ :root[data-оболочка="2"] th.num{white-space:normal} td.num .cell-cov{display:block;font-size:var(--кегль-подпись); color:var(--цвет-текст-3);text-align:right;font-variant-numeric:normal} /* Под флагом оболочки подпись стала 12 px, и строки полноты РЕЕСТРОВ дали бы больше четверти знаков экрана 12-пиксельными (ворота волны 2: доля 12 px ≤ 25 %; registers 1600 — 28,6 % при строке полноты 12 px, браузер, 26.09.2026): строка стоит под каждой ценой и суммой. В реестрах строка полноты — служебным кеглем; иерархию держит цвет --цвет-текст-3, а не размер. ⛔ ТОЛЬКО В ЧЕТЫРЁХ ТАБЛИЦАХ ЭКРАНА РЕЕСТРОВ, А НЕ В ЛЮБОЙ td.num. Клетка числа не переносится (nowrap), и строка полноты держит ширину столбца. В сводных таблицах она длиннее («доходных договоров с ценой 1, субподрядных с ценой 1»), и 13 px выталкивали их за окно 1366: «Движение денег» — прокрутка вбок 1327 > 1298, период «01.01.2026 — 31.01.2026» в три строки (клетка 137 → 78 px), высота таблицы 438 → 585 px; «Итоги» — 575 → 770 px (ревью этапа 1). Цена в реестрах при 1366: окно реестра, которое прокручивается вбок и при 12 px, шире на 81 px (1557 → 1638), высота +38 px (+2 %). Список таблиц держит сторож ГеометрияПодъёмаКеглейTests. */ :root[data-оболочка="2"] table[data-таблица="договоры"] td.num .cell-cov, :root[data-оболочка="2"] table[data-таблица="акты"] td.num .cell-cov, :root[data-оболочка="2"] table[data-таблица="допсоглашения"] td.num .cell-cov, :root[data-оболочка="2"] table[data-таблица="субподряд"] td.num .cell-cov{font-size:var(--кегль-служебный)} /* ⛔ ПЕРЕНОС СТРОКИ ПОЛНОТЫ — ПОИМЁННО, А НЕ У ВСЕХ .cell-cov (ревью волны 2 веб-пакета, этап 2; сторож ПереносСтрокиПолнотыTests). Число над строкой не переносится никогда (nowrap у td.num), а суммы внутри строки держит неразрывный пробел между разрядами (app.js, разрядыНеРвутся). · «Действующая цена» реестра договоров — ПОД ФЛАГОМ, клетка с классом полнота-переносится (app.js, ячейкаЧисла). Реестр уходил за край окна и до пакета: строка полноты этого столбца («цена договора … → ДС-2 добавляет … = … на дату») держала его одной строкой — окно 1472 > 1298 (1366) и > 1432 (1600) до волны 2, 1638 под флагом после подъёма кегля. Первая редакция разрешала перенос строкам полноты всех четырёх таблиц и рвала суммы посередине («1 288» / «000,00», 3 суммы при 1366), а в столбце «Цена» переносила и короткие строки — 16 клеток в две строки; содержимое окна договоров выросло 757 → 1017 px. Теперь (браузер, стенд, 27.09.2026, флаг): окно договоров 1638 → 1298 (1366) и 1432 (1600), прокрутки вбок нет, разорванных сумм 0, переносятся 3 клетки одного столбца; высота окна упёрта в потолок .таблица-окно (72vh: 551 и 646 px) и прежняя, а СОДЕРЖИМОЕ выросло 757 → 806 px (+49; с переносом у всех строк полноты было 1017, +260) — прокрутка вбок сменилась прокруткой вниз. Без флага — как до пакета (откат): строка одной строкой, окно прокручивается вбок. · «Результат месяца» — В ОБОИХ РЕЖИМАХ. Числа этой таблицы стоят в td.num и без флага: это починка разметки, откат её не возвращает (план волны 2 §2.1, «Чего откат не возвращает», п. 2). Основание ФОТ — свободный текст бухгалтера без предела длины (ФондОплатыТруда.Внести проверяет месяц и сумму) — встало строкой полноты в td.num и не переносилось: основание в 147 знаков выталкивало окно таблицы вбок — под флагом 1486 > 1332 (1366) и > 1466 (1600), в откате 1405 > 1332 (1366). До пакета оно шло в обычной клетке через « · » и переносилось. С переносом (браузер, стенд, 27.09.2026): окно 1332 и 1466, вбок нет в обоих режимах; содержимое 503 px под флагом и 483 px в откате. До пакета было 410 и 393 px: откат этой таблицы с видом до пакета не совпадает — это названная починка разметки. */ :root[data-оболочка="2"] td.num.полнота-переносится .cell-cov, table[data-таблица="результат"] td.num .cell-cov{white-space:normal} tr.noCard td{background:var(--подсветка-внимание)} .tag{display:inline-block;padding:0 var(--отступ-малый); border-radius:var(--скругление-крупное);font-size:var(--кегль-подпись); border:1px solid var(--цвет-граница);background:var(--цвет-поверхность); color:var(--цвет-текст-3)} .tag.bad{background:var(--подсветка-тревога);border-color:var(--цвет-граница-отказа); color:var(--цвет-тревога-текст)} .tag.warn{background:var(--подсветка-внимание);border-color:var(--цвет-граница); color:var(--цвет-внимание)} .tag.ok{background:var(--подсветка-успех);border-color:var(--цвет-граница); color:var(--цвет-успех-текст)} /* ─── три числа руководителя ─── */ .three{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:var(--отступ-средний);margin:0 0 var(--отступ-крупный)} .big{background:var(--цвет-поверхность);border:1px solid var(--цвет-граница); border-radius:var(--скругление-крупное);padding:var(--отступ-крупный)} .big .lbl{font-size:var(--кегль-служебный);color:var(--цвет-текст-3); text-transform:uppercase;letter-spacing:.04em} .big .val{font-size:var(--кегль-крупное-число); margin:var(--отступ-малый) 0 var(--отступ-микро); font-variant-numeric:tabular-nums} .big .val.unknown{color:var(--цвет-текст-3)} .big .cov{font-size:var(--кегль-служебный);color:var(--цвет-текст-3)} .notes{margin:0;padding-left:var(--отступ-крупный);font-size:var(--кегль-таблица)} .notes li{margin:0 0 var(--отступ-малый)} .pre{white-space:pre-wrap;font-family:var(--шрифт-моно); font-size:var(--кегль-служебный);line-height:var(--интерлиньяж-обычный); background:var(--цвет-поверхность-утопленная);border:1px solid var(--цвет-граница); border-radius:var(--скругление);padding:var(--отступ-малый); max-height:340px;overflow:auto} .actions{display:flex;gap:var(--отступ-малый);align-items:center; margin:0 0 var(--отступ-средний);flex-wrap:wrap} /* Кнопки ряда действий — кластер отката: без флага все залиты акцентом, как до пакета. Под флагом — база, а отправка формы — .сис-главная в разметке, одна на форму (план волны 2 §3.4). */ :root:not([data-оболочка="2"]) .actions button{padding:0 var(--отступ-средний);border:1px solid var(--цвет-акцент); background:var(--цвет-акцент);color:var(--цвет-текст-на-акценте); border-radius:var(--скругление);cursor:pointer;font-size:var(--кегль-таблица)} :root:not([data-оболочка="2"]) .actions button[disabled]{opacity:var(--непрозрачность-отключено); cursor:var(--курсор-отключено)} /* Ряд кнопок движения денег («Загрузить файл…», «Сопоставить…»): класс стоял в разметке с 10.09.2026, правила не было — кнопки слипались без промежутков (§4 Б3). Только токены. */ .acts{display:flex;flex-wrap:wrap;gap:var(--отступ-малый);align-items:center; margin:0 0 var(--отступ-средний)} /* ─── полоса отказа сети (§4 А6) ─── Служба не отвечает — это СОСТОЯНИЕ, а не пустой экран. Полоса стоит выше формы входа и рабочей области; текст кладёт скрипт через textContent (у контура строгий `style-src 'self'`, встроенных стилей нет). Скрыта атрибутом hidden — правило `[hidden]{display:none !important}` выше. */ :root:not([data-оболочка="2"]) .netFail{padding:var(--отступ-малый) var(--отступ-крупный); background:var(--подсветка-тревога);border-bottom:2px solid var(--цвет-граница-отказа); color:var(--цвет-тревога-текст);font-size:var(--кегль-таблица)} .netFail b{font-weight:var(--начертание-выделенное)} /* ПЕЧАТЬ. Без флага оболочки шапки на листе нет, как до пакета: `.top{display:none !important}`. Под флагом шапку на лист возвращает класс-разрешение .сис-шапка-на-листе в разметке (правило оболочки сильнее этого специфичностью): строка шапки — название контура, стол роли и сборка — подписывает лист. #stamp подписывает не всякий лист: экраны «Ставки», «Периоды», «Таблицы», «Графики» и «О контуре» его гасят (ревью волны 1). «Кто я» на листе не нужен — правило ниже, под флагом; вкладки, переключатель контуров и «Выйти» прячет сама оболочка. */ @media print{ .top,.tabs,.linkBtn,.actions,.modeBar{display:none !important} .app{max-width:none;padding:0} .card{break-inside:avoid;border:0;padding:0 0 var(--отступ-малый)} /* Лист белым делает сам файл токенов (там @media print перекладывает роли, включая тёмную тему). Строка оставлена явной, чтобы связь была видна. */ body{background:var(--цвет-фон-страницы)} } /* Работа №14: ссылки выгрузки. Выглядят кнопками, потому что ведут себя как действия; цель нажатия не ниже пола WCAG 2.2 SC 2.5.5 — файл забирает бухгалтер, часто с ноутбука без мыши. */ /* .btn — кластер отката. Под флагом оболочки вид кнопки даёт база компоненты.css: