/* Стили страницы входа (app.voicetrics.ru) и заглушки несуществующего поддомена.
   Подключается ПОСЛЕ site.css и опирается на его токены и компоненты (--teal, --line,
   .btn, .wrap, .logo, .eyebrow) — страница должна читаться как продолжение лендинга,
   а не как отдельный сайт.

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

/* Фон страницы — не белый, в отличие от лендинга: карточка тоже белая, и на белом её
   граница почти не читается — «дверь» выглядела бы недогрузившейся страницей, а не
   элементом интерфейса. На сером тень поднимает её над фоном. */
body{background:var(--bg-alt)}

/* Тот же приём, что у .hero: две мягкие teal-линзы по углам, чтобы просторный
   экран с одной карточкой не выглядел незаконченным. */
/* Карточка и блок «ещё не подключены» должны помещаться в один экран вместе: второй
   и есть цель страницы, а уехав под сгиб, он перестаёт работать. Отсюда сжатые отступы
   и короткие подписи в .door-facts — на ноутбучном экране всё видно без прокрутки. */
.door{
  position:relative;overflow:hidden;
  /* Две строки подряд — не опечатка. На iOS 100vh считает высоту вместе с областью под
     панелями браузера, то есть больше, чем реально видно: центрируемое содержимое из-за
     этого уезжает под сгиб, и нижняя кнопка обрезается ровно посередине. dvh меряет
     видимую часть честно; vh оставлен первым как запасной для браузеров без dvh. */
  min-height:calc(100vh - 70px);
  min-height:calc(100dvh - 70px);
  display:flex;align-items:center;
  padding:36px 0 48px;
}
/* Обязательно, раз .door — флексбокс: у flex-элемента min-width по умолчанию auto, то есть
   он отказывается сжиматься уже своего min-content. На узком экране .wrap из-за этого
   держал 409px при вьюпорте 378 — карточка центровалась внутри широкого родителя, слева
   оставался отступ, а справа её срезал overflow:hidden выше, и прокрутить туда было нельзя.
   Ровно та же ловушка, что и у input в .domain-field, только этажом выше.

   width:100% — вторая половина той же правки: без неё flex-элемент, которому разрешили
   сжиматься, начинает занимать только ширину содержимого, и на десктопе карточка
   переставала дотягиваться до своих 560px. */
.door > .wrap{min-width:0;width:100%}
.door::before,.door::after{content:"";position:absolute;border-radius:50%;pointer-events:none;z-index:0}
.door::before{width:620px;height:620px;top:-300px;right:-200px;
  background:radial-gradient(circle,rgba(14,124,134,.10),transparent 68%)}
.door::after{width:520px;height:520px;bottom:-320px;left:-180px;
  background:radial-gradient(circle,rgba(14,124,134,.07),transparent 68%)}

/* Потолок задан и в единицах вьюпорта, а не только как 100% родителя — подстраховка от
   повторения бага с min-width:auto выше. Пока предки ведут себя правильно, правило не
   делает ничего: 100vw − 32 больше и 560px, и ширины родителя. Но если предок снова
   окажется шире экрана, карточка останется в границах экрана, а не уедет под обрезку
   overflow:hidden, где до неё нельзя даже доскроллить. Дёшево и молча. */
.door-inner{
  position:relative;z-index:1;
  width:100%;max-width:min(560px, calc(100vw - 32px));
  margin:0 auto;text-align:center;
}

.door-card{
  background:#fff;border:1px solid var(--line);border-radius:22px;
  box-shadow:var(--shadow-lg);padding:34px 38px 30px;
}
/* Отступ до поля держит сам заголовок: на двери абзаца-лида под ним нет намеренно.
   «У каждой клиники свой адрес и своя база» дублировало то, что поле с суффиксом и так
   показывает наглядно, а «данные не смешиваются» отвечало на вопрос, которого посетитель
   не задавал — такая фраза не успокаивает, а насаждает сомнение. */
.door-card h1{font-size:clamp(1.65rem,4vw,2.2rem);margin:16px 0 24px}
/* Заглушка лид использует — там он объясняет, что делать с неверным адресом. */
.door-card .lead{font-size:1.02rem;margin-bottom:24px}

/* Поле адреса — главный элемент страницы: суффикс показан, а не описан, поэтому
   посетителю сразу видно, что у клиники будет собственный адрес. */
.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 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}
}

/* Строка под полем: подсказка с примером, а при ошибке — её место занимает
   сообщение. Одна строка на оба состояния, чтобы карточка не прыгала по высоте. */
.door-note{
  min-height:22px;margin-top:10px;text-align:left;
  font-size:.9rem;font-weight:600;color:var(--muted);
}
.door-note code{
  font-family:inherit;font-weight:700;color:var(--teal);
  background:var(--teal-light);padding:1px 7px;border-radius:6px;
}
.door-note.error{color:var(--bad)}

.door-submit{width:100%;margin-top:18px}

/* Три плашки держим в одну строку на десктопе: разрыв 2+1 читается как случайный.
   Отсюда сжатый кегль и короткие подписи — на узком экране они всё равно переносятся. */
.door-facts{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:7px;margin-top:22px}
.door-facts li{
  display:inline-flex;align-items:center;gap:6px;
  font-size:.78rem;font-weight:700;color:var(--muted);
  background:var(--bg-alt);border:1px solid var(--line);
  padding:6px 11px;border-radius:999px;
}
.door-facts svg{width:14px;height:14px;flex:none;stroke:var(--teal);fill:none;
  stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* Ниже карточки — то, ради чего страница вообще стоит на лендинге: посетитель без
   аккаунта не должен упереться в форму, ему тут же предлагают заявку и демо. */
.door-alt{margin-top:22px}
.door-alt p{color:var(--muted);font-size:.95rem;margin-bottom:12px}
.door-alt .door-alt-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.door-alt .btn{padding:12px 20px;min-height:46px;font-size:.95rem}
/* На телефоне карточка должна помещаться вместе с блоком «ещё не подключены» — он и есть
   причина, по которой страница стоит на лендинге, и уехав под сгиб перестаёт работать.
   Поэтому воздух режется отовсюду понемногу, а не выбрасывается целый блок. */
@media(max-width:520px){
  .door{padding:18px 0 26px}
  .door-card{padding:26px 20px 22px;border-radius:18px}
  .door-card h1{margin:12px 0 18px}
  .door-facts{margin-top:16px;gap:6px}
  .door-facts li{font-size:.75rem;padding:5px 10px}
  .door-alt{margin-top:18px}
  .door-alt p{margin-bottom:10px}
  /* Кнопки в один ряд, а не в колонку: на 375px они занимают 317px из 327 доступных, и
     это единственные ~54px, которых не хватало, чтобы «ещё не подключены» целиком попало
     на экран. На экранах уже — flex-wrap из базового правила сам переносит их на вторую
     строку, поэтому магического второго порога тут нет. */
  .door-alt .door-alt-actions{gap:8px}
  .door-alt .btn{min-height:44px;padding:11px 14px;font-size:.9rem}
}

/* Шапка на этой странице урезанная: логотип ведёт на лендинг, лишней навигации нет —
   человек пришёл войти, а не читать. */
.door-head{display:flex;align-items:center;justify-content:space-between;height:70px;gap:16px}
.door-head .back{font-weight:600;font-size:.95rem;color:var(--muted);
  display:inline-flex;align-items:center;gap:7px;transition:color .15s}
.door-head .back:hover{color:var(--teal)}
.door-head .back svg{width:16px;height:16px;stroke:currentColor;fill:none;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* Заглушка несуществующего поддомена: тот же макет, вместо поля — введённый хост. */
.door-host{
  display:inline-block;max-width:100%;overflow-wrap:anywhere;
  font-weight:700;color:var(--text);background:var(--bg-alt);
  border:1px solid var(--line);border-radius:10px;padding:11px 16px;margin-bottom:22px;
}