/* assets/styles/lead.css — оформление живой формы заявки и кнопок мессенджеров.
   Этап 8. Один файл на все страницы с формой: главная, калькулятор, девять кейсов.

   ЗАЧЕМ ОТДЕЛЬНЫМ ФАЙЛОМ. Стили страниц сайта живут внутри самих страниц, и то же
   правило, переписанное в двенадцати местах, однажды разойдётся молча: поправят
   на главной, на кейсах останется прежнее, и обе стороны будут выглядеть рабочими.
   Логика формы уже сведена в один assets/js/lead.js — вид сводится сюда же.

   Цвета и шрифты берутся ТОЛЬКО из токенов бренда (:root страниц). Своих значений
   файл не вводит: канон — DESIGN.md проекта и brand.md в multicrete-brand. */

/* ── Сообщения о судьбе заявки ──────────────────────────────────────────────
   Оба лежат в разметке скрытыми и показываются по ответу приёмника: успех —
   только после подтверждения, отказ — с нажимаемым телефоном внутри. */
.lead-msg {
  margin-top: 1rem; padding: .9rem 1rem;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--scale); color: var(--muted);
  font-size: .92rem; line-height: 1.55;
}
.lead-msg a { color: var(--ink); font-weight: 600; }
.lead-msg--ok { border-color: var(--blue); color: var(--ink); }
/* Красный — единственное исключение канона, и оно ровно про это: заявка не ушла. */
.lead-msg--err { border-color: var(--red); }

/* ── Кнопки мессенджеров ────────────────────────────────────────────────────
   Свои ссылки, без сторонних виджетов и всплывающих пузырей (решение D-09).
   Оформление берётся у вторичной кнопки бренда — чужие фирменные цвета
   на страницы не заводятся. */
.msgr { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 1rem; }
.msgr .btn { padding: .7rem 1.2rem; font-size: .92rem; }
.msgr .btn svg { width: 18px; height: 18px; flex: none; }

/* ── Поля формы на страницах кейсов ─────────────────────────────────────────
   У главной и калькулятора поля уже оформлены своими правилами (.pf-input
   и соседи). У девяти кейсов форм не было никогда, поэтому минимальный набор
   правил живёт здесь — теми же токенами. */
.lead-form { margin-top: 1rem; }
.lead-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.lead-form label.lead-label { display: block; margin: .75rem 0 .35rem; font-size: .8rem; font-weight: 600; color: var(--muted); }
.lead-input {
  width: 100%; font-family: inherit; font-size: .95rem; padding: .7rem .85rem;
  border: none; border-radius: 8px; background: var(--scale); color: var(--ink);
  box-shadow: inset 0 2px 4px rgba(26,35,50,.08);
}
.lead-input:focus { outline: 2px solid var(--blue); }
.lead-textarea { min-height: 80px; resize: vertical; }
.lead-consent { display: flex; gap: .5rem; align-items: flex-start; margin: 1rem 0; font-size: .78rem; color: var(--muted); }
.lead-consent a { color: var(--ink); }
.lead-submit { width: 100%; justify-content: center; }

/* ── Блок заявки в конце кейса ──────────────────────────────────────────────
   Реклама поведёт людей в том числе на кейсы, и поведёт с телефонов: человек,
   дочитавший разбор похожего узла, должен иметь возможность написать прямо здесь,
   а не искать дорогу на главную. */
.case-lead {
  margin: 2.5rem 0 1rem; padding: 1.75rem 1.5rem;
  background: var(--steel); border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 12px 30px rgba(26,35,50,.18);
  /* Круглые кнопки листалки кейсов приколоты к краям экрана посередине высоты
     и на телефоне накрывали верхний левый угол поля «Телефон»: замер показал
     кнопку в полосе 6…46 точек по горизонтали и 402…442 по вертикали, поле —
     16…359 и 421…464. Палец, попавший в этот угол, уводил на соседний кейс.
     Блок заявки поднят над ними: в его зоне выигрывает форма, а сама листалка
     остаётся доступной выше и ниже блока. Слой на единицу больше, чем у кнопок. */
  position: relative; z-index: 41;
}
.case-lead__title { font-family: var(--f-head); font-weight: 600; font-size: 1.45rem; line-height: 1.2; margin-bottom: .5rem; }
.case-lead__sub { color: var(--muted); font-size: .98rem; }

/* На телефоне два поля в строке не помещаются: 320 точек делятся на два поля
   с отступом и оставляют на каждое меньше 150. Строка разбирается на одну колонку. */
@media (max-width: 560px) {
  .lead-form__row { grid-template-columns: 1fr; }
  .case-lead { padding: 1.25rem 1rem; }
}