/*
 * Калькулятор развесовки (/balance/, Блоки 2 и 4) — ввод 4 угловых весов на
 * детализированной схеме карта (вид сверху) + результаты в реальном времени.
 * Логика — в balance-calculator.js; здесь только вёрстка, токены --gl-*
 * (см. правило в balance-app.css про реальную палитру сайта, а не логотипа).
 *
 * Схема (2026-09-09) — оригинальная построчная отрисовка (рулевая тяга,
 * радиатор, мотор, цепь, выхлоп), не трассировка референса и не фото —
 * технический "чертёж", тонкие обводки токенами, без заливок картинками.
 */

.gl-calc {
  max-width: 420px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--gl-space-4);
}

/* ── Класс (опционально) ─────────────────────────────────────────── */

.gl-calc-field label {
  display: block;
  margin-bottom: var(--gl-space-1);
}

/* Стилизованный нативный <select> — тот же паттерн, что .gl-filter-select
 * на странице пилота (driver_page.html). Отдельный кастомный JS-дропдаун
 * заявлен в ТЗ как «известное правило проекта», но по факту в кодовой базе
 * почти везде используют именно стилизованный select — проверено, реальных
 * div-based дропдаунов в проекте один (ad-hoc на compare_drivers.html, не
 * переиспользуемый компонент). Проще и надёжнее переиспользовать
 * работающий паттерн, чем городить новый ради формулировки ТЗ, которая
 * сама себе не соответствует. */
.gl-calc-select {
  width: 100%;
  background: var(--gl-surface-card);
  color: var(--gl-fg-2);
  border: 1px solid var(--gl-border-card);
  border-radius: var(--gl-radius-md);
  padding: var(--gl-space-2) var(--gl-space-3);
  font-size: 0.9rem;
  min-height: 44px;
}

/* ── Настройки над схемой (класс + геометрия) ─────────────────────── */

.gl-calc-setup {
  display: flex;
  flex-direction: column;
  gap: var(--gl-space-2);
}

.gl-calc-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gl-space-2);
}

.gl-calc-field-row--single {
  grid-template-columns: 1fr;
}

/* ── Единая схема карта: угловые поля + балласт + CG на одном контуре ─
 * (ТЗ §3.4 + §5.1 — одна «схема», не две). Слой балласта включается,
 * когда заполнена геометрия; без неё Блок 2 (веса + метрики) работает
 * как раньше, схема просто не принимает грузы. */

.gl-calc-schema {
  position: relative;
  width: 100%;
  aspect-ratio: 896 / 1199;
  margin: 0 auto;
}

.gl-calc-schema__svg {
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none; /* драг груза — полностью на нас, без перехвата браузером как скролл/зум */
  cursor: pointer;
}

.gl-calc-schema--ballast-locked .gl-calc-schema__svg {
  cursor: default;
}

/* Иллюстрация карта (2026-09-09) — векторизована (autotrace) из референса
 * пользователя, один compound-path (392 подпути, fill-rule evenodd), а не
 * набор отдельно стилизуемых деталей — раскраска одним цветом на всё. */
.gl-calc-schema__art {
  fill: var(--gl-fg-4);
}

/* Зоны крепления балласта — подсказка, не ограничение (ТЗ §5.1).
 * Пока слой балласта заблокирован (нет геометрии) — прячем, чтобы не
 * намекать на интерактивность, которой ещё нет. Толщина обводки и
 * пунктир увеличены под масштаб координат новой схемы (896×1199,
 * раньше 280×400 — координаты выросли ~в 3.2 раза). */
.gl-calc-zone {
  fill: var(--gl-brand-yellow);
  fill-opacity: 0.06;
  stroke: var(--gl-brand-yellow);
  stroke-opacity: 0.25;
  stroke-width: 5;
  stroke-dasharray: 13 10;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

.gl-calc-schema--ballast-locked .gl-calc-zone {
  opacity: 0;
}

.gl-calc-schema__lock {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(80%, 260px);
  margin: 0;
  padding: var(--gl-space-2) var(--gl-space-3);
  text-align: center;
  font-size: var(--gl-text-tiny-size);
  color: var(--gl-fg-3);
  background: var(--gl-surface-card);
  border: 1px solid var(--gl-border-card);
  border-radius: var(--gl-radius-md);
  pointer-events: none;
}

.gl-calc-schema:not(.gl-calc-schema--ballast-locked) .gl-calc-schema__lock {
  display: none;
}

.gl-calc-schema__hint {
  font-size: var(--gl-text-small-size);
  color: var(--gl-fg-3);
  margin: calc(-1 * var(--gl-space-2)) 0 0;
}

.gl-calc-corner {
  position: absolute;
  width: 26%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  pointer-events: none; /* тап мимо инпута проходит сквозь к SVG (добавление груза) */
}

.gl-calc-corner span {
  font-size: var(--gl-text-tiny-size);
  text-transform: uppercase;
  letter-spacing: var(--gl-tracking-wider);
  color: var(--gl-fg-4);
}

.gl-calc-corner input {
  width: 100%;
  text-align: center;
  font-family: var(--gl-font-mono);
  font-size: 1.1rem;
  font-weight: var(--gl-weight-semibold);
  color: var(--gl-fg-1);
  background: var(--gl-surface-card);
  border: 1px solid var(--gl-border-card);
  border-radius: var(--gl-radius-md);
  padding: var(--gl-space-1);
  min-height: 44px;
  pointer-events: auto;
}

.gl-calc-corner input:focus {
  outline: none;
  border-color: var(--gl-brand-yellow);
}

.gl-calc-corner input.gl-calc-corner--error {
  border-color: var(--gl-brand-red);
}

/* % от общего веса на этот угол — презентационное значение, считается из
 * тех же appliedCorners/metrics, что уже выводятся в gauge-баре ниже. */
.gl-calc-corner__pct {
  font-family: var(--gl-font-mono);
  font-size: var(--gl-text-tiny-size);
  color: var(--gl-fg-4);
}

/* Итоговый вес угла после балласта (база + Δ, ТЗ §5.3) */
.gl-calc-corner__result {
  font-family: var(--gl-font-mono);
  font-size: var(--gl-text-tiny-size);
  font-weight: var(--gl-weight-semibold);
  color: var(--gl-brand-cyan);
}

.gl-calc-corner--lf { top: 3%; left: 0; }
.gl-calc-corner--rf { top: 3%; right: 0; }
.gl-calc-corner--lr { bottom: 3%; left: 0; }
.gl-calc-corner--rr { bottom: 3%; right: 0; }

/* ── Сообщения (ошибки/предупреждения) ───────────────────────────── */

.gl-calc-messages {
  display: flex;
  flex-direction: column;
  gap: var(--gl-space-1);
}

.gl-calc-message {
  font-size: var(--gl-text-small-size);
  padding: var(--gl-space-2) var(--gl-space-3);
  border-radius: var(--gl-radius-md);
  border: 1px solid transparent;
}

.gl-calc-message--error {
  background: rgba(255, 0, 0, 0.08);
  border-color: var(--gl-brand-red);
  color: var(--gl-fg-1);
}

.gl-calc-message--warning {
  background: rgba(255, 193, 7, 0.08);
  border-color: var(--gl-brand-yellow);
  color: var(--gl-fg-1);
}

/* ── Результаты: gauge-бар перед/зад + лево/право ─────────────────────
 * Пара иконок-силуэтов (не текстовый список метрик) — ось деления читается
 * прямо по форме иконки: вертикальная капсула с горизонтальной осью для
 * перед/зад (совпадает с ориентацией самой схемы — нос сверху), горизон-
 * тальная капсула с вертикальной осью для лево/право. Cross weight и
 * База/Итого — отдельные строки ниже: у них нет "двух полюсов" под иконку. */

.gl-calc-gaugebar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gl-space-3);
}

.gl-calc-gauge {
  display: flex;
  align-items: center;
  gap: var(--gl-space-2);
  background: var(--gl-surface-card);
  border: 1px solid var(--gl-border-card);
  border-radius: var(--gl-radius-lg);
  padding: var(--gl-space-2) var(--gl-space-3);
}

/* Место под инфо-кнопку (?) в углу — только у перед/зад, лево/право её не
 * показывает (там нечего пояснять — 43/57 объясняется только у перед/зад). */
.gl-calc-gauge--fr {
  position: relative;
  padding-right: 44px;
}

.gl-calc-gauge__info {
  position: absolute;
  right: 6px;
  bottom: 6px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--gl-border-card);
  border-radius: 50%;
  background: var(--gl-surface-card-hover);
  color: var(--gl-fg-4);
  font-size: 15px;
  padding: 0;
  cursor: pointer;
}

.gl-calc-gauge__info:hover,
.gl-calc-gauge__info:focus-visible {
  color: var(--gl-brand-yellow-bright);
  border-color: var(--gl-brand-yellow);
}

.gl-calc-gauge__icon {
  width: 32px;
  height: auto;
  flex: 0 0 auto;
}

.gl-calc-gauge--lr .gl-calc-gauge__icon {
  width: 44px;
}

.gl-calc-gauge__outline {
  fill: none;
  stroke: var(--gl-fg-4);
  stroke-width: 2;
}

.gl-calc-gauge__mid {
  stroke: var(--gl-fg-4);
  stroke-width: 1;
  stroke-dasharray: 2 2;
}

.gl-calc-gauge__wheel {
  fill: var(--gl-surface-card-hover);
  stroke: var(--gl-fg-4);
  stroke-width: 1;
}

.gl-calc-gauge--green .gl-calc-gauge__outline { stroke: var(--gl-signal-green); }
.gl-calc-gauge--yellow .gl-calc-gauge__outline { stroke: var(--gl-brand-yellow); }
.gl-calc-gauge--red .gl-calc-gauge__outline { stroke: var(--gl-brand-red); }

.gl-calc-gauge__rows {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.gl-calc-gauge__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--gl-space-2);
}

.gl-calc-gauge__label {
  font-size: var(--gl-text-tiny-size);
  color: var(--gl-fg-4);
}

.gl-calc-gauge__value {
  font-family: var(--gl-font-mono);
  font-weight: var(--gl-weight-semibold);
  color: var(--gl-fg-1);
}

.gl-calc-gauge--green .gl-calc-gauge__value { color: var(--gl-signal-green); }
.gl-calc-gauge--yellow .gl-calc-gauge__value { color: var(--gl-brand-yellow); }
.gl-calc-gauge--red .gl-calc-gauge__value { color: var(--gl-brand-red); }

/* ── Cross weight — отдельная строка-чип, тот же цветовой язык ──────── */

.gl-calc-cross {
  display: flex;
  align-items: center;
  gap: var(--gl-space-1);
  background: var(--gl-surface-card);
  border: 1px solid var(--gl-border-card);
  border-radius: var(--gl-radius-lg);
  padding: var(--gl-space-2) var(--gl-space-3);
  font-size: var(--gl-text-small-size);
}

.gl-calc-cross__dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gl-fg-4);
  flex: 0 0 auto;
}

.gl-calc-cross--green .gl-calc-cross__dot { background: var(--gl-signal-green); }
.gl-calc-cross--yellow .gl-calc-cross__dot { background: var(--gl-brand-yellow); }
.gl-calc-cross--red .gl-calc-cross__dot { background: var(--gl-brand-red); }

.gl-calc-cross__label {
  color: var(--gl-fg-3);
  flex: 1 1 auto;
}

.gl-calc-cross__value {
  font-family: var(--gl-font-mono);
  font-weight: var(--gl-weight-semibold);
  color: var(--gl-fg-1);
}

/* ── База / Итого (ТЗ 3.1 kart_only_weight) ──────────────────────────── */

.gl-calc-weightrow {
  display: flex;
  justify-content: center;
  gap: var(--gl-space-5);
  padding: var(--gl-space-1) 0;
}

.gl-calc-weightrow__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.gl-calc-weightrow__label {
  font-size: var(--gl-text-tiny-size);
  text-transform: uppercase;
  letter-spacing: var(--gl-tracking-wider);
  color: var(--gl-fg-4);
}

.gl-calc-weightrow__value {
  font-family: var(--gl-font-mono);
  font-size: 1.05rem;
  font-weight: var(--gl-weight-semibold);
  color: var(--gl-fg-2);
}

.gl-calc-weightrow__item--total .gl-calc-weightrow__value {
  color: var(--gl-brand-yellow-bright);
}

.gl-calc-min-weight {
  font-size: var(--gl-text-small-size);
  color: var(--gl-fg-3);
  text-align: center;
}

.gl-calc-min-weight--under {
  color: var(--gl-brand-yellow-bright);
  font-weight: var(--gl-weight-semibold);
}

/* ── CTA сохранить (Блок 3, три состояния — см. home.html) ─────────── */

.gl-calc-cta {
  text-align: center;
  font-size: var(--gl-text-small-size);
  color: var(--gl-fg-3);
}

.gl-calc-save__login {
  color: var(--gl-brand-yellow-bright);
  font-weight: var(--gl-weight-semibold);
}

.gl-calc-save {
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: var(--gl-space-2);
}

.gl-calc-save__label {
  margin: 0;
  font-size: var(--gl-text-tiny-size);
  text-transform: uppercase;
  letter-spacing: var(--gl-tracking-wider);
  color: var(--gl-fg-4);
}

.gl-calc-save__readonly {
  margin: 0;
  color: var(--gl-fg-3);
}

.gl-calc-save__kart-fixed {
  margin: 0;
  font-size: var(--gl-text-small-size);
  color: var(--gl-fg-2);
}

.gl-calc-save__kart-fixed strong {
  color: var(--gl-fg-1);
}

.gl-calc-save__parent {
  margin: 0;
  font-size: var(--gl-text-tiny-size);
  color: var(--gl-fg-4);
}

.gl-calc-save__checkbox {
  display: flex;
  align-items: center;
  gap: var(--gl-space-2);
  font-size: var(--gl-text-small-size);
  color: var(--gl-fg-2);
}

.gl-calc-save__row {
  display: flex;
  gap: var(--gl-space-2);
}

.gl-calc-save__row > * {
  flex: 1 1 0;
  min-width: 0;
}

.gl-calc-save__row--new-kart {
  flex-wrap: wrap;
}

.gl-calc-save__btn {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--gl-border-card);
  background: transparent;
  color: var(--gl-fg-2);
  font-family: inherit;
  font-weight: var(--gl-weight-semibold);
  font-size: var(--gl-text-small-size);
  border-radius: var(--gl-radius-md);
  min-height: 44px;
  flex: 0 0 auto;
  padding: 0 var(--gl-space-3);
}

.gl-calc-save__btn--accent {
  background: var(--gl-brand-yellow);
  color: var(--gl-fg-on-yellow);
  border-color: var(--gl-brand-yellow);
}

.gl-calc-save__message {
  margin: 0;
  font-size: var(--gl-text-small-size);
  color: var(--gl-signal-green);
}

.gl-calc-save__message--error {
  color: var(--gl-brand-red);
}

/* ══════════════════════════════════════════════════════════════════
 * Блок 4 — визуальный редактор балласта (ТЗ 5.1-5.5)
 * Схема — общая с Блоком 2 (см. «Единая схема карта» выше). Здесь только
 * геометрия, маркеры грузов, CG, легенда.
 * ══════════════════════════════════════════════════════════════════ */

/* ── Геометрия ────────────────────────────────────────────────────── */

.gl-calc-geometry {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gl-space-2);
}

.gl-calc-geometry__field label {
  display: block;
  font-size: var(--gl-text-tiny-size);
  text-transform: uppercase;
  letter-spacing: var(--gl-tracking-wider);
  color: var(--gl-fg-4);
  margin-bottom: 2px;
}

.gl-calc-geometry__field input {
  width: 100%;
  text-align: center;
  font-family: var(--gl-font-mono);
  color: var(--gl-fg-1);
  background: var(--gl-surface-card);
  border: 1px solid var(--gl-border-card);
  border-radius: var(--gl-radius-md);
  padding: var(--gl-space-1);
  min-height: 40px;
}

.gl-calc-geometry__field input:focus {
  outline: none;
  border-color: var(--gl-brand-yellow);
}

.gl-calc-geometry__hint {
  font-size: var(--gl-text-small-size);
  color: var(--gl-fg-3);
  margin: 0;
}

/* ── Маркеры грузов на схеме ──────────────────────────────────────── */

.gl-calc-ballast-marker {
  cursor: grab;
}

.gl-calc-ballast-marker__hit {
  fill: transparent;
  pointer-events: all;
}

.gl-calc-ballast-marker__dot {
  fill: var(--gl-brand-yellow);
  stroke: var(--gl-surface-body);
  stroke-width: 6;
  pointer-events: none;
}

.gl-calc-ballast-marker--negative .gl-calc-ballast-marker__dot {
  fill: var(--gl-brand-red);
}

/* Размеры маркеров/текста ниже увеличены ~в 3.2 раза (2026-09-09) — схема
 * перешла с координат 280×400 на 896×1199 (реальный viewBox трассированной
 * иллюстрации), маркеры должны расти вместе с координатной сеткой. */
.gl-calc-ballast-marker__text {
  font-family: var(--gl-font-mono);
  font-size: 29px;
  font-weight: var(--gl-weight-semibold);
  fill: var(--gl-fg-on-yellow);
  pointer-events: none;
}

.gl-calc-cg circle {
  fill: none;
  stroke: var(--gl-brand-cyan);
  stroke-width: 6;
}

.gl-calc-cg line {
  stroke: var(--gl-brand-cyan);
  stroke-width: 5;
}

.gl-calc-cg--target circle,
.gl-calc-cg--target line {
  stroke: var(--gl-fg-4);
  stroke-dasharray: 10 6;
}

.gl-calc-ballast-legend {
  display: flex;
  flex-direction: column;
  gap: var(--gl-space-2);
}

.gl-calc-ballast__legend {
  display: flex;
  align-items: center;
  gap: var(--gl-space-1);
  font-size: var(--gl-text-tiny-size);
  color: var(--gl-fg-4);
  margin: 0;
}

.gl-calc-legend-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-right: 2px;
}

.gl-calc-legend-dot--target {
  border: 1.5px dashed var(--gl-fg-4);
}

.gl-calc-legend-dot--actual {
  background: var(--gl-brand-cyan);
  margin-left: var(--gl-space-3);
}

.gl-calc-ballast__info {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 27px;
  height: 27px;
  margin-left: auto;
  border: 1px solid var(--gl-border-card);
  border-radius: 50%;
  background: var(--gl-surface-card-hover);
  color: var(--gl-brand-yellow);
  font-size: 14px;
  padding: 0;
  cursor: pointer;
}

.gl-calc-ballast__info:hover,
.gl-calc-ballast__info:focus-visible {
  color: var(--gl-brand-yellow-bright);
  border-color: var(--gl-brand-yellow);
}

/* ── Инфо-модалка (кнопки ?/! — «Почему не 50/50», точность расчёта) ── */

.gl-calc-info-modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gl-calc-info-modal[hidden] {
  display: none;
}

.gl-calc-info-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
}

.gl-calc-info-modal__panel {
  position: relative;
  z-index: 1;
  width: calc(100% - var(--gl-space-3) * 2);
  max-width: 420px;
  max-height: calc(100% - var(--gl-space-4) * 2);
  overflow-y: auto;
  background: var(--gl-surface-card);
  border: 1px solid var(--gl-border-divider);
  border-radius: var(--gl-radius-lg);
  box-shadow: var(--gl-shadow-card);
  padding: var(--gl-space-3);
  padding-right: calc(var(--gl-space-3) + 28px);
}

.gl-calc-info-modal__close {
  position: absolute;
  top: var(--gl-space-2);
  right: var(--gl-space-2);
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  appearance: none;
  -webkit-appearance: none;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--gl-fg-4);
  font-size: 14px;
  cursor: pointer;
}

.gl-calc-info-modal__close:hover,
.gl-calc-info-modal__close:focus-visible {
  color: var(--gl-fg-1);
}

.gl-calc-info-modal__body .gl-calc-lesson__label,
.gl-calc-info-modal__body .gl-calc-lesson__text,
.gl-calc-info-modal__body .gl-calc-lesson__link {
  margin-right: var(--gl-space-3); /* не залезать под кнопку закрытия */
}

/* ── Попап добавления/редактирования груза ───────────────────────── */

.gl-calc-ballast-popup {
  position: fixed;
  left: var(--gl-space-3);
  right: var(--gl-space-3);
  bottom: calc(64px + env(safe-area-inset-bottom) + var(--gl-space-2));
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: var(--gl-space-2);
  background: var(--gl-surface-card);
  border: 1px solid var(--gl-brand-yellow);
  border-radius: var(--gl-radius-lg);
  box-shadow: var(--gl-shadow-card);
  padding: var(--gl-space-3);
}

.gl-calc-ballast-popup[hidden] {
  display: none;
}

.gl-calc-ballast-popup__row label {
  display: block;
  font-size: var(--gl-text-tiny-size);
  text-transform: uppercase;
  letter-spacing: var(--gl-tracking-wider);
  color: var(--gl-fg-4);
  margin-bottom: 2px;
}

.gl-calc-ballast-popup__row input {
  width: 100%;
  color: var(--gl-fg-1);
  background: var(--gl-surface-card-hover);
  border: 1px solid var(--gl-border-card);
  border-radius: var(--gl-radius-md);
  padding: var(--gl-space-2);
  min-height: 44px;
  font-size: 1rem;
}

.gl-calc-ballast-popup__row input:focus {
  outline: none;
  border-color: var(--gl-brand-yellow);
}

.gl-calc-ballast-popup__actions {
  display: flex;
  gap: var(--gl-space-2);
}

.gl-calc-ballast-popup__actions button {
  flex: 1 1 0;
  min-height: 44px;
  border-radius: var(--gl-radius-md);
  font-weight: var(--gl-weight-semibold);
  font-size: var(--gl-text-small-size);
  border: 1px solid var(--gl-border-card);
  background: transparent;
  color: var(--gl-fg-2);
}

.gl-calc-ballast-popup__save {
  background: var(--gl-brand-yellow) !important;
  color: var(--gl-fg-on-yellow) !important;
  border-color: var(--gl-brand-yellow) !important;
}

.gl-calc-ballast-popup__delete {
  color: var(--gl-brand-red) !important;
  border-color: var(--gl-brand-red) !important;
}

/* ══════════════════════════════════════════════════════════════════
 * Блок 6 — диагностика и обучающий блок (ТЗ 7.1-7.2)
 * ══════════════════════════════════════════════════════════════════ */

.gl-calc-diagnostics {
  display: flex;
  flex-direction: column;
  gap: var(--gl-space-2);
}

.gl-calc-diagnostic {
  background: var(--gl-surface-card);
  border: 1px solid var(--gl-brand-cyan);
  border-radius: var(--gl-radius-lg);
  padding: var(--gl-space-2) var(--gl-space-3);
}

.gl-calc-diagnostic p {
  margin: 0 0 var(--gl-space-1);
  font-size: var(--gl-text-small-size);
  color: var(--gl-fg-2);
}

.gl-calc-diagnostic a {
  font-size: var(--gl-text-micro-size);
  color: var(--gl-brand-cyan);
}

.gl-calc-lesson {
  background: var(--gl-surface-inset);
  border: 1px solid var(--gl-border-divider);
  border-radius: var(--gl-radius-lg);
  padding: var(--gl-space-3);
}

.gl-calc-lesson__label {
  margin: 0 0 var(--gl-space-1);
  font-size: var(--gl-text-tiny-size);
  text-transform: uppercase;
  letter-spacing: var(--gl-tracking-wider);
  color: var(--gl-brand-cyan);
  font-weight: var(--gl-weight-semibold);
}

.gl-calc-lesson__text {
  margin: 0 0 var(--gl-space-1);
  font-size: var(--gl-text-small-size);
  color: var(--gl-fg-3);
}

.gl-calc-lesson__link {
  font-size: var(--gl-text-micro-size);
  color: var(--gl-brand-cyan);
}

/* ══════════════════════════════════════════════════════════════════
 * Вступление над формой (ТЗ Блок 8, §9.2) — длинный лендинг-текст
 * («Что такое развесовка карта») убран со страницы калькулятора по
 * просьбе пользователя (2026-09-09): здесь остаётся только это краткое
 * вступление, не отдельная статья.
 * ══════════════════════════════════════════════════════════════════ */

.gl-calc-intro {
  max-width: 420px;
  margin: 0 auto var(--gl-space-4);
  font-size: var(--gl-text-small-size);
  color: var(--gl-fg-3);
  text-align: center;
}