/* Помощник подбора форсунки — главная и карточка товара (см.
   apps/catalog/templatetags/spec_helper_tags.py, apps/catalog/helper_views.py
   и static/catalog/spec-helper.js). Кнопка+сетка вариантов — общий виджет
   с пикером раздела, вынесен в dropdown.js/dropdown.css; сами карточки
   выдачи — общая мини-карточка (minicard.css, .mc-grid), одна на весь
   сайт. Здесь только то, что у самого помощника своё: блок и то, что под
   сеткой. Без рамок — блок отделяют от страницы заливка и отступ, поля
   друг от друга — только отступ: сайт светлый документ, а не набор рамок
   (см. dropdown.css — там же образцы, на которые это правило опирается). */
/* Блока-обёртки нет (владелец 23.09.2026: «убери блок, в котором вложено»):
   подложка с отступом сдвигала весь подбор на 32 px правее колонки
   страницы, и он не совпадал по вертикали ни с чем вокруг. Теперь он стоит
   прямо в колонке — сайт белый документ, отделять его нечем, кроме
   отступа. Заливка осталась только в окне помощника (templates/base.html,
   .ahelper), где блок и правда вложен в ленту разговора. */
.spec-helper{position:relative; margin:var(--s8) 0}
/* Заголовок объясняет, что здесь делают (владелец 23.09.2026: «не понятен,
   надо объяснить, как он работает»): строка-название и под ней правило
   подбора. Моно-капсом, как прочие заголовки разделов страницы, объяснение
   не напишешь — это фраза, а не ярлык. */
.sh-head{display:block; margin:0 0 5px; font:500 15px/1.3 var(--sans); color:var(--ink)}
.sh-how{margin:0 0 var(--s6); max-width:78ch;
  font:400 12.5px/1.6 var(--sans); color:var(--muted)}

/* Выдача и «все результаты» — отделены от полей только отступом, без
   линии-разделителя. Пока сервер считает новую выдачу, прежняя глохнет,
   но не прыгает — то же, что в сетке каталога (catalog/list.html,
   #results.busy). */
.sh-results{margin-top:var(--s7)}
/* Пока ничего не выбрано: из чего выбирать. Ходовые размеры ставят
   значение в поле, марки ведут на свои страницы — карточек тут нет,
   до выбора они ничего не говорят (владелец 23.09.2026). */
.sh-start p{margin:0 0 var(--s6)}
.sh-start p:last-child{margin-bottom:0}
.sh-start span{display:block; margin-bottom:var(--s3);
  font:500 10px/1 var(--mono); letter-spacing:.14em;
  text-transform:uppercase; color:var(--faint)}
.sh-start button, .sh-start a{display:inline-block; margin:0 var(--s2) var(--s2) 0;
  border:0; padding:7px var(--s4); border-radius:var(--r-pill);
  background:var(--chip); color:var(--ink); cursor:pointer; text-decoration:none;
  font:500 12.5px/1.2 var(--sans)}
.sh-start button:hover, .sh-start a:hover{background:color-mix(in srgb, var(--ink) 12%, transparent)}
.sh-start button:focus-visible, .sh-start a:focus-visible{outline:2px solid var(--ink); outline-offset:2px}
.sh-start s{text-decoration:none; color:var(--faint); font:400 10.5px/1 var(--mono)}
/* На телефоне подпись ряда — своей строкой: рядом с ней первая метка
   уходила вправо, а остальные шли от левого края, и ряд выглядел рваным. */

.spec-helper.busy .sh-results{opacity:.45; pointer-events:none; transition:opacity .12s}
.sh-empty{margin:0; font:400 12.5px/1.5 var(--sans); color:var(--muted)}
.sh-more{display:inline-block; margin-top:var(--s6); font:500 11px/1 var(--mono); color:var(--muted);
  text-decoration:none; border-bottom:1px solid var(--line)}
.sh-more:hover{color:var(--ink); border-color:var(--ink)}