/* idenpol.ru v2 · страница /raschet/: окружение калькулятора.
   Сам виджет живёт на классах .calc* из site.css плюс щепотка стилей, которую
   вставляет в <head> сам calc.js (id="iden-calc-style"): компакт стоит на главной
   и в карточках декора, где этого файла нет. Токены - из дизайн-системы «Шоурум».

   Там же, в calc.js, лежат стили выбора декора (.dpick - поле-кнопка, .dp - панель
   со списком): компонент нужен и на главной, куда этот файл не подключён. Единственная
   тень на сайте - у панели, ею она отделяется от страницы. */

[data-calc] { scroll-margin-top: calc(var(--head) + 16px); }

/* Заглушка на случай выключенного JavaScript (её заменяет калькулятор). */
.calc-stub {
  font-size: 17px;
  line-height: 1.55;
  color: var(--muted);
  max-width: 56ch;
  padding: 22px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

/* «Как считаем»: заголовок, абзац, пары «правило - значение». */
.calc-how h3 { margin-bottom: 10px; }
.calc-how p { color: var(--muted); font-size: 16px; max-width: 40ch; }
.calc-how .kv { margin-top: 16px; }
.calc-how .kv > div { font-size: 15.5px; }

/* Кузова: список, не таблица. */
.calc-bodies { margin-top: 56px; max-width: 640px; }
.calc-bodies p { margin-top: 8px; font-size: 16px; }
.calc-bodies .plain { margin-top: 16px; }
.calc-bodies .plain li { padding: 12px 0; font-size: 16px; }

@media (max-width: 900px) {
  /* три правила - столбиком: в две колонки текст становится в ниточку */
  .grid.calc-how { grid-template-columns: 1fr; gap: 34px; }
  .calc-how p { max-width: none; }
  .calc-bodies { margin-top: 40px; }
}