/* Калькулятор: стили Astry из prototype/calculator.css.

   Взяты только правила `.calculator-*`: остальное её файла — переменные темы,
   сброс, шапка, подвал, `.callout`, `.consent`, `.contact-card`, `.button`,
   `.country-strip` — у нас уже есть в styles.css, она же их и рисовала.
   Правила показа состояний (`display: none` с переключателем радиокнопками)
   не переносились: состояние выбирает сервер, а не человек на макете. */
.calculator-heading { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 48px; padding-block: 24px 40px; }
.calculator-heading p { color: var(--muted); align-self: end; }
.calculator-eyebrow { display: block; margin-bottom: 16px; color: var(--muted); font-size: 1rem; }
.calculator-layout { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 32px; align-items: start; padding-bottom: 48px; }
.calculator-form { display: grid; gap: 24px; min-width: 0; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); }
.calculator-form h2 { font-size: 1.5rem; }
.calculator-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.calculator-field { display: grid; align-content: start; gap: 8px; min-width: 0; }
.calculator-field__hint { color: var(--muted); }
.calculator-field__error { display: none; color: var(--danger); }
.calculator-field input:user-invalid { border-color: var(--danger); }
.calculator-field input:user-invalid ~ .calculator-field__error { display: block; }
/* Ошибку с сервера показываем всегда: она пришла на разбор ответа, а не на ввод */
.calculator-field--wrong input, .calculator-field--wrong select { border-color: var(--danger); }
.calculator-field--wrong .calculator-field__error { display: block; }
.calculator-key-fields { border: 1px solid var(--brand); border-left-width: 4px; padding: 24px; background: var(--surface-soft); }
.calculator-key-fields > p { color: var(--muted); margin-bottom: 16px; }
.calculator-form__actions { display: flex; flex-wrap: wrap; gap: 8px; }
/* У Astry размер значков задавал общий сброс `svg`, который мы не переносили:
   без него стрелка в кнопке растягивается на всю её ширину */
.calculator-form__actions svg, .calculator-state svg { width: 24px; height: 24px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.calculator-state--empty svg, .calculator-state--loading svg { width: 40px; height: 40px; }
.calculator-form__note { color: var(--muted); }
.calculator-answer { min-width: 0; scroll-margin-top: 24px; }
.calculator-answer__label { margin-bottom: 16px; color: var(--muted); }
.calculator-state--empty svg, .calculator-state--loading svg { margin-bottom: 24px; color: var(--brand-strong); }
.calculator-result { border: 1px solid var(--line); border-top: 4px solid var(--brand); border-radius: var(--radius); padding: 24px; }
.calculator-result__total { font-size: 3rem; font-weight: 650; line-height: 1.2; margin-block: 16px; overflow-wrap: anywhere; }
.calculator-result__context { color: var(--muted); margin-bottom: 24px; }
.calculator-result__lines { margin: 0; }
.calculator-result__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; padding-block: 16px; border-top: 1px solid var(--line); align-items: start; }
.calculator-result__row dt { min-width: 0; color: var(--muted); }
.calculator-result__row dd { margin: 0; font-weight: 600; white-space: nowrap; }
.calculator-result__rate { color: var(--muted); font-size: 1rem; padding-top: 24px; border-top: 1px solid var(--line); margin-top: 16px; }
.calculator-state--missing, .calculator-state--unavailable { border-left-color: var(--warning); }
.calculator-lead { display: grid; gap: 16px; margin-top: 24px; }
@media (max-width: 1000px) {
  .calculator-heading { grid-template-columns: 1fr; gap: 24px; }
  .calculator-layout { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .calculator-heading { padding-block: 16px 24px; }
  .calculator-fields { grid-template-columns: 1fr; gap: 16px; }
  .calculator-form, .calculator-key-fields, .calculator-result { padding: 16px; }
  .calculator-form { gap: 16px; }
  .calculator-result__total { font-size: 2rem; }
  .calculator-result__row { grid-template-columns: 1fr; gap: 8px; }
  .calculator-form__actions { flex-direction: column; }
}