/* ══════════════════════════════════════════════════════════════════════
   ТИПОГРАФИКА. То, из-за чего перекрашенный экран всё равно читался как
   прежний: палитра и структура сменились, а шрифт остался старым. Референс
   держится на двух гарнитурах — Golos Text для текста и JetBrains Mono для
   всего, что считается. Без них это тот же интерфейс, только зелёный.

   ШРИФТЫ ГРУЗЯТСЯ НЕ ОТСЮДА. Первая редакция ставила @import первой строкой
   файла. Это правильно по синтаксису и НЕВЕРНО по последствиям: @import
   блокирует отрисовку страницы, пока не ответит fonts.googleapis.com. У меня
   он отвечал за миг, и я счёл дело сделанным; для того, у кого этот хост
   медленный или закрыт, панель не показывалась вовсе.
   Поэтому ссылку вешает JS без блокировки, а здесь остаются только имена
   гарнитур с честной запаской: не доехали — интерфейс работает системным
   шрифтом, а не ждёт.
   ═════════════════════════════════════════════════════════════════════ */
:root{
  --sans:"Golos Text", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-sans:var(--sans);
  --font-mono:var(--mono);
}
body,input,select,textarea,button{ font-family:var(--sans) }
/* всё, что считается, — моноширинным с табличными цифрами: столбец чисел
   должен читаться столбцом, а не рваным краем */
code,kbd,samp,pre,.mono,[class*="-mono"]{ font-family:var(--mono) }
table td.kp-n,table th.kp-n,.kp-itog b,.kp-plitka-chislo,.kp-schet,.kp-skolko,.kp-itogo{
  font-variant-numeric:tabular-nums;
}
/* КОМАНДНАЯ ПОЛОСА — макет, перенесённый на живые экраны один в один.
 *
 * ЧТО ЭТО. Правила утверждённого макета, перенесённые дословно: те же отступы,
 * те же размеры, те же скругления. Изменены ровно две вещи, и обе вынужденно.
 *
 * ПЕРВОЕ: приставка kp-. В макете классы голые — chip, polosa, itogo, n. На
 * проде 38 таблиц стилей, и свои .chip там уже есть; голое имя столкнулось бы
 * молча, а молча — это хуже всего.
 *
 * ВТОРОЕ: свои цвета выброшены, взяты продовые. Замер показал, что палитра уже
 * та же: у прода --accent #0f7a64, у макета был #0e8067; --mono у прода уже
 * JetBrains Mono, ровно шрифт макета. Есть --surface, --surface-2, --line,
 * --ink, --muted, --bad, --bad-soft, --warn, --warn-soft, --accent-soft. Поэтому
 * тему переключает сам прод по [data-theme], и мне не нужен ни свой набор
 * токенов, ни своя тёмная ветка: определи я их сам — компоненты жили бы своей
 * темой внутри чужой.
 *
 * Недостающих у прода токенов шесть, и они выведены из существующих, чтобы
 * ходить за темой, а не спорить с ней.
 *
 * ПОРЯДОК ПОДКЛЮЧЕНИЯ. Файл обязан идти ПОСЛЕДНИМ среди стилей. В первой
 * редакции он стоял тринадцатой строкой, после него грузилось ещё восемь
 * файлов, и один ставил плиткам min-height 88px: замер показал, что стало ХУЖЕ
 * (529 -> 535). Дело было не в правилах, а в очереди.
 */

:root{
  --kp-ground: var(--bg, #faf8f3);
  --kp-ink-2: color-mix(in srgb, var(--ink) 74%, var(--muted));
  --kp-line-soft: color-mix(in srgb, var(--line) 55%, var(--surface));
  --kp-accent-ink: color-mix(in srgb, var(--accent) 82%, var(--ink));
  --kp-radius: 11px;
  --kp-shadow: 0 1px 2px rgba(22,20,15,.05), 0 8px 24px -12px rgba(22,20,15,.18);
}
[data-theme="dark"]{
  /* в тёмной теме подмешивать надо в другую сторону, иначе мягкая линия
     оказывается светлее основной и рамка светится */
  --kp-line-soft: color-mix(in srgb, var(--line) 62%, #000);
  --kp-accent-ink: color-mix(in srgb, var(--accent) 72%, #fff);
  --kp-shadow: 0 1px 2px rgba(0,0,0,.35), 0 8px 24px -12px rgba(0,0,0,.6);
}

/* ══ 1. ПОЛОСА ЗАГОЛОВКА ════════════════════════════════════════════════
   Было: надзаголовок дословно повторял хлебные крошки строкой выше, сам
   заголовок 30 пикселей, описание в три строки, пилюля источника отдельным
   блоком. Стало: один ряд высотой 11+19+11.
   ═══════════════════════════════════════════════════════════════════════ */
.kp-polosa-glavnaja{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:11px 16px; border-bottom:1px solid var(--kp-line-soft);
}
.kp-polosa-glavnaja .kp-imja{font-size:19px;font-weight:600;letter-spacing:-.02em;line-height:1.1}
.kp-polosa-glavnaja .kp-pojasnenie{
  font-size:12px;color:var(--muted);line-height:1.35;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:44ch;
}
.kp-levo{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1 1 280px}

/* пилюля источника: точка пульсирует, пока данные свежие, и замирает жёлтой,
   когда отстали. Текст в ней — не украшение: там «данные по такое-то число». */
.kp-istochnik{
  display:inline-flex;align-items:center;gap:7px;flex:0 0 auto;
  padding:5px 11px;border-radius:999px;font-size:11.5px;
  border:1px solid var(--line);background:var(--surface-2);color:var(--kp-ink-2);
  max-width:46ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.kp-istochnik .kp-pul{
  width:7px;height:7px;border-radius:50%;background:var(--accent);flex:0 0 auto;
  box-shadow:0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent);
  animation:kp-pul 2.6s ease-out infinite;
}
.kp-istochnik.kp-staro{border-color:color-mix(in srgb,var(--warn) 35%,var(--line));background:var(--warn-soft);color:var(--warn)}
.kp-istochnik.kp-staro .kp-pul{background:var(--warn);animation:none}
@keyframes kp-pul{
  0%{box-shadow:0 0 0 0 color-mix(in srgb, var(--accent) 50%, transparent)}
  70%{box-shadow:0 0 0 7px transparent}
  100%{box-shadow:0 0 0 0 transparent}
}

/* ══ 2. РЕЛЬСА ОТБОРОВ ══════════════════════════════════════════════════ */
.kp-relsa{padding:10px 16px 12px;border-bottom:1px solid var(--kp-line-soft);background:var(--surface)}
.kp-relsa-verh{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:9px}
.kp-relsa-verh:last-child{margin-bottom:0}
.kp-poisk{position:relative;flex:1 1 260px;min-width:0}
.kp-poisk input{
  width:100%;height:34px;padding:0 11px 0 32px;font:inherit;font-size:13.5px;
  border:1px solid var(--line);border-radius:9px;background:var(--surface-2);color:var(--ink);
  transition:border-color .14s, box-shadow .14s, background .14s;
}
.kp-poisk input:focus{
  outline:none;border-color:var(--accent);background:var(--surface);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}
.kp-poisk .kp-lupa{
  position:absolute;left:11px;top:50%;transform:translateY(-50%);
  width:13px;height:13px;opacity:.45;pointer-events:none;
}
.kp-poisk kbd{
  position:absolute;right:9px;top:50%;transform:translateY(-50%);
  font-family:var(--mono);font-size:10px;color:var(--muted);
  border:1px solid var(--line);border-radius:4px;padding:1px 5px;background:var(--surface);
}
.kp-perekljuchatel{display:inline-flex;border:1px solid var(--line);border-radius:9px;overflow:hidden;flex:0 0 auto}
.kp-perekljuchatel button{
  font:inherit;font-size:12px;padding:6px 11px;border:0;background:var(--surface);
  color:var(--muted);cursor:pointer;transition:background .13s,color .13s;
}
.kp-perekljuchatel button[aria-pressed="true"]{background:var(--accent-soft);color:var(--kp-accent-ink);font-weight:500}
.kp-perekljuchatel button + button{border-left:1px solid var(--line)}

/* выбор колонки группировки стоит в той же рельсе и той же высоты */
.kp-vybor{
  font:inherit;font-size:12px;height:32px;padding:0 26px 0 10px;flex:0 0 auto;
  border:1px solid var(--line);border-radius:9px;background:var(--surface);color:var(--kp-ink-2);
  cursor:pointer;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 14px) 14px, calc(100% - 9px) 14px;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
}
.kp-vybor:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent)}
.kp-podpis-otbora{font-size:11px;color:var(--muted);flex:0 0 auto}

/* ══ 3. ФИШКИ ОТБОРА ════════════════════════════════════════════════════
   Фишка несёт три вещи разом: имя отбора, сколько строк под него подпадает и
   какую долю множества это составляет — полосой по низу. Счёт не украшение:
   он отвечает на вопрос «а есть ли там вообще что-то» до нажатия.
   ═══════════════════════════════════════════════════════════════════════ */
.kp-chipy{display:flex;gap:6px;flex-wrap:wrap}
.kp-chip{
  position:relative;display:inline-flex;align-items:center;gap:7px;
  padding:5px 11px 6px;border:1px solid var(--line);border-radius:999px;
  background:var(--surface);color:var(--kp-ink-2);font:inherit;font-size:12.5px;
  cursor:pointer;overflow:hidden;
  transition:border-color .14s, color .14s, background .14s, transform .1s;
}
.kp-chip:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line));color:var(--ink)}
.kp-chip:active{transform:translateY(1px)}
.kp-chip:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 20%,transparent)}
.kp-chip .kp-schet{font-family:var(--mono);font-size:11px;font-variant-numeric:tabular-nums;color:var(--muted)}
.kp-chip[aria-pressed="true"]{
  background:var(--accent-soft);border-color:color-mix(in srgb,var(--accent) 42%,var(--line));
  color:var(--kp-accent-ink);font-weight:500;
}
.kp-chip[aria-pressed="true"] .kp-schet{color:var(--kp-accent-ink)}
.kp-chip[data-kp-tjazhest="bad"] .kp-schet{color:var(--bad)}
.kp-chip[data-kp-tjazhest="bad"][aria-pressed="true"]{
  background:var(--bad-soft);border-color:color-mix(in srgb,var(--bad) 40%,var(--line));color:var(--bad);
}
.kp-chip[data-kp-tjazhest="bad"][aria-pressed="true"] .kp-schet{color:var(--bad)}
.kp-chip .kp-dolja{
  position:absolute;left:0;bottom:0;height:2px;background:var(--accent);opacity:.5;
  transition:width .5s cubic-bezier(.2,.7,.2,1);
}
.kp-chip[data-kp-tjazhest="bad"] .kp-dolja{background:var(--bad)}

.kp-vybrano{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin-top:9px;padding-top:9px;border-top:1px dashed var(--line);
  font-size:12px;color:var(--muted);
}
.kp-vybrano[hidden]{display:none}
.kp-snjat{
  font:inherit;font-size:12px;color:var(--kp-accent-ink);background:none;border:0;
  cursor:pointer;padding:2px 4px;border-radius:5px;text-decoration:underline;text-underline-offset:3px;
}
.kp-snjat:hover{background:var(--accent-soft)}

/* ══ 4. ИТОГ ОТБОРА ═════════════════════════════════════════════════════
   Ряд показателей вместо коробок: те же числа занимали 113 пикселей плитками,
   здесь 35 — и читаются слева направо одной фразой.
   ═══════════════════════════════════════════════════════════════════════ */
.kp-itog{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:9px 16px;background:var(--surface-2);border-bottom:1px solid var(--kp-line-soft);
  font-size:12.5px;color:var(--kp-ink-2);
}
.kp-itog b{font-family:var(--mono);font-size:14px;font-variant-numeric:tabular-nums;color:var(--ink);font-weight:500}
.kp-itog .kp-razdel{width:1px;height:16px;background:var(--line)}

/* ══ 5. ТАБЛИЦА ═════════════════════════════════════════════════════════ */
.kp-tabl-obertka{overflow-x:auto}
/* border-collapse:separate обязателен: при collapse браузер игнорирует
   position:sticky на ячейках, и закрепление колонки молча не работает —
   правило стоит, класс на месте, а колонка уезжает. Границы и так живут на
   самих ячейках, поэтому separate ничего не ломает. */
table.kp-dannye{width:100%;border-collapse:separate;border-spacing:0;font-size:13px}
table.kp-dannye th{
  position:sticky;top:0;z-index:2;
  text-align:left;font-weight:500;font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--muted);background:var(--surface);
  padding:8px 12px;border-bottom:1px solid var(--line);white-space:nowrap;
}
table.kp-dannye th.kp-n{text-align:right}
table.kp-dannye td{padding:7px 12px;border-bottom:1px solid var(--kp-line-soft);vertical-align:middle}
table.kp-dannye td.kp-n{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums}
table.kp-dannye tbody tr{transition:background .12s}
table.kp-dannye tbody tr:hover{background:var(--surface-2)}
table.kp-dannye tbody tr[data-kp-drill-row="1"]{cursor:pointer}
table.kp-dannye tbody tr.kp-drill-vybrana > td{
  background:color-mix(in srgb,var(--accent) 9%,var(--surface));
}
table.kp-dannye tbody tr.kp-drill-vybrana > td:first-child{
  box-shadow:inset 3px 0 0 var(--accent);
}
table.kp-dannye .kp-tovar{font-weight:500;max-width:34ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
table.kp-dannye .kp-artikul{font-family:var(--mono);font-size:11.5px;color:var(--muted)}

/* строка группы: липнет под шапкой, поэтому top равен высоте шапки (8+10.5+8) */
tr.kp-gruppa td{
  position:sticky;top:31px;z-index:1;
  background:var(--surface-2);font-weight:600;font-size:12px;
  letter-spacing:.01em;padding-top:7px;padding-bottom:7px;
  border-bottom:1px solid var(--line);
}
tr.kp-gruppa .kp-skolko{font-family:var(--mono);font-weight:400;color:var(--muted);font-size:11px;margin-left:8px}
tr.kp-gruppa .kp-itogo{float:right;font-family:var(--mono);font-weight:500;font-variant-numeric:tabular-nums}
.kp-znak{
  display:inline-block;width:0;height:0;margin-right:7px;vertical-align:1px;
  border-left:4px solid currentColor;border-top:3.5px solid transparent;border-bottom:3.5px solid transparent;
  transition:transform .16s ease;opacity:.6;
}
tr.kp-gruppa[aria-expanded="true"] .kp-znak{transform:rotate(90deg) translateX(1px)}
tr.kp-gruppa{cursor:pointer}
tr.kp-gruppa:hover td{background:color-mix(in srgb,var(--accent) 7%,var(--surface-2))}
tr[hidden]{display:none}
.kp-razryv{color:var(--bad);font-weight:500}

/* плотный вид: строка 30 вместо 38, вторая строка в ячейке убирается */
[data-kp-plotno="da"] table.kp-dannye td{padding-top:4px;padding-bottom:4px}
[data-kp-plotno="da"] table.kp-dannye .kp-artikul{display:none}

@media (prefers-reduced-motion: reduce){
  .kp-istochnik .kp-pul{animation:none}
.kp-chip,
.kp-chip .kp-dolja,
.kp-znak,
table.kp-dannye tbody tr{transition:none}
}
@media (max-width:640px){
  .kp-polosa-glavnaja{align-items:flex-start;flex-direction:column;gap:8px}
  .kp-polosa-glavnaja .kp-pojasnenie{white-space:normal;max-width:none}
}

/* ══ 7. ЧТО НАШЛОСЬ НА ЖИВЫХ ЭКРАНАХ ════════════════════════════════════
   Правила под настоящую разметку прода. Их не было в макете — они добыты
   замером: первая редакция целилась в классы, которых на проде нет вовсе.

   НИ ОДНОГО !important НИЖЕ. Первая попытка перебивала чужие правила силой и
   сразу упёрлась: .kpi-grid объявлен как display:grid !important, плиткам
   ставят min-height 88, 124 и 128 пикселей три разных файла. Война весом
   бесконечна — каждый !important рождает следующий.
   Поэтому чужие селекторы сюда просто НЕ ДОСТАЮТ: узлы переносятся в свой
   контейнер и получают свои имена классов. Правила остаются плоскими.
   ═══════════════════════════════════════════════════════════════════════ */

/* Надзаголовок зовётся .eye, а не .eyebrow, и дословно повторяет хлебные
   крошки строкой выше: «📈 Финансы · Валовая маржа · регистр-истина». */
.kp-polosa-glavnaja > .eye{ display:none; }

/* СПРАВКА ОБ ИСТОЧНИКЕ. На вид пилюля, на деле панель в 208 пикселей: шесть
   пар «ключ — значение», предупреждение и сноска. Интерактивного внутри нет
   ни одного узла — проверено обходом дерева, — поэтому сворачивается в пилюлю,
   а полное содержимое раскрывается по нажатию. */
.kp-istochnik{ position:relative; cursor:pointer; align-self:flex-start; }
.kp-istochnik > .kp-svodka{
  position:absolute; top:calc(100% + 7px); right:0; z-index:40;
  min-width:320px; max-width:min(520px, 90vw);
  display:flex; flex-direction:column; gap:7px;
  padding:13px 15px; text-align:left; white-space:normal; cursor:default;
  border:1px solid var(--line); border-radius:var(--kp-radius);
  background:var(--surface); color:var(--kp-ink-2); box-shadow:var(--kp-shadow);
  font-size:12px; line-height:1.45;
  animation:kp-vsplyt .16s cubic-bezier(.2,.7,.2,1);
}
.kp-istochnik > .kp-svodka[hidden]{ display:none; }
@keyframes kp-vsplyt{ from{opacity:0; transform:translateY(-4px)} to{opacity:1; transform:none} }
.kp-svodka .onecov-item{ display:flex; gap:10px; justify-content:space-between; }
.kp-svodka .onecov-k{ color:var(--muted); flex:0 0 auto; }
.kp-svodka .onecov-v{ text-align:right; font-family:var(--mono); font-size:11.5px; }
.kp-svodka .onecov-warn{ color:var(--warn); border-top:1px solid var(--line); padding-top:7px; }
.kp-svodka .onecov-gap{ color:var(--muted); font-size:11px; }
.kp-istochnik .kp-kratko{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* РЯД ПОКАЗАТЕЛЕЙ. Четыре коробки по 95 пикселей несли ровно четыре числа.
   Плитки переносятся сюда из своей сетки и переименовываются — поэтому ни
   .kpi-grid, ни .kpi-card сюда не достают, и перебивать нечего. */
.kp-plitki{
  display:flex; flex-wrap:wrap; align-items:center; gap:0;
  padding:8px 4px; margin:0;
  background:var(--surface-2); border-bottom:1px solid var(--kp-line-soft);
}
.kp-plitka{
  display:inline-flex; align-items:baseline; gap:8px;
  padding:1px 16px; margin:0; position:relative;
  min-height:0; height:auto; border:0; border-radius:0;
  background:none; box-shadow:none;
}
.kp-plitka + .kp-plitka::before{
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:1px; height:15px; background:var(--line);
}
.kp-plitka-imja{ font-size:11.5px; color:var(--muted); white-space:nowrap; }
.kp-plitka-chislo{
  font-family:var(--mono); font-size:14px; font-weight:500;
  font-variant-numeric:tabular-nums; color:var(--ink); white-space:nowrap; margin:0;
}
.kp-plitka-chislo.good{ color:var(--accent); }
.kp-plitka-chislo.bad, .kp-plitka-chislo.danger{ color:var(--bad); }
/* плитка, ведущая на разбор, помечается стрелкой и поднимается на наведении */
.kp-plitka[data-kp-drill]{ cursor:pointer; border-radius:8px; transition:background .13s; }
.kp-plitka[data-kp-drill]:hover{ background:color-mix(in srgb, var(--accent) 8%, transparent); }
.kp-plitka[data-kp-drill]::after{ content:"↗"; font-size:10px; color:var(--muted); margin-left:2px; }

/* строку скрываем классом, а не атрибутом: постраничный надстройщик таблицы
   ставит строкам inline-стиль, и правило по [hidden] он бы перебил. Здесь вес
   выше чужого не нужен — свой класс не встречается больше нигде. */
tr.kp-skryto{ display:none; }

/* ══ 8. ЕДИНЫЙ КОНТЕЙНЕР ════════════════════════════════════════════════
   То, из-за чего экран не был похож на макет, сколько ни правь части.
   Вид макета создаёт не набор правил, а ОДНА РАМКА: заголовок, ряд
   показателей, рельса с фишками, строка итога и таблица лежат в одном
   контейнере с общим краем и одним отступом. На проде это были четыре
   отдельные карточки со своими бордюрами, а между ними — тулбар таблицы и
   выбор колонок. Поэтому части собираются переносом в один контейнер.
   ═══════════════════════════════════════════════════════════════════════ */
.kp-maket{
  border:1px solid var(--line); border-radius:14px; background:var(--surface);
  box-shadow:var(--kp-shadow); overflow:visible; margin:0 0 14px;
}
/* внутри контейнера у частей нет своих краёв — край один, общий */
.kp-maket > .kp-polosa-glavnaja,
.kp-maket > .kp-plitki,
.kp-maket > .kp-relsa,
.kp-maket > .kp-itog{ margin:0; border-radius:0; border-left:0; border-right:0; border-top:0; }
.kp-maket > .kp-polosa-glavnaja{ background:var(--surface); }
.kp-maket > *:last-child{ border-bottom:0; border-bottom-left-radius:14px; border-bottom-right-radius:14px; overflow:hidden; }

/* обёртка таблицы внутри контейнера свой картон теряет: край уже есть у него */
.kp-maket .dt-wrap,
.kp-maket .kp-tabl-obertka{
  margin:0; padding:0; border:0; border-radius:0; background:none; box-shadow:none;
}
.kp-maket .dt-enhancer-toolbar{ display:none; }

/* живое поле поиска, перенесённое из тулбара таблицы */
.kp-poisk-zhivoj{ position:relative; flex:1 1 240px; min-width:0; display:flex; align-items:center; gap:8px; }
.kp-poisk-zhivoj > span{ font-size:11px; color:var(--muted); flex:0 0 auto; text-transform:lowercase; }
.kp-poisk-zhivoj input{
  flex:1 1 auto; min-width:0; height:34px; padding:0 11px; font:inherit; font-size:13.5px;
  border:1px solid var(--line); border-radius:9px; background:var(--surface-2); color:var(--ink);
  transition:border-color .14s, box-shadow .14s, background .14s;
}
.kp-poisk-zhivoj input:focus{
  outline:none; border-color:var(--accent); background:var(--surface);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}
/* постраничная выдача, перенесённая оттуда же */
.kp-listanie{ display:flex; align-items:center; gap:8px; flex:0 0 auto; font-size:11.5px; color:var(--muted); }
.kp-listanie select{
  font:inherit; font-size:12px; height:32px; padding:0 8px;
  border:1px solid var(--line); border-radius:9px; background:var(--surface); color:var(--kp-ink-2);
}
.kp-listanie button{
  font:inherit; font-size:12px; height:32px; padding:0 11px;
  border:1px solid var(--line); border-radius:9px; background:var(--surface);
  color:var(--kp-ink-2); cursor:pointer; transition:border-color .14s, background .14s;
}
.kp-listanie button:hover:not(:disabled){ border-color:var(--accent); background:var(--accent-soft); }
.kp-listanie button:disabled{ opacity:.4; cursor:default; }


/* ══════════════════════════════════════════════════════════════════════
   ВТОРАЯ ОЧЕРЕДЬ. Управление колонками, закрепление, подвал, клавиатура и
   отклик фишек. Всё в своём пространстве имён kp-: ни одно правило ниже не
   целится в чужие классы, поэтому воевать весом ни с кем не нужно.
   ═════════════════════════════════════════════════════════════════════ */

/* ── ОТКЛИК ФИШКИ. Отвечает на «что будет, если нажму»: подсветка идёт за
   курсором, полоса доли подрастает до полной величины, счёт приподнимается.
   Выбранная фишка не «дышит» — она уже сделала своё дело. ── */
.kp-chip{ --kp-mx:50%; --kp-my:50%; }
.kp-chip::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(120px circle at var(--kp-mx) var(--kp-my),
             color-mix(in srgb,var(--accent) 16%,transparent), transparent 62%);
  opacity:0; transition:opacity .22s ease;
}
.kp-chip:hover::before{ opacity:1 }
.kp-chip[data-kp-tjazhest="bad"]::before{
  background:radial-gradient(120px circle at var(--kp-mx) var(--kp-my),
             color-mix(in srgb,var(--bad) 15%,transparent), transparent 62%);
}
.kp-chip[aria-pressed="true"]::before{ opacity:0 }
.kp-chip .kp-dolja{ transition:width .5s cubic-bezier(.2,.8,.2,1), height .2s ease, opacity .2s ease }
.kp-chip:hover .kp-dolja{ height:3px; opacity:.75 }
.kp-chip .kp-schet{ position:relative; z-index:1; transition:color .16s ease, transform .18s cubic-bezier(.2,.8,.2,1) }
.kp-chip:hover .kp-schet{ transform:translateY(-1px) }
/* галочка у выбранной. В покое она НЕ зависит от анимации: пока зависела,
   состояние покоя читалось по первому кадру и галочки просто не было. */
.kp-chip[aria-pressed="true"]::after{
  content:""; width:9px; height:5px; margin-left:2px; flex:0 0 auto; display:block;
  border-left:1.6px solid currentColor; border-bottom:1.6px solid currentColor;
  transform:rotate(-45deg) translateY(-2px);
}
.kp-chip.kp-tolko-chto::after{ animation:kp-galka .24s cubic-bezier(.2,.9,.25,1) }
@keyframes kp-galka{
  from{ opacity:0; transform:rotate(-45deg) translateY(-2px) scale(.5) }
  to{ opacity:1; transform:rotate(-45deg) translateY(-2px) scale(1) }
}

/* ── РОВНАЯ ВЫСОТА УПРАВЛЕНИЯ. В одном ряду было два роста — 32 и 34.
   Поодиночке два пикселя не видно, в ряду из шести элементов рябит. ── */
.kp-relsa-verh .kp-vybor,.kp-relsa-verh .kp-kolonki-knopka,.kp-relsa-verh .kp-svernut-vse,
.kp-relsa-verh select,.kp-relsa-verh button{ height:34px }
.kp-perekljuchatel{ height:34px }
.kp-perekljuchatel button{ height:100%; padding-top:0; padding-bottom:0 }

/* ── ЗАКРЕПЛЕНИЕ ПЕРВОЙ КОЛОНКИ. На экранах до тридцати колонок человек,
   проматывая вправо, терял из виду, о чём строка. Отступ второй колонки
   считает JS по факту: зашитое число давало сдвиг. ── */
table.kp-dannye.kp-zakrep th:nth-child(1),table.kp-dannye.kp-zakrep td:nth-child(1){
  position:sticky; left:0; z-index:2; background:var(--surface);
}
table.kp-dannye.kp-zakrep th:nth-child(1){ z-index:4 }
table.kp-dannye.kp-zakrep tbody tr:hover td:nth-child(1){ background:var(--surface-2) }
table.kp-dannye.kp-zakrep.kp-otehala td:nth-child(1),
table.kp-dannye.kp-zakrep.kp-otehala th:nth-child(1){ box-shadow:7px 0 13px -9px rgba(23,35,31,.45) }

/* ── КОЛОНКА ПОД КУРСОРОМ И ОТСОРТИРОВАННАЯ ── */
table.kp-dannye th.kp-kol-podsvet,table.kp-dannye td.kp-kol-podsvet{ background:color-mix(in srgb,var(--accent) 7%,var(--surface)) }
table.kp-dannye th.kp-kol-sort,table.kp-dannye td.kp-kol-sort{ background:color-mix(in srgb,var(--accent) 5%,var(--surface)) }
table.kp-dannye th.kp-kol-sort{ color:var(--kp-accent-ink) }
table.kp-dannye th .kp-strelka{ opacity:0; margin-left:5px; font-size:9px; transition:opacity .15s }
table.kp-dannye th:hover .kp-strelka{ opacity:.45 }
table.kp-dannye th[aria-sort] .kp-strelka{ opacity:1; color:var(--accent) }

/* ── РУЧКА РАСТЯГИВАНИЯ ── */
table.kp-dannye th{ position:relative }
.kp-ruchka{ position:absolute; right:-3px; top:0; bottom:0; width:7px; cursor:col-resize; z-index:5 }
.kp-ruchka::after{ content:""; position:absolute; left:2px; top:7px; bottom:7px; width:2px; border-radius:2px;
  background:var(--accent); opacity:0; transition:opacity .15s }
.kp-ruchka:hover::after,.kp-ruchka.kp-tjanem::after{ opacity:1 }
body.kp-tjanem-kolonku{ cursor:col-resize; user-select:none }

/* ── ПАНЕЛЬ КОЛОНОК ── */
.kp-kolonki{ position:relative; flex:0 0 auto }
.kp-kolonki-knopka{
  font:inherit; font-size:12.5px; padding:0 12px; display:inline-flex; align-items:center; gap:7px;
  border:1px solid var(--line); border-radius:var(--kp-radius); background:var(--surface);
  color:var(--kp-ink-2); cursor:pointer; transition:border-color .15s, background .15s; white-space:nowrap;
}
.kp-kolonki-knopka:hover,.kp-kolonki-knopka[aria-expanded="true"]{ border-color:var(--accent); background:var(--accent-soft); color:var(--kp-accent-ink) }
.kp-kolonki-knopka b{ font-family:var(--mono); font-size:11px; font-weight:600 }
.kp-kolonki-panel{
  position:absolute; top:calc(100% + 7px); left:0; z-index:40; width:250px; padding:7px;
  border:1px solid var(--line); border-radius:var(--kp-radius); background:var(--surface); box-shadow:var(--kp-shadow);
  animation:kp-vsplyt .16s cubic-bezier(.2,.8,.2,1);
}
.kp-kolonki-panel[hidden]{ display:none }
.kp-kolonki-zag{ display:flex; align-items:center; padding:4px 8px 8px; font-size:10.5px;
  letter-spacing:.06em; text-transform:uppercase; color:var(--muted); font-weight:600 }
.kp-kolonki-zag button{ margin-left:auto; font:inherit; font-size:11px; text-transform:none; letter-spacing:0;
  color:var(--kp-accent-ink); background:none; border:0; cursor:pointer; padding:3px 6px; border-radius:5px }
.kp-kolonki-zag button:hover{ background:var(--accent-soft) }
.kp-kolonki-punkt{ display:flex; align-items:center; gap:9px; padding:7px 8px; border-radius:var(--kp-radius-sm);
  font-size:12.5px; cursor:grab; transition:background .13s }
.kp-kolonki-punkt:hover{ background:var(--surface-2) }
.kp-kolonki-punkt.kp-tashchim{ opacity:.4 }
.kp-kolonki-punkt.kp-nad{ box-shadow:inset 0 -2px 0 var(--accent) }
.kp-kolonki-punkt .kp-tochki{ color:var(--muted); font-size:11px; letter-spacing:-2px; flex:0 0 auto }
.kp-kolonki-punkt .kp-imja-kol{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.kp-kolonki-punkt.kp-skryta .kp-imja-kol{ color:var(--muted); text-decoration:line-through; text-decoration-thickness:1px }
.kp-kolonki-punkt .kp-ptichka{ width:16px; height:16px; border:1px solid var(--line); border-radius:4px;
  background:var(--surface); display:grid; place-items:center; flex:0 0 auto }
.kp-kolonki-punkt .kp-ptichka[aria-checked="true"]{ background:var(--accent); border-color:var(--accent) }
.kp-kolonki-punkt .kp-ptichka[aria-checked="true"]::after{ content:""; width:3px; height:6px;
  border:solid #fff; border-width:0 1.6px 1.6px 0; transform:rotate(43deg) translateY(-1px) }

/* ── СВЕРНУТЬ ВСЕ ГРУППЫ ── */
.kp-svernut-vse{ font:inherit; font-size:11.5px; padding:0 11px; display:inline-flex; align-items:center; gap:6px;
  border:1px solid var(--line); border-radius:var(--kp-radius); background:var(--surface); color:var(--kp-ink-2);
  cursor:pointer; transition:border-color .15s, background .15s; white-space:nowrap; flex:0 0 auto }
.kp-svernut-vse:hover{ border-color:var(--accent); background:var(--accent-soft); color:var(--kp-accent-ink) }
.kp-svernut-vse i{ font-style:normal; display:inline-block; transition:transform .18s cubic-bezier(.3,.8,.3,1) }
.kp-svernut-vse[aria-pressed="true"] i{ transform:rotate(-90deg) }

/* ── ПОДВАЛ ТАБЛИЦЫ. Итог отбора был только в полосе НАД таблицей: докрутив
   длинный список до низа, человек снова его не видел. ── */
table.kp-dannye tfoot td{
  position:sticky; bottom:0; z-index:3; background:var(--surface-2);
  border-top:1px solid var(--line); border-bottom:0; padding:9px 12px; font-weight:600; font-size:12.5px;
}
table.kp-dannye tfoot td.kp-n{ font-family:var(--mono); font-variant-numeric:tabular-nums; text-align:right }
table.kp-dannye tfoot .kp-podpis-itoga{ font-weight:400; color:var(--muted); font-size:11.5px; margin-left:8px }

/* ── КЛАВИАТУРА ПО СТРОКАМ ── */
table.kp-dannye tbody tr[tabindex]{ outline:none }
table.kp-dannye tbody tr.kp-pod-kursorom{ background:var(--accent-soft) }
table.kp-dannye tbody tr.kp-pod-kursorom td:first-child{ box-shadow:inset 2px 0 0 var(--accent) }

@media (prefers-reduced-motion:reduce){
  .kp-chip::before{ transition:none }
  .kp-chip.kp-tolko-chto::after{ animation:none }
  .kp-chip:hover .kp-schet{ transform:none }
}

/* ── СКЛАДКИ. Крупные блоки экрана, стоявшие между шапкой и таблицей,
   переносятся внутрь контейнера и сворачиваются в ряд корешков. На «Ценах»
   это отборы, товарные группы, виды цен и сводка — вместе 825 пикселей,
   из-за которых контейнер собирался под ними и ничего не уплотнял.
   Раскрыт всегда только один корешок: иначе вернёмся к той же простыне. ── */
.kp-skladki{
  display:flex; flex-wrap:wrap; gap:6px; padding:9px 16px;
  border-bottom:1px solid var(--kp-line-soft); background:var(--surface);
}
.kp-koreshok{
  font:inherit; font-size:12.5px; padding:5px 12px; display:inline-flex; align-items:center; gap:7px;
  border:1px solid var(--line); border-radius:999px; background:var(--surface-2); color:var(--kp-ink-2);
  cursor:pointer; white-space:nowrap; transition:border-color .15s, background .15s, color .15s;
}
.kp-koreshok::after{
  content:""; width:5px; height:5px; border-right:1.4px solid currentColor; border-bottom:1.4px solid currentColor;
  transform:translateY(-2px) rotate(45deg); opacity:.55; transition:transform .18s ease;
}
.kp-koreshok:hover{ border-color:color-mix(in srgb,var(--accent) 45%,var(--line)); color:var(--ink) }
.kp-koreshok[aria-expanded="true"]{
  background:var(--accent-soft); border-color:color-mix(in srgb,var(--accent) 42%,var(--line));
  color:var(--kp-accent-ink); font-weight:500;
}
.kp-koreshok[aria-expanded="true"]::after{ transform:translateY(1px) rotate(-135deg) }
.kp-skladka-telo{ border-bottom:1px solid var(--kp-line-soft); animation:kp-vsplyt .18s cubic-bezier(.2,.8,.2,1) }
.kp-skladka-telo[hidden]{ display:none }
/* поля у перенесённого блока снимает сам контейнер: своих полей у складки
   нет, и перебивать чужие не нужно — блок лежит внутри моего узла */
.kp-skladka-telo > *{ margin-top:0; margin-bottom:0 }

/* Кнопка-значок в рельсе: квадрат под высоту ряда. Текстовые подписи у
   закрепления и сворачивания переносили рельсу на лишний ряд — замер показал
   +12 пикселей до данных на экранах, где складывать было нечего. */
.kp-svernut-vse.kp-znachkom{ width:34px; padding:0; justify-content:center; font-size:13px }
.kp-svernut-vse.kp-znachkom[aria-pressed="true"]{
  background:var(--accent-soft); border-color:color-mix(in srgb,var(--accent) 42%,var(--line));
  color:var(--kp-accent-ink);
}

/* ══════════════════════════════════════════════════════════════════════
   ПАЛИТРА ЦЕЛИКОМ: ХОЛОДНЫЙ ЗЕЛЁНЫЙ.
   Замер по 43 таблицам стилей: токены объявлены в ЧЕТЫРЁХ файлах разными
   значениями — editorial.css #0f7a64, redesign.css #0d9488 и #10e0a0,
   tokens.css #0d9488 и #34d399. Какой победит, решал порядок загрузки, и
   оттого продукт выглядел разным на разных экранах.

   ВЕС СЕЛЕКТОРА ЗДЕСЬ НЕ УКРАШЕНИЕ. Первая редакция объявляла токены на
   :root — и не применилась вовсе: editorial.css пишет их на
   :root[data-theme="light"], это два класса против одного, и мой блок
   проигрывал по ВЕСУ, а не по очереди. Файл подключён последним, а толку не
   было. Поэтому ниже тот же вес.

   Один источник правды: правится в одном месте, снимается одним удалением —
   в отличие от правки четырёх файлов, где откат пришлось бы собирать обратно.
   ═════════════════════════════════════════════════════════════════════ */
:root[data-theme="light"],:root:not([data-theme="dark"]){
  --bg:#f7faf9; --side:#eef4f2; --ground:#f7faf9;
  --surface:#ffffff; --surface-2:#f2f7f5; --surface-3:#e9f1ee; --panel:#ffffff;
  --line:#dde7e3; --line-2:#cddbd6; --line-3:#b6c9c3;
  --text:#17231f; --ink:#17231f; --soft:#3c4c47; --dim:#55655f; --muted:#6b7a75; --faint:#a8b5b0;
  --accent:#0e8067; --accent-strong:#0a5c4a; --accent-ink:#0a5c4a;
  --accent-soft:rgba(14,128,103,.09); --accent-line:rgba(14,128,103,.22); --accent-glow:rgba(14,128,103,.16);
  --good:#0e8067; --good-soft:rgba(14,128,103,.10); --good-line:rgba(14,128,103,.22);
  --warn:#a8760f; --warn-soft:rgba(168,118,15,.10); --warn-line:rgba(168,118,15,.22); --warn-ink:#7a5407;
  --bad:#b5341f; --bad-soft:rgba(181,52,31,.09); --bad-line:rgba(181,52,31,.22); --danger:#b5341f;
}
:root[data-theme="dark"]{
  --bg:#0e1513; --side:#0b1110; --ground:#0e1513;
  --surface:#161f1c; --surface-2:#1b2522; --surface-3:#202b28; --panel:#161f1c;
  --line:#27332f; --line-2:#31403b; --line-3:#3d4e48;
  --text:#e4ede9; --ink:#e4ede9; --soft:#bccac5; --dim:#9aaba5; --muted:#8b9d97; --faint:#6f817b;
  --accent:#35a98b; --accent-strong:#5cc4a8; --accent-ink:#5cc4a8;
  --accent-soft:rgba(53,169,139,.14); --accent-line:rgba(53,169,139,.30); --accent-glow:rgba(53,169,139,.20);
  --good:#35a98b; --good-soft:rgba(53,169,139,.14); --good-line:rgba(53,169,139,.30);
  --warn:#d8a441; --warn-soft:rgba(216,164,65,.13); --warn-line:rgba(216,164,65,.30); --warn-ink:#e8bd6e;
  --bad:#e0705a; --bad-soft:rgba(224,112,90,.13); --bad-line:rgba(224,112,90,.30); --danger:#e0705a;
}

/* Название и артикул — одна сущность. В плотном виде артикул не прячется, а
   встаёт в ту же строку через разделитель: человек включает плотность, чтобы
   видеть БОЛЬШЕ, а не чтобы терять опознание позиции. */
.kp-tovar-blok{ display:block; min-width:0 }
.kp-tovar-blok .kp-artikul{ font-family:var(--mono); font-size:11px; color:var(--muted); display:block }
[data-kp-plotno="da"] .kp-tovar-blok{ display:flex; align-items:baseline; gap:9px }
[data-kp-plotno="da"] .kp-tovar-blok .kp-artikul{
  display:inline; flex:0 0 auto; position:relative; padding-left:10px;
}
[data-kp-plotno="da"] .kp-tovar-blok .kp-artikul::before{
  content:""; position:absolute; left:0; top:1px; bottom:1px; width:1px; background:var(--line);
}

/* Однострочная заметка экрана, переехавшая в строку итога: своих полей и
   подложки у неё больше нет — она часть полосы, а не отдельный блок. */
.kp-itog > .kp-zametka-ekrana{
  margin:0; padding:0; border:0; background:none; box-shadow:none;
  font-size:11.5px; color:var(--muted); display:inline-flex; align-items:center;
}
.kp-itog > .kp-zametka-ekrana::before{ display:none }
.kp-itog > .kp-zametka-ekrana *{ margin:0; font-size:inherit; color:inherit; background:none; border:0 }

/* ══════════════════════════════════════════════════════════════════════
   ПЛАВАЮЩИЙ ДОК. Мысль Кира, и она снимает спор о высоте шапки: пока
   управление стояло НАД таблицей, оно отнимало у данных сто с лишним
   пикселей на каждом экране. В доке оно висит поверх содержимого внизу —
   таблица забирает экран целиком и начинается сразу под заголовком.

   Док не перекрывает последнюю строку: таблице снизу добавлен отступ ровно
   на его высоту. Иначе последняя строка была бы вечно под доком, и человек
   решил бы, что список кончился раньше, чем он кончился.
   ═════════════════════════════════════════════════════════════════════ */
.kp-dok{
  position:fixed; left:50%; bottom:18px; transform:translateX(-50%);
  z-index:60; display:flex; align-items:center; gap:9px; flex-wrap:nowrap;
  max-width:min(1120px, calc(100vw - 40px)); padding:9px 12px;
  border:1px solid var(--line); border-radius:14px;
  background:color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter:blur(12px) saturate(1.3);
  box-shadow:0 2px 8px rgba(23,35,31,.08), 0 18px 44px -20px rgba(23,35,31,.42);
  animation:kp-dok-vhod .24s cubic-bezier(.2,.9,.25,1);
}
@keyframes kp-dok-vhod{ from{ opacity:0; transform:translateX(-50%) translateY(10px) } to{ opacity:1; transform:translateX(-50%) } }
[data-theme="dark"] .kp-dok{ background:color-mix(in srgb, var(--surface) 84%, transparent) }

/* внутри дока управление идёт в одну строку и не переносится */
.kp-dok .kp-relsa-verh{ margin:0; flex-wrap:nowrap; gap:9px }
.kp-dok .kp-poisk{ flex:1 1 200px; min-width:150px }
.kp-dok .kp-poisk input,.kp-dok .kp-poisk-zhivoj input{ height:32px }
.kp-dok .kp-podpis-otbora{ display:none }          /* подпись съедает место, смысл несёт сам список */
.kp-dok .kp-itog{
  border:0; background:none; padding:0 4px 0 10px; position:relative; white-space:nowrap;
}
.kp-dok .kp-itog::before{
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:1px; height:18px; background:var(--line);
}
.kp-dok .kp-itog > span{ padding:0 10px 0 0 }
.kp-dok .kp-itog > span + span{ padding-left:10px }

/* фишки живут в доке за одной кнопкой и раскрываются ВВЕРХ */
.kp-otbor-knopka{
  font:inherit; font-size:12.5px; height:34px; padding:0 12px; display:inline-flex; align-items:center; gap:7px;
  border:1px solid var(--line); border-radius:var(--kp-radius); background:var(--surface); color:var(--kp-ink-2);
  cursor:pointer; white-space:nowrap; flex:0 0 auto; transition:border-color .15s, background .15s;
}
.kp-otbor-knopka:hover,.kp-otbor-knopka[aria-expanded="true"]{ border-color:var(--accent); background:var(--accent-soft); color:var(--kp-accent-ink) }
.kp-otbor-knopka b{ font-family:var(--mono); font-size:11px; font-weight:600 }
.kp-dok .kp-chipy{
  position:absolute; left:0; right:0; bottom:calc(100% + 9px);
  max-height:42vh; overflow-y:auto; padding:11px 12px;
  border:1px solid var(--line); border-radius:14px;
  background:color-mix(in srgb, var(--surface) 96%, transparent);
  backdrop-filter:blur(12px); box-shadow:var(--kp-shadow);
  animation:kp-vsplyt .18s cubic-bezier(.2,.8,.2,1);
}
.kp-dok .kp-chipy[hidden]{ display:none }
.kp-dok .kp-vybrano{ display:none }

/* Место под док — по ИЗМЕРЕННОЙ высоте. Числом 86px это держалось ровно до
   первого дока, который выше: в режиме выбора к ряду прибавляются сводка и
   кнопки, и последняя строка таблицы уезжала под док. Высоту ставит
   meritDok() в ui_komandnaja_polosa.js через --kp-dok-h; число здесь —
   запасное значение на случай, если измерение не состоялось. */
body.kp-s-dokom main{ padding-bottom:calc(var(--kp-dok-h, 78px) + 22px) }

@media (max-width:820px){
  .kp-dok{ left:10px; right:10px; transform:none; max-width:none; flex-wrap:wrap }
  @keyframes kp-dok-vhod{ from{ opacity:0; transform:translateY(10px) } to{ opacity:1; transform:none } }
  .kp-dok .kp-relsa-verh{ flex-wrap:wrap }
  .kp-dok .kp-itog{ display:none }
}

/* Док в режиме выбора: тёмный, чтобы режим был виден, а не угадывался. */
.kp-dok.kp-dok-vybor{
  background:color-mix(in srgb, var(--ink) 92%, transparent);
  border-color:color-mix(in srgb, var(--ink) 92%, transparent);
  color:var(--surface);
}
.kp-vybor-schjot{
  display:inline-flex; align-items:baseline; gap:9px; padding:0 12px 0 4px; white-space:nowrap;
  font-size:12.5px; color:inherit;
}
.kp-vybor-schjot b{ font-family:var(--mono); font-size:16px; font-weight:600 }
/* панель массовых действий экрана, переехавшая в док: своих полей и подложки
   у неё больше нет — она часть дока, а не отдельный блок */
.kp-massovaja{
  display:flex; align-items:center; gap:9px; margin:0; padding:0; border:0;
  background:none; box-shadow:none; border-radius:0;
}
.kp-massovaja[hidden]{ display:none }
.kp-dok-vybor .kp-massovaja input,.kp-dok-vybor .kp-massovaja select{
  height:32px; border:1px solid rgba(255,255,255,.22); border-radius:9px;
  background:rgba(255,255,255,.10); color:inherit; padding:0 10px; font:inherit; font-size:12.5px;
}
.kp-dok-vybor .kp-massovaja button{
  height:32px; padding:0 13px; border-radius:9px; font:inherit; font-size:12.5px; cursor:pointer;
  border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.10); color:inherit;
}
.kp-dok-vybor .kp-massovaja button:hover{ background:rgba(255,255,255,.2) }
.kp-dok-vybor .kp-massovaja .btn-primary,.kp-dok-vybor .kp-massovaja .primary{
  background:var(--accent); border-color:var(--accent); color:#fff; font-weight:500;
}

/* Итог внутри дока — одной строкой. Как обычный гибкий ребёнок он переносился
   по словам и вытягивал док в 159 пикселей вместо 78. */
.kp-dok .kp-itog{ flex:0 0 auto; flex-wrap:nowrap; white-space:nowrap; display:inline-flex }
.kp-dok .kp-itog > span{ flex:0 0 auto }
.kp-dok .kp-vybrano{ display:none }
/* пустая кнопка «выбрать всё» из панели экрана: без подписи её не опознать */
.kp-massovaja .pd-bulk__all::after{ content:"все"; font-size:12px }

/* Док — строго одна строка. Он висит поверх данных, и три ряда в нём закрывают
   ровно то, ради чего человек сюда пришёл. Не влезло — уезжает вбок. */
.kp-dok{ flex-wrap:nowrap; overflow-x:auto; overflow-y:visible; scrollbar-width:thin }
.kp-dok .kp-relsa-verh{ flex-wrap:nowrap; overflow:visible }
.kp-dok > *{ flex:0 0 auto }
.kp-dok .kp-poisk{ flex:1 1 180px; min-width:140px }
/* всплывашка с фишками не участвует в горизонтальной прокрутке дока */
.kp-dok .kp-chipy{ position:fixed; left:50%; transform:translateX(-50%); right:auto;
  width:min(1120px, calc(100vw - 40px)); bottom:calc(18px + var(--kp-dok-h, 78px) + 9px); }
@media (max-width:820px){ .kp-dok .kp-chipy{ left:10px; right:10px; transform:none; width:auto } }

/* Разделители в доке не нужны: они там превращались в пустые двадцатипиксельные
   промежутки, которые читались как сломанные кнопки. */
.kp-dok .kp-itog .kp-razdel{ display:none }
.kp-dok .kp-itog > span + span{ padding-left:14px }

/* Пометка о содержимом колонки в панели: «пусто везде», «одно значение»,
   «повторяет «Розничная цена»». Это про данные, а не про оформление, поэтому
   стоит рядом с именем, а не прячется в подсказку. */
.kp-pometa-kol{
  font-size:10.5px; color:var(--muted); flex:0 0 auto; margin-left:auto;
  border:1px solid var(--line); border-radius:999px; padding:1px 7px; white-space:nowrap;
}
.kp-kolonki-punkt.kp-skryta .kp-pometa-kol{ opacity:.6 }

/* Ячейка держится одной строкой: длинный текст обрезается многоточием, целиком
   доступен по наведению. На «Лидах» это 64 пикселя строки против 33. */
table.kp-dannye td.kp-kletka{ max-width:30ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
table.kp-dannye td.kp-para{ white-space:normal }
table.kp-dannye td.kp-para > *{ display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
table.kp-dannye .kp-podstrochnik{ font-size:11px; color:var(--muted) }
/* в плотном виде пояснение встаёт в ту же строку через разделитель, а не
   прячется: плотность включают, чтобы видеть БОЛЬШЕ, а не терять смысл */
[data-kp-plotno="da"] table.kp-dannye td.kp-para{ display:flex; align-items:baseline; gap:9px }
[data-kp-plotno="da"] table.kp-dannye td.kp-para > *{ flex:0 1 auto; min-width:0 }
[data-kp-plotno="da"] table.kp-dannye .kp-podstrochnik{ position:relative; padding-left:10px; flex:0 0 auto }
[data-kp-plotno="da"] table.kp-dannye .kp-podstrochnik::before{
  content:""; position:absolute; left:0; top:1px; bottom:1px; width:1px; background:var(--line);
}


/* ══════════════════════════════════════════════════════════════════════
   ДОК КАК ИНСТРУМЕНТ ЭКРАНА · 2026-09-15
   Оформление того, что док теперь показывает: имя экрана, сводку по выбору,
   ряд достижимых действий, сравнение строк и короткий отклик на действие.
   Ни одного !important: файл подключён последним, и всё, что ниже, выигрывает
   порядком у равного веса.
   ═════════════════════════════════════════════════════════════════════ */

/* — имя экрана и подсказка о способе выбора. Док вслух называет, где стоит. — */
.kp-dok-ekran{
  display:inline-flex; flex-direction:column; justify-content:center; gap:1px;
  padding:0 12px 0 2px; white-space:nowrap; flex:0 0 auto; position:relative;
}
.kp-dok-ekran::after{
  content:""; position:absolute; right:0; top:50%; transform:translateY(-50%);
  width:1px; height:20px; background:var(--line);
}
.kp-dok-ekran b{ font-size:12.5px; font-weight:600; color:var(--kp-ink-2, var(--ink)); letter-spacing:-.01em }
.kp-dok-ekran i{ font-style:normal; font-size:10.5px; color:var(--muted) }
@media (max-width:1100px){ .kp-dok-ekran i{ display:none } }
@media (max-width:820px){ .kp-dok-ekran{ display:none } }

/* — ряд действий. Кнопок ровно столько, сколько действий достижимо. — */
.kp-dejstvija{ display:inline-flex; align-items:center; gap:6px; flex:0 0 auto }
.kp-dejstvija[hidden]{ display:none }
.kp-dejstvie{
  font:inherit; font-size:12.5px; height:32px; padding:0 12px; cursor:pointer; white-space:nowrap;
  border-radius:9px; border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.10); color:inherit; transition:background .14s, border-color .14s;
}
.kp-dejstvie:hover{ background:rgba(255,255,255,.2) }
.kp-dejstvie:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }
.kp-dejstvie[data-kp-dejstvie="kopirovat"]{ border-color:var(--accent); background:var(--accent); color:#fff; font-weight:500 }
.kp-dejstvie[data-kp-dejstvie="kopirovat"]:hover{ filter:brightness(1.08) }
.kp-dejstvie-tihoe{ background:transparent; border-color:transparent; color:inherit; opacity:.72 }
.kp-dejstvie-tihoe:hover{ background:rgba(255,255,255,.14); opacity:1 }

/* — то, чего мы НЕ знаем, выглядит иначе, чем число. Иначе «не прочитана»
     читается как ещё одна цифра. — */
.kp-neizvestno{ font-style:normal; opacity:.7; font-size:11.5px }
.kp-vybor-schjot .kp-razdel{
  display:inline-block; width:1px; height:14px; margin:0 10px; vertical-align:middle;
  background:currentColor; opacity:.25;
}

/* — сравнение выбранных строк: всплывает НАД доком, как и фишки — */
.kp-sravnenie{
  position:fixed; left:50%; transform:translateX(-50%); right:auto;
  width:min(1120px, calc(100vw - 40px)); bottom:calc(18px + var(--kp-dok-h, 78px) + 9px);
  max-height:46vh; overflow:auto; padding:11px 12px; z-index:61;
  border:1px solid var(--line); border-radius:14px; color:var(--ink);
  background:color-mix(in srgb, var(--surface) 96%, transparent);
  backdrop-filter:blur(12px); box-shadow:var(--kp-shadow, 0 18px 44px -20px rgba(23,35,31,.42));
}
.kp-sravnenie[hidden]{ display:none }
.kp-sravnenie-shapka{ display:flex; align-items:center; gap:8px; font-size:12px; color:var(--muted); margin-bottom:8px }
.kp-sravnenie-shapka b{ font-family:var(--mono); color:var(--ink) }
.kp-sravnenie-zakryt{
  margin-left:auto; width:26px; height:26px; border:1px solid var(--line); border-radius:7px;
  background:var(--surface); color:var(--ink); font-size:16px; line-height:1; cursor:pointer;
}
.kp-sravnenie table{ width:100%; border-collapse:collapse; font-size:12px }
.kp-sravnenie th,.kp-sravnenie td{ padding:6px 9px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top }
.kp-sravnenie thead th{ color:var(--muted); font-weight:600; font-size:11px; text-transform:uppercase; letter-spacing:.05em }
.kp-sravnenie tbody th{ color:var(--muted); font-weight:500; white-space:nowrap }
.kp-sravnenie tbody td{ font-family:var(--mono); font-size:11.5px }
@media (max-width:820px){ .kp-sravnenie{ left:10px; right:10px; transform:none; width:auto } }

/* — короткий отклик: «Скопировано 12 позиций». Без него нажатие выглядит как
     ничего не сделавшее. — */
.kp-otklik{
  font-size:12px; padding:0 10px; white-space:nowrap; flex:0 0 auto; opacity:.85;
}
.kp-otklik[hidden]{ display:none }

/* — выбранная строка видна в самой таблице, а не только в доке — */
table.kp-dannye tbody tr.kp-vybrana > td{
  background:var(--accent-soft);
  box-shadow:inset 0 -1px 0 var(--accent-line);
}
table.kp-dannye tbody tr.kp-vybrana > td:first-child{ box-shadow:inset 3px 0 var(--accent), inset 0 -1px 0 var(--accent-line) }

/* — Док в режиме выбора выше обычного: сводка и кнопки в один ряд не всегда
     влезают. Разрешаем ДВА ряда и меряем высоту — вместо того чтобы прятать
     действия за горизонтальной прокруткой, где их не найти. — */
.kp-dok.kp-dok-vybor{ flex-wrap:wrap; row-gap:8px; overflow-x:visible }
.kp-dok.kp-dok-vybor .kp-vybor-schjot{ flex:1 1 auto; min-width:200px; white-space:normal }
@media (max-width:820px){
  .kp-dok.kp-dok-vybor .kp-dejstvija{ flex-wrap:wrap; row-gap:6px }
  .kp-dok{ max-height:52vh; overflow-y:auto }
}

/* ══ 16.09.2026. КОМПОЗИЦИЯ МАКЕТА ДЛЯ ЭКРАНОВ НА СЛОВАРЕ ВОЛНЫ ══════════
   Слой перестал складывать блоки словаря в корешки и уводить рельсу в док:
   по макету всё лежит в одной карточке сверху вниз — шапка, ряд показателей,
   рельса, фишки, строка «Найдено», таблица, полоса выбора. Здесь — вид
   этих мест для узлов словаря (.ek-*), которые раньше правил не получали. */

/* шапка словаря: заголовок макета 19px, пояснение под ним, действия справа */
.kp-maket > .ek-hd.kp-polosa-glavnaja{
  display:grid; grid-template-columns:auto 1fr auto; grid-template-areas:"imja n act" "sub sub act";
  align-items:center; column-gap:12px; row-gap:2px; padding:14px 18px 12px;
}
.kp-maket > .ek-hd.kp-polosa-glavnaja > .ek-hd-t{ grid-area:imja; margin:0 }
.kp-maket > .ek-hd.kp-polosa-glavnaja > .ek-hd-n{
  grid-area:n; justify-self:start; font-family:var(--mono); font-size:12.5px; font-weight:500;
  color:var(--kp-accent-ink); background:var(--accent-soft); border-radius:999px; padding:2px 9px;
}
.kp-maket > .ek-hd.kp-polosa-glavnaja > .ek-hd-s{ grid-area:sub; font-size:12.5px; color:var(--muted); white-space:normal; overflow:visible; max-width:none }
.kp-maket > .ek-hd.kp-polosa-glavnaja > .ek-hd-gap{ display:none }
.kp-maket > .ek-hd.kp-polosa-glavnaja > .ek-hd-act,
.kp-maket > .ek-hd.kp-polosa-glavnaja > a, .kp-maket > .ek-hd.kp-polosa-glavnaja > button,
.kp-maket > .ek-hd.kp-polosa-glavnaja > .kp-istochnik{ grid-area:act; justify-self:end }
.kp-maket > .ek-hd.kp-polosa-glavnaja.is-bad > .ek-hd-n{ color:var(--bad); background:var(--bad-soft) }
.kp-maket > .ek-hd.kp-polosa-glavnaja.is-warn > .ek-hd-n{ color:var(--warn-ink); background:var(--warn-soft) }

/* первая полоса чипов словаря = ряд показателей: имя мелким сверху, число моно */
.kp-maket > .ek-chips.kp-slovar-plitki{ gap:0; padding:10px 6px; flex-wrap:wrap }
.kp-slovar-plitki .ek-chip.kp-plitka{
  display:inline-flex; flex-direction:column; align-items:flex-start; gap:2px;
  padding:4px 16px; border:0; border-radius:0; background:none; box-shadow:none; min-width:0;
}
.kp-slovar-plitki .ek-chip.kp-plitka + .ek-chip.kp-plitka::before{
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%); width:1px; height:26px; background:var(--line);
}
.kp-slovar-plitki .ek-chip-k.kp-plitka-imja{ font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); font-weight:500 }
.kp-slovar-plitki .ek-chip-v.kp-plitka-chislo{ font-family:var(--mono); font-size:17px; font-weight:600; line-height:1.15; color:var(--ink) }
.kp-slovar-plitki .ek-chip.is-good .ek-chip-v{ color:var(--accent) }
.kp-slovar-plitki .ek-chip.is-bad .ek-chip-v{ color:var(--bad) }
.kp-slovar-plitki .ek-chip.is-warn .ek-chip-v{ color:var(--warn-ink) }
.kp-slovar-plitki .ek-chip-s.kp-plitka-pod{ font-size:11px; color:var(--muted); max-width:22ch; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.kp-slovar-plitki .ek-chip.kp-plitka.is-drill:hover{ background:color-mix(in srgb, var(--accent) 8%, transparent); border-radius:8px }
.kp-slovar-plitki .ek-chip.kp-plitka[data-kp-drill]::after{ content:none }

/* прочие полосы чипов словаря — фишки отбора экрана, как в макете: ряд
   пилюль со счётом под рельсой */
.kp-maket > .ek-chips.kp-slovar-fishki{ padding:8px 16px 4px; gap:6px; background:var(--surface); border-bottom:0 }
.kp-maket > .ek-chips.kp-slovar-fishki + .ek-chips.kp-slovar-fishki{ padding-top:2px }
.kp-maket > .ek-chips.kp-slovar-fishki + .kp-itog,
.kp-maket > .ek-chips.kp-slovar-fishki + .ek-chips.kp-slovar-fishki + .kp-itog{ border-top:1px solid var(--kp-line-soft) }

/* сортировка и массовые действия экрана переезжают в рельсу одной строкой */
.kp-relsa-verh .ek-otbor.kp-slovar-otbor{ display:inline-flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0; padding:0; border:0; background:none }
.kp-relsa-verh .ek-otbor.kp-slovar-otbor label{ display:inline-flex; align-items:center; gap:6px; margin:0 }
.kp-relsa-verh .ek-otbor.kp-slovar-otbor label > span{ font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted) }

/* охват и пояснения — заметки под строкой «Найдено»: мелко, приглушённо,
   одной строкой; полный текст — по наведению и в раскрытии */
.kp-itog{ flex-wrap:wrap; row-gap:4px }
.kp-itog > .kp-itog-chisla{ display:inline-flex; align-items:center; gap:10px; flex-wrap:wrap }
.kp-itog > .ek-scope.kp-zametka-ekrana{
  flex-basis:100%; font-size:11.5px; line-height:1.35; color:var(--muted);
  border-left:2px solid var(--line); padding:0 0 0 8px; margin:0;
  display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden;
}
.kp-itog > .ek-scope.kp-zametka-ekrana:hover, .kp-itog > .ek-scope.kp-zametka-ekrana:focus-within{ -webkit-line-clamp:unset }
.kp-itog > .ek-scope.kp-zametka-ekrana.is-rez{ border-left-color:var(--warn); color:var(--kp-ink-2) }
.kp-itog > .ek-scope.kp-zametka-ekrana b{ font-family:var(--mono); font-size:11.5px; color:var(--ink); font-weight:500 }

/* распределение под показателями и всё, что легло под таблицу */
.kp-maket > .ek-raspr{ margin:0; padding:6px 18px 10px; border-bottom:1px solid var(--kp-line-soft); background:var(--surface-2) }
.kp-maket > .kp-posle-tablicy{ margin:0; padding:10px 18px; border-top:1px solid var(--kp-line-soft); background:var(--surface) }
.kp-maket > details.ek-note.kp-posle-tablicy{ padding:6px 18px }

/* полоса выбора — тёмная, под таблицей, как в макете: «0 выбрано · действия» */
.kp-polosa-vybora{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:8px 16px; background:var(--ink); color:var(--surface); font-size:12.5px;
}
.kp-polosa-vybora:empty{ display:none }
.kp-polosa-vybora .kp-dok-ekran{ display:inline-flex; flex-direction:column; gap:1px; color:var(--surface); opacity:.85 }
.kp-polosa-vybora .kp-dok-ekran b{ font-weight:600 }
.kp-polosa-vybora .kp-dok-ekran i{ font-style:normal; font-size:11px; opacity:.7 }
.kp-polosa-vybora .kp-vybor-schjot{ font-family:var(--mono); font-weight:600; font-size:13px; color:var(--surface) }
.kp-polosa-vybora .kp-vybor-schjot b{ color:var(--surface) }
.kp-polosa-vybora .kp-dejstvija{ display:inline-flex; gap:6px; margin-left:auto; flex-wrap:wrap }
.kp-polosa-vybora .kp-dejstvie{
  height:28px; padding:0 12px; border-radius:7px; border:1px solid color-mix(in srgb, var(--surface) 25%, transparent);
  background:color-mix(in srgb, var(--surface) 10%, transparent); color:var(--surface); font-size:12.5px; cursor:pointer;
}
.kp-polosa-vybora .kp-dejstvie:first-child{ background:var(--accent); border-color:var(--accent) }
.kp-polosa-vybora .kp-dejstvie-tihoe{ background:none }
.kp-polosa-vybora .kp-sravnenie{ flex-basis:100%; background:var(--surface); color:var(--ink); border-radius:8px; padding:8px 10px }
.kp-polosa-vybora .kp-massovaja{ flex-basis:100%; color:var(--ink); background:var(--surface); border-radius:8px; padding:6px 10px }
.kp-polosa-vybora .kp-otklik{ color:var(--surface); opacity:.8 }
.kp-maket > .kp-polosa-vybora:last-child{ border-bottom-left-radius:14px; border-bottom-right-radius:14px }
.kp-polosa-vybora .kp-dok-ekran b, .kp-polosa-vybora .kp-dok-ekran i, .kp-polosa-vybora .kp-vybor-schjot b{ color:var(--surface) }

/* заметки экрана вне корня — под рельсой, компактно */
.kp-maket > .kp-zametki:empty{ display:none }
.kp-maket > .kp-zametki{ padding:6px 18px; border-bottom:1px solid var(--kp-line-soft); background:var(--surface) }
.kp-maket > .kp-zametki > .kp-zametka-ekrana,
.kp-maket .ek-scope.kp-zametka-v-korne{
  font-size:11.5px; line-height:1.35; color:var(--muted); margin:0; padding:2px 0 2px 8px; border-left:2px solid var(--line); background:none;
  display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden;
}
.kp-maket > .kp-zametki > .kp-zametka-ekrana:hover, .kp-maket .ek-scope.kp-zametka-v-korne:hover{ -webkit-line-clamp:unset }
.kp-maket .ek-scope.kp-zametka-v-korne.is-rez, .kp-maket > .kp-zametki > .is-rez{ border-left-color:var(--warn); color:var(--kp-ink-2) }
.kp-maket .ek-scope.kp-zametka-v-korne b{ font-family:var(--mono); font-size:11.5px; color:var(--ink); font-weight:500 }
/* навигация разделов экрана — строкой вкладок под шапкой */
.kp-maket > .kp-nav-ekrana{ padding:6px 18px 0; margin:0; border-bottom:1px solid var(--kp-line-soft); background:var(--surface) }
/* строка итога внутри корня — тот же вид, что снаружи */
.kp-maket .kp-itog{ margin:0; border-radius:0; border-left:0; border-right:0 }
/* экраны цен: строка формул табличного редактора — не из макета */
.kp-maket .pricing-formula-bar{ display:none }
/* плитки с длинными подписями (кокпит): число крупно, подписи — по одной строке */
.kp-slovar-plitki .ek-chip.kp-plitka > b:not(.ek-chip-v){ font-family:var(--mono); font-size:17px; font-weight:600; line-height:1.15; color:var(--ink) }
.kp-slovar-plitki .ek-chip.kp-plitka .ek-chip-s, .kp-slovar-plitki .ek-chip.kp-plitka em{ display:block; font-size:11px; color:var(--muted); max-width:26ch; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-style:normal }
.kp-slovar-plitki .ek-chip.kp-plitka .ek-chip-s + .ek-chip-s, .kp-slovar-plitki .ek-chip.kp-plitka em{ display:none }
.kp-slovar-plitki .ek-chip.kp-plitka:hover .ek-chip-s + .ek-chip-s{ display:block }
/* блоки экрана, переехавшие в карточку между рельсой и таблицей */
.kp-maket > .kp-mezhdu{ margin:0; padding:6px 16px; border-bottom:1px solid var(--kp-line-soft); background:var(--surface) }
.kp-maket > details.kp-mezhdu{ padding:4px 16px }
.kp-maket > .kp-mezhdu.pd-denominator{ background:var(--surface-2) }

/* drilldown строки: один боковой инспектор вместо дублирования данных на странице */
.kp-drill{
  position:fixed; right:18px; top:86px; bottom:18px; width:min(420px, calc(100vw - 36px));
  z-index:60; display:flex; flex-direction:column; overflow:hidden;
  border:1px solid var(--kp-line-soft); border-radius:18px;
  background:color-mix(in srgb,var(--surface) 96%,transparent);
  box-shadow:0 24px 60px rgba(35,27,45,.20), 0 2px 12px rgba(35,27,45,.08);
  animation:kp-drill-in .18s ease-out;
}
.kp-drill-head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:14px;
  padding:16px 18px 14px; border-bottom:1px solid var(--kp-line-soft);
  background:linear-gradient(180deg,color-mix(in srgb,var(--surface-2) 88%,var(--surface)),var(--surface));
}
.kp-drill-head span{
  display:block; margin-bottom:4px; font-size:11px; letter-spacing:.13em; text-transform:uppercase; color:var(--muted);
}
.kp-drill-head b{
  display:block; font-size:16px; line-height:1.22; color:var(--ink); font-weight:650;
}
.kp-drill-head button{
  width:34px; height:34px; flex:0 0 auto; border-radius:10px;
  border:1px solid var(--line); background:var(--surface); color:var(--ink);
  font-size:22px; line-height:1; cursor:pointer;
}
.kp-drill-body{ overflow:auto; padding:10px 14px 16px; display:flex; flex-direction:column; gap:8px }
.kp-drill-row{
  display:grid; grid-template-columns:minmax(104px, .42fr) minmax(0, 1fr); gap:12px;
  padding:10px 12px; border:1px solid var(--kp-line-soft); border-radius:12px; background:var(--surface);
}
.kp-drill-row span{
  font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted);
}
.kp-drill-row strong{
  min-width:0; font-size:13px; line-height:1.35; color:var(--ink); font-weight:560; word-break:break-word;
}
@keyframes kp-drill-in{
  from{ transform:translateX(18px); opacity:0 }
  to{ transform:translateX(0); opacity:1 }
}
@media (prefers-reduced-motion: reduce){
  .kp-drill{ animation:none }
}
@media (max-width:760px){
  .kp-drill{ left:12px; right:12px; top:auto; bottom:12px; width:auto; max-height:58vh }
  .kp-drill-row{ grid-template-columns:1fr }
}