/* =========================================================================
   ФОРМЫ ЗАХВАТА ЗАЯВОК.
   Поведение — assets/forms.js, настройки — assets/site.config.js.
   ========================================================================= */

.form {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-6);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
}

.form__row { display: grid; gap: var(--space-4); }
@media (min-width: 620px) { .form__row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.form__field { display: grid; gap: var(--space-2); }

/* Ячейки формы обязаны уметь сжиматься: у поля ввода есть собственная
   «естественная» ширина, и без min-width: 0 колонка сетки не ужимается —
   на 768 px страница уезжала вправо на 18 px. */
.form__row > *, .form__field { min-width: 0; }
.form__control { min-width: 0; max-width: 100%; }

.form__label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--field-label);
}
.form__label .req { color: var(--color-danger); }

.form__control {
  width: 100%;
  min-height: var(--tap-min);
  padding: 0.7rem 0.85rem;
  background: var(--field-bg);
  color: var(--field-text);
  border: var(--border-width) solid var(--field-border);
  border-radius: var(--radius-md);
  font: inherit;
  font-size: var(--fs-sm);
}
.form__control::placeholder { color: var(--field-subtle); opacity: 1; }
.form__control:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; }

textarea.form__control { min-height: 7.5rem; resize: vertical; }

.form__control[data-invalid="true"] { border-color: var(--field-invalid); box-shadow: 0 0 0 1px var(--field-invalid); }

.form__hint { font-size: var(--fs-3xs); color: var(--field-subtle); }

.form__error {
  font-size: var(--fs-3xs);
  font-weight: var(--fw-bold);
  color: var(--field-invalid);
}
.form__error:not([data-shown="true"]) { display: none; }

.form__consent {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
  font-size: var(--fs-xs);
  color: var(--field-label);
}
.form__consent input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  accent-color: var(--color-brand);
}

.form__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }

/* Honeypot: поле скрыто СТИЛЯМИ, а не type=hidden. Бот его заполняет,
   человек не видит. Убирать из потока через display:none нельзя — часть
   ботов игнорирует такие поля. */
.form__trap {
  position: absolute !important;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

/* Сообщение после отправки / запасной путь при пустом FORM_ENDPOINT */
.form__result {
  padding: var(--space-5);
  background: var(--info-bg);
  color: var(--info-text);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
}
.form__result[hidden] { display: none; }
.form__result h3 { margin-top: 0; font-size: var(--fs-lg); color: var(--info-text); }
.form__result .btn { margin-top: var(--space-3); }

.form__fallback-list { display: grid; gap: var(--space-2); margin: var(--space-4) 0 0; padding: 0; list-style: none; }

.form-note { margin-top: var(--space-4); font-size: var(--fs-3xs); color: var(--color-text-subtle); }

/* =========================================================================
   МЕХАНИКА ВОРОНКИ: теги ролей, квиз, выбор времени, расчёт, вопросы,
   шаги после заявки, материалы, схема проезда, реквизиты.
   Цвета — только токенами: иначе компонент выпадает из тем и из проверки
   контраста. Новых пар токенов не заводим, переиспользуем проверенные.
   ========================================================================= */

/* Кнопка со своим display: inline-flex перебивает атрибут hidden — без этой
   строки скрытые кнопки (карты, мессенджер) остаются видимыми. */
.btn[hidden] { display: none !important; }

/* Группа полей рамкой браузера по умолчанию не тонируется и выпадает из тем —
   задаём цвет токеном. */
fieldset.form__field {
  padding: var(--space-4);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
}
fieldset.form__field > legend { padding-inline: var(--space-2); }

/* --------------------------------------------------- ВЫБОР КЛИКОМ (ТЕГИ) */
.tags { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.tags__item { position: relative; }

/* Радиокнопка остаётся в потоке и получает фокус: доступность важнее
   красоты, поэтому не display:none, а прозрачный слой поверх подписи. */
.tags__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.tags__label {
  display: block;
  min-height: var(--tap-min);
  padding: 0.6rem 0.9rem;
  background: var(--field-bg);
  color: var(--field-text);
  border: var(--border-width) solid var(--field-border);
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  line-height: 1.5;
}
.tags__input:hover + .tags__label { border-color: var(--color-border-strong); }
.tags__input:focus-visible + .tags__label {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}
.tags__input:checked + .tags__label {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  border-color: var(--btn-primary-bg);
  font-weight: var(--fw-bold);
}

/* ---------------------------------------------------------------- КВИЗ */
.quiz {
  margin: 0;
  padding: var(--space-5);
  background: var(--color-surface-sunken);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
}
.quiz__legend {
  padding: 0;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--color-text);
}
.quiz__hint { margin-top: var(--space-2); font-size: var(--fs-3xs); color: var(--color-text-subtle); }

/* Колонки считаются от ширины КОНТЕЙНЕРА, а не окна: квиз стоит внутри
   двухколоночной сетки страницы, и медиазапрос по окну ломал его на 768 px —
   подписи рвались по одному слову в строку. */
.quiz__grid {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}

.quiz__option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
  min-height: var(--tap-min);
  padding: var(--space-3);
  background: var(--field-bg);
  color: var(--field-text);
  border: var(--border-width) solid var(--field-border);
  border-radius: var(--radius-md);
  font-size: var(--fs-xs);
  line-height: var(--lh-base);
  /* Длинное слово не выпадает за рамку карточки. */
  overflow-wrap: anywhere;
  cursor: pointer;
}
.quiz__option input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  accent-color: var(--color-brand);
}
.quiz__option:hover { border-color: var(--color-border-strong); }
.quiz__option:focus-within { outline: 2px solid var(--color-focus); outline-offset: 2px; }

.quiz__summary {
  margin-top: var(--space-4);
  padding: var(--space-4);
  background: var(--info-bg);
  color: var(--info-text);
  border-left: 3px solid var(--info-accent);
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
}

/* ------------------------------------------------- ВЫБОР УДОБНОГО ВРЕМЕНИ */
.slots { display: grid; gap: var(--space-3); }
.slots__title { font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--field-label); }

/* Ряд дней переносится на следующую строку: все десять предложенных дней видны
   сразу, ничего не срезается краем контейнера, а страница по горизонтали не
   едет. Прокрутка оставлена страховкой на случай, если день окажется шире. */
.slots__days {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  overflow-x: auto;
  padding-bottom: var(--space-2);
}
.slots__day {
  flex: 0 0 auto;
  display: grid;
  gap: 2px;
  min-width: 4.5rem;
  min-height: var(--tap-min);
  padding: var(--space-2) var(--space-3);
  background: var(--field-bg);
  color: var(--field-text);
  border: var(--border-width) solid var(--field-border);
  border-radius: var(--radius-md);
  font: inherit;
  font-size: var(--fs-3xs);
  cursor: pointer;
}
.slots__date { font-size: var(--fs-xs); font-weight: var(--fw-bold); }
.slots__weekday { color: var(--field-subtle); }

.slots__times { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.slots__times[hidden] { display: none; }
.slots__time {
  min-height: var(--tap-min);
  padding: 0.5rem 0.8rem;
  background: var(--field-bg);
  color: var(--field-text);
  border: var(--border-width) solid var(--field-border);
  border-radius: var(--radius-pill);
  font: inherit;
  font-size: var(--fs-xs);
  cursor: pointer;
}
.slots__day:hover, .slots__time:hover { border-color: var(--color-border-strong); }
.slots__day:focus-visible, .slots__time:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}
.slots__day[aria-pressed="true"], .slots__time[aria-pressed="true"] {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  border-color: var(--btn-primary-bg);
}
.slots__day[aria-pressed="true"] .slots__weekday { color: var(--btn-primary-text); }

.slots__picked { font-size: var(--fs-3xs); color: var(--color-text-muted); }

/* --------------------------------------------------------------- РАСЧЁТ */
.roi {
  display: grid;
  gap: var(--space-5);
  padding: var(--space-6);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
}
@media (min-width: 900px) { .roi { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

.roi__inputs { display: grid; gap: var(--space-4); align-content: start; }

.roi__range { width: 100%; accent-color: var(--color-brand); }
.roi__range:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }

.roi__share {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--field-label);
}

.roi__out { display: grid; gap: var(--space-3); align-content: start; }

.roi__line {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-sunken);
  border-radius: var(--radius-md);
  font-size: var(--fs-xs);
  color: var(--color-text);
}
.roi__line--total { background: var(--info-bg); color: var(--info-text); }
.roi__value { font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }

.roi__formula {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  background: var(--code-bg);
  color: var(--code-text);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  line-height: var(--lh-loose);
  white-space: pre-wrap;
}

/* ---------------------------------------------------------- ВОПРОСЫ (FAQ) */
.faq { display: grid; gap: var(--space-3); }

.faq__item {
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
}
.faq__q {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--color-text);
  cursor: pointer;
  list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::before {
  content: "+";
  display: inline-block;
  width: 1.1em;
  color: var(--color-brand);
  font-weight: var(--fw-bold);
}
.faq__item[open] .faq__q::before { content: "−"; }
.faq__q:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.faq__item > p, .faq__item > ul { margin-top: var(--space-3); font-size: var(--fs-sm); }

/* -------------------------------------------------- ШАГИ ПОСЛЕ ЗАЯВКИ */
.steps { display: grid; gap: var(--space-4); margin: 0; padding: 0; list-style: none; counter-reset: step; }
@media (min-width: 860px) { .steps--row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.steps__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
  padding: var(--space-4);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
}
.steps__item::before {
  counter-increment: step;
  content: counter(step);
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
}
.steps__title { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--color-text); }
.steps__text { margin-top: var(--space-1); font-size: var(--fs-xs); color: var(--color-text-muted); }

/* ------------------------------------------------ МАТЕРИАЛЫ ДЛЯ СКАЧИВАНИЯ */
.dl { display: grid; gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
@media (min-width: 720px) { .dl { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.dl__item {
  display: grid;
  gap: var(--space-3);
  align-content: start;
  padding: var(--space-5);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
}
.dl__kind {
  justify-self: start;
  padding: 0.15rem 0.6rem;
  background: var(--chip-info-bg);
  color: var(--chip-info-text);
  border-radius: var(--radius-pill);
  font-size: var(--fs-3xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wide);
}
.dl__title { font-size: var(--fs-md); font-weight: var(--fw-bold); color: var(--color-text); }
.dl__text { font-size: var(--fs-xs); color: var(--color-text-muted); }
.dl__meta { font-size: var(--fs-3xs); color: var(--color-text-subtle); }
.dl__item .btn { justify-self: start; }

/* ------------------------------------------------------------- РЕКВИЗИТЫ
   Класс .req занят дизайн-системой под звёздочку обязательного поля,
   поэтому список реквизитов называется .req-list. */
.req-list { display: grid; gap: 0; margin: 0; }
@media (min-width: 560px) { .req-list { grid-template-columns: 13rem minmax(0, 1fr); } }

.req-list dt {
  padding: var(--space-3) 0 0;
  font-size: var(--fs-3xs);
  font-weight: var(--fw-bold);
  color: var(--color-text-subtle);
}
.req-list dd {
  margin: 0;
  padding: 0 0 var(--space-3);
  border-bottom: var(--border-width) solid var(--color-border);
  font-size: var(--fs-sm);
  color: var(--color-text);
}
@media (min-width: 560px) {
  .req-list dt { padding: var(--space-3) var(--space-4) var(--space-3) 0; border-bottom: var(--border-width) solid var(--color-border); }
  .req-list dd { padding: var(--space-3) 0; }
}

/* ------------------------------------------------------- СХЕМА ПРОЕЗДА */
.route {
  padding: var(--space-5);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
}
/* На узком экране схема уезжает вбок внутри себя, а не мельчает до
   нечитаемого: тот же приём, что у макета интерфейса .mock__body. Полоса
   прокрутки — на отдельной обёртке, чтобы подпись о прокрутке и подрисуночная
   подпись оставались на месте, как у .fig__scroll. */
.route__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.route__svg { display: block; width: 100%; min-width: 30rem; height: auto; }
/* Подсказка о прокрутке показывается ровно там, где схема действительно шире
   своей колонки: 30 rem схемы + 32 px боковых полей контейнера = 512 px, ниже
   этого она не помещается. Обещать прокрутку там, где всё видно, нельзя. */
.route__swipe { display: none; }
@media (max-width: 511px) {
  .route__swipe {
    display: block;
    margin: 0 0 var(--space-3);
    font-size: var(--fs-3xs);
    color: var(--color-text-subtle);
  }
}
.route__caption { margin-top: var(--space-4); font-size: var(--fs-3xs); color: var(--color-text-subtle); }

/* Половина сетки `.grid--2` уже 30 rem вплоть до ~1100 px, поэтому на планшете
   схема обрезалась сильнее, чем на телефоне: в правой колонке ей оставалось
   292 px из 480. До этой ширины схема занимает обе колонки. */
@media (max-width: 1100px) {
  .grid--2 > .route { grid-column: 1 / -1; }
}

/* ------------------------------------------- ПЕЧАТЬ: механика на бумаге */
@media print {
  .quiz, .slots, .roi, .tags, [data-exit] { display: none !important; }
  /* Закрытые ответы на бумаге не разворачиваются: печатается то, что видно
     на экране, — то же правило, что и для вкладок .seg. */
  .faq__item { break-inside: avoid; page-break-inside: avoid; }
  .steps__item, .dl__item, .route { break-inside: avoid; page-break-inside: avoid; }
  /* На бумаге прокручивать нечем: схема ужимается под ширину полосы набора. */
  .route__scroll { overflow-x: visible; }
  .route__svg { min-width: 0; }
}