@charset "utf-8";
/* ═══════════════════════════════════════════════════════════════════════════
   ЭКРАНЫ ДЛЯ ПОСЧИТАННОГО: ПРЕТЕНЗИЯ · ЗАВЕДЕНИЕ ПО ШАБЛОНУ · СВЯЗИ РАЗДЕЛОВ

   ⛔ ОТДЕЛЬНЫЙ ФАЙЛ, А НЕ ДОПИСКА В app.css: экраны заводились параллельно
   с правкой соседнего захода, и общий файл означал бы столкновение на каждой
   строке. Роли (--line, --muted, --accent) берутся из app.css, а сами значения —
   из системы оформления (src/Shared.Ui/ui-tokens.css, подключён первым в
   index.html). Второй палитры здесь нет и быть не должно.

   ⚡ ГЛАВНОЕ ПРАВИЛО ЭТОГО ФАЙЛА: ВЫВЕДЕННОЕ СИСТЕМОЙ ОТЛИЧАЕТСЯ ОТ НАЗВАННОГО
   ЧЕЛОВЕКОМ РАЗМЕТКОЙ, а не тем, что кто-то дочитает предложение до конца.
   Класс `.derived` — пунктирная рамка и значок «∿»; `.byhuman` — сплошная.
   ═══════════════════════════════════════════════════════════════════════════ */

.scrbox{background:var(--цвет-поверхность);border:1px solid var(--line);border-radius:var(--скругление-крупное);
        padding:var(--отступ-малый) var(--отступ-средний);margin-bottom:var(--отступ-малый);font-size:var(--кегль-таблица)}
.scrbox h4{margin:0 0 var(--отступ-малый);font-size:var(--кегль-таблица)}
.scrbox.bad{background:var(--подсветка-тревога);border-color:var(--цвет-тревога-текст);color:var(--цвет-тревога-текст)}
.scrbox.warn{background:var(--подсветка-внимание);border-color:var(--цвет-внимание);color:var(--цвет-внимание)}
.scrbox.ok{background:var(--подсветка-успех);border-color:var(--цвет-успех);color:var(--цвет-успех-текст)}
.scrbox .sub{color:var(--muted);font-size:var(--кегль-служебный);margin-top:var(--отступ-микро)}
.scrbox ul{margin:var(--отступ-малый) 0 0;padding-left:var(--отступ-крупный)}
.scrbox li{margin:var(--отступ-микро) 0}

/* ⚡ ГЛАВНАЯ ФРАЗА ПОДТВЕРЖДЕНИЯ. Её собирает ЯДРО, здесь только показ:
   спрашивают человека ровно ею, и мелкий шрифт тут означал бы, что массовое
   действие подтверждают не читая. */
.bigcaption{font-size:var(--кегль-основной);font-weight:var(--начертание-выделенное);line-height:var(--интерлиньяж-обычный);
            background:var(--подсветка-акцент);border:1px solid var(--цвет-акцент-2);border-radius:var(--скругление-крупное);
            padding:var(--отступ-средний) var(--отступ-крупный);margin-bottom:var(--отступ-малый)}

/* ⛔ ЧИСЛА — ВПРАВО И ТАБЛИЧНЫМИ ЦИФРАМИ, шапка вместе с ними (правило системы).
   `th.num` берёт то же правило, что и `td.num`: столбец, у которого подпись слева,
   а число справа, читается как два разных столбца. */
.scrtab{width:100%;border-collapse:collapse;font-size:var(--кегль-таблица)}
.scrtab th{background:var(--accent);color:var(--цвет-текст-на-акценте);text-align:left;padding:var(--поле-клетки-по-вертикали) var(--поле-клетки-по-горизонтали);
           font-weight:var(--начертание-выделенное);font-size:var(--кегль-служебный);position:sticky;top:0}
.scrtab td{padding:var(--поле-клетки-по-вертикали) var(--поле-клетки-по-горизонтали);border-bottom:1px solid var(--line);vertical-align:top}
.scrtab tr:nth-child(even) td{background:var(--цвет-поверхность-утопленная)}
.scrtab th.num,.scrtab td.num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
/* Шапка двух числовых столбцов «Претензии» («Просрочка, раб. дн.» и «Из них
   заказчик») приходит из screens.js без класса, а JS в эту волну не трогается.
   Поэтому правило адресует их ПОЛОЖЕНИЕМ и только внутри своего блока `#clTable`:
   слепое `th:nth-child(4)` задело бы соседнюю таблицу, где четвёртый столбец —
   «Основание», то есть текст. Клетки под ними уже `td.num`. */
#clTable .scrtab th:nth-child(4),#clTable .scrtab th:nth-child(5){text-align:right}
.scrtab .sect{font-weight:var(--начертание-выделенное);background:var(--цвет-поверхность-утопленная) !important}
.scrtab .skip td{color:var(--muted)}
.scrtab .exists td{color:var(--цвет-внимание)}

.pill{display:inline-block;font-size:var(--кегль-подпись);font-weight:var(--начертание-выделенное);border-radius:var(--скругление);
      padding:0 var(--отступ-малый);margin-right:var(--отступ-малый);white-space:nowrap}
.pill.create{background:var(--подсветка-успех);color:var(--цвет-успех-текст)}
.pill.exists{background:var(--подсветка-внимание);color:var(--цвет-внимание)}
.pill.skip{background:var(--цвет-поверхность-утопленная);color:var(--цвет-текст-2)}
.pill.late{background:var(--подсветка-тревога);color:var(--цвет-тревога-текст)}
.pill.timely{background:var(--подсветка-успех);color:var(--цвет-успех-текст)}

/* ⚡ ВЫВЕДЕНО СИСТЕМОЙ. Пунктир и значок — чтобы отличие было видно ГЛАЗОМ,
   а не прочитано. Подтверждённое человеком становится сплошным. */
.derived{border:1px dashed var(--цвет-граница-сильная);border-radius:var(--скругление-крупное);padding:var(--отступ-малый) var(--отступ-средний);
         background:var(--цвет-поверхность-утопленная);margin:var(--отступ-малый) 0;font-size:var(--кегль-таблица)}
.derived::before{content:'∿ выведено системой';display:block;font-size:var(--кегль-подпись);
                 font-weight:var(--начертание-выделенное);color:var(--muted);letter-spacing:.03em;margin-bottom:var(--отступ-микро)}
.byhuman{border:1px solid var(--цвет-успех-текст);border-radius:var(--скругление-крупное);padding:var(--отступ-малый) var(--отступ-средний);
         background:var(--подсветка-успех);margin:var(--отступ-малый) 0;font-size:var(--кегль-таблица)}
.byhuman::before{content:'✔ подтверждено ГИПом';display:block;font-size:var(--кегль-подпись);
                 font-weight:var(--начертание-выделенное);color:var(--цвет-успех-текст);letter-spacing:.03em;margin-bottom:var(--отступ-микро)}
.dropped{border:1px solid var(--цвет-граница);border-radius:var(--скругление-крупное);padding:var(--отступ-малый) var(--отступ-средний);
         background:var(--цвет-поверхность-утопленная);margin:var(--отступ-малый) 0;font-size:var(--кегль-таблица);color:var(--muted)}
.dropped::before{content:'✖ снято ГИПом';display:block;font-size:var(--кегль-подпись);
                 font-weight:var(--начертание-выделенное);color:var(--muted);letter-spacing:.03em;margin-bottom:var(--отступ-микро)}

.depline{margin:var(--отступ-микро) 0}
.depline b{font-weight:var(--начертание-выделенное)}
.depwhy{font-size:var(--кегль-подпись);color:var(--muted);margin-top:var(--отступ-микро)}
.depacts{margin-top:var(--отступ-малый);display:flex;gap:var(--отступ-малый);flex-wrap:wrap}
.depacts button{border:1px solid var(--цвет-граница-сильная);background:var(--цвет-поверхность);border-radius:var(--скругление);
                padding:0 var(--отступ-средний);font-family:var(--шрифт);font-size:var(--кегль-служебный);cursor:pointer;color:var(--ink);
                min-height:max(var(--высота-органа),44px);min-width:max(var(--цель-нажатия),44px)}
.depacts button:hover{background:var(--цвет-фон-наведение)}
.depacts button:focus-visible{outline:var(--обводка-фокуса) solid var(--цвет-фокус);outline-offset:var(--отступ-обводки-фокуса)}

.batch{display:flex;gap:var(--отступ-малый);align-items:center;padding:var(--отступ-малый) 0;
       border-top:1px solid var(--line);font-size:var(--кегль-таблица);flex-wrap:wrap}
.batch:first-of-type{border-top:0}
.batch .grow{flex:1 1 auto}
.batch button{border:1px solid var(--цвет-граница-сильная);background:var(--цвет-поверхность);border-radius:var(--скругление);
              padding:0 var(--отступ-средний);font-family:var(--шрифт);font-size:var(--кегль-служебный);cursor:pointer;color:var(--ink);
              min-height:max(var(--высота-органа),44px);min-width:max(var(--цель-нажатия),44px)}
.batch button:hover{background:var(--цвет-фон-наведение)}
.batch button:focus-visible{outline:var(--обводка-фокуса) solid var(--цвет-фокус);outline-offset:var(--отступ-обводки-фокуса)}
.batch.undone{color:var(--muted)}

/* В-2: состав работы в карточке. Список — плотный: позиций бывает до сорока,
   и каждая лишняя строка отступа уводит нижние за край карточки. */
.compbox{margin-top:12px;padding-top:10px;border-top:1px solid var(--цвет-граница)}
.complist{list-style:none;margin:6px 0;padding:0;max-height:38vh;overflow:auto}
.complist li{padding:2px 0}
.complist label{display:flex;gap:8px;align-items:baseline;cursor:pointer}
.comprow{display:flex;gap:8px;margin-top:8px}
.comprow input{flex:1;min-width:0}