/* rb-calc: общий слой страницы калькулятора в теме remboo2020.
   Подключается перед стилями калькулятора; правила, которые должны перебить
   стили страницы, идут с селектором body.rb-calc-page #content — он тяжелее
   любого «#content .remboo-<имя> …» из style.css калькулятора. */

/* Колонка контента на всю ширину контейнера (1140px на xl): тема даёт статье
   col-lg-10 с отступом, калькулятору с двумя панелями этого мало. */
body.rb-calc-page .container.main > .row > .col-lg-10 {
  flex: 0 0 100%;
  max-width: 100%;
  margin-left: 0;
}

/* Тема оформляет #content под статью — узкие абзацы, тире вместо маркеров,
   отрицательный отступ у ol. Внутри калькулятора это лишнее; собственные
   стили калькулятора идут следом с тем же префиксом и перекрывают эти. */
#content .remboo-calculator p { max-width: none; margin: 0; }
#content .remboo-calculator ul,
#content .remboo-calculator ol { max-width: none; margin: 0; padding-left: 1.3em; }
#content .remboo-calculator ul { list-style: disc; }
#content .remboo-calculator ul li::before { content: none; float: none; margin: 0; }
#content .remboo-calculator li { font-size: inherit; margin-bottom: .35em; }
#content .remboo-calculator img,
#content .remboo-calculator svg { margin: 0; }
#content .remboo-calculator blockquote { background: none; padding: 0; width: auto; }
/* Bootstrap уносит caption под таблицу и красит h2 в 500 */
#content .remboo-calculator caption { caption-side: top; }
#content .remboo-calculator h2,
#content .remboo-calculator h3 { font-weight: 700; }
/* Ссылка на расчёт под виджетом «поделиться» темы не нужна дважды */
body.rb-calc-page .likely { margin-bottom: 1rem; }

/* ---- Сквозные правки по прожарке 13.09.2026 ------------------------------ */

/* 1. Карточка формул: подписи и формулы не обрезать. На телефоне — в столбик:
   формула, под ней подпись. */
body.rb-calc-page #content .remboo-calculator .formula-card {
  overflow: visible;
  /* «1fr auto»: длинная подпись в auto-колонке отжимала формулу до одной буквы в строке */
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
}
body.rb-calc-page #content .remboo-calculator .formula-card span,
body.rb-calc-page #content .remboo-calculator .formula-card small {
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}
@media (max-width: 600px) {
  body.rb-calc-page #content .remboo-calculator .formula-card { grid-template-columns: 1fr; }
  body.rb-calc-page #content .remboo-calculator .formula-card span { padding-bottom: 4px; border-bottom: 0; }
  body.rb-calc-page #content .remboo-calculator .formula-card small { padding-top: 0; }
  body.rb-calc-page #content .remboo-calculator .formula-card small:last-child { border-bottom: 0; }
}

/* 2. Таблицы шире экрана: тень справа, подпись «прокрутите», первая колонка
   остаётся на месте. Класс rb-scrollable ставит rb-calc.js по факту. */
body.rb-calc-page #content .remboo-calculator .table-scroll { position: relative; }
body.rb-calc-page #content .remboo-calculator table.rb-narrow { min-width: 0; }
body.rb-calc-page #content .remboo-calculator table.rb-narrow th,
body.rb-calc-page #content .remboo-calculator table.rb-narrow td { white-space: normal; }
@media (max-width: 600px) {
  body.rb-calc-page #content .remboo-calculator table.rb-narrow th,
  body.rb-calc-page #content .remboo-calculator table.rb-narrow td { padding-left: 8px; padding-right: 8px; }
}
body.rb-calc-page #content .remboo-calculator .table-scroll.rb-scrollable::after {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 40px;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(23, 33, 43, 0), rgba(23, 33, 43, .18));
  transition: opacity .2s;
}
body.rb-calc-page #content .remboo-calculator .table-scroll.rb-scrollable.rb-scroll-end::after { opacity: 0; }
body.rb-calc-page #content .remboo-calculator .table-scroll.rb-scrollable th:first-child,
body.rb-calc-page #content .remboo-calculator .table-scroll.rb-scrollable td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: #fff;
  box-shadow: 1px 0 0 rgba(23, 33, 43, .12);
}
body.rb-calc-page #content .remboo-calculator .table-scroll.rb-scrollable thead th:first-child { background: #eef1f3; }
body.rb-calc-page #content .remboo-calculator .rb-scroll-hint {
  margin: 0 0 6px;
  color: #66717c;
  font-size: .8rem;
  font-weight: 500;
}
body.rb-calc-page #content .remboo-calculator .rb-scroll-hint[hidden] { display: none; }

/* 3. Липкая полоска с главной цифрой внизу экрана, пока результат ниже
   видимой области (телефон и планшет — там колонки сложены). */
body.rb-calc-page #content .remboo-calculator .rb-sticky {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin: 0;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  border: 0;
  border-radius: 0;
  background: #17212b;
  color: #fff;
  box-shadow: 0 -6px 20px rgba(0, 0, 0, .25);
  font: 600 15px/1.3 system-ui, -apple-system, "Segoe UI", sans-serif;
  text-align: left;
  cursor: pointer;
  transform: translateY(110%);
  transition: transform .2s;
}
body.rb-calc-page #content .remboo-calculator .rb-sticky.rb-on { transform: none; }
body.rb-calc-page #content .remboo-calculator .rb-sticky strong {
  font-size: 1.35rem;
  letter-spacing: -.02em;
  white-space: nowrap;
  max-width: 60%;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 0 1 auto;
}
@media (max-width: 360px) {
  body.rb-calc-page #content .remboo-calculator .rb-sticky strong { font-size: 1.1rem; }
}
body.rb-calc-page #content .remboo-calculator .rb-sticky span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: #bdc7ce;
  font-size: .8rem;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.rb-calc-page #content .remboo-calculator .rb-sticky em {
  color: #e7a33a;
  font-size: .8rem;
  font-style: normal;
  white-space: nowrap;
}
body.rb-calc-page #content .remboo-calculator .rb-sticky.rb-error { background: #7c2d12; }
body.rb-calc-page #content .remboo-calculator .rb-sticky.rb-error span {
  color: #ffe1d6;
  font-weight: 600;
  white-space: normal;
}
@media (min-width: 901px) {
  body.rb-calc-page #content .remboo-calculator .rb-sticky { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  body.rb-calc-page #content .remboo-calculator .rb-sticky { transition: none; }
}

/* 4. Ошибка ввода — у поля: подсветка поля и текст под ним. Поле помечает
   app.js калькулятора (aria-invalid), текст дописывает rb-calc.js. */
body.rb-calc-page #content .remboo-calculator input[aria-invalid="true"],
body.rb-calc-page #content .remboo-calculator select[aria-invalid="true"] {
  border-color: #b62424;
  box-shadow: 0 0 0 3px rgba(182, 36, 36, .14);
}
body.rb-calc-page #content .remboo-calculator .rb-field-error {
  display: block;
  margin: 6px 0 0;
  color: #9a3412;
  font-size: .84rem;
  font-weight: 600;
  line-height: 1.4;
}

/* Мелочи серии: summary с подсказкой не слипается и не мельче цели тапа;
   чекбоксы не 13 px. */
body.rb-calc-page #content .remboo-calculator details > summary {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  align-items: baseline;
  min-height: 44px;
}
body.rb-calc-page #content .remboo-calculator input[type="checkbox"],
body.rb-calc-page #content .remboo-calculator input[type="radio"] {
  width: 22px;
  height: 22px;
  min-height: 0;
}
@media print {
  body.rb-calc-page #content .remboo-calculator .rb-sticky,
  body.rb-calc-page #content .remboo-calculator .rb-scroll-hint { display: none; }
  body.rb-calc-page #content .remboo-calculator .table-scroll { overflow: visible; }
  body.rb-calc-page #content .remboo-calculator .table-scroll.rb-scrollable::after { content: none; }
}