/* BMS V2 — прототип этапа 1. Эталон стиля — страница «Продажи» (решение 54).
   Паттерн кабинета Ozon: белый фон, серая зона таблицы, липкие шапка и крайние
   колонки; палитра — восемь токенов системы «Масштаб»; шрифт Golos Text, числа
   tabular-nums; сетка контента 1280, зона таблицы — на всю ширину. */

:root{
  /* ⚠⚠ ПСЕВДОНИМОВ НЕТ (UI_RULES Л-1, решение владельца 11.09.2026). Здесь жили
     26 переходных имён — --ink, --ink2, --ink3, --line2, --line3, --card,
     --accent-bg, --up, --down, --mp-*, --radius-card, --radius-ctl и другие.
     Каждое было местом для расхождения: --ink2 и --ink3 стали одним цветом, а
     Ozon и WB — одним тоном. Все употребления переведены на восемь цветов, их
     оттенки, два радиуса и одну высоту, которые объявлены в masshtab-tokens.css.
     Здесь остались только величины раскладки, у которых нет двойника. */
  --fs-s:15px; --fs-xs:13px;
  --grid-w:1280px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--text);font:400 13px/1.54 var(--font);-webkit-font-smoothing:antialiased}

/* ── лейаут по стандарту кабинета Ozon (решение 31):
      меню, крошки, заголовок, KPI-карточки и фильтры — в сетке 1280/24;
      .table-container вырывается из сетки: 100% ширины, мягкая подложка,
      таблица внутри с полями 24px — левый край колонки на одной линии
      с контентом сетки (совпадает точно при ширине экрана ≤1328px) ── */
.page-content{max-width:var(--grid-w);margin:0 auto;padding:24px 24px 0}
.crumbs{display:flex;align-items:center;gap:10px;font-size:13px;line-height:20px;color:var(--text-2);margin-bottom:10px}
.crumbs .back{color:var(--text-2);text-decoration:none;font-size:17px;line-height:1}
.crumbs .back:hover{color:var(--accent)}
.crumbs .sep{color:var(--line)}
.crumbs .chev{color:var(--text-2)}
.crumbs a{color:var(--text-2);text-decoration:none}
.crumbs a:hover{color:var(--accent)}
.crumbs .cur{color:var(--text);font-weight:500}

/* Единый финансовый виджет (решение 37, по референсу Ozon): три секции —
   продажи, начисления, итого; цветная полоса-стек и легенда по статьям */
.eco-card{display:grid;grid-template-columns:1fr 1.7fr .8fr;gap:0;background:var(--bg);
  border:3px solid var(--pad);border-radius:16px;margin:16px 0 4px;overflow:hidden}
.es{padding:18px 22px;min-width:0}
.es+.es{border-left:1px solid var(--pad)}
.es-t{font-size:17px;line-height:24px;font-weight:500;color:var(--text);margin-bottom:8px}
.es-v{font-size:26px;line-height:30px;font-weight:600;color:var(--text);font-variant-numeric:tabular-nums;margin-bottom:10px}
.es-bar{display:flex;height:6px;border-radius:3px;overflow:hidden;margin-bottom:12px}
.es-bar span{display:block;height:100%}
.es-leg{display:grid;gap:6px;font-size:13px;line-height:20px}
.es-leg.two{grid-template-columns:1fr 1fr;column-gap:26px}
.es-leg .li{display:flex;align-items:center;gap:8px;min-width:0}
.es-leg .dot{width:12px;height:12px;border-radius:4px;flex-shrink:0}
.es-leg .nm2{color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.es-leg .val{margin-left:auto;font-variant-numeric:tabular-nums;white-space:nowrap}
.es-leg a{color:var(--accent);text-decoration:none;font-weight:500}
.eco-card.even{grid-template-columns:repeat(3,1fr)}
@media (max-width:980px){.eco-card{grid-template-columns:1fr}.es+.es{border-left:0;border-top:1px solid var(--pad)}}
.neg{color:var(--bad)}

.table-container{width:100%;background:var(--pad);border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);padding:0;margin-top:16px}
.page-content .chipbar{max-width:none;margin:0;padding:8px 0 4px}

/* ── шапка в две строки, как Ozon Seller (решение 42) ── */
header,.header{background:var(--bg);position:static;width:100%}
.hdr-top{display:flex;align-items:center;gap:22px;height:60px;max-width:var(--grid-w);margin:0 auto;padding:0 24px}
.hdr-right{margin-left:auto;display:flex;align-items:center;gap:16px}
.hdr-co{display:inline-flex;align-items:center;font-size:15px;font-weight:500;cursor:default}
/* индикатор коллектора: обводка с цветным кругом внутри (паттерн V1) */
.sync-dot{width:22px;height:22px;border-radius:50%;border:1px solid var(--line);background:var(--bg);
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.sync-dot i{width:10px;height:10px;border-radius:50%;display:block}
.sync-dot.s-ok i,.sdot.s-ok{background:var(--ok)}
.sync-dot.s-delay i,.sdot.s-delay{background:var(--text-2)}
.sync-dot.s-err i,.sdot.s-err{background:var(--bad)}
/* bottom-sheet расшифровки: 12 колонок, сильное скругление, размытый фон */
.sheet-back{position:fixed;inset:0;background:rgba(14, 42, 47,.28);backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);z-index:200;opacity:0;pointer-events:none;transition:opacity .25s}
.sheet-back.open{opacity:1;pointer-events:auto}
.sheet{position:fixed;left:50%;bottom:0;transform:translate(-50%,105%);width:min(var(--grid-w),100%);
  background:var(--bg);border-radius:var(--radius-block) var(--radius-block) 0 0;box-shadow:0 -12px 32px rgba(14, 42, 47, 0.14);
  padding:26px 32px 34px;transition:transform .3s ease;overflow:auto;
  top:118px;max-height:none} /* поднимается под нижнюю линию меню (высота шапки ~117px) */
.sheet-back.open .sheet{transform:translate(-50%,0)}
.sheet h3{margin:0 0 4px;font-size:19px;line-height:24px;font-weight:500}
.sheet-sub{margin:0 0 16px;font-size:13px;line-height:20px;color:var(--text-2);max-width:640px}
.sheet-x{position:absolute;top:16px;right:20px;font-size:24px;width:44px;height:44px;color:var(--text-2)}
.sheet-rows{display:grid;gap:2px}
.srow{display:grid;grid-template-columns:18px 220px 1fr auto;gap:12px;align-items:center;
  padding:10px 12px;border-radius:10px;font-size:15px}
.srow:hover{background:var(--pad)}
.sdot{width:10px;height:10px;border-radius:50%}
.srow .sn{font-weight:500}
.srow .st{color:var(--text-2);font-size:13px}
.srow .sc{color:var(--text-2);font-size:13px;font-variant-numeric:tabular-nums}
/* диалог подтверждения действия: центр экрана, фон как у bottom-sheet */
.dlg-back{display:flex;align-items:center;justify-content:center}
.dlg{background:var(--bg);border-radius:var(--radius-block);box-shadow:var(--shadow-float);
  padding:24px 26px 22px;max-width:460px;width:calc(100% - 48px)}
.dlg-t{font-size:17px;line-height:24px;font-weight:500;color:var(--text);margin-bottom:18px}
.dlg-a{display:flex;gap:10px;justify-content:flex-end}
.hdr-bell{position:relative;color:var(--text-2)}
/* попап уведомлений: цвета типов и фильтры */
.sdot.s-evt{background:var(--accent)}
.sdot.s-news{background:var(--text-2)}
.ntf-bar{display:flex;align-items:center;gap:6px;margin:2px 0 14px;flex-wrap:wrap}
.ntf-f{height:var(--h-ctl);padding:0 12px;border:1px solid var(--line);border-radius:var(--radius-block);background:var(--bg);
  font-size:var(--fs-s);color:var(--text);cursor:pointer}
.ntf-f:hover{background:var(--pad)}
.ntf-f.sel{border-color:var(--accent);color:var(--accent);font-weight:500}
.nrow{display:grid;grid-template-columns:18px 1fr auto 18px;gap:12px;align-items:center;
  padding:12px;border-radius:10px;font-size:15px;cursor:pointer}
.nrow:hover{background:var(--pad)}
.nrow .sn{font-weight:400}
.nrow.unread .sn{font-weight:500}
.nrow.unread{background:var(--pad)}
.nrow.unread:hover{background:var(--pad)}
.nrow .st{color:var(--text-2);font-size:13px;white-space:nowrap}
.nrow .ngo{color:var(--text-2);font-size:17px}
.hdr-bell .bdg{position:absolute;top:-2px;right:-4px;min-width:16px;height:16px;border-radius:8px;
  background:var(--bad);color:var(--bg);font-size:12px;line-height:16px;text-align:center;padding:0 4px;font-weight:500}
.avatar{width:36px;height:36px;border-radius:50%;background:var(--pad);
  color:var(--text);display:inline-flex;align-items:center;justify-content:center;font-weight:500;font-size:15px}
/* линия под меню — только на ширину 12-колоночной сетки (решение 48) */
.hdr-nav{display:flex;gap:26px;max-width:var(--grid-w);margin:0 auto;padding:0 24px;border-bottom:1px solid var(--line)}
.nitem{position:relative}
.hdr-nav a{position:relative;display:inline-flex;align-items:center;gap:5px;padding:10px 0 12px;color:var(--text);text-decoration:none;font-size:15px;white-space:nowrap}
.hdr-nav a:hover{color:var(--accent)}
.nitem>a.active{font-weight:500;color:var(--accent)}
.nitem>a.active::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px 2px 0 0;background:var(--accent)}
.hdr-nav a.stubbed{color:var(--text-2)}
.ncar{position:relative;width:12px;height:12px}
.ncar::after{content:"";position:absolute;left:50%;top:50%;width:6px;height:6px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:translate(-50%,-70%) rotate(45deg);transition:transform .15s}
/* подменю группы в стиле Ozon (решение 44): без обводки, крупная мягкая тень,
   просторные пункты, заголовок группы, активный пункт — синяя полоска слева */
.dd{display:none;position:absolute;left:-26px;top:100%;min-width:280px;background:var(--bg);
  border-radius:18px;box-shadow:0 14px 44px rgba(14, 42, 47,.14),0 2px 8px rgba(14, 42, 47,.06);
  padding:12px 0;z-index:120}
.nitem.has-dd:hover .dd{display:block}
.nitem.has-dd:hover .ncar::after{transform:translate(-50%,-30%) rotate(225deg)}
.dd a{display:block;padding:12px 26px;font-size:16px;line-height:22px;color:var(--text);border-left:3px solid transparent}
.dd a:hover{color:var(--accent)}
.dd a.sel{border-left-color:var(--accent);font-weight:500}
.dd a.stubbed{color:var(--text-2)}
.dd a.stubbed:hover{color:var(--accent)}

/* ⚠ Второго шрифта в системе НЕТ: Montserrat снят, вес 800 и трекинг сняты —
   в интерфейсе только 400/500/600 и нулевой трекинг (визуальная система 1.0). */
/* ⚠⚠ ЛОГОТИП — ИЗОБРАЖЕНИЕ (UI_RULES §4.1, Л-2; правка владельца 11.09.2026, п. 1).
   Прежде рядом со знаком стояла надпись «МАСШТАБ V2», набранная Golos 19/500.
   Надпись — это часть фирменного знака, и она берётся из SVG
   brand/lockup-h-ru-petrol.svg, а не набирается шрифтом интерфейса. «V2» снят:
   номер версии — служебная информация (Л-6, Л-9). Правила .logo с кеглем и
   .logo .v2 удалены вместе с набором. */
.logo{display:inline-flex;align-items:center;text-decoration:none}
.logo img{height:28px;width:auto;display:block}

/* заголовок страницы над таблицей — serif, как в примере */
.page-title{font-size:26px;font-weight:500;color:var(--text);line-height:30px;margin:18px 0 2px}

/* ── чипы и панель фильтров ───────────────────────────────────── */
/* Панель фильтров идёт СТРОГО в один ряд: перенос на второй ряд ломал сетку и
   прятал часть фильтров под виджеты. Не помещается — прокручивается по горизонтали,
   при этом первый и последний элементы не обрезаются, а фокус остаётся видимым. */
.chipbar{display:flex;align-items:center;gap:8px;padding:10px 16px;flex-wrap:nowrap;
  max-width:var(--grid-w);margin:0 auto;overflow-x:auto;overflow-y:visible;
  scroll-padding-inline:16px;scrollbar-width:thin}
.chipbar>*{flex:0 0 auto}
.chipbar .spacer{flex:1 1 auto;min-width:8px}
.chipbar::-webkit-scrollbar{height:6px}
.chipbar::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
.chip:focus-visible,.segbtn:focus-visible,.ibtn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.chip[aria-disabled="true"],.chip.disabled{opacity:.5;pointer-events:none}
.chip{position:relative;display:inline-flex;align-items:center;gap:6px;height:var(--h-ctl);
  padding:0 14px;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-block);
  font-size:var(--fs-s);color:var(--text);cursor:pointer;user-select:none;white-space:nowrap;}
.chip:hover{background:var(--pad);border-color:var(--pad)}
.chip .lbl{color:var(--text-2)}
.chip .val{font-weight:500}
/* контурная стрелка-«V» (решение 33): квадрат 16×16, шеврон линиями, не заливкой */
.chip .car{position:relative;width:16px;height:16px;flex-shrink:0}
.chip .car::after{content:"";position:absolute;left:50%;top:50%;width:7px;height:7px;
  border-right:1.5px solid var(--text-2);border-bottom:1.5px solid var(--text-2);
  transform:translate(-50%,-70%) rotate(45deg)}
.chip.open{border-color:var(--accent);background:var(--bg)}
/* Меню чипа теперь держит body-level POP (assets/app.js): позиция и тень —
   на оболочке `.pop`, поэтому здесь у `.menu` остаётся только внутренний вид.
   Селекторы `.chip .menu` сохранены для совместимости, если меню где-то ещё
   отрисовано внутри чипа. */
.menu-pop{padding:4px;min-width:150px}
.chip .menu,.menu-pop .menu{min-width:142px}
.chip .menu{display:none;position:absolute;top:calc(100% + 4px);left:0;
  background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-block);
  box-shadow:0 6px 20px rgba(14, 42, 47,.10);padding:4px;z-index:60}
.chip.open .menu{display:block}
.chip .menu button,.menu-pop .menu button{display:block;width:100%;text-align:left;border:0;background:none;
  padding:6px 10px;font-size:var(--fs-s);border-radius:6px;cursor:pointer;color:var(--text)}
.chip .menu button:hover,.menu-pop .menu button:hover{background:var(--pad)}
.chip .menu button.sel,.menu-pop .menu button.sel{font-weight:500;color:var(--accent)}
.menu-pop .menu button[disabled]{opacity:.45;cursor:default}
.menu-pop .menu button[disabled]:hover{background:none}
.searchbox{height:var(--h-ctl);border:1px solid var(--line);border-radius:var(--radius-block);padding:0 14px;
  font-size:var(--fs-s);width:230px;background:var(--bg);color:var(--text)}
.searchbox:focus{outline:none;border-color:var(--accent)}
.spacer{flex:1}

/* демо-переключатель состояний */
.demo-state{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-xs);color:var(--text-2)}
.demo-state select{height:var(--h-ctl);font-size:var(--fs-xs);border:1px solid var(--line);border-radius:var(--radius-block);color:var(--text-2);background:var(--bg);padding:0 14px}

/* ── шапка таблицы (.table-header-wrapper): в сетке 1280 (решение 31);
      текст слева, кнопки управления справа ── */
.table-header-wrapper{display:flex;justify-content:space-between;align-items:flex-start;
  margin-bottom:20px;gap:16px;flex-wrap:wrap}
.table-title{font-family:var(--font);font-size:26px;line-height:30px;font-weight:500;color:var(--text);margin:0 0 4px}
.table-caption{font-family:var(--font);font-size:13px;font-weight:400;line-height:20px;color:var(--text-2);max-width:650px;margin:0}
.table-header-wrapper .actions{display:flex;gap:8px;align-items:center;flex-shrink:0}
/* заголовок с действиями в .page-content (карточка артикула) */
.ath{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.ath .page-title{margin:0}
.ath .actions{margin-left:auto;display:flex;gap:8px;align-items:center}
/* таблица: горизонтальный скролл только внутри неё */
.tablecard{background:transparent;overflow-x:auto;border:0;border-radius:0}
.tablecard.no-x{overflow-x:visible} /* контент влезает → скролла нет → шапка липнет к окну */
table.grid{border-collapse:separate;border-spacing:0;width:100%;min-width:1180px}
/* контент ячейки всегда по верху — держит сетку контента (решение 61, все таблицы) */
.grid th,.grid td{border-bottom:1px solid var(--line);border-right:1px solid var(--line);padding:12px 16px;text-align:right;vertical-align:top;font-size:var(--fs-s)}
.grid th:last-child,.grid td:last-child{border-right:0}
.grid tbody td{font-size:15px;line-height:20px;font-weight:400;color:var(--text);font-variant-numeric:tabular-nums;background:var(--bg)}       /* числа — моно, как в код-карточке примера */
.grid thead th{background:var(--pad);font-family:var(--font);font-size:13px;line-height:18px;font-weight:400;color:var(--text-2);white-space:nowrap}
/* обе строки шапки липкие (решение 36, отменяет 35.4): названия групп видны
   при скролле — ярус подписей прилипает вплотную под ярусом названий */
.grid thead tr.h1 th{border-bottom:0;padding:12px 16px 2px;text-align:right;font-size:13px;
  position:sticky;top:0;z-index:30;height:32px;line-height:16px;box-sizing:border-box}
.grid thead tr.h2 th{position:sticky;top:31px;z-index:30;background:var(--pad)}
.grid thead tr.h1 th.name{left:0;z-index:35}
.grid thead tr.h2 th.name{left:0;z-index:35}
.grid thead tr.h1 th.sortable{cursor:pointer}
.grid thead tr.h1 th.sortable:hover{color:var(--accent)}
/* Заголовок доступен с клавиатуры, значит фокус обязан быть виден. `:focus-visible`,
   а не `:focus`: обводка нужна тому, кто идёт табом, и не нужна после щелчка мышью. */
.grid thead tr.h1 th.sortable:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.grid thead tr.h1 th .arr{font-size:9px;color:var(--accent)}
.grid thead tr.h2 th{padding:6px 16px 10px;font-weight:400;font-size:13px;color:var(--text-2);text-align:right;
  white-space:pre-line;line-height:1.5}                       /* подписи подколонок — столбиком, как в макете */
.grid th.name,.grid td.name{text-align:left;position:sticky;left:0;background:var(--bg);z-index:20;
  width:280px;min-width:280px;max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  padding-left:24px;border-right:1px solid var(--line);transition:box-shadow .15s}
.tablecard.h-scrolled th.name,.tablecard.h-scrolled td.name{
  box-shadow:8px 0 12px -8px rgba(14, 42, 47,.18)}
/* последняя колонка действий: sticky справа */
/* колонка действий: белый фон ТОЛЬКО у ячеек тела — в шапке всегда серый */
.grid th.rowact,.grid td.rowact{position:sticky;right:0;z-index:20;
  width:96px;min-width:96px;text-align:right;padding-right:24px;border-left:1px solid var(--line)}
.grid tbody td.rowact{background:var(--bg)}
.grid thead tr.h1 th.rowact,.grid thead tr.h2 th.rowact{background:var(--pad)}
.iconbtn{display:inline-flex;align-items:center;justify-content:center;width:var(--h-ctl);height:var(--h-ctl);
  border:0;border-radius:var(--radius-block);background:transparent;color:var(--text-2);cursor:pointer;font-size:15px;text-decoration:none}
.iconbtn:hover{background-image:linear-gradient(var(--hover),var(--hover));color:var(--text)}
/* Кнопка в строке таблицы (карточка артикула) — элемент строки, исключение Л-3:
   32 × 32, скругление 8, одинаково на всех ширинах (Л-8). Этап 2 сделал её кругом 44,
   на телефоне она распёрла колонку 38 до 46, таблица стала шире экрана, и
   мобильное overflow-x:hidden срезало кнопку (аудит R14, замер Chrome 11.09). */
.grid td .iconbtn{width:32px;height:32px;border-radius:var(--radius-s)}
.grid th.ctr,.grid td.ctr{text-align:center}
.grid thead tr.h1 th.name,.grid thead tr.h2 th.name{text-align:left}
.grid thead tr.h1 th.ctr,.grid thead tr.h2 th.ctr{text-align:center}
.grid thead th.name{background:var(--pad)}
.grid tbody tr:hover td{background:var(--pad)}
.grid tbody tr:hover td.name{background:var(--pad)}
.grid tbody tr.expandable{cursor:pointer}
.art{display:block;font-size:15px;line-height:20px;font-weight:500;color:var(--text)}
.art a{color:inherit;text-decoration:none}
.art a:hover{color:var(--accent)}
.grid td.name{padding-right:30px} /* position задаёт sticky-правило выше; relative его перебивал и колонка не липла */
.namecell{display:flex;align-items:center;gap:10px}
/* Двухстрочная ячейка: значение и подпись под ним (UI_RULES §4.8, этап 7а).
   Жила копией на заявках, в справочнике и на производстве; на производстве
   разметки с этим классом нет вовсе — мёртвые правила сняты, не перенесены. */
.two{display:flex;flex-direction:column;gap:1px}
.two .s{font-size:12px;line-height:16px;color:var(--text-2)}
.namecell .txt{flex:1;min-width:0}
.ph{width:36px;height:48px;border-radius:6px;flex-shrink:0;display:flex;align-items:center;
  justify-content:center;font-size:15px;font-weight:500;color:var(--text-2);
  background:var(--pad);   /* плитка 3:4 под снимок: подложка, а не своя краска */
  position:relative;overflow:hidden}
/* Настоящий снимок закрывает плитку целиком. `object-fit:cover` — чтобы кадр не
   искажался: растянутый товар выглядит другим товаром. */
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.exp{position:absolute;right:10px;top:50%;width:16px;height:16px;
  transform:translateY(-50%);transition:transform .15s}
.exp::after{content:"";position:absolute;left:50%;top:50%;width:7px;height:7px;
  border-right:1.5px solid var(--text-2);border-bottom:1.5px solid var(--text-2);
  transform:translate(-50%,-70%) rotate(45deg)}
tr.open .exp{transform:translateY(-50%) rotate(180deg)}
.nm{display:block;font-size:13px;line-height:16px;color:var(--text-2);max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* мультизначения в ячейке: СТОЛБИКОМ, не в строку — контент не смешивается на одной строке */
.sub{display:grid;grid-auto-flow:row;gap:2px;justify-items:end}
.sub b{font-weight:500}
.sub .u{color:var(--text-2);font-size:var(--fs-xs)}

/* дельты — diff-цвета */
.d{font-size:var(--fs-xs);margin-right:4px}
.d.up{color:var(--ok)} .d.down{color:var(--bad)} .d.flat{color:var(--text-2)}

/* бейджи */
.abc{display:inline-block;min-width:22px;text-align:center;border-radius:8px;font-weight:500;font-size:var(--fs-xs);padding:2px 6px}
.abc.A{background:var(--ok-tint);color:var(--ok)}.abc.B{background:var(--pad);color:var(--text-2)}.abc.C{background:var(--bad-tint);color:var(--bad)}
.badge{display:inline-block;border-radius:8px;font-size:var(--fs-xs);padding:2px 8px;font-weight:500}
/* ⚠⚠ ТРИ УРОВНЯ СОСТОЯНИЯ (UI_RULES §2.1, ответ владельца 8.5 от 11.09.2026).
   Норма — --pad / --text-2; внимание — --accent-tint / --accent; критично —
   --bad-tint / --bad. Жёлтого нет. Прежде «внимание» стояло на сером и читалось
   как выключенное, а нормальные «Стабильный» и «принята» — на акценте и зелёном.
   Теперь акцент означает внимание, и нормальному состоянию на нём не место. */
.badge.unknown{background:var(--accent-tint);color:var(--accent);cursor:help}
.badge.warn{background:var(--accent-tint);color:var(--accent)}
.badge.ok{background:var(--pad);color:var(--text-2)}
/* ликвидность площадки (классификатор дней покрытия Ozon) */
.badge.lq-deficit{background:var(--bad-tint);color:var(--bad)}
.badge.lq-popular{background:var(--pad);color:var(--text-2)}
.badge.lq-actual{background:var(--pad);color:var(--text-2)}
.badge.lq-surplus{background:var(--accent-tint);color:var(--accent)}
/* таймлайн статусов поставки в раскрытии строки */
.tl{display:flex;align-items:center;gap:0;padding:4px 0 10px;flex-wrap:wrap}
.tl .tstep{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--text-2);white-space:nowrap}
.tl .tstep::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--line)}
.tl .tstep.done{color:var(--text)}
.tl .tstep.done::before{background:var(--ok)}
.tl .tstep.cur{color:var(--text);font-weight:500}
.tl .tstep.cur::before{background:var(--accent)}
.tl .tline{width:34px;height:2px;background:var(--line);margin:0 10px}
.tl .tline.done{background:var(--ok)}

/* ── раскрытие строки ─────────────────────────────────────────── */
tr.detail>td{background:transparent;padding:0;border-bottom:0}
.detail-anim{max-height:0;opacity:0;overflow:hidden;
  transition:max-height .3s ease-in-out,opacity .3s ease;
  background:var(--pad);border-left:3px solid var(--accent-tint)}
.detail-anim.is-expanded{max-height:320px;opacity:1;overflow:auto;border-bottom:1px solid var(--line)}
.detail-anim .detail{padding:12px 24px}
.detail h4{margin:0 0 8px;font-size:17px;line-height:24px;font-weight:500;color:var(--text)}
.actrow{display:flex;align-items:center;gap:18px;padding:7px 4px;border-bottom:1px solid var(--line);font-size:13px;flex-wrap:wrap}
.actrow:last-child{border-bottom:0}
.actrow .an{min-width:210px;font-weight:500}
.actrow .an .nm{max-width:none}
.actrow .kv2{display:inline-flex;flex-direction:column;align-items:flex-end;min-width:72px}
.actrow .kv2 .k{font-size:var(--fs-xs);color:var(--text-2);white-space:nowrap}
.actrow .kv2 .v{font-size:15px;line-height:20px;font-variant-numeric:tabular-nums}
.actrow .btn{margin-left:auto}
/* кнопки по ролям Ozon Seller: primary — синяя заливка; secondary — светло-голубая
   заливка с синим текстом; ghost — светло-серая заливка без обводки */
/* ⚠⚠ КАНОН КНОПКИ (UI_RULES §4.4, правка владельца 11.09.2026, п. 4 и ответ 8.2).
   Высота 44, скругление 22. Главное действие — заливка --text, текст --bg,
   ОДИН вид на десктопе и телефоне: прежде главная кнопка была акцентной на
   десктопе и тёмной в мобильной панели — два вида одного элемента (Л-8).
   Акцент кнопки не заливает: он для ссылок, сортировки, фокуса и графиков.
   Наведение — НАЛОЖЕНИЕ прозрачности поверх фона, а не замена фона: иначе серая
   кнопка при наведении светлела бы. И не тень — у поверхностей теней нет (Л-4). */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:var(--h-ctl);padding:0 20px;
  border-radius:var(--radius-block);border:0;background:var(--pad);color:var(--text);
  font:inherit;font-size:var(--fs-s);font-weight:500;cursor:pointer;white-space:nowrap}
.btn:hover{background-image:linear-gradient(var(--hover),var(--hover))}
.btn:active{background-image:linear-gradient(var(--pressed),var(--pressed))}
.btn.primary{background:var(--text);color:var(--bg)}
.btn.primary:hover{background-image:linear-gradient(rgba(255,255,255,.10),rgba(255,255,255,.10))}
.btn.ghost{background:transparent;color:var(--text-2)}
.btn.ghost:hover{background-image:linear-gradient(var(--hover),var(--hover));color:var(--text)}
.btn:disabled{opacity:var(--disabled-opacity);cursor:not-allowed}
.btn.in-action{background:var(--ok-tint);color:var(--ok);cursor:default}

/* ══ БЛОК РАСКРЫТИЯ СТРОКИ — ОДИН НА ВСЮ СИСТЕМУ (UI_RULES §7 этап 3; ответ владельца
   8.6 Б от 11.09.2026: раскрытие остаётся, но одним компонентом) ═══════════════
   ⚠⚠ ОСНОВАНИЕ. Прежде блок жил в трёх копиях под тремя именами — .sxp (стили в
   sales.html), .axp (заявки), .cxp (каталог). Разметку .sxp рисуют ещё P&L и
   производство, а стилей .sxp у них не было: замер 11.09 на 1440 — там раскрытый
   блок стоял display:block в одну колонку, без фона, скругления и полей, то есть
   голым текстом. У заявок блок был на прозрачном фоне с обводкой --pad, невидимой
   на белом. Ровно следствие того, что стиль жил в чужом файле (Л-7).
   Теперь компонент один и объявлен здесь; страницы только ставят класс.
   Блок — поверхность: подложка --pad, скругление 22, без обводки и тени (Л-4). */
.xp{text-align:left;position:sticky;left:0;max-width:100%;box-sizing:border-box}
.xp-in{max-width:var(--grid-w);margin:0 auto;padding:0 16px;
  display:grid;grid-template-columns:repeat(12,1fr);gap:12px}
.xp .b{background:var(--pad);border:0;border-radius:var(--radius-block);padding:12px 14px;min-width:0}
.xp .c12{grid-column:span 12}
.xp .c6{grid-column:span 6}
.xp .c4{grid-column:span 4}
.xp .c3{grid-column:span 3}
.xp h5{margin:0 0 6px;font-size:13px;line-height:18px;font-weight:400;color:var(--text-2);
  letter-spacing:0;display:flex;align-items:center;gap:6px}
.xp .it{display:grid;grid-template-columns:1fr auto;gap:1px 12px;padding:7px 0;
  border-bottom:1px solid var(--line);align-items:baseline}
.xp .it:first-of-type{padding-top:0}
.xp .it:last-child{border-bottom:0;padding-bottom:0}
.xp .it .n{font-weight:500;font-size:14px;line-height:20px;color:var(--text);min-width:0;overflow-wrap:anywhere}
.xp .it .m{font-size:12px;line-height:16px;color:var(--text-2);grid-column:1}
.xp .it .s{font-size:13px;line-height:18px;color:var(--text-2);white-space:nowrap;text-align:right}
.xp .it .s.warn{color:var(--accent);font-weight:500}
.xp .it .mps{grid-column:1;white-space:normal;display:flex;flex-wrap:wrap;gap:2px 12px;
  margin-top:3px;font-size:13px;line-height:18px;color:var(--text-2)}
.xp .mp1{white-space:nowrap}
.xp .mpn{color:var(--text-2)}
.xp .none,.xp .wrn{font-size:13px;line-height:18px;color:var(--text-2)}
.xp .kv{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;margin:0;font-size:13px;line-height:18px}
.xp .kv dt{color:var(--text-2)}
.xp .kv dd{margin:0;color:var(--text);overflow-wrap:anywhere}
.xp .grid12{display:grid;grid-template-columns:repeat(12,1fr);gap:10px}
.xp .g{grid-column:span 3;min-width:0;padding-left:10px;border-left:1px solid var(--line)}
.xp .g .k{font-size:12px;line-height:16px;color:var(--text-2)}
.xp .g .v{font-size:17px;line-height:24px;font-weight:500;color:var(--text);
  font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.xp .g .v.dash{font-size:15px;color:var(--text-2)}
.xp .g .v2{font-size:13px;line-height:18px;color:var(--text-2);font-variant-numeric:tabular-nums}
.xp .g .h{font-size:12px;line-height:16px;color:var(--text-2)}
.xp .g .skel{display:block;height:20px;margin-top:4px}
.xp .vc{white-space:nowrap}
.xp .part{border-bottom:1px dotted var(--line)}
@media (max-width:760px){
  .xp{position:static;width:auto;max-width:100%;overflow-x:hidden}
  .xp-in{grid-template-columns:1fr;padding:0 12px}
  .xp .c12,.xp .c6,.xp .c4,.xp .c3{grid-column:span 1}
  .xp .grid12{grid-template-columns:1fr;gap:8px}
  .xp .g{grid-column:span 1}
  .grid tr.detail td,.xp,.xp *{white-space:normal}
  .xp .it .s{white-space:nowrap}
}

/* ══ КАРТОЧКА ЗАДАЧИ, ТРЕК, ХРОНОЛОГИЯ, ПАРЫ «КЛЮЧ — ЗНАЧЕНИЕ», ЭТИКЕТКА — ОДИН КОМПОНЕНТ
   (UI_RULES §7 этап 4, Л-7) ═══════════════════════════════════════════════════
   ⚠⚠ ОСНОВАНИЕ. Эти правила жили копией на двух страницах поставок —
   «Сборка и отгрузка» (supply-operations) и «Управление поставками»
   (supply-planning). Замер 11.09 с учётом @media: 26 правил совпадали буква в
   букву, одно расходилось (.tl2 .e — средняя колонка хронологии 150 против 92),
   три были только на одной странице. Правка одной копии не доходила до другой.
   Теперь компонент один и объявлен здесь; расходящаяся колонка — модификатор
   .tl2-narrow, а не страничное переопределение общего класса.
   ⚠ Этикетка грузового места — .shiplbl, а не .lbl: .lbl — подпись чипа (.chip .lbl),
   её рисует оболочка на каждом экране. Перенесённая под старым именем, этикетка
   обвела пунктиром подписи чипов на каталоге, Sales и заявках (замер в Chrome 11.09);
   на экранах поставок столкновение жило и раньше. */
.xsec{margin-bottom:14px}
.xsec > h4{margin:0 0 8px;font-size:15px;font-weight:500;color:var(--text)}
/* Текстовая колонка: заголовок и содержимое по одному левому краю. Класс уже стоял
   в разметке, но правила у него не было — заголовок оставался правым над левым текстом. */
.grid th.lft,.grid td.lft{text-align:left}
.grid td.lft .sub{justify-items:start}
.xkv{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:2px 24px;font-size:14px}
.xkv .r{display:flex;justify-content:space-between;gap:12px;padding:5px 0;border-bottom:1px solid var(--pad)}
.xkv .r .k{color:var(--text-2)}
.xkv .r .v{text-align:right;font-variant-numeric:tabular-nums}
.trk{display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:8px;margin:2px 0 4px}
.trk .t{border:1px solid var(--line);border-radius:var(--radius-block);padding:7px 10px;background:var(--bg);}
.trk .t.on{border-color:var(--accent)}
.trk .t .n{font-size:12px;color:var(--text-2);margin-bottom:3px}
.trk .t .v{font-size:13px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.trk .t .c{font-size:12px;color:var(--text-2);margin-top:3px;line-height:16px}
.taskcard{border:1px solid var(--line);border-radius:var(--radius-block);padding:10px 12px;margin-bottom:10px;background:var(--bg);}
.taskcard .th{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.tl2{display:grid;gap:0;font-size:14px}
.tl2 .e{display:grid;grid-template-columns:112px 150px 1fr;gap:12px;padding:6px 0;border-bottom:1px solid var(--pad);align-items:baseline}
.tl2.tl2-narrow .e{grid-template-columns:112px 92px 1fr}
.tl2 .e:last-child{border-bottom:0}
.tl2 .e .at{color:var(--text-2);font-size:13px;font-variant-numeric:tabular-nums}
.shiplbl{display:inline-flex;flex-direction:column;gap:2px;border:2px dashed var(--line);border-radius:8px;padding:6px 10px;font-size:12px;color:var(--text-2)}
.shiplbl .bc{font-family:var(--font),monospace;letter-spacing:2px;font-size:15px;color:var(--text)}
.shiplbl .add{color:var(--text);font-weight:500}
.xback{margin-bottom:10px}
.tl2 .e .kd{font-size:12px}
.taskcard.done{border-color:var(--ok)}
.taskcard .how{font-size:14px;color:var(--text-2);margin:6px 0}
@media (max-width:900px){
  .xkv{grid-template-columns:1fr}
  .tl2 .e,.tl2.tl2-narrow .e{grid-template-columns:1fr;gap:2px}
}

/* ── вкладки версий (плановый юнит) ───────────────────────────── */
.vertabs{display:flex;align-items:center;gap:8px;padding:6px 0;flex-wrap:wrap}
.vertab{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 16px;border:1px solid var(--line);
  border-radius:var(--radius-block);background:var(--bg);color:var(--text);cursor:pointer;font-size:var(--fs-s)}
.vertab:hover{border-color:var(--line)}
.vertab.active{border-color:var(--accent);font-weight:500}
.vertab .close{color:var(--text-2);font-size:11px;padding:0 2px}
.vertab .close:hover{color:var(--bad)}
.vertabs .btn{margin-left:8px;margin-bottom:4px}
.dirty-dot{width:7px;height:7px;border-radius:50%;background:var(--text-2);display:inline-block}

/* редактируемые поля */
td .edit{width:86px;border:1px solid transparent;border-radius:var(--radius-s);padding:2px 6px;font:15px/20px var(--font);font-variant-numeric:tabular-nums;text-align:right;background:transparent;color:var(--text)}
tr:hover td .edit{border-color:var(--line);background:var(--bg)}
td .edit:focus{outline:none;border-color:var(--accent);background:var(--bg)}
td .edit.changed{background:var(--pad);border-color:var(--text-2)}

/* мультистрока цен по МП */
.pricecol div{white-space:nowrap}
.pricecol .other{color:var(--text-2);font-size:13px;line-height:16px;font-variant-numeric:tabular-nums}
.pricecol .cur{font-weight:500;font-variant-numeric:tabular-nums}

/* ── состояния страницы ───────────────────────────────────────── */
.state-wrap{padding:60px 20px;text-align:center;color:var(--text-2)}
.state-wrap .big{margin-bottom:10px;color:var(--text-2)}
.state-wrap .ttl{font-size:18px;font-weight:500;margin-bottom:6px;color:var(--text)}
.skel{background:linear-gradient(90deg,var(--line) 25%,var(--pad) 40%,var(--line) 55%);background-size:400% 100%;
  animation:sk 1.2s infinite linear;border-radius:6px;height:14px}
@keyframes sk{0%{background-position:100% 0}100%{background-position:0 0}}
/* скелетон повторяет блоки страницы: та же таблица .grid, те же ширины колонок */
.grid th .skel,.grid td .skel{display:inline-block;height:12px;vertical-align:middle}
.namecell .txt .skel{display:block;margin:4px 0}
.ph.skel{height:48px;background:linear-gradient(90deg,var(--line) 25%,var(--pad) 40%,var(--line) 55%);
  background-size:400% 100%;animation:sk 1.2s infinite linear}
.es .skel{display:block}
.es .skel+.skel{margin-top:10px}
.es-bar.skel{margin-top:14px}
.vertabs .skel{display:inline-block}

/* карточки-блоки (карточка артикула, Главная) */
/* обводка блоков — как у финвиджета «Продаж» (эталон, решение 65) */
.block{background:var(--bg);border:3px solid var(--pad);border-radius:var(--radius-block);padding:14px 16px}
.block h3{margin:0 0 10px;font-size:17px;line-height:24px;font-weight:500;color:var(--text)}
.block h3 a{color:inherit;text-decoration:none}
.block h3 a:hover{color:var(--accent)}
.kv{display:grid;grid-template-columns:1fr auto;gap:4px 16px;font-size:15px;line-height:20px}
.kv .k{color:var(--text-2)}
.kv .v{font-variant-numeric:tabular-nums;text-align:right}
/* Главная: ряд 2/3 + 1/3, ниже блоки по половине */
.homegrid{display:grid;grid-template-columns:repeat(12,1fr);gap:14px;max-width:var(--grid-w);margin:0 auto;padding:0 24px 40px}
/* span12 уже использовался разметкой, но правила у него не было: блок быстрых ссылок
   падал в одну колонку из двенадцати и схлопывался до ~90 px. */
.homegrid .span12{grid-column:span 12}
.homegrid .span8{grid-column:span 8}
.homegrid .span4{grid-column:span 4}
.homegrid .span6{grid-column:span 6}
@media (max-width:900px){.homegrid .span8,.homegrid .span4,.homegrid .span6{grid-column:span 12}}
/* график заказов в стиле виджета V1 (решение 67): столбик дня — «заказано»
   светлым, «выкуплено» заливкой внутри; клик выбирает день; рубли/штуки */
.ow-top{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.ow-top h3{margin:0}
.ow-sw{margin-left:auto;display:flex;gap:6px}
.ow-b{height:var(--h-ctl);padding:0 14px;border:1px solid var(--line);border-radius:var(--radius-block);background:var(--bg);font-size:var(--fs-s);color:var(--text);cursor:pointer}
.ow-b.on{border-color:var(--accent);color:var(--accent);font-weight:500}
.ow-nums{display:flex;gap:34px;margin:12px 0 2px;flex-wrap:wrap}
.ow-nums .t{font-size:13px;color:var(--text-2);display:flex;align-items:center;gap:7px;margin-bottom:2px}
.ow-dot{width:10px;height:10px;border-radius:3px;background:var(--accent-tint);display:inline-block}
.ow-dot.b{background:var(--accent)}
.ow-sum{font-size:13px;color:var(--text-2);margin-left:6px;font-weight:400}
/* доли площадок: полоса из четырёх сегментов цветами МП */
.ow-mpbar{display:flex;height:6px;border-radius:3px;overflow:hidden;margin:10px 0 6px}
.ow-mpbar i{display:block;height:100%}
.ow-mplab{display:flex;gap:16px;font-size:13px;color:var(--text-2);flex-wrap:wrap}
.ow-mplab b{font-weight:500}
.ow-bars{display:flex;align-items:flex-end;gap:4px;height:150px;margin-top:14px}
.ow-col{flex:1;position:relative;height:100%;cursor:pointer;display:flex;align-items:flex-end;justify-content:center}
.ow-o{position:relative;width:66%;background:var(--accent-tint);border-radius:4px 4px 0 0;min-height:4px}
.ow-bfill{position:absolute;bottom:0;left:0;width:100%;background:var(--accent)}
.ow-col:hover .ow-o{background:var(--accent-tint)}
.ow-col.sel .ow-o{outline:2px solid var(--accent);outline-offset:1px}
.ch-leg{display:flex;gap:26px;margin:12px 0 0;font-size:13px;color:var(--text-2);flex-wrap:wrap}
.ch-leg .sw{display:inline-block;width:16px;height:3px;border-radius:2px;background:var(--accent);vertical-align:middle;margin-right:7px}
.ch-leg .sw.lt{background:var(--accent-tint)}
.ch-sum{display:flex;border-top:1px solid var(--pad);margin-top:14px}
.ch-sum>div{flex:1;padding:14px 0 2px;min-width:0}
.ch-sum>div+div{border-left:1px solid var(--pad);padding-left:22px}
.ch-sum .t{font-size:13px;color:var(--text-2);margin-bottom:4px}
.xdays{display:flex;gap:4px;margin-top:4px}
/* Замер 390 px: у столбца .ow-col содержимого нет, и он сжимался свободно, а подпись
   упиралась в собственный min-width:auto и сжаться не могла. Ряд подписей требовал 411 px
   в дорожке 304 px, поэтому подписи уезжали вправо тем сильнее, чем правее столбец:
   от 3 px до 105 px. Под крайним столбцом 19 августа стояло «12». Число под столбцом
   было неверным — это не переполнение, а неверная подпись, и лечится сжатием, а не
   обрезкой: .xdays{overflow:hidden} убирает вылет и оставляет «12». */
.xdays span{flex:1;min-width:0;text-align:center;font-size:11px;line-height:14px;color:var(--text-2)}
.xdays i{display:block;font-style:normal;color:var(--text-2);min-height:14px}
.ord-v{font-size:28px;line-height:34px;font-weight:600;font-variant-numeric:tabular-nums}
.ord-v .u2{font-size:15px;font-weight:400;color:var(--text-2)}
/* ряды «показатель — значение» с тонкими делителями, как в статкарточках Ozon */
.kvl{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:10px 0;border-bottom:1px solid var(--pad);font-size:15px;line-height:20px}
.kvl:last-child{border-bottom:0;padding-bottom:2px}
.kvl .k{color:var(--text-2)}
.kvl .v{font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
/* ⚠ white-space:nowrap у значения СОХРАНЁН намеренно. Разряды здесь разделены по-разному:
   «1 877 700 руб.» — неразрывными пробелами, а «1 585 000 из 3 000 000 руб.» — обычными.
   Разреши перенос ВНУТРИ значения — и это число разорвётся посередине («1 585» / «000 из…»),
   то есть деньги будут показаны неверно. Поэтому переносится САМА СТРОКА: подпись остаётся
   сверху, значение целиком уходит на свою строку и прижимается вправо.
   Порог 1000 px, а не «всегда»: замером на исходной версии страница вылезала на 940–980 px
   (18, 11 и 5 px — строка не помещалась в колонку из двух) и ниже 900 px, а с 1000 px и шире
   вылета не было. Глобальный flex-wrap переносил бы «Овердрафт свободно» и на 1440 px,
   где исходная раскладка была в порядке, — это была бы регрессия. */
@media (max-width:1000px){
  .kvl{flex-wrap:wrap}
  .kvl .v{margin-left:auto}
}
/* полоса быстрых переходов: сегменты с иконкой и стрелкой */
.qlinks{display:flex;padding:0;overflow:hidden}
.qlinks a{flex:1;display:flex;align-items:center;gap:10px;padding:16px 20px;color:var(--text);text-decoration:none;font-size:15px;font-weight:500;min-width:0}
.qlinks a:hover{background:var(--pad)}
.qlinks a+a{border-left:1px solid var(--pad)}
.qlinks svg{flex-shrink:0;color:var(--text-2)}
.qlinks .go{margin-left:auto;color:var(--text-2);font-size:17px}
/* серые секции Главной с заголовком и сеткой карточек */
.home-sect{background:var(--pad);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:20px 0 26px;margin-top:22px}
.home-sect+.home-sect{margin-top:0;border-top:0}
.hs-in{max-width:var(--grid-w);margin:0 auto;padding:0 24px}
.hs-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.hs-head h2{margin:0;font-size:19px;line-height:24px;font-weight:500;color:var(--text)}
.hs-head .btn{margin-left:auto}
.hs-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}
/* 1fr это minmax(auto,1fr): авто-минимум поднимал единственную дорожку до 401 px
   в контейнере 342 px, и страница ехала вбок. Нужен нулевой минимум. */
@media (max-width:900px){.hs-grid{grid-template-columns:minmax(0,1fr)}}
/* подножие */
footer{max-width:var(--grid-w);margin:28px auto 0;padding:16px 24px 26px;color:var(--text-2);font-size:13px;line-height:20px;border-top:1px solid var(--line)}
footer a{color:var(--text-2)}

/* stub */
.stub-card{max-width:520px;margin:70px auto;background:var(--bg);border:3px solid var(--pad);border-radius:var(--radius-block);padding:28px;text-align:center}

@media (max-width:900px){ /* мобильная версия вторична */
  .chipbar{padding:10px 0}
  .searchbox{width:130px}
}


/* ── общие компоненты V2 (V2-FE-SALES-0001) ─────────────────────────────────
   Сегментный переключатель повторяет приём страницы «Остатки»: одна рамка и фон,
   сегменты внутри, активный — белой плашкой. */
/* ── ЧИП-ПЕРЕКЛЮЧАТЕЛЬ · ЕДИНЫЙ НА ВСЮ СИСТЕМУ ────────────────────────────
   Вариант «Б», выбранный Игорем 09.09.2026: серое ложе обнимает всю группу,
   выбранный пункт — белый с тенью в 1 px. Границы переключателя видны всегда,
   в том числе когда выбран крайний пункт, — этим он и отличается от варианта,
   где подложка появляется только под выбранным.

   ⚠ Объявлен ОДИН РАЗ и вне мобильного блока: до этого переключателей было
   три вида — сегменты в рамке на десктопе, свой набор на странице остатков и
   таблетка в окне периода. Разные скругления, высоты и цвет выбранного жили
   в трёх местах, и «единый стиль» держался бы на памяти. Мобильные и
   постраничные переопределения ниже сняты, чтобы вид задавался здесь.

   Высота ложа = 38 + 3 + 3 = 44 = --chip-h: переключатель стоит в одном ряду
   с чипами отбора и обязан быть с ними одного роста. */
.seg{display:inline-flex;align-self:flex-start;align-items:center;gap:2px;
  background:var(--pad);border:0;border-radius:var(--radius-block);padding:3px;
  max-width:100%;box-sizing:border-box}
/* ⚠ Сегмент внутри ложа — 38, а не 44: ложе 3 + 38 + 3 и есть требуемые 44.
   Скругление у него ТАБЛЕТКА, а не 22: правило владельца связывает 22 именно с
   высотой 44, и 22 на высоте 38 дало бы плоские торцы. При 38 таблетка равна
   19 — тот же полный круг, просто для своей высоты. */
.segbtn{border:1px solid transparent;background:transparent;font:inherit;font-size:var(--fs-s);font-weight:500;
  height:38px;padding:0 15px;border-radius:999px;color:var(--text-2);
  white-space:nowrap;cursor:pointer}
.segbtn:hover{color:var(--text)}
/* Тумблер раздела .tgl — орган управления 44 / 22 (UI_RULES §4.4а, этап 7а).
   Жил копией на остатках и в планировании поставок и уже разошёлся: там
   font:inherit и кольцо фокуса, тут font-size:13px и без кольца. Канон —
   полный вариант; кольцо фокуса нужно всем, а не одной странице. */
.tgl{height:var(--h-ctl);padding:0 14px;font:inherit;background:var(--bg);color:var(--text);
  border:1px solid var(--line);border-radius:var(--radius-block);cursor:pointer}
.tgl:hover{background:var(--pad)}
.tgl.on{border-color:var(--accent);color:var(--accent);font-weight:500;background:var(--pad)}
.tgl:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.segbtn.on{background:var(--bg);color:var(--text);border-color:var(--line)}

/* Информация о показателе не занимает рабочую поверхность: она за иконкой. */
.ibtn{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--line);background:none;
  color:var(--text-2);font-size:11px;line-height:1;cursor:pointer;padding:0;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center}
.ibtn:hover{border-color:var(--text-2);color:var(--text-2)}
.ipop{position:fixed;z-index:70;max-width:420px;background:var(--bg);border:1px solid var(--line);
  border-radius:var(--radius-block);box-shadow:var(--shadow-float);padding:14px 16px;
  font-size:13px;line-height:19px;color:var(--text)}
.ipop h5{margin:0 0 6px;font-size:14px;line-height:20px;font-weight:500}
.ipop dl{display:grid;grid-template-columns:auto 1fr;gap:2px 14px;margin:0}
.ipop dt{color:var(--text-2)}
.ipop dd{margin:0;overflow-wrap:anywhere}
.ipop .cls{position:absolute;top:6px;right:8px;border:0;background:none;color:var(--text-2);
  font-size:16px;cursor:pointer;line-height:1}

/* Всплывающая панель и список с флажками: ими пользуется общий чип
   множественного выбора, поэтому стили общие, а не страничные. */
.pop{position:fixed;z-index:70;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-block);
  box-shadow:0 16px 40px rgba(14, 42, 47,.18);padding:14px}
.pop h5{margin:0 0 10px;font-size:14px;line-height:20px;font-weight:500;color:var(--text-2)}
.pop .foot{display:flex;gap:8px;justify-content:flex-end;margin-top:12px;padding-top:10px;
  border-top:1px solid var(--pad);align-items:center}
.pop .sel{margin-right:auto;font-size:13px;color:var(--text-2)}
.mpick{display:grid;gap:2px;min-width:220px}
.mpick label{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:8px;
  font-size:14px;cursor:pointer}
.mpick label:hover{background:var(--pad)}
.mpick input{width:16px;height:16px;accent-color:var(--accent)}
.mpick .div{height:1px;background:var(--pad);margin:4px 0}

/* ── Система KPI-виджетов V2 ───────────────────────────────────────────────
   Один контракт на все страницы с KPI. Раньше вид задавался вёрсткой страницы
   плюс модификатором-исключением только для продаж; исключение снято, левое
   выравнивание перенесено сюда, в основу, и действует на всех страницах.

   Ширина карточек. Было: на десктопе сетка repeat(5,1fr), а ниже 900 px — лента
   с карточками во всю ширину (flex:0 0 78%). Замер: на 768 px карточка выходила
   574 px, то есть 75% экрана — «растянута почти на всю страницу». Стало: полоса
   всегда один ряд одинаковых карточек, и она прокручивается сама, если им тесно;
   страница вбок не едет.
   Нижняя граница 240 px взята замером, а не на глаз: самое широкое главное
   значение («2 354 670 руб.») занимает 200 px, плюс отступы 32 и рамки 4 — это
   236 px, плюс запас. Она же равна ширине карточки на широком экране
   ((1280 − 32 − 4×12) ÷ 5 = 240), поэтому на 1280+ геометрия не изменилась.
   Верхняя граница держит карточку от растягивания, если контейнер станет шире. */
/* ── Табличные цифры ───────────────────────────────────────────────────
   У Golos Text цифры по умолчанию РАЗНОЙ ширины: колонка чисел выглядит
   рваной, а при обновлении данных прыгает. Свойство наследуется, поэтому
   вешаем его на КОНТЕЙНЕР, а не на ячейки: иначе каждая новая ячейка,
   добавленная позже, молча выпадет из правила. Одного font-variant-numeric
   мало — часть сборок Chrome применяет табличные цифры только по явному
   включению функции OpenType, отсюда вторая строка.
   На бегущий текст и заголовки не вешаем — только таблицы и показатели. */
.grid, .grid7, .kpis, .kpi, .es-v, .ord-v{
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1}

.kpis{display:grid;grid-auto-flow:column;
  grid-auto-columns:clamp(240px,calc((100% - 48px) / 5),280px);
  gap:12px;max-width:var(--grid-w);margin:0 auto;padding:0 16px 6px;
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 16px;scrollbar-width:thin}
.kpis::-webkit-scrollbar{height:4px}
.kpis::-webkit-scrollbar-thumb{background:var(--line);border-radius:2px}
.kpis .kpi{scroll-snap-align:start}
/* Содержимое выровнено по левому краю целиком — название, значение, вторичная
   величина, сравнения и динамика. Решение владельца принято на «Аналитике
   продаж» и обобщено на все страницы с KPI. */
.kpi{background:var(--pad);border:0;border-radius:var(--radius-block);padding:14px 16px;
  min-width:0;display:flex;flex-direction:column;gap:2px;align-items:flex-start;text-align:left;
  /* Карточка объявлена контейнером запроса: кегль главного числа считается от
     ШИРИНЫ САМОЙ КАРТОЧКИ, а не от ширины экрана. Ширину карточке задаёт сетка
     `.kpis`, поэтому размер контейнера не зависит от его содержимого и
     containment безопасен. */
  container-type:inline-size}
.kpi .t{display:flex;align-items:center;gap:6px;font-size:13px;line-height:18px;color:var(--text-2);
  justify-content:flex-start}
/* Главное значение виджета — 27 / 32 / 600, ФИКСИРОВАНО на телефоне и десктопе
   (UI_RULES §3 и §4.7, правка владельца 11.09.2026, п. 6). Не влезает — сокращается
   ЗАПИСЬ всего ряда (kpiFill → kpiCompactText, три значащие цифры), а не кегль.
   Прежний адаптивный кегль clamp 17–26 снят. Обрезки нет: усечённое число молча
   меняет значение. Меряется в Chrome: tests/kpi_value_fit_browser.js (обязательный
   шаг ui-tests). */
.kpi .v{font-size:27px;
  line-height:32px;font-weight:600;font-variant-numeric:tabular-nums;
  letter-spacing:0;white-space:nowrap;max-width:100%;
  color:var(--text)}
.kpi .v.dash{color:var(--text-2)}
/* Оговорка к значению: спокойнее вторичной величины и НЕ в одну строку —
   причина, обрезанная многоточием, перестаёт быть причиной. Место занимает
   только тогда, когда оговорка есть: пустого блока в карточке не остаётся. */
.kpi .na{font-size:12px;line-height:16px;color:var(--text-2);max-width:100%;
  overflow-wrap:anywhere;margin-top:1px}
/* Вторичное значение спокойнее главного, но это НЕ мелкая системная подпись:
   15 px против 26 px и вес 500 против 700. Размер общий для всех страниц. */
.kpi .p{font-size:14px;line-height:20px;font-weight:400;color:var(--text-2);font-variant-numeric:tabular-nums}
.kpi .r{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;min-height:20px;justify-content:flex-start}
.kpi .d{font-size:13px;line-height:18px;font-weight:500;display:inline-flex;align-items:center;gap:4px}
.kpi .d.up{color:var(--ok)}
.kpi .d.down{color:var(--bad)}
.kpi .d.flat{color:var(--text-2)}
/* Сравнения стоят сразу под главным числом и не раздувают карточку: подпись
   нейтральная, цветом выделен только процент. */
.kpi .cmp{font-size:12px;line-height:16px;color:var(--text-2);display:grid;gap:1px;margin-top:2px;
  justify-items:start}
.kpi .cmp .cl{color:var(--text-2)}
.kpi .cmp .cv{font-weight:500;font-variant-numeric:tabular-nums}
.kpi .cmp .cv.up{color:var(--ok)}
.kpi .cmp .cv.down{color:var(--bad)}
.kpi .cmp .cv.flat{color:var(--text-2)}

/* Статус данных страницы: слева от «демо данные», один вид на всех страницах.
   Значение читается словом; цвет только усиливает и ничего не сообщает один.
   Пары взяты из палитры V2: зелёная — та же, что у .badge.ok, фиолетовая —
   акцентная пара --accent/--accent-bg. */
/* ⚠⚠ УСТАРЕЛО / ЗАМЕНЕНО D-020. Здесь лежали правила плашки состояния
   (.hdr-status, .is-real, .is-proto). Сама плашка снята решением владельца от
   09.09.2026: подпись об источнике данных — пояснение системы, а такие
   пояснения на веб-экранах не выводятся. Правила удалены вместе с ней, чтобы
   мёртвый стиль не подсказывал вернуть элемент. */

/* Временный признак демонстрационного режима живёт в шапке, а не на рабочей
   поверхности страницы, и не спорит по весу с названием раздела. */
.hdr-demo[hidden]{display:none}   /* на реальных данных переключателя нет */
.hdr-demo{display:inline-flex;align-items:center;gap:6px;font-size:12px;line-height:18px;
  color:var(--text-2);background:var(--pad);border-radius:8px;padding:2px 8px}
.mpick.tall{max-height:280px;overflow-y:auto}
.mpick.tall label i{margin-left:auto;font-style:normal;color:var(--text-2);font-size:12px;
  max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hdr-demo select{border:0;background:none;font:inherit;font-size:12px;color:var(--text-2);cursor:pointer}

/* ── шапка на телефоне ───────────────────────────────────────────────────────
   Проверено замером: на 390 px и 360 px шапка была шире экрана (554 px), и вся
   страница ехала вбок — это было до правки, на всех страницах V2. Убираем то,
   что на телефоне не работает (название компании, кружок сбора; поле поиска удалено
   из шапки целиком задачей V2-FE-GLOBAL-SEARCH-REMOVE-0001),
   и позволяем полосе разделов прокручиваться внутри себя, а не тянуть страницу. */
@media (max-width:760px){
  .hdr-top{gap:10px;padding:0 12px}
  .hdr-co,.sync-dot{display:none}
  .hdr-right{gap:10px}
  .hdr-demo{padding:2px 6px;gap:2px}
  .hdr-demo>span{display:none}          /* слово «демо» уступает место самому выбору */
  .hdr-nav{gap:16px;padding:0 12px;overflow-x:auto;scrollbar-width:none}
  .hdr-nav::-webkit-scrollbar{display:none}
  .avatar{width:30px;height:30px;font-size:13px}
}
/* Сжатые подписи перестают читаться раньше, чем ломается раскладка: замер показал
   налезание текста друг на друга ниже 480 px (на 390 px зазор −2,9 px, на 360 px −4 px),
   а с 480 px и шире зазор снова положительный. Поэтому на узком экране показываем
   каждую третью подпись, считая ОТ КОНЦА: крайний столбец 19 августа и первый 23 июля
   подписаны всегда, ряд читается как «23 26 29 1 4 7 10 13 16 19» и совпадает с легендой.
   Именно visibility, а не display:none: коробки остаются на местах, поэтому подписи
   по-прежнему стоят ровно над своими столбцами (смещение 0 px). */

/* ── карточка артикула всплывающим блоком ───────────────────────────────────
   ⚠ Общий вид задан ЗДЕСЬ, вне мобильного медиазапроса: кнопка «i» стоит в
   таблице на обеих ширинах, и карточка, оформленная только для телефона, на
   десктопе вывалилась бы неоформленным блоком в конец страницы. Первая
   редакция была именно такой — поймано проверкой геометрии на 1440. */
@keyframes cardpop-in{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
.cardpop-veil{position:fixed;inset:0;z-index:68;background:rgba(14, 42, 47,.18);
  -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)}
.cardpop{position:fixed;z-index:70;left:50%;top:6vh;bottom:6vh;
  width:min(920px, calc(100vw - 48px));transform:translateX(-50%);
  background:var(--bg);border-radius:22px;
  box-shadow:0 -6px 22px rgba(14, 42, 47,.10), 0 -1px 3px rgba(14, 42, 47,.06);
  overflow-y:auto;-webkit-overflow-scrolling:touch}
.cardpop:focus,.cardpop:focus-visible{outline:none}
.cardpop-head{position:sticky;top:0;z-index:2;background:var(--bg);
  display:flex;align-items:center;gap:10px;padding:16px 16px 12px;
  border-radius:var(--radius-block) var(--radius-block) 0 0;}
.cardpop-t{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.cardpop-art{font-size:17px;font-weight:500;color:var(--text)}
.cardpop-nm{font-size:14px;font-weight:400;color:var(--text-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cardpop-x{width:48px;height:48px;flex:0 0 auto;border:0;display:inline-flex;
  align-items:center;justify-content:center;background:var(--pad);border-radius:14px;
  color:var(--text-2);cursor:pointer}
.cardpop-x svg{width:26px;height:26px;fill:none;stroke:currentColor;
  stroke-width:1.5;stroke-linecap:round}
.cardpop-body{display:flex;flex-direction:column;gap:12px;padding:0 16px 16px}
.cardpop-body .block{grid-column:auto;width:100%;background:var(--pad);
  border:0;border-radius:var(--radius-block);padding:14px 14px 12px}
.cardpop-body h3{margin:0 0 10px;font-size:15px;font-weight:500;line-height:1.2;color:var(--text)}
/* ⚠ ОДНА сетка на все таблицы карточки: заглавный столбец и РОВНО ЧЕТЫРЕ
   колонки значений одинаковой ширины (решение владельца 09.09). Прежде у одних
   таблиц было четыре колонки, у других три и пять — числа стояли на разных
   вертикалях, и глазу не за что было зацепиться при переходе от блока к блоку.
   Ширины заданы долями, а не по содержимому: иначе сетка расходилась бы от
   длины конкретного числа. */
.cardpop-body .mp-tbl{width:100%;display:table;table-layout:fixed;
  border-collapse:collapse}
.cardpop-body .mp-tbl th:first-child,.cardpop-body .mp-tbl td:first-child{width:28%}
.cardpop-body .mp-tbl th:not(:first-child),.cardpop-body .mp-tbl td:not(:first-child){width:18%}
/* ⚠ Перенос ПО СЛОВАМ, а не по буквам: `break-word` рвал заголовки посреди
   слова — «Продаж/и», «Конвер/сия», «В категор/ии». Заголовок, разорванный не
   по слову, читается хуже сокращённого. Кегль здесь на ступень мельче
   значений: подпись не спорит с числом. */
.cardpop-body .mp-tbl th{white-space:normal;word-break:normal;overflow-wrap:normal;
  hyphens:none;font-size:13px}
.cardpop-body .mp-tbl::-webkit-scrollbar{display:none}
.cardpop-body .mp-tbl th,.cardpop-body .kv .k{
  font-size:14px;font-weight:500;line-height:1.2;color:var(--text-2)}
.cardpop-body .mp-tbl td,.cardpop-body .kv .v{
  font-size:15px;font-weight:400;line-height:1.2;color:var(--text)}
.cardpop-body .kv .v{font-weight:500}
.cardpop-body .mp-tbl th,.cardpop-body .mp-tbl td{text-align:right;padding:5px 0 5px 14px}
.cardpop-body .mp-tbl th:first-child,.cardpop-body .mp-tbl td:first-child{
  text-align:left;padding-left:0}
.cardpop-body .kv{display:grid;grid-template-columns:1fr auto;gap:10px 12px}
.cardpop-body .kv-none{color:var(--text-2);font-size:14px}
/* ⚠ Шесть блоков, переехавших из раскрытия, оформляются ТАК ЖЕ, как остальное
   содержимое карточки: серая поверхность, тот же радиус, без обводки и тени,
   заголовок обычным регистром. Их прежний вид (белая карточка с рамкой,
   заголовок капителью) достался от раскрытия внутри таблицы; в карточке он
   спорил бы с блоками, которые владелец уже принял. */
.cardpop .xp{padding:0;border:0;background:none;box-shadow:none}
.cardpop .xp-in{display:flex;flex-direction:column;gap:12px;max-width:none;
  margin:0;padding:0}
.cardpop .b{width:100%;background:var(--pad);border:0;
  border-radius:var(--radius-block);padding:14px 14px 12px;margin:0}
.cardpop .b h5{margin:0 0 10px;font-size:15px;font-weight:500;line-height:1.2;
  letter-spacing:0;text-transform:none;color:var(--text)}
.cardpop .b .it,.cardpop .b .kv{line-height:1.2}
body.cardpop-on{overflow:hidden}

@media (max-width:560px){
  .xdays span:not(:nth-last-child(3n+1)){visibility:hidden}
}
@media (max-width:400px){
  .logo span{display:none}              /* на 360 px словесный знак уступает место шапке */
}

/* ── мобильная оболочка (var(--text)) ──────────────────────────────────────────────
   Один блок, один порог — существующий 560 px. Выше него ни одно правило
   отсюда не действует: десктоп остаётся ровно таким, каким был.
   Токены свои только там, где нужного нет; палитра, радиусы и кегли — общие. */
/* ⚠ Узлы оболочки скрыты ПО УМОЛЧАНИЮ, а не только внутри мобильного правила.
   Панели меню и профиля лежат в body, и без этой строки на десктопе они
   отрисовывались обычным содержимым в конце страницы: сверка снимков 1280 до и
   после поймала внизу «Масштаб» и «Профиль». Показываются они ниже, в
   @media (max-width:560px). */
.m-bar,.m-drawer,.m-dock{display:none}
.m-shell{position:relative}

@media (max-width:560px){
  /* Высота нижней плашки задана НЕ отдельным числом, а той же подложкой, что и
     круг в шапке: --m-pod минус её собственные поля. Правка владельца 08.09 —
     «плашку иконок внизу уменьши под высоту плашки бургера, чтобы одинаковые
     были»; при разъехавшихся числах они разъедутся снова при первой правке. */
  /* ⚠⚠ ПРАВИЛО ИГОРЯ 10.09.2026: «везде 44 и везде скругление 22». Оно не про
     вкус, а про геометрию — при высоте 44 скругление 22 даёт ПОЛНЫЙ круг с
     торцов, а при 48 остаётся плоская вставка в 4 px, и таблетка выглядит
     недоделанной. Раньше здесь стояло 48 (правка от 08.09 «сделай везде 48»),
     и по тому же правилу оно требовало бы скругления 24.
     Число одно на бургер, круг профиля, плашку дока и вкладку подменю: при
     разъехавшихся числах они разъедутся снова при первой правке. */
  :root{ --m-podpad:7px; --m-ic:22px; --m-gap:12px;
         --m-safe:env(safe-area-inset-bottom,0px);
    /* ⚠ Скругление теперь ОДНО на всё — 22 (правило Игоря 10.09.2026).
       Прежде их было два: таблетка у органов управления и 22 у поверхностей;
       до 08.09 — четыре разных числа. При высоте 44 таблетка и 22 дают ровно
       один и тот же контур, поэтому обе переменные указывают на общий токен:
       расхождения между «управлением» и «поверхностью» больше нет. */
    }

  /* Десктопная шапка уступает место мобильной. Разметка обеих остаётся в DOM:
     ветвление живёт здесь, а не в JS, поэтому вернуться назад ничего не стоит. */
  .hdr-top,.hdr-nav{display:none}
  /* ⚠ Фон несёт ОДИН элемент — сам лист. Пока его красили и header, и строка
     шапки, каждый рисовал свой прямой угол поверх скруглённого угла листа, и
     скругление пропадало ровно там, где его видно. */
  header{border-bottom:0;background:transparent}
  .m-bar{display:flex;align-items:center;justify-content:space-between;
    /* ⚠ Левое поле шапки на 6 px больше общего (решение Игоря 09.09.2026:
       «меню бургер чуть правее на 6 пкс»). Сдвинут ИМЕННО левый край, а не
       оба: правый держит кружок профиля, и его владелец двигать не просил. */
    padding:calc(env(safe-area-inset-top,0px) + 8px) var(--m-gap) 10px
            calc(var(--m-gap) + 6px);
    position:sticky;top:0;z-index:40;background:var(--bg)}
  /* Один и тот же заголовок не стоит дважды: источник, из которого он взят,
     на телефоне скрывается. */
  /* Источник заголовка скрывается, чтобы одно имя не стояло дважды. У заглушки
     раздела это часть её собственного блока — там прячется только заголовок. */
  .m-title-src{display:none}
  .m-title{flex:1 1 auto;min-width:0;margin:0 12px;font-size:18px;font-weight:500;
    letter-spacing:0;line-height:1.2;text-align:center;color:var(--text);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

  /* Круглая подложка — одна форма у шапки и у нижнего блока. */
  .m-pod{background:var(--pad);border:0;border-radius:var(--radius-block);
    display:flex;align-items:center;gap:3.5px;padding:var(--m-podpad);box-sizing:border-box}
  .m-side{width:var(--h-ctl);height:var(--h-ctl);justify-content:center;cursor:pointer}
  /* ⚠ «Фантом» — не украшение, а рамка фокуса, которую рисует сам браузер по
     умолчанию: после касания кнопка остаётся сфокусированной, и кольцо висит,
     пока не нажмёшь в другом месте. Умолчание снимается, но НЕ вместе с
     доступностью: тому, кто идёт клавишей Tab, кольцо возвращается через
     :focus-visible. Убрать обводку целиком значило бы сделать оболочку
     непроходимой с клавиатуры. */
  .m-side:focus,.m-dbtn:focus,.m-tab:focus,.m-nav1:focus,.m-nav2:focus{outline:none}
  .m-side:focus-visible,.m-dbtn:focus-visible,.m-tab:focus-visible,
  .m-nav1:focus-visible,.m-nav2:focus-visible{outline:2px solid var(--text);outline-offset:2px}
  .m-ic{width:var(--m-ic);height:var(--m-ic);flex:0 0 auto;stroke:currentColor;fill:none;
    stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;color:var(--text)}
  .m-ic-burger{stroke-width:1.5}

  /* Боковые панели лежат ПОД экраном: экран сдвигается, остаётся сверху и
     роняет на панель тень. Порядок слоёв именно такой и проверяется тестом. */
  /* Палитра по образцу (приложение Claude), решение владельца 08.09: тёплая
     основа вместо холодной серо-голубой. Переопределяются только мобильные
     токены внутри этого блока — общая тема проекта не трогается, десктоп
     остаётся прежним. */
  :root{
    /* Снято с образца владельца (два снимка приложения Claude, 08.09):
       страница и полка почти одного тёплого тона, полка чуть темнее; активный
       пункт — светло-серая тёплая плашка; круглые кнопки шапки БЕЛЫЕ. */
    /* ОДИН серый на все управляющие поверхности: круги шапки, нижний блок,
       карточки показателей и шапка таблицы. Ни тени, ни обводки — как в
       образце: поверхность отличается тоном, а не рамкой. */
    /* Правка владельца 08.09 «сделаем светлее в 2 раза»: расстояние до белого
       уполовинено по каждому каналу (18/19/23 → 9/10/12), тёплый оттенок при
       этом сохраняется — доля примеси к белому у всех трёх каналов та же. */
    /* ⚠ Здесь жил --m-surf-a — полупрозрачный двойник подложки для размытия
       под раскрытой панелью. Снят: он не использовался НИ РАЗУ, а держал в
       себе прежний кремовый тон — цвет вне палитры,
       переживший перекраску только потому, что записан не hex-ом. */
    /* Фон раскрытой панели на ступень темнее управляющих поверхностей
       (правка владельца 09.09): панель обязана читаться как отдельный слой
       над листом, а не сливаться с виджетами. */
  }
  body{background:var(--bg)}
  .m-drawer{display:block;position:fixed;top:0;left:0;bottom:0;width:76%;max-width:360px;z-index:10;background:var(--pad);
    padding:calc(env(safe-area-inset-top,0px) + 16px) 0 calc(16px + var(--m-safe));
    overflow-y:auto;-webkit-overflow-scrolling:touch;visibility:hidden}
  .m-drawer.m-right{left:auto;right:0}
  body.m-menu-on .m-drawer:not(.m-right){visibility:visible}
  body.m-prof-on .m-drawer.m-right{visibility:visible}
  body.m-menu-on,body.m-prof-on{overflow:hidden}
  /* Подложка прикреплена к окну, а не к содержимому, и при сдвиге экрана
     оставалась висеть поверх границы панели. Пока открыта боковая панель, её
     нет: одновременно виден один основной слой. */
  body.m-menu-on .m-dock,body.m-prof-on .m-dock{opacity:0;pointer-events:none}
  .m-drawer:focus{outline:none}
  /* ⚠ Порядок слоёв задаётся ЯВНО. Без z-index лист рисовался в порядке дерева,
     а полки добавляются в него позже — и закрывали собой тень листа. Тень при
     этом существовала: её было видно только в вырезе угла, где полки нет. */
  .m-shell{position:relative;z-index:20;
    transition:transform .3s cubic-bezier(.22,.61,.36,1), border-radius .3s ease,
      box-shadow .3s ease;
    min-height:100vh;background:var(--bg);border-radius:0;will-change:transform}
  /* Образец — приложение Claude: сдвинутая страница НЕ уменьшается по высоте,
     она уезжает целиком, получает крупное скругление, мягкую тень и гаснет под
     светлой вуалью. Вуаль здесь главное: без неё белый лист спорит с меню за
     внимание, а с ней взгляд сам идёт на разделы. */
  /* ⚠ Скругление повторяет угол ЭКРАНА, а не подобрано числом. У телефонов со
     скруглённым экраном система сообщает нижнее безопасное поле (домашняя
     полоса), у моделей с прямыми углами — SE, старые — оно равно нулю. Значит
     сам признак уже есть, и радиус берётся из него, а не из списка моделей,
     который устареет к следующему телефону.

     Коэффициент 1.3: у iPhone с полосой 34 px это даёт 44 px — угол экрана.
     В ландшафте поле меньше (21 px), угол мельче — так и есть у самого экрана.
     Верхняя граница держит радиус в разумных пределах на нестандартных полях. */
  /* Угол экрана считается ОДИН раз и лежит на корне: его берут и лист
     страницы при отъезде, и карточка артикула. Копия формулы разошлась бы с
     оригиналом при первой правке. */
  :root{--m-corner:clamp(0px, calc(env(safe-area-inset-bottom, 0px) * 1.3), 56px)}
  body.m-menu-on .m-shell{transform:translateX(76%);border-radius:var(--m-corner);
    box-shadow:-7px 0 18px rgba(14, 42, 47,.10), -1px 0 3px rgba(14, 42, 47,.07)}
  body.m-prof-on .m-shell{transform:translateX(-76%);border-radius:var(--m-corner);
    box-shadow:7px 0 18px rgba(14, 42, 47,.10), 1px 0 3px rgba(14, 42, 47,.07)}
  /* ⚠ Липкая шапка страницы рисует свой прямой угол ПОВЕРХ скруглённого угла
     листа, и скругление пропадало ровно там, где его видно. Она получает тот же
     радиус сверху. `overflow:hidden` на листе не годится: он менялся бы скачком
     и возвращал рывок в конце движения. */
  body.m-menu-on .m-bar,body.m-prof-on .m-bar{
    border-radius:var(--m-corner) var(--m-corner) 0 0;
    transition:border-radius .3s ease}
  .m-bar{transition:border-radius .3s ease}
  /* Вуаль лежит поверх содержимого и ловит нажатие: за ней ничего нельзя
     задеть случайно. Появляется и гаснет вместе со сдвигом. */
  .m-shell::after{content:"";position:absolute;inset:0;z-index:60;
    background:rgba(255,255,255,0);pointer-events:none;
    transition:background .3s ease;border-radius:inherit}
  body.m-menu-on .m-shell::after,body.m-prof-on .m-shell::after{
    background:rgba(255,255,255,.34);pointer-events:auto}

  /* Высота шапки полки подогнана замером: сдвинутый экран ещё и уменьшен,
     из-за чего центр кнопки уезжает вниз. Знак и аватар встают на линию с ней. */
  .m-dhead{display:flex;align-items:center;gap:10px;padding:0 20px;height:73px;box-sizing:content-box}
  /* ⚠ «Масштаб» набирается ОБЩИМ шрифтом: визуальная система 1.0 запрещает
     второй шрифт в интерфейсе, а трекинг в ней везде нулевой. Прежнее решение
     владельца (Cormorant Garamond, кегль 31, трекинг −0.02em) перекрыто новой
     системой — это его же указание «делай по новому». */
  .m-dlogo{height:28px;width:auto;display:block}
  .m-dname{font-family:var(--font);font-size:18px;font-weight:500;
    font-style:normal;letter-spacing:0;line-height:1.2;color:var(--text)}
  /* Метрики сняты с образца владельца (снимок приложения Claude, 08.09):
     шаг между пунктами 52, подложка 50 в высоту и во всю ширину полки за
     вычетом 12 по краям, кегль 17. Пропорции взяты по ширине полки, а не на
     глаз: полка занимает 76 % экрана и в образце, и у нас, поэтому мера общая. */
  .m-dbody{padding:4px 12px;display:flex;flex-direction:column;gap:2px}
  .m-nav1,.m-nav2,.m-row{display:flex;align-items:center;width:100%;border:0;background:none;
    cursor:pointer;text-align:left;font:inherit;color:var(--text-2);border-radius:14px;
    min-height:50px;padding:6px 14px;gap:14px;text-decoration:none;box-sizing:border-box}
  .m-nav2{min-height:42px;padding-left:46px}
  /* ⚠ Шрифт пунктов — СИСТЕМНЫЙ, и это не упрощение, а точное попадание в
     образец. В снимке владельца латиница и кириллица набраны РАЗНЫМИ
     начертаниями: фирменный шрифт приложения кириллицы не содержит, и русские
     строки там падают в системный шрифт устройства. Наше меню целиком
     русское, поэтому «как в примере» = системный шрифт телефона (на iPhone —
     SF Pro). Вшивать его нельзя и не нужно: он уже есть на устройстве.
     Остальная система — тот же Golos Text: второго шрифта в продукте нет и
     отменяется одной строкой. */
  /* ⚠ Системный шрифт пунктов меню снят: один шрифт на весь продукт. */
  .m-nav1 .m-lbl,.m-nav2 .m-lbl,.m-row .m-lbl{font-family:var(--font)}
  .m-nav1 .m-lbl{flex:1 1 auto;font-size:15px;font-weight:400}
  .m-nav2 .m-lbl{font-size:15px;font-weight:400}
  /* Активный пункт — подложкой. Ни нового цвета, ни жирности. */
  /* ⚠ Панель сама стала серой (--card2), и подложка активного пункта того же
     серого исчезла: выделение перестало существовать. Активный пункт берёт
     соседний, более тёмный тон — он различим на сером и не вводит нового цвета. */
  .m-nav1.m-cur,.m-nav2.m-cur{background:var(--line)}
  .m-nav1:active,.m-nav2:active{background:var(--line)}
  .m-nav1.m-cur .m-lbl,.m-nav2.m-cur .m-lbl,.m-nav1.m-in .m-lbl{color:var(--text)}
  .m-nav1.m-off,.m-nav2.m-off{opacity:.45}
  .m-navic{width:22px;height:22px;stroke-width:1.5}
  .m-car{width:18px;height:18px;stroke-width:1.5;color:var(--text-2);transition:transform .18s ease}
  .m-nav1[aria-expanded="true"] .m-car{transform:rotate(180deg)}
  .m-nav2box{padding-bottom:2px}
  .m-grp{padding:11px 12px 3px;font-size:13px;line-height:18px;font-weight:400;
    letter-spacing:0;color:var(--text-2)}
  .m-row.m-static{cursor:default}
  .m-row .m-lbl{font-size:14px}
  .m-ava{width:26px;height:26px;flex:0 0 auto;border-radius:50%;background:var(--pad);
    color:var(--text);font-size:12px;font-weight:500;display:inline-flex;align-items:center;justify-content:center}
  .m-ava-lg{width:38px;height:38px;font-size:15px}

  /* Нижняя подложка. Её нет вовсе, если страница не отдала ни одного действия. */
  /* Высота плашки равна кругу в шапке (правка владельца 08.09), и при этом
     касательная цель остаётся 46 px: подложка теряет ВЕРТИКАЛЬНЫЕ поля, а не
     кнопка — уменьшенная кнопка дала бы 32 px, ниже минимума 44, и это поймал
     замер, а не глаз. */
  .m-dock{display:flex;position:fixed;left:50%;transform:translateX(-50%);
    padding:0 var(--m-podpad);
    bottom:calc(var(--m-gap) + var(--m-safe));z-index:45;gap:3.5px;
    transition:background .2s ease,border-color .2s ease,box-shadow .2s ease,opacity .16s ease}
  .m-dbtn{width:var(--h-ctl);height:var(--h-ctl);flex:0 0 auto;border:0;background:none;
    border-radius:var(--radius-block);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
    color:var(--text);padding:0}
  .m-dbtn.m-wide{width:auto;gap:9px;padding:0 14px 0 10px}
  .m-dlbl{font-size:14px;font-weight:500;color:var(--text);white-space:nowrap;line-height:1;
    max-width:150px;overflow:hidden;text-overflow:ellipsis}
  /* ⚠ Место под подложку добавляется ОДИН раз — обёртке всей страницы. Прежде
     оно висело на каждом блоке содержимого, и страница получала по 90 px пустоты
     между шапкой, виджетами и таблицей. */
  .m-has-dock #mShell{padding-bottom:calc(var(--h-ctl) + 28px)}
  /* Блок, в котором остался только скрытый отбор, схлопывается: иначе его
     собственные поля держат пустую полосу. */
  .page-content:has(> .chipbar){padding-top:0;padding-bottom:0}

  /* Развёрнутый блок — это САМА подложка, а не карточка над ней: нижние края
     совпадают, значков внутри нет, места под них не резервируется. */
  body.m-pop-on .m-dock{background:transparent;border-color:transparent;box-shadow:none;
    opacity:0;pointer-events:none}
  /* Раскрытие: панель НАДУВАЕТСЯ из подложки, а не появляется поверх неё.
     Точка роста — низ по центру, ровно там, где стоит подложка, поэтому
     движение читается как увеличение того же блока, а не как новый слой. */
  @keyframes m-pop-in{
    from{opacity:0;transform:scale(.84) translateY(12px)}
    60%{opacity:1}
    to{opacity:1;transform:none}
  }
  .pop.m-pop{left:var(--m-gap);right:var(--m-gap);width:auto;max-width:none;
    border-radius:var(--radius-block);
    /* Воздух сверху и снизу: панель была плотно набита и читалась одним пятном. */
    padding:20px 16px 18px;overflow-y:auto;-webkit-overflow-scrolling:touch;
    /* Фон — тот же, что у подложки с иконками; обводки нет, тень лёгкая,
       и то, что позади, слегка размыто (решение владельца 08.09). */
    background:var(--pad);border:0;
    box-shadow:0 8px 28px rgba(14, 42, 47,.10), 0 1px 3px rgba(14, 42, 47,.06);
    transform-origin:50% 100%;
    animation:m-pop-in .22s cubic-bezier(.22,.61,.36,1) both}

  /* Размытие — у ФОНА ВОКРУГ панели, а не сквозь неё (уточнение владельца
     08.09). Сама панель плотная: сквозь неё читалась таблица, и цифры
     календаря ложились на чужие строки. Слой лежит ПОД панелью и НАД
     страницей, поэтому размывает именно окружение. */
  body.m-pop-on::before{content:"";position:fixed;inset:0;z-index:69;
    background:rgba(255,255,255,.22);
    -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
    animation:m-veil-in .22s ease both}
  @keyframes m-veil-in{from{opacity:0}to{opacity:1}}

  /* ── пресеты периода: один переключатель, а не россыпь кнопок ──────────────
     Весь блок белый, выбранный период — серый, тот же, что у панели; между
     ними белая полоса в 2 px. Это НЕ обводка выбранного, а поле самого блока:
     обводка на белом фоне была бы невидима, а поле работает всегда. */
  .pop.m-pop .presets{display:flex;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    gap:2px;padding:2px;background:var(--bg);border-radius:999px;max-width:none;margin-bottom:12px}
  .pop.m-pop .presets::-webkit-scrollbar{display:none}
  /* Пресеты периода — тот же переключатель: ложе на группе, белый выбранный. */
  .pop.m-pop .presets{background:var(--pad);border-radius:var(--radius-block);padding:3px;gap:2px}
  .pop.m-pop .presets button{flex:0 0 auto;border:1px solid transparent;background:transparent;border-radius:999px;
    height:38px;padding:0 15px;font-size:15px;font-weight:500;color:var(--text-2);
    white-space:nowrap;cursor:pointer}
  .pop.m-pop .presets button.on{background:var(--bg);color:var(--text);border-color:var(--line)}

  /* Чипы отбора: те же .seg/.segbtn/.chip, мобильная высота одним токеном. */
  /* Отбор на телефоне живёт в панели настроек, а на самой странице не стоит:
     иначе одно и то же управление показано дважды и занимает пол-экрана.
     Правило адресное — «чипбар В СОДЕРЖИМОМ страницы»; переехав в панель, он
     снова виден. Скрывается только там, где есть доступная замена. */
  /* ── карточка артикула: мобильная геометрия ─────────────────────────────────
     Общий вид карточки задан ВНЕ медиазапроса — он нужен и на широком экране.
     Здесь только то, что верно именно для телефона: карточка идёт от нижнего
     края вверх до шапки и повторяет угол экрана. */
  .cardpop{left:0;right:0;bottom:0;width:auto;max-width:none;transform:none;
    top:calc(env(safe-area-inset-top, 0px) + var(--h-ctl) + 18px);
    border-radius:var(--m-corner);
    animation:cardpop-in .24s cubic-bezier(.22,.61,.36,1) both}
  /* ⚠ Безопасные поля ВНУТРИ карточки, сверху и снизу, считаются от её же
     скругления: угол съедает содержимое по краям, и строка, начатая вплотную к
     закруглению, обрезается им. Половина радиуса — та величина, на которой
     закругление перестаёт задевать строку; ниже 12 px не опускаемся даже там,
     где скругления нет вовсе (SE). Снизу к этому прибавляется безопасная зона
     устройства: полоса дома лежит поверх экрана и не отдаёт нажатий. */
  .cardpop{--cardpop-pole:max(12px, calc(var(--m-corner) / 2))}
  .cardpop-head{padding-top:calc(var(--cardpop-pole) + 4px);}
  .cardpop-body{padding:0 12px calc(var(--cardpop-pole) + var(--m-safe))}
  .cardpop-x{width:calc(var(--h-ctl) + 12px);height:calc(var(--h-ctl) + 12px);
    border-radius:var(--radius-block)}

  /* ── лента подразделов вместо хлебных крошек ───────────────────────────────
     Решение владельца 08.09: крошки и стрелка «назад» на телефоне не выводятся,
     их место занимает горизонтальная лента подразделов текущего раздела.
     Крошки прячутся целиком — стрелка «назад» лежит внутри них. */
  .crumbs{display:none}
  /* ⚠ Поле листа на телефоне — 12 px, как у шапки и дока, а не 24 от десктопа.
     Именно из-за него полоса подразделов стояла на 24, пока виджеты шли с 16:
     ряды не совпадали не «каждый по-своему», а потому что вертикали было две.
     Одна вертикаль объявляется ЗДЕСЬ, и от неё же считается сдвиг бургера. */
  .page-content{padding-left:var(--m-gap);padding-right:var(--m-gap)}
  /* ⚠ Первая вкладка стояла на 24 px: поле листа 12 плюс собственный отступ
     полосы 12. Виджеты при этом начинались с 16, бургер — с 12, и три ряда
     шли по трём разным вертикалям. Решение Игоря 09.09.2026 — «виджеты и меню
     подразделов на одной горизонтальной линии». Общая вертикаль = поле листа. */
  /* ⚠⚠ У ПОДМЕНЮ — ВАРИАНТ «В», а не «Б» (уточнение Игоря 10.09.2026):
     общего ложа нет, подложка появляется только под выбранным подразделом, и
     у неё тень в 1 px. Отличие от переключателей намеренное: подменю — это
     навигация по разделу, а не выбор из закрытого набора, и ряд подразделов
     бывает длиннее экрана — ложе вокруг прокручиваемой ленты обрезалось бы.

     Собственных полей у ленты нет: подложка выбранной вкладки должна начинаться
     ровно на той же вертикали, что и виджет, а не на 3 px правее. */
  .m-tabs{display:flex;gap:2px;align-items:center;
    overflow-x:auto;scrollbar-width:none;
    margin:0 0 12px;padding:0;background:none}
  .m-tabs::-webkit-scrollbar{display:none}
  /* Высота вкладки равна кругу бургера (правка владельца 08.09) и связана с ним
     той же переменной: заданная числом, она разъехалась бы при первой правке
     размера шапки. */
  /* Лента подразделов — тот же переключатель: ложе обнимает группу, текущий
     подраздел белый с тенью. Высота вкладки по-прежнему равна кругу бургера,
     ложе добавляет к ней свои 3 px сверху и снизу. */
  .m-tab{flex:0 0 auto;height:var(--h-ctl);display:inline-flex;align-items:center;
    padding:0 16px;border-radius:var(--radius-block);text-decoration:none;
    font-size:16px;font-weight:500;line-height:1.2;color:var(--text-2);white-space:nowrap}
  /* ⚠ Здесь стоял БЕЛЫЙ фон — остаток от варианта «Б», где выбранный пункт
     белый на сером ложе. Ложа у подменю нет, лист страницы сам белый, и белая
     подложка на белом не читалась вовсе: видна была только тень, то есть
     обводка. Подложка выбранного — --pad, ровно как в показанном варианте «В».
     Своего цвета не завожу: --pad это и есть подложка по документу системы. */
  .m-tab.m-cur{background:var(--pad);color:var(--text);font-weight:500;}

  /* Стрелка раскрытия у артикула снята решением владельца 08.09. Строка
     по-прежнему раскрывается нажатием — уходит значок, а не действие. Место,
     которое он занимал, возвращается тексту артикула. */
  .grid td.name .exp{display:none}
  .grid td.name{padding-right:8px}

  .page-content .chipbar{display:none}
  .chipbar{flex-wrap:wrap;gap:8px;padding:8px 12px}
  /* ── чипы отбора: тот же переключатель, что у периодов ─────────────────────
     Правка владельца 09.09: «надо сделать чипы такие же как чип в календаре по
     стилю, цвету, размеру». Один вид у всех переключателей панели — блок белый,
     выбранное серое, обводки нет, форма таблетки. Второго набора значений не
     заводится: берутся те же токены, что у пресетов периода. */
  /* Отбор — КОЛОНКОЙ (правка владельца 09.09): каждый переключатель своей
     строкой во всю ширину панели. Переносы по мере заполнения ставили два
     управления в один ярус, и ряд читался как случайный, а не как список
     настроек. */
  .pop.m-pop .chipbar{padding:2px;display:flex;flex-direction:column;
    align-items:flex-start;gap:10px;overflow:visible;flex-wrap:nowrap}
  /* Ширина — ПО СОДЕРЖИМОМУ с полями таблетки (правка владельца 09.09):
     растянутый во всю панель чип обещает продолжение, которого нет, и пустое
     поле справа читается как потерянная кнопка. Предел — ширина панели: то,
     что длиннее, прокручивается внутри себя. */
  .pop.m-pop .chipbar > *{flex:0 0 auto;width:auto;max-width:100%}
  .pop.m-pop .chip{justify-content:flex-start}
  /* Площадок пять — в ширину они не помещаются, поэтому эта строка
     прокручивается вбок сама. Прокрутка одна и в одном месте: соседние строки
     колонки её не отнимают. */
  .pop.m-pop .seg.m-mps{overflow-x:auto}
  /* ⚠ Здесь стоял отдельный мобильный вид переключателя: своё скругление,
     свой цвет выбранного, тень выключена. Снято — вид один на всю систему и
     объявлен в каноне выше. Осталась только прокрутка длинного ряда. */
  .pop.m-pop .chip{background:var(--bg);border:0;border-radius:var(--radius-block);
    height:var(--h-ctl);padding:0 16px;font-size:15px;box-shadow:none}
  .pop.m-pop .chip .val{font-weight:500;color:var(--text)}
  .pop.m-pop .chip.open{background:var(--bg);box-shadow:none}
  .pop.m-pop .chip.static{background:var(--pad);color:var(--text-2)}
  /* Знак «i» стоит ВНУТРИ переключателя и прижимался к его правому краю:
     поля таблетки рассчитаны на текст кнопки, а не на кружок. Правка
     владельца 09.09 — дать ему собственный отступ с обеих сторон. */
  .pop.m-pop .seg > .ibtn{margin:0 10px 0 8px;flex:0 0 auto}
  /* Площадок пять вместе с «Все» — в ширину экрана они не помещаются, поэтому
     переключатель прокручивается вбок, как и пресеты периода. */
  .pop.m-pop .seg.m-mps{overflow-x:auto;scrollbar-width:none;max-width:100%}
  .pop.m-pop .seg.m-mps::-webkit-scrollbar{display:none}
  .pop.m-pop .seg.m-mps .segbtn{flex:0 0 auto}
  .m-set-foot{display:flex;justify-content:flex-end;padding-top:16px;margin-top:6px}
  /* Календарь на телефоне — ОДИН месяц: два рядом не помещаются в 366 px и
     уезжали за правый край. Это адаптивное представление ТОГО ЖЕ календаря:
     разметка, состояние и выбор диапазона не трогаются, второй месяц просто не
     показывается, а стрелки первого переставляют тот же якорь. */
  .pop.m-pop .cal{display:block;overflow:hidden;touch-action:pan-y}
  .pop.m-pop .cal > .m + .m{display:none}
  /* Календарь во всю ширину панели: клетки тянутся долями, а не стоят по 26 px,
     иначе справа оставалось пустое поле в треть ширины. */
  .pop.m-pop .cal > .m{width:100%;min-width:0}
  .pop.m-pop .cal .grid7{grid-template-columns:repeat(7,1fr);gap:4px}
  .pop.m-pop .cal .d{height:40px;font-size:15px;border-radius:11px}
  /* ⚠ Выбор дат — оттенками серого (решение владельца 08.09), а не акцентным
     фиолетовым. Три ступени одного тёплого ряда, различимые между собой и на
     фоне панели: середина диапазона светлее панели, края — тёмные с белым
     текстом. Контраст текста на краю 8,9:1, на середине 12,6:1. */
  /* ⚠ Подсветка под курсором объявлена ТОЛЬКО там, где курсор есть. На касании
     :hover залипает после нажатия, а это правило стояло последним и перекрывало
     фон края диапазона: последний выбранный день получал светлую подложку и
     оставался с белой цифрой — ровно то, что владелец увидел на экране. */
  @media (hover:hover){ .pop.m-pop .cal .d:hover{background:var(--line)} }
  .pop.m-pop .cal .d.in{background:var(--line);color:var(--text)}
  .pop.m-pop .cal .d.edge,.pop.m-pop .cal .d.edge:hover{
    background:var(--text);color:var(--bg);font-weight:500}
  .pop.m-pop .cal .dow{font-size:12px}
  .pop.m-pop .cal .mh{font-size:15px;margin-bottom:10px}
  .pop.m-pop .cal .nav{font-size:19px;padding:0 10px}
  /* Смена месяца свайпом: месяц уезжает в сторону движения. */
  @keyframes m-mon-l{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}
  @keyframes m-mon-r{from{opacity:0;transform:translateX(-28px)}to{opacity:1;transform:none}}
  .pop.m-pop .cal.m-go-l > .m{animation:m-mon-l .2s cubic-bezier(.22,.61,.36,1) both}
  .pop.m-pop .cal.m-go-r > .m{animation:m-mon-r .2s cubic-bezier(.22,.61,.36,1) both}
  /* Кнопки — та же таблетка и та же высота 48, что у бургера, плашки и вкладок.
     ⚠ «Применить» — почти чёрная, а не акцентная: фиолетовый из выбора дат
     убран решением владельца, и оставлять его на кнопке значило бы держать
     единственное цветное пятно без причины. «Сбросить» светлее НАДПИСЬЮ, а не
     фоном: два одинаково громких действия рядом не дают понять, какое главное. */
  /* Итог периода — своей строкой, кнопки — одной парой под ним. Вперемешку они
     не помещались в ширину и переносились по одной, и «Сбросить» вставало над
     «Применить» без всякой причины. */
  .pop.m-pop .foot{flex-wrap:wrap;gap:10px;align-items:center;justify-content:flex-end;
    padding-top:16px;margin-top:6px}
  .pop.m-pop .foot .sel{flex:1 1 100%;margin-bottom:2px}
  .pop.m-pop .btn{padding:0 22px}
  /* Воздух между частями: заголовок — переключатель — календарь — итог. */
  /* Слово «Период» снято решением владельца 08.09: панель открыта нажатием на
     кнопку периода, и заголовок повторял то, что человек только что нажал.
     Скрывается на телефоне, а не удаляется: на широком экране панель стоит
     рядом с другими и там заголовок различает их между собой. */
  .pop.m-pop h5{display:none}
  .pop.m-pop .presets{margin-bottom:18px}
  .pop.m-pop .cal{padding-bottom:6px}
  .pop.m-pop .foot .sel{color:var(--text-2)}
  /* Управление, уехавшее в подложку, внутри панели настроек не дублируется. */
  .m-pop .m-in-dock{display:none}
  .m-pop .chip,.m-pop .seg{max-width:100%}

  /* Таблица Sales от края до края: поля страницы снимаются, боковые границы и
     скругления не нужны — иначе виден обрезанный край карточки. Столбцы,
     сортировка, карандаш и раскрытие не трогаются. */
  /* Шапка таблицы на тёплой основе: холодный var(--pad) спорил с палитрой.
     Оба яруса и залипающий верх — одним тоном, иначе при прокрутке видно шов. */
  /* ⚠ Шапка таблицы красится ЦЕЛИКОМ. Прежде липкий первый столбец имел свой
     белый фон (`.grid th.name` в общих правилах), и часть шапки оставалась
     другого цвета — на прокрутке это было видно как заплатка. */
  .grid thead th,.grid thead tr.h1 th,.grid thead tr.h2 th,
  .grid thead th.name,.grid thead tr.h1 th.name,.grid thead tr.h2 th.name,
  .grid thead tr.h1 th.rowact,.grid thead tr.h2 th.rowact,
  .grid thead th.rowact.actc{background:var(--pad)}
  .table-container{padding-left:0;padding-right:0}
  .tablecard{border-left:0;border-right:0;border-radius:0;overflow-x:auto}
  /* Виджеты лентой: годовая величина в половину экрана не влезает ни при каком
     кегле, поэтому лента прокручивается, а не сжимает число. */
  .kpis{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    /* Ряд наследовал десктопные 16 px и не совпадал ни с полосой подразделов,
       ни с бургером. Ставим то же поле листа; справа ряд по-прежнему уходит
       под край — обрезанная карточка честно говорит «дальше ещё есть». */
    padding:0 0 6px var(--m-gap);scroll-padding-left:var(--m-gap)}
  .kpis::-webkit-scrollbar{display:none}
  /* Ровно две карточки в ширину экрана (решение владельца 09.09): доля, а не
     фиксированные 236 px — при них две карточки требовали 480 px и вторая
     всегда уезжала за край. Кегль числа подстроится сам: он считается от
     ширины карточки, один на весь ряд, и от сужения только уменьшается. */
  .kpis>*{flex:0 0 calc((100% - 8px) / 2);min-width:0;scroll-snap-align:start}
}

@media (max-width:560px) and (prefers-reduced-motion:reduce){
  .m-shell,.m-car,.m-dock{transition:none}
  .pop.m-pop,.m-pop .cal > .m{animation:none}
}

/* ══ ТАБЛИЦА ПО ШИРИНЕ ТЕЛЕФОНА — вариант .grid.m-fit (UI_RULES §4.8, §7 этап 5а) ══
   ⚠⚠ ОСНОВАНИЕ. Эти правила жили копией на пяти страницах (заявки, справочник,
   P&L, производство, продажи) — тела совпадали буква в букву (замер 11.09).
   Правка одной копии не доходила до остальных. Теперь вариант один и объявлен
   здесь; страница включает его классом m-fit у своей таблицы и объявляет только
   ширины СВОИХ колонок — это содержимое страницы, а не второй вид таблицы.

   ⚠ Модификатор — через :where(), и блок стоит в КОНЦЕ файла. Так специфичность
   и порядок совпадают со снятыми страничными правилами: ширины колонок страницы
   (.grid td.name{27%}, :nth-child) по-прежнему побеждают общее «width:auto», а
   общее побеждает базовые правила таблицы выше. Иначе .grid.m-fit td.name
   перебил бы ширину колонки имени молча.
   ⚠ В вариант НЕ вошли (замер Chrome 11.09 показал бы тихую правку): поле
   раскрытия tr.detail .detail — у заявок оно своё, 24 px; и часть «td.name» —
   она была только у производства и продаж, у P&L первая колонка осталась бы 12
   вместо 15. Эти правила остаются на своих страницах. Вычисленные стили таблиц
   семи страниц до и после сверены в Chrome на 390 и 1440. */
@media (max-width:760px){
  table.grid:where(.m-fit){min-width:0 !important;width:100% !important;table-layout:fixed}
  .grid:where(.m-fit) th,.grid:where(.m-fit) td{width:auto !important;padding-left:6px !important;padding-right:5px !important;font-size:12px}
  .grid:where(.m-fit) thead .h2 th{font-size:11px;line-height:14px}
  .grid th.hide-m,.grid td.hide-m{display:none}
}

/* R14: keep the accepted five-column card readable on narrow screens. */
.cardpop-body .card-table-scroll{max-width:100%;overflow-x:auto;overscroll-behavior-x:contain}
.cardpop-body .card-table-scroll .mp-tbl{min-width:760px}
.cardpop-body .card-table-scroll:focus-visible{outline:2px solid var(--accent);outline-offset:2px}