/* boiler-picker.css — блок «Какой котёл вам нужен» на /catalog/.
   Класс-префикс pick-. Грузится только в <head> хаба, весит < 12 КБ. */

.pick {
  padding: 48px 0 40px;
  border-bottom: 1px solid var(--border, rgba(255,255,255,.07));
  background: var(--bg, #13161D);
  /* #podbor под фиксированной шапкой, как .sec в catalog.css */
  scroll-margin-top: calc(var(--nav-h, 60px) + 20px);
}
.pick__h2 {
  font-family: var(--font-display, Montserrat, sans-serif);
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  color: var(--text, #ECF0FF);
  margin: 0 0 .5rem;
}
.pick__lede {
  color: var(--muted-lt, #9AAAC8);
  max-width: 62ch;
  margin: 0 0 1.75rem;
  line-height: 1.5;
}

/* Чертёж */
.pick__sheet {
  background: #0B2A4A;
  border: 1px solid rgba(127,182,255,.28);
  border-radius: var(--r-lg, 12px);
  padding: 18px 18px 14px;
  /* Чертёж стоит ПОСЛЕ подбора (аудит 30.09): вопрос первым сразу под
     вступлением, пример флагмана следом. */
  margin-top: 28px;
}
.pick__drawing { width: 100%; position: relative; cursor: pointer; padding-bottom: 54px; }
.pick__drawing svg { width: 100%; height: auto; }
/* Специфичность важна: без класса-предка эти правила слабее, чем
   ".pick__drawing svg" выше, и обе схемы рендерились бы сразу.
   Широкая схема только от 1024px: уже её подписи мельче 11px.
   Между 641 и 1023 узкая схема не шире 400px, иначе лист в экран ростом. */
.pick__drawing .pick__bp--desktop { display: none; }
.pick__drawing .pick__bp--mobile  { display: block; max-width: 400px; margin-inline: auto; }
@media (min-width: 1024px) {
  .pick__drawing .pick__bp--mobile  { display: none; }
  .pick__drawing .pick__bp--desktop { display: block; }
}
.pick__drawing-note {
  margin: 14px 2px 0;
  font-size: .86rem;
  line-height: 1.5;
  color: #B9CBEB;
}
.pick__drawing-note a {
  color: #5FD4FF;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(95,212,255,.4);
}
.pick__drawing-note a:hover { border-color: #5FD4FF; }
.pick__drawing-note a:focus-visible { outline: 2px solid #5FD4FF; outline-offset: 2px; }

/* Весь чертёж = кнопка «Подобрать котёл»: касание ведёт к подбору.
   Кнопка лежит поверх рисунка, сам рисунок остаётся картинкой с
   описанием для скринридера. */
.pick__go {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; padding: 0; border: 0; border-radius: var(--r, 6px);
  background: transparent; cursor: pointer;
  display: flex; align-items: flex-end; justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
.pick__go:focus-visible { outline: 3px solid #5FD4FF; outline-offset: 3px; }
.pick__go-pill {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: var(--tap, 44px); padding: 0 20px; margin: 0;
  border-radius: 999px; background: #5FD4FF; color: #0B2A4A;
  font: 700 .82rem/1 var(--font-body, Montserrat, sans-serif);
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
  transition: transform var(--dur-fast, .15s) var(--ease-out, ease), background var(--dur-fast, .15s) var(--ease-out, ease);
}
.pick__go:hover .pick__go-pill { background: #9BE5FF; transform: translateY(-2px); }
.pick__go-arrow { font-size: 1rem; }

/* Инструмент / прогрессив-энхансмент */
.pick__tool {
  min-height: 250px;
  border: 1px solid var(--border-g, rgba(201,164,53,.22));
  border-radius: var(--r-lg, 12px);
  background: var(--card, #1D2130);
  padding: 18px 14px 16px;
}
@media (min-width: 640px) { .pick__tool { padding: 24px 24px 20px; } }
/* Подбор стоит над чертежом, и пока boiler-picker.js не нарисовал первый
   шаг, место под ним держит min-height. На планшете и на столе чертёж
   виден уже в первом экране, и рост подбора с 250px до высоты шага
   сдвигал его вниз (CLS 0,044 на 768x1024 при опоздавшем скрипте).
   Значения на 4–10px выше высоты первого шага, замеренной 30.09:
   619px до 739px, 601px до 766px, 580px до 1023px, 488–490px до
   1098px, 467–474px дальше. На телефоне чертёж в первый экран не
   попадает, там запаса не нужно. Поменялся текст первого шага:
   перемерить (_ops/test-cro-fixes.py, F3, CLS на 768 и 1024). */
@media (min-width: 641px)  { .pick__tool { min-height: 624px; } }
@media (min-width: 767px)  { .pick__tool { min-height: 584px; } }
@media (min-width: 1024px) { .pick__tool { min-height: 494px; } }
@media (min-width: 1099px) { .pick__tool { min-height: 478px; } }
.pick__fallback {
  display: flex; flex-wrap: wrap; gap: 10px;
}
.pick__fallback a {
  display: inline-flex; align-items: center; min-height: var(--tap, 44px);
  padding: 0 18px; border: 1px solid var(--border-g, rgba(201,164,53,.22));
  border-radius: var(--r, 6px); color: var(--text, #ECF0FF);
  text-decoration: none; font-size: .92rem;
}
.pick__fallback a:hover { border-color: var(--gold-ink, #C9A435); color: var(--gold-ink, #C9A435); }
.pick__fallback a:focus-visible, .pick-card__link:focus-visible, .pick-link:focus-visible {
  outline: 2px solid var(--gold-ink, #C9A435); outline-offset: 2px;
}

.pick__stepper[hidden], .pick__tool > [hidden] { display: none !important; }

/* Прогресс: три сегмента с названиями шагов */
.pick-steps {
  list-style: none; margin: 0 0 18px; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
.pick-steps__i { min-width: 0; }
.pick-steps__bar {
  display: block; height: 5px; border-radius: 3px; margin-bottom: 8px;
  background-color: var(--border, rgba(255,255,255,.07));
  background-image: linear-gradient(var(--gold, #C9A435), var(--gold, #C9A435));
  background-repeat: no-repeat; background-size: 0 100%;
}
.pick-steps__i.is-done .pick-steps__bar,
.pick-steps__i.is-now .pick-steps__bar { background-size: 100% 100%; }
.pick-steps__i.is-now .pick-steps__bar { animation: pick-fill var(--dur-slow, .5s) var(--ease-out, ease) both; }
@keyframes pick-fill { from { background-size: 0 100%; } to { background-size: 100% 100%; } }
.pick-steps__t {
  display: flex; align-items: center; gap: 6px;
  font-size: .78rem; font-weight: 600; color: var(--muted-lt, #9AAAC8);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pick-steps__n {
  flex: none; display: inline-grid; place-items: center;
  width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid var(--muted, #7C90B2);
  font-size: .7rem; font-weight: 700; color: var(--muted-lt, #9AAAC8);
}
/* 360 до 399: три названия в одну строку без обрезки. */
@media (max-width: 399px) {
  .pick-steps { gap: 6px; }
  .pick-steps__t { font-size: .7rem; gap: 4px; }
  .pick-steps__n { width: 20px; height: 20px; }
}
.pick-steps__i.is-now .pick-steps__t { color: var(--text, #ECF0FF); }
.pick-steps__i.is-now .pick-steps__n,
.pick-steps__i.is-done .pick-steps__n {
  background: var(--gold, #C9A435); border-color: var(--gold, #C9A435); color: var(--on-gold, #12140E);
}

/* Шаги / вопросы */
.pick-step { display: block; }
.pick-step[hidden] { display: none; }
.pick-q__h { font-size: 1.1rem; font-weight: 700; color: var(--text, #ECF0FF); margin: 0 0 .8rem; }
.pick-q__h:focus { outline: none; }
.pick-q__sub { font-size: .82rem; color: var(--muted, #7C90B2); margin: -0.3rem 0 .8rem; }
.pick-q__lbl { font-size: .8rem; font-weight: 600; color: var(--muted-lt, #9AAAC8); margin: 0 0 8px; }

/* Варианты ответа: крупные карточки. На телефоне столбик, мощность в
   две колонки (подписи короткие), с 640px по две, с 1024px по четыре. */
.pick-opts { display: grid; grid-template-columns: 1fr; gap: 8px; margin-bottom: 1.1rem; }
.pick-opts--compact { grid-template-columns: 1fr 1fr; }
@media (max-width: 639px) {
  .pick-opts--compact .pick-chip__mark { display: none; }
  .pick-opts--compact .pick-chip { padding: 10px 11px; }
  .pick-opts--compact .pick-chip__label { font-size: .82rem; }
}
@media (min-width: 640px) { .pick-opts { grid-template-columns: 1fr 1fr; gap: 10px; } }
@media (min-width: 1024px) { .pick-opts, .pick-opts--compact { grid-template-columns: repeat(4, 1fr); } }
.pick-chip {
  position: relative; display: flex; align-items: flex-start; gap: 10px;
  width: 100%; min-height: 56px; padding: 11px 12px; margin: 0;
  text-align: left; font: inherit;
  border: 1px solid var(--border, rgba(255,255,255,.07));
  background: var(--bg, #13161D); color: var(--text, #ECF0FF);
  border-radius: var(--r-lg, 12px); cursor: pointer;
  transition: border-color var(--dur-fast, .15s) var(--ease-out, ease),
              background var(--dur-fast, .15s) var(--ease-out, ease);
}
.pick-chip:hover { border-color: var(--gold-ink, #C9A435); }
.pick-chip:focus-visible { outline: 2px solid var(--gold-ink, #C9A435); outline-offset: 2px; }
.pick-chip__mark {
  flex: none; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%;
  border: 2px solid var(--muted, #7C90B2); background: transparent;
  display: inline-grid; place-items: center;
}
.pick-chip__txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.pick-chip__label { font-size: .86rem; font-weight: 700; line-height: 1.3; color: var(--text, #ECF0FF); }
.pick-chip__sub { font-size: .74rem; line-height: 1.35; color: var(--muted-lt, #9AAAC8); }
.pick-chip[aria-pressed="true"] {
  border-color: var(--gold, #C9A435); background: var(--gold-dim, rgba(201,164,53,.12));
  box-shadow: inset 0 0 0 1px var(--gold, #C9A435);
}
.pick-chip[aria-pressed="true"] .pick-chip__mark { border-color: var(--gold, #C9A435); background: var(--gold, #C9A435); }
.pick-chip[aria-pressed="true"] .pick-chip__mark::after {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--on-gold, #12140E);
}
/* Ярлык сидит на верхней рамке карточки, справа. */
.pick-chip .pick-tag { position: absolute; top: -9px; right: 10px; }
.pick-opts--tagged { padding-top: 4px; }

.pick-tag {
  display: inline-block; padding: 3px 8px; border-radius: 999px;
  font-size: .64rem; font-weight: 700; line-height: 1.3; letter-spacing: .02em; white-space: nowrap;
}
.pick-tag--rec { background: var(--gold, #C9A435); color: var(--on-gold, #12140E); }
.pick-tag--pop { background: var(--card, #1D2130); color: var(--gold-ink, #C9A435); border: 1px solid var(--gold, #C9A435); }

.pick-field { margin: -0.3rem 0 1.1rem; max-width: 320px; }
.pick-field label { display: block; font-size: .82rem; color: var(--muted-lt, #9AAAC8); margin-bottom: 6px; }
.pick-field input {
  width: 100%; min-height: var(--tap, 44px); padding: 0 14px;
  border: 1px solid var(--border, rgba(255,255,255,.07)); border-radius: var(--r, 6px);
  background: var(--card, #1D2130); color: var(--text, #ECF0FF); font-size: 1rem;
}
.pick-field input:focus-visible { outline: 2px solid var(--gold-ink, #C9A435); outline-offset: 1px; }

.pick-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.pick-btn {
  min-height: var(--tap, 44px); padding: 0 22px; border-radius: var(--r, 6px);
  font-size: .92rem; font-weight: 700; cursor: pointer; border: 1px solid transparent;
}
.pick-btn--primary { background: var(--gold, #C9A435); color: var(--on-gold, #12140E); }
.pick-btn--primary:disabled { opacity: .45; cursor: not-allowed; }
.pick-btn--primary:not(:disabled):hover { background: var(--gold-lt, #E0BE55); }
.pick-btn--ghost { background: transparent; color: var(--muted-lt, #9AAAC8); border-color: var(--border, rgba(255,255,255,.07)); }
.pick-btn--ghost:hover { color: var(--text, #ECF0FF); border-color: var(--gold-ink, #C9A435); }
.pick-btn:focus-visible { outline: 2px solid var(--gold-ink, #C9A435); outline-offset: 2px; }

/* Результат */
.pick-result__h { font-size: 1.05rem; font-weight: 700; color: var(--text, #ECF0FF); margin: 0 0 1rem; }
.pick-cards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-bottom: 1.2rem; }
.pick-card {
  position: relative;
  border: 1px solid var(--border, rgba(255,255,255,.07)); border-radius: var(--r-lg, 12px);
  padding: 14px 16px; background: var(--bg, #13161D);
}
.pick-card--tagged { border-color: var(--gold, #C9A435); }
.pick-card .pick-tag { margin-bottom: 8px; }
.pick-card__name { font-weight: 700; color: var(--text, #ECF0FF); margin: 0 0 4px; }
.pick-card__meta { font-size: .82rem; color: var(--muted-lt, #9AAAC8); margin: 0 0 8px; }
.pick-card__link {
  display: inline-flex; align-items: center; min-height: var(--tap, 44px);
  color: var(--gold-ink, #C9A435); font-size: .88rem; font-weight: 600; text-decoration: none;
}
.pick-card__link:hover { text-decoration: underline; }

.pick-nomatch { color: var(--muted-lt, #9AAAC8); margin: 0 0 1.2rem; max-width: 60ch; }
.pick-result__actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
/* Вторичные действия: ссылки на вид, но цель касания не меньше 44px. */
.pick-link {
  display: inline-flex; align-items: center; min-height: var(--tap, 44px); padding: 0 2px;
  color: var(--muted-lt, #9AAAC8); font: inherit; font-size: .88rem;
  text-decoration: underline; background: none; border: none; cursor: pointer;
}
.pick-link:hover { color: var(--text, #ECF0FF); }
.pick-phone { color: var(--gold-ink, #C9A435); font-weight: 600; text-decoration: none; }
.pick-restart { margin-top: 6px; font-size: .82rem; color: var(--muted, #7C90B2); }

@media (min-width: 900px) {
  .pick-actions { justify-content: flex-start; }
}

/* Светлая тема: лист чертежа остаётся синим. */
[data-theme="light"] .pick { background: var(--bg, #EDEEF6); }
[data-theme="light"] .pick__tool { background: var(--card, #fff); }
[data-theme="light"] .pick-chip,
[data-theme="light"] .pick-card { background: var(--bg, #F4F5F8); color: var(--text, #1A1D2A); }
[data-theme="light"] .pick-chip[aria-pressed="true"] { background: var(--gold-dim, rgba(201,164,53,.14)); }
[data-theme="light"] .pick-tag--pop { background: var(--card, #fff); }

@media (prefers-reduced-motion: reduce) {
  .pick-chip, .pick__go-pill { transition: none; }
  .pick-steps__i.is-now .pick-steps__bar { animation: none; }
  .pick__go:hover .pick__go-pill { transform: none; }
}