/* ═══════════════════════════════════════════════════════════════════════
   ВХОД И РЕГИСТРАЦИЯ — модалки лендинга (разметку строит js/landing.js).

   Почему отдельный файл, а не Tailwind, как было. Модалка — ПЕРВАЯ точка
   конверсии: человек решился и нажал. Старая разметка была свёрстана
   утилитами Tailwind с терракотовой темой — на петролевой странице она
   читалась бы как чужая вставка. С 28.07.2026 ни Tailwind, ни та тема
   (js/tw-theme.js), ни /css/app.css в проекте не живут вовсе.

   Словарь тот же, что у страницы: одна тень (кольцо), граница 1px,
   радиусы из словаря, акцент только на фокусе и ссылке.
   ═══════════════════════════════════════════════════════════════════════ */

.dm-modal-backdrop{
  position:fixed; inset:0; z-index:100;
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  background:rgba(23,23,23,.38);
  overflow-y:auto;
}
.dm-modal{
  width:100%; max-width:440px;
  padding:28px;
  border:1px solid var(--border); border-radius:var(--r-xl);
  background:var(--bg);
  box-shadow:var(--shadow-ring);
}
.dm-modal h2{ font-size:22px; line-height:1.2; letter-spacing:-.02em; margin-bottom:6px; }
.dm-modal .sub{ font-size:15px; line-height:1.55; color:var(--text-muted); margin-bottom:22px; }

.dm-field{ display:block; margin-bottom:16px; }
/* Модалка без подзаголовка (вход, 31.07.2026): воздух до первого поля давал
   .sub своим margin-bottom. Убрали подзаголовок — поле прижалось к заголовку
   на 6px, поэтому зазор добирается здесь. */
.dm-modal h2 + .dm-field{ margin-top:22px; }
.dm-field > .label{ display:block; margin-bottom:7px; }
.dm-field > .label .opt{ text-transform:none; letter-spacing:0; color:var(--text-faint); }
.dm-modal input[type=text],
.dm-modal input[type=email],
.dm-modal input[type=password]{
  width:100%; height:44px; padding:0 12px;
  border:1px solid var(--border); border-radius:var(--r-sm);
  background:var(--bg); color:var(--text);
  font-family:var(--font-body); font-size:15px;
  transition:border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.dm-modal input:focus{ outline:0; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.dm-hint{ margin-top:7px; font-size:12.5px; line-height:1.5; color:var(--text-faint); }

/* Согласие с офертой: галочка обязана быть настоящим checkbox — подмена
   картинкой ломает клавиатуру, а это юридически значимое действие. */
.dm-consent{ display:flex; align-items:flex-start; gap:10px; margin:20px 0 0; font-size:13.5px; line-height:1.5; color:var(--text-muted); }
.dm-consent input{ margin:2px 0 0; width:16px; height:16px; accent-color:var(--accent); flex:none; }

.dm-error{
  display:none; margin-top:16px; padding:11px 13px;
  border:1px solid var(--bad); border-radius:var(--r-sm);
  background:var(--bad-soft);
  font-size:14px; line-height:1.45; color:var(--bad);
}
.dm-error.on{ display:block; }

.dm-actions{ display:flex; align-items:center; justify-content:flex-end; gap:8px; margin-top:24px; }
.dm-actions .spread{ margin-right:auto; font-size:14px; }
.dm-modal .btn-primary{ height:44px; padding:0 20px; font-size:15px; }
.dm-modal .btn-primary[disabled]{ opacity:.55; cursor:default; }
/* Отмена — текстовая кнопка: вторая залитая рядом с первой запрещена локом. */
.dm-quiet{
  height:44px; padding:0 14px;
  border:0; background:none; cursor:pointer;
  font-family:var(--font-body); font-size:15px; color:var(--text-muted);
  border-radius:var(--r-md);
  transition:color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.dm-quiet:hover{ color:var(--text); background:var(--surface); }

.dm-mailto{
  display:flex; align-items:center; justify-content:center;
  height:46px; margin-top:4px;
  border:1px solid var(--text); border-radius:var(--r-sm);
  background:var(--text); color:var(--text-invert);
  font-size:15px; font-weight:500;
  transition:background-color var(--dur-fast) var(--ease);
}
.dm-mailto:hover{ background:#000; color:var(--text-invert); }

@media (max-width:640px){
  .dm-modal-backdrop{ padding:16px; align-items:flex-start; }
  .dm-modal{ padding:22px 18px; }
  .dm-actions{ flex-wrap:wrap; }
  .dm-actions .btn-primary{ flex:1 0 auto; }
}