/* ══ UI-кит WMS — компоненты ══════════════════════════════════════════════════════════════════════
   Только var(--…) из tokens.css: литерал цвета, тени или радиуса здесь роняет `make check`
   (scripts/check_tokens.py). Устройство компонентов — дашборд WBD (Д-css, Д); чего у дашборда нет —
   по образцу устройства FLUX (docs/07-dizayn.md, раздел 4), код FLUX не переносится.
   Классы — по-русски транслитом, как в дашборде. Витрина всех компонентов — страница /ui.
   ═════════════════════════════════════════════════════════════════════════════════════════════════ */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--sans); font-size:var(--fs-body); line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none !important}}
[hidden]{display:none !important}
.vizually-skryt{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap}

/* ── Каркас страницы ── */
.stranica{max-width:1280px; margin:0 auto; padding:24px 24px 48px}
.shapka{display:flex; flex-wrap:wrap; align-items:flex-end; gap:16px 24px; margin-bottom:24px}
.shapka .tekst{min-width:0}
.shapka .sprava{margin-left:auto; display:flex; gap:10px; align-items:center; flex-wrap:wrap}
h1{font-size:var(--fs-h1); line-height:1.34; margin:0; font-weight:700; letter-spacing:-.025em; text-wrap:balance}
.sub{color:var(--muted); font-size:var(--fs-sub); line-height:1.43; margin:4px 0 0; max-width:62ch}
.hint{font-size:var(--fs-hint); color:var(--muted); line-height:1.4; margin:0}
/* Сетка карточек — две колонки, число карточек чётное: пустых ячеек не бывает (правило владельца 20.09.2026) */
.setka{display:grid; gap:var(--gap); grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start}
@media (max-width:900px){.setka{grid-template-columns:minmax(0,1fr)}}
.ryad{display:flex; flex-wrap:wrap; gap:10px; align-items:center}
.stolbik{display:flex; flex-direction:column; gap:12px}
.otstup{margin-top:var(--gap)}

/* ── 1. Карточка — Д-css .card (r18, граница + окрашенная тень), заголовок 13/650, подзаголовок 11.5 ── */
.card{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-card); box-shadow:var(--shadow); min-width:0;
  transition:border-color .18s ease, box-shadow .18s ease;
}
.card:hover{border-color:var(--border-2); box-shadow:var(--shadow-lg)}
.card + .card{margin-top:var(--gap)}
.setka > .card + .card{margin-top:0}
.card > h2{font-size:var(--fs-card); letter-spacing:.01em; font-weight:650; color:var(--ink); margin:0; padding:14px 16px 0;
  display:flex; align-items:center}
.card > h2 .sub2{display:block; margin-top:3px; font-size:var(--fs-hint); font-weight:400; letter-spacing:0; color:var(--muted); line-height:1.4}
.card > h2 .zag{display:block}
.card > .body{padding:12px 14px 14px; display:flex; flex-direction:column; gap:11px}
/* разделитель внутри карточки — Д-css .razdel-linia */
.razdel-linia{display:flex; align-items:center; gap:10px; margin:6px 0 0;
  font-size:var(--fs-caps); font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.razdel-linia::after{content:''; flex:1; height:1px; background:var(--border)}

/* ── 2. Кнопка — НОВЫЙ КОМПОНЕНТ, НА ОДОБРЕНИЕ ВЛАДЕЛЬЦУ ──
   В дашборде кнопки-действия нет (только .knopka-fraza и .kal-knopka). Форма — пилюля сайта (.btn,
   три варианта), размеры — дашборда: высота 32, кегль 12.5/600 (07 раздел 1.5 п. 6). Свечение и
   блик сайта не берём: рабочий экран не «парит». Варианты: основная, вторичная, опасная, тихая. */
.knopka{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  min-height:var(--control-h); padding:0 var(--control-px);
  border-radius:var(--r-pill); border:1px solid transparent;
  font:600 var(--fs-control)/1.2 var(--sans); white-space:nowrap; text-decoration:none;
  cursor:pointer; transition:background .15s ease, border-color .15s ease, color .15s ease, transform .1s ease;
}
.knopka:active:not(:disabled){transform:translateY(1px)}
.knopka:disabled,.knopka[aria-disabled="true"]{opacity:.4; cursor:not-allowed}
.knopka.osnovnaya{background:var(--accent); border-color:var(--accent); color:var(--on-accent); box-shadow:var(--shadow-btn)}
.knopka.osnovnaya:hover:not(:disabled){background:var(--accent-dark); border-color:var(--accent-dark)}
.knopka.vtorichnaya{background:var(--surface); border-color:var(--border-2); color:var(--ink)}
.knopka.vtorichnaya:hover:not(:disabled){border-color:var(--ink-2)}
.knopka.opasnaya{background:var(--surface); border-color:var(--bad); color:var(--bad)}
.knopka.opasnaya:hover:not(:disabled){background:var(--bad); color:var(--on-accent)}
.knopka.opasnaya.zalita{background:var(--bad); color:var(--on-accent)}
.knopka.tihaya{background:transparent; color:var(--ink-2)}
.knopka.tihaya:hover:not(:disabled){background:var(--accent-soft); color:var(--accent-dark)}
.knopka.shirokaya{width:100%}
.knopka svg{width:14px; height:14px; flex:none}

/* ── 3. Поле ввода и метка — Д-css .field: подпись 12.5 --ink-2, поле 13.5 на --surface-2, r10,
   фокус — обводка акцента. Ошибка — под полем при вводе (07 раздел 4.4). ── */
.pole{display:flex; flex-direction:column; gap:5px; min-width:0}
.pole > label,.pole .metka-polya{font-size:var(--fs-label); color:var(--ink-2); display:flex; justify-content:space-between; gap:8px}
.vvod{
  width:100%; min-height:var(--control-h); padding:0 10px;
  background:var(--surface-2); color:var(--ink);
  border:1px solid var(--border-2); border-radius:var(--r-field);
  font:inherit; font-family:var(--num); font-variant-numeric:tabular-nums; font-size:var(--fs-field);
}
.comfortable .vvod{font-size:var(--fs-control)}
.vvod::placeholder{color:var(--muted); opacity:1}
.vvod:focus{outline:2px solid var(--accent); outline-offset:-1px; border-color:transparent}
.vvod:disabled{opacity:.4; cursor:not-allowed}
.vvod.kod{letter-spacing:.3em; text-align:center; font-weight:600}
.pole.oshibka .vvod{border-color:var(--bad); background:var(--bad-bg)}
.pole.oshibka .vvod:focus{outline-color:var(--bad)}
.pole .pod-polem{font-size:var(--fs-hint); color:var(--muted); line-height:1.4; margin:0}
.pole.oshibka .pod-polem{color:var(--bad)}
select.vvod{appearance:none; padding-right:28px; background-image:none}
input[type=checkbox]{accent-color:var(--accent); width:var(--check-size); height:var(--check-size); margin:0; cursor:pointer; vertical-align:middle}

/* ── 4. Тумблер — Д-css .tm-track/.tm-knob: два положения. Без модификатора — выбор режима (дорожка
   синяя всегда); .vkl — включено/выключено (выключенное гасится в --steel). Разметка: button
   role="switch" aria-checked. ── */
.tumbler{display:inline-flex; align-items:center; gap:9px; padding:0; background:none; border:0; cursor:pointer;
  font:500 var(--fs-label)/1.3 var(--sans); color:var(--ink-2); text-align:left}
.tumbler .dorozhka{position:relative; width:var(--tumbler-w); height:var(--tumbler-h); flex:none;
  background:var(--accent); border-radius:var(--r-pill); box-shadow:var(--shadow-track); transition:background .18s ease}
.tumbler .ruchka{position:absolute; top:3px; left:3px; width:var(--knob); height:var(--knob);
  background:var(--on-accent); border-radius:var(--r-round); box-shadow:var(--shadow-knob); transition:transform .18s ease}
.tumbler[aria-checked="true"] .ruchka{transform:translateX(calc(var(--tumbler-w) - var(--knob) - 6px))}
.tumbler:hover .dorozhka{background:var(--accent-dark)}
.tumbler.vkl[aria-checked="false"] .dorozhka{background:var(--steel)}
.tumbler.vkl[aria-checked="false"]:hover .dorozhka{background:var(--ink-2)}
.tumbler:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:var(--r-check)}
.tumbler:disabled{opacity:.4; cursor:not-allowed}

/* ── 5. Сегменты и пилюли — Д-css .seg (группа r13, кнопка r10, 12px) и .seg.mini (пилюли r100).
   Сегменты — три и больше положений; пилюли — быстрые значения и фильтры со счётчиком. ── */
.seg{display:inline-flex; flex-wrap:wrap; gap:3px; padding:3px; width:fit-content; max-width:100%;
  background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-seg)}
.seg button{flex:0 0 auto; min-height:calc(var(--control-h) - 8px); padding:0 12px; background:transparent; color:var(--muted);
  border:0; border-radius:var(--r-seg-btn); font:500 var(--fs-seg)/1.2 var(--sans); cursor:pointer;
  transition:background .15s ease, color .15s ease}
.comfortable .seg button{font-size:var(--fs-control); padding:0 18px}
.seg button:hover{color:var(--ink-2); background:var(--surface)}
.seg button[aria-pressed="true"]{background:var(--surface); color:var(--ink); font-weight:600; box-shadow:var(--shadow-seg)}
.seg button:focus-visible{outline:2px solid var(--accent); outline-offset:-2px}
.seg button .schet{margin-left:6px; font-variant-numeric:tabular-nums; color:var(--muted); font-weight:500}
.seg.mini{gap:5px; padding:0; background:transparent; border:0}
.seg.mini button{min-height:0; padding:3px 11px; border-radius:var(--r-pill); background:var(--surface-2); color:var(--muted); font-size:var(--fs-hint)}
.seg.mini button:hover{color:var(--ink-2); background:var(--accent-soft)}
.seg.mini button[aria-pressed="true"]{background:var(--accent-soft); color:var(--accent-dark); font-weight:600; box-shadow:none}

/* ── 6. Бейдж состояния — Д-css .metka: 10.5/600, r100, заливка цвета смысла + насыщенный текст.
   Статус — только бейджем, не красным словом в столбце (Д, принцип 6). ── */
.metka{display:inline-block; vertical-align:middle; padding:2px 8px; border-radius:var(--r-pill); white-space:nowrap;
  font:600 var(--fs-badge)/1.5 var(--sans); letter-spacing:.02em;
  background:var(--surface-2); color:var(--muted); border:1px solid var(--border)}
.metka.ok{background:var(--good-bg); color:var(--good); border-color:transparent}
.metka.vnimanie{background:var(--warn-bg); color:var(--warn); border-color:transparent}
.metka.stop{background:var(--bad-bg); color:var(--bad); border-color:transparent}
.metka.zam{background:var(--accent-soft); color:var(--accent-dark); border-color:transparent}
.metka.obshchiy{background:var(--amber-bg); color:var(--amber); border-color:transparent}

/* ── 7. Подсказка «i» — Д-css .info (16px, --accent-soft) + общий слой .tip (position:fixed: не
   обрезается прокруткой таблицы). Текст — в data-tip, слой рисует ui.js. ── */
.info{display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:var(--info-size); height:var(--info-size); margin-left:6px; padding:0;
  border:0; border-radius:var(--r-round); background:var(--accent-soft); color:var(--accent);
  font:600 10px/1 var(--sans); cursor:help; vertical-align:middle}
.info:hover,.info[aria-expanded="true"]{background:var(--accent); color:var(--on-accent)}
.tip{position:fixed; z-index:60; max-width:320px; max-height:calc(100vh - 24px); overflow-y:auto;
  background:var(--surface); color:var(--ink-2); border:1px solid var(--border-2);
  border-radius:var(--r-tip); padding:11px 13px; font-size:var(--fs-label); line-height:1.5;
  box-shadow:var(--shadow-tip); visibility:hidden; opacity:0; pointer-events:none; transition:opacity .12s ease}
.tip.on{visibility:visible; opacity:1; pointer-events:auto}
.tip b{color:var(--ink); font-weight:650}

/* ── 8. Плашка ошибки — Д-css .warnbar (r8, заливка смысла, граница currentColor). Говорит, что не так
   и что сделать. Вариант .skan — ошибка скана на ТСД: во всю ширину, крупно (07 раздел 4.3). ── */
.plashka{padding:10px 13px; border-radius:var(--r-plashka); font-size:var(--fs-label); line-height:1.45;
  background:var(--warn-bg); color:var(--warn); border:1px solid currentColor}
.plashka.bad{background:var(--bad-bg); color:var(--bad)}
.plashka.ok{background:var(--good-bg); color:var(--good)}
.plashka b{font-weight:650}
.plashka p{margin:0}
.plashka p + p{margin-top:4px}
.plashka.skan{display:flex; flex-direction:column; gap:12px; padding:16px; border-width:2px; font-size:var(--fs-control)}
.plashka.skan .chto{font-size:var(--fs-h1); font-weight:700; letter-spacing:-.02em; line-height:1.2}
.plashka.skan .kod-skan{font-family:var(--num); font-variant-numeric:tabular-nums; font-weight:600; color:var(--ink); white-space:nowrap}
/* Список кодов адресов в тексте (страница проверки наклейки): код не рвётся на дефисе. */
.spisok-kodov > span{font-family:var(--num); font-variant-numeric:tabular-nums; white-space:nowrap}

/* ── 9. Таблица-эталон — Д «Эталон таблицы» + Д-css .tw: рамка r12, ячейка 11×12, шапка 42 в одну
   линию, числа вправо tabular, название забирает остаток ширины. Слой действий — по устройству FLUX
   Orders (07 раздел 4.1): чекбокс в строке и «выбрать всё», панель «N выбрано · действия · сбросить».
   Массовые кнопки видны всегда и неактивны до выбора строк (svoya-wms-trebovaniya, «Массовые
   операции обязаны быть штатными»). ── */
.tablica-blok{display:flex; flex-direction:column; gap:10px}
.panel-tablicy{display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between}
.panel-tablicy .poisk{flex:0 1 260px}
.massovye{display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:8px 10px;
  background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-table)}
.massovye .vybrano{font-size:var(--fs-label); color:var(--muted); font-variant-numeric:tabular-nums; margin-right:4px; min-width:84px}
.massovye.est-vybor{background:var(--accent-soft); border-color:transparent}
.massovye.est-vybor .vybrano{color:var(--accent-dark); font-weight:600}
.massovye .sbros{margin-left:auto}
.tw{overflow-x:auto; overflow-y:hidden; max-width:100%; border:1px solid var(--border); border-radius:var(--r-table);
  -webkit-overflow-scrolling:touch}
.tablica{border-collapse:separate; border-spacing:0; width:100%; font-size:var(--fs-table)}
.tablica th,.tablica td{padding:var(--cell-py) var(--cell-px); text-align:right; border-bottom:1px solid var(--border);
  white-space:nowrap; vertical-align:middle}
.tablica th{font-size:var(--fs-label); font-weight:500; color:var(--ink-2); height:var(--th-h); padding-top:0; padding-bottom:0;
  background:var(--surface-2)}
.tablica td{color:var(--ink-2)}
.tablica tbody tr:hover td{background:var(--surface-2)}
.tablica tbody tr:last-child td{border-bottom:0}
.tablica tbody tr.vybrana td{background:var(--accent-soft)}
.tablica td.chisla,.tablica td.chislo{font-family:var(--num); font-variant-numeric:tabular-nums; color:var(--ink)}
.tablica th.nazv,.tablica td.nazv{text-align:left; white-space:normal; width:100%; min-width:180px}
.tablica td.nazv{font-weight:500; color:var(--ink)}
.tablica th.sleva,.tablica td.sleva{text-align:left}
.tablica th.vybor,.tablica td.vybor{width:1%; padding-right:0; text-align:left}
.tablica td .vtoraya{display:block; font-size:var(--fs-hint); color:var(--muted); font-weight:400}
.tablica tfoot td{background:var(--surface-2); font-weight:600; color:var(--ink); border-top:1px solid var(--border); border-bottom:0}
.tablica .menu-stroki{min-height:0; padding:2px 8px}
/* пустое состояние: почему пусто и одно действие (07 раздел 4.7) */
.pusto{padding:24px 16px; text-align:center; color:var(--muted); font-size:var(--fs-label)}
.pusto .knopka{margin-top:10px}

/* ── 10. Ширина колонок тянется мышью — одобрен владельцем 08.10.2026 ──
   Идея владельца 01.10 и 08.10.2026, как в amoCRM: ручка-разделитель только в строке заголовка, видна при наведении
   на заголовок; в теле таблицы вертикальных линий нет — сеткой таблица не становится. Общая ширина постоянна: шире
   одна колонка — уже соседняя справа. Подключение — id и data-shiriny у таблицы, поведение — static/shiriny.js.
   Селекторы через «>»: вложенная таблица (раскрытие строки) живёт своими ширинами. */
.tablica[data-shiriny] > thead > tr > th{position:relative}
.tablica.shiriny-gotovy{table-layout:fixed}
.tablica.shiriny-gotovy > tbody > tr > td:not([colspan]),
.tablica.shiriny-gotovy > tfoot > tr > td:not([colspan]){overflow:hidden; text-overflow:ellipsis}
/* название ужимается до своего min-width, ниже длины слова: длинное слово переносится, а не обрезается */
.tablica.shiriny-gotovy > tbody > tr > td.nazv,.tablica.shiriny-gotovy > tfoot > tr > td.nazv{overflow-wrap:break-word}
/* замер минимума: таблица ужимается до содержимого, свои ширины ячеек сняты; замер синхронный — кадр не рисуется */
.tablica.shiriny-zamer{table-layout:auto; width:1px !important}
.tablica.shiriny-zamer > * > tr > *{width:auto !important; min-width:0 !important}
.tablica.shiriny-zamer-zag > tbody,.tablica.shiriny-zamer-zag > tfoot{display:none}
/* ручка — по центру границы колонок, по 6px в обе ячейки (их отступ 12 — до текста не достаёт) */
.ruchka-shiriny{position:absolute; top:0; bottom:0; right:-6px; z-index:1; width:12px; cursor:col-resize; touch-action:none}
.ruchka-shiriny::after{content:''; position:absolute; top:25%; bottom:25%; left:50%; width:2px; margin-left:-1px;
  border-radius:var(--r-pill); background:var(--border-2); opacity:0; transition:opacity .12s ease, background .12s ease}
.tablica[data-shiriny] > thead:hover .ruchka-shiriny::after{opacity:1}
.ruchka-shiriny:hover::after,.ruchka-shiriny.tyanetsya::after,.ruchka-shiriny:focus-visible::after{
  opacity:1; top:0; bottom:0; background:var(--accent)}
.ruchka-shiriny:focus-visible{outline:none; background:var(--accent-soft)}
html.shiriny-tyanut,html.shiriny-tyanut *{cursor:col-resize !important; user-select:none !important; -webkit-user-select:none !important}
/* касание: наведения нет — полоски в заголовке видны всегда, зона захвата шире */
@media (hover:none){.ruchka-shiriny::after{opacity:1}}
@media (pointer:coarse){.ruchka-shiriny{right:-10px; width:20px}}

/* ── Экран входа ── */
.vhod{min-height:100vh; display:grid; place-items:center; padding:24px 16px}
.vhod .card{width:100%; max-width:380px}
.vhod .card > .body{padding:24px 24px 26px; gap:16px}
.vhod .brend{display:flex; align-items:center; gap:10px}
.vhod .brend img{width:36px; height:36px; border-radius:var(--r-seg-btn); flex:none}
.vhod .brend b{display:block; font-size:var(--fs-card); font-weight:650; color:var(--ink)}
.vhod .brend span{display:block; font-size:var(--fs-hint); color:var(--muted)}
.vhod h1{font-size:var(--fs-h1)}
.vhod .podval{margin-top:16px; text-align:center}

/* ── Сетка полей формы (экран акта ВР, срез 2) — новый компонент, на одобрение владельцу ── */
.polya{display:grid; gap:10px 12px; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); align-items:end}
.polya .shire{grid-column:span 2}
@media (max-width:640px){.polya .shire{grid-column:auto}}
.pole .vvod.chislo{text-align:right; font-variant-numeric:tabular-nums}
.pole > label.flazhok,.pole .flazhok{display:flex; justify-content:flex-start; align-items:center; gap:6px; font-size:var(--fs-label); color:var(--ink-2); min-height:var(--control-h)}

/* ── Витрина /ui ── */
.vitrina-obrazec{display:flex; flex-wrap:wrap; gap:10px; align-items:center}
.card > .body.vitrina-tsd{display:grid; gap:var(--gap); grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start}
@media (max-width:900px){.card > .body.vitrina-tsd{grid-template-columns:minmax(0,1fr)}}
.zametka{font-size:var(--fs-hint); color:var(--muted); margin:0}
.zametka b{color:var(--warn); font-weight:600}

@media (max-width:640px){
  .stranica{padding:16px 16px 32px}
  .shapka .sprava{margin-left:0}
  .massovye .sbros{margin-left:0}
}

/* ── 11. Экран «Сверка недели» — компоненты макета (одобрен владельцем 08.10.2026), которых нет в ките выше ──
   Источник — docs/07-dizayn/maketi/sverka-nedeli.html (плитка сводки .sm — устройство Д-css .sm, полоса-метр, серия,
   шаги сверки, раскрытие клиента). Селекторы таблицы — через «>»: вложенная таблица строк клиента не наследует
   наведение и фон внешней. Ширины полос и прилипание раскрытия ставит static/sverka.js (CSSOM). */
.razdel-ekrana{font-size:var(--fs-label); color:var(--muted); margin:0 0 2px}
.zagolovok{display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px}
.nav-nedeli{display:inline-flex; gap:6px}
.knopka.ikonka{width:var(--control-h); padding:0}
.knopka svg{fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.status-nedeli{display:inline-flex; align-items:center}
.sverka .sub{display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px}
.sverka .shapka .sprava{gap:10px 20px}
.sverka{display:flex; flex-direction:column; gap:var(--gap)}
.sverka .shapka{margin-bottom:0}
.sverka .card + .card{margin-top:0}
.plashki-nedeli:empty{display:none}
.seriya{display:inline-flex; align-items:center; gap:8px; font-size:var(--fs-label); color:var(--ink-2)}
.seriya .shkala{display:inline-flex; gap:3px}
.seriya .shkala i{display:block; width:16px; height:6px; border-radius:var(--r-pill); background:var(--border-2)}
.seriya .shkala i.est{background:var(--good)}
.seriya b{font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; white-space:nowrap}

/* тонкая плитка сводки — Д-css .sm: полоска состояния, подпись, число, одна строка пояснения */
.plitki{display:grid; gap:var(--gap); grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1100px){.plitki{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.plitki{grid-template-columns:minmax(0,1fr)}}
.sm{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-card); box-shadow:var(--shadow);
  padding:12px 16px 12px 14px; min-width:0; display:grid; grid-template-columns:4px minmax(0,1fr); column-gap:14px; align-items:center}
.sm::before{content:''; width:4px; height:52px; border-radius:var(--r-poloska); background:var(--accent); grid-row:1/4; align-self:center}
.sm.ploho::before{background:var(--bad)}
.sm.vnimanie::before{background:var(--warn)}
.sm .k{grid-column:2; display:flex; align-items:center; min-width:0; font-size:var(--fs-label); color:var(--muted); font-weight:500; margin-bottom:1px}
.sm .v{grid-column:2; display:flex; align-items:center; gap:12px; min-width:0; font-family:var(--num); font-variant-numeric:tabular-nums;
  font-size:var(--fs-plitka); font-weight:700; letter-spacing:-.025em; line-height:1.3; color:var(--ink); white-space:nowrap}
.sm .n{grid-column:2; font-size:var(--fs-hint); color:var(--muted); margin-top:1px; line-height:1.35;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-variant-numeric:tabular-nums}
.metr{position:relative; flex:1 1 72px; max-width:120px; height:6px; margin-left:auto; border-radius:var(--r-pill);
  background:var(--surface-2); border:1px solid var(--border)}
.metr .zalivka{position:absolute; top:-1px; bottom:-1px; left:-1px; border-radius:var(--r-pill); background:var(--accent)}
.metr .porog{position:absolute; top:-5px; bottom:-5px; width:2px; margin-left:-1px; border-radius:var(--r-pill); background:var(--ink-2)}

/* клиенты: раскрытие строк клиента */
.tablica .net{color:var(--muted); font-weight:400}
.raskryt{display:inline-flex; align-items:flex-start; gap:8px; padding:0; border:0; background:none; font:inherit; color:inherit;
  text-align:left; cursor:pointer}
.raskryt svg{width:14px; height:14px; margin-top:3px; flex:none; fill:none; stroke:var(--muted); stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round; transition:transform .15s ease}
.raskryt[aria-expanded="true"] svg{transform:rotate(90deg); stroke:var(--accent)}
.raskryt:hover .imya{color:var(--accent-dark)}
.tablica > tbody > tr.otkryt > td{background:var(--surface-2); border-bottom-color:transparent}
.tablica > tbody > tr.detal > td{padding:0; background:var(--surface-2); text-align:left; white-space:normal}
.tablica > tbody > tr.detal:hover > td{background:var(--surface-2)}
.tablica > tbody > tr.detal:hover .tablica td{background:transparent}
.tablica .tablica tbody tr:hover td{background:var(--surface-2)}
.detal-vnutri{position:sticky; left:0; width:var(--vidno,100%); padding:2px 12px 14px; display:flex; flex-direction:column; gap:10px}
.detal-vnutri .tw{background:var(--surface)}
.tablica.stroki th.nazv,.tablica.stroki td.nazv{width:auto; min-width:170px}
.tablica.stroki th.status,.tablica.stroki td.status{text-align:left; white-space:normal; width:100%; min-width:240px}
.tablica.stroki td.status .vtoraya{margin-top:3px; line-height:1.4}
.reshenie{position:sticky; left:var(--cell-px); padding:0 12px 14px; max-width:680px; display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.reshenie p{margin:0; flex-basis:100%; font-size:var(--fs-label); color:var(--ink-2); line-height:1.5}
.reshenie p b{color:var(--ink); font-weight:650}
.reshenie .vvod{flex:1 1 200px; width:auto}
.reshenie .vvod.kod{flex:0 0 110px}

/* сверка и утверждение */
.shagi{display:grid; gap:12px; grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:640px){.shagi{grid-template-columns:minmax(0,1fr)}}
.shag{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 16px; padding:12px 14px;
  background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-table)}
.shag .chto{display:flex; flex-direction:column; gap:2px; min-width:0}
.shag .chto b{font-size:var(--fs-card); font-weight:650; color:var(--ink)}
.shag .chto span{font-size:var(--fs-hint); color:var(--muted)}
.shag .deystvie{display:inline-flex; align-items:center; gap:6px}
.shag .deystvie .ryad{flex-wrap:nowrap; gap:6px}
.shag .deystvie .vvod{width:auto}
.shag .deystvie .vvod.kod{width:100px}
@media (max-width:640px){.shag .deystvie .ryad{flex-wrap:wrap}}

/* ── 12. Экран «Оплаты» — компоненты макета (одобрен владельцем 09.10.2026), которых нет в ките выше ──
   Источник — docs/07-dizayn/maketi/oplaty.html (фаза 4, шаг 7). Новых токенов и цветов нет: всё через var(--…) кита.
   Роль видна сразу: у владельца — блок «Решения владельца» и кнопки в колонке «Действие», у Кати — плашка. */
.oplaty{display:flex; flex-direction:column; gap:var(--gap)}
.oplaty .shapka{margin-bottom:0}
.oplaty .sub{display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px}
.oplaty .pole > label,.oplaty .pole .metka-polya{justify-content:flex-start; align-items:center; gap:4px}
.poyasnenie{margin:6px 0 0; max-width:760px; font-size:var(--fs-sub); line-height:1.45; color:var(--ink-2)}
input[type=radio]{accent-color:var(--accent); width:var(--check-size); height:var(--check-size); margin:0; cursor:pointer; flex:none}
textarea.vvod{min-height:64px; padding:8px 10px; resize:vertical; line-height:1.45}
.vvod[readonly]{background:var(--surface); color:var(--ink-2)}
.pole > label .obyaz{color:var(--bad)}
.hint.oshibka-tekst{color:var(--bad)}

/* роль учётки: заметная полоса под шапкой */
.rol-panel{display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; padding:10px 14px;
  background:var(--accent-soft); border:1px solid transparent; border-radius:var(--r-table)}
.rol-panel .rol-zag{font-size:var(--fs-label); font-weight:650; color:var(--ink)}
.rol-panel .rol-vidit{flex:1 1 280px; margin:0; font-size:var(--fs-label); color:var(--ink-2); line-height:1.45}
.rol-panel .rol-vidit b{color:var(--ink); font-weight:650}

/* вкладки и подача данных: три момента в ряд (≤ 640 — столбиком, пустых ячеек нет) */
.vkladki{align-self:flex-start}
.vkladki button{min-height:calc(var(--control-h) - 2px); padding:0 16px; font-size:var(--fs-label)}
.vkladka{display:flex; flex-direction:column; gap:var(--gap); min-width:0}
.vkladka[hidden]{display:none}
.podacha{display:grid; gap:10px; grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:640px){.podacha{grid-template-columns:minmax(0,1fr)}}
.podacha .moment{display:flex; align-items:center; justify-content:space-between; gap:8px 12px; flex-wrap:wrap; padding:9px 12px;
  background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-table); min-width:0}
.podacha .moment .chto{display:flex; flex-direction:column; min-width:0}
.podacha .moment .chto span{font-size:var(--fs-hint); color:var(--muted)}
.podacha .moment .chto b{font-size:var(--fs-label); font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums}

/* фильтры и таблица оплат */
.filtry{display:flex; flex-wrap:wrap; gap:10px 14px; align-items:center}
.filtry .pole-mal{display:flex; align-items:center; gap:8px; font-size:var(--fs-label); color:var(--ink-2)}
.filtry .pole-mal .vvod{width:auto; min-width:150px}
.filtry .poisk{flex:1 1 200px; max-width:260px}
.tablica td.vybor input:disabled{opacity:.25; cursor:not-allowed}
.tablica td .vtoraya.vnim{color:var(--warn)}
/* в оплатах остаток ширины забирает статус с пояснением, а не клиент: таблица влезает в 1280 без прокрутки */
#tab-oplaty > thead > tr > th.nazv,#tab-oplaty > tbody > tr > td.nazv{width:auto; min-width:110px}
#tab-oplaty > tbody > tr > td.istochnik{white-space:normal}
#tab-oplaty > thead > tr > th.status,#tab-oplaty > tbody > tr > td.status{white-space:normal; width:100%; min-width:150px}
#tab-oplaty td.status .vtoraya{line-height:1.35; margin-top:2px}
/* номера счетов под суммой переносятся: длинный номер Celicom («wbd-112/268») не раздвигает таблицу за 1280 */
#tab-oplaty > tbody > tr > td.k-schetam .vtoraya{white-space:normal; min-width:90px}
.tablica td.deystviya-stroki{text-align:right}
.knopki-stroki{display:inline-flex; flex-direction:column; align-items:flex-end; gap:4px}
.knopki-stroki .knopka{min-height:0; padding:3px 10px; font-size:var(--fs-hint)}

/* решения владельца: блок над таблицей (у Кати вместо него — плашка) */
.resheniya{display:flex; flex-direction:column; gap:10px; padding:12px 14px; border:1px solid var(--bad);
  border-radius:var(--r-table); background:var(--surface)}
.resheniya .zag-bloka{margin:0; font-size:var(--fs-card); font-weight:650; color:var(--ink)}
.resheniya .pod-zag{margin:0; font-size:var(--fs-hint); color:var(--muted); line-height:1.4}
.resheniya-setka{display:grid; gap:10px; grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:760px){.resheniya-setka{grid-template-columns:minmax(0,1fr)}}
.reshenie-v{display:flex; flex-direction:column; gap:3px; padding:9px 12px; background:var(--bad-bg); border-radius:var(--r-plashka); min-width:0}
.reshenie-v b{font-size:var(--fs-label); font-weight:650; color:var(--bad)}
.reshenie-v span{font-size:var(--fs-hint); color:var(--ink-2); line-height:1.4}
.reshenie-v .skolko{color:var(--muted)}
.plashka.spokoyno{background:var(--accent-soft); color:var(--accent-dark); border-color:transparent}

/* раскрытие оплаты: источники, куда ушли деньги, действия */
.detal-setka{display:grid; gap:12px; grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:760px){.detal-setka{grid-template-columns:minmax(0,1fr)}}
.detal-setka .blok{display:flex; flex-direction:column; gap:6px; min-width:0}
.detal-setka .blok h3{margin:0; font-size:var(--fs-caps); font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.spisok{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:4px; font-size:var(--fs-label); color:var(--ink-2)}
.spisok li{display:flex; justify-content:space-between; gap:12px}
.spisok li b{color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap}
.deystviya-oplaty{display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px}
.deystviya-oplaty .hint{flex:1 1 220px}

/* форма денежного действия с кодом в самой форме (как «Утвердить» экрана недели) и итог «что легло в базу» */
.forma-deystviya{display:flex; flex-direction:column; gap:12px; padding:14px; background:var(--surface);
  border:1px solid var(--border-2); border-radius:var(--r-table); min-width:0}
.forma-deystviya .zag-formy{margin:0; font-size:var(--fs-card); font-weight:650; color:var(--ink)}
.forma-deystviya .sostav{margin:0; font-size:var(--fs-label); color:var(--ink-2); line-height:1.5}
.forma-deystviya .sostav b{color:var(--ink); font-weight:650; font-variant-numeric:tabular-nums}
.kod-ryad{display:flex; flex-wrap:wrap; align-items:flex-end; gap:10px 12px}
.kod-ryad .pole{flex:0 0 160px}
.kod-ryad .knopki{display:flex; flex-wrap:wrap; gap:8px}
.dop-polya{display:grid; gap:12px; grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:640px){.dop-polya{grid-template-columns:minmax(0,1fr)}}
.dop-polya .shirokoe,.setka-formy .shirokoe{grid-column:1 / -1}
.itog-blok{display:flex; flex-direction:column; gap:10px; min-width:0}
.itog-blok .ryad{justify-content:flex-start}

/* очередь «Без счёта»: строка-задача, предложение системы и одно действие */
.ochered{display:flex; flex-direction:column; gap:10px}
.zayavka{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px 20px; align-items:start; padding:13px 14px;
  background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-table); min-width:0}
.zayavka[hidden]{display:none}
.zayavka.prosrocheno{border-left:3px solid var(--warn)}
.zayavka .verh{display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; min-width:0}
.zayavka .verh .kto,.zayavka .verh .summa{font-size:var(--fs-card); font-weight:650; color:var(--ink)}
.zayavka .verh .summa{font-variant-numeric:tabular-nums; white-space:nowrap}
.zayavka .telo{display:flex; flex-direction:column; gap:6px; min-width:0}
.zayavka .fakt{margin:0; font-size:var(--fs-label); color:var(--ink-2); line-height:1.5}
.zayavka .predl{margin:0; font-size:var(--fs-label); color:var(--ink); line-height:1.5}
.zayavka .predl .kto-predl{display:block; font-size:var(--fs-caps); font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:1px}
.zayavka .deystvie{display:flex; flex-direction:column; align-items:flex-end; gap:6px}
.zayavka .deystvie .hint{text-align:right; max-width:220px}
.zayavka .vo-vsyu{grid-column:1 / -1; min-width:0}
.zayavka .plashka.mal{padding:6px 10px; font-size:var(--fs-hint)}
.varianty{display:flex; flex-direction:column; gap:6px; margin:2px 0 0}
.varianty label{display:flex; align-items:center; gap:8px; font-size:var(--fs-label); color:var(--ink-2); cursor:pointer}
.varianty label b{color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums}
@media (max-width:640px){
  .zayavka{grid-template-columns:minmax(0,1fr)}
  .zayavka .deystvie{align-items:flex-start}
  .zayavka .deystvie .hint{text-align:left; max-width:none}
}

/* форма «Внести оплату» */
.setka-formy{display:grid; gap:14px 16px; grid-template-columns:repeat(2,minmax(0,1fr)); max-width:760px}
@media (max-width:640px){.setka-formy{grid-template-columns:minmax(0,1fr)}}
.forma-niz,.najdena{display:flex; flex-direction:column; gap:12px; max-width:760px}
.setka-formy[inert]{opacity:.55}
@media (max-width:640px){.oplaty .shapka .sprava{margin-left:0}}
.galochka{display:flex; align-items:center; gap:8px; margin-top:6px; font-size:var(--fs-label); color:var(--ink-2); cursor:pointer}
.oplaty .pod-polem .oshibka-tekst{color:var(--bad)}

/* ── 13. Карточка счёта — компоненты макета docs/07-dizayn/maketi/karta-scheta.html, которых нет в ките выше. Новых
   токенов и цветов нет: всё через var(--…). Классы — внутри .karta-scheta: «.fakt» уже есть у очереди «Оплат» ── */
.karta-scheta{display:flex; flex-direction:column; gap:var(--gap)}
.karta-scheta .shapka{margin-bottom:0}
.karta-scheta .sub{display:flex; flex-wrap:wrap; align-items:center; gap:4px 16px}
.karta-scheta .pole > label{justify-content:flex-start; align-items:center; gap:4px}
.karta-scheta .zagolovok{flex-wrap:wrap; align-items:center; gap:6px 10px}
.kroshki{display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px}
.kroshki a{color:var(--accent-dark); text-decoration:none}
.kroshki a:hover{text-decoration:underline}
/* факты счёта: 8 штук — 4 колонки, ≤ 1100 — 2, ≤ 640 — 1 (пустых ячеек нет) */
.karta-scheta .fakty{display:grid; gap:10px; grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1100px){.karta-scheta .fakty{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.karta-scheta .fakty{grid-template-columns:minmax(0,1fr)}}
.karta-scheta .fakt{display:flex; flex-direction:column; gap:2px; padding:10px 12px; min-width:0;
  background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-table)}
.karta-scheta .fakt .k{display:flex; align-items:center; font-size:var(--fs-hint); color:var(--muted)}
.karta-scheta .fakt .v{font-size:var(--fs-label); font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; overflow-wrap:anywhere}
.karta-scheta .fakt .n{font-size:var(--fs-hint); color:var(--muted); line-height:1.4; font-variant-numeric:tabular-nums}
.karta-scheta .fakt .n.vnim{color:var(--warn)}
/* тревога: плашка с действием */
.karta-scheta .trevoga .ryad,.karta-scheta .ryad.trevoga{margin-top:8px; display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px}
.karta-scheta .trevoga .knopka{background:var(--surface)}
/* решения владельца: два решения, у каждого своя кнопка */
.resheniya-setka.dve{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:640px){.resheniya-setka.dve{grid-template-columns:minmax(0,1fr)}}
.karta-scheta .reshenie-v .knopka{align-self:flex-start; margin-top:6px}
/* таблицы карточки */
#tab-sostav > thead > tr > th.nazv,#tab-sostav > tbody > tr > td.nazv{min-width:160px}
#tab-dolg > thead > tr > th.nazv,#tab-dolg > tbody > tr > td.nazv{width:auto; min-width:170px; white-space:normal}
#tab-dolg > thead > tr > th.status,#tab-dolg > tbody > tr > td.status{white-space:normal; width:100%; min-width:180px}
#tab-dolg td.status .vtoraya{line-height:1.35; margin-top:2px}
/* история счёта: когда · кто · что */
.sobytiya{margin:0; padding:0; list-style:none; display:flex; flex-direction:column}
.sobytie{display:grid; grid-template-columns:112px 168px minmax(0,1fr); gap:2px 16px; align-items:baseline;
  padding:10px 2px; border-bottom:1px solid var(--border); font-size:var(--fs-label); line-height:1.5}
.sobytie:last-child{border-bottom:0}
.sobytie .kogda{color:var(--ink-2); font-variant-numeric:tabular-nums; white-space:nowrap}
.sobytie .kto{color:var(--ink); font-weight:600; min-width:0}
.sobytie .kto .vtoraya{display:block; font-weight:400; font-size:var(--fs-hint); color:var(--muted)}
.sobytie .chto{color:var(--ink-2); min-width:0}
.sobytie .chto b{color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap}
@media (max-width:640px){
  .sobytie{grid-template-columns:minmax(0,1fr) auto; gap:2px 12px}
  .sobytie .kto{grid-row:1; grid-column:1}
  .sobytie .kogda{grid-row:1; grid-column:2; font-size:var(--fs-hint)}
  .sobytie .chto{grid-column:1 / -1}
}