/* t3.css — секции шаблона 3 «Безопасная и прозрачная покупка».
   Владеет только своими блоками `.t3-*`. Ни один класс дизайн-системы здесь
   не получает правил — ни субъектом селектора, ни через потомка, ни через
   `> *`. `.section`, `.slot`, `.claim`, `.rule`, `.btn`, `.field`, `.entry`,
   `.tpl-*` и `.col-*` используются как есть; там, где системному элементу
   нужно поведение шаблона, рядом с системным классом в разметке стоит свой
   (`.btn.t3-act__btn`, `.tpl-pair.t3-clause`, `.tpl-ladder__step.t3-step`),
   и правило пишется на него.

   Блоки `.tpl-*` здесь не пересобираются: разворот «утверждение / раскрытие»
   в `ddu` и `deadlines` — это `.tpl-pair`, цепочка финансирования — `.tpl-ladder`,
   вводные абзацы — `.tpl-lede`, оговорки — `.tpl-note`, повторяемая позиция
   перечня — `.entry`. Собственных блоков четыре, и каждый существует потому,
   что системного аналога нет: `.t3-flow` — горизонтальная схема с линией
   и точками (все `.tpl-*` вертикальны), `.t3-facts` — таблица «метка /
   значение» без крупной цифры (а `.tpl-figure` без строки-следствия
   ставить нельзя), `.t3-stage` и `.t3-check` — строки таблицы-развёртки
   на три и четыре колонки.

   Значений в файле нет: только var(--as-*) из tokens.css. Своих @keyframes
   нет тоже — появление на странице одно и живёт в motion.css.

   Композиционный акцент шаблона: структура сделки. Отсюда линейка вместо
   рамки, таблица-развёртка вместо карточки и плотная сетка вместо воздуха.
   Каждый следующий блок уменьшает воспринимаемый риск, и визуально это
   выражено сменой регистра: тёмный на барьере, светлый там, где начинаются
   проверяемые документы.

   Мобильная логика шаблона (TEMPLATES.md, «TEMPLATE 3 · 11»): порядок блоков
   держит data-nav-order в разметке, остальное — медиазапросы внизу файла. */

/* ==========================================================================
   1. Общее для секций шаблона
   ========================================================================== */

/* Заголовок секции набран .d3; на телефоне он опускается на ступень —
   см. медиазапрос 900px. Класс нужен только затем, чтобы шкалу двигал
   шаблон, а не дизайн-система. */
.t3-title {
  text-wrap: balance;
}

/* Колонка шаблона внутри двенадцати колонок .section__body. Класс несёт две
   вещи: выравнивание по верху (иначе короткий блок растягивается на высоту
   соседнего, и акцентная черта .tpl-lede тянется вдоль пустоты) и мобильную
   раскладку — см. медиазапрос 900px. */
.t3-col {
  align-self: start;
}

/* Ряд действия: кнопка, её оговорка и статус рядом на одной линии. */
.t3-act {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--as-s5);
}

.t3-act__note {
  max-width: var(--as-measure);
}

/* Полоса статусов: банк, предел, документ — короткими метками в строку.
   Значения приходят из связки; пока их нет, видно имя переменной. */
.t3-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--as-s3);
}

/* ==========================================================================
   2. Таблица фактов — hero, застройщик, объект
   ==========================================================================
   Ряд «метка / значение», отбитый волосяной линейкой сверху. Ни рамки,
   ни подложки: таблица-развёртка, а не карточка. Колонки складываются
   сами, без @media — минимум колонки равен половине меры абзаца. */
.t3-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--as-measure) / 2)), 1fr));
  column-gap: var(--as-s7);
  row-gap: 0;
  margin: 0;
}

.t3-facts--stacked {
  grid-template-columns: minmax(0, 1fr);
}

.t3-facts__row {
  display: flex;
  flex-direction: column;
  gap: var(--as-s2);
  padding-block: var(--as-s4);
  border-block-start: var(--as-rule-weight) solid var(--as-line-on-dark);
}

.on-light .t3-facts__row {
  border-block-start-color: var(--as-line-on-light);
}

.t3-facts__value {
  margin: 0;
  font-weight: var(--as-w-medium);
  letter-spacing: var(--as-tr-head);
  line-height: var(--as-lh-head);
}

.t3-facts--stacked .t3-facts__value {
  font-size: var(--as-fs-lead);
}

/* ==========================================================================
   3. hero — барьер вместо курорта
   ========================================================================== */

/* Кадр в hero сдержанный и служебный: он подтверждает серьёзность разговора,
   поэтому стоит рядом с текстом, а не под ним полотном. */
.t3-hero__slot {
  align-self: end;
}

/* ==========================================================================
   4. doubts — сомнение названо, но ещё не опровергнуто
   ==========================================================================
   Единственный блок страницы без единого изображения и без кнопки.
   Работает только типографика и шаг между строками. */
.t3-doubts {
  margin-block: var(--as-block-gap);
  padding: 0;
  list-style: none;
}

/* Шаг между строками даёт .entry--loose из components.css; здесь только
   разлиновка и вертикальный шаг самой позиции. */
.t3-doubt {
  padding-block: var(--as-s7);
  border-block-start: var(--as-rule-weight) solid var(--as-line-on-dark);
}

.t3-doubt:last-child {
  border-block-end: var(--as-rule-weight) solid var(--as-line-on-dark);
}

.on-light .t3-doubt {
  border-block-start-color: var(--as-line-on-light);
}

.on-light .t3-doubt:last-child {
  border-block-end-color: var(--as-line-on-light);
}

.t3-doubt__title {
  max-width: var(--as-measure);
  font-size: var(--as-fs-h2);
  font-weight: var(--as-w-medium);
  letter-spacing: var(--as-tr-head);
  line-height: var(--as-lh-head);
  text-wrap: balance;
}

.t3-doubt__text {
  max-width: var(--as-measure);
  color: var(--as-text-on-dark-mute);
  font-size: var(--as-fs-body);
  line-height: var(--as-lh-body);
}

.on-light .t3-doubt__text {
  color: var(--as-text-on-light-mute);
}

.t3-tail {
  margin-block-start: var(--as-block-gap);
}

/* ==========================================================================
   5. escrow — схема движения денег
   ==========================================================================
   Четыре звена стоят в строку и нанизаны на одну линию: линия и есть схема,
   картинки под неё не заводится. Точка на линии отмечает начало звена.
   На телефоне схема разворачивается в нумерованный список (решение 2). */
.t3-flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--as-s5);
  row-gap: var(--as-s6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.t3-flow__step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--as-s3);
  padding-block-start: var(--as-s5);
  border-block-start: var(--as-rule-weight) solid var(--as-line-on-dark);
}

.on-light .t3-flow__step {
  border-block-start-color: var(--as-line-on-light);
}

.t3-flow__step::before {
  content: "";
  position: absolute;
  inset-block-start: calc(var(--as-s1) * -1);
  inset-inline-start: 0;
  width: var(--as-s2);
  height: var(--as-s2);
  border-radius: var(--as-radius-control);
  background: var(--as-accent-400);
}

.on-light .t3-flow__step::before {
  background: var(--as-accent-500);
}

.t3-flow__num {
  color: var(--as-accent-400);
  font-size: var(--as-fs-h1);
  font-weight: var(--as-w-regular);
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: var(--as-tr-display);
  line-height: var(--as-lh-flat);
}

.on-light .t3-flow__num {
  color: var(--as-accent-500);
}

.t3-flow__title {
  font-size: var(--as-fs-lead);
  font-weight: var(--as-w-medium);
  letter-spacing: var(--as-tr-head);
  line-height: var(--as-lh-head);
}

.t3-flow__text {
  max-width: var(--as-measure);
  color: var(--as-text-on-dark-mute);
  font-size: var(--as-fs-body);
  line-height: var(--as-lh-body);
}

.on-light .t3-flow__text {
  color: var(--as-text-on-light-mute);
}

/* ==========================================================================
   6. ddu — разлиновка разворота «формулировка / что это значит»
   ==========================================================================
   Сам разворот — .tpl-pair из system.css: две колонки, что складываются
   в одну сами, крупная формулировка слева и приглушённое раскрытие справа
   за вертикальным волоском. Ничего из этого здесь не повторяется. Своё —
   только то, чего у .tpl-pair нет: пункты договора разделены линейкой,
   как строки таблицы, и на телефоне разворот принудительно становится
   парой строк подряд (решение 3), не дожидаясь ширины, на которой
   .tpl-pair свернулся бы сам.

   .t3-clauses — контейнер перечня: снимает маркеры списка, и только. */
.t3-clauses {
  margin: 0;
  padding: 0;
  list-style: none;
}

.t3-clause {
  padding-block: var(--as-s6);
  border-block-start: var(--as-rule-weight) solid var(--as-line-on-dark);
}

.t3-clause:last-child {
  border-block-end: var(--as-rule-weight) solid var(--as-line-on-dark);
}

.on-light .t3-clause {
  border-block-start-color: var(--as-line-on-light);
}

.on-light .t3-clause:last-child {
  border-block-end-color: var(--as-line-on-light);
}

/* ==========================================================================
   7. papers — перечень документов с раскрытием
   ==========================================================================
   Раскрытие собрано на родном <details>: оно работает без единой строки
   скрипта, переживает отключённый JS и остаётся рабочим на телефоне, где
   это основной способ читать длинный перечень (решение 6).

   Указатель нарисован тем же волоском, что и остальные линии страницы, и
   не анимируется: в движении на этой странице остаются только прозрачность
   и одно смещение. Меняется цвет. */
.t3-papers {
  border-block-start: var(--as-rule-weight) solid var(--as-line-on-light);
}

.t3-doc {
  border-block-end: var(--as-rule-weight) solid var(--as-line-on-light);
}

.t3-doc__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--as-s4);
  padding-block: var(--as-s5);
  cursor: pointer;
  list-style: none;
}

.t3-doc__head::-webkit-details-marker {
  display: none;
}

.t3-doc__head::after {
  content: "";
  flex: 0 0 auto;
  align-self: center;
  width: var(--as-s3);
  height: var(--as-s3);
  border-inline-end: var(--as-hairline) solid currentColor;
  border-block-end: var(--as-hairline) solid currentColor;
  transform: rotate(45deg);
  transition: border-color var(--as-dur-fast) var(--as-ease);
}

.t3-doc[open] .t3-doc__head::after {
  transform: rotate(-135deg);
  border-color: var(--as-accent-500);
}

.t3-doc__name {
  flex: 1 1 min(100%, calc(var(--as-measure) / 2));
  font-size: var(--as-fs-h2);
  font-weight: var(--as-w-medium);
  letter-spacing: var(--as-tr-head);
  line-height: var(--as-lh-head);
}

.t3-doc__issuer {
  flex: 0 1 auto;
}

.t3-doc__body {
  display: grid;
  gap: var(--as-s3);
  max-width: var(--as-measure);
  padding-block-end: var(--as-s6);
}

/* Ссылка на источник — единственный способ проверить документ прямо сейчас,
   поэтому она показана целиком, а не спрятана под слово. Длинный адрес рвётся
   по любому месту: горизонтальной прокрутки на странице нет. */
.t3-doc__link {
  overflow-wrap: anywhere;
  font-size: var(--as-fs-micro);
  line-height: var(--as-lh-body);
}

.t3-doc__link a {
  color: var(--as-accent-500);
  text-decoration: underline;
  text-underline-offset: var(--as-s1);
}

.t3-doc__link a:hover {
  color: var(--as-text-on-light);
}

/* ==========================================================================
   8. progress — этапы с датой и состоянием
   ========================================================================== */
.t3-stages {
  margin: 0;
  padding: 0;
  list-style: none;
  border-block-start: var(--as-rule-weight) solid var(--as-line-on-light);
}

.t3-stage {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.9fr) minmax(0, 0.9fr);
  column-gap: var(--as-s5);
  row-gap: var(--as-s2);
  align-items: baseline;
  padding-block: var(--as-s5);
  border-block-end: var(--as-rule-weight) solid var(--as-line-on-light);
}

.t3-stage__label {
  grid-column: 1;
  font-size: var(--as-fs-lead);
  font-weight: var(--as-w-medium);
  line-height: var(--as-lh-head);
}

.t3-stage__date {
  grid-column: 2;
  color: var(--as-text-on-light-mute);
}

.t3-stage__state {
  grid-column: 3;
  color: var(--as-accent-500);
}

.t3-stage__text {
  grid-column: 1 / -1;
  max-width: var(--as-measure);
  color: var(--as-text-on-light-mute);
  font-size: var(--as-fs-body);
  line-height: var(--as-lh-body);
}

/* ==========================================================================
   9. developer — факты и доказательства связки
   ========================================================================== */
.t3-proofs {
  margin: 0;
  padding: 0;
  list-style: none;
  border-block-start: var(--as-rule-weight) solid var(--as-line-on-light);
}

/* Раскладку позиции даёт .entry; здесь — разлиновка перечня. */
.t3-proof {
  padding-block: var(--as-s5);
  border-block-end: var(--as-rule-weight) solid var(--as-line-on-light);
}

.t3-proof__title {
  font-size: var(--as-fs-h2);
  font-weight: var(--as-w-medium);
  letter-spacing: var(--as-tr-head);
  line-height: var(--as-lh-head);
}

.t3-proof__text {
  max-width: var(--as-measure);
  color: var(--as-text-on-light-mute);
  font-size: var(--as-fs-body);
  line-height: var(--as-lh-body);
}

/* ==========================================================================
   10. deadlines — худший сценарий с ценой
   ========================================================================== */
/* Условия по срокам — те же .tpl-pair; здесь только шаг и линейка между
   ними. Соседство названо своим классом, который стоит в разметке рядом
   с .tpl-pair: селектор `> * + *` попал бы правилом в системный блок. */
.t3-terms {
  display: grid;
}

.t3-term + .t3-term {
  margin-block-start: var(--as-s6);
  padding-block-start: var(--as-s6);
  border-block-start: var(--as-rule-weight) solid var(--as-line-on-light);
}

.t3-penalty {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--as-s5);
}

/* ==========================================================================
   11. self-check — перечень из трёх колонок
   ==========================================================================
   Что проверить · как проверить · где смотреть. Раскрытия здесь нет
   намеренно: инструкцию читают целиком, а не по одному пункту. */
.t3-check {
  margin: 0;
  padding: 0;
  list-style: none;
  border-block-start: var(--as-rule-weight) solid var(--as-line-on-light);
}

.t3-check__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr);
  column-gap: var(--as-s6);
  row-gap: var(--as-s2);
  align-items: start;
  padding-block: var(--as-s5);
  border-block-end: var(--as-rule-weight) solid var(--as-line-on-light);
}

.t3-check__what {
  font-size: var(--as-fs-lead);
  font-weight: var(--as-w-medium);
  line-height: var(--as-lh-head);
}

.t3-check__how {
  color: var(--as-text-on-light-mute);
  font-size: var(--as-fs-body);
  line-height: var(--as-lh-body);
}

.t3-check__where {
  color: var(--as-accent-500);
}

/* ==========================================================================
   12. lead — оффер и заявка
   ========================================================================== */
.t3-offer__terms {
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  border-block-start: var(--as-rule-weight) solid var(--as-line-on-light);
}

.t3-offer__term {
  padding-block: var(--as-s4);
  border-block-end: var(--as-rule-weight) solid var(--as-line-on-light);
  line-height: var(--as-lh-body);
}

/* Действие и срок его действия стоят на одной линии: срок принадлежит
   действию, а не строке под ним. */
.t3-offer__ask {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--as-s4);
  max-width: var(--as-measure);
}

.t3-offer__call {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--as-s3);
}

.t3-offer__call a {
  font-size: var(--as-fs-h2);
  font-weight: var(--as-w-medium);
  letter-spacing: var(--as-tr-head);
  text-decoration: underline;
  text-underline-offset: var(--as-s1);
}

.t3-offer__call a:hover {
  color: var(--as-accent-500);
}

.t3-form {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--as-s6);
}

.t3-form__title {
  max-width: var(--as-measure);
}

.t3-form__area {
  min-height: calc(var(--as-ctrl-h) * 2);
  resize: vertical;
}

.t3-form__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--as-s4);
}

/* Вид строки ответа задаёт system.css по [data-lead-status][data-tone]:
   тон — состояние form.js, и на всех четырёх страницах он обязан выглядеть
   одинаково. Здесь остаётся одно, чего атрибутное правило дать не может:
   пустой узел живого региона стоит в разметке всегда, и в колонке формы,
   собранной флексом с шагом, он забирал бы шаг под нулевую высоту. */
.t3-form__status:empty {
  display: none;
}

/* ==========================================================================
   12а. Блоки страницы «Почему покупать сейчас»
   ==========================================================================
   Шаблон T3 писался под связку, у которой есть фотоотчёт, камера и сканы.
   У этой страницы их нет, зато есть то, чего у шаблона не было: датированная
   лента доказательств и перечень элементов мастер-плана с картинкой у каждого.
   Поэтому здесь четыре добавления, и ни одно не переопределяет системный класс:
   субъект каждого селектора — свой `.t3-*`.

   Правило файла соблюдено: значений нет, только var(--as-*); тёмный регистр
   считается основным, светлый переопределяется через `.on-light .t3-*`. */

/* Внутристраничный якорь. У секций scroll-margin ставит sections.css по
   `.section[id]`; у блока внутри секции его взяться неоткуда, и кнопка
   «посмотреть статусы» уводила бы заголовок под фиксированную шапку. */
.t3-anchor {
  scroll-margin-top: var(--as-header-h);
}

/* Кадр первого экрана служебный: он подтверждает, что разговор идёт о стройке,
   и не притворяется полотном. Во всю ширину shell заглушка получила бы 750
   пикселей высоты — столько же, сколько занимает весь текст над ней, — и первый
   экран превратился бы в объявление о том, чего у проекта нет. */
.t3-hero__shot {
  max-width: var(--as-measure);
}

/* Шкала первого экрана: четыре даты стоят четырьмя колонками. При трёх
   последняя — единственная заявленная, а не подтверждённая — уходила одна
   во второй ряд и читалась как отдельный вывод, а не как часть шкалы. */
.t3-hero__facts {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--as-measure) / 2.6)), 1fr));
}

/* Четвёртая дата шкалы — единственная, которая ещё не наступила. Она отбита
   тем же, чем отбита будущая часть графика ниже: пунктирной линейкой и
   приглушённой датой. Одинаковый вид у трёх подтверждённых и одной заявленной
   был бы ровно тем смешением, против которого написан весь блок. */
.t3-facts__row--planned {
  border-block-start-style: dashed;
}

.t3-facts__row--planned .t3-shot__when {
  color: var(--as-text-on-dark-mute);
}

.on-light .t3-facts__row--planned .t3-shot__when {
  color: var(--as-text-on-light-mute);
}

/* Оговорка рядом с кнопкой бывает не меткой, а предложением. Капслок .micro
   на двух строках связного текста перестаёт быть пометкой и становится
   криком, поэтому у таких оговорок свой модификатор: кегль тот же,
   регистр обычный. */
.t3-act__note--text {
  font-size: var(--as-fs-micro);
  letter-spacing: var(--as-tr-body);
  line-height: var(--as-lh-body);
  text-transform: none;
}

/* Передача дальше. Блок, у которого в матрице стоит «CTA: -», всё равно
   не имеет права кончаться тупиком: вместо кнопки он отдаёт следующий
   вопрос ссылкой. Ссылке нужен собственный вид — базовый `a` в base.css
   наследует цвет и снимает подчёркивание, и без этого правила переход
   был бы неотличим от обычного текста. */
.t3-next a {
  color: var(--as-accent-400);
  text-decoration: underline;
  text-underline-offset: var(--as-s1);
  transition: color var(--as-dur-fast) var(--as-ease);
}

.on-light .t3-next a {
  color: var(--as-accent-500);
}

.t3-next a:hover {
  color: var(--as-text-on-dark);
}

.on-light .t3-next a:hover {
  color: var(--as-text-on-light);
}

/* Сетка кадров: датированные заглушки, рендеры, элементы мастер-плана.
   Колонки складываются сами — минимум дорожки равен половине меры абзаца,
   поэтому на 360px остаётся одна колонка, а на десктопе их три-четыре. */
.t3-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--as-measure) / 2)), 1fr));
  column-gap: var(--as-col-gap);
  row-gap: var(--as-s8);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Кадр с подписью. Рамка одна и та же и для настоящего снимка, и для
   заглушки: заглушка кладётся внутрь как `.slot`, и её штриховка сама
   говорит, что кадра нет. Подпись всегда под кадром, а не поверх него —
   поверх кадра дата читается как часть фотографии, а она к ней не относится. */
.t3-shot {
  display: flex;
  flex-direction: column;
  gap: var(--as-s4);
  margin: 0;
}

.t3-shot__frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: var(--as-ratio-wide);
  background: var(--as-base-700);
  border: var(--as-hairline) solid var(--as-line-on-dark);
  border-radius: var(--as-radius-flat);
}

.on-light .t3-shot__frame {
  background: var(--as-cream-100);
  border-color: var(--as-line-on-light);
}

.t3-shot__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Дата — акцентом и табличными цифрами: на этой странице она несущая,
   и пять дат подряд обязаны стоять по одной вертикали. */
.t3-shot__when {
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--as-accent-400);
}

.on-light .t3-shot__when {
  color: var(--as-accent-500);
}

.t3-shot__cap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--as-s2);
  max-width: var(--as-measure);
  margin: 0;
}

.t3-shot__what {
  font-size: var(--as-fs-lead);
  font-weight: var(--as-w-medium);
  letter-spacing: var(--as-tr-head);
  line-height: var(--as-lh-head);
}

.t3-shot__text {
  color: var(--as-text-on-dark-mute);
  font-size: var(--as-fs-body);
  line-height: var(--as-lh-body);
}

.on-light .t3-shot__text {
  color: var(--as-text-on-light-mute);
}

/* Две нейтральные колонки «рассматривать сейчас / подождать». Ни рамки,
   ни подложки, ни знака «плюс/минус»: обе стороны равны, и любой цветовой
   перевес превратил бы аналитический блок в рекомендацию. */
.t3-choice {
  padding-block-start: var(--as-s5);
  border-block-start: var(--as-rule-weight) solid var(--as-line-on-dark);
}

.on-light .t3-choice {
  border-block-start-color: var(--as-line-on-light);
}

.t3-choice__title {
  font-size: var(--as-fs-h2);
  font-weight: var(--as-w-medium);
  letter-spacing: var(--as-tr-head);
  line-height: var(--as-lh-head);
  text-wrap: balance;
}

.t3-choice__text {
  max-width: var(--as-measure);
  color: var(--as-text-on-dark-mute);
  font-size: var(--as-fs-body);
  line-height: var(--as-lh-body);
}

.on-light .t3-choice__text {
  color: var(--as-text-on-light-mute);
}

/* Шкала этапов в тёмном регистре. В шаблоне `.t3-stage` жил только на
   кремовом: там он был последним блоком светлой части. Здесь график —
   граница между прошедшим и заявленным, и он стоит на тёмном. */
.on-dark .t3-stages,
.on-dark-alt .t3-stages {
  border-block-start-color: var(--as-line-on-dark);
}

.on-dark .t3-stage,
.on-dark-alt .t3-stage {
  border-block-end-color: var(--as-line-on-dark);
}

.on-dark .t3-stage__date,
.on-dark-alt .t3-stage__date,
.on-dark .t3-stage__text,
.on-dark-alt .t3-stage__text {
  color: var(--as-text-on-dark-mute);
}

.on-dark .t3-stage__state,
.on-dark-alt .t3-stage__state {
  color: var(--as-accent-400);
}

/* Дата на шкале — тоже табличными цифрами: столбец дат обязан стоять ровно. */
.t3-stage__date {
  font-variant-numeric: tabular-nums lining-nums;
}

/* Будущая часть графика отличается от прошедшей и цветом, и линией:
   сплошная линейка — то, что уже произошло, пунктир — то, что заявлено
   (docx, блок 3: «другой цвет и подпись “заявлено проектом”»). */
.t3-stage--planned {
  border-block-end-style: dashed;
}

.t3-stage--planned .t3-stage__label {
  color: var(--as-text-on-dark-mute);
  font-weight: var(--as-w-regular);
}

.on-light .t3-stage--planned .t3-stage__label {
  color: var(--as-text-on-light-mute);
}

/* ==========================================================================
   13. Ниже --as-bp-lg (1200px) — колонка сужается, регистры остаются
   ==========================================================================
   Перечень самопроверки на узком десктопе перестаёт быть таблицей в три
   колонки: «где смотреть» уходит на свою строку. Три колонки на ширине
   меньше .shell не держат ни строки, ни подписи заглушек. */
@media (max-width: 1200px) {
  .t3-check__item {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  }

  .t3-check__where {
    grid-column: 1 / -1;
  }
}

/* ==========================================================================
   14. Ниже --as-bp-md (900px) — мобильная логика шаблона 3
   ==========================================================================
   Порядок блоков переставляет nav.js по data-nav-order в разметке: документы
   поднимаются выше финансирования (решение 1). Здесь — всё остальное.
   Литералы в прелюдии @media стоят потому, что CSS не пускает туда var();
   единственный реестр этих чисел — --as-bp-* в tokens.css. */
@media (max-width: 900px) {

  /* Колонки .col-* по решению дизайн-системы сами не схлопываются:
     раскладку своих колонок шаблон делает у себя. Класс .t3-col стоит
     на каждом элементе шаблона, который на десктопе занимает часть
     двенадцати колонок, и здесь они все становятся во всю ширину. */
  .t3-col {
    grid-column: 1 / -1;
  }

  .t3-hero__slot {
    align-self: auto;
  }

  /* Шапка на телефоне ниже, а ритм — короче: 80 пикселей верхнего отступа
     первого экрана оказываются под фиксированной шапкой, и первая строка
     hero уезжает под неё. Отступ считается от шапки, а не подбирается. */
  /* Отступ добавляется своим классом на .shell первого экрана, а не правкой
     ритма секции: .rhythm--wide живёт в responsive.css, который подключается
     после этого файла, и спорить с ним из шаблона нельзя. Высота отступа
     считается от шапки, а не подбирается. */
  .t3-hero__shell {
    padding-block-start: var(--as-header-h-sm);
  }

  /* Решение 4 — типографика. Заголовки секций опускаются на ступень… */
  .t3-title {
    font-size: var(--as-fs-h1);
  }

  /* …и только сомнения сохраняют крупный кегль: это единственное место
     страницы, где текст на телефоне не уменьшается. */
  .t3-doubt__title {
    font-size: var(--as-fs-h1);
  }

  .t3-doubts {
    margin-block: var(--as-s7);
  }

  .t3-doubt {
    padding-block: var(--as-s6);
  }

  /* Решение 2 — приоритет визуалов. Схема движения денег на телефоне
     не показывается картинкой: она разворачивается в нумерованный список
     этапов, номер уходит в строку к заголовку звена. */
  .t3-flow {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0;
  }

  .t3-flow__step {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: var(--as-s5);
    row-gap: var(--as-s3);
    padding-block: var(--as-s5);
  }

  .t3-flow__num {
    flex: 0 0 auto;
    font-size: var(--as-fs-h2);
  }

  .t3-flow__title {
    flex: 1 1 min(100%, calc(var(--as-measure) / 3));
  }

  .t3-flow__text {
    flex: 1 1 100%;
  }

  /* Кадр стройки на телефоне остаётся, трансляция снимается: две плоскости
     подряд на узком экране читаются как галерея, а доказательство здесь одно. */
  .t3-progress__cam {
    display: none;
  }

  /* Решение 3 — композиция. Разворот договора становится парой строк подряд,
     вертикальная линейка снимается: на узкой колонке она делит не колонки,
     а строки, и превращается в декор. */
  .t3-clause {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--as-s3);
    padding-block: var(--as-s5);
  }

  /* Мобильное решение 7 («DDU_POINT_*_TEXT и FINANCING_STEP_*_TEXT режутся
     до одного предложения») СНЯТО — так же явно, как решение 8 в разметке
     секции papers, и по той же причине: выполнить его нечем.

     Резать присланный текст шаблон не вправе — сокращение до одного
     предложения адресовано автору связки, а не разметке. Спрятать хвост
     под раскрытие тоже нельзя: сворачивания для этих двух блоков
     TEMPLATES.md не описывает (оно описано только для papers), родной
     <details> из CSS не раскрыть, а второй интерактив на семь позиций
     противоречит §19. Обрезать по строкам — значит потерять содержание.

     Поэтому ниже не реализация решения 7, а то, что осталось в силах
     шаблона: подача. Пояснение перестаёт быть вторым абзацем и становится
     подчинённой строкой под формулировкой — своя отбивка, волосок слева,
     своя мера. Кегль и интерлиньяж остаются основными: ниже 16px и легче
     400 основной текст не опускается ни на одном экране.

     Переносы включены только здесь и только на телефоне: колонка в 335px
     держит около сорока знаков, и без переносов правый край рвётся сильнее,
     чем читается строка. Заглушке переносы не достаются — .ph выключает их
     у себя сам. */
  /* Раскрытию пункта договора отбивку и волосок слева даёт .tpl-pair__body:
     повторять их здесь нечем и незачем. Тексту звена цепочки — даёт этот
     файл: у .tpl-ladder__text отбивки нет. Общее у обоих одно — переносы. */
  .t3-step__text {
    max-width: var(--as-measure);
    margin-block-start: var(--as-s2);
    padding-inline-start: var(--as-s4);
    border-inline-start: var(--as-rule-weight) solid var(--as-line-on-dark);
    font-size: var(--as-fs-body);
    line-height: var(--as-lh-body);
  }

  .on-light .t3-step__text {
    border-inline-start-color: var(--as-line-on-light);
  }

  .t3-clause__means,
  .t3-step__text {
    hyphens: auto;
  }

  /* Звено цепочки финансирования: десктопный промежуток между номером
     и заголовком — 48px, и на 335px он один съедал седьмую часть строки.
     Здесь он равен 16px: короткий заголовок встаёт в строку с номером,
     длинный переносится под него, но пустой колонки в полэкрана
     не остаётся ни при каком тексте связки. */
  .t3-step {
    column-gap: var(--as-s4);
    row-gap: var(--as-s2);
    padding-block: var(--as-s5);
  }

  /* Этапы стройки: дата и состояние встают в одну строку под названием. */
  .t3-stage {
    grid-template-columns: auto auto;
    justify-content: start;
    column-gap: var(--as-s4);
  }

  .t3-stage__label {
    grid-column: 1 / -1;
  }

  .t3-stage__date {
    grid-column: 1;
  }

  .t3-stage__state {
    grid-column: 2;
  }

  /* Чеклист самопроверки: три колонки складываются в три строки —
     что проверить, как проверить, где смотреть. */
  .t3-check__item {
    grid-template-columns: minmax(0, 1fr);
  }

  .t3-doc__head {
    padding-block: var(--as-s4);
    /* Цель по касанию не ниже --as-ctrl-h-sm */
    min-height: var(--as-ctrl-h-sm);
  }

  .t3-doc__name {
    flex: 1 1 100%;
  }

  /* Сетка кадров на телефоне — одна колонка; шаг между кадрами короче,
     чем между блоками секции, иначе лента дат перестаёт читаться лентой. */
  .t3-grid {
    row-gap: var(--as-s7);
  }

  /* Две колонки решения складываются в две строки. Верхняя линейка
     остаётся: она и есть то, что отделяет один вариант от другого. */
  .t3-choice + .t3-choice {
    margin-block-start: var(--as-s6);
  }
}

/* ==========================================================================
   15. Ниже --as-bp-sm (600px)
   ==========================================================================
   Ряды действия перестают быть строкой: кнопка занимает ширину экрана,
   оговорка уходит под неё. */
@media (max-width: 600px) {
  .t3-act {
    align-items: flex-start;
    gap: var(--as-s4);
  }

  /* Правило принадлежит своему классу, который стоит в разметке рядом
     с .btn: сам компонент дизайн-системы из файла шаблона не правится. */
  .t3-act__btn,
  .t3-form__btn {
    width: 100%;
  }

  .t3-facts__row {
    padding-block: var(--as-s3);
  }
}