/* Формы VoiceTrics: регистрация (/signup/) и помощь с подключением (/help/), плюс поле
   адреса на двери (app.voicetrics.ru). Подключается ПОСЛЕ site.css и опирается на его
   токены и компоненты (--teal, --line, .btn, .wrap, .card).

   Почему отдельный файл, а не секция в site.css — та же причина, что у app.css (см. его
   шапку): правило 1 из landing/README.md запрещает инлайновый <style>, чтобы две языковые
   версии не разъезжались, но site.css грузят обе версии лендинга на каждом заходе, а форм
   на самом лендинге больше нет. Держать в нём килобайт правил, которые нужны трём
   страницам из шести, незачем.

   Часть правил ниже переехала сюда из site.css (форменный кит) и из app.css
   (.domain-field) — последний используют и дверь, и регистрация, и дублировать его
   нельзя: поле адреса должно выглядеть одинаково в обоих местах, иначе человек не узнает
   на входе то, что заполнял при регистрации. */

/* ── Страница-обёртка ────────────────────────────────────────────────────────
   Обе формы живут на своей странице, а не в секции лендинга: у них одна задача на
   экран. Фон серый по той же причине, что у двери, — карточка белая. */
body.formpage{background:var(--bg-alt)}
.formpage-main{padding:40px 0 64px}
.formpage-inner{max-width:560px;margin:0 auto}
.formpage-head{text-align:center;margin-bottom:26px}
.formpage-head h1{font-size:clamp(1.6rem,4vw,2.15rem);margin:14px 0 12px}
.formpage-head .lead{font-size:1.02rem}
/* Ряд фактов под заголовком — те же плашки, что на двери, но здесь они несут смысл
   «это займёт минуту», а не «мы серьёзные». */
.formpage-facts{
  list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 20px;
  margin-top:18px;color:var(--muted);font-weight:600;font-size:.93rem;
}
.formpage-facts li{display:flex;align-items:center;gap:7px}
.formpage-facts svg{width:18px;height:18px;stroke:var(--teal);fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ── Карточка и поля (переехало из site.css) ─────────────────────────────── */
.form-card{background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow-lg);padding:32px}
.field{margin-bottom:18px}
.field label{display:block;font-weight:700;font-size:.92rem;margin-bottom:7px}
.field .opt{color:var(--muted);font-weight:600}
/* Не только [type=text]: на регистрации есть email и tel — на телефоне они поднимают
   правильную клавиатуру, и без них поля остались бы без рамки и без отступов. */
.field input[type=text],.field input[type=email],.field input[type=tel]{
  width:100%;font-family:inherit;font-size:1.05rem;padding:14px 16px;min-height:54px;
  border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--text);transition:border .15s,box-shadow .15s;
}
.field input:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(14,124,134,.15)}
.field input::placeholder{color:#94A3B8}
.field input.invalid{border-color:var(--bad);box-shadow:0 0 0 3px rgba(225,29,72,.10)}
.consent{display:flex;gap:12px;align-items:flex-start;margin:6px 0 20px;font-size:.9rem;color:var(--muted);line-height:1.45}
.consent input{width:22px;height:22px;flex:none;margin-top:2px;accent-color:var(--teal);cursor:pointer}
.consent a{color:var(--teal);font-weight:700;text-decoration:underline}
.form-card .btn-primary{width:100%}
.form-alt{text-align:center;margin-top:18px;color:var(--muted);font-size:.92rem}
.form-alt a{color:var(--teal);font-weight:700}
.form-msg{display:none;text-align:center;padding:30px 12px}
.form-msg .ic{width:60px;height:60px;border-radius:50%;display:grid;place-items:center;margin:0 auto 18px}
.form-msg .ic svg{width:30px;height:30px;stroke:#fff;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.form-msg.ok .ic{background:var(--ok)}
.form-msg.err .ic{background:var(--bad)}
.form-msg h3{margin-bottom:8px;font-size:1.3rem}
.form-msg p{color:var(--muted)}
.form-msg a{color:var(--teal);font-weight:700}

/* Два необязательных поля в ряд: по отдельности они растягивали бы форму на лишний
   экран, а вместе читаются как одна необязательная строка. */
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field-row .field{margin-bottom:18px}

/* ── Поле адреса (переехало из app.css) ──────────────────────────────────────
   Главный элемент обеих страниц: суффикс показан, а не описан, поэтому сразу видно,
   что вводится адрес будущего кабинета, а не логин. */
.domain-field{
  display:flex;align-items:stretch;text-align:left;
  border:1.5px solid var(--line);border-radius:12px;background:#fff;
  overflow:hidden;transition:border-color .15s ease, box-shadow .15s ease;
}
.domain-field:focus-within{border-color:var(--teal);box-shadow:0 0 0 4px rgba(14,124,134,.12)}
.domain-field.invalid{border-color:var(--bad);box-shadow:0 0 0 4px rgba(225,29,72,.10)}
.domain-field.ok{border-color:var(--ok);box-shadow:0 0 0 4px rgba(22,163,74,.10)}
/* min-width:0 обязателен: у flex-элемента он по умолчанию auto, то есть поле отказывается
   сжиматься уже своего min-content и на узком экране выталкивает суффикс за край. */
.domain-field input{
  flex:1;min-width:0;border:0;outline:0;background:transparent;
  font:inherit;font-weight:700;color:var(--text);padding:15px 8px 15px 16px;
}
.domain-field input::placeholder{color:#94A3B8;font-weight:600}
.domain-field .suffix{
  display:flex;align-items:center;padding:0 16px;white-space:nowrap;
  color:var(--muted);font-weight:700;
  background:var(--bg-alt);border-left:1px solid var(--line);
}
@media(max-width:420px){
  .domain-field .suffix{padding:0 11px;font-size:.92rem}
  .domain-field input{padding-left:12px}
}

/* Строка под полем адреса: подсказка, а при проверке — её результат. Одна строка на все
   состояния и фиксированная высота, чтобы карточка не прыгала на каждое нажатие клавиши. */
.field-note{min-height:22px;margin-top:9px;font-size:.9rem;font-weight:600;color:var(--muted)}
.field-note code{background:var(--bg-alt);border-radius:6px;padding:1px 6px;font-size:.88em}
.field-note.ok{color:var(--ok)}
.field-note.error{color:var(--bad)}

/* ── Состояния страницы регистрации ──────────────────────────────────────────
   Переключаются атрибутом [hidden], а не style.display: у скрытого блока не должно
   оставаться шанса перебить это авторским display, как это уже случалось в приложении
   (см. app/static/css/voicetrics.css). */
[hidden]{display:none!important}

.form-state{text-align:center;padding:34px 12px}
.form-state h2{font-size:1.35rem;margin-bottom:10px}
/* Заголовку панели скрипт переносит фокус, чтобы скринридер прочитал новое состояние
   (см. show() на странице). tabindex="-1" не делает его точкой табуляции, попасть сюда
   клавишей нельзя, и рамка фокуса на заголовке читалась бы как ошибка вёрстки. */
.form-state h2:focus{outline:none}
.form-state p{color:var(--muted);margin-bottom:8px}
.form-state .btn{margin-top:18px}
.form-state .muted-note{font-size:.9rem;margin-top:14px}
/* :not(.btn) обязателен: .form-state a (0,1,1) специфичнее .btn-primary (0,1,0), и без
   исключения кнопка «Перейти в кабинет» получала бы teal-текст на teal-фоне — то есть
   пустой прямоугольник ровно там, куда человек и должен нажать. */
.form-state a:not(.btn){color:var(--teal);font-weight:700}

/* Кабинет строится 30–60 секунд, и всё это время на экране должно быть видно, что
   что-то происходит. Крутилка, а не полоса прогресса: настоящего процента у нас нет,
   а нарисованный «85 %», застрявший на минуту, врал бы. */
.spinner{
  width:44px;height:44px;margin:0 auto 20px;border-radius:50%;
  border:3px solid var(--line);border-top-color:var(--teal);
  animation:spin 1s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.spinner{animation-duration:2.6s}}

.state-ic{width:60px;height:60px;border-radius:50%;display:grid;place-items:center;margin:0 auto 18px}
.state-ic svg{width:30px;height:30px;stroke:#fff;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.state-ic.ok{background:var(--ok)}
.state-ic.bad{background:var(--bad)}

/* Адрес готового кабинета — крупно и на подложке: это единственное, что человек будет
   переписывать с этого экрана в закладки, если не найдёт письмо. */
.done-url{
  display:inline-block;margin:4px 0 2px;padding:10px 16px;
  background:var(--bg-alt);border:1px solid var(--line);border-radius:10px;
  font-weight:700;font-size:1.05rem;color:var(--text);word-break:break-all;
}

@media(max-width:560px){
  .form-card{padding:24px 20px}
  .field-row{grid-template-columns:1fr;gap:0}
  .formpage-main{padding:28px 0 44px}
}