/* Hyperion — вход кандидата и тупики.

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

   Обе поверхности объединяет одно обстоятельство: человек на них ещё (или уже)
   ничего про сервис не знает. На входе он решает, отдавать ли нам телефон и
   лицо; в тупике — стоит ли возвращаться. Поэтому оба вида устроены как
   асимметричная пара (PR-377): слева — дело, справа — тихая колонка, в которой
   написано, что с его данными и его работой происходит. Рабочий экран держит в
   правой колонке величины сдачи (PR-378); здесь величин нет вовсе — вместо них
   стоит то, ради чего правая колонка на этих двух видах и существует.

   Секции:
   1) воронка входа — правая колонка, форма, поле кода, адрес бота;
   2) тупик — один компонент с вариантами тона. */

/* 1. Воронка входа ========================================================= */

/* Правая колонка входа — не полоса состояния, а объяснение шага: что с этим
   шагом происходит, куда уходит введённое и что остаётся целым. Пара берётся
   готовым вариантом страницы (`page--narrow`, PR-386), поэтому сетки здесь
   нет — только вид самой колонки. */

.entry-aside > .rail-block + .rail-block {
  /* Между блоками колонки — зазор секции: их разделяет воздух, а не линия.
     Свой зазор нужен потому, что `.page-rail` собирает блоки величин плотнее,
     чем читаемые вслух абзацы. */
  margin-top: var(--gap-block);
}

/* Ниже 1024px сетка складывается в одну колонку и полоса состояния встаёт
   ПЕРЕД содержанием: величины сдачи обязаны быть первым, что видно (PR-378).
   Здесь правило обратное, и это не исключение из него, а другой случай:
   объяснение шага не величина, а поддержка, и на телефоне человеку сперва
   нужна форма, ради которой он пришёл.

   Тупик посреди кабинета — случай третий: там в колонке стоят настоящие
   величины кандидата, и они остаются первыми, как велит PR-378. Отличаются эти
   два вида колонки не классом экрана, а содержимым, поэтому и условие
   написано по содержимому. */
@media (max-width: 1023px) {
  /* Селектор повторяет форму того, что перебивает (`.page > .page-rail`), плюс
     собственный класс: у правила раскладки специфичность выше одного класса,
     и «своё» иначе просто не доезжает. */
  .page > .page-rail.entry-aside,
  .page > .page-rail.stop-aside:not(:has(.rail-block--stats)) {
    order: 1;
    margin-top: var(--gap-section);
    margin-bottom: 0;
  }

  /* В сложенной сетке колонка получает всю ширину экрана, и текст в ней
     разъезжается до сотни знаков в строке, пока форма над ним стоит по мере.
     Мера у них обязана быть одна: это одна колонка одного вида, просто
     разложенная сверху вниз. Блок величин не трогаем — он не проза. */
  .page > .page-rail.entry-aside > .rail-block,
  .page > .page-rail.stop-aside > .rail-block:not(.rail-block--stats) {
    max-width: var(--measure);
  }
}

/* Форма шага. Мера у поля своя, короче читаемой строки: в поле не читают, в
   него целятся, и строка ввода длиной в абзац на цель не похожа. Значение
   раздаётся через `--measure`, потому что именно его спрашивает `.field`
   у дизайн-системы — своей ширины поля здесь не назначается. */
.entry-form {
  --measure: 26rem;
}

/* Адрес бота — величина этого экрана -------------------------------------
   Экран привязки существует ровно затем, чтобы человек узнал, куда идти
   (PR-361). Значит адрес обязан читаться первым и с одного взгляда, а не
   лежать строкой пояснения под первым шагом списка. Набран он моноширинно:
   это идентификатор, который переписывают знак в знак.

   Кегль — на ступень ниже «величины, ради которой открыт экран» (`stat--lg`):
   у неё разряды считаные, а здесь два десятка знаков, и на шестой ступени они
   не помещаются в колонку формы ни на какой ширине. */
.entry-handle > .stat-value {
  font: var(--t-data-lg);
  letter-spacing: -0.01em;
  /* Идентификатор длиннее колонки переносится, а не растягивает страницу. */
  white-space: normal;
  overflow-wrap: anywhere;
}

/* 2. Тупик ================================================================= */

/* Один компонент на все поводы, у каждого повода свой тон. Тон несут два
   знака, и оба — до слов: короткая линия над приставкой и сама приставка.
   Линия — приём композиции и порогу контраста не подчиняется (PR-380).

   Красного нет ни в одном варианте, включая сбой и окончательный отказ:
   формулировки положительные (PR-315), а тревожный цвет на экране, где
   человеку ничего не грозит, — крик вместо разговора. Сбой на нашей стороне
   помечен предупреждающим тоном, окончательный отказ — весом. */
.stop-rule {
  width: var(--s-16);
  height: 2px;
  background: var(--line-strong);
}

.stop--ours .stop-rule {
  background: var(--warn);
}

.stop--ours .eyebrow {
  color: var(--warn);
}

.stop--final .stop-rule {
  background: var(--ink);
}

.stop--final .eyebrow {
  color: var(--ink);
}

/* Правая колонка тупика — что осталось целым. Это единственное, что человеку
   в тупике по-настоящему нужно знать, и в поток текста оно не помещается:
   там оно читается как оправдание, а столбиком — как опись. */
.stop-aside > .rail-block + .rail-block {
  margin-top: var(--gap-block);
}