/* ==========================================================================
   MPKM «Решения» — конфигуратор системы.
   Подключается внутри /resheniya/ поверх mpkm-solutions.css.

   Единственный владелец конфигуратора: уровни, дорожки выбора, товарная
   карточка, критерий и краткий состав системы. Списка контроля здесь нет —
   его оформляет solutions-editorial.css; ограничения и стоп-условия —
   solutions-limits.css.

   ── Раскладка рабочей зоны ────────────────────────────────────────────────
   Уровни идут сверху вниз: способ → система → роль → товар. Прежняя сетка
   .mpkm-cfg__work делила рабочую зону на 290 px и остаток. Она была написана
   под старую разметку, где слева стоял список ролей, а справа — товар. После
   перехода на уровни с панелями в узкую колонку попали и роли, и карточка
   товара, и критерий выбора, а краткому составу системы досталась вся
   оставшаяся ширина — при собственной высоте в 200–260 px он растягивался
   до 1000 px и давал белое поле во весь экран.

   Здесь рабочая зона собрана заново: дорожка ролей — полоса во всю ширину,
   товар с критерием — широкая колонка, краткий состав — узкая колонка своей
   высоты. Контейнер рабочей зоны не залит: поверхность есть у панели роли и
   у сводки, поэтому под короткой сводкой оказывается фон страницы, а не
   пустая часть карточки.

   Сетка включается только при .is-wired — этот класс ставит скрипт после
   сборки уровней. Без скриптов панели остаются видимыми и читаются подряд,
   и раскладывать их по ячейкам нельзя.
   ========================================================================== */

/* ---------- ритм страницы: воздух между смысловыми блоками ---------- */
.mpkm-solutions--v2 > section,
.mpkm-solutions--v2 > details{margin:0 0 var(--sol-gap-chapter)}
.mpkm-solutions--v2 > section:last-child{margin-bottom:0}
/* Две главные смены темы на странице — от задачи к составу системы и от
   состава к работам — держат больший интервал шкалы. Остальные блоки идут
   ровным шагом: одинаково крупный отступ между каждым заголовком и списком
   и был тем, из-за чего страница выглядела разреженной. */
.mpkm-solutions--v2 > .mpkm-sol-hero,
.mpkm-solutions--v2 > .mpkm-cfg{margin-bottom:var(--sol-gap-major)}
.mpkm-solutions--v2 .mpkm-sol-sechead{margin-bottom:var(--sol-gap-head)}
.mpkm-solutions--v2 .mpkm-sol-sechead h2{font-size:clamp(20px,2.05vw,26px)}
.mpkm-solutions--v2 .mpkm-subcap{
  margin:0 0 4px;font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--sol-mut)}
.mpkm-solutions--v2 .mpkm-sol-sechead__note{margin:6px 0 0;color:var(--sol-ink2);font-size:14.5px;max-width:74ch}

/* технология и приёмка — простые последовательности без рамок в рамках */
.mpkm-solutions--v2 .mpkm-sol-worksteps{counter-reset:ws;display:grid;gap:8px}
.mpkm-solutions--v2 .mpkm-sol-worksteps > li{
  counter-increment:ws;position:relative;padding:1px 0 1px 40px;font-size:15.5px;line-height:1.5}
.mpkm-solutions--v2 .mpkm-sol-worksteps > li::before{
  content:counter(ws);position:absolute;left:0;top:0;width:27px;height:27px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;background:var(--sol-brand);
  color:var(--sol-brand-ink);font-weight:700;font-size:12.5px;font-variant-numeric:tabular-nums}

/* документы — компактный список, а не плитки */
.mpkm-solutions--v2 .mpkm-sol-doclist{display:grid;gap:2px}
/* Разделительная линия через весь ряд снята. Строку от строки отделяет
   интервал, а ссылку от подписи типа документа — начертание и подчёркивание
   самой ссылки. */
.mpkm-solutions--v2 .mpkm-sol-docrow{
  display:grid;grid-template-columns:94px minmax(0,1fr);gap:12px;align-items:baseline;
  padding:5px 0}
.mpkm-solutions--v2 .mpkm-sol-docrow i{
  font-style:normal;font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--sol-mut)}
/* ссылка различается подчёркиванием под собственным текстом, а не полосой
   во всю ширину ряда */
.mpkm-solutions--v2 .mpkm-sol-docrow a{font-size:15px;line-height:1.4;
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;
  text-decoration-color:var(--sol-line2)}
.mpkm-solutions--v2 .mpkm-sol-docrow a:hover{text-decoration-color:var(--sol-ink)}
.mpkm-solutions--v2 .mpkm-sol-objwrap{margin-top:12px}
.mpkm-solutions--v2 .mpkm-sol-objwrap > summary{
  cursor:pointer;padding:10px 0;border-top:1px solid var(--sol-line);
  font-size:14px;font-weight:600;color:var(--sol-ink2)}

/* длинный перечень оснований: первые шесть строк видны, остальные под раскрытием */
.mpkm-solutions--v2 .mpkm-sol-docmore{margin:4px 0 0}
.mpkm-solutions--v2 .mpkm-sol-docmore > summary{
  cursor:pointer;font-size:14px;font-weight:600;color:var(--sol-ink2);padding:9px 0}

/* ---------- конфигуратор ---------- */
.mpkm-cfg{margin:0}

/* единственный вариант уровня: рубрика, название и количество — три разные
   сущности, а не одна служебная строка через двоеточие и тире */
.mpkm-cfg__single{
  margin:0 0 12px;display:flex;flex-direction:column;gap:2px;
  font-size:15px;color:var(--sol-ink2)}
.mpkm-cfg__single b{color:var(--sol-ink)}
.mpkm-cfg__singlelab{
  font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--sol-mut)}
.mpkm-cfg__singlename{font-size:17px;font-weight:700;line-height:1.28;color:var(--sol-ink)}
.mpkm-cfg__singlesub{font-size:13px;color:var(--sol-mut)}
.mpkm-cfg__single--sys .mpkm-cfg__singlename{font-size:15.5px}

.mpkm-cfg__when{
  margin:0 0 12px;padding:10px 14px;border-left:3px solid var(--sol-brand);
  background:var(--sol-wash);border-radius:0 10px 10px 0;font-size:15px;line-height:1.5}
.mpkm-cfg__mixnote{margin:-6px 0 12px;font-size:12.5px;color:var(--sol-mut);max-width:86ch}

/* ── рабочая зона: роль и товар ─────────────────────────────────────────── */
.mpkm-cfg__work{
  display:grid;grid-template-columns:minmax(0,1fr);gap:14px;
  padding:0;border:0;background:transparent}
.mpkm-cfg__track{min-width:0;max-width:100%}

.mpkm-cfg__stagehead{margin:0 0 10px}
.mpkm-cfg__stagename{font-size:17px;font-weight:700;margin:0 0 3px;line-height:1.3}
.mpkm-cfg__stagesel{margin:0;font-size:13px;color:var(--sol-mut)}
.mpkm-cfg__roleflag{
  display:inline-flex;align-items:center;gap:6px;margin:2px 0 0;
  font-size:11.5px;color:var(--sol-mut-wash);white-space:nowrap}
.mpkm-cfg__rolen{
  display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:18px;
  padding:0 5px;border-radius:999px;background:var(--sol-line2);color:var(--sol-ink2);
  font-size:10.5px;font-weight:700;font-variant-numeric:tabular-nums}

.mpkm-cfg__track{
  display:grid;grid-auto-flow:column;grid-auto-columns:100%;overflow-x:auto;scroll-snap-type:x mandatory;
  overscroll-behavior-x:contain;gap:12px;scrollbar-width:thin}
.mpkm-cfg__card{scroll-snap-align:start;display:grid;grid-template-columns:112px minmax(0,1fr);gap:14px;min-width:0}
.mpkm-cfg__pic{
  display:flex;align-items:center;justify-content:center;height:112px;border-radius:10px;
  background:var(--sol-wash);overflow:hidden}
.mpkm-cfg__pic img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.mpkm-cfg__noimg{display:block;width:44px;height:44px;border-radius:8px;background:var(--sol-line2)}
.mpkm-cfg__body{min-width:0;display:flex;flex-direction:column;gap:4px}
.mpkm-cfg__pos{
  margin:0;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--sol-mut);font-variant-numeric:tabular-nums}
/* название товара — целиком, без клипа и многоточия */
.mpkm-cfg__name{
  font-size:16px;line-height:1.3;margin:0;
  overflow:visible;white-space:normal;overflow-wrap:break-word}
.mpkm-cfg__name a{text-decoration:none;border-bottom:1px solid var(--sol-line)}
.mpkm-cfg__name a:hover{border-bottom-color:var(--sol-ink)}
/* краткое описание позиции: длину ограничивает сам текст, а не клип */
.mpkm-cfg__anons{
  margin:0;font-size:13.5px;line-height:1.45;color:var(--sol-ink2);
  display:block;overflow:visible}
.mpkm-cfg__meta{margin:2px 0 0;display:flex;flex-wrap:wrap;gap:10px;align-items:baseline}
.mpkm-cfg__price{font-size:16px;font-weight:700;font-variant-numeric:tabular-nums}
.mpkm-cfg__stock{font-size:12.5px;color:var(--sol-mut)}
.mpkm-cfg__stock.is-in{color:#166b3b}
.mpkm-cfg__open{margin:auto 0 0}
.mpkm-cfg__open .mpkm-sol-btn{min-height:38px;padding:7px 15px;font-size:13.5px}
.mpkm-cfg__nav{display:flex;align-items:center;gap:10px;margin:10px 0 0}
.mpkm-cfg__arrow{
  width:38px;height:38px;border-radius:10px;border:1.5px solid var(--sol-line);background:var(--sol-bg);
  font-size:19px;line-height:1;cursor:pointer;color:var(--sol-ink)}
.mpkm-cfg__arrow:hover:not(:disabled){border-color:var(--sol-ink)}
.mpkm-cfg__arrow:disabled{opacity:.38;cursor:default}
.mpkm-cfg__count{font-size:13px;color:var(--sol-mut);font-variant-numeric:tabular-nums}
.mpkm-cfg__crit{margin:10px 0 0;font-size:13.5px;color:var(--sol-ink2);line-height:1.5}
.mpkm-cfg__catlink{margin:5px 0 0;font-size:12.5px;color:var(--sol-mut)}
.mpkm-cfg__catlink a{color:var(--sol-ink2)}
.mpkm-cfg__empty{margin:0;font-size:14.5px;color:var(--sol-ink2);line-height:1.5}
.mpkm-cfg__nofit{
  padding:16px;border:1px dashed var(--sol-line2);border-radius:var(--sol-r);background:var(--sol-wash)}
.mpkm-cfg__nofit-lab{
  margin:0 0 6px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--sol-mut-wash)}
.mpkm-cfg__nofit p{font-size:15px;line-height:1.55;max-width:80ch}
.mpkm-cfg__nofit-act{margin:12px 0 0}

/* текстовый перечень альтернатив роли — режим без скриптов */
.mpkm-cfg__altlist{display:grid;gap:4px;margin:10px 0 0}
.mpkm-cfg__altlist li{
  display:flex;flex-wrap:wrap;gap:10px;align-items:baseline;font-size:13.5px;
  padding:6px 0;border-top:1px dotted var(--sol-line)}
.mpkm-cfg__altlist a{color:var(--sol-ink)}
.mpkm-cfg__altlist span{font-size:12px;color:var(--sol-mut)}
.mpkm-cfg__altlist span.is-in{color:#166b3b}

/* полный перечень позиций роли: свёрнут, при раскрытии — названия целиком */
.mpkm-cfg__all{margin:8px 0 0;border-top:1px solid var(--sol-line);padding-top:6px}
.mpkm-cfg__all[hidden]{display:none}
.mpkm-cfg__all > summary{
  cursor:pointer;font-size:13px;font-weight:600;color:var(--sol-ink2);
  padding:6px 0;min-height:34px;display:flex;align-items:center;gap:8px;list-style:none}
.mpkm-cfg__all > summary::-webkit-details-marker{display:none}
.mpkm-cfg__all > summary::after{content:"▾";color:var(--sol-mut);font-size:12px}
.mpkm-cfg__all[open] > summary::after{content:"▴"}
.mpkm-cfg__all > summary:focus-visible{outline:2px solid var(--sol-ink);outline-offset:2px;border-radius:6px}
.mpkm-cfg__alllist{display:grid;gap:4px;margin:6px 0 2px}
.mpkm-cfg__thumb{
  display:grid;grid-template-columns:24px minmax(0,1fr);gap:8px;align-items:start;
  width:100%;text-align:left;
  border:1.5px solid var(--sol-line);background:var(--sol-bg);border-radius:9px;
  padding:8px 10px;font-size:13px;line-height:1.35;cursor:pointer;color:var(--sol-ink2);
  /* полное название: ни клипа, ни многоточия */
  max-width:none;overflow:visible;text-overflow:clip;white-space:normal;overflow-wrap:break-word}
.mpkm-cfg__thumbn{
  display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;
  border-radius:7px;background:var(--sol-line2);color:var(--sol-ink2);
  font-size:11px;font-weight:700;font-variant-numeric:tabular-nums}
.mpkm-cfg__thumbt{min-width:0}
.mpkm-cfg__thumb[aria-current="true"]{border-color:var(--sol-ink);color:var(--sol-ink);font-weight:600}
.mpkm-cfg__thumb[aria-current="true"] .mpkm-cfg__thumbn{background:var(--sol-brand);color:var(--sol-brand-ink)}
.mpkm-cfg__thumb:hover{border-color:var(--sol-ink)}
.mpkm-cfg__thumb:focus-visible{outline:2px solid var(--sol-ink);outline-offset:2px}

/* ── краткий состав системы ─────────────────────────────────────────────── */
.mpkm-cfg__sum{
  margin:0;padding:15px 16px;border:1px solid var(--sol-line);border-radius:var(--sol-r);
  background:var(--sol-bg);align-self:start}
.mpkm-cfg__sumlab{
  margin:0 0 8px;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--sol-mut)}
.mpkm-cfg__sumlist{display:grid;gap:4px}
.mpkm-cfg__sumlist > li{
  display:grid;grid-template-columns:minmax(150px,240px) minmax(0,1fr);gap:12px;align-items:baseline;
  padding:5px 0;border-bottom:1px dotted var(--sol-line)}
.mpkm-cfg__sumrole{font-size:13px;color:var(--sol-mut)}
.mpkm-cfg__sumpick{font-size:14.5px;font-weight:600}
.mpkm-cfg__sumact{margin:12px 0 0}

/* ── Дорожка выбора уровня ──────────────────────────────────────────────────
   Уровень — контейнер с любым числом панелей. Показ переключает скрипт через
   hidden и aria-selected. Числовых селекторов здесь нет: правило одно и не
   зависит от количества способов, систем и ролей. */
.mpkm-cfg__level{min-width:0}
.mpkm-cfg__panel{min-width:0}
.mpkm-cfg__panel[hidden]{display:none}

.mpkm-cfg__tabs{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 12px;min-width:0}
.mpkm-cfg__tab{
  display:flex;flex-direction:column;gap:2px;justify-content:center;
  min-height:52px;padding:8px 16px;border:1.5px solid var(--sol-line);
  border-radius:var(--sol-r);background:var(--sol-bg);cursor:pointer;
  font:inherit;color:var(--sol-ink);text-align:left;
  transition:border-color .16s,background .16s,color .16s}
.mpkm-cfg__tab > b{font-size:15px;font-weight:700;line-height:1.25}
.mpkm-cfg__tab > small{
  font-size:12.5px;color:var(--sol-mut);line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mpkm-cfg__tab:hover{border-color:var(--sol-ink)}
.mpkm-cfg__tab:focus-visible{outline:3px solid var(--sol-brand);outline-offset:2px}

/* выбранный способ — тёмный, выбранная система — фирменный жёлтый:
   уровни различаются не только положением, но и видом */
.mpkm-cfg__tabs--tech .mpkm-cfg__tab[aria-selected="true"]{
  background:#17181c;border-color:#17181c;color:#fff}
.mpkm-cfg__tabs--tech .mpkm-cfg__tab[aria-selected="true"] > small{color:#cfd0d4}
.mpkm-cfg__tabs--sys .mpkm-cfg__tab[aria-selected="true"]{
  background:var(--sol-brand);border-color:var(--sol-brand-d);color:var(--sol-brand-ink)}
.mpkm-cfg__tabs--sys .mpkm-cfg__tab[aria-selected="true"] > small{color:var(--sol-brand-ink)}
.mpkm-cfg__tabs--sys .mpkm-cfg__tab{min-height:46px;padding:7px 14px}
.mpkm-cfg__tabs--sys .mpkm-cfg__tab > b{font-size:14px}

.mpkm-cfg__tabs--role{margin:0 0 12px}
.mpkm-cfg__tabs--role .mpkm-cfg__tab{min-height:46px;padding:6px 13px;gap:1px}
.mpkm-cfg__tabs--role .mpkm-cfg__tab > b{font-size:14px}
.mpkm-cfg__tabs--role .mpkm-cfg__tab > small{font-size:11.5px;-webkit-line-clamp:1}
/* Выбранная роль показывается фоном, цветом текста и обычной границей.
   Внутренняя тень inset 3px 0 0 снята: это была накладная деталь поверх
   границы, а не сама граница. */
.mpkm-cfg__tabs--role .mpkm-cfg__tab[aria-selected="true"]{
  background:var(--sol-ink);border-color:var(--sol-ink);color:#fff}
.mpkm-cfg__tabs--role .mpkm-cfg__tab[aria-selected="true"] > small{color:#cfd0d4}

/* много вариантов — дорожка со скольжением, а не стопка на весь экран */
.mpkm-cfg__tabs.is-many{
  flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity;
  overscroll-behavior-x:contain;padding-bottom:6px;scrollbar-width:thin}
.mpkm-cfg__tabs.is-many > .mpkm-cfg__tab{
  flex:0 0 auto;width:min(230px,64vw);scroll-snap-align:start}

/* до включения скрипта панели идут подряд — подпись панели помогает читать */
.mpkm-cfg__panelname{margin:0 0 10px;font-size:14.5px;color:var(--sol-ink2)}
.mpkm-cfg.is-wired .mpkm-cfg__panelname{display:none}
.mpkm-cfg__level--sys{margin-top:4px}
.mpkm-cfg__level--role{min-width:0}

/* ══ Раскладка рабочей зоны на широком экране ════════════════════════════════
   Дорожка ролей занимает обе колонки, товар с критерием — широкую левую,
   краткий состав — узкую правую своей высоты. Уровень раскрывается в сетку
   (display:contents), поэтому три ячейки получаются без новых обёрток.
   Правило действует только со скриптом: без него панели видны все сразу и
   раскладывать их по строкам нельзя. */
@media (min-width:1024px){
  .mpkm-cfg.is-wired .mpkm-cfg__work{
    grid-template-columns:minmax(0,1fr) minmax(296px,340px);
    grid-template-rows:auto auto;gap:16px 24px;align-items:start}
  .mpkm-cfg.is-wired .mpkm-cfg__level--role{display:contents}
  .mpkm-cfg.is-wired .mpkm-cfg__tabs--role,
  .mpkm-cfg.is-wired .mpkm-cfg__single--role{grid-column:1/-1;grid-row:1;margin:0}
  /* при шести ролях дорожка переносится, а не превращается в скроллер:
     во всю ширину рабочей зоны они помещаются в одну-две строки */
  .mpkm-cfg.is-wired .mpkm-cfg__tabs--role.is-many{flex-wrap:wrap;overflow:visible;padding-bottom:0}
  .mpkm-cfg.is-wired .mpkm-cfg__tabs--role.is-many > .mpkm-cfg__tab{width:auto;max-width:340px}
  .mpkm-cfg.is-wired .mpkm-cfg__panel[data-role]{
    grid-column:1;grid-row:2;
    background:var(--sol-bg);border:1px solid var(--sol-line);border-radius:var(--sol-r);padding:18px}
  .mpkm-cfg.is-wired .mpkm-cfg__sum{grid-column:2;grid-row:2}
  /* в узкой колонке роль стоит над названием, а не рядом с ним */
  .mpkm-cfg.is-wired .mpkm-cfg__sumlist > li{grid-template-columns:minmax(0,1fr);gap:1px;padding:6px 0}
  .mpkm-cfg.is-wired .mpkm-cfg__sumrole{font-size:12px}
  .mpkm-cfg__card{grid-template-columns:150px minmax(0,1fr);gap:18px}
  .mpkm-cfg__pic{height:150px}
}
@media (max-width:520px){
  .mpkm-cfg__card{grid-template-columns:84px minmax(0,1fr);gap:12px}
  .mpkm-cfg__pic{height:84px}
}
@media (prefers-reduced-motion:reduce){
  .mpkm-cfg__track{scroll-behavior:auto}
  .mpkm-cfg *{transition:none}
}

/* SOL26: способ без пригодной системы и подсказка чек-листа. */
.mpkm-cfg__nosys{margin:10px 0 0;color:var(--sol-mut);font-size:13.5px;line-height:1.55}
.mpkm-cfg__nosys .mpkm-sol-btn{margin-left:8px}
.mpkm-chk__hint{margin:2px 0 8px 30px;color:var(--sol-mut);font-size:12.5px;line-height:1.5;list-style:none}

/* SOL27: слои, которые назначает инженер. */
.mpkm-cfg__byeng{margin:10px 0 0;color:var(--sol-mut);font-size:13px;line-height:1.55}

/* SOL28: фасовка рядом с ценой — без неё цены линейки несопоставимы. */
.mpkm-cfg__unit{color:var(--sol-mut,#5b5e66);font-size:12.5px;white-space:nowrap}