/* Экраны продукта поверх системы «Воздух».
 *
 * Здесь только то, чего в системе нет и быть не должно: ширина полосы набора,
 * шапка, первый экран, кабинет, страница заказа, служебные экраны, подвал. Всё
 * остальное (цвета, типографика, кнопки, поля, поверхности, чипы, шаги)
 * приезжает из air.css и переопределяться здесь не должно.
 *
 * Правило простое: если правка выглядит как «поправить систему под эту
 * страницу», её место в air.css или нигде. Иначе через месяц у витрины будет
 * своя кнопка, у кабинета своя, и общего продукта не станет.
 *
 * Отчёт живёт по своим правилам и своими токенами: у документа задача
 * печатная (плотно, с источником у каждой строки), у продукта задача
 * разговора. Общий слой «базовые стили» стал бы местом, где эти две задачи
 * спорят.
 */

/* Ширина полосы набора. Одним значением на весь сайт: шапка, содержимое и
   подвал обязаны стоять по одной вертикали, а три копии числа разъезжаются.
   Узкая полоса для экранов-документов (кабинет, заказ, служебные): они
   читаются в одну колонку, и растянутая на всю ширину карточка отчёта
   превращается в строку длиной в экран. */
:root {
  --measure: 1080px;
  --measure-narrow: 620px;
}

/* Полоса набора отвечает только за горизонталь.
 *
 * Здесь стояло `margin: 0 auto`, и сокращённая запись обнуляла заодно нижний
 * отступ. Класс весит больше, чем правило по тегу, поэтому вертикальный ритм
 * секций пропадал целиком: заголовок следующего раздела прилипал к карточкам
 * предыдущего и читался как их подпись. Ось, которой правило не управляет,
 * оно и не трогает. */
.wrap {
  max-width: var(--measure);
  margin-inline: auto;
  padding: 0 var(--space-5);
}

.wrap-narrow { max-width: var(--measure-narrow); }

section { margin-bottom: var(--space-12); }

.sec-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

/* Подпись рядом с заголовком секции. Живёт и на стекле, и прямо на градиенте
   (в заголовках секций витрины), поэтому берёт ступень, которая проходит по
   контрасту в обоих случаях. */
.hint {
  font-size: 13px;
  color: var(--color-ink-soft);
}

/* --- шапка ------------------------------------------------------------- */

.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-5);
  max-width: var(--measure);
  margin-inline: auto;
}

.masthead.narrow { max-width: var(--measure-narrow); }

.logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: inherit;
}

.logo:hover { text-decoration: none; }

/* Знак это маленькая стеклянная плитка, то есть та же поверхность, что у
   карточек, только в размер буквы. Отдельной фигуры для логотипа система не
   заводит намеренно: лишняя форма читалась бы как ещё одна сущность. */
.logo-mark {
  width: 38px;
  height: 38px;
  flex: none;
  display: grid;
  place-items: center;
  background: var(--surface-panel);
  border: 1px solid var(--surface-panel-line);
  border-radius: var(--radius-control);
  box-shadow: var(--shadow-soft);
  /* Тёмная ступень акцента, а не яркая. Буква в плитке это текст, а не заливка,
     и яркий акцент давал ей 4.3:1 при норме 4.5:1 для некрупного текста. */
  color: var(--color-accent-strong);
  font-size: 19px;
  font-weight: 500;
  line-height: 1;
}

.logo-txt strong {
  display: block;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.logo-txt span {
  display: block;
  font-family: var(--font-meta);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-ink-muted);
}

.nav {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.nav a {
  font-size: 14px;
  color: var(--color-ink-soft);
}

.nav a:hover { color: var(--color-accent-text); }

/* Вход и кабинет это действия, а не пункты меню: у них своя плитка. */
/* На узком экране это единственное действие в шапке, и оно же основной выход
   из пустого кабинета. Высоты не хватало до 44 пикселей, то есть до границы,
   ниже которой нажатие пальцем начинает промахиваться. */
.nav-pill {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  background: var(--surface-panel);
  border: 1px solid var(--surface-panel-line);
  border-radius: var(--radius-pill);
  padding: var(--space-2) var(--space-4);
  box-shadow: var(--shadow-soft);
  color: var(--color-accent-text);
  font-weight: 500;
}

/* Пилюля не переносится по словам. «Мои отчёты» в две строки перестаёт быть
   кнопкой и превращается в раздутое пятно, которое на узком экране ещё и
   выталкивает логотип за край. */
.nav-pill:hover { text-decoration: none; background: rgba(255, 255, 255, 0.92); }
.nav-pill { white-space: nowrap; }

/* --- первый экран ------------------------------------------------------ */

.hero {
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: var(--space-8);
  align-items: start;
  padding-top: var(--space-8);
  margin-bottom: var(--space-16);
}

.hero h1 { margin-bottom: var(--space-5); }

.lead {
  font-size: 17px;
  line-height: 1.6;
  color: var(--color-ink-soft);
  margin: 0 0 var(--space-4);
}

/* Тоже на голом градиенте, и это строка про цену. Приглушать её вдвойне
   незачем. */
.lead-small {
  font-size: 14px;
  color: var(--color-ink-soft);
  margin: 0;
}

/* Цена полным тоном, а не приглушённым. Приглушённый годится служебной строке,
   но не цене: цена главное число на экране, и человек, который читает её с
   трудом, просто уходит. */
#lead-price {
  color: var(--color-ink);
  font-weight: 500;
}

.eyebrow {
  font-family: var(--font-meta);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-accent-text);
  margin: 0 0 var(--space-3);
}

/* --- форма заказа ------------------------------------------------------ */

.form-shell { padding: var(--space-6); }

.consent {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-ink-muted);
  margin: 0 0 var(--space-4);
}

.consent input {
  margin-top: 3px;
  flex: 0 0 auto;
  accent-color: var(--color-accent);
}

.captcha { margin-bottom: var(--space-4); }

.form-error { margin: var(--space-4) 0 0; }

/* --- содержательные блоки витрины -------------------------------------- */

.card-kicker {
  font-size: 15px;
  font-weight: 500;
  margin: 0 0 var(--space-2);
}

.card-body {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-ink-soft);
}

.how {
  margin: 0;
  padding-left: var(--space-5);
  color: var(--color-ink-soft);
}

.how li { margin-bottom: var(--space-3); }
.how li:last-child { margin-bottom: 0; }
.how b { color: var(--color-ink); font-weight: 500; }

/* Полоса набора для сплошного текста считается по строке, а не по сетке.
   Общая ширина витрины подобрана под три колонки карточек, и абзац, растянутый
   на всю её ширину, даёт под 130 знаков в строке: глаз теряет начало
   следующей строки и читает через раз. */
.prose { padding: var(--space-6); }
.prose > * { max-width: 68ch; }
.prose p { color: var(--color-ink-soft); }
.prose p:last-child { margin-bottom: 0; }

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

.sheet {
  padding: var(--space-6);
  margin-bottom: var(--space-8);
}

.sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

/* Заголовок экрана-документа ровно один по кеглю. Раньше их было два, 26 и 21
   пиксель, и выбор между ними зависел от того, стоит ли рядом пилюля входа,
   то есть ни от чего. */
.sheet-head h1,
.sheet-title { font-size: 22px; }

/* Единственный способ вернуться со служебных экранов. Вертикальный паддинг
   расширяет зону нажатия, не меняя видимого размера строки. */
.back {
  display: inline-block;
  font-size: 14px;
  font-weight: 500;
  padding: var(--space-2) 0;
  margin-bottom: var(--space-2);
}

/* В одной строке с номером заказа или меткой примера отступ снимается. Флексбокс
   центрирует бокс вместе с внешним отступом, и ссылка с нижним margin встаёт
   выше соседа на половину этого отступа: строка выглядит съехавшей. */
.row > .back { margin-bottom: 0; }

/* Отступ до заголовка держит сама строка, а не ссылка внутри неё: иначе он
   пропадает вместе со снятым отступом. */
.sheet > .row { margin-bottom: var(--space-3); }

.sheet-title {
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0 0 var(--space-1);
}

.sheet-sub {
  font-size: 14px;
  color: var(--color-ink-soft);
  margin: 0 0 var(--space-5);
}

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.row-baseline { align-items: baseline; }

/* --- кабинет ----------------------------------------------------------- */

.order-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  text-decoration: none;
  color: inherit;
}

/* Поднятая карточка это всё ещё карточка. Тень оболочки под ней сделала бы её
   тяжелее листа, на котором она лежит, то есть перевернула бы иерархию
   поверхностей ровно там, где человек её и считывает, под курсором. */
.order-card:hover {
  text-decoration: none;
  box-shadow: var(--shadow-soft);
}

.order-address {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.order-date {
  font-size: 13px;
  color: var(--color-ink-muted);
  white-space: nowrap;
}

.order-price {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-ink-soft);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* Нижняя строка карточки: чем этот отчёт является сейчас и куда ведёт. */
.order-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--divider);
  font-size: 13px;
  color: var(--color-ink-muted);
}

.order-go {
  color: var(--color-accent-text);
  font-weight: 500;
  white-space: nowrap;
}

/* Пустой кабинет. Знак крупный, но не картинка: рисовать иллюстрацию ради
   строчки «отчётов пока нет» значит грузить лишний файл ради пустоты. */
.empty {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  align-items: flex-start;
  padding: var(--space-6) 0;
}

.empty-mark {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  background: var(--surface-panel);
  border: 1px solid var(--surface-panel-line);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-soft);
  font-family: var(--font-meta);
  font-size: 22px;
  /* Та же причина, что у знака в шапке: это глиф текстом, ему нужен 4.5:1. */
  color: var(--color-accent-strong);
}

.empty-text {
  font-size: 17px;
  line-height: 1.6;
  color: var(--color-ink-soft);
  margin: 0;
}

/* Текст внутри панели и кнопка под ним. Панель это врезка, а не карточка: у
   неё один абзац и одно действие, и раскладка у них своя. */
.panel-text {
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-ink-soft);
  margin: 0 0 var(--space-3);
}

.panel .btn-block { margin-top: var(--space-3); }
.panel-text + .btn-block { margin-top: 0; }

/* Остаток пакета. Полоски, а не цифра в кружке: три оплаченных отчёта это
   счётный запас, и видеть его надо разом, не читая. */
.quota {
  display: flex;
  gap: var(--space-1);
}

.quota span {
  width: 22px;
  height: 6px;
  border-radius: 3px;
  background: rgba(26, 33, 43, 0.12);
}

.quota .left { background: var(--color-accent); }

/* --- ключ доступа ------------------------------------------------------- */
/*
   Ссылка на заказ показывается как ценность, а не как строка в тексте: в схеме
   без аккаунтов она и есть доступ к оплаченному отчёту. Отсюда и вес, панель,
   моноширинный набор, кнопка копирования рядом. Человек, пробежавший экран
   глазами за две секунды, обязан унести отсюда именно её.
*/
.keybox {
  background: var(--surface-panel);
  border: 1px solid var(--color-accent-line);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-soft);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-5);
}

.keybox-value {
  /* Крупно и с переносом по любому знаку: ключ длинный, а обрезанный
     многоточием адрес невозможно ни прочитать, ни переписать рукой. */
  font-size: 17px;
  line-height: 1.5;
  color: var(--color-ink);
  overflow-wrap: anywhere;
  margin: var(--space-2) 0 var(--space-4);
}

.keybox-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.keybox-actions .btn { flex: 1 1 200px; }

.keybox-note {
  font-size: 13px;
  line-height: 1.55;
  color: var(--color-ink-soft);
  margin: var(--space-4) 0 0;
}

/* Номер платежа. Тише ссылки намеренно: он нужен в редком плохом случае, а не
   каждому покупателю, и спорить со ссылкой за внимание не должен. */
.pay-payment {
  text-transform: none;
  letter-spacing: 0.02em;
  margin: 0 0 var(--space-4);
}

/* --- страница заказа --------------------------------------------------- */

.progress-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.progress-title {
  font-size: 15px;
  font-weight: 500;
  color: var(--color-accent-text);
}

/* Заголовок панели меняет голос вместе с самой панелью: сборка идёт, отчёт
   собран, отчёт не собрался. Классом, а не стилем по месту из скрипта: цвет
   состояния живёт в системе, и скрипту незачем знать его значение. */
.progress-title.calm { color: var(--color-calm); }
.progress-title.alarm { color: var(--color-alarm); }

.progress-note {
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-ink-soft);
  margin: var(--space-3) 0 0;
}

.pay { margin-top: var(--space-5); }

/* Пакет и одиночный отчёт стоят рядом: разница в цене должна читаться разом, а
   не листанием. На узком экране кнопки становятся в колонку. */
.pay-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.pay-buttons .btn { flex: 1 1 240px; }

.actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

/* --- служебные экраны -------------------------------------------------- */

.stage {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-12) var(--space-6);
}

.stage-code {
  font-family: var(--font-meta);
  font-size: 15px;
  letter-spacing: 0.08em;
  color: var(--color-ink-muted);
}

.stage-code.alarm { color: var(--color-alarm); }

.stage h1 { font-size: 26px; }

.stage p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-ink-soft);
  margin: 0;
}

.stage-foot {
  font-size: 13px;
  color: var(--color-ink-muted);
  text-align: center;
  padding: 0 var(--space-6) var(--space-6);
  margin: 0;
}

/* Метка примера. Не украшение: страница показывает вымышленный адрес, и
   человек обязан понять это раньше, чем начнёт сверять цифры со своим домом.
   Шрифт, кегль и разрядка приезжают из системного класса `meta`, который
   стоит рядом в разметке: здесь остаётся только то, чем метка примера
   отличается от прочих, подложка и пилюля. */
.badge {
  background: var(--surface-quiet);
  border-radius: var(--radius-pill);
  padding: var(--space-1) var(--space-3);
}

.verdicts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

/* Тоже системная метка, здесь только отбивка от значения под ней. */
.verdict-label { margin: 0 0 var(--space-1); }

.verdict-value {
  font-size: 16px;
  font-weight: 500;
  margin: 0;
}

.verdict-calm { color: var(--color-calm); }
.verdict-doubt { color: var(--color-doubt); }

.finding-title {
  font-size: 15px;
  font-weight: 500;
  margin: 0 0 var(--space-2);
}

.finding-body {
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-ink-soft);
  margin: 0 0 var(--space-2);
}

.finding-source {
  font-size: 13px;
  margin: 0;
}

/* Реквизиты и контакты: метка сверху, значение под ней. Рецепт метки тот же
   системный, разошлись когда-то только числа: 11 против 12 и три разные
   разрядки на одну роль. */
.def-label { margin: 0 0 var(--space-2); }

.def-value {
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
}

/* --- подвал ------------------------------------------------------------ */

.footer {
  max-width: var(--measure);
  margin-inline: auto;
  padding: var(--space-8) var(--space-5) var(--space-12);
}

.footer.narrow { max-width: var(--measure-narrow); }

/* Подвал лежит прямо на градиенте, без стекла под собой, и приглушённая
   ступень даёт на нём 4.08:1 вместо 4.5:1. Здесь берётся ступень выше: это
   ссылки на договор и на контакты, то есть ровно то, что человек ищет, когда
   у него уже возник вопрос к нам. */
.footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
  font-size: 13px;
  color: var(--color-ink-soft);
}

.footer-note { margin: var(--space-5) 0 0; }

@media (max-width: 900px) {
  .hero {
    grid-template-columns: 1fr;
    gap: var(--space-6);
    padding-top: var(--space-5);
  }

  .masthead .nav a:not(.nav-pill) { display: none; }
}

@media (max-width: 620px) {
  /* Подпись под названием уходит: на узком экране она отнимает у шапки две
     строки и выталкивает действие за край. Само название остаётся, а чем
     занимается сервис, написано первым же экраном. */
  .logo-txt span { display: none; }
  .masthead { padding: var(--space-4); }

  /* Название шага и его заметка перестают делить строку: на узком экране они
     обе ломаются по словам, и вместо списка получается решётка из обрывков.
     Заметка уходит под название и занимает всю ширину. */
  .steps li { flex-wrap: wrap; }
  .steps .step-note {
    flex: 1 0 100%;
    padding-left: calc(var(--steps-mark-width) + var(--space-3));
  }

  .verdicts { grid-template-columns: 1fr; }

  .shell { border-radius: 24px; }
  .sheet,
  .form-shell,
  .prose { padding: var(--space-5); }
  .stage { padding: var(--space-8) var(--space-5); }
}