/* Полка вывода (.verdict::before в base.css) выступает за фразу влево
   и вправо, и на 375 вывод занимает весь контейнер: полка уезжала до 422px
   при экране в 375, страница получала documentElement.scrollWidth = 422,
   а горизонтальную прокрутку гасил только overflow-x: hidden на body.
   Соседние секции для этого стоят на overflow: hidden; здесь clip и только
   по оси X — он не заводит скролл-контейнер (якорь #calculator-results
   продолжает работать) и не режет вертикаль, поэтому стыки с соседними
   экранами остаются прежними. */
.calculator { overflow-x: clip; }

/* Ограничение по ширине держит заголовок в три строки, как в макете. */
/* Заголовок этого экрана крупнее общего токена: высота прописных 86,
   шаг строк 115 — в Oswald это около 106px. Единого H2 в макете нет. */
/* Кегль общий — --fz-h2. Было 79.2px на 1440, самый крупный заголовок
   секции на сайте: он стоял в шапке во всю полосу и просто «звучал громче»,
   без причины, которую можно назвать. Отклонений от общего кегля на сайте
   ровно два (экраны 2 и 8), и оба — про ширину колонки заголовка, а не
   про важность экрана.
   Отбивки шапки приведены к общим для лендинга: бейдж → заголовок 40,
   заголовок → лид 24. Раньше здесь было 32 и 24. */
.calculator__title {
  margin-block: calc(var(--s-5) + var(--s-4)) var(--s-5);
  max-width: 30ch;
}

/* Шапка → контент: прежние 24 были самым тесным переходом на лендинге,
   шапка слипалась с формой. Общее значение — 48. */
.calculator__head { margin-bottom: var(--s-7); }

/* ---------- Сетка: форма слева, результаты справа ----------
   В макете колонки почти равны (864 и 857), между ними 62px.

   Высота всего блока — отдельное требование заказчика: на ноутбуке
   (1440×800, 1366×768) форма и плитки вместе не помещались в окно,
   «нужно прямо идеально экран выставить, чтобы они все были видны».
   Сетка ужата с 815 до ~560: см. .calculator__field (строка стала
   двухэтажной вместо трёхэтажной) и .calculator__result-icon (кружок
   92 → 64 и без собственной отбивки). Кегли цифр не тронуты — они и есть
   аргумент экрана. */

/* align-items: stretch, а не start: при start колонки заканчивались на разной
   высоте — разъезд низа у двух равных по замыслу колонок читается как
   недоделка. Теперь недостающую высоту забирает тот, кто короче: у плиток
   подрастают ряды, а содержимое в них и так стоит по центру остатка. */
.calculator__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  gap: var(--s-8);
}

/* ---------- Форма ---------- */

/* Поле карточки было 32 по макету; ужато до 24 — это часть общего сжатия
   высоты. Тень поднята с --sh-card до --sh-lift: карточная тень рассчитана
   на блок 300-500px, а форма растянута на половину экрана — её ближний слой
   на таком размере пропадает. Плитки результата рядом остаются на --sh-card:
   они как раз того размера, на который этот токен и считан, и разнобоя
   не возникает — возникает иерархия «панель ввода / плитки вывода». */
/* --form-pad осталась ручкой, хотя её второй потребитель (липкий подвал
   карточки) снят по правке заказчика: поле формы меняется на ≤640, и держать
   его одним именем дешевле, чем двумя числами в разных блоках. */
.calculator__form {
  --form-pad: var(--s-5);
  display: flex;
  flex-direction: column;
  padding: var(--form-pad);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-lift);
}

.calculator__fields {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Подложка строки не плоская: сверху вниз от белого к общему тону страницы —
   строка получает объём вместо серого прямоугольника. Волосяная кромка
   отделяет её от белой формы.

   Поля по вертикали 12, по горизонтали 24: строка теперь в два этажа
   (вопрос + дорожка), и вертикальный запас здесь был самым дешёвым
   местом для сжатия. */
.calculator__field {
  padding: var(--s-3) var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: linear-gradient(180deg, var(--surface) 0%, var(--bg-tint) 100%);
  /* Подсветка строки — отклик на руку (курсор вошёл в поле, фокус встал
     на ползунок), значит --t-fast: правило в base.css, раздел «Движение».
     Было 220 — при переходе стрелками между полями подсветка тянулась
     за фокусом с заметным отставанием. */
  transition: background var(--t-fast), border-color var(--t-fast);
}

/* Строка, которую сейчас крутят, подсвечивается целиком: подложка уходит
   в брендовый перелив, кромка теплеет, значок загорается. Это главное, что
   отличает живой интерактив от формы из админки — видно, где ты находишься,
   не приглядываясь к тонкому ползунку.
   Работает и от мыши, и с клавиатуры: :focus-within, а не :focus-visible.
   Наведение — под медиазапросом (разбор в base.css), :focus-within остаётся
   снаружи: он нужен и на телефоне, где поле открывают пальцем. */
@media (hover: hover) {
  .calculator__field:hover { border-color: rgba(124, 59, 246, .22); }
}

.calculator__field:focus-within {
  background: var(--grad-soft);
  border-color: rgba(124, 59, 246, .30);
}

/* Верхняя строка поля: значок, вопрос и границы диапазона.
   Ползунок лежит под ней отдельной строкой во всю ширину — он и есть
   элемент управления, поэтому ему нужна вся доступная длина хода. */
.calculator__row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

/* Кегль вопроса в макете 20. Клик по вопросу переводит фокус на ползунок —
   это обычный <label for>, и значок лежит внутри него, чтобы попадание
   по значку тоже срабатывало. */
.calculator__label {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--fz-body);
  line-height: 1.4;
  cursor: pointer;
}

/* Значок вместо номера шага. Номер сообщал только порядок, а порядок и так
   виден по вертикали; значок различает вопросы по смыслу и занимает вдвое
   меньше места, чем кружок с цифрой. Кружка под ним нет намеренно: строку
   просили разгрузить, а материал (перелив, кромка) на ней уже есть —
   у самой подложки поля. */
.calculator__icon {
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--brand);
  /* Приглушён, но не выцветший: значок — метка, а не иллюстрация, и спорить
     с вопросом не должен. На 20px дуотон при .55 уже читался как грязь. */
  opacity: .7;
  /* Значок загорается вместе с подложкой поля — одна ступень на оба. */
  transition: opacity var(--t-fast);
}

.calculator__field:focus-within .calculator__icon { opacity: 1; }

/* Границы диапазона. Раньше это была третья строка поля: две подписи
   под дорожкой во всю ширину. Здесь то же самое одной короткой парой
   в углу строки вопроса — «до чего вообще крутится» осталось, а этаж ушёл.
   На узких экранах пара снимается: место нужнее вопросу, а точное значение
   и так едет на бегунке. */
.calculator__limits {
  flex: none;
  color: var(--muted-2);
  font-size: var(--fz-caption);
  line-height: 1;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* ==========================================================================
   Ползунок: нативный орган управления, свой рисунок
   --------------------------------------------------------------------------
   Элемент управления — нативный <input type="range">: клавиатура (стрелки,
   Home/End, PageUp/PageDown), тач и роль slider у диктора работают без единой
   строки JS, и подменять его нечем.

   ВИДИМОГО У НЕГО НЕ ОСТАЛОСЬ НИЧЕГО. input лежит поверх всей дорожки
   с opacity: 0, а дорожку (.calculator__track), заливку (.calculator__fill)
   и плашку со значением (.calculator__bubble) рисуют свои элементы под ним.

   ЧТО ЭТИМ ЧИНИТСЯ. Заказчик на своём телефоне: «сами ползунки сломаны, там
   не двигается ползунок, двигается какой-то полупрозрачный прямоугольник,
   а белый ползунок остаётся на месте». В эмуляции Chrome такого не было
   и быть не могло — беда не в раскладке, а в том, КАК конкретная сборка
   браузера рисует системный бегунок.

   Прежняя схема держалась на псевдоэлементах: видимой была дорожка самого
   input'а (::-webkit-slider-runnable-track, заливка через background-size),
   а системный бегунок гасился прозрачностью через ::-webkit-slider-thumb
   и ::-moz-range-thumb. Эти псевдоэлементы — не спецификация, а вендорная
   договорённость: браузер вправе рисовать бегунок собственным виджетом
   и часть правил к нему не применить вовсе. Там, где так и происходит,
   на экране оказываются ДВА бегунка: наш (отдельный элемент, едет за --p)
   и системный (едет за пальцем) — ровно то, что заказчик и описал,
   с точностью до слова «полупрозрачный».

   opacity: 0 снимает вопрос целиком: рисовать браузеру нечего. Именно
   opacity, а не visibility: hidden и не display: none — при них элемент
   перестаёт быть целью для пальца и уходит из дерева доступности,
   то есть ползунок исчезает вместе со своей поломкой. И не appearance: none
   в одиночку: он лишь просит браузер не рисовать системный вид, а просьбу
   эту как раз и игнорируют те сборки, где всё сломалось.

   Что осталось от нативного бегунка: его ГАБАРИТ. Он не виден, но именно
   на него браузер укорачивает ход и по нему считает значение при клике
   мышью по дорожке. Габарит приравнен к ширине видимой плашки — тогда
   центры настоящего и нарисованного бегунков совпадают на всём ходу.

   Геометрия задана ручками:
     --knob-w  68px — ширина плашки. Считана по самому длинному значению
                      набора, «$3 000»: уже — и цифра упирается в борта.
     --knob-h  30px — высота плашки.
     --ring     7px — прозрачный запас сверху и снизу. Он добирает зону
                      захвата до 44px по вертикали (30 + 7×2) — норма
                      для пальца; input занимает всю эту высоту, поэтому
                      нажатие в любую точку дорожки попадает по цели.
     --track-h 10px — толщина видимой дорожки.

   Заливка идёт от нуля до --fill = --p × 100%, а плашка едет с переменным
   сдвигом (0 → −100%): на нуле её левый край стоит на левом краю дорожки,
   на единице правый — на правом. Тогда заливка кончается у самой плашки
   на любой позиции, а полоска дозаливается до упора. --p приходит
   из 06-calculator.js и ставится на .calculator__slider — общего родителя
   дорожки и плашки. */
.calculator__slider {
  --knob-w: 68px;
  --knob-h: 30px;
  --ring: 7px;
  --grip-w: var(--knob-w);
  --grip-h: calc(var(--knob-h) + var(--ring) * 2);
  --track-h: 10px;
  --p: 0;
  --fill: calc(var(--p) * 100%);

  position: relative;
  margin-top: var(--s-1);
  height: var(--grip-h);
}

/* Прозрачный орган управления во всю зону захвата. Он первый в разметке:
   дорожка и плашка — его соседи, и по ним рисуется кольцо фокуса. */
.calculator__range {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: var(--grip-h);
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  opacity: 0;
  cursor: pointer;

  /* ---------- Тач: дорожка отдаёт вертикаль странице ----------

     pan-y значит «браузер оставляет себе только вертикальную прокрутку,
     всё остальное отдаёт элементу». Само по себе это НЕ чинит главную беду
     (замер tools/v-probe-range.js: с pan-y вертикальный свайп через дорожку
     по-прежнему уводил «средний чек» 4500 → 2600, потому что нативный
     ползунок ставит значение по пальцу ещё до того, как браузер решил,
     что жест вертикальный) — беду чинит обработчик в 06-calculator.js.
     Здесь pan-y нужен для второй половины: чтобы горизонтальное движение
     по дорожке гарантированно доставалось ползунку, а не превращалось
     в жест страницы. */
  touch-action: pan-y;

  /* Единственные поля ввода на странице. Кегль в них браузер ставит свой,
     13.33px, и по чек-листу приёмки это нарушение: у input/select/textarea
     вычисленный font-size не должен опускаться ниже 16px, иначе iOS Safari
     зумит вьюпорт при фокусе. У range зума по факту не бывает — вводить
     туда нечего, — но держать в разметке поле с 13px только потому, что
     конкретно это поле не зумит, значит оставить грабли следующему
     полю. На вид это не влияет вообще: элемент прозрачен. */
  font-size: 16px;
}

/* Габарит настоящего бегунка. Видимого действия у этих правил нет —
   весь input прозрачен, — но браузер укорачивает ход ровно на ширину
   thumb'а, и она обязана совпадать с шириной видимой плашки.
   Объявлять приходится дважды: объединить вендорные псевдоэлементы
   в один селектор нельзя, браузер отбрасывает весь список, если
   не понимает хоть одну часть. */
.calculator__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  width: var(--grip-w);
  height: var(--grip-h);
  border: 0;
  background: transparent;
}

.calculator__range::-moz-range-thumb {
  box-sizing: border-box;
  width: var(--grip-w);
  height: var(--grip-h);
  border: 0;
  background: transparent;
}

/* Дорожка. Незаполненная часть — не плоская серая линия, а перелив с лёгкой
   внутренней тенью: получается прорезь в карточке, в которой лежит бегунок.
   Указателя не ловит — все нажатия проходят насквозь к input'у. */
.calculator__track {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: var(--track-h);
  border-radius: var(--r-pill);
  background: linear-gradient(180deg, rgba(27, 22, 51, .15) 0%, rgba(27, 22, 51, .06) 100%);
  box-shadow: inset 0 1px 2px rgba(27, 22, 51, .10);
  overflow: hidden;
  pointer-events: none;
}

/* Заполненная часть — фирменный градиент, развёрнутый по ходу движения
   (90deg, а не 135 из --grad-brand: на полосе высотой 10px наклон
   не читается, а по длине перелив виден и показывает направление роста).
   Ширина = доля хода, поэтому перелив всегда занимает ровно заливку. */
.calculator__fill {
  display: block;
  width: var(--fill);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--brand) 0%, var(--brand-light) 100%);
}

/* Видимый бегунок с цифрой. Едет за --fill, то есть ровно там, где стоит
   значение. Указателя не ловит — тянут за прозрачный input над ней.

   Глубина — как велит visual-language: пара внешних теней (близкая даёт
   контакт с дорожкой, дальняя — брендовое свечение) плюс пара внутренних
   на само тело плашки (блик сверху, притенение снизу). */
.calculator__bubble {
  position: absolute;
  top: 50%;
  left: var(--fill);
  transform: translate(calc(var(--p) * -100%), -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--knob-w);
  height: var(--knob-h);
  border-radius: var(--r-pill);
  background-image: linear-gradient(135deg, var(--brand-light) 0%, var(--brand-dark) 100%);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, .45),
    inset 0 -2px 5px rgba(27, 22, 51, .22),
    0 2px 4px rgba(27, 22, 51, .28),
    0 6px 14px rgba(124, 59, 246, .50);
  color: #fff;
  font-size: var(--fz-small);
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
  /* Моноширинные цифры: при перетаскивании число меняется каждый кадр,
     и без tabular-nums цифры мелко дрожат. */
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  transition: box-shadow var(--t-fast);
}

/* Наведение и захват: свечение раздувается, плашка как будто приподнимается.
   Габарит при этом не меняется — значит длина хода и посадка заливки
   не съезжают под пальцем.

   Пара разведена: фокус с клавиатуры обязан работать всюду, наведение —
   только там, где есть указатель (разбор в base.css). Иначе после
   перетаскивания ползунка пальцем плашка так и оставалась бы раздутой. */
.calculator__range:focus-visible ~ .calculator__bubble {
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, .45),
    inset 0 -2px 5px rgba(27, 22, 51, .22),
    0 2px 6px rgba(27, 22, 51, .28),
    0 8px 22px rgba(124, 59, 246, .70);
}

@media (hover: hover) {
  .calculator__slider:hover .calculator__bubble {
    box-shadow:
      inset 0 1px 1px rgba(255, 255, 255, .45),
      inset 0 -2px 5px rgba(27, 22, 51, .22),
      0 2px 6px rgba(27, 22, 51, .28),
      0 8px 22px rgba(124, 59, 246, .70);
  }
}

/* Фокус с клавиатуры. Общий outline из base.css снят: он обводит бордер-бокс
   поля, а тот высотой во всю зону захвата, 44px, — обводка выходила пилюлей
   в полстроки. Кольцо рисует ДОРОЖКА: оно обжимает её по всей длине
   и никуда не залезает. Белый зазор обязателен: на заполненной части
   брендовое кольцо иначе слилось бы с брендовой заливкой.

   Кольцо переехало с псевдоэлемента ::-*-track на свой элемент вместе
   со всем остальным рисунком — у прозрачного input'а никакой видимой
   дорожки больше нет. */
.calculator__range:focus { outline: none; }

.calculator__range:focus-visible { outline: none; }

.calculator__range:focus-visible ~ .calculator__track {
  box-shadow: inset 0 1px 2px rgba(27, 22, 51, .10),
              0 0 0 2px var(--surface),
              0 0 0 5px var(--brand);
}

/* Firefox рисует свою пунктирную рамку внутри поля */
.calculator__range::-moz-focus-outer { border: 0; }


/* ---------- Карточки результата ---------- */

/* Зазоры сетки ужаты с 32 до 24 — часть общего сжатия высоты блока.
   grid-auto-rows: 1fr — обязательное: без него верхний ряд карточек выходил
   274.6, нижний 351.1, и одинаковые по смыслу блоки читались как разные. */
.calculator__results {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: var(--s-5);
}

.calculator__result {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-5);
  border-radius: var(--r-xl);
}

/* В макете это круг диаметром 92 с тонким ободком, иконка внутри 52.
   Ужат до 64/30: между кружком и цифрой зияла пустота, а плитки вместе
   с формой не влезали в окно ноутбука — заказчик просил найти место,
   где можно сократить, не трогая сами цифры. Кружок и был этим местом.
   Ободок остался, заливка осталась переливом — тот же материал, что
   у кружков ниш на экране 5.
   Собственной отбивки снизу у кружка больше нет: расстояние до цифры
   держит зазор флекса, и «дырка» под значком закрылась. */
.calculator__result-icon {
  width: 64px;
  height: 64px;
  border-radius: var(--r-pill);
  background: var(--grad-soft);
  box-shadow: 0 0 0 1px rgba(124, 59, 246, .10),
              0 0 0 5px rgba(124, 59, 246, .05);
}

.calculator__result-icon .icon { width: 30px; height: 30px; }

/* Главные цифры макета очень крупные: высота знаков 60px, это кегль ~65.
   Кегль не трогаем — он и есть аргумент экрана.
   Пара авто-отбивок центрирует цифру с подписью в остатке высоты карточки.
   Ряд тянется по самой высокой плитке («было / стало»), и у трёх соседних
   под подписью зияла дыра — блок читался недоделанным. Одиночный
   margin-top: auto тут уже пробовали: он прижимал цифру к низу и открывал
   ту же дыру сверху. Кружки при этом остаются на одной линии во всём ряду. */
.calculator__result-value {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  flex-wrap: wrap;
  margin-top: auto;
  color: var(--brand);
  font-size: var(--fz-num);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: var(--ls-num);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}


.calculator__result-unit {
  color: var(--muted);
  font-size: var(--fz-body);
  font-weight: 500;
  /* Гасим поджим, унаследованный от цифры: --ls-num задан в em, и на
     кегле подписи те же −0.49px превращаются в −0.028em — вдвое сильнее,
     чем задумано, и на мелком тексте это уже слипание. */
  letter-spacing: normal;
}

/* margin-bottom: auto — вторая половина центровки, см. .calculator__result-value */
.calculator__result-note {
  margin-bottom: auto;
  color: var(--muted);
  font-size: var(--fz-body);
  line-height: 1.4;
}

/* ---------- Главная плитка ----------
   Годовая сумма залита фирменным переливом: одна смысловая точка акцента
   на секцию, остальные три плитки остаются белыми. Плюс верхняя световая
   кромка (.card--edge из base.css — на цветной подложке она наконец видна)
   и очень медленный блик, единственная анимация экрана. */
.calculator__result--hero {
  background: var(--grad-brand);
  box-shadow: var(--sh-brand);
  color: #fff;
}

/* Подпись белая без прозрачности: на светлом конце перелива (#8B4DFF)
   белый даёт 4.9:1, а любое приглушение уводит мелкий текст ниже нормы 4.5.
   Иерархию держат кегль и насыщенность, а не цвет. */
.calculator__result--hero .calculator__result-value,
.calculator__result--hero .calculator__result-note,
.calculator__result--hero .calculator__result-unit { color: #fff; }

.calculator__result--hero .calculator__result-icon {
  background: rgba(255, 255, 255, .18);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .26),
              0 0 0 5px rgba(255, 255, 255, .10);
  color: #fff;
}

/* Блик: широкая световая полоса медленно проходит по плитке и подолгу стоит
   за её краем. 14 секунд — движение замечаешь боковым зрением, но оно не
   тянет на себя внимание и не спорит с цифрой.

   Едет transform, а не background-position. Это не стилистика: свод
   («Что анимировать») требует ограничиться transform и opacity — только они
   обрабатываются на стадии композиции и не заставляют браузер перерисовывать
   слой. Прежняя запись двигала background-position, то есть перекрашивала
   плитку 60 раз в секунду все 14 секунд подряд, и делала это на телефоне,
   где кадровый бюджет и так занят прокруткой.

   Пересчёт геометрии, чтобы блик выглядел ровно как прежде: полоса была
   шириной 280% плитки и ходила по background-position от 130% до −30%,
   то есть смещалась от −2.34W до +0.54W. Теперь это отдельный узкий слой
   в 60% ширины, который проезжает от полностью убранного за левую кромку
   (−110% себя) до убранного за правую (+280%). Наклон 115° и плотность
   .16 не тронуты.

   Обрезку даёт .card--edge (overflow: hidden в base.css) — он уже стоит
   на этой плитке ради световой кромки, отдельная обрезка не нужна. */
.calculator__result--hero::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 60%;
  pointer-events: none;
  background: linear-gradient(115deg,
              transparent 0%,
              rgba(255, 255, 255, .16) 50%,
              transparent 100%);
  animation: calc-sheen 14s ease-in-out infinite;
}

@keyframes calc-sheen {
  0%, 100% { transform: translateX(-110%); }
  50%      { transform: translateX(280%); }
}

@media (prefers-reduced-motion: reduce) {
  .calculator__result--hero::after { animation: none; }
}

/* Четвёртая карточка — «было / стало» */

/* Интерлиньяжи в этой карточке подтянуты: она задаёт высоту всему ряду,
   а базовые 1.55 раздували её на 30px против трёх соседних.
   margin-top: auto — первая половина той же центровки, что у цифр в соседних
   плитках: заголовок с парой «было / стало» стоит единым блоком по центру
   остатка высоты, а не расползается по углам карточки. */
.calculator__result-title {
  margin-top: auto;
  font-size: var(--fz-body);
  font-weight: 700;
  line-height: var(--lh-heading);
}

/* margin-bottom: auto — вторая половина центровки, см. .calculator__result-title */
.calculator__check {
  width: 100%;
  margin: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

/* Линия сплошная, как все прочие разделители лендинга: пунктир был здесь
   единственным на весь проект. */
.calculator__check-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;

  /* ПЕРЕНОС ПАРЫ «ПОДПИСЬ — ЗНАЧЕНИЕ». Поведение, а не украшение — та же
     роль, что у flex-wrap в .hero__meta и .days__meta: если значение
     перестало помещаться рядом с подписью, оно встаёт ПОД ней, а не
     вылезает за кромку карточки.

     Ужаться строке не во что. Её держат три несжимаемые вещи: подпись
     «Стало:» (48px), кружок со стрелкой (30px, flex: none) и само число.
     Число для браузера — ОДНО СЛОВО: 06-calculator.js склеивает его
     неразрывными пробелами и в разрядах (group), и перед знаком валюты
     (CUR.kzt.after), поэтому min-content всего dd равен полной ширине
     строки, а ниже min-content флекс-элемент не сжимается — лишнее просто
     выезжает вправо. Замер kz.html при стартовых «621 000 ₸»: dd выходил
     за поле карточки на 20.2px при 1001, 18.1 при 1010, 13.7 при 1201
     и 6.9 при 320.

     Полосы не случайны: кегль числа (--fz-h3) растёт по ширине ОКНА, а
     ширина карточки от окна не монотонна — на 1001 сетка секции становится
     двухколоночной, на 1201 разом растут зазор сетки и поле плитки.
     Внутренняя ширина карточки в этих точках падает (421 → 180.7 и
     227 → 203.2), кегль же продолжает расти.

     Кеглем это не лечится: на 1001 числу остаётся 74.7px, а оно занимает
     4.99px на каждый пункт кегля — даже 16px требуют 80. Влезло бы только
     14.9px, то есть мельче соседнего «Было» (16). Главное число карточки
     не может звучать тише вспомогательного, значит лечится раскладкой.

     row-gap: 0 — перенос не должен добавлять этаж: строки разведены
     интерлиньяжем, а высота здесь дорогая, карточка «было / стало» задаёт
     её всему ряду плиток. Замер до/после: высота секции совпала на всех
     ширинах 320-1920, включая те, где строка переносится (правая колонка
     и так тянется по форме — см. align-items: stretch у .calculator__grid). */
  flex-wrap: wrap;
  column-gap: var(--s-4);
  row-gap: 0;
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: var(--fz-small);
  line-height: 1.3;
}

.calculator__check-row dd {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  /* Слева авто-поле, а не ноль. Пока пара стоит в одну строку, значение
     прижимает вправо justify-content: space-between, но на перенесённой
     строке dd остаётся один, и space-between ставит его к ЛЕВОМУ краю —
     число уезжало бы под подпись. Авто-поле держит его у правой кромки
     в обоих состояниях, а в однострочном виде ничего не меняет: свободное
     место всё равно уходит целиком между подписью и значением. */
  margin: 0 0 0 auto;
  color: var(--ink);
  font-size: var(--fz-body);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

.calculator__check-row--after {
  padding-bottom: 0;
  border-bottom: 0;
}

/* «Стало» в макете крупнее «Было» вдвое — это смысловой акцент карточки */
.calculator__check-row--after dd {
  color: var(--brand);
  font-size: var(--fz-h3);
  font-weight: 700;
  line-height: 1.15;
}

/* Минимальная визуализация скачка: стрелка вверх у нового чека.
   Она честна при любых числах — внедрение и сопровождение к чеку только
   прибавляются, — и объясняет пару строк быстрее, чем это делают сами цифры. */
.calculator__check-jump {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: var(--r-pill);
  background: var(--grad-brand);
  box-shadow: var(--glow-brand);
  color: #fff;
}

.calculator__check-jump .icon { width: 16px; height: 16px; }

/* ---------- Вывод ----------
   Оформление целиком приходит из .verdict в base.css. Секция задаёт только
   верхнюю отбивку и меру строки: 20em — это одна строка на десктопе и две
   на планшете и телефоне. Кегль не трогаем, он общий на все шесть выводов
   сайта. */

.calculator__callout {
  --verdict-measure: 20em;
  margin-top: var(--s-6);
}

/* ---------- Адаптив ---------- */

/* 1201–1400: колонка формы уже, и самый длинный вопрос («…за ежемесячное
   сопровождение?») ломается на две строки. Одна такая строка тянет вверх
   весь блок сразу на 21px — ровно то, из-за чего он и переставал влезать
   в окно ноутбука. Горизонтальные поля строки ужимаются на 8px, и вопрос
   снова встаёт в одну строку. */
@media (max-width: 1400px) {
  .calculator__field { padding: var(--s-3) var(--s-4); }
}

/* 1001–1200: секция ещё в две колонки, форма узкая — плитки ужимаются */
@media (max-width: 1200px) {
  .calculator__grid { gap: var(--s-6); }
  .calculator__result { padding: var(--s-4); }
  .calculator__result-icon { width: 56px; height: 56px; }
  .calculator__result-icon .icon { width: 26px; height: 26px; }
}

/* ==========================================================================
   Колонки сложились: одна колонка, форма над плитками
   --------------------------------------------------------------------------
   Пока колонок две, форма и плитки результата стоят рядом: тянешь ползунок —
   цифры справа меняются в том же кадре. Когда колонки складываются, плитки
   уезжают ПОД форму.

   Здесь стоял липкий подвал карточки с главной цифрой расчёта: он лечил
   замеренный разрыв «от верха первого ползунка до первой цифры результата»
   в 805px на 320 и 801 на 375. Заказчик его снял — цифра дословно повторяла
   плитку ниже, разбор в разметке секции. Вместе с подвалом ушли его липкая
   раскладка, ссылка-якорь и договорённость с будущей липкой кнопкой
   страницы (--mobile-cta-h): согласовывать в калькуляторе больше нечего.

   Сам разрыв при этом уменьшился, а не вырос: строки ползунков ужаты
   в блоке ≤640 (замер до/после — в отчёте круга), и высота подвала (80px
   вместе с отбивкой) снялась с формы целиком.
   ========================================================================== */
@media (max-width: 1000px) {
  .calculator__grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
  .calculator__title { max-width: none; }
}

@media (max-width: 640px) {
  .calculator__form { --form-pad: var(--s-4); }

  /* ==========================================================================
     СТРОКА ПОЛЗУНКА НА ТЕЛЕФОНЕ
     --------------------------------------------------------------------------
     Заказчик: «надо сделать у ползунка поменьше текст, чтобы он не переносился
     на две строки, чтобы эти блоки были более узкие, уменьшить, чтобы они
     лучше влезали в экран, сейчас они прямо впритык вылезают. Для этого нужно
     уменьшить, может быть, текст, иконку, сам ползуночек».

     Одна строка недостижима, и это арифметика, а не лень. Замер натуральной
     (без переноса) ширины вопросов на 375 при кегле 16 / 15 / 13.5:

       Какой у тебя сейчас средний чек?              269.5 / 252.6 / 227.3
       Сколько клиентов ты сейчас ведёшь?            296.0 / 277.5 / 249.8
       Скольким готов предложить ИИ БРО?             297.8 / 279.2 / 251.3
       Сколько возьмёшь за внедрение агента?         322.0 / 301.9 / 271.7
       Сколько возьмёшь за ежемесячное сопровождение? 417.9 / 391.8 / 352.6

     Под текст в строке остаётся 253px (327 экрана − 48 полей контейнера
     − 32 поля формы − 16 полей строки − 26 на знак с зазором). Чтобы
     последний вопрос лёг в одну строку при таких полях, кегль пришлось бы
     опустить до 9px. Одна строка на 375 возможна ровно для самого короткого
     вопроса — и она получена.

     Что сделано вместо этого: строка ужата по всем четырём осям сразу.

       кегль вопроса   16 → 15 (--fz-small), интерлиньяж 1.4 → 1.3
       знак            20 → 18
       дорожка         10 → 8
       плашка          30 → 26 в высоту, 60 → 56 в ширину
       поля строки     12/16 → 8/12, зазор между строками 12 → 8

     Зона захвата остаётся 40px (26 + 7×2): норма WCAG AA — 24px
     (SC 2.5.8), и запас к ней двукратный.

     Знак переехал ВНУТРЬ строки текста (label стал блоком, а не флексом):
     теперь он укорачивает только первую строку, а вторая получает всю
     ширину. Этим снимается третья строка у самого длинного вопроса —
     «за ежемесячное сопровождение» (268px) в 279 доступных помещается
     целиком, а при флексе те же 268 упирались в 253 и рвались надвое.
     Тот же приём применён к подписи чипа ниш на экране 5. */
  .calculator__fields { gap: var(--s-2); }

  .calculator__field { padding: var(--s-2) var(--s-3); }

  .calculator__label {
    display: block;
    font-size: var(--fz-small);
    line-height: 1.3;
    /* Автоперенос по слогам снимается. Он приходит по наследству от <li>
       (base.css включает hyphens: auto на текстовые теги), и на 320 давал
       «Скольким готов предло-жить ИИ БРО?» — в вопросе формы это читается
       сломанной вёрсткой, ровно как в кнопке или заголовке, которым свод
       перенос запрещает. Строк от этого не прибавляется: «предложить»
       целиком уходит на вторую строку, которая и так была. */
    hyphens: none;
  }

  .calculator__icon {
    /* display обязателен: у .icon в base.css стоит block, и в блочном label
       значок вставал бы отдельной строкой над вопросом — замерено, строка
       поля вырастала на все 18px значка вместо нуля. */
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-right: var(--s-2);
    /* Знак садится на строку текста, а не на её верх */
    vertical-align: -3px;
  }

  /* Границы диапазона снимаются: на 375 они отнимают у вопроса треть строки
     и гонят его в третью. Точное значение никуда не делось — оно едет
     на бегунке, а min/max ползунка по-прежнему объявляет диктор. */
  .calculator__limits { display: none; }

  /* Плашка уже и ниже: 60×26 против 68×30 на десктопе. Высота — прямая доля
     высоты строки, ширина съедает ход (ход = длина дорожки минус габарит
     бегунка).

     Ширину ниже 60 опускать нельзя, и это замер, а не осторожность: цифра
     набрана 15px, и самое длинное значение набора, «$1 000», занимает
     52.8px. При 56 по бокам остаётся по 1.6px и цифра упирается в борта
     пилюли; при 60 — по 3.6, что и было. Кегль в плашке не трогаем:
     это единственное место, где видно введённое значение.

     --ring поднят с 7 до 9. Он не виден и на вид не влияет: это прозрачный
     запас вокруг плашки, из которого складывается зона захвата
     (--grip-h = --knob-h + --ring × 2). На десктопе 30 + 7×2 = 44 — норма
     для пальца, ради которой запас и заводился. Когда плашка стала ниже,
     запас остался прежним, и зона захвата молча просела до 40: замер
     приёмки на 320/375/393/430 и в ландшафте показал пять целей 269×40
     при обещанных 44. 26 + 9×2 возвращает ровно 44. Плашка, дорожка
     и высота строки не меняются — растёт только прозрачный input. */
  .calculator__slider {
    --knob-w: 60px;
    --knob-h: 26px;
    --ring: 9px;
    --track-h: 8px;
  }

  /* ==========================================================================
     Плитки результата на телефоне
     --------------------------------------------------------------------------
     Было: четыре одинаковые плитки столбиком, в каждой значок 52 занимает
     отдельную строку, под ним цифра, под ней подпись. 162 / 162 / 184 / 198
     плюс три зазора — 754px, то есть 1.1 экрана на четыре числа. Плитки
     при этом равного веса, хотя главная из них ровно одна: годовая сумма.

     Стало — три ряда с иерархией:

       ряд 1  две опорные цифры рядом («разово» и «в месяц»);
       ряд 2  годовая сумма во всю ширину, значок в строку с цифрой;
       ряд 3  «было / стало» во всю ширину, значок в строку с заголовком.

     Так работают обе экономии сразу. Опорные цифры вдвое короче главной
     («+$2 100» против «+$7 500 за первый год с текущих клиентов»), они
     помещаются в половину полосы — и ровно они набраны --fz-num-sm вместо
     --fz-num. Это не «ужать, чтобы влезло»: на 320 половина полосы даёт
     под цифру 104px, а «+$2 100» в 30px занимает 103 — впритык, любая
     правка чисел вылезла бы за борт. Ступень вниз (24px) снимает риск
     и заодно делает то, чего в столбике не было: главная цифра секции
     наконец звучит громче двух вспомогательных.

     Двум длинным плиткам колонка не нужна, им нужна ширина — поэтому они
     во всю полосу, а сэкономлена у них та строка, которую занимал значок:
     он встаёт слева от цифры и держит обе строки карточки. */
  .calculator__results {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: auto;
    gap: var(--s-4);
  }

  /* Ступень вниз только у двух узких плиток. :not() держит правило
     привязанным к смыслу, а не к порядку: главная плитка помечена
     модификатором, а «было / стало» цифру в этой роли не несёт вовсе. */
  .calculator__result:not(.calculator__result--hero) .calculator__result-value {
    font-size: var(--fz-num-sm);
    /* Зазор между числом и единицей — ступень вниз. «+$450» 75px и «/мес.»
       42px при зазоре 8 дают 125 при колонке в 124: единица срывалась
       на свою строку и висела там отдельным этажом. При 4 умещается
       в строку целиком. */
    gap: var(--s-1);
  }

  /* last-of-type среди article: живая область #calculator-live — это <p>,
     и в счёт она не идёт. */
  .calculator__result--hero,
  .calculator__result:last-of-type {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: var(--s-4);
    align-items: center;
  }

  .calculator__result--hero > .calculator__result-icon,
  .calculator__result:last-of-type > .calculator__result-icon {
    grid-area: 1 / 1 / 3 / 2;
    align-self: center;
  }

  /* Пара margin: auto центрировала содержимое в остатке высоты, когда ряд
     тянулся по самой высокой плитке. Здесь рядов по высоте никто не тянет,
     а в гриде те же авто-поля растащили бы цифру и подпись по углам ячеек. */
  .calculator__result--hero > .calculator__result-value,
  .calculator__result--hero > .calculator__result-note,
  .calculator__result:last-of-type > .calculator__result-title,
  .calculator__result:last-of-type > .calculator__check {
    margin-top: 0;
    margin-bottom: 0;
  }

  /* Внешнее кольцо снято — на 52px оно съедало бы половину зазора до цифры,
     волосяная кромка остаётся. */
  .calculator__result-icon {
    width: 52px;
    height: 52px;
    box-shadow: 0 0 0 1px rgba(124, 59, 246, .10);
  }
  .calculator__result-icon .icon { width: 24px; height: 24px; }

  .calculator__result--hero .calculator__result-icon {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .26);
  }

  .calculator__check-jump { width: 24px; height: 24px; }
  .calculator__check-jump .icon { width: 14px; height: 14px; }
}

/* ==========================================================================
   ЛАНДШАФТ ТЕЛЕФОНА (852×393, 932×430): колонки возвращаются
   --------------------------------------------------------------------------
   Замер до правки: секция 1642px при экране высотой 393 — 4.2 экрана,
   худшая цифра на сайте. Складывается она из того, что раскладка выбрана
   по ШИРИНЕ («до 1000 — одна колонка»), а в ландшафте узкая не ширина,
   а высота: полоса 788px, и форма растянута на неё целиком при том, что
   под содержимое остаётся 393px по вертикали.

   Одна колонка ставит плитки результата ПОД форму, то есть на второй-третий
   экран. Прибор, у которого ввод и вывод на разных экранах, перестаёт быть
   прибором.

   В ландшафте лечится тем же, чем в первом экране: форма слева, результаты
   справа, оба видны разом.

   Плитки внутри правой колонки идут столбиком: колонка 362px, две
   подколонки дали бы по 173, а «+$7 500» в --fz-num при 852 занимает 216.

   Итог: 1642 → 1145, 4.2 экрана → 2.9.

   Границы медиазапроса. max-width: 999 — чтобы правило не поймало десктоп
   в низком окне: десктоп принят и от высоты окна зависеть не должен.
   min-width: 700 — ниже этой ширины двух колонок не выходит по ширине,
   и там работает портретная раскладка (тот же порог, на котором стоит
   планшетная ступень кегля в tokens.css).
   ========================================================================== */
@media (orientation: landscape) and (max-height: 500px)
   and (min-width: 700px) and (max-width: 999px) {
  /* align-items: start, а не stretch. На десктопе колонки растягивают
     до общей высоты, чтобы они не кончались на разных уровнях, — там это
     видно и это правильно. Здесь ни одна колонка в экран не помещается
     целиком (форма 775 при экране 393), ровнять нечего, а растяжка стоит
     113px пустоты в плитках. */
  .calculator__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: var(--s-6);
  }

  /* Та же причина, что и на 375 (блок ≤640): колонка формы здесь 378px,
     под вопрос остаётся 238 — границы диапазона отнимают у него треть
     строки и гонят вопрос в третью. Точное значение никуда не девается,
     оно едет на бегунке, а min/max диктор берёт с самого ползунка. */
  .calculator__limits { display: none; }

  /* Сжатие строки — то же самое, что в блоке ≤640, и по той же причине,
     только здесь она острее: экран высотой 393, а строка при кегле 16
     выходила 121.6 (и 145.4 у самого длинного вопроса). Пять строк
     занимали 632px, то есть полтора экрана. Правила повторены, а не
     вынесены общим списком селекторов: медиазапрос ландшафта уже стоит
     на четырёх условиях, и приписать к нему пятое через запятую значит
     сделать нечитаемым оба. */
  .calculator__fields { gap: var(--s-2); }
  .calculator__field { padding: var(--s-2) var(--s-3); }

  .calculator__label {
    display: block;
    font-size: var(--fz-small);
    line-height: 1.3;
    /* Автоперенос по слогам снимается. Он приходит по наследству от <li>
       (base.css включает hyphens: auto на текстовые теги), и на 320 давал
       «Скольким готов предло-жить ИИ БРО?» — в вопросе формы это читается
       сломанной вёрсткой, ровно как в кнопке или заголовке, которым свод
       перенос запрещает. Строк от этого не прибавляется: «предложить»
       целиком уходит на вторую строку, которая и так была. */
    hyphens: none;
  }

  .calculator__icon {
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-right: var(--s-2);
    vertical-align: -3px;
  }

  /* Та же поправка запаса, что и в блоке для узких экранов выше: плашка ниже
     десктопной, значит прозрачное кольцо вокруг неё обязано быть шире,
     иначе зона захвата падает с 44 до 40. */
  .calculator__slider {
    --knob-w: 60px;
    --knob-h: 26px;
    --ring: 9px;
    --track-h: 8px;
  }

  .calculator__results {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: auto;
  }
}

/* ==========================================================================
   Нижняя граница ширины (≤427): плитки в один столбец
   --------------------------------------------------------------------------
   На 320 половина полосы даёт под цифру 104px. «+$2 100» в --fz-num-sm
   занимает 96 — влезает, но с запасом в восемь пикселей, то есть любая
   правка чисел или другой фолбэк шрифта выкинут цифру за борт. Две колонки
   на этой ширине не окупаются: они экономят 90px и держат всю секцию
   на восьмипиксельном допуске.

   Поэтому здесь все четыре плитки во всю ширину и с тем же приёмом, что
   у двух длинных: значок слева, в строку с цифрой. Экономия от него
   остаётся (значок больше не занимает свою строку), а риск переполнения
   уходит совсем.

   ГРАНИЦА ПОДНЯТА С 359 ДО 427. Приёмка 11.08.2026 нашла на 375 и 393
   переполнение, которого на 320 не было именно потому, что там работал
   этот блок: подпись «на сопровождении» во второй плитке вылезала
   за скругление карточки на 10px (375) и на 1px (393) — текст поверх
   фона страницы, видно глазом.

   Почему её нельзя было просто перенести. Между «на» и «сопровождении»
   стоит неразрывный пробел — он там обязателен по своду (нбсп после
   предлога), и от него вся связка становится для браузера ОДНИМ словом
   шириной 150px. Переноса по слогам внутри такого слова Chrome не делает
   (проверено: с обычным пробелом строка ломается на три, с нбсп остаётся
   одна и вылезает), а разрешить перенос по нбсп значило бы поставить
   предлог отдельной строкой — ровно то, ради чего нбсп и стоит.

   Арифметика границы. Кегль подписи ниже 640 фиксирован на 16px, поэтому
   150px — величина постоянная. Плитке нужно 150 + 2×16 паддинга = 182px,
   в ряду их две с зазором --s-4: контейнер ≥ 380, а контейнер = ширина
   экрана − 2×24 (--container-pad на 360–767). Отсюда 428px — первая
   ширина, где две колонки честно держат содержимое; 430 (Pro Max) в неё
   попадает и колонки сохраняет.

   Цена правки: +21px к высоте секции на 375 и на 393 (1814 → 1835),
   +22px к высоте страницы. Значок, встающий слева от цифры, почти всю
   разницу и отыгрывает.
   ========================================================================== */
@media (max-width: 427px) {
  .calculator__result {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: var(--s-4);
    align-items: center;
  }

  .calculator__result > .calculator__result-icon {
    grid-area: 1 / 1 / 3 / 2;
    align-self: center;
  }

  .calculator__result > .calculator__result-value,
  .calculator__result > .calculator__result-note {
    margin-top: 0;
    margin-bottom: 0;
  }
}

/* ==========================================================================
   ПОДЗАГОЛОВОК НА ТЕЛЕФОНЕ: РОВНЫЕ СТРОКИ ВМЕСТО ХВОСТА
   --------------------------------------------------------------------------
   Заказчик: «…продав ИИ БРО клиентам, которых уже ведёшь» — «ведёшь»
   уезжает на отдельную строку.

   Замер до правки (375, колонка 327px, лид 18px):
     Посчитай, сколько можешь / дополнительно заработать, /
     продав ИИ БРО клиентам, которых / уже ведёшь.
   Четыре строки, из них последняя — два слова. Жадная раскладка набивает
   третью строку под завязку, и хвост фразы остаётся один.

   text-wrap: balance. Число строк то же самое (алгоритм не имеет права
   его менять), но ширины выравниваются, и хвост уходит:
     Посчитай, сколько можешь / дополнительно заработать, /
     продав ИИ БРО клиентам, / которых уже ведёшь.
   На 393 то же самое, на 430 фраза складывается в три строки без хвоста.

   Вторая половина той же поломки — перенос «дополнит-ельно» на 393 и 430 —
   снята порогом hyphenate-limit-chars в base.css.

   Почему адресно, а не на все лиды сразу. Замер по одиннадцати
   подзаголовкам на 320/375/393/430: balance помогает калькулятору
   и историям, но портит ниши, знакомство, финальный призыв и экран 9 —
   там на 430 он разрывает «нормальная / обработка», то есть ровно ту
   фразу, на которую заказчик жаловался отдельным пунктом. Приём, который
   на одном экране чинит, а на другом ломает, глобальным быть не может.

   Внутри окна работы алгоритма: Chromium балансирует блоки не длиннее
   шести строк, здесь их три-четыре. От 700px правило снимается — там
   колонка шире и хвоста не возникает.
   ========================================================================== */
@media (max-width: 699px) {
  .calculator__lead { text-wrap: balance; }
}

/* ==========================================================================
   ВАЛЮТА РАСЧЁТА
   --------------------------------------------------------------------------
   Три варианта, все видны сразу — переключение в один тап, без раскрывающихся
   списков. Под капотом радиокнопки: клавиатура, чтение диктором и состояние
   «выбрано» достаются даром, ничего изображать скриптом не нужно.

   Сам input не прячем через display: none — так он выпадает из обхода
   с клавиатуры. Уводим за границы видимости, а видимый вид даёт соседний
   span, который читает :checked.
   ========================================================================== */
@media (hover: hover) {
}

@media (prefers-reduced-motion: reduce) {
  }

/* Оговорка под калькулятором. Мельче и приглушённее вывода над ней:
   это сноска к расчёту, а не второй вывод, — но и не петит, который
   прячут: её обязаны прочитать. */
.calculator__disclaimer {
  max-width: 62ch;
  margin: var(--s-5) 0 0;
  margin-left: auto;
  text-align: right;
}

@media (max-width: 900px) {
  .calculator__disclaimer { text-align: left; margin-left: 0; }
}

/* ==========================================================================
   ШИРИНА БЕГУНКА ПОД ВАЛЮТУ
   --------------------------------------------------------------------------
   --knob-w посчитана по самому длинному значению набора — так было и раньше,
   когда валюта была одна. С тремя валютами длина расходится втрое:

     BYN   самое длинное «15 000»     — шесть знаков
     RUB   самое длинное «416 700»    — семь
     KZT   самое длинное «2 300 000»  — девять

   Одна ширина на всех означала бы либо обрезанное число в тенге, либо
   пустую плашку в двух остальных валютах. Атрибут ставит скрипт при
   переключении.

   Растёт и зона захвата (--grip-w привязана к --knob-w): центры настоящего
   и нарисованного бегунков обязаны совпадать на всём ходу, иначе цифра
   разъезжается с пальцем.
   ========================================================================== */
.calculator__form[data-currency="kzt"] .calculator__slider { --knob-w: 96px; }

/* На узких экранах шкала и так тесная: в тенге бегунок занял бы почти треть
   дорожки. Кегль на ступень мельче — число целиком влезает в плашку уже. */
@media (max-width: 560px) {
  .calculator__form[data-currency="kzt"] .calculator__slider { --knob-w: 84px; }
  .calculator__form[data-currency="kzt"] .calculator__bubble { font-size: var(--fz-caption); }
}

/* ===========================================================================
   ИТОГИ В ТЕНГЕ
   --------------------------------------------------------------------------
   Тенговые суммы длиннее долларовых втрое, и при общем кегле вываливались
   из карточек. Замер на 1440: внутренняя ширина карточки 255px, самая длинная
   строка «+966 000 ₸» требует 269px при 49px кегля и 241px при 44px.
   Потолок опущен до 44px, нижняя граница и скорость роста подобраны так,
   чтобы на узких экранах строка тоже влезала.
   Долларовой страницы это правило не касается вовсе.
   ========================================================================== */
.calculator[data-currency="kzt"] .calculator__result-value {
  font-size: clamp(24px, 3.05vw, 44px);
}

/* Пара «было / стало» — та же тенговая беда, но правилом выше её не достать:
   «Стало» набрано не .calculator__result-value, а dd внутри
   .calculator__check-row, и до него потолок кегля не дотянулся.

   Здесь ужимается не кегль (он не спасает — разбор у flex-wrap выше),
   а зазор между подписью и значением: 16 → 8. Виден он ровно в тот момент,
   когда строка уже впритык, — при space-between значение и так стоит
   у правой кромки, и на всех остальных ширинах это просто воздух.
   Восьми пикселей хватает, чтобы строка не переносилась на 320-326
   и на 1071-1200; перенос остаётся только там, где не помогает уже ничто
   (1001-1070 и 1201-1241), и там он и должен срабатывать.

   Долларовой страницы правило не касается: «$1 350» втрое короче, в строку
   влезает на любой ширине и не переносится нигде на 320-1920. */
.calculator[data-currency="kzt"] .calculator__check-row { column-gap: var(--s-2); }