/* system.css — общие блоки четырёх шаблонов.
   Здесь лежит только то, чего не было в прошлом прогоне: заглушка переменной,
   логотип и семь блоков .tpl-*. Ни один класс из tokens/base/type/layout/
   components/sections/motion/responsive здесь не переопределяется — эти восемь
   файлов побайтово равны архивным и остаются единственным источником базы.

   Значения — только через var(--as-*). Литералами разрешены три величины,
   те же три, что и в остальной системе: 0, 1px, 100%. Безразмерные числа
   в calc() и aspect-ratio — не размеры, а пропорции.

   Регистр цвета берётся у секции (.on-dark / .on-dark-alt / .on-light),
   второго набора токенов нет: светлые правила стоят через .on-light. */

/* ==========================================================================
   1. Заглушка незаполненной переменной
   ==========================================================================
   Пустой или отсутствующий ключ связки движок bundle.js заменяет на
   <span class="ph">[ИМЯ]</span>. Плашка обязана читаться как «сюда придёт
   значение», а не как поломка: акцентная рамка, микро-кегль, верхний регистр.
   Кегль задан явно, поэтому заглушка внутри .d1 не растягивает строку.

   Переносы. Раньше здесь стоял white-space: nowrap, и в узкой колонке на 390px
   длинная подпись уезжала за край — страницу утаскивало вбок, а шаблоны лечили
   это у себя. nowrap держал ровно одно: чтобы слово подписи не рвалось пополам.
   Это делает word-break: normal — он запрещает разрыв внутри слова, пока есть
   куда перенести. Разрыв между словами теперь разрешён, а слово ломается только
   в единственном случае: когда оно само шире колонки и выбор стоит между
   переносом и клиппингом.

   Ломает именно overflow-wrap: anywhere, а не break-word. Разница не в том,
   как рвётся строка, — там они ведут себя одинаково, — а в min-content: у
   break-word он остаётся равным самому длинному слову, и grid- или flex-элемент
   с min-width: auto раздувает под него всю дорожку, унося колонку за край. У
   anywhere min-content падает до символа, и колонка сжимается честно. break-word
   оставлен строкой выше как запасной для движков без anywhere. max-width не даёт
   коробке заглушки стать шире родителя ни в потоке, ни во flex-элементе. */
.ph {
  display: inline-block;
  max-width: 100%;
  padding-inline: var(--as-s2);
  border: var(--as-hairline) dashed var(--as-accent-400);
  border-radius: var(--as-radius-flat);
  color: var(--as-accent-400);
  font-size: var(--as-fs-micro);
  font-weight: var(--as-w-medium);
  letter-spacing: var(--as-tr-micro);
  line-height: var(--as-lh-body);
  text-transform: uppercase;
  white-space: normal;
  word-break: normal;
  overflow-wrap: break-word;
  overflow-wrap: anywhere;
  hyphens: none;
  vertical-align: baseline;
}

.on-light .ph {
  border-color: var(--as-accent-500);
  color: var(--as-accent-500);
}

/* --------------------------------------------------------------------------
   Единственное исключение из правила «system.css ничего не переопределяет»
   --------------------------------------------------------------------------
   Переопределяем ровно одно свойство одного класса: перенос текста у .claim.
   Ничего другого у .claim здесь не трогается — форма, цвет, отступы, точка
   метки и четыре значения data-claim остаются за components.css.

   Зачем. components.css:110 держит у .claim white-space: nowrap. Метка статуса
   короткая, пока текст короткий; в узкой колонке на 390px длинная метка не
   переносится и уезжает за край — на t4-turnkey страница расходилась на 423px
   при вьюпорте 390, то есть тащила весь документ вбок. Это тот же дефект, что
   был у .ph, и лечится тем же приёмом: переносим между словами (word-break:
   normal не даёт рвать слово, пока есть куда переносить), а overflow-wrap:
   anywhere и ломает слово шире колонки, и снижает min-content, чтобы дорожка
   grid или flex не раздувалась под самое длинное слово. break-word строкой
   выше — запасной для движков без anywhere.

   Почему не правим сам components.css. Он обязан остаться побайтовой копией
   archive/site/css/components.css — это критерий приёмки таска 01, и он
   не отменяется. Исключение зафиксировано сборкой как D02 и описано
   в DESIGN_SYSTEM.md §13. Второго исключения здесь не заводится. */
.claim {
  white-space: normal;
  word-break: normal;
  overflow-wrap: break-word;
  overflow-wrap: anywhere;
}

/* ==========================================================================
   2. Логотип
   ==========================================================================
   Файлы site/assets/logo.svg и logo_2.svg не перерисовываются: в site/assets/
   у logo_2.svg дописан только viewBox, которого не было в исходнике, — без него
   mask-size: contain не масштабирует знак, а обрезает его. Геометрия, цвета
   и контуры те же; исходники в logo/ не тронуты.

   Разметка (её ставит chrome.js):
     <a class="brand brand--wordmark" href="./" aria-label="Алтын Шор"></a>
     <span class="brand brand--mark" role="img" aria-label="Алтын Шор"></span>

   Цвет заливки в файлах — тёплая глина. На тёмном регистре она даёт 8.5:1
   и остаётся фирменной: знак показывается как есть, перекраски нет.
   На кремовом та же глина даёт около 1.9:1 — нечитаемо, и только там знак
   рисуется маской в акцент 500 (5.1:1). Правило одно: перекрашиваем там,
   где исходная заливка не проходит 4.5:1, и нигде больше.

   Без поддержки masks светлый регистр показывает сам файл в родном цвете —
   хуже по контрасту, но видимо и не превращается в цветной прямоугольник. */
.brand {
  display: block;
  flex: none;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transition: opacity var(--as-dur-fast) var(--as-ease);
}

/* 32px в шапке высотой 72px: ниже подпись «ВСЕСЕЗОННЫЙ КУРОРТ»
   внутри самого файла перестаёт читаться и превращается в грязь. */
.brand--wordmark {
  height: var(--as-s6);
  aspect-ratio: 334 / 49;
  background-image: url("../img/logo_2.svg");
}

.brand--mark {
  height: var(--as-s9);
  aspect-ratio: 384 / 205;
  background-image: url("../img/logo.svg");
}

a.brand:hover {
  opacity: var(--as-opacity-disabled);
}

@supports (mask-image: url("../img/logo_2.svg")) or (-webkit-mask-image: url("../img/logo_2.svg")) {
  .on-light .brand {
    background-image: none;
    background-color: var(--as-accent-500);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    transition: background-color var(--as-dur-fast) var(--as-ease);
  }

  .on-light .brand--wordmark {
    -webkit-mask-image: url("../img/logo_2.svg");
    mask-image: url("../img/logo_2.svg");
  }

  .on-light .brand--mark {
    -webkit-mask-image: url("../img/logo.svg");
    mask-image: url("../img/logo.svg");
  }

  .on-light a.brand:hover {
    opacity: 1;
    background-color: var(--as-text-on-light);
  }
}

/* ==========================================================================
   Строка ответа формы — [data-lead-status][data-tone]
   ==========================================================================
   Атрибутом владеет form.js, значит и выглядеть он обязан одинаково на всех
   четырёх страницах: тон — это состояние модуля, а не оформление шаблона.
   Раньше правило было переписано в каждом t<N>.css под своим именем класса
   и с расхождениями между страницами.

   Тонов ровно три, и они взяты из site/js/form.js, а не из прошлого прогона:
   "wait" — отправка идёт, "ok" — заявка принята, "error" — приёмка не ответила.
   Четвёртого нет. Тона "stub" в текущем form.js не существует: при пустом
   LEAD_ENDPOINT он выдаёт тон "ok" и дописывает соседним блоком служебную
   строку [data-lead-service] с классом .tpl-note — её оформление уже ниже,
   отдельного правила не нужно. Правило под несуществующий тон здесь не
   заводится: оно бы навсегда осталось непроверяемым.

   Тон различается тремя каналами, а не одним цветом: начертанием линии
   (сплошная / пунктир / штрих), цветом и насыщенностью текста. Красного
   в палитре нет и не заводится — ошибку несёт акцент плюс штриховая линия.

   Это правило на атрибут, а не переопределение класса скопированного файла:
   исключением D02 оно не является и второго исключения не создаёт. */
[data-lead-status][data-tone] {
  max-width: var(--as-measure);
  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);
  letter-spacing: var(--as-tr-body);
  line-height: var(--as-lh-body);
}

/* Отправка идёт: сообщение второстепенное, линия пунктиром — то же
   начертание, которым система показывает неподтверждённое у .claim. */
[data-lead-status][data-tone="wait"] {
  border-inline-start-style: dotted;
  color: var(--as-text-on-dark-mute);
}

/* Заявка принята: полный контраст текста и акцентная линия. */
[data-lead-status][data-tone="ok"] {
  border-inline-start-color: var(--as-accent-400);
  color: var(--as-text-on-dark);
}

/* Приёмка не ответила: акцент, штриховая линия и более плотное начертание. */
[data-lead-status][data-tone="error"] {
  border-inline-start-style: dashed;
  border-inline-start-color: var(--as-accent-400);
  color: var(--as-accent-400);
  font-weight: var(--as-w-medium);
}

.on-light [data-lead-status][data-tone] {
  border-inline-start-color: var(--as-line-on-light);
}

.on-light [data-lead-status][data-tone="wait"] {
  color: var(--as-text-on-light-mute);
}

.on-light [data-lead-status][data-tone="ok"] {
  border-inline-start-color: var(--as-accent-500);
  color: var(--as-text-on-light);
}

.on-light [data-lead-status][data-tone="error"] {
  border-inline-start-color: var(--as-accent-500);
  color: var(--as-accent-500);
}

/* ==========================================================================
   Ряд согласия в форме — .tpl-consent-row
   ==========================================================================
   Флажок и подпись к нему стоят в одну строку, подпись выключена по верхнему
   краю: она в две-три строки, и выравнивание по центру уводило бы квадратик
   флажка к середине абзаца.

   Живёт здесь, потому что был объявлен четыре раза — .t1-form__consent,
   .t2-…, .t3-…, .t4-… — и все четыре побайтово совпадали. Одинаковый ряд
   на четырёх страницах принадлежит системе, а не шаблону.

   Сам флажок — .field__check из components.css: он не трогается ни здесь,
   ни в шаблонах. Этот класс отвечает только за раскладку ряда. */
.tpl-consent-row {
  display: flex;
  align-items: flex-start;
  gap: var(--as-s3);
}

/* ==========================================================================
   3. .tpl-lede — вводный абзац под заголовком секции
   ==========================================================================
   Отличается от .lead из type.css тем, что это не роль кегля, а место:
   первый абзац секции, который несёт её аргумент. Акцентная черта слева
   привязывает его к заголовку и заменяет собой отбивку воздухом. */
.tpl-lede {
  max-width: var(--as-measure);
  padding-inline-start: var(--as-s5);
  border-inline-start: var(--as-rule-weight) solid var(--as-accent-400);
  font-size: var(--as-fs-lead);
  font-weight: var(--as-w-regular);
  letter-spacing: var(--as-tr-body);
  line-height: var(--as-lh-lead);
}

.on-light .tpl-lede {
  border-inline-start-color: var(--as-accent-500);
}

/* ==========================================================================
   4. .tpl-pair — «утверждение / раскрытие»
   ==========================================================================
   Слева тезис, справа то, что из него следует. Колонки складываются в одну
   сами, без @media: минимум колонки — половина меры абзаца, поэтому пара
   переходит в столбик там, где вторая колонка перестаёт держать строку.
   Вертикальная линейка — та же волосяная, что у .rule--vertical. */
.tpl-pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--as-measure) / 2)), 1fr));
  column-gap: var(--as-s7);
  row-gap: var(--as-s5);
  align-items: start;
}

.tpl-pair__claim {
  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);
}

.tpl-pair__body {
  max-width: var(--as-measure);
  padding-inline-start: var(--as-s5);
  border-inline-start: var(--as-rule-weight) solid var(--as-line-on-dark);
  color: var(--as-text-on-dark-mute);
  font-size: var(--as-fs-body);
  letter-spacing: var(--as-tr-body);
  line-height: var(--as-lh-body);
}

.on-light .tpl-pair__body {
  border-inline-start-color: var(--as-line-on-light);
  color: var(--as-text-on-light-mute);
}

/* ==========================================================================
   5. .tpl-ladder — нумерованная лестница шагов
   ==========================================================================
   Ставится там, где порядок сам по себе является аргументом: этапы сделки,
   механика дохода, порядок ввода. Номер набран крупно и тонко — он читается
   как ступень, а не как маркер списка.

   Номер ступени пишется в разметке шаблона (<p class="tpl-ladder__num">01</p>)
   и токеном {{...}} не подставляется. Ординал — часть архитектуры блока, а не
   контент связки: через реестр он съел бы ключ variables.json на каждую ступень,
   а незаполненная связка нарисовала бы заглушку [НОМЕР] посреди лестницы.
   Из связки приходят только заголовок и текст шага.

   Счётчик CSS здесь не заведён намеренно: list-style снят, а ::marker и
   counter-increment дали бы второй источник номера — разметочный и считанный, —
   которые разошлись бы, как только шаблон скроет ступень через data-var-if. */
.tpl-ladder {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tpl-ladder__step {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: var(--as-s7);
  row-gap: var(--as-s3);
  padding-block: var(--as-s6);
  border-top: var(--as-rule-weight) solid var(--as-line-on-dark);
}

.tpl-ladder__step:last-child {
  border-bottom: var(--as-rule-weight) solid var(--as-line-on-dark);
}

.on-light .tpl-ladder__step {
  border-top-color: var(--as-line-on-light);
}

.on-light .tpl-ladder__step:last-child {
  border-bottom-color: var(--as-line-on-light);
}

/* Номер прижат к левому краю и не резервирует под себя половину строки;
   текст занимает остаток и уходит под номер, когда остатка меньше
   половины меры абзаца. */
.tpl-ladder__num {
  flex: none;
  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 .tpl-ladder__num {
  color: var(--as-accent-500);
}

.tpl-ladder__body {
  flex: 1 1 min(100%, calc(var(--as-measure) / 2));
  max-width: var(--as-measure);
}

.tpl-ladder__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);
}

.tpl-ladder__text {
  max-width: var(--as-measure);
  margin-top: var(--as-s3);
  color: var(--as-text-on-dark-mute);
  font-size: var(--as-fs-body);
  letter-spacing: var(--as-tr-body);
  line-height: var(--as-lh-body);
}

.on-light .tpl-ladder__text {
  color: var(--as-text-on-light-mute);
}

/* ==========================================================================
   6. .tpl-figure — цифра и следствие из неё
   ==========================================================================
   Не плитка: ни рамки, ни подложки, ни тени. Цифра стоит прямо на фоне
   секции, под ней — то, что из неё следует; без этой строки цифра не
   ставится вообще. Несколько цифр раскладывает .grid с .col-*,
   разделяет — .rule--vertical. Своего контейнера здесь нет намеренно. */
.tpl-figure {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--as-s3);
}

/* Перенос разрешён: в узкой колонке заглушка [ПЛОЩАДЬ] не сжимается,
   и единица измерения обязана уйти на вторую строку, а не за край. */
.tpl-figure__num {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--as-s2);
  font-size: var(--as-fs-num);
  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);
}

.tpl-figure__unit {
  color: var(--as-accent-400);
  font-size: var(--as-fs-h2);
  font-weight: var(--as-w-medium);
  letter-spacing: var(--as-tr-head);
  line-height: var(--as-lh-flat);
}

.on-light .tpl-figure__unit {
  color: var(--as-accent-500);
}

.tpl-figure__what {
  max-width: var(--as-measure);
  font-size: var(--as-fs-body);
  letter-spacing: var(--as-tr-body);
  line-height: var(--as-lh-body);
}

.tpl-figure__note {
  color: var(--as-text-on-dark-mute);
  font-size: var(--as-fs-micro);
  font-weight: var(--as-w-medium);
  letter-spacing: var(--as-tr-micro);
  line-height: var(--as-lh-flat);
  text-transform: uppercase;
}

.on-light .tpl-figure__note {
  color: var(--as-text-on-light-mute);
}

/* ==========================================================================
   7. .tpl-note — сноска-оговорка на границе секции
   ==========================================================================
   Место, где оговорка стоит честно и мелко: чего мы не знаем, что ещё
   не подтверждено документом. Регистр обычный, а не капс: это предложение,
   которое читают, а не метка. Рядом обычно стоит .claim. */
.tpl-note {
  max-width: var(--as-measure);
  padding-top: var(--as-s4);
  border-top: var(--as-rule-weight) solid var(--as-line-on-dark);
  color: var(--as-text-on-dark-mute);
  font-size: var(--as-fs-micro);
  font-weight: var(--as-w-regular);
  letter-spacing: var(--as-tr-body);
  line-height: var(--as-lh-body);
  text-transform: none;
}

.on-light .tpl-note {
  border-top-color: var(--as-line-on-light);
  color: var(--as-text-on-light-mute);
}

/* ==========================================================================
   8. .tpl-band — узкая полоса-переход между регистрами
   ==========================================================================
   Ставится между двумя секциями разного регистра и несёт ровно одну мысль:
   что читатель уже знает и почему листает дальше. Высота вдвое меньше
   рядовой секции — это не экран-тишина, воздуха на странице быть не должно.
   Собственного фона не имеет: регистр объявляет секция (.on-dark-alt и т.д.). */
.tpl-band {
  padding-block: var(--as-s7);
  border-block: var(--as-rule-weight) solid var(--as-line-on-dark);
}

.on-light .tpl-band {
  border-block-color: var(--as-line-on-light);
}

.tpl-band__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--as-s5);
}

.tpl-band__thought {
  flex: 1 1 min(100%, calc(var(--as-measure) / 2));
  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;
}

.tpl-band__meta {
  flex: 0 1 auto;
  color: var(--as-text-on-dark-mute);
  font-size: var(--as-fs-micro);
  font-weight: var(--as-w-medium);
  letter-spacing: var(--as-tr-micro);
  line-height: var(--as-lh-flat);
  text-transform: uppercase;
}

.on-light .tpl-band__meta {
  color: var(--as-text-on-light-mute);
}