/* Дизайн-система «Потребность» — silver & silver.
   Решение Vadim'а 22.08.2026: единый стиль для всех страниц potrebnost.sl-sl.ru,
   родственный статусной странице sklad.sl-sl.ru (тот же шрифтовой набор, та же
   палитра, та же острая геометрия). Обоснование каждого решения — docs/design-system.md.

   Этот файл — единственный источник стилей проекта. Ни одна страница не заводит
   своих цветов и своих шрифтов: страница, которой чего-то не хватает, добавляет
   компонент сюда, а не пишет локальный <style>. */

/* ───────────────────────── ТОКЕНЫ ───────────────────────── */

:root{
  /* Нативные виджеты — календарь в поле даты, стрелка списка, полосы
     прокрутки — берут вид отсюда. Без этого на тёмной теме они остаются
     светлыми, и иконка календаря пропадает на тёмном поле. */
  color-scheme:light;

  /* Поверхности. Фон тёплый серо-зелёный, а не белый: белый лист под таблицей
     на 3000 строк выжигает глаз за смену. */
  --ground:#F5F5F2;
  --panel:#FFFFFF;
  --panel-2:#FAFAF7;      /* шапка таблицы, закреплённая колонка, вторичная плоскость */
  --edge:#DFDFD8;         /* видимая граница */
  --edge-2:#EDEDE7;       /* внутренняя линейка таблицы — тише границы */

  /* Чернила с зелёным уклоном — родня фону, а не нейтральный серый из коробки. */
  --ink:#1B1D1B;
  --ink-2:#5C6159;
  --ink-3:#8A8F86;

  /* Состояние. Три канала, каждый со своей приглушённой землёй. */
  --done:#2E6E4E;   --done-soft:#E4EFE8;   /* сделано, в норме, поступило */
  --ahead:#A8791F;  --ahead-soft:#F6EEDC;  /* впереди, предупреждение, устарело */
  --risk:#96382B;   --risk-soft:#F7E7E3;   /* риск, отказ источника, дефицит */

  /* Четвёртый канал — «здесь вмешался человек». Отдельная ось: закупщик обязан
     отличать «система предупреждает» от «я это поправил», а зелёный, охра и
     кирпич уже заняты состоянием. */
  --hand:#3A5A78;   --hand-soft:#E8EEF4;

  --font-sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-serif:"IBM Plex Serif",Georgia,"Times New Roman",serif;
  --font-mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;

  --r:2px;                /* острый угол — инструмент, а не приложение */
  --row:36px;             /* высота строки таблицы, комфортная */
  --row-compact:28px;
  --wrap:1120px;
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --ground:#131513;
    --panel:#1E211E;      /* поднято от исходных #1B1E1B: на таблице с волосяной
                             сеткой панель на #131513 сливалась с фоном */
    --panel-2:#242823;
    --edge:#333833;       /* поднято от #2E332E по той же причине */
    --edge-2:#282D28;
    --ink:#EDEFEA; --ink-2:#A9AFA4; --ink-3:#767D73;
    --done:#6FBF90;  --done-soft:#1E2C24;
    --ahead:#D8A94B; --ahead-soft:#2B2519;
    --risk:#D98576;  --risk-soft:#2E1D19;
    --hand:#8FB6D8;  --hand-soft:#1B2733;
  }
}

:root[data-theme="dark"]{
  color-scheme:dark;
  --ground:#131513; --panel:#1E211E; --panel-2:#242823;
  --edge:#333833; --edge-2:#282D28;
  --ink:#EDEFEA; --ink-2:#A9AFA4; --ink-3:#767D73;
  --done:#6FBF90;  --done-soft:#1E2C24;
  --ahead:#D8A94B; --ahead-soft:#2B2519;
  --risk:#D98576;  --risk-soft:#2E1D19;
  --hand:#8FB6D8;  --hand-soft:#1B2733;
}

/* ───────────────────────── ОСНОВА ───────────────────────── */

*{box-sizing:border-box}

body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--font-sans);
  font-size:15px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

.wrap{
  max-width:var(--wrap);
  margin:0 auto;
  padding:32px 22px 64px;
  display:flex; flex-direction:column; gap:32px;
}
.wrap--wide{max-width:1600px}   /* экран расчёта: таблица шире текста */

a{color:inherit; text-decoration-color:var(--ink-3); text-underline-offset:2px}
a:hover{text-decoration-color:var(--hand)}

:focus-visible{
  outline:2px solid var(--hand);
  outline-offset:2px;
  border-radius:var(--r);
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important}
}

/* ───────────────────────── ТИПОГРАФИКА ───────────────────────── */

/* Надзаголовок: моношириной, разрядкой и капителью. Единственная роль —
   сказать, где ты находишься, не занимая места заголовка. */
.eyebrow{
  font-family:var(--font-mono); font-size:11.5px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3);
}

h1{
  font-family:var(--font-serif); font-weight:600;
  font-size:clamp(26px,4vw,40px); line-height:1.14; margin:6px 0 0;
  text-wrap:balance; letter-spacing:-.01em;
}
h2{
  font-family:var(--font-serif); font-size:19px; font-weight:600;
  margin:0 0 12px; padding-bottom:8px; border-bottom:1px solid var(--edge);
  text-wrap:balance;
}
h3{font-family:var(--font-sans); font-size:15px; font-weight:600; margin:0}

/* Антиква — только заголовок страницы и заголовок раздела. Внутри таблиц и
   форм её нет никогда: на плотной сетке она читается как опечатка. */

.lede{margin:14px 0 0; max-width:62ch; color:var(--ink-2)}
p{margin:0 0 12px; max-width:70ch}
p:last-child{margin-bottom:0}
small,.small{font-size:13px; color:var(--ink-2)}
.micro{font-family:var(--font-mono); font-size:11px; letter-spacing:.08em;
       text-transform:uppercase; color:var(--ink-3)}

/* Любое количество в системе — моноширинное, с табличными цифрами и по правому
   краю. На тысячах строк это разница между «читается» и «не читается». */
.num,td.num,th.num{
  font-family:var(--font-mono); font-variant-numeric:tabular-nums;
  text-align:right; letter-spacing:-.01em;
}
.figure{text-align:right; line-height:1}
.figure b{
  display:block; font-family:var(--font-mono); font-weight:600;
  font-size:clamp(48px,8vw,80px); color:var(--done);
  letter-spacing:-.03em; font-variant-numeric:tabular-nums;
}
.figure span{font-family:var(--font-mono); font-size:12px; color:var(--ink-3);
             letter-spacing:.1em; text-transform:uppercase}

/* ───────────────────────── ШАПКА ПРИЛОЖЕНИЯ ───────────────────────── */

.topbar{
  background:var(--panel); border-bottom:1px solid var(--edge);
  position:sticky; top:0; z-index:30;
}
.topbar__in{
  max-width:1600px; margin:0 auto; padding:10px 22px;
  display:flex; flex-wrap:wrap; gap:10px 22px; align-items:center;
}
.wordmark{
  font-family:var(--font-mono); font-size:13px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; white-space:nowrap;
}
.wordmark span{color:var(--ink-3); font-weight:400}
.topnav{display:flex; flex-wrap:wrap; gap:4px 16px; font-size:14px}
.topnav a{text-decoration:none; color:var(--ink-2); padding:3px 0;
          border-bottom:2px solid transparent}
.topnav a:hover{color:var(--ink)}
.topnav a[aria-current="page"]{color:var(--ink); font-weight:600;
                               border-bottom-color:var(--ink)}

/* Свежесть источников живёт в шапке каждой страницы, а не в настройках.
   Главная ошибка систем этого класса — решение по устаревшим числам, принятое
   в уверенности, что они свежие. */
.fresh{display:flex; flex-wrap:wrap; gap:4px 14px; margin-left:auto}
.fresh__item{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.04em;
  color:var(--ink-2); white-space:nowrap;
  display:inline-flex; align-items:center; gap:5px;
}
.fresh__item b{font-weight:500; color:var(--ink-3); text-transform:uppercase}
.fresh__item::before{
  content:""; width:6px; height:6px; border-radius:999px;
  background:var(--done); flex:none;
}
.fresh__item.is-stale::before{background:var(--ahead)}
.fresh__item.is-stale{color:var(--ahead)}
.fresh__item.is-down::before{background:var(--risk)}
.fresh__item.is-down{color:var(--risk)}

/* ───────────────────────── ПАНЕЛИ И СЕТКИ ───────────────────────── */

.panel{background:var(--panel); border:1px solid var(--edge); border-radius:var(--r);
       padding:18px 20px}
.panel--flush{padding:0; overflow:hidden}

.cols{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:26px}

/* Счётчики: сетка на волосяных линиях — фон просвечивает в зазор 1px, рамок
   рисовать не нужно. */
.counts{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:1px; background:var(--edge); border:1px solid var(--edge);
  border-radius:var(--r); overflow:hidden;
}
.count{background:var(--panel); padding:14px 16px}
.count b{display:block; font-family:var(--font-mono); font-size:24px; font-weight:600;
         font-variant-numeric:tabular-nums; letter-spacing:-.02em}
.count span{font-size:12px; color:var(--ink-2)}
/* два других алгоритма под потребностью в строке таблицы (2794) */
td.num .variants{display:block; font-size:11px; line-height:1.3; color:var(--ink-3); white-space:nowrap}
.count.is-risk b{color:var(--risk)}
.count.is-ahead b{color:var(--ahead)}
.count.is-done b{color:var(--done)}

/* ───────────────────────── ПАНЕЛЬ ПАРАМЕТРОВ ───────────────────────── */

.toolbar{
  background:var(--panel); border:1px solid var(--edge); border-radius:var(--r);
  padding:14px 16px; display:flex; flex-wrap:wrap; gap:14px 18px; align-items:flex-end;
}
.toolbar .field{margin:0}
.toolbar__spacer{flex:1 1 auto}

/* ───────────────────────── ФОРМЫ ───────────────────────── */

.field{display:flex; flex-direction:column; gap:5px; margin:0 0 16px; max-width:26rem}
.field--narrow{max-width:11rem}
.field--wide{max-width:44rem}

.field > label{
  font-family:var(--font-mono); font-size:11px; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3);
}

input[type=text],input[type=email],input[type=number],input[type=date],
input[type=search],select,textarea{
  font-family:var(--font-sans); font-size:15px; color:var(--ink);
  background:var(--panel); border:1px solid var(--edge); border-radius:var(--r);
  padding:8px 10px; width:100%; max-width:100%; min-height:38px;
}
/* Количества вводятся моноширинным — то же начертание, что в таблице, иначе
   введённое число выглядит чужим рядом с расчётным. */
input[type=number],input.num{font-family:var(--font-mono);
                             font-variant-numeric:tabular-nums; text-align:right}
textarea{min-height:90px; resize:vertical}
select{
  /* Список берёт ширину по самому длинному пункту и распирает страницу —
     проверено на соседнем проекте: пункт с именем поставщика растянул экран
     до 1338px. Ширину ограничиваем здесь, один раз. */
  text-overflow:ellipsis;
}
input:disabled,select:disabled,textarea:disabled{
  background:var(--panel-2); color:var(--ink-3); cursor:not-allowed;
}
::placeholder{color:var(--ink-3); opacity:1}

.hint{font-size:12.5px; color:var(--ink-3)}
.field.is-invalid input,.field.is-invalid select,.field.is-invalid textarea{
  border-color:var(--risk);
}
.field .error{font-size:12.5px; color:var(--risk)}

/* Поле, которое человек изменил, помечается той же осью, что и правленая
   ячейка таблицы, — чтобы правка читалась одинаково везде. */
.is-edited input,input.is-edited{
  border-left:3px solid var(--hand); background:var(--hand-soft);
}

/* ───────────────────────── КНОПКИ ───────────────────────── */

.btn{
  font-family:var(--font-sans); font-size:14px; font-weight:600; line-height:1;
  padding:10px 16px; min-height:38px; border-radius:var(--r);
  border:1px solid var(--edge); background:var(--panel); color:var(--ink);
  cursor:pointer; display:inline-flex; align-items:center; gap:8px;
  white-space:nowrap;
}
/* Кнопкой бывает и ссылка («Выгрузить в Excel» — обычный <a href>, чтобы работали
   правый клик и «сохранить как»). Без сброса подчёркивания она стоит в одном ряду с
   настоящими кнопками и выглядит чужой. */
a.btn{text-decoration:none}
.btn:hover{background:var(--panel-2)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.45; cursor:not-allowed; transform:none}

/* Основное действие залито чернилами, а не акцентом: акцент в этой системе
   означает «человек вмешался», и кнопка не должна его занимать. */
.btn--primary{background:var(--ink); border-color:var(--ink); color:var(--ground)}
.btn--primary:hover{background:var(--ink-2); border-color:var(--ink-2)}
.btn--ghost{background:transparent; border-color:transparent; color:var(--ink-2)}
.btn--ghost:hover{background:var(--panel-2); color:var(--ink)}
.btn--danger{background:var(--risk-soft); border-color:var(--risk); color:var(--risk)}
.btn--sm{font-size:13px; padding:6px 10px; min-height:30px}

/* На телефоне палец не попадает в 30px — цель не меньше 44px. */
@media (max-width:640px){
  .btn{min-height:44px; padding:12px 18px}
  .btn--sm{min-height:38px}
}

/* ───────────────────────── ПЛАШКИ СОСТОЯНИЯ ───────────────────────── */

/* Атрибут hidden обязан побеждать любой display компонентов: без этого правила скрытая
   плашка (.pill[hidden]) торчала пустым прямоугольником — display:inline-flex класса
   перебивал браузерное hidden{display:none}. Найдено глазами на панели заказа 26.08.2026. */
[hidden]{display:none !important}

.pill{
  display:inline-flex; align-items:center; gap:5px;
  font-family:var(--font-mono); font-size:10.5px; font-weight:500;
  letter-spacing:.07em; text-transform:uppercase;
  padding:3px 7px; border-radius:var(--r); border:1px solid transparent;
  white-space:nowrap;
}
.pill--done{background:var(--done-soft); color:var(--done); border-color:var(--done)}
.pill--ahead{background:var(--ahead-soft); color:var(--ahead); border-color:var(--ahead)}
.pill--risk{background:var(--risk-soft); color:var(--risk); border-color:var(--risk)}
.pill--hand{background:var(--hand-soft); color:var(--hand); border-color:var(--hand)}
.pill--muted{background:var(--panel-2); color:var(--ink-3); border-color:var(--edge)}

/* ───────────────────────── СООБЩЕНИЯ ───────────────────────── */

.alert{
  border:1px solid var(--edge); border-left:3px solid var(--ink-3);
  border-radius:var(--r); padding:12px 16px; background:var(--panel);
  overflow-wrap:anywhere;
}
.alert h3{margin:0 0 4px}
.alert p{margin:0; font-size:13.5px; color:var(--ink-2)}
.alert--warn{border-left-color:var(--ahead); background:var(--ahead-soft)}
.alert--risk{border-left-color:var(--risk); background:var(--risk-soft)}
.alert--done{border-left-color:var(--done); background:var(--done-soft)}

.empty{
  border:1px dashed var(--edge); border-radius:var(--r);
  padding:36px 24px; text-align:center; color:var(--ink-2);
}
.empty strong{display:block; color:var(--ink); margin-bottom:6px}

/* ───────────────────────── ТАБЛИЦА ДАННЫХ ───────────────────────── */

/* Широкое едет внутри своего контейнера, страница вбок не уезжает никогда. */
.table-wrap{
  overflow-x:auto; overflow-y:visible;
  border:1px solid var(--edge); border-radius:var(--r); background:var(--panel);
  max-width:100%;
}

/* Закреплённая шапка имеет смысл только внутри собственного вертикального
   прокрутчика: при прокрутке всей страницы она прилипает к краю окна и
   уходит под шапку сайта. Экран расчёта использует этот вариант. */
.table-wrap--tall{max-height:calc(100vh - 230px); overflow-y:auto}

table.data{border-collapse:separate; border-spacing:0; width:100%; font-size:13.5px}

table.data th{
  position:sticky; top:0; z-index:2;
  background:var(--panel-2); color:var(--ink-3);
  font-family:var(--font-mono); font-size:10.5px; font-weight:500;
  letter-spacing:.07em; text-transform:uppercase; text-align:left;
  padding:8px 10px; border-bottom:1px solid var(--edge); white-space:nowrap;
}
table.data th.num{text-align:right}

/* Сортируемый заголовок (app/web/static/table.js). Стрелка появляется только у той
   колонки, по которой таблица отсортирована сейчас, — постоянные стрелки у всех
   колонок читаются как украшение и перестают что-либо сообщать. Место под стрелку
   занято всегда (::before у несортированного заголовка), иначе шапка дёргается на
   каждый клик. */
table.data th.sortable{cursor:pointer; user-select:none}
table.data th.sortable:hover{color:var(--ink)}
table.data th.sortable:focus-visible{outline-offset:-2px}
table.data th.sortable::after{content:"\2007"; margin-left:5px; opacity:.55}
/* Подсказка «по этому можно кликнуть» — только под курсором: постоянная стрелка
   у каждой колонки читается как «здесь уже отсортировано». */
table.data th.sortable:hover::after{content:"\2195"; opacity:.5}
table.data th.sortable[aria-sort="descending"]::after{content:"\2193"; opacity:1}
table.data th.sortable[aria-sort="ascending"]::after{content:"\2191"; opacity:1}

table.data td{
  padding:0 10px; height:var(--row);
  border-bottom:1px solid var(--edge-2); vertical-align:middle;
}
table.data tbody tr:last-child td{border-bottom:none}
table.data tbody tr:hover td{background:var(--panel-2)}

/* Артикул закреплён слева: при 20 колонках прокрутка вправо иначе оставляет
   человека наедине с числами без имени строки. */
table.data .sticky-col{
  position:sticky; left:0; z-index:1;
  background:var(--panel); border-right:1px solid var(--edge);
  font-family:var(--font-mono); font-weight:600; white-space:nowrap;
}
table.data tbody tr:hover .sticky-col{background:var(--panel-2)}
table.data th.sticky-col{z-index:3; background:var(--panel-2)}

/* Плотный режим — не украшение: на трёх тысячах строк это четверть экрана. */
[data-density="compact"] table.data td{height:var(--row-compact)}
[data-density="compact"] table.data{font-size:12.5px}

/* Ячейка «Заказ» — единственное место, где человек переписывает машину.
     Считанное системой — тихое. Поправленное — с меткой на своей оси. */
table.data td.is-edited{
  background:var(--hand-soft);
  box-shadow:inset 3px 0 0 var(--hand);
  font-weight:600;
}
table.data td.is-deficit{color:var(--risk); font-weight:600}
table.data tr.is-top .sticky-col{box-shadow:inset 3px 0 0 var(--done)}

/* Строка размера под артикулом — сдвиг и тихий цвет, а не отдельная таблица. */
table.data tr.is-child .sticky-col{padding-left:26px; font-weight:400; color:var(--ink-2)}

/* Превью изделия в строке. Закупщик по артикулу не понимает, что заказывает;
   по картинке понимает сразу — и это не удобство: у сувенира 9300409072 снимок
   за секунду объяснил аномалию, на которую ушёл абзац разбора (новогодняя монета
   года лошади — продавалась сезон и встала). Источник — фотосервис 1С.

   Три состояния, ровно те же, что отдаёт источник, и последние два путать нельзя:
   снимок есть · в 1С снимка нет (свойство карточки) · сервис не ответил (свойство
   сегодняшнего дня). Пустое место вместо третьего состояния — это молчаливая ложь
   «фотографии нет». */
.thumb{
  width:48px; height:48px; flex:none; display:block;
  border:1px solid var(--edge); border-radius:var(--r);
  background:var(--panel-2); object-fit:contain;
}
.thumb--none,.thumb--down{
  display:grid; place-items:center; text-align:center; padding:2px;
  font-family:var(--font-mono); font-size:8px; line-height:1.15;
  letter-spacing:.03em; text-transform:uppercase; color:var(--ink-3);
}
.thumb--down{border-color:var(--risk); color:var(--risk)}

/* Крупный снимок — в разборе строки, где место для него есть. */
.thumb--large{width:100%; height:auto; aspect-ratio:1; max-width:220px}

/* Фотографии требуют более высокой строки — иначе снимок меньше ногтя и не
   выполняет свою работу. Режим переключается, потому что при сверке чисел
   фотографии мешают, а при выборе товара помогают.

   Выключенный режим прячет колонку целиком, а не только уменьшает строку. Иначе
   подпись кнопки («Показать фотографии») обещала бы одно, а делала другое — и,
   что важнее, снимки всё равно запрашивались бы у фотосервиса 1С у каждой видимой
   строки, то есть боевую систему заказчика дёргали бы ради колонки, которую никто
   не смотрит (CLAUDE.md, «Бережность к боевым системам»). Сам запрос не отправляется
   тоже — за это отвечает `buildRow` в calc.js, здесь только показ. */
table.data td.photo,table.data th.photo{width:1%; padding:4px 10px}
[data-photos="off"] table.data td.photo,
[data-photos="off"] table.data th.photo{display:none}
[data-photos="on"] table.data td{height:60px}
[data-photos="on"][data-density="compact"] table.data td{height:56px}

/* Ссылка «как получено число» — слово, а не иконка «i»: за ней целый разбор
   расчёта, и человек должен это понимать до нажатия. */
.explain-link{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-3); text-decoration:none;
  border-bottom:1px dotted var(--ink-3); white-space:nowrap;
}
.explain-link:hover{color:var(--hand); border-bottom-color:var(--hand)}

/* Разбор числа: пары «показатель → значение», значения моношириной. */
.explain{display:grid; grid-template-columns:max-content minmax(0,1fr); gap:4px 16px;
         margin:0; font-size:13.5px}
.explain dt{color:var(--ink-2)}
.explain dd{margin:0; font-family:var(--font-mono); font-variant-numeric:tabular-nums;
            overflow-wrap:anywhere}
/* Длинное значение (разбивка по магазинам) занимает всю ширину под своей подписью:
   в узкой правой колонке оно вытягивалось в столбик по одному слову и растягивало
   страницу телефона до восьми тысяч пикселей. */
.explain dd.wide{grid-column:1/-1; margin:2px 0 8px}
@media (max-width:640px){
  .explain{grid-template-columns:minmax(0,1fr); gap:2px}
  .explain dt{margin-top:8px}
  .explain dd.wide{margin:2px 0 4px}
}

/* ───────────────────────── СТАТУСНЫЕ СТРАНИЦЫ ───────────────────────── */

.head{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:30px; align-items:end}
@media (max-width:640px){
  .head{grid-template-columns:1fr}
  .figure{text-align:left}
}

.rail{display:flex; gap:5px; flex-wrap:wrap}
.stage{
  flex:1 1 92px; min-width:92px; background:var(--panel);
  border:1px solid var(--edge); border-top:3px solid var(--edge);
  border-radius:var(--r); padding:11px 11px 13px;
  display:flex; flex-direction:column; gap:3px;
}
.stage.is-done{border-top-color:var(--done); background:var(--done-soft)}
.stage.is-ahead{border-top-color:var(--ahead)}
.stage code{font-family:var(--font-mono); font-size:13px; font-weight:600; color:var(--ink)}
.stage small{font-size:11.5px; color:var(--ink-2); line-height:1.35}
.stage em{font-family:var(--font-mono); font-style:normal; font-size:10.5px;
          letter-spacing:.08em; text-transform:uppercase; margin-top:2px}
.stage.is-done em{color:var(--done)}
.stage.is-ahead em{color:var(--ahead)}

.list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px}
.list li{display:grid; grid-template-columns:16px minmax(0,1fr); gap:10px; align-items:baseline}
.list strong{font-weight:600}
.list p{margin:2px 0 0; font-size:13.5px; color:var(--ink-2); max-width:none}
.tick{font-family:var(--font-mono); font-size:13px; color:var(--done); font-weight:600}
.dot{font-family:var(--font-mono); font-size:13px; color:var(--ahead); font-weight:600}
.bang{font-family:var(--font-mono); font-size:13px; color:var(--risk); font-weight:600}

.next{display:flex; flex-direction:column; gap:12px}
.block{background:var(--panel); border:1px solid var(--edge);
       border-left:3px solid var(--ahead); border-radius:var(--r); padding:14px 16px}
.block h3{display:flex; justify-content:space-between; gap:12px; align-items:baseline}
.block h3 span{font-family:var(--font-mono); font-size:11px; letter-spacing:.08em;
               text-transform:uppercase; color:var(--ink-3); white-space:nowrap}
.block p{margin:6px 0 0; font-size:13.5px; color:var(--ink-2)}
.block.heavy{border-left-color:var(--risk)}

.risks{background:var(--risk-soft); border:1px solid var(--edge);
       border-radius:var(--r); padding:18px 20px}
.risks h2{border-bottom-color:var(--edge)}

footer{border-top:1px solid var(--edge); padding-top:16px; font-size:12.5px; color:var(--ink-3)}
footer code{font-family:var(--font-mono)}

/* ───────────────── ПОДСКАЗКИ НА ЭКРАНАХ И СТРАНИЦА СПРАВКИ ───────────────── */

/* Устройство и обоснование — соседний проект приёмки (sklad.sl-sl.ru), тот же приём
   для того же назначения: подсказка тихая, закрытая — строка ростом с текст рядом, с
   кружком «?» вместо кричащей плашки. Лишняя подсказка над очевидным раздражает
   сильнее, чем её отсутствие.

   <details>/<summary> — нативные, без единой строки JavaScript: раскрытие работает
   мышью, пальцем, с клавиатуры и при выключенном JS. Раскрытое тело уходит вниз своим
   потоком и ничего не перекрывает — прыгает только то, что ниже, и ровно на свою
   высоту. */
.tip{max-width:70ch; margin:0 0 14px}
.tip > summary{
  display:inline-flex; align-items:center; gap:7px;
  cursor:pointer; list-style:none;
  font-size:13px; color:var(--ink-3); padding:2px 0;
}
.tip > summary::-webkit-details-marker{display:none}
.tip > summary::before{
  content:"?"; flex:none;
  width:15px; height:15px; border-radius:50%;
  border:1px solid var(--ink-3);
  font-family:var(--font-mono); font-size:10px; font-weight:600; line-height:1;
  display:inline-flex; align-items:center; justify-content:center;
}
.tip > summary:hover,.tip[open] > summary{color:var(--ink)}
.tip__body{
  margin:4px 0 0 7px; padding:2px 0 2px 15px;
  border-left:1px solid var(--edge);
  font-size:13.5px; color:var(--ink-2);
}
.tip__body p{margin:0 0 6px; max-width:none}
.tip__body p:last-child{margin-bottom:0}

/* Шапка приложения прилипшая: без отступа переход по якорю ставил бы заголовок раздела
   ровно под неё, и человек читал бы справку со второго абзаца. */
.help-section{scroll-margin-top:84px}
.help-short{color:var(--ink-2)}

/* Оглавление в колонках по ширине, а не по числу: `columns` сам даёт одну колонку на
   телефоне и несколько на ноутбуке без горизонтальной прокрутки при любой ширине окна. */
.help-toc ul{columns:16rem; column-gap:26px; list-style:none; margin:0; padding:0}
.help-toc li{break-inside:avoid; padding:3px 0; font-size:13.5px}

/* ───────────────────────── КОМБО-ПОИСК ПОСТАВЩИКА ───────────────────────── */

/* Поиск вместо открытого списка: в 1С 1 806 партнёров с флагом «Поставщик», и без
   поиска человек тонет в кинокомпаниях и гостиницах без единой позиции номенклатуры
   (docs/design-system.md). Список кандидатов — плавающая панель под полем, не раздвигает
   вёрстку и не тянет ширину по самому длинному пункту, как раздутый `<select>`. */
.combo{position:relative}
.combo__list{
  position:absolute; z-index:20; top:calc(100% + 2px); left:0; right:0;
  background:var(--panel); border:1px solid var(--edge); border-radius:var(--r);
  max-height:280px; overflow-y:auto; padding:2px 0;
  box-shadow:0 4px 14px rgba(0,0,0,.12);
}
.combo__opt{
  display:block; width:100%; text-align:left; padding:8px 10px;
  font-family:var(--font-sans); font-size:13.5px; color:var(--ink);
  background:none; border:none; cursor:pointer;
}
.combo__opt:hover,.combo__opt:focus-visible{background:var(--panel-2)}
.combo__empty{padding:8px 10px; font-size:13px; color:var(--ink-3)}

/* ───────────────────────── СЛУЖЕБНОЕ ───────────────────────── */

.stack{display:flex; flex-direction:column; gap:12px}
.row{display:flex; flex-wrap:wrap; gap:10px; align-items:center}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px;
         overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}

/* Метка комплекта (гарнитура) в ячейке артикула: тихая, вспомогательная — группировку
   несёт порядок строк, метка лишь объясняет его и переживает пересортировку. */
.kit-badge{
  font-family:var(--font-mono); font-size:10px;
  color:var(--ink-3); letter-spacing:.04em; text-transform:uppercase;
  white-space:nowrap;
}

/* Отметка «больше не заказываем» (решение заказчика 31.08.2026). Строка не прячется
   цветом — она вообще не показывается, пока не включён фильтр; приглушение нужно там,
   где закупщик разбирает снятые модели и должен отличать их с одного взгляда. */
.data tr.is-excluded { opacity: .55; }
.data tr.is-excluded .sticky-col { text-decoration: line-through; }
.linkish {
  background: none; border: 0; padding: 0; margin-top: 4px;
  font: inherit; font-size: 12px; color: var(--link, #2a6db0);
  cursor: pointer; text-decoration: underline dotted;
}
.linkish:disabled { color: var(--muted, #888); cursor: default; }

/* Строка, к которой вернулись с экрана «разбор»: короткая подсветка, чтобы глаз нашёл
   место, откуда ушёл (жалоба закупщика 09.09.2026). */
/* Специфичность нарочно выше, чем у `table.data .sticky-col` (0-2-1) на строке 401:
   иначе колонка артикула — та самая, за которую цепляется глаз, — остаётся неподсвеченной. */
table.data tbody tr.is-returned > td,
table.data tbody tr.is-returned > td.sticky-col {
  background: #fff6d8;
  transition: background 1.2s ease-out;
}

/* Пометка «размер не определён, заводить руками» (Светлана, 2794, 10.09.2026).
   Цвет предупреждения, не ошибки: расчёт верен, вручную заводится только позиция в 1С. */
.manual-size-badge {
  display: inline-block;
  margin-top: 2px;
  padding: 1px 6px;
  border-radius: 3px;
  background: #fff4d6;
  border: 1px solid #e8c877;
  color: #7a5a12;
  font-size: 11px;
  line-height: 1.4;
  cursor: help;
}