/* Тема и компоненты склада — единственный CSS программы.
   Источник истины: docs/архитектура/ДИЗАЙН_СИСТЕМА_склада.md — токены §3 дословно,
   компоненты §6, минимализм §2a, числа §5. Хардкод hex внутри компонентов запрещён.
   praid-theme.css и bg-wall.jpg не подключаются (Mission Control — только ТВ-панель, §7д). */

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

:root{
  /* бренд (из Mission Control, без изменений) */
  --navy:#152841; --navy-2:#0f3460; --navy-3:#16213e;
  --gold:#e3a92a; --gold-dk:#c8901a;
  --picton:#56C1EB; --picton-ink:#005868;
  /* поверхности и линии (светлая тема) */
  --bg:#f3f5f8;
  --surface:#ffffff;
  --surface-2:#f7f9fb;
  --surface-3:#e9eef4;
  --line:#d9e0e8;
  --line-2:#eaeef3;
  /* текст */
  --txt:#1a2433;
  --txt-2:#4b5a6e;
  --txt-3:#6b7889;
  --txt-inv:#ffffff;
  --link:#0f4c81;
  /* семантика: фон плашки / текст / полоса (§4) */
  --ok:#27ae60;      --ok-ink:#1e7d44;   --ok-soft:#e6f6ec;
  --ready:#7cb518;   --ready-ink:#4f7a0a;--ready-soft:#f0f8dc;
  --warn:#f39c12;    --warn-ink:#7c4a03; --warn-soft:#fff4e0;
  --risk:#c0392b;    --risk-ink:#8e2419; --risk-soft:#fbecea;
  --scrap:#8b1a1a;   --scrap-ink:#6b1414;--scrap-soft:#f3e2df;
  --info:#56C1EB;    --info-ink:#005868; --info-soft:#e8f6fb;
  --wait:#e3a92a;    --wait-ink:#7a5a10; --wait-soft:#fdf3dc;
  --muted:#8a96a6;   --muted-ink:#5c6877;--muted-soft:#eef1f5;
  /* типографика */
  --font:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --fs-xs:12px; --fs-sm:13px; --fs:14px; --fs-md:16px; --fs-lg:20px; --fs-xl:26px;
  --lh:1.45;
  /* геометрия */
  --r-sm:8px; --r:12px; --r-lg:18px; --r-pill:999px;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px;
  --touch:44px;
  --row:44px;
  --shadow:0 1px 2px rgba(21,40,65,.05), 0 8px 24px rgba(21,40,65,.06);
  --shadow-lift:0 2px 4px rgba(21,40,65,.07), 0 14px 34px rgba(21,40,65,.10);
  /* ступени крупных чисел (вид 10.09): главная цифра экрана и цифра карточки */
  --fs-hero:38px; --fs-fig:30px;
  /* брендовый navy дашбордов РОПа. С 18.09 (А113) им покрашена только лента
     «Что происходит»: левый рельс стал светлым — см. §6.2 */
  --rail-1:#294662; --rail-2:#1d3349;
  /* ширина рельса — одно число на все правила: сам рельс и линия-граница, которую
     рисует страница приёмом «ложной колонки». Расходились бы — получилась бы
     линия посреди кнопок. 224 px: при шрифте пункта 14 px «Подтвердить, что взяли»
     и «Переместить / вернуть» встают в одну строку, а не в две */
  --rail-w:224px;
  --rail-txt:#d6e2ef;   /* текст на тёмном — остался только у ленты */
  --shadow-pop:0 12px 32px rgba(21,40,65,.18);
  --focus:0 0 0 3px rgba(86,193,235,.45);
}

/* Планшет: включается атрибутом на <html> */
html[data-mode="tablet"]{
  --fs-xs:14px; --fs-sm:15px; --fs:17px; --fs-md:20px; --fs-lg:24px; --fs-xl:32px;
  --touch:60px; --touch-edge:80px; --row:56px; --r:12px;
}

/* Фрейм Битрикса: без своей шапки. Прозрачный body по ДС §7а — свойство реальной встройки;
   в прототипе страница остаётся своей (вокруг рамки живут Остатки и Журнал), а серый фон
   карточки рисует .sk-bx-mock. Прозрачность вернётся в v1a, когда приложение поедет во фрейм. */
html[data-embed="bitrix"] .sk-appbar{ display:none; }
html[data-embed="bitrix"] .sk-wrap{ padding-left:0; padding-right:0; }

/* ───────────────────────────────────────────────────────────── §5 БАЗА */

*{ box-sizing:border-box; margin:0; padding:0; }

/* атрибут hidden должен побеждать display у компонентов (иначе .sk-field{display:flex} его съедает) */
[hidden]{ display:none !important; }

body{
  font-family:var(--font);
  font-size:var(--fs);
  line-height:var(--lh);
  color:var(--txt);
  background:var(--bg);
  font-variant-numeric:tabular-nums;      /* числа не «прыгают» (§5) */
  font-feature-settings:"tnum" 1;
  -webkit-text-size-adjust:100%;
}

a{ color:var(--link); }
:focus-visible{ outline:none; box-shadow:var(--focus); border-radius:var(--r-sm); }

/* во всю ширину окна: поля по 24 px, потолок 1600 (ДС §2a п.11, слово Жени 06.09) */
/* поле сверху ужато с 16 до 8 px: под верхней полосой и так есть граница,
   а каждые восемь пикселей наверху — это строка материала внизу (Женя 18.09) */
.sk-wrap{ max-width:1600px; margin:0 auto; padding:var(--sp-2) var(--sp-5) var(--sp-6); }
/* узкими остаются только поля форм и абзацы текста */
.sk-narrow{ max-width:720px; }
.sk-h1{ font-size:var(--fs-lg); font-weight:600; margin-bottom:var(--sp-4); }
.sk-muted{ color:var(--txt-3); }
.sk-nowrap{ white-space:nowrap; }

/* ───────────────────────────────────────── §6.1 ШАПКА И DEV-ПАНЕЛЬ */

.sk-top{ position:sticky; top:0; z-index:40; }
.sk-appbar{
  z-index:40;
  display:flex; align-items:center; gap:var(--sp-3);
  height:48px; padding:0 var(--sp-5);
  background:var(--surface); border-bottom:1px solid var(--line);
}
html[data-mode="tablet"] .sk-appbar{ height:56px; }
html[data-mode="tablet"] .sk-top{ position:static; }
.sk-logo{ display:flex; align-items:center; gap:var(--sp-2); }
.sk-logo img{ width:28px; height:28px; display:block; }
.sk-logo b{ font-weight:600; }
.sk-appbar-right{ margin-left:auto; display:flex; align-items:center; gap:var(--sp-3);
  color:var(--txt-2); font-size:var(--fs-sm); }

/* DEV-панель — одна строка на --wait-soft, чтобы было видно, что это не прод (§6.1) */
.sk-dev{
  display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap;
  padding:var(--sp-2) var(--sp-5);
  background:var(--wait-soft); border-bottom:1px solid var(--line);
  font-size:var(--fs-xs); color:var(--wait-ink);
}
.sk-dev label{ display:flex; align-items:center; gap:var(--sp-1); white-space:nowrap; }
.sk-dev-tag{ font-weight:600; letter-spacing:.4px; }
.sk-dev-hdrs{ margin-left:auto; color:var(--txt-3); }
.sk-dev[hidden]{ display:none; }

/* полоса подсказки сценария (DEV) */
.sk-scen{ display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap;
  padding:var(--sp-2) var(--sp-5); background:var(--info-soft);
  border-bottom:1px solid var(--line); font-size:var(--fs-sm); color:var(--info-ink); }
.sk-scen-n{ font-weight:600; white-space:nowrap; }
.sk-scen-do{ font-weight:600; }
.sk-scen-exp{ color:var(--txt-2); }
.sk-scen-act{ margin-left:auto; display:flex; gap:var(--sp-2); }

/* ─────────────────────────────── лента вкладок (заглушка до рельса §6.2) */
/* Временный компонент: на этапе 2 заменяется левым рельсом .sk-nav (ТЗ §2.4). */

.sk-tabs{
  display:flex; gap:var(--sp-1); overflow-x:auto;
  padding:0 var(--sp-5); background:var(--surface);
  border-bottom:1px solid var(--line);
}
.sk-tab{
  appearance:none; background:none; border:none; cursor:pointer;
  font:inherit; font-size:var(--fs-sm); font-weight:600; color:var(--txt-2);
  padding:var(--sp-3) var(--sp-3); min-height:var(--touch);
  border-bottom:3px solid transparent; white-space:nowrap;
  display:flex; align-items:center; gap:var(--sp-2);
}
.sk-tab:hover{ color:var(--txt); }
.sk-tab.is-active{ color:var(--navy); border-bottom-color:var(--navy); }
.sk-tab.is-later{ color:var(--txt-3); font-weight:400; }
.sk-stage{ font-size:var(--fs-xs); color:var(--txt-3);
  border:1px solid var(--line); border-radius:var(--r-sm); padding:0 var(--sp-1); }

/* ──────────────────────────────────── §6.3 ЛЕНТА ЧИСЕЛ (метка → число) */

.sk-strip{
  display:flex; flex-wrap:wrap; gap:var(--sp-5);
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:var(--sp-4) var(--sp-5); margin-bottom:var(--sp-4);
}
.sk-strip-cell{ min-width:150px; }
.sk-strip-lbl{ font-size:var(--fs-xs); color:var(--txt-2); }
.sk-strip-val{ font-size:var(--fs-lg); font-weight:600; }
.sk-strip-val.is-risk{ color:var(--risk-ink); }
.sk-strip-sub{ font-size:var(--fs-xs); color:var(--txt-3); }

/* ─────────────────────────────────────────────────────── КАРТОЧКА */

.sk-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:var(--sp-4) var(--sp-5) var(--sp-5);
}
.sk-card + .sk-card{ margin-top:var(--sp-4); }
.sk-card-hd{ display:flex; align-items:baseline; gap:var(--sp-3); flex-wrap:wrap;
  margin-bottom:var(--sp-3); }
.sk-card-title{ font-size:var(--fs-md); font-weight:600; }
.sk-card-sub{ font-size:var(--fs-xs); color:var(--txt-3); }
.sk-card-act{ margin-left:auto; }

/* Шапка экрана (название, фильтры, поиск) остаётся на месте при пролистывании (слово Жени 07.09).
   Высоту меряет syncStickyHead() и кладёт в --sub-h: под неё встаёт заголовок таблицы. */
.sk-sticky-hd{ position:sticky; top:var(--top-h, 0px); z-index:20;
  background:var(--surface); padding-top:var(--sp-1); }
html[data-mode="tablet"] .sk-sticky-hd{ position:static; }

/* Во вкладке Битрикса шапка **тоже** закреплена — слово Жени 18.09: «здесь тоже верхушка
   почему-то не фиксируется». Отменяет прежнее «во фрейме липких элементов быть не должно»
   (ДС §7а п.8, блок 0 п.12).
   Довод против был технический: «карточка обрезает overflow, и липкое всё равно
   не работает». На сегодняшней разметке это неверно — ни `.sk-bx-mock`, ни `.sk-bx-card`,
   ни `.sk-bx-body` прокрутку не обрезают, прокручивается сама страница, и `sticky`
   работает как везде. Если в настоящем портале фрейм окажется без своей прокрутки,
   правило просто не проявится — блок и так стоит в потоке, лишнего места не занимает.
   На планшете липкое остаётся выключенным: там причина другая и живая — экономия высоты. */
html[data-embed="bitrix"] .sk-sticky-hd{ position:sticky; top:var(--top-h, 0px); }

/* ──────────────────────────────────────────────────── §6.4 ТАБЛИЦА */
/* Без зебры, без вертикальных линий, без иконок в ячейках (§2a п.7). */

/* Липкий заголовок и прокрутка вбок внутри блока — вещи несовместимые: `overflow-x:auto`
   делает обёртку окном прокрутки целиком, и `position:sticky` у `th` начинает считаться
   от её края, а не от страницы. Померено на приёмке КТ7: ниже 1100 px заголовок уезжал
   вместе со страницей пиксель в пиксель — то есть липкости не было там, где Женя и смотрит
   (фрейм 1000 px, планшет).

   Размен сделан в пользу липкости: горизонтальную прокрутку отдаём **странице**, тогда
   заголовок держится. Это привычное поведение широкой таблицы, а заголовок на полутора
   тысячах строк важнее, чем отсутствие полосы внизу.

   Исключение — короткие широкие таблицы (доска проектов на Панели): там заголовок всё равно
   не успевает уехать, а вот уводить вбок всю страницу из-за двенадцати колонок незачем. */
.sk-tbl-scroll{ overflow:visible; }
@media (max-width:1099px){
  #p-panel .sk-tbl-scroll{ overflow-x:auto; }
}
.sk-table{ width:100%; border-collapse:collapse; font-size:var(--fs); }
.sk-table th{
  position:sticky; top:calc(var(--top-h, 0px) + var(--sub-h, 0px)); z-index:1;
  background:var(--surface-2); text-align:left;
  font-size:var(--fs-xs); font-weight:600; color:var(--txt-2);   /* обычный регистр, §5 */
  padding:var(--sp-2) var(--sp-3);
  border-bottom:1px solid var(--line);
  white-space:nowrap;
}
.sk-table td{
  padding:var(--sp-2) var(--sp-3);
  border-bottom:1px solid var(--line-2);
  vertical-align:top;
  height:var(--row);
}
.sk-table tbody tr:hover td{ background:var(--surface-3); }
.sk-table .num{ text-align:right; white-space:nowrap; }   /* §5: числа вправо, без переносов */
.sk-table th.num{ text-align:right; }
.sk-sub{ display:block; font-size:var(--fs-xs); color:var(--txt-3); font-weight:400; }
.sk-name{ max-width:340px; }


/* ─────────────────────────────────────────────────────── §6.12 БЕЙДЖ */

/* заголовок группы каталога в таблице остатков */
.sk-grp td{ padding:0 !important; background:var(--surface-2); }
.sk-grp-btn{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3);
  width:100%; min-height:var(--touch); padding:0 var(--sp-3);
  appearance:none; border:none; background:none; cursor:pointer;
  font:inherit; font-weight:600; color:var(--txt); text-align:left; }
.sk-grp-btn:hover{ background:var(--surface-3); }

.sk-badge{
  display:inline-block; border-radius:var(--r-pill);
  font-size:var(--fs-xs); font-weight:600; padding:2px var(--sp-2);
  white-space:nowrap;
}
.sk-badge.is-ok{    background:var(--ok-soft);    color:var(--ok-ink); }
.sk-badge.is-ready{ background:var(--ready-soft); color:var(--ready-ink); }
.sk-badge.is-warn{  background:var(--warn-soft);  color:var(--warn-ink); }
.sk-badge.is-risk{  background:var(--risk-soft);  color:var(--risk-ink); }
.sk-badge.is-scrap{ background:var(--scrap-soft); color:var(--scrap-ink); }
.sk-badge.is-info{  background:var(--info-soft);  color:var(--info-ink); }
.sk-badge.is-wait{  background:var(--wait-soft);  color:var(--wait-ink); }
.sk-badge.is-muted{ background:var(--muted-soft); color:var(--muted-ink); }

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

.sk-btn{
  appearance:none; font:inherit; font-weight:600; cursor:pointer;
  min-height:var(--touch); padding:0 var(--sp-4);
  border-radius:var(--r); border:1px solid var(--line);
  background:var(--surface); color:var(--navy);
}
.sk-btn:hover{ background:var(--surface-2); }
.sk-btn.is-primary{ background:var(--navy); border-color:var(--navy); color:var(--txt-inv); }
.sk-btn.is-primary:hover{ background:var(--navy-2); }
.sk-btn.is-danger{ border-color:var(--risk); color:var(--risk-ink); }
.sk-btn.is-ghost{ border-color:transparent; background:none; color:var(--link); }
.sk-btn[disabled]{ background:var(--muted-soft); color:var(--muted); cursor:default; }
/* компактная кнопка — легче по виду, но цель касания та же 44 px (ДС §11) */
.sk-btn-sm{ min-height:var(--touch); padding:0 var(--sp-3); font-size:var(--fs-sm); }
/* DEV-панель — служебная полоса, не боевой контрол: там цели меньше 44 px допустимы */
.sk-dev .sk-btn{ min-height:32px; padding:0 var(--sp-3); font-size:var(--fs-xs); }

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

.sk-field{ display:flex; flex-direction:column; gap:var(--sp-1); }
.sk-field > span{ font-size:var(--fs-xs); color:var(--txt-2); }
.sk-input, .sk-select{
  font:inherit; color:var(--txt); background:var(--surface);
  min-height:var(--touch); padding:0 var(--sp-3);
  border:1px solid var(--line); border-radius:var(--r-sm);
}
.sk-input::placeholder{ color:var(--txt-3); }
.sk-dev .sk-select, .sk-dev .sk-input{ min-height:32px; font-size:var(--fs-xs); }
/* цель касания — вся подпись целиком, а не сам квадратик (ДС §11: цели >= 44 px) */
.sk-check{ display:flex; align-items:center; gap:var(--sp-2); min-height:var(--touch);
  font-size:var(--fs-sm); color:var(--txt-2); cursor:pointer; }
.sk-check input{ width:18px; height:18px; }
.sk-filters{ display:flex; align-items:center; gap:var(--sp-3);
  flex-wrap:wrap; margin-bottom:var(--sp-3); }
.sk-seg{ display:flex; flex-wrap:wrap; gap:var(--sp-1); }
.sk-seg-btn{
  appearance:none; font:inherit; font-size:var(--fs-sm); cursor:pointer;
  min-height:var(--touch); padding:0 var(--sp-4);
  border:1px solid var(--line); border-radius:var(--r-pill);
  background:var(--surface); color:var(--txt-2);
}
.sk-seg-btn.is-active{ background:var(--info-soft); border-color:var(--info-ink);
  color:var(--info-ink); font-weight:600; }

/* ──────────────────────────── §6.18 ПУСТО · ЗАГРУЗКА · ОШИБКА */

.sk-empty{ padding:var(--sp-5) 0; color:var(--txt-2); font-size:var(--fs); }
.sk-loading{ padding:var(--sp-5) 0; }
.sk-skel{ height:14px; border-radius:var(--r-sm); background:var(--surface-3);
  margin-bottom:var(--sp-2); }
.sk-note{
  background:var(--info-soft); color:var(--info-ink);
  border:1px solid var(--info-ink); border-radius:var(--r);
  padding:var(--sp-3) var(--sp-4); margin-bottom:var(--sp-4);
  font-size:var(--fs-sm); max-width:720px;
}
.sk-error{
  background:var(--risk-soft); color:var(--risk-ink);
  border:1px solid var(--risk); border-radius:var(--r);
  padding:var(--sp-3) var(--sp-4); margin-bottom:var(--sp-4);
  font-size:var(--fs-sm);
}

/* ────────────────────────────────────── §7 ТОЧКИ ОСТАНОВА */

@media (max-width:1099px){
  .sk-wrap{ padding:var(--sp-3) var(--sp-4) var(--sp-5); }
  .sk-appbar, .sk-dev, .sk-tabs{ padding-left:var(--sp-4); padding-right:var(--sp-4); }
  .sk-name{ max-width:240px; }
}

/* ─────────────────────────────── §2.2 МАКЕТ РАМКИ БИТРИКСА (ТЗ, только DEV) */

.sk-bx-mock{ background:#eef2f4; padding:var(--sp-2) 0 var(--sp-4); }
/* `overflow:hidden` здесь скруглял углы — и заодно делал карточку контекстом прокрутки,
   из-за чего липкая шапка внутри неё липла к карточке, а не к окну, и уезжала вверх
   вместе с содержимым. Ровно это Женя и увидел: «здесь тоже верхушка не фиксируется».
   `clip` скругляет так же, но контекста прокрутки не создаёт — шапка липнет как везде. */
.sk-bx-card{ width:100%; max-width:1600px; margin:0 auto; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r); overflow:clip; }
.sk-bx-title{ display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap;
  padding:var(--sp-2) var(--sp-4); font-weight:600; border-bottom:1px solid var(--line); }
.sk-bx-help{ margin-left:auto; display:inline-flex; align-items:center;
  min-height:var(--touch); font-size:var(--fs-xs); font-weight:400; color:var(--link); }
.sk-bx-tabs{ display:flex; gap:var(--sp-4); padding:0 var(--sp-4);
  border-bottom:1px solid var(--line); font-size:var(--fs-sm); color:var(--txt-3); }
.sk-bx-tabs span{ padding:var(--sp-2) 0; }
.sk-bx-tabs .is-active{ color:var(--txt); font-weight:600;
  box-shadow:inset 0 -2px 0 var(--navy); }
.sk-bx-body{ padding:var(--sp-2) var(--sp-4) var(--sp-4); }

/* ────────────────────────────────────────── §6.6 БЛОК СПЕЦИФИКАЦИИ */

.sk-spec-hd{ display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap;
  margin-bottom:0; }
.sk-spec-state{ font-size:var(--fs-xs); font-weight:600; color:var(--txt-2);
  letter-spacing:.3px; }
.sk-spec-actions{ margin-left:auto; display:flex; gap:var(--sp-2); flex-wrap:wrap;
  justify-content:flex-end; }
/* почему главная кнопка недоступна — текстом рядом, а не только в подсказке при наведении */
.sk-why{ flex-basis:100%; text-align:right; font-size:var(--fs-xs); color:var(--txt-2);
  margin-top:var(--sp-1); }
.sk-why-acts{ display:flex; gap:var(--sp-2); flex-wrap:wrap; justify-content:flex-end;
  margin-top:var(--sp-2); }

.sk-block{ border:1px solid var(--line); border-radius:var(--r);
  background:var(--surface); margin-bottom:var(--sp-3); }
.sk-block-hd{ display:flex; align-items:center; gap:var(--sp-2);
  padding:var(--sp-1) var(--sp-4); border-bottom:1px solid var(--line-2); }
/* Кто заполняет блок — «Вёрстка», «Технология», «Менеджер», «Печать» — должно читаться
   с первого взгляда: человек листает длинную спецификацию и всё время спрашивает себя,
   чей это кусок. Было наоборот: подпись блока 12 px серым, а строки внутри 14 px тёмным,
   то есть заголовок был мельче своего содержимого (слово Жени 18.09). */
.sk-block-name{ font-size:var(--fs-md); font-weight:700; color:var(--txt); }
.sk-block-act{ margin-left:auto; display:flex; gap:var(--sp-2); }

/* ──────────────────────────────────────── §6.5 СТРОКА СПЕЦИФИКАЦИИ */

/* Ширина рассчитана на карточку Битрикса 1000 px: сумма колонок с зазорами должна влезать,
   иначе последняя колонка («⋯») уезжает за край и кнопка становится недоступной. */
/* Строк в спецификации бывает много, и каждая — одна позиция, а не заголовок.
   Мельче на ступень и с меньшим полем сверху-снизу: на экран влезает заметно больше,
   а иерархия наконец правильная — блок крупно, позиции под ним мелко (Женя 18.09). */
.sk-need{ display:grid; gap:var(--sp-2); align-items:start;
  grid-template-columns:minmax(190px,2.2fr) 100px 120px minmax(130px,1fr) 80px 130px 32px;
  padding:var(--sp-2) var(--sp-4); border-bottom:1px solid var(--line-2);
  font-size:var(--fs-sm); }
.sk-need > *{ min-width:0; }
.sk-need:last-child{ border-bottom:none; }
.sk-need:hover{ background:var(--surface-3); }
.sk-need.is-replaced{ color:var(--muted-ink); }
.sk-need.is-replaced .sk-need-name{ text-decoration:line-through; }
.sk-need-name{ font-weight:500; }
/* «любой аналог · к изделию: анклет» стоит рядом с названием, а не строкой под ним.
   Название материала — ссылка на карточку, а значит цель касания 44 px (ДС §2 п.4);
   подпись снизу добавляла к этим 44 ещё 17, и строка выходила 78 px. Рядом — те же 44.

   Колонка стала гибкой не ради красоты: на странице «Склад» она уже, чем в карточке
   Битрикса (слева рельс), и «название 223 + подпись 217» в 419 px не помещались —
   подпись падала на вторую строку, а вместе с ней возвращались и 17 px. Теперь
   не помещается — ужимается многоточием, а целиком читается в подсказке и в раскрытой
   строке. Название не ужимается: оно главное. */
.sk-need > div:first-child{ display:flex; align-items:center; gap:var(--sp-2); min-width:0; }
.sk-need-name{ flex:0 0 auto; }
.sk-need-sub{ flex:0 1 auto; min-width:0; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
.sk-need .num{ text-align:right; white-space:nowrap; }
.sk-need-more{ appearance:none; border:1px solid transparent; background:none; cursor:pointer;
  color:var(--txt-2); font:inherit; font-size:var(--fs-md); line-height:1;
  min-height:var(--touch); width:32px; border-radius:var(--r-sm); }
.sk-need-more:hover{ background:var(--surface); border-color:var(--line); color:var(--txt); }
/* по названию строки тоже раскрывается — цель больше и заметнее, чем «⋯» */
.sk-need-name{ cursor:pointer; }
.sk-need-name:hover{ text-decoration:underline; text-decoration-style:dotted; }
.sk-need-open{ grid-column:1 / -1; padding-top:var(--sp-3);
  border-top:1px dashed var(--line); }
.sk-figs{ display:flex; flex-wrap:wrap; gap:var(--sp-4); margin-bottom:var(--sp-2); }
.sk-fig-lbl{ font-size:var(--fs-xs); color:var(--txt-3); }
.sk-fig-val{ font-weight:600; }
.sk-hist{ font-size:var(--fs-xs); color:var(--txt-3); }
.sk-risk{ color:var(--risk-ink); }

/* ───────────────────────────────────── §6.13 / §6.16 ФОРМА И ПОДБОР */

.sk-form{ padding:var(--sp-3) var(--sp-4) var(--sp-4); background:var(--surface-2);
  border-top:1px solid var(--line-2); }
.sk-form-row{ display:flex; gap:var(--sp-3); flex-wrap:wrap; align-items:flex-end;
  margin-bottom:var(--sp-3); }
.sk-form .sk-field{ min-width:150px; }
.sk-form .sk-field.w-qty{ width:140px; }
.sk-form .sk-field.w-unit{ width:110px; }
.sk-form .sk-field.grow{ flex:1; min-width:260px; }
.sk-form-hint{ font-size:var(--fs-xs); color:var(--txt-3); }

.sk-picker{ position:relative; }
.sk-picker-list{ position:absolute; z-index:30; left:0; right:0; top:calc(100% + 4px);
  max-height:340px; overflow:auto; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow-pop); }
.sk-picker-item{ padding:var(--sp-2) var(--sp-3); cursor:pointer;
  border-bottom:1px solid var(--line-2); }
.sk-picker-item:hover, .sk-picker-item.is-on{ background:var(--surface-3); }
.sk-picker-item b{ font-weight:600; }
.sk-cat-row{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-2);
  width:100%; min-height:var(--touch); padding:0 var(--sp-3);
  appearance:none; border:none; background:none; cursor:pointer;
  font:inherit; color:var(--txt); text-align:left; border-bottom:1px solid var(--line-2); }
.sk-cat-row:hover{ background:var(--surface-3); }
.sk-cat-row.is-class{ font-weight:600; background:var(--surface-2); }
.sk-cat-mat .sk-cat-row{ padding-left:var(--sp-5); }
.sk-cat-item{ padding-left:var(--sp-6) !important; }
.sk-chips{ display:flex; flex-wrap:wrap; gap:var(--sp-1); margin-top:var(--sp-1); }
.sk-chip{ font-size:var(--fs-xs); border-radius:var(--r-pill); padding:1px var(--sp-2);
  background:var(--muted-soft); color:var(--muted-ink); }
.sk-chip.has{ background:var(--ok-soft); color:var(--ok-ink); }

@media (max-width:1099px){
  .sk-need{ grid-template-columns:1fr 96px 130px; }
  .sk-need > .hide-sm{ display:none; }
}


/* ═════════════════════════════ §6.2 РЕЛЬС, §6.8 ОЧЕРЕДИ, §6.17 ТОСТЫ (этап 2) */

.sk-page{ display:flex; align-items:flex-start; max-width:1600px; margin:0 auto; }
.sk-page > .sk-wrap{ flex:1; min-width:0; max-width:none; margin:0; }

/* Рельс закреплён и живёт в своей прокрутке: меню не уезжает и не обрезается (слово Жени 07.09) */
.sk-nav{ position:sticky; top:var(--top-h, 0px); width:var(--rail-w); flex:0 0 var(--rail-w);
  padding:var(--sp-3) 0 var(--sp-5) var(--sp-4); align-self:flex-start;
  max-height:calc(100vh - var(--top-h, 0px) - var(--above-h, 0px));
  overflow-y:auto; overscroll-behavior:contain;
  scrollbar-width:thin; }
.sk-nav[hidden]{ display:none; }
.sk-nav-sect + .sk-nav-sect{ margin-top:var(--sp-1); }
.sk-nav-group{ display:flex; align-items:center; gap:var(--sp-2); width:100%;
  appearance:none; border:none; background:none; cursor:pointer; text-align:left;
  font:inherit; font-size:var(--fs-xs); font-weight:600; color:var(--txt-3);
  min-height:var(--touch); padding:0 var(--sp-2); border-radius:var(--r-sm); }
.sk-nav-group:hover{ color:var(--txt-2); background:var(--surface-3); }
/* заголовок группы, в которой сейчас работаешь: свернуть нельзя, значит и вести себя
   как кнопка не должен — ни стрелки, ни подсветки под курсором (блок 0 п.13) */
.sk-nav-group.is-static{ cursor:default; }
.sk-nav-group.is-static:hover{ color:var(--txt-3); background:none; }
.sk-nav-group .sk-count{ margin-left:auto; }
.sk-nav-caret{ width:0; height:0; border-left:4px solid currentColor;
  border-top:4px solid transparent; border-bottom:4px solid transparent;
  transform:rotate(90deg); transition:transform .12s ease; }
.sk-nav-group.is-closed .sk-nav-caret{ transform:none; }
.sk-nav-item{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-2);
  width:100%; min-height:var(--touch); padding:0 var(--sp-3);
  appearance:none; border:none; background:none; cursor:pointer;
  font:inherit; font-size:var(--fs-sm); color:var(--txt-2); text-align:left;
  border-radius:var(--r-sm); border-left:3px solid transparent; }
.sk-nav-item:hover{ background:var(--surface-3); color:var(--txt); }
.sk-nav-item.is-active{ background:var(--info-soft); color:var(--navy); font-weight:600;
  border-left-color:var(--navy); }
.sk-count{ font-size:var(--fs-xs); font-weight:600; border-radius:var(--r-pill);
  padding:1px var(--sp-2); background:var(--muted-soft); color:var(--muted-ink); }
.sk-count.is-risk{ background:var(--risk-soft); color:var(--risk-ink); }
.sk-count.is-info{ background:var(--info-soft); color:var(--info-ink); }

.sk-queue{ border:1px solid var(--line); border-radius:var(--r); padding:var(--sp-3) var(--sp-4);
  margin-bottom:var(--sp-3); }
.sk-queue-hd{ display:flex; align-items:baseline; gap:var(--sp-3); flex-wrap:wrap;
  margin-bottom:var(--sp-2); }
.sk-queue-act{ display:flex; align-items:flex-end; gap:var(--sp-2); flex-wrap:wrap;
  margin-top:var(--sp-3); }
.sk-opt{ display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap;
  min-height:var(--touch); padding:var(--sp-1) 0; border-top:1px solid var(--line-2);
  font-size:var(--fs-sm); cursor:pointer; }
.sk-opt input[type=checkbox]{ width:18px; height:18px; }
.sk-opt > span:first-of-type{ flex:1; min-width:200px; }
.sk-opt-qty{ width:110px; min-height:36px; }

.sk-toasts{ position:fixed; right:var(--sp-4); top:var(--sp-4); z-index:80;
  display:flex; flex-direction:column; gap:var(--sp-2); }
.sk-toast{ display:flex; align-items:center; gap:var(--sp-3);
  background:var(--ok-soft); color:var(--ok-ink); border:1px solid var(--ok-ink);
  border-radius:var(--r); padding:var(--sp-2) var(--sp-3); box-shadow:var(--shadow);
  font-size:var(--fs-sm); max-width:520px; }

@media (max-width:859px){
  .sk-page{ display:block; }
  .sk-nav{ position:static; width:auto; max-height:none; overflow:visible;
    padding:var(--sp-3) var(--sp-4) 0; display:flex; flex-wrap:wrap; gap:var(--sp-1); }
  .sk-nav-group{ display:none; }
  .sk-nav-sect, .sk-nav-items{ display:contents; }   /* узкое окно: все пункты чипсами */
  .sk-nav-items[hidden]{ display:contents !important; }
  .sk-nav-item{ width:auto; border-left:none; border:1px solid var(--line);
    border-radius:var(--r-pill); }
}

/* ───────────────────────── §6.15 ДИАЛОГИ И §6.13 ФОРМЫ В ОКНЕ (этап 2) */

.sk-modal-back{ position:fixed; inset:0; z-index:90; display:flex;
  align-items:center; justify-content:center; padding:var(--sp-4);
  background:rgba(21,40,65,.35); }
.sk-modal{ background:var(--surface); border-radius:var(--r-lg); box-shadow:var(--shadow-pop);
  width:100%; max-width:560px; max-height:86vh; display:flex; flex-direction:column; }
.sk-modal-hd{ padding:var(--sp-4) var(--sp-5) 0; font-size:var(--fs-md); font-weight:600; }
.sk-modal-body{ padding:var(--sp-4) var(--sp-5); overflow:auto;
  display:flex; flex-direction:column; gap:var(--sp-3); }
.sk-modal-list{ gap:0; }
/* главная кнопка диалога — справа (ДС §6.10) */
.sk-modal-act{ display:flex; justify-content:flex-end; gap:var(--sp-2);
  padding:0 var(--sp-5) var(--sp-4); }
.sk-pick{ display:flex; flex-direction:column; align-items:flex-start; gap:2px;
  width:100%; min-height:var(--touch); padding:var(--sp-2) var(--sp-3);
  appearance:none; border:none; border-bottom:1px solid var(--line-2); background:none;
  cursor:pointer; font:inherit; color:var(--txt); text-align:left; }
.sk-pick:hover{ background:var(--surface-3); }


/* ═══════════════ §6.7 ОКНО ФАКТА, §6.14 КЛАВИАТУРА И ПИН, §7в ПЛАНШЕТ (этап 3) */

/* карточка факта: ≤ 560 px по центру; во фрейме задачи — во всю ширину блока */
.sk-fact{
  max-width:560px; margin:0 auto var(--sp-4);
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:var(--sp-4); display:flex; flex-direction:column; gap:var(--sp-2);
}
.sk-fact-hd{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2); }
.sk-fact-task{ font-weight:600; }
.sk-fact-sku{ color:var(--txt-2); min-width:0; }
.sk-fact-ctx,
.sk-fact-plan{ font-size:var(--fs-sm); color:var(--txt-3); }
.sk-fact-step{ font-size:var(--fs-xs); font-weight:600; color:var(--txt-2);
  margin-top:var(--sp-2); }

/* шаг 1: люди цеха плитками — выбор одним касанием */
.sk-tiles{ display:flex; flex-wrap:wrap; gap:var(--sp-2); }
.sk-tile{
  appearance:none; font:inherit; cursor:pointer; min-height:var(--touch);
  padding:0 var(--sp-4); border:1px solid var(--line); border-radius:var(--r);
  background:var(--surface); color:var(--txt-1);
}
.sk-tile.is-on{ background:var(--navy); border-color:var(--navy); color:#fff; font-weight:600; }

/* выбор начатого рулона, когда их больше одного */
.sk-rolls{ display:flex; flex-wrap:wrap; gap:var(--sp-2); }
.sk-roll{
  appearance:none; font:inherit; font-size:var(--fs-sm); cursor:pointer;
  min-height:var(--touch); padding:0 var(--sp-4);
  border:1px solid var(--line); border-radius:var(--r-pill);
  background:var(--surface); color:var(--txt-2);
}
.sk-roll.is-on{ background:var(--info-soft); border-color:var(--info-ink); color:var(--info-ink);
  font-weight:600; }

/* шаг 2: три больших переключателя «что с материалом» */
.sk-choices{ display:flex; flex-wrap:wrap; gap:var(--sp-2); }
.sk-choice{
  appearance:none; font:inherit; font-weight:600; cursor:pointer; flex:1 1 160px;
  min-height:var(--touch); padding:0 var(--sp-3); min-width:0;
  border:1px solid var(--line); border-radius:var(--r);
  background:var(--surface); color:var(--txt-1);
}
.sk-choice.is-on{ background:var(--navy); border-color:var(--navy); color:#fff; }

.sk-fact-num{ display:flex; align-items:center; gap:var(--sp-2); }
.sk-num{
  font:inherit; font-size:var(--fs-xl); font-weight:700; width:160px; min-height:var(--touch);
  padding:0 var(--sp-3); border:1px solid var(--line); border-radius:var(--r);
  background:var(--surface); color:var(--txt-1);
}
.sk-num-sm{ width:110px; }
.sk-unit{ font-size:var(--fs-md); color:var(--txt-2); }
.sk-fact-hint{ font-size:var(--fs-sm); color:var(--txt-3); }

.sk-fact-off,
.sk-fact-scrap{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2);
  font-size:var(--fs-sm); color:var(--txt-2); }
.sk-fact-scrap .sk-input{ min-width:0; }
.sk-mm{ width:90px; }
.sk-fact-mach{ max-width:280px; }
.sk-fact-tasks{ display:flex; align-items:center; gap:var(--sp-2); max-width:560px;
  margin:0 auto var(--sp-3); }
.sk-fact-tasks .sk-select{ flex:1 1 auto; min-width:0; }
.sk-fact-go{ width:100%; }
.sk-fact-links{ display:flex; flex-wrap:wrap; gap:var(--sp-4); }
.sk-fact-foot{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-4);
  margin-top:var(--sp-3); }
.sk-fact-foot .sk-btn.is-primary{ min-width:240px; }

/* ссылка-кнопка: третьестепенное действие (ДС §6.11) */
.sk-link{
  appearance:none; background:none; border:0; padding:var(--sp-2) 0; cursor:pointer;
  font:inherit; font-size:var(--fs-sm); color:var(--navy); text-decoration:underline;
  min-height:var(--touch); text-align:left;
}

/* плашка над формой: долг по факту, обрыв связи */
.sk-plate{ padding:var(--sp-2) var(--sp-3); border-radius:var(--r-sm); font-size:var(--fs-sm); }
.sk-plate.is-risk{ background:var(--risk-soft); color:var(--risk-ink); }
.sk-plate.is-warn{ background:var(--warn-soft); color:var(--warn-ink); }

.sk-group-hd{ display:flex; align-items:center; gap:var(--sp-2); font-weight:600;
  margin:var(--sp-4) 0 var(--sp-2); }
.sk-td-act{ text-align:right; white-space:nowrap; }
.sk-queue.is-warn{ border-left:4px solid var(--warn-ink); }

/* §6.14 ПИН и цифровая клавиатура */
.sk-pin{ display:flex; flex-direction:column; align-items:center; gap:var(--sp-4);
  padding:var(--sp-5) 0; }
.sk-pin-hd{ font-size:var(--fs-lg); font-weight:600; }
.sk-pin-dots{ display:flex; gap:var(--sp-3); min-height:20px; }
.sk-pin-dot{ width:16px; height:16px; border-radius:50%; border:2px solid var(--line); }
.sk-pin-dot.is-on{ background:var(--navy); border-color:var(--navy); }
.sk-keypad{ display:grid; grid-template-columns:repeat(3, 64px); gap:var(--sp-2); }
.sk-key{
  appearance:none; font:inherit; font-size:var(--fs-xl); cursor:pointer;
  height:64px; border:1px solid var(--line); border-radius:var(--r);
  background:var(--surface); color:var(--txt-1);
}
.sk-key:active{ background:var(--info-soft); }

/* §7в главный экран планшета: плитки 2 × 3 */
.sk-tablet-hd{ display:flex; align-items:center; justify-content:space-between;
  gap:var(--sp-3); margin-bottom:var(--sp-4); font-size:var(--fs-md); }
.sk-plates{ display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--sp-3); }
.sk-plate-tile{
  appearance:none; font:inherit; cursor:pointer; min-height:120px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:var(--sp-2); border:1px solid var(--line); border-radius:var(--r);
  background:var(--surface); color:var(--txt-1);
}
.sk-plate-title{ font-size:var(--fs-md); font-weight:600; }
.sk-plate-n{ font-size:var(--fs-xl); font-weight:700; color:var(--navy); }

html[data-mode="tablet"] .sk-fact{ max-width:none; }
html[data-mode="tablet"] .sk-choice{ min-height:64px; }
html[data-mode="tablet"] .sk-keypad{ grid-template-columns:repeat(3, 80px); }
html[data-mode="tablet"] .sk-key{ height:80px; }
html[data-mode="tablet"] .sk-fact-go,
html[data-mode="tablet"] .sk-fact-foot .sk-btn.is-primary{ min-height:var(--touch-edge); }

@media (max-width:1099px){
  .sk-plates{ grid-template-columns:repeat(2, 1fr); }
}
.sk-fact-count{ font-size:var(--fs-sm); color:var(--txt-2); margin-bottom:var(--sp-2); }
.sk-fact-count.is-risk{ color:var(--risk-ink); font-weight:600; }

/* ══════════════════ §7.3 СЕБЕСТОИМОСТЬ ПРОЕКТА (этап 4) */

.sk-cost{ margin-top:var(--sp-4); padding-top:var(--sp-3); border-top:1px solid var(--line); }
.sk-cost-row{ display:flex; flex-wrap:wrap; gap:var(--sp-4); font-size:var(--fs); }
.sk-cost-sign{ margin-top:var(--sp-1); font-size:var(--fs-sm); }
.sk-cost-sign.is-ok{ color:var(--ok-ink); }
.sk-cost-sign.is-warn{ color:var(--warn-ink); }
.sk-cost-sign.is-risk{ color:var(--risk-ink); }

/* ═══════════════════ §7 ПАНЕЛЬ, ИНВЕНТАРИЗАЦИЯ, ЗАКУПКА, СВОД (этап 4) */

.sk-table td.num.is-risk{ color:var(--risk-ink); font-weight:600; }
.sk-table td.num.is-ok{ color:var(--ok-ink); }
.sk-cost-ok{ color:var(--ok-ink); }
.sk-cost-warn{ color:var(--warn-ink); }
.sk-cost-risk{ color:var(--risk-ink); font-weight:600; }
.sk-link.is-risk{ color:var(--risk-ink); }
.sk-seg-btn b{ margin-left:var(--sp-2); font-size:var(--fs-md); }


/* ═══════════════════════════════ §14 ВИД 10.09 ═══════════════════════════════
   Приёмы дашбордов ПРАЙД (вёрстка и РОП), переведённые на светлое: крупная цифра
   как центр карточки, цветная полоса вместо иконок, воздух, мягкая тень, тёмный
   рельс, живая лента, лёгкое стекло. Эталон — docs/архитектура/ЭТАЛОН_светлой_темы.html,
   решения А60–А63. Классы прежние: разметку экранов это не ломает.            */

/* ── фон страницы: ровный, один тон (А113) ─────────────────────────────────
   Было четыре слоя: точечная сетка 22 px, два цветных пятна по углам и диагональный
   градиент, и всё это `background-attachment:fixed`. Убрано по двум причинам разом.

   Вид: «просто, минималистично» (Женя 18.09). Сетка из точек — узор за буквами,
   а цветные пятна красят карточки в чуть разные оттенки в зависимости от того,
   где карточка оказалась на экране.

   Скорость: `fixed` заставляет браузер перерисовывать фон всего окна на каждый
   кадр прокрутки, а не сдвигать готовую картинку. На длинных списках склада
   (полторы тысячи строк остатка) это ровно то, что чувствуется как «подтормаживает».

   Остаётся один токен — тот же, что у всей светлой темы.                        */
body{ background:var(--bg); }
/* водяной знак логотипа «на стене» — за содержимым, очень бледный */
/* Водяной знак убран (приёмка КТ2). Он трижды мешал: под прозрачными карточками читался
   серым пятном, на тёмном рельсе — светлым квадратом (логотип — красный квадрат с белым
   знаком внутри), а прижатый к низу рельса шумел за буквами пунктов меню. Бренд и так
   стоит в верхней полосе слева. Если понадобится — вернём тиснением, но не за текстом. */
.sk-wrap{ position:relative; z-index:1; }
/* во фрейме Битрикса и на планшете фон спокойный: там свои рамки и слабое железо */
html[data-embed="bitrix"] body,
html[data-mode="tablet"] body{ background:var(--bg); }


/* ── §6.2 РЕЛЬС: светлый, на тех же токенах, что и страница (А113) ──────────
   Женя 18.09, посмотрев склад рядом с лёгким образцом производства: «левые кнопки
   некрасивые — открываются, но практически не читаются; давай сразу доработаем,
   чтобы всё было просто, минималистично, визуально».

   Тёмный рельс был не «тёмным ради красоты» — он копировал дашборды РОПа. Но здесь
   у него сошлись три беды разом, и все три меряются:

   * заголовки групп стояли 10 px, БОЛЬШИМИ БУКВАМИ, цветом #8199b5 на синем — это
     контраст **3,33 : 1** при норме 4,5. Не «бледновато», а ниже порога читаемости;
   * пункты стояли 13 px при основном тексте 14 — меню было мельче страницы;
   * поверх букв лежал слой точек (перфорация), а под ними — стекло и свечение.
     Четыре слоя ради фона там, где человек ищет, куда нажать.

   Теперь рельс — часть страницы: тот же фон, одна линия-граница, никаких теней.
   Цвет отвечает за одно — где я сейчас. Всё остальное просто чёрным по светлому. */
.sk-nav{
  padding:var(--sp-3) var(--sp-3) var(--sp-5);
  /* рельс ровно в высоту экрана: длинное меню прокручивается внутри себя —
     иначе нижние пункты уезжают за край (тест ловит) */
  height:calc(100vh - var(--top-h, 0px) - var(--above-h, 0px));
  max-height:calc(100vh - var(--top-h, 0px) - var(--above-h, 0px));
  overflow-y:auto;
  position:sticky;
}
.sk-nav-group{
  color:var(--txt-2);               /* 6,5 : 1 на фоне страницы — было 3,33 */
  border-radius:var(--r-sm);
  padding:0 var(--sp-2); min-height:var(--touch);
}
.sk-nav-group:hover{ background:var(--surface-3); color:var(--txt); }
.sk-nav-item{
  color:var(--txt); border-left:none; border-radius:var(--r-sm); margin:1px 0;
  padding:0 var(--sp-3);
  position:relative;
}
.sk-nav-item:hover{ background:var(--surface-3); color:var(--txt); }
.sk-nav-item.is-active{
  background:var(--info-soft); color:var(--navy); font-weight:600; box-shadow:none;
}
/* где я сейчас — синяя полоска слева. Единственный цветной знак в меню */
.sk-nav-item.is-active::before{
  content:'';position:absolute;left:0;top:8px;bottom:8px;width:3px;
  border-radius:0 3px 3px 0;background:var(--navy);
}

/* ── §6.3 ПОКАЗАТЕЛИ: карточка с цветной полосой и крупной цифрой ──────────── */
/* Колонки считает сама сетка: `1fr` не умеет становиться уже своего содержимого, и на
   ноутбуке 1024 карточка «0 позиций / 0 поставщиков» распирала полосу — страница ехала
   вбок. `auto-fit` + `min-width:0` убирают это без отдельных точек перелома. */
.sk-strip{ display:grid; grid-template-columns:repeat(auto-fit, minmax(210px, 1fr));
  gap:var(--sp-4); }
.sk-strip-cell{ min-width:0; }
.sk-strip-val{ overflow-wrap:anywhere; }
.sk-strip-cell{
  position:relative; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:var(--sp-4) var(--sp-4) var(--sp-3);
  box-shadow:var(--shadow); transition:transform .15s ease, box-shadow .15s ease;
}
.sk-strip-cell:hover{ transform:translateY(-2px); box-shadow:var(--shadow-lift); }
.sk-strip-cell::before{
  content:'';position:absolute;left:var(--sp-4);right:var(--sp-4);top:0;height:3px;
  border-radius:0 0 3px 3px;background:var(--info);
}
.sk-strip-cell:nth-child(2)::before{ background:var(--ok); }
.sk-strip-cell:nth-child(3)::before{ background:var(--wait); }
.sk-strip-cell:nth-child(4)::before{ background:var(--risk); }
.sk-strip-lbl{
  font-size:11px; font-weight:700; letter-spacing:.6px; text-transform:uppercase;
  color:var(--txt-3);
}
/* Цифра тянется по ширине карточки: «3 222 287 ₽» и «0 позиций / 0 поставщиков»
   не должны ломаться на четыре строки — размер подбирается от ширины окна. */
.sk-strip-val{ font-size:clamp(21px, 2.1vw, var(--fs-hero)); line-height:1.1; font-weight:700;
  letter-spacing:-.8px; margin:var(--sp-2) 0 var(--sp-1); overflow-wrap:anywhere; }
.sk-strip-val.is-risk{ color:var(--risk); }
.sk-strip-sub{ font-size:var(--fs-sm); color:var(--txt-2); }

/* ── карточки и таблица: мягче тень, крупнее число в строке ────────────────── */
.sk-card{ border-radius:var(--r-lg); box-shadow:var(--shadow); }
.sk-table .big{ font-size:17px; font-weight:600; }
.sk-table th{ font-size:11px; letter-spacing:.5px; text-transform:uppercase; }

/* ── §6.18 ЖИВАЯ ЛЕНТА ДВИЖЕНИЙ (приём ТВ-вкладки дашборда РОПа) ───────────── */
.sk-feed{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow); overflow:hidden; position:sticky; top:calc(var(--top-h,0px) + 18px);
  display:flex; flex-direction:column; height:calc(100vh - var(--top-h,0px) - 36px);
}
.sk-feed-hd{ display:flex; align-items:center; gap:var(--sp-2);
  padding:var(--sp-4); border-bottom:1px solid var(--line-2); }
.sk-feed-hd b{ font-size:var(--fs-sm); font-weight:700; flex:1; }
.sk-live{ width:8px; height:8px; border-radius:50%; background:var(--ok); flex-shrink:0;
  animation:sk-pulse 1.8s infinite; }
@keyframes sk-pulse{
  0%,100%{ opacity:1; box-shadow:0 0 0 0 rgba(31,157,85,.45); }
  70%{ opacity:.75; box-shadow:0 0 0 7px rgba(31,157,85,0); }
}
.sk-feed-body{ overflow-y:auto; }
.sk-ev{ display:flex; border-bottom:1px solid var(--line-2); cursor:pointer; }
.sk-ev:last-child{ border-bottom:none; }
.sk-ev:hover{ background:var(--surface-2); }
.sk-ev-stripe{ width:3px; flex-shrink:0; background:var(--muted); }
.sk-ev.is-in .sk-ev-stripe{ background:var(--ok); }
.sk-ev.is-out .sk-ev-stripe{ background:var(--info); }
.sk-ev.is-use .sk-ev-stripe{ background:var(--navy-2); }
.sk-ev.is-scrap .sk-ev-stripe{ background:var(--risk); }
.sk-ev.is-move .sk-ev-stripe{ background:var(--wait); }
.sk-ev-body{ flex:1; min-width:0; padding:var(--sp-3) var(--sp-4); }
.sk-ev-top{ display:flex; align-items:baseline; gap:var(--sp-2); margin-bottom:2px; flex-wrap:wrap; }
.sk-ev-who{ font-size:var(--fs-sm); font-weight:700; }
.sk-ev-time{ font-size:var(--fs-xs); color:var(--txt-3); }
.sk-ev-txt{ font-size:var(--fs-sm); color:var(--txt-2); line-height:1.4; }
.sk-ev-txt b{ color:var(--txt); font-weight:600; }
.sk-ev.is-fresh{ animation:sk-fresh 2.6s ease; }
@keyframes sk-fresh{ 0%{ background:rgba(86,193,235,.20); } 100%{ background:transparent; } }
/* две колонки: работа слева, лента справа */
.sk-two{ display:grid; grid-template-columns:1fr 320px; gap:var(--sp-4); align-items:start; }
@media (max-width:1180px){ .sk-two{ grid-template-columns:1fr; } .sk-feed{ height:auto; max-height:60vh; } }

/* ── ЛЁГКОЕ СТЕКЛО: включается атрибутом, чтобы можно было сравнить ────────── */
html[data-skin="glass"] .sk-card,
html[data-skin="glass"] .sk-strip-cell,
html[data-skin="glass"] .sk-feed,
html[data-skin="glass"] .sk-queue{
  background:rgba(255,255,255,.74);
  backdrop-filter:blur(14px) saturate(1.15);
  -webkit-backdrop-filter:blur(14px) saturate(1.15);
  border-color:rgba(255,255,255,.85);
  box-shadow:0 1px 2px rgba(21,40,65,.06), 0 12px 30px rgba(21,40,65,.10);
}
/* Заголовок таблицы липкий: строки уезжают ПОД него. Полупрозрачным он быть не может —
   буквы проезжающих строк просвечивают сквозь заголовок и сливаются с ним («слипшиеся
   буквы», замечание Жени 10.09). Цвет подобран под стекло, но заливка сплошная. */
html[data-skin="glass"] .sk-table th{ background:#f4f8fc; }
/* строки таблицы прозрачными не делаем: прокрутка длинного списка со стеклом тормозит */
html[data-skin="glass"] .sk-table tbody tr{ backdrop-filter:none; }
/* планшет и фрейм: стекло выключено */
html[data-mode="tablet"][data-skin="glass"] .sk-card,
html[data-embed="bitrix"][data-skin="glass"] .sk-card{
  background:var(--surface); backdrop-filter:none; -webkit-backdrop-filter:none;
}

/* рядом с лентой показатели идут в два ряда по два: четыре узкие колонки не читаются */
.sk-page.has-feed .sk-strip{ grid-template-columns:repeat(2,1fr); }
.sk-page.has-feed .sk-strip-val{ font-size:clamp(20px, 1.7vw, 32px); }

/* лента живёт правой колонкой страницы «Склад» (feed.js вставляет её в .sk-page) */
.sk-page.has-feed{ align-items:flex-start; }
.sk-page.has-feed > .sk-wrap{ flex:1; min-width:0; max-width:none; padding-right:var(--sp-3); }
.sk-page.has-feed .sk-feed{
  width:296px; flex:0 0 296px; margin:var(--sp-4) var(--sp-4) var(--sp-4) 0;
  position:sticky; top:calc(var(--top-h, 0px) + var(--sp-4));
  height:calc(100vh - var(--top-h, 0px) - var(--above-h, 0px) - var(--sp-5));
}
/* Рядом с лентой таблица сжимается, а не прокручивается: `overflow` на контейнере
   создаёт свой контекст прокрутки и ломает липкий заголовок (проверено — заголовок
   вставал посреди списка). Числа не переносим, переносится только название позиции. */
.sk-page.has-feed .sk-table{ font-size:var(--fs-sm); }
.sk-page.has-feed .sk-table th,
.sk-page.has-feed .sk-table td{ padding-left:var(--sp-2); padding-right:var(--sp-2); }
/* заголовки колонок могут переноситься — иначе таблица не сжимается и лезет под ленту */
.sk-page.has-feed .sk-table th{ white-space:normal; }
@media (max-width:1179px){
  .sk-page.has-feed > .sk-wrap{ max-width:none; }
  .sk-page.has-feed .sk-feed{ display:none; }
}

/* ── Правка 10.09: рельс до края и до низа ─────────────────────────────────
   Было две беды. Первая: страница центрировалась (max-width 1600), поэтому на
   широком мониторе тёмный рельс начинался с отступом 160 px, а шапка шла во всю
   ширину — вид «съехал». Вторая: высота рельса считалась один раз, и при прокрутке
   тёмная полоса обрывалась, не доходя до низа экрана.

   Лечим приёмом «ложной колонки»: тёмный фон рисует сама страница градиентом —
   он всегда во всю высоту, сколько бы ни было контента, — а рельс остаётся липким
   и любой высоты. Ширину контента ограничивает уже .sk-wrap, а не вся страница. */
.sk-page{ max-width:none; margin:0; }
@media (min-width:860px){
  /* приём «ложной колонки» остаётся, но рисует он теперь не тёмную стену, а одну
     линию: граница между меню и работой должна читаться, а не давить. Линия идёт
     во всю высоту страницы — рельс липкий и короче её */
  .sk-page{
    background:linear-gradient(to right,
      transparent 0 calc(var(--rail-w) - 1px),
      var(--line) calc(var(--rail-w) - 1px) var(--rail-w),
      transparent var(--rail-w));
  }
  .sk-page > .sk-wrap{ max-width:1500px; }
}
/* лента прижата к правому краю рабочей области, контент центрируется между ними */
.sk-page.has-feed{ justify-content:flex-start; }

/* Доска проектов на Панели — двенадцать колонок; рядом с лентой она не влезает.
   Здесь прокрутка внутри рамки уместна: заголовок доски не липкий, так что
   контекст прокрутки ничего не ломает (в отличие от «Остатков» и «Журнала»). */
.sk-page.has-feed #p-panel .sk-tbl-scroll{ overflow-x:auto; }
.sk-page.has-feed #p-panel .sk-table{ min-width:820px; }

/* ── Правка 10.09 по замечанию Жени «слипшиеся буквы с белым фоном» ──────────
   Липкая шапка была ровно по ширине содержимого, поэтому строки, проезжавшие под
   ней при прокрутке, выглядывали по бокам и наползали на текст. Фон шапки теперь
   на всю ширину рабочей области, а под ней — тонкая линия, чтобы граница читалась. */
.sk-sticky-hd{ padding-bottom:var(--sp-2); box-shadow:0 1px 0 var(--line-2); }
/* То же правило для шапки экрана: под ней проезжает весь список. Сплошной цвет,
   подобранный под стекло карточки, — визуально то же, но ничего не просвечивает. */
html[data-skin="glass"] .sk-sticky-hd{ background:#fafcfe; }
/* Подпись «что уйдёт и чего ждём» жалась к самому краю карточки и слипалась с рамкой.
   Даём ей воздух и выравниваем по левому краю: это предложение, а не число. */
.sk-why{ text-align:left; line-height:1.5; padding:var(--sp-2) 0 0; }
.sk-why-acts{ justify-content:flex-start; }

/* ═══════════════ §15 РЕЛЬС: читаемые кнопки вместо перфорации (А113) ═════════
   10.09 здесь появились точки, стекло и свечение — по замечанию Жени «в меню нет
   красивых кнопок и перфорации красивой». 18.09 он же, посмотрев это на настоящих
   данных, сказал ровно обратное: «некрасивые, открываются, но практически
   не читаются… чтобы всё было просто, минималистично». Слово владельца свежее,
   и оно совпадает с цифрами: 10 px заголовки при контрасте 3,33 : 1, поверх
   которых лежал ещё и узор.

   Поэтому украшений в меню больше нет. Пункт — это просто строка, которую видно:
   14 px (как основной текст, а не мельче), чёрным по светлому. Цветом помечено
   единственное, что стоит помечать, — где человек сейчас.                        */

/* полосы DEV и сценария идут поперёк всего окна — порядок отрисовки, не разметка */
.sk-dev, .sk-scen{ position:relative; z-index:41; }

@media (min-width:860px){
  .sk-nav{ padding:var(--sp-4) var(--sp-3) var(--sp-5); }
  /* между группами — воздух и волосяная линия. Одна, а не рамка вокруг каждой кнопки */
  .sk-nav-sect + .sk-nav-sect{ margin-top:var(--sp-3); padding-top:var(--sp-3);
    border-top:1px solid var(--line-2); }
  .sk-nav-group{
    font-size:var(--fs-xs); font-weight:700; letter-spacing:.4px; text-transform:uppercase;
    color:var(--txt-2); margin-bottom:2px;   /* высота остаётся 44 px: это кнопка (ДС §2 п.4) */
  }
  .sk-nav-group:hover{ color:var(--txt); background:var(--surface-3); }

  /* пункт меню не мельче основного текста страницы — прямое требование Жени 18.09 */
  .sk-nav-item{
    font-size:var(--fs); margin:1px 0;
    transition:background .12s ease, color .12s ease;
  }
  .sk-nav-item:hover{ background:var(--surface-3); }
  .sk-nav-item.is-active{ background:var(--info-soft); color:var(--navy); }

  /* полоса прокрутки внутри рельса — тонкая и светлая, под стать рельсу */
  .sk-nav{ scrollbar-color:var(--line) transparent; }
  .sk-nav::-webkit-scrollbar{ width:6px; }
  .sk-nav::-webkit-scrollbar-track{ background:transparent; }
  .sk-nav::-webkit-scrollbar-thumb{ background:var(--line); border-radius:3px; }
  .sk-nav::-webkit-scrollbar-thumb:hover{ background:var(--txt-3); }
}

/* Доска «Проекты в работе» — двенадцать колонок; на ноутбуке 1024 она распирала страницу,
   и вбок уезжал весь экран вместе с меню. Обёртки `.sk-tbl-scroll` у этой таблицы нет
   (разметка сборщика), поэтому прокрутку берёт на себя сама карточка — только на узких
   окнах, где липкая шапка карточки всё равно ничего не даёт. */
/* Заплатка через `:has()` убрана: доска «Проекты в работе» и ещё двенадцать таблиц
   обёрнуты в `.sk-tbl-scroll` в разметке (КТ2, отчёт §9) — теперь это правило общее. */


/* ═══════ §16 ТЁМНАЯ ЛЕНТА И БОЛЬШЕ ВОЗДУХА В ЦЕНТРЕ (слово Жени 10.09) ═══════
   «Ленту тоже в тёмном виде, а середина — всё, что касается материалов, — чуть
   прозрачнее». Получается композиция дашборда: тёмные края держат экран, светлый
   центр с материалами дышит. Лента и рельс становятся одной семьёй.               */

.sk-feed{
  background:linear-gradient(180deg, var(--rail-1) 0%, var(--rail-2) 100%);
  border-color:rgba(255,255,255,.08);
  box-shadow:0 1px 2px rgba(4,12,24,.10), 0 14px 34px rgba(21,40,65,.16);
  color:var(--rail-txt);
  position:sticky;                      /* перфорацию рисуем внутри, поэтому нужен контекст */
}
.sk-feed::before{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.05) 1px, transparent 0) 0 0/18px 18px,
    radial-gradient(280px 180px at 50% 0, rgba(86,193,235,.14), transparent 72%);
}
.sk-feed > *{ position:relative; z-index:1; }
.sk-feed-hd{ border-bottom-color:rgba(255,255,255,.09); }
.sk-feed-hd b{ color:#fff; }
.sk-feed .sk-btn{                        /* «Весь журнал» — стеклянная кнопка на тёмном */
  background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.16);
  color:#dbe7f3;
}
.sk-feed .sk-btn:hover{ background:rgba(255,255,255,.15); color:#fff; }
.sk-ev{ border-bottom-color:rgba(255,255,255,.07); }
.sk-ev:hover{ background:rgba(255,255,255,.05); }
.sk-ev-who{ color:#fff; }
.sk-ev-time{ color:#8fa3bd; }
.sk-ev-txt{ color:#b9c9dc; }
.sk-ev-txt b{ color:#fff; }
.sk-ev.is-fresh{ animation:sk-fresh-dark 2.6s ease; }
@keyframes sk-fresh-dark{ 0%{ background:rgba(86,193,235,.22); } 100%{ background:transparent; } }
/* бейджи типов движения: на тёмном светлые буквы, а не тёмные на светлом */
.sk-feed .sk-badge{ background:rgba(255,255,255,.12); color:#dce7f3; border-color:transparent; }
.sk-feed .sk-badge.is-ok{ background:rgba(31,157,85,.26); color:#a9e6c4; }
.sk-feed .sk-badge.is-risk{ background:rgba(224,74,58,.26); color:#ffb9ad; }
.sk-feed .sk-badge.is-info{ background:rgba(86,193,235,.24); color:#c6e9fa; }
.sk-feed .sk-badge.is-muted{ background:rgba(255,255,255,.10); color:#b6c8dd; }
.sk-feed .sk-empty, .sk-feed .sk-loading{ color:#8fa3bd; }
.sk-feed-body{ scrollbar-color:rgba(255,255,255,.20) transparent; }
.sk-feed-body::-webkit-scrollbar{ width:6px; }
.sk-feed-body::-webkit-scrollbar-track{ background:transparent; }
.sk-feed-body::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.18); border-radius:3px; }
/* стекло ленту больше не красит: у неё свой тёмный вид */
html[data-skin="glass"] .sk-feed{
  background:linear-gradient(180deg, var(--rail-1) 0%, var(--rail-2) 100%);
  border-color:rgba(255,255,255,.08);
  backdrop-filter:none; -webkit-backdrop-filter:none;
}

/* ── центр прозрачнее: карточки материалов сильнее пропускают фон ───────────── */
html[data-skin="glass"] .sk-card,
html[data-skin="glass"] .sk-strip-cell,
html[data-skin="glass"] .sk-queue{
  background:rgba(255,255,255,.62);
  backdrop-filter:blur(16px) saturate(1.18);
  -webkit-backdrop-filter:blur(16px) saturate(1.18);
  border-color:rgba(255,255,255,.78);
}
/* Липкие слои остаются сплошными (А71) — цвет пересчитан под новую прозрачность,
   иначе шапка читалась бы светлым прямоугольником поверх карточки. */
html[data-skin="glass"]{ --hd-bg:#f7fafd; --th-bg:#eef4fa; }
html[data-skin="glass"] .sk-sticky-hd{ background:var(--hd-bg); }
html[data-skin="glass"] .sk-table th{ background:var(--th-bg); }

/* ═══════════════════ §17 ВЕРХНЯЯ ПОЛОСА: где я, поиск, что горит ════════════
   Четыре вещи и ни одной лишней (слово Жени 10.09 «подумать, какие кнопки нужны»):
   крошка «где я», поиск проекта, «Требует меня» со счётчиком, кто я. Переключатель
   вида стоит рядом временно — пока Женя выбирает между белым и стеклом.          */

.sk-appbar{ height:56px; gap:var(--sp-4); }
.sk-crumb{ display:flex; align-items:center; gap:var(--sp-2);
  font-size:var(--fs-sm); color:var(--txt-3); white-space:nowrap; }
.sk-crumb b{ color:var(--txt); font-weight:600; }
.sk-crumb-sep{ color:var(--line); }

.sk-top-tools{ margin-left:auto; display:flex; align-items:center; gap:var(--sp-3); }
.sk-find{ position:relative; display:block; }
.sk-find-in{ width:300px; min-height:var(--touch); padding-left:var(--sp-4); }
@media (max-width:1280px){ .sk-find-in{ width:200px; } }
.sk-find-list{
  position:absolute; top:calc(100% + 6px); left:0; min-width:340px; z-index:60;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow-pop); overflow:hidden; max-height:60vh; overflow-y:auto;
}
.sk-find-list.is-right{ left:auto; right:0; min-width:260px; }
.sk-find-row{
  display:grid; grid-template-columns:auto 1fr auto; align-items:baseline;
  gap:var(--sp-2) var(--sp-3); width:100%; min-height:var(--touch);
  padding:var(--sp-2) var(--sp-4); border:none; background:none; cursor:pointer;
  font:inherit; text-align:left; border-bottom:1px solid var(--line-2);
}
.sk-find-row:last-child{ border-bottom:none; }
.sk-find-row:hover{ background:var(--surface-2); }
.sk-find-cli{ color:var(--txt-2); font-size:var(--fs-sm); }
.sk-find-sub{ grid-column:1 / -1; color:var(--txt-3); font-size:var(--fs-xs); }
.sk-find-none{ padding:var(--sp-3) var(--sp-4); color:var(--txt-3); font-size:var(--fs-sm); }

.sk-top-due-wrap{ position:relative; }
.sk-top-due{ min-height:var(--touch); white-space:nowrap; }
.sk-top-due .sk-count{ margin-left:var(--sp-2); }

/* во фрейме карточки и на планшете инструментов нет: там один экран и своя рамка портала */
html[data-embed="bitrix"] .sk-appbar,
html[data-mode="tablet"] .sk-appbar{ height:48px; }
html[data-mode="tablet"] .sk-appbar{ height:56px; }

/* ═══ §18 ГРАНИЦА УХОДА ПОД ЛИПКИЙ СЛОЙ («слипшиеся буквы», второй заход) ══════
   Строка, уезжающая под заголовок таблицы, срезалась ровно посередине букв и
   стояла вплотную к заголовку — читалось как две наложенные строки. Слои и так
   непрозрачны (А71); не хватало границы, по которой видно, что строка уходит ПОД.
   Даём мягкую тень вниз: срез перестаёт быть частью заголовка.                */

/* Тени мало: срез всё равно читался как часть заголовка. Строка должна
   **растворяться**, уходя под липкий слой, — тогда обрезанных букв просто нет.
   Полоса-градиент из цвета самого слоя в прозрачность, 18 px, поверх содержимого. */
:root{ --hd-bg:var(--surface); --th-bg:var(--surface-2); }
.sk-table thead th{ box-shadow:0 1px 0 var(--line); }
.sk-table thead th::after,
.sk-sticky-hd::after{
  content:''; position:absolute; left:0; right:0; top:100%; height:18px;
  pointer-events:none; z-index:2;
}
.sk-table thead th::after{
  background:linear-gradient(180deg, var(--th-bg) 0%,
                             rgba(255,255,255,0) 100%);
}
.sk-sticky-hd{ position:sticky; }
.sk-sticky-hd::after{
  background:linear-gradient(180deg, var(--hd-bg) 0%, rgba(255,255,255,0) 100%);
}
/* у шапки экрана растворение нужно только там, где под ней нет заголовка таблицы:
   иначе две полосы наложатся друг на друга */
.sk-card:has(.sk-table) > .sk-sticky-hd::after,
section:has(.sk-table) > .sk-sticky-hd::after{ display:none; }

/* ═══════════════════ §19 ЛЕНТА: светлая или тёмная, и её можно убрать ════════
   Слово Жени 10.09: «варианты светлый, тёмный — именно правой части» и «журнал
   тоже дать возможность скрывать». Вид ленты живёт в `data-feed`, состояние —
   в `sklad.feed` (тёмная по умолчанию), кнопки — в шапке самой ленты.           */

html[data-feed="light"] .sk-feed{
  background:var(--surface); color:var(--txt);
  border-color:var(--line);
  box-shadow:var(--shadow);
}
html[data-feed="light"] .sk-feed::before{
  background:radial-gradient(circle at 1px 1px, rgba(21,40,65,.05) 1px, transparent 0) 0 0/18px 18px;
}
html[data-feed="light"] .sk-feed-hd{ border-bottom-color:var(--line-2); }
html[data-feed="light"] .sk-feed-hd b{ color:var(--txt); }
html[data-feed="light"] .sk-feed .sk-btn{
  background:var(--surface); border-color:var(--line); color:var(--txt-2);
}
html[data-feed="light"] .sk-feed .sk-btn:hover{ background:var(--surface-2); color:var(--txt); }
html[data-feed="light"] .sk-ev{ border-bottom-color:var(--line-2); }
html[data-feed="light"] .sk-ev:hover{ background:var(--surface-2); }
html[data-feed="light"] .sk-ev-who{ color:var(--txt); }
html[data-feed="light"] .sk-ev-time{ color:var(--txt-3); }
html[data-feed="light"] .sk-ev-txt{ color:var(--txt-2); }
html[data-feed="light"] .sk-ev-txt b{ color:var(--txt); }
html[data-feed="light"] .sk-feed .sk-badge{ background:var(--muted-soft); color:var(--muted-ink); }
html[data-feed="light"] .sk-feed .sk-badge.is-ok{ background:var(--ok-soft); color:var(--ok-ink); }
html[data-feed="light"] .sk-feed .sk-badge.is-risk{ background:var(--risk-soft); color:var(--risk-ink); }
html[data-feed="light"] .sk-feed .sk-badge.is-info{ background:var(--info-soft); color:var(--info-ink); }
html[data-feed="light"] .sk-feed .sk-empty{ color:var(--txt-3); }
html[data-feed="light"] .sk-feed-body{ scrollbar-color:var(--line) transparent; }
html[data-feed="light"] .sk-feed-body::-webkit-scrollbar-thumb{ background:var(--line); }

/* кнопки в шапке ленты: убрать и сменить вид — мелкие, без слов там, где хватает знака */
.sk-feed-hd{ gap:var(--sp-2); padding:var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-4); }
.sk-feed-hd b{ flex:1; white-space:nowrap; }
.sk-feed-hd .sk-feed-act{ display:flex; align-items:center; gap:4px; flex-shrink:0; }
.sk-feed-hd .sk-btn{ padding:0 var(--sp-2); white-space:nowrap; }
.sk-feed-ic{
  padding:0; display:flex; align-items:center;
  justify-content:center; font-size:15px; line-height:1;
}

/* Лента убрана — у правого края остаётся язычок, которым её возвращают.
   Прячем не насовсем: человек должен видеть, что журнал никуда не делся. */
.sk-feed-tab{
  position:fixed; right:0; top:50%; transform:translateY(-50%);
  z-index:35; writing-mode:vertical-rl; text-orientation:mixed;
  padding:var(--sp-4) var(--sp-2); min-height:120px;
  background:linear-gradient(180deg, var(--rail-1), var(--rail-2)); color:#fff;
  border:none; border-radius:var(--r) 0 0 var(--r); cursor:pointer;
  font:inherit; font-size:var(--fs-sm); font-weight:600; letter-spacing:.4px;
  box-shadow:-6px 0 18px rgba(21,40,65,.18);
}
.sk-feed-tab:hover{ filter:brightness(1.12); }
html[data-feed="light"] .sk-feed-tab{
  background:var(--surface); color:var(--txt-2); border:1px solid var(--line); border-right:none;
}

/* ═════════════ §20 СПОКОЙНАЯ СТРАНИЦА И ПЛОТНОСТЬ СПИСКОВ (разбор 10.09) ══════
   «Меню и страница дёргается, когда кнопки нажимаю». Причин было две: ширина
   рабочей области прыгала на 312 px, когда лента пряталась сама (вылечено в feed.js),
   и полоса прокрутки то появлялась, то исчезала вместе с высотой экрана.          */

html{ scrollbar-gutter:stable; }

/* ── пустой экран: не брошенная страница, а спокойный ответ ─────────────────── */
.sk-empty{
  padding:var(--sp-6) var(--sp-5); text-align:center; color:var(--txt-2);
  font-size:var(--fs-md); line-height:1.5;
}
.sk-empty::before{
  content:'✓'; display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; margin:0 auto var(--sp-3);
  border-radius:50%; background:var(--ok-soft); color:var(--ok-ink);
  font-size:20px; line-height:1;
  box-shadow:inset 0 0 0 1px rgba(31,157,85,.18);
}
.sk-feed .sk-empty{ padding:var(--sp-5) var(--sp-4); font-size:var(--fs-sm); }
.sk-feed .sk-empty::before{ display:none; }
/* Зелёная галочка означает «пусто — и это хорошо» (очередь разобрана). Там, где пусто
   значит «ещё не начали» — внутри таблицы прихода, формы, подбора — знака быть не должно:
   иначе система хвалит человека за незаполненный документ. */
.sk-table .sk-empty::before,
.sk-modal .sk-empty::before,
.sk-form .sk-empty::before{ display:none; }
.sk-table .sk-empty, .sk-modal .sk-empty, .sk-form .sk-empty{ padding:var(--sp-4) 0; }

/* ── действия в строке: не мозолят глаза, но всегда на месте ────────────────── */
[data-more]{ opacity:.4; transition:opacity .12s ease; }
tr:hover [data-more], li:hover [data-more], .sk-card:hover [data-more],
[data-more]:hover, [data-more]:focus-visible{ opacity:1; }
html[data-mode="tablet"] [data-more]{ opacity:1; }   /* пальцем наведения нет */

/* ── плотность списков: кладовщику в работе нужнее «плотно» ─────────────────── */
html[data-density="compact"] .sk-table th,
html[data-density="compact"] .sk-table td{
  padding-top:var(--sp-1); padding-bottom:var(--sp-1); line-height:1.35;
}
html[data-density="compact"] .sk-card{ padding-top:var(--sp-3); padding-bottom:var(--sp-3); }
html[data-density="compact"] .sk-table .sk-sub{ font-size:11px; }

/* Ширина рабочей области меняется только там, где лента уходит с широких таблиц.
   Смягчаем переход, насколько это возможно без выключения `display` (скрытая лента
   с ненулевой геометрией отдавала бы свои кнопки проверкам целей касания). */
.sk-table{ transition:font-size .16s ease; }

/* Кнопки в шапке ленты — полноценные цели касания (ДС §2 п. 4), а не значки 32 px */
.sk-feed-ic{ width:44px; min-height:44px; }

/* Во фрейме карточки и на планшете шапка экрана не липкая (правка сборщика, ДС §7а) —
   значит и растворять под ней нечего: полоса-градиент там только мешала бы. */
html[data-embed="bitrix"] .sk-sticky-hd::after,
html[data-mode="tablet"] .sk-sticky-hd::after,
html[data-embed="bitrix"] .sk-table thead th::after,
html[data-mode="tablet"] .sk-table thead th::after{ display:none; }

/* ═══════ §21 ПРАВИЛА ПОД РАЗМЕТКУ КТ2 + РЕЛЬС НА УЗКОМ ОКНЕ (приёмка 11.09) ═══
   Классы, которые сборщик завёл в разметке и перечислил в `PROGRESS.md`, и починка
   рельса на 1024 px: там меню разворачивалось в плитки на 575 px и содержимое
   начиналось ровно за нижним краем окна. Порог тёмной колонки опущен до 860 px,
   а сами чипсы ниже него стали одной прокручиваемой строкой.                   */

@media (max-width:859px){
  /* одна строка с горизонтальной прокруткой: меню не имеет права съедать экран.
     Высоту «в экран» из §14 здесь обязательно снимаем — иначе полоса меню занимает
     всё окно и содержимое начинается за нижним краем (мерил на 820: 707 px). */
  .sk-nav{ height:auto; max-height:none; flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden;
    padding:var(--sp-2) var(--sp-4); gap:var(--sp-2);
    scrollbar-width:thin; -webkit-overflow-scrolling:touch; }
  .sk-nav-item{ flex:0 0 auto; min-height:40px; white-space:nowrap;
    padding:0 var(--sp-3); margin:0; }
}

/* ── плавное сворачивание групп рельса (просьба сборщика, КТ2 §8) ───────────── */
@media (min-width:860px){
  /* `:not([hidden])` обязателен: без него `display:grid` перебивает скрытие, и схлопнутые
     кнопки остаются целями касания высотой 21 px — это ловит `assert_touch_targets`.
     Сборщик снимает `hidden` до анимации и ставит обратно после неё (КТ2 §2). */
  /* Сворачиваем высотой, а не гридом: `grid-template-rows:0fr` сжимает только тех детей,
     у кого `min-height:0`, — а у кнопок меню он обязан быть 44 px (цели касания). */
  .sk-nav-items:not([hidden]){ overflow:hidden; max-height:1200px;
    transition:max-height .2s ease; }
  .sk-nav-sect.is-closed .sk-nav-items:not([hidden]){ max-height:0; }
}

/* ── «Что делать сейчас» на Панели: строка-кнопка во всю ширину ─────────────── */
.sk-todo{ display:grid; gap:var(--sp-2); margin-top:0; }
.sk-todo-row{
  /* четыре колонки, а не три: число, название, подпись и стрелка. Детей у кнопки
     как раз четверо — текст между `<span>` браузер заворачивает в свой безымянный
     элемент, — и при трёх колонках четвёртый переносился на вторую строку.
     На Панели это выглядело как пустая строка со стрелкой под каждой кнопкой */
  display:grid; grid-template-columns:auto 1fr auto auto; align-items:center;
  gap:var(--sp-3); width:100%; min-height:56px; text-align:left;
  padding:var(--sp-2) var(--sp-4); font-size:var(--fs-md);
  border-color:var(--line); background:var(--surface);
}
.sk-todo-row:hover{ border-color:var(--picton); background:var(--info-soft); }
.sk-todo-row .sk-count{ font-size:var(--fs-md); min-width:34px; text-align:center;
  padding:2px var(--sp-2); }
.sk-todo-row .sk-card-sub{ justify-self:end; color:var(--txt-3); }
.sk-todo-row::after{ content:'→'; color:var(--txt-3); font-size:18px; }

/* ── список подбора: крестик и раскрытие вверх ──────────────────────────────── */
/* `.sk-picker-close` теперь сама кнопка в шапке окна, а не полоска над инлайн-списком
   (КТ3, блок A): старое контейнерное правило рисовало вокруг крестика пустую рамку. */
.sk-picker-close{ width:44px; min-height:44px; padding:0; flex-shrink:0; }
/* `.sk-picker-list.is-up` убран: инлайн-списка под полем в системе больше нет —
   выбор позиции стал модальным окном (КТ3, блок A). */

/* ── шапка карточки проекта: название, кнопки, подпись и сегменты — вместе ──────
   Полоса сегментов больше не липнет сама по себе. Она липла к той же высоте, что
   и шапка проекта, только с меньшим `z-index` — то есть шапка её просто накрывала,
   и при прокрутке «Материалы · Резерв и выдачи · Списания…» пропадали с экрана
   совсем. Теперь обе живут внутри одного `.sk-sticky-hd` (А114) и едут вместе.   */
.sk-prj-hd{ padding-bottom:var(--sp-1); }
.sk-prj-hd .sk-h1{ font-size:var(--fs-lg); line-height:1.2; }
/* Подзаголовок — это строка текста, и рост у неё должен быть строки. Раньше рядом
   с ним стояла ссылка «Битрикс ↗» ростом 44 px (цель касания, ДС §2 п.4), и вся строка
   вытягивалась до 44 из-за одной ссылки. Ссылки переехали в первую строку, где 44 px
   и так заняты кнопками, — минус 27 px из шапки даром (Женя 18.09: «чуть поуже, чтобы
   больше материалов помещалось»). */
.sk-prj-hd .sk-spec-state{ margin:2px 0 0; }
/* подпись «что уйдёт» — строка объяснения под кнопкой, а не колонка: прижимать
   её к правому краю незачем, а высоту она занимала как отдельный блок */
.sk-prj-hd .sk-why{ padding-top:2px; margin-top:0; }
.sk-prj-seg{ margin:0; padding:var(--sp-1) 0 0; }

/* ── строка списка проектов кликается целиком: покажем это ──────────────────── */
.sk-table tbody tr[data-open]{ cursor:pointer; }
.sk-table tbody tr[data-open]:hover{ background:var(--info-soft); }
.sk-table tbody tr[data-open]:hover b{ text-decoration:underline; }

/* ═══════════ §22 ВЫБОР ПОЗИЦИИ И КАРТОЧКА МАТЕРИАЛА (правила под КТ3) ════════
   Классы, которые сборщик завёл в разметке блоков A и B и перечислил в отчёте §6.
   Дерево живёт в модальном окне, а не выпадающим списком под полем: во фрейме
   карточки 1062 списку негде поместиться — он либо не влезал, либо накрывал кнопки.  */

/* ── окно выбора позиции ────────────────────────────────────────────────────── */
.sk-picker-modal{ max-width:760px; }
.sk-picker-modal .sk-modal-body{ display:flex; flex-direction:column; min-height:0; }
.sk-picker-modal .sk-field{ margin-bottom:var(--sp-3); }
/* Высоту дерева держит окно, а не число в разметке: inline `max-height:52vh`
   у `#pk-list` можно снимать — правило ниже делает то же самое и переживает
   смену высоты окна. */
.sk-picker-tree{
  flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain;
  border:1px solid var(--line); border-radius:var(--r);
  background:var(--surface);
}
.sk-picker-modal .sk-modal-hd{ display:flex; align-items:center; gap:var(--sp-3); }
.sk-picker-modal .sk-picker-close{ margin-left:auto; }

/* третий уровень дерева — вид: отступ глубже, чем у материала */
.sk-cat-kind .sk-cat-row{ padding-left:calc(var(--sp-5) + var(--sp-4)); }
.sk-cat-kind .sk-cat-item, .sk-cat-kind .sk-picker-item{
  padding-left:calc(var(--sp-6) + var(--sp-4)); }
.sk-cat-mat .sk-cat-item{ padding-left:var(--sp-6); }

/* поле выбора позиции в форме: выглядит как поле, ведёт себя как кнопка */
.sk-picker-btn{
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-2);
  width:100%; text-align:left; cursor:pointer; font:inherit; color:var(--txt);
}
.sk-picker-btn::after{ content:'▾'; color:var(--txt-3); flex-shrink:0; }
.sk-picker-btn:hover{ border-color:var(--picton); }
.sk-picker-btn:empty::before{ content:'Выберите позицию'; color:var(--txt-3); }

/* ── название позиции как ссылка на карточку — одно правило на все экраны ───── */
.sk-sku-link{
  text-align:left; font:inherit; color:inherit; text-decoration:none;
  border-bottom:1px dashed var(--line-2); padding:0;
}
.sk-sku-link:hover{ color:var(--navy-2); border-bottom-color:var(--picton); }
.sk-table .sk-sku-link{ font-weight:inherit; }

/* ── окно карточки материала ────────────────────────────────────────────────── */
.sk-sku-modal{ max-width:880px; }
/* крестик — к правому краю шапки, а не вплотную к названию позиции */
.sk-sku-modal .sk-modal-hd{ display:flex; align-items:center; gap:var(--sp-3); }
.sk-sku-modal .sk-modal-hd > :last-child{ margin-left:auto; flex-shrink:0; }
.sk-facts{ display:grid; grid-template-columns:repeat(auto-fit, minmax(210px, 1fr));
  gap:var(--sp-2) var(--sp-4); margin:var(--sp-2) 0 var(--sp-4); }
.sk-fact-pair{ display:flex; flex-direction:column; gap:2px; min-width:0;
  padding:var(--sp-2) 0; border-top:1px solid var(--line-2); }
.sk-fact-pair .sk-sub{ font-size:var(--fs-xs); text-transform:uppercase;
  letter-spacing:.4px; color:var(--txt-3); }

/* свои строки в разделе «Кто ждёт» — видно сразу, чьё это ждёт */
.sk-table tbody tr.is-mine{ background:var(--info-soft); }
.sk-table tbody tr.is-mine td:first-child{ box-shadow:inset 3px 0 0 var(--picton); }

/* ── планшет: цели касания 60 px и в дереве тоже (ДС §11) ───────────────────── */
html[data-mode="tablet"] .sk-cat-row,
html[data-mode="tablet"] .sk-picker-item{
  min-height:var(--touch); padding-top:var(--sp-2); padding-bottom:var(--sp-2);
  font-size:var(--fs-md);
}
html[data-mode="tablet"] .sk-picker-modal{ max-width:none; }
html[data-mode="tablet"] .sk-picker-tree{ max-height:none; }

/* ═══════════ §23 ПРАВИЛА ПОД РАЗМЕТКУ КТ4 (вопрос 4 отчёта сборщика) ═════════ */

/* Приложенные бумаги в приходе: строчка мелких ярлыков, а не список во всю ширину. */
.sk-chips{ display:flex; flex-wrap:wrap; gap:var(--sp-2); margin:var(--sp-2) 0 var(--sp-3); }
.sk-chips:empty{ display:none; }
.sk-chips .sk-chip{ max-width:340px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sk-chips .sk-chip button{
  appearance:none; border:none; background:none; cursor:pointer; font:inherit;
  color:var(--txt-3); padding:0 0 0 var(--sp-2); min-height:0;
}
.sk-chips .sk-chip button:hover{ color:var(--risk-ink); }

/* Закрытый поставщик виден, но не притворяется рабочим. */
.sk-table tbody tr.is-muted{ color:var(--txt-3); }
.sk-table tbody tr.is-muted b{ font-weight:500; }

/* Итог документа — не ещё одна строка таблицы: отделён линией и держится снизу. */
.sk-table tfoot td{
  border-top:2px solid var(--line); background:var(--surface-2);
  font-weight:600; padding-top:var(--sp-3); padding-bottom:var(--sp-3);
}
.sk-table tfoot .sk-sub{ font-weight:400; }

/* Сегментов стало четыре (журнал), плотность считалась под три: ужимаем поля,
   а на узком окне полоса прокручивается, а не переносится на вторую строку. */
.sk-seg{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:thin; padding-bottom:2px; }
.sk-seg-btn{ padding:0 var(--sp-3); flex:0 0 auto; white-space:nowrap; }
@media (min-width:1280px){ .sk-seg-btn{ padding:0 var(--sp-4); } }

/* ═══════════════ §24 НА БУМАГЕ НЕТ НИ РЕЛЬСА, НИ ФОНА (приёмка КТ5) ══════════
   Печатные стили живут в `print.css`, но «ложная колонка» — приём отсюда: тёмную
   полосу рельса рисует сама `.sk-page`, и в печать она уходила вместе с листом —
   слева на бумаге получалась серая полоса 208 px. Гасим там же, где завели.      */

@media print{
  .sk-page{ background:none !important; box-shadow:none !important; display:block !important; }
  .sk-page::before, .sk-page::after{ display:none !important; }
  body{ background:#fff !important; }
  .sk-feed, .sk-feed-tab, .sk-toasts{ display:none !important; }
}

/* ═══════ §25 КНОПКИ МЕНЮ ВИДНЕЕ — И ЧИТАЕМЫ (слова Жени 15.09 и 18.09) ═══════
   15.09: «кнопки слева должны выглядеть жирнее, нагляднее — прям видно, что это
   кнопка». 18.09, на настоящих данных: «некрасивые, открываются, но практически
   не читаются… просто, минималистично».

   Оба требования выполняются разом, если перестать делать кнопку из стекла и теней.
   Кнопка — это белая плашка с волосяной рамкой на сером фоне рельса: её видно как
   кнопку с первого взгляда, а текст на ней стоит чёрным по белому (15,6 : 1).
   Прежние слои — градиент, внутренняя подсветка, две тени, белый текст #e4edf7 —
   и были той самой нечитаемостью: четвёртый слой поверх трёх предыдущих.

   Этот блок объявлен последним не случайно: он выигрывает у §6.2 и §15 по порядку,
   и именно его правила человек видит на широком окне.                             */

@media (min-width:860px){
  .sk-nav-item{
    background:var(--surface);
    border:1px solid var(--line);
    border-left-width:1px;                    /* базовое правило держит слева 3 px под метку */
    border-radius:var(--r-sm);
    color:var(--txt); font-weight:500;
    box-shadow:none;
  }
  .sk-nav-item:hover{
    background:var(--surface-2); border-color:var(--txt-3); color:var(--txt);
  }
  .sk-nav-item:active{ transform:translateY(1px); }
  .sk-nav-item.is-active{
    background:var(--info-soft); border-color:var(--info-ink);
    color:var(--navy); font-weight:600; box-shadow:none;
  }
  /* заголовки групп тише кнопок, но не тише порога читаемости: 6,5 : 1 вместо 3,33 */
  .sk-nav-group{ color:var(--txt-2); }
}

/* ═══════ §26 ССЫЛКА НАРУЖУ — ТОЖЕ ЦЕЛЬ КАСАНИЯ (просьба сборщика, КТ7) ═══════
   `.sk-link` рассчитан на `<button>`: у строчного `<a>` `min-height` не работает, и ссылка
   выходит ростом 33 px вместо 44 — палец не попадает. Правило жило разметкой в `app.js`,
   потому что стиль — чужая территория; забираю его сюда, инлайны можно снимать.         */

a.sk-link, .sk-out{
  display:inline-flex; align-items:center; gap:4px;
  min-height:var(--touch);
}
.sk-out{ white-space:nowrap; }