/* ═══════════════════════════════════════════════════════════════════════════
   MPKM «Решения» — мобильная компоновка (прогон 14.08.2026).

   Прежняя мобильная версия была десктопной раскладкой в одну колонку: девять
   систем производителя превращались в вертикальную стопку, шапка занимала
   1123–1207 px, блок исходных данных — до 1802 px, лента передачи задачи —
   до 1255 px. Ниже страница пересобрана под узкий экран: содержание то же,
   но длинные части раскрываются по требованию.

   Файл подключается только на страницах модуля resheniya и грузится после
   остальных слоёв раздела, поэтому конфликтов каскада не создаёт.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── общая панель раскрытия ─────────────────────────────────────────────── */
.mpkm-mob-fold{margin:8px 0 0}
.mpkm-mob-fold > summary{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  min-height:44px;padding:8px 0;cursor:pointer;list-style:none;
  font-size:14px;font-weight:600;color:var(--sol-ink2,#4a4d55);
  border-top:1px solid var(--sol-line,#e7e5e0)}
.mpkm-mob-fold > summary::-webkit-details-marker{display:none}
.mpkm-mob-fold > summary::after{content:"▾";color:var(--sol-mut,#8b8e95);font-size:12px;flex:0 0 auto}
.mpkm-mob-fold[open] > summary::after{content:"▴"}
.mpkm-mob-fold > summary:focus-visible{outline:2px solid var(--sol-ink,#17181c);outline-offset:2px;border-radius:6px}
.mpkm-mob-fold--tail > summary{border-top:0;padding-top:4px}

@media (max-width:899px){

/* ── 1. Шапка задачи ────────────────────────────────────────────────────── */
.mpkm-solutions--detail .mpkm-sol-hero{padding-top:18px;padding-bottom:18px;gap:14px}
.mpkm-solutions--detail .mpkm-sol-hero__h1{font-size:26px;line-height:1.18;margin:6px 0 8px}
.mpkm-solutions--detail .mpkm-sol-hero__lead{font-size:15px;line-height:1.5;margin:0 0 12px}
.mpkm-solutions--detail .mpkm-sol-hero__actions{gap:8px;margin:0 0 6px}
.mpkm-solutions--detail .mpkm-sol-hero__actions .mpkm-sol-btn{min-height:46px;padding:10px 16px;font-size:14.5px}
/* схема узла не должна занимать первый экран целиком */
.mpkm-solutions--detail .mpkm-sol-hero__pic img{max-height:230px;width:auto;margin:0 auto;display:block}
.mpkm-solutions--detail .mpkm-sol-hero__pic.is-scheme img{max-height:none;width:100%}
.mpkm-solutions--detail .mpkm-sol-legend__cap{font-size:12.5px;line-height:1.4}
/* SOL45-B1: правило писалось под ТЁМНЫЙ герой узла; после SOL38 герой
   светлый, и белый текст на белом фоне давал контраст 1,00 — заголовка
   «Что делает МПКМ, а что подрядчик» на 390 px не было видно вовсе.
   Цвета взяты из палитры: --ink2 (6,49 на белом), --line, --mut. */
.mpkm-solutions--detail .mpkm-sol-hero .mpkm-mob-fold > summary{border-top-color:var(--line,#ecebe7);color:var(--ink2,#5b5e66)}
.mpkm-solutions--detail .mpkm-sol-hero .mpkm-mob-fold > summary::after{color:var(--mut,#9b9ea5)}

/* ── 2. Когда подходит ──────────────────────────────────────────────────── */
.mpkm-sol-fit{padding:16px 0}
.mpkm-sol-fit h2{font-size:20px;margin:0 0 10px}

/* ── 3. Конфигуратор ────────────────────────────────────────────────────── */
.mpkm-cfg .mpkm-sol-sechead h2{font-size:20px}
.mpkm-cfg .mpkm-sol-sechead__note{font-size:13.5px;line-height:1.45}
.mpkm-cfg__when{padding:10px 12px;font-size:14px;margin-bottom:12px}
.mpkm-cfg__mixnote{margin:-4px 0 12px;font-size:12px}
.mpkm-cfg__sum{margin-top:12px}
.mpkm-cfg__sum .mpkm-mob-fold{margin:0}
.mpkm-cfg__sum .mpkm-mob-fold > summary{border-top:0;padding:6px 0}
.mpkm-cfg__sumact{margin:10px 0 0}
.mpkm-cfg__crit{font-size:13px;margin-top:10px}

/* ── 4. Разделы содержания ──────────────────────────────────────────────── */
.mpkm-solutions--detail .mpkm-sol-sec{padding-top:18px;padding-bottom:18px}
.mpkm-solutions--detail .mpkm-sol-sec h2,
.mpkm-solutions--direction .mpkm-sol-sec h2{font-size:20px;line-height:1.22}
.mpkm-solutions--detail .mpkm-sol-sechead{margin-bottom:12px}

/* ── 5. Исходные данные ─────────────────────────────────────────────────── */
/* на узком экране бланки идут одной колонкой, высота — контентная */
.mpkm-pass__cols{grid-template-columns:minmax(0,1fr)}
.mpkm-chk__group ul{columns:auto}
.mpkm-sol-wizard{columns:auto}
.mpkm-pass{padding-top:18px;padding-bottom:18px}
.mpkm-pass__head h2{font-size:20px;margin:0 0 8px}
.mpkm-pass__head p{font-size:13.5px;line-height:1.45;margin:0 0 12px}
.mpkm-pass__cols{gap:14px}
.mpkm-chk__group{margin:0;padding:0;border:0}
.mpkm-chk__group > legend{
  /* заголовок группы переехал в подпись раскрывающей панели */
  position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mpkm-chk__aside{font-size:12.5px;line-height:1.4;margin-top:10px}
.mpkm-pass__foot{margin-top:14px;gap:12px}
.mpkm-sum__row{font-size:13px}
.mpkm-pass__gonote{font-size:12px}

/* ── 6. Передача задачи ─────────────────────────────────────────────────── */
.mpkm-cta{padding-top:20px;padding-bottom:20px}
.mpkm-cta__band{gap:14px;padding:16px}
.mpkm-cta__title{font-size:21px;line-height:1.2;margin:0 0 8px}
.mpkm-cta__lead{font-size:14px;line-height:1.5;margin:0 0 12px}
/* Индекс 01/02/03 остаётся и на телефоне: это часть предложения, а не
   десктопное украшение. Прежде он был скрыт целиком. Здесь он ужат по
   вертикали — делители тоньше, кегль меньше, — чтобы не оттеснять кнопку
   действия, но оставаться полноценным пунктом ленты. */
.mpkm-cta__points{display:block;margin:0 0 14px}
.mpkm-cta__points li{padding:7px 0;font-size:13.5px;line-height:1.38;gap:10px}
.mpkm-cta__num{font-size:11px}
.mpkm-cta__open{width:100%;justify-content:center;min-height:50px;margin:0 0 12px}
.mpkm-cta__formcol[hidden]{display:none}

/* ── 7. Корень раздела ──────────────────────────────────────────────────── */
.mpkm-solutions--root .mpkm-sol-lead{padding-top:18px;padding-bottom:14px}
.mpkm-solutions--root .mpkm-sol-lead__h1{font-size:26px;line-height:1.18}
.mpkm-solutions--root .mpkm-sol-lead__text{font-size:14.5px;line-height:1.5}
.mpkm-sol-dirgrid{grid-template-columns:1fr;gap:10px}
/* направление — компактная строка со схемой-миниатюрой */
.mpkm-sol-dirblock{
  display:grid;grid-template-columns:64px minmax(0,1fr);grid-template-areas:
    "pic name" "pic count" "list list" "more more" "soon soon";
  column-gap:12px;row-gap:4px;align-items:start;padding:12px}
.mpkm-sol-dirblock__pic{
  grid-area:pic;align-self:center;width:64px;height:64px;border-radius:10px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;background:var(--sol-wash,#f7f5f1)}
.mpkm-sol-dirblock__pic img{width:100%;height:100%;object-fit:cover}
.mpkm-sol-dirblock__name{grid-area:name;align-self:end;font-size:16.5px;line-height:1.25;margin:0}
.mpkm-sol-dirblock__name a{min-height:0;padding:2px 0}
.mpkm-sol-dirblock__count{
  grid-area:count;align-self:start;margin:0;font-size:12.5px;color:var(--sol-mut,#8b8e95);
  position:static}
.mpkm-sol-dirblock__list{grid-area:list;margin:4px 0 0}
.mpkm-sol-dirblock__more{grid-area:more}
.mpkm-sol-dirblock__soon{grid-area:soon;font-size:13px}
/* заголовок направления уже ссылка — вторая такая же кнопка не нужна */
.mpkm-sol-dirblock__all{display:none}

/* ── 8. Страница направления ────────────────────────────────────────────── */
.mpkm-sol-dirhero{padding-top:18px;padding-bottom:18px;gap:12px}
.mpkm-sol-dirhero__h1{font-size:25px;line-height:1.18;margin:6px 0 8px}
.mpkm-sol-dirhero__lead{font-size:14.5px;line-height:1.5}
/* схема направления идёт после заголовка и лида и не занимает экран целиком */
.mpkm-sol-dirhero__scheme{order:2;margin:10px 0 0}
.mpkm-sol-dirhero__scheme img{max-height:200px;width:auto;margin:0 auto;display:block}
.mpkm-sol-dirhero__copy{order:1}
.mpkm-sol-cards{grid-template-columns:1fr;gap:10px}
.mpkm-richgrid{grid-template-columns:1fr;gap:14px}
.mpkm-sol-search--local{margin-bottom:8px}

}

/* ── очень узкий экран ──────────────────────────────────────────────────── */
@media (max-width:360px){
  .mpkm-solutions--detail .mpkm-sol-hero__h1{font-size:24px}
  .mpkm-sol-dirblock{grid-template-columns:52px minmax(0,1fr)}
  .mpkm-sol-dirblock__pic{width:52px;height:52px}
}

@media (prefers-reduced-motion:reduce){
  .mpkm-mob-fold{transition:none}
}

/* ── Доводка после замеров 14.08.2026 ────────────────────────────────────── */
@media (max-width:899px){
  /* Строка роли: подпись обязательности переехала под название. Пока она
     стояла в одной строке и не переносилась, на колонку названия оставалось
     около 50 px и строка роли вырастала до 1071 px (замер qa/probe_roles). */
  .mpkm-cfg__roleflag{white-space:normal;font-size:10.5px}
}

@media (max-width:899px){
  /* краткий состав системы: сама планка без раскрытия — одна строка */
  .mpkm-cfg__sum{padding:10px 12px}
  .mpkm-cfg__sumlab{margin-bottom:4px}

  /* технология: подготовка — раскрываемая, шаги — первые четыре */
  .mpkm-sol-prep__text{font-size:14px;line-height:1.5;margin:0 0 8px}
  .mpkm-sol-worksteps{margin:0}
  .mpkm-sol-worksteps > li{font-size:14px;line-height:1.45;padding:6px 0}

  /* документы и объекты: заголовок группы + первые строки */
  .mpkm-sol-doclist > li{padding:7px 0}
  .mpkm-sol-docrow{font-size:14px}
  .mpkm-solutions--v2 .mpkm-sol-docrow a{font-size:14.5px}

  /* мост к другим задачам: две компактные группы вместо двух витрин */
  .mpkm-bridge__row{gap:8px}
  .mpkm-bridge__lab{font-size:15px;margin:0 0 6px}
  .mpkm-bridge__tasks{display:grid;grid-template-columns:1fr;gap:6px}
  .mpkm-sol-chips{gap:6px}
  .mpkm-sol-chips > li > a{font-size:13.5px;padding:7px 11px;min-height:40px}

  /* итог паспорта: строки «что уйдёт инженеру» — под раскрытие */
  .mpkm-pass__foot{flex-direction:column;align-items:stretch}
  .mpkm-pass__go{width:100%}
  .mpkm-pass__go .mpkm-sol-btn{width:100%;justify-content:center;min-height:50px}
  .mpkm-sum__raw{margin-top:6px}

  /* карточка специалиста в ленте передачи: компактная строка */
  .mpkm-cta__info .mpkm-person,
  .mpkm-cta__info [class*="person"]{padding:12px}
  .mpkm-cta__kicker{font-size:12px;margin-bottom:6px}
}

/* ── Третий заход по высоте (замеры 14.08.2026) ──────────────────────────── */
@media (max-width:899px){
  /* карточка адресата: фото рядом с именем, а не над ним */
  .mpkm-cta__person{padding:12px;gap:10px}
  .mpkm-cta__pc{display:grid;grid-template-columns:56px minmax(0,1fr);gap:10px;align-items:center}
  .mpkm-cta__photo,.mpkm-cta__photolink{width:56px;height:56px;flex:0 0 56px}
  .mpkm-cta__photo img{width:56px;height:56px;object-fit:cover;border-radius:12px}
  .mpkm-cta__pname{font-size:15px;line-height:1.25;margin:0}
  .mpkm-cta__ppost{font-size:12.5px;line-height:1.3;margin:2px 0 0}
  .mpkm-cta__pwho{font-size:12px;margin:2px 0 0}
  .mpkm-cta__pover{font-size:12.5px;line-height:1.4;margin:8px 0 0}
  .mpkm-cta__pcontacts{margin:8px 0 0;gap:8px}
  .mpkm-cta__pcontacts a{min-height:42px;font-size:14px}

  /* исходные данные: группы свёрнуты, пояснение о файлах — по требованию */
  .mpkm-pass__colhead{margin:0 0 6px;font-size:13px}
  .mpkm-chk{gap:0}
  .mpkm-pass__sum{padding:0}

  /* пояснение над конфигуратором — раскрываемое */
  .mpkm-cfg > .mpkm-sol-sechead{margin-bottom:10px}
}

/* ── Четвёртый заход: плотность разделов ─────────────────────────────────── */
@media (max-width:899px){
  .mpkm-solutions--detail .mpkm-sol-sec{padding-top:14px;padding-bottom:14px}
  .mpkm-solutions--detail .mpkm-sol-hero__pic img{max-height:210px}
  .mpkm-solutions--detail .mpkm-sol-hero__pic.is-scheme img{max-height:none}
  .mpkm-solutions--detail .mpkm-sol-sechead{margin-bottom:10px}
  .mpkm-sol-clist > li,.mpkm-sol-limits > li,.mpkm-sol-stop > li,.mpkm-sol-dlist > li{
    padding-top:5px;padding-bottom:5px;font-size:14px;line-height:1.45}
  /* маркер контроля — та же жёлтая черта, что и на широком экране */
  .mpkm-sol-clist > li{padding-left:22px}
  .mpkm-sol-calccta__in{padding:14px}
  .mpkm-sol-calccta__txt{font-size:13.5px;line-height:1.45}
  .mpkm-sol-longread > summary,.mpkm-sol-objwrap > summary{min-height:44px;font-size:14px}
}

/* ── Пятый заход: плотность длинных блоков ───────────────────────────────── */
@media (max-width:899px){
  /* вопросы условий: заголовок вопроса — компактная строка */
  .mpkm-sol-wizard .mpkm-sol-q{margin:0}
  .mpkm-sol-q > legend,.mpkm-sol-q__head{font-size:14px;line-height:1.35}
  .mpkm-sol-q.is-collapsed{padding-top:2px;padding-bottom:2px}
  .mpkm-sol-q.is-collapsed > *:not(legend):not(.mpkm-sol-q__head){display:none}

  /* вводные абзацы разделов: тот же текст, меньше воздуха */
  .mpkm-pass__head p{font-size:13px;line-height:1.42;margin-bottom:10px}
  .mpkm-cta__lead{font-size:13.5px;line-height:1.45;margin-bottom:10px}
  .mpkm-cta__pover{display:none}
  .mpkm-cta__person{padding:10px}
  .mpkm-cta__pcontacts{margin-top:6px}
  .mpkm-cta__band{padding:14px}
  .mpkm-pass__foot{margin-top:10px}
  .mpkm-pass__cols{gap:10px}
}

/* Хлебные крошки: на этих страницах последняя крошка длинная, и общесайтовый
   приём «nowrap + горизонтальная прокрутка» показывал её обрезанной. Здесь
   крошки переносятся по словам — текст виден целиком без прокрутки. */
#wrapper .breadcrumbs,#wrapper .breadcrumbs *{white-space:normal!important}
#wrapper .breadcrumbs{overflow-x:visible;display:block;line-height:1.5}

/* ── Шестой заход: страницы направлений и лента передачи ─────────────────── */
@media (max-width:899px){
  .mpkm-sol-cards .mpkm-sol-card{padding:12px}
  .mpkm-sol-card__name{font-size:15.5px;line-height:1.3}
  .mpkm-sol-card__anons{font-size:13px;line-height:1.42}

  /* лента передачи задачи: без витринной надстройки */
  .mpkm-cta__kicker{display:none}
  .mpkm-cta__title{font-size:19px;margin-bottom:6px}
  .mpkm-cta__band{padding:12px}

  /* шапка задачи: схема ещё компактнее */
  .mpkm-solutions--detail .mpkm-sol-hero__pic img{max-height:190px}
  .mpkm-solutions--detail .mpkm-sol-hero__pic.is-scheme img{max-height:none}
  .mpkm-solutions--detail .mpkm-sol-hero{padding-top:16px;padding-bottom:16px}
}

/* ── Конфигуратор на телефоне: доводка после перехода на дорожки ─────────── */
@media (max-width:899px){
  .mpkm-cfg__tabs{margin-bottom:12px;gap:6px}
  .mpkm-cfg__tabs--tech .mpkm-cfg__tab{min-height:46px;padding:7px 14px}
  .mpkm-cfg__tabs--tech .mpkm-cfg__tab > b{font-size:14px}
  .mpkm-cfg__tabs--sys .mpkm-cfg__tab{min-height:44px;padding:6px 12px}
  .mpkm-cfg__tabs--role .mpkm-cfg__tab{min-height:44px;padding:6px 11px}
  .mpkm-cfg__tabs.is-many > .mpkm-cfg__tab{width:min(200px,60vw)}
  /* один ряд вместо переноса: высота полосы не зависит от длины названий */
  .mpkm-cfg.is-wired .mpkm-cfg__tabs{
    flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x proximity;padding-bottom:4px;scrollbar-width:thin}
  .mpkm-cfg.is-wired .mpkm-cfg__tabs > .mpkm-cfg__tab{
    flex:0 0 auto;max-width:min(230px,66vw);scroll-snap-align:start}
  .mpkm-cfg__stagehead{margin-bottom:8px}
  .mpkm-cfg__stagename{font-size:16px}
  .mpkm-cfg__stagesel{font-size:12.5px;line-height:1.4}
  .mpkm-cfg__single{margin-bottom:10px;font-size:14px}
  /* пояснения способа и правило выбора уходят под раскрытие */
  .mpkm-cfg .mpkm-mob-fold{margin:6px 0 0}
  .mpkm-cfg .mpkm-mob-fold > summary{min-height:38px;padding:5px 0;font-size:13px}
}

/* Поправка контраста прошлого прогона перенесена к владельцам: токен
   --sol-mut объявлен в mpkm-solutions.css, зелёный «в наличии» — в
   solutions-configurator.css. Вычисленные цвета те же, объявление одно. */

/* зона нажатия ссылок-документов доводится до 24 px */
.mpkm-sol-docrow a,.mpkm-sol-doclist a{display:inline-flex;align-items:center;min-height:24px}

/* Белый цвет подписи раскрывающей панели действует только в тёмной части
   шапки. Панель «Обозначения на схеме» лежит внутри белой карточки схемы —
   там текст должен оставаться тёмным (проверка контраста дала 1:1). */
@media (max-width:899px){
  .mpkm-solutions--detail .mpkm-sol-hero__pic .mpkm-mob-fold > summary{
    color:var(--sol-ink2,#4a4f57);border-top-color:var(--sol-line,#e7e5e0)}
  .mpkm-solutions--detail .mpkm-sol-hero__pic .mpkm-mob-fold > summary::after{
    color:var(--sol-mut,#63666d)}
  .mpkm-solutions--detail .mpkm-sol-hero__pic .mpkm-sol-legend__list li{color:var(--sol-ink2,#4a4f57)}
}