/* Финансовый контур института — оформление.
   Печать (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). */
.tabs button,.linkBtn,.loginBox button,.loginBox input,.actions button{
  min-height:max(44px,var(--высота-органа));min-width:var(--цель-нажатия);
  font-family:var(--шрифт)}

/* ─── полоса режима ─── */
.modeBar{padding:var(--отступ-малый) var(--отступ-крупный);
  background:var(--цвет-поверхность-утопленная);
  border-bottom:1px solid var(--цвет-граница);
  color:var(--цвет-текст);font-size:var(--кегль-таблица)}
.modeBar.bad{background:var(--подсветка-тревога);
  border-color:var(--цвет-граница-отказа);color:var(--цвет-тревога-текст)}

/* ─── вход ─── */
.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(--цвет-поверхность)}
.loginBox button{width:100%;padding:0 var(--отступ-средний);
  font-size:var(--кегль-основной);border:0;border-radius:var(--скругление);
  background:var(--цвет-акцент);color:var(--цвет-текст-на-акценте);cursor:pointer}
.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(--отступ-экран)}
.top{display:flex;align-items:center;gap:var(--отступ-крупный);flex-wrap:wrap;
  padding:var(--отступ-средний) 0;border-bottom:1px solid var(--цвет-граница)}
.who strong{display:block;font-size:var(--кегль-заголовок)}
.who .muted{font-size:var(--кегль-служебный)}
.tabs{display:flex;gap:var(--отступ-малый);flex:1 1 auto;flex-wrap:wrap}
.tabs button{padding:0 var(--отступ-средний);border:1px solid var(--цвет-граница-сильная);
  background:var(--цвет-поверхность);border-radius:var(--скругление);
  cursor:pointer;font-size:var(--кегль-таблица);color:var(--цвет-текст)}
.tabs button.on{background:var(--цвет-фон-выбрано);border-color:var(--цвет-фон-выбрано);
  color:var(--цвет-текст-выбрано)}
.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`: шапка, оставшаяся слева, разъезжается
   с разрядами под ней — а разряды и есть то, ради чего берутся табличные цифры.
   Центрированных чисел в этом контуре не было ни одного (проверено грепом
   `text-align:center` по app.css и app.js) — убирать было нечего. */
th.num,td.num{text-align:right;font-variant-numeric:tabular-nums}
td.num{white-space:nowrap}
td.num .cell-cov{display:block;font-size:var(--кегль-подпись);
  color:var(--цвет-текст-3);text-align:right;font-variant-numeric: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}
.actions button{padding:0 var(--отступ-средний);border:1px solid var(--цвет-акцент);
  background:var(--цвет-акцент);color:var(--цвет-текст-на-акценте);
  border-radius:var(--скругление);cursor:pointer;font-size:var(--кегль-таблица)}
.actions button[disabled]{opacity:var(--непрозрачность-отключено);
  cursor:var(--курсор-отключено)}

@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 — файл забирает
   бухгалтер, часто с ноутбука без мыши. */
.row{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.btn{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;
  border:1px solid var(--цвет-граница);border-radius:6px;
  background:var(--цвет-поверхность);color:var(--цвет-текст);text-decoration:none}
.btn:hover{border-color:var(--цвет-акцент);color:var(--цвет-акцент)}

/* ═══ НАБОРЫ ДАННЫХ И ГРАФИКИ (02.09.2026) — только токены ═══ */
.dsGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:var(--отступ-средний)}
.dsCard h3{margin:0 0 var(--отступ-микро)}
.dsReports{margin:var(--отступ-малый) 0}
.dsReportRow{display:flex;gap:var(--отступ-микро);align-items:center;flex-wrap:wrap}
.dsParams,.dsBlock{display:flex;flex-wrap:wrap;gap:var(--отступ-малый);align-items:center;margin:var(--отступ-малый) 0}
.dsRow{display:flex;flex-wrap:wrap;gap:var(--отступ-микро);align-items:center;margin:var(--отступ-микро) 0}
.dsChk{margin-right:var(--отступ-малый)}
.dsPreview input[type=text],.dsParams input[type=text],.dsRow input[type=text]{min-width:12ch;font-family:var(--шрифт);font-size:var(--кегль-таблица)}
.dsPreview th input{width:100%;min-width:9ch}
.dsPreview select,.dsBlock select,.dsRow select{min-height:max(var(--высота-органа),44px);font-family:var(--шрифт)}
.dsGroup td:first-child{font-weight:var(--начертание-выделенное)}
.dsTotal td,.dsTotals th,.dsTotals td{border-top:2px solid var(--цвет-граница)}
.dsTotals{margin-top:var(--отступ-малый)}
.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(--кегль-таблица)}
.chart-data{margin-top:var(--отступ-микро);font-size:var(--кегль-подпись)}
.chart-data summary{cursor:pointer;color:var(--цвет-акцент);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(--отступ-малый)}
@media print{.chart-data[open],.chart-data{display:block}.chart-data summary{display:none}.chart-data table{display:table}}
/* Групповой график: ряды различаются ФОРМОЙ (штриховка, контур), поэтому легенда
   обязательна — восемь форм без подписей это восемь загадок. */
.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%}}

/* Полнота клетки сводной: признак ставит ядро (Полна), браузер только красит подпись */
td.num.dsFull .cell-cov{color:var(--цвет-текст-3);opacity:.7}
td.num.dsPartial .cell-cov{color:var(--цвет-внимание)}
td.num.warn{color:var(--цвет-внимание)}
.cfWords summary{cursor:pointer;font-size:var(--кегль-подпись);color:var(--цвет-текст-2)}


/* Пакет 4.3: баннер давности данных в подписи выгрузки. Одно место на весь контур —
   фразу считает ядро (ДавностьДанных), здесь только вид. */
.давность{color:var(--цвет-внимание)}