/* ============================================================
   TOVIAN · Расчёт поставки — доводка вёрстки состояний
   ------------------------------------------------------------
   Подключается ПОСЛЕДНИМ, после calc-tool.css и calc-lab.css.

   Здесь нет ни одной новой сущности — только исправления мест,
   где блок, появившийся ПОСЛЕ действия человека, выпадал из
   языка страницы. Причина всегда одна и та же: макет колонок
   рассчитан на число, а на его месте стоит фраза. Число узкое
   и выравнивается вправо; «ставка на этот маршрут не задана» —
   широкое, и в колонке под число оно рвётся по слогам, лезет
   на подпись и оставляет за собой пустоту.

   Отсутствие обязано читаться как отсутствие, а не как поломка
   вёрстки: сломанная вёрстка обесценивает и те величины рядом,
   которые собраны и верны.
   ============================================================ */

/* ------------------------------------------------------------
   1. ОЖИДАНИЕ ОТВЕТА
   Полоса шагов занимала левую половину карточки, а правая
   оставалась пустой во всю высоту: пустое поле на месте, где
   секунду назад была форма, читается как «страница отвалилась».
   Шаги раскладываются в две колонки и заполняют карточку.
   ------------------------------------------------------------ */
@media (min-width: 900px) {
  .cf-scan__steps {
    max-width: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 14px;
    align-content: start;
  }
}

/* ------------------------------------------------------------
   2. ИТОГОВАЯ СВОДКА НА УЗКОМ ЭКРАНЕ
   .cr-subt — строка «подпись слева, величина справа». Величина,
   заменённая причиной («ставка логистики на этот маршрут не
   задана»), занимала три строки, подпись при этом прижималась
   к базовой линии последней из них и стояла посреди пустоты.
   На узком экране строка разворачивается сверху вниз.
   ------------------------------------------------------------ */
@media (max-width: 760px) {
  .cr-subt {
    flex-direction: column;
    align-items: stretch;
    gap: 3px;
  }
  .cr-subt b { text-align: left; }
  .cr-subt b .cr-nd {
    max-width: 100%;
    text-align: left;
    display: block;
  }
}

/* ------------------------------------------------------------
   3. СТРУКТУРА РАСХОДОВ НА УЗКОМ ЭКРАНЕ
   В две колонки («название расхода» / «сумма») помещается сумма,
   но не помещается причина её отсутствия: обе колонки рвались
   по слогам одновременно — «таможенная / пошлина» слева и
   «таможенная стоимость не / рассчитана» справа. Строка, у
   которой вместо суммы стоит фраза, разворачивается вертикально.

   Разворот строки задаёт метка .cr-wf__row--nd, которую движок
   ставит ровно там, где вместо суммы стоит фраза. Здесь остаётся
   то, что метка не покрывает: строка «в цене поставщика» приходит
   без числа, но и без причины, и её значение тоже нельзя жать
   в колонку под цифры.
   ------------------------------------------------------------ */
@media (max-width: 760px) {
  .cr-wf__row { column-gap: 12px; }
  .cr-wf__row--nd .cr-wf__k b { text-wrap: pretty; }
  .cr-wf__v.is-incl { text-align: left; }
  .cr-wf__v.is-incl .cr-nd { max-width: 100%; text-align: left; }
}

/* ------------------------------------------------------------
   4. «ПОЛНАЯ СТОИМОСТЬ ДО СКЛАДА · НЕ СЧИТАЕТСЯ»
   Подпись и значение выровнены по базовой линии и раздвинуты по
   краям. Когда справа стоит не «76 034 ₽», а фраза, она рвалась
   на «НЕ» и «СЧИТАЕТСЯ» с межстрочным интервалом от кегля 30px —
   между двумя словами зияла дыра в полторы строки.
   ------------------------------------------------------------ */
.cr-wf__total b .cr-nd {
  font-size: 15px;
  line-height: 1.35;
  display: inline-block;
  max-width: 22ch;
  text-align: right;
}
@media (max-width: 760px) {
  .cr-wf__total { flex-direction: column; align-items: flex-start; gap: 6px; }
  .cr-wf__total b .cr-nd { text-align: left; max-width: 100%; }
}

/* ------------------------------------------------------------
   5. КРУПНАЯ СТРОКА КАРТОЧКИ (код ТН ВЭД, ставка перевозки)
   Кегль clamp(24px,3vw,38px) с межстрочным интервалом под цифры.
   Когда вместо числа приходит причина, тот же интервал разносит
   её строки на полтора роста букв. Метка --nd ставится движком
   ровно тогда, когда числа в этой строке нет.
   ------------------------------------------------------------ */
.cr-hs__code--nd { font-size: 15px; line-height: 1.4; letter-spacing: 0; }
/* Внутренний .cr-nd приходит кеглем 12,5px, а строчный интервал держит
   блок-родитель по своему кеглю: строки расходились на полтора роста букв.
   Делаем причину блоком с собственным интервалом — тогда интервал считается
   от её кегля, а не от кегля цифры, которой здесь нет. */
.cr-hs__code--nd .cr-nd,
.cr-hs__code--nd .cr-nd--code {
  display: block;
  font-size: 15px;
  line-height: 1.4;
}
.cr-hs__code:has(.cr-nd--code) { line-height: 1.4; }

/* Чипы ставок: «ставка не собрана» шире, чем «22%», и на узком
   экране два чипа в ряд выдавливали друг друга за край карточки. */
.cr-hs__rates { flex-wrap: wrap; }
.cr-hs__rate { min-width: 0; }
.cr-hs__rate b { margin-left: 8px; }

/* ------------------------------------------------------------
   6. ОТКАЗ ИСТОЧНИКА И НЕПРИНЯТЫЙ ВВОД
   Экран после неудачного нажатия — тоже результат работы, и он
   носит ту же одежду, что и отчёт: шапка с бейджем, строка
   маршрута, карточка, кнопки. Отличие ровно одно — цвет: терракот
   вместо лайма. Лаймовый бейдж над словами «источник недоступен»
   означал бы, что всё в порядке.
   ------------------------------------------------------------ */
.cr-badge--off {
  border-color: color-mix(in srgb, var(--terra) 45%, transparent);
  background: color-mix(in srgb, var(--terra) 12%, transparent);
  color: var(--terra);
}
.cr-badge--off::before { background: var(--terra); }
.cr-head--off .cr-route { color: var(--muted); }

.cr-card--off { border-color: color-mix(in srgb, var(--terra) 38%, var(--line)); }
.cr-off__k {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--faint);
}
.cr-off__v {
  margin-top: 8px;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: clamp(20px, 2.4vw, 30px);
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--terra);
  text-wrap: balance;
}
.cr-card--off .cr-led { margin-top: 18px; }
.cr-card--off .cr-acts { margin-top: 22px; }

/* Повтор — действие, а не ссылка: он единственный, ради чего сюда
   пришли, и должен читаться первым. */
.cr-act--retry {
  border-color: color-mix(in srgb, var(--lime) 45%, transparent);
  color: var(--lime-ink);
}
.cr-act--retry:hover {
  background: color-mix(in srgb, var(--lime) 12%, transparent);
  border-color: var(--lime-ink);
}

/* ------------------------------------------------------------
   7. СТРОКИ «КЛЮЧ — ЗНАЧЕНИЕ» С ДЛИННЫМ ЗНАЧЕНИЕМ
   .cr-ledrow держит ключ слева и значение справа. Значением тут
   бывает предложение целиком; на узком экране оно вытесняло ключ
   в один символ ширины.
   ------------------------------------------------------------ */
@media (max-width: 640px) {
  .cr-ledrow, .cr-ledrow--wrap {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
  }
  .cr-ledrow__v { text-align: left; }
  .cr-ledrow__v .cr-nd { max-width: 100%; text-align: left; }
}

/* ------------------------------------------------------------
   8. КНОПКА СПОСОБА ДОСТАВКИ БЕЗ СТАВКИ
   Подпись «ставка на этот маршрут не задана» приходит с сервера
   и должна выглядеть предупреждением, а не рекламой скорости.
   Кнопка остаётся выбираемой: расчёт по ней состоится, просто без
   строки перевозки — и об этом сказано заранее, до списания токена.
   ------------------------------------------------------------ */
.cf-mode.is-norate span { color: var(--terra); opacity: .9; }
.cf-mode.is-norate { border-style: dashed; }
.cf-mode.is-norate.is-sel { border-style: solid; }

/* ------------------------------------------------------------
   9. МЕЛОЧИ, ЗАМЕЧЕННЫЕ ГЛАЗАМИ
   ------------------------------------------------------------ */
/* Метрика, у которой вместо числа причина, не должна кричать
   капслоком наравне с «120 кг»: причина — это подпись, а не
   величина. */
.cr-m b .cr-nd { text-transform: none; letter-spacing: 0; }

/* Длинный код/наименование не должны рвать карточку по ширине —
   вместо горизонтальной полосы у страницы перенос по символам. */
.cr-hs__code, .cr-off__v { overflow-wrap: anywhere; }

/* Ряд карточек результата на планшете: две колонки при 900+,
   одна ниже — иначе «перевозка» и «код ТН ВЭД» сжимались до
   ширины, в которой десятизначный код не помещается. */
@media (max-width: 900px) {
  .cr-grid { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------
   10. ХЛЕБНЫЕ КРОШКИ НА УЗКОМ ЭКРАНЕ
   На 390 фреска шапки идёт БЕЗ затемнения (calc-lab.css: у
   .cx-hero__art на мобильном filter:none, а завеса в этой полосе
   опускается до .08) — так задумано, картинка там главная. Но
   крошки лежат ровно на её светлой середине: серое «главная →
   услуги» и белое название страницы читаются по облакам почти
   никак, а стрелки-разделители пропадают совсем.

   Гасим не картинку целиком, а только полосу под текстом крошек:
   мягкая завеса сверху, сходящая на нет до того, как начнётся
   сюжет фрески. Высота считается от той же величины, что и отступ
   крошек в pv-styles.css (padding-top: clamp(84px,12vh,104px)),
   плюс две строки текста и растушёвка.
   ------------------------------------------------------------ */
@media (max-width: 760px) {
  .cx-hero > .crumb::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 0;
    height: calc(clamp(84px, 12vh, 104px) + 130px);
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(180deg,
      rgba(7, 8, 9, .82) 0%,
      rgba(7, 8, 9, .72) 46%,
      rgba(7, 8, 9, .44) 72%,
      rgba(7, 8, 9, 0) 100%);
  }
  /* Разделитель «→» стоит на opacity .5 и на светлом фоне исчезал
     раньше самих ссылок — под завесой он снова виден. */
  .cx-hero > .crumb .crumb__sep { opacity: .75; }
}