/* ============================================================
   ORTA — веб-магазин: стили области B4 — вход, код из SMS, регистрация, восстановление пароля, юрдокументы.

   Владелец — исполнитель области (файл заведён каркасом пустым).
   Подключается шаблонами области: {% block extra_css %}.
   Токены и общие компоненты (.btn, .field, .card, .pill, .stepper,
   .empty, .chip, .grid-products) — в base.css; здесь только своё.
   Цвет — только var(--…), без литералов; обе темы берутся из токенов.

   Образец — экраны входа приложения (mobile/lib/features/auth/ui):
   колонка формы на бумаге, знак на песочной плашке, крупный Onest в
   заголовке, переключатель способа тоном, а не рамкой. Кегли — в rem,
   высоты — min-height: крупный шрифт браузера растит форму, а не
   режет её.
   ============================================================ */

/* ---------- Каркас ----------
   До 768 — колонка на бумаге; с 768 — карточкой по центру; с 1024 —
   хвойная панель бренда слева и карточка формы справа. */

/* Колонка — minmax(0, 1fr), а не auto: иначе при крупном шрифте самое
   длинное слово («Восстановление») распирало бы колонку шире экрана. */
.auth {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  padding-block: 4px 16px;
}
@media (min-width: 1024px) {
  .auth {
    grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
    gap: 40px;
    align-items: stretch;
    padding-block: 16px 24px;
  }
}

.auth__aside { display: none; }
@media (min-width: 1024px) {
  .auth__aside {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 12px;
    min-height: 28rem;
    padding: 40px;
    overflow: hidden;
    border-radius: var(--r-banner);
    background: linear-gradient(135deg, var(--banner-from), var(--banner-to));
    color: var(--on-pine-muted);
  }
}
.auth__ornament {
  position: absolute;
  top: -72px;
  right: -72px;
  width: 340px;
  height: 340px;
  color: var(--on-pine);
  opacity: var(--banner-ornament);
}
.auth__slogan {
  position: relative;
  color: var(--slogan-on-pine);
  font-family: var(--font-head);
  font-size: 2.25rem;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.1;
}
.auth__lead {
  position: relative;
  max-width: 22em;
  font-size: 1.0625rem;
}

.auth__main {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  align-content: start;
  width: 100%;
  max-width: 480px;
  min-width: 0;
  margin-inline: auto;
}
@media (min-width: 768px) {
  .auth__main {
    max-width: 520px;
    padding: 32px;
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    background: var(--card-bg);
    box-shadow: var(--card-shadow);
  }
}
@media (min-width: 1024px) {
  .auth__main { max-width: none; padding: 40px; }
}

/* ---------- Знак над входом (AuthMark) ---------- */

.auth-mark {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  color: var(--brand-mark);
}
.auth-mark__plate {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 18px;
  background: var(--sand);
}
.auth-mark__sign { width: 40px; height: 40px; }
.auth-mark__text { display: grid; gap: 8px; min-width: 0; }
.auth-mark__word { width: 80px; height: 15px; }

/* ---------- Заголовок (AuthHeader) ---------- */

.auth-head { display: grid; gap: 8px; }
/* Длинное слово заголовка при крупном шрифте переносится по слогам
   (lang="ru" у страницы), а где словаря нет — где угодно, но не
   вылезает за экран. Так же — надзаголовок вразрядку. */
.auth-head__title,
.auth .overline {
  overflow-wrap: anywhere;
  -webkit-hyphens: auto;
  hyphens: auto;
}
.auth-head__title {
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.15;
}
.auth-head__subtitle { color: var(--ink-2); font-size: .9375rem; }
@media (min-width: 1024px) {
  .auth-head__title { font-size: 2rem; }
}

/* ---------- «По номеру / По почте» (AuthMethodSwitch) ----------
   Дорожка тоном, выбранная половина — на светлой вставке (днём белая,
   ночью ступенью светлее дорожки). Высота от 48, как в приложении. */

.auth-switch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  border-radius: 16px;
  background: var(--surface-alt);
}
.auth-switch__option {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  min-width: 0;
  padding: 6px 12px;
  border-radius: 12px;
  color: var(--ink-2);
  font-family: var(--font-head);
  font-size: .9375rem;
  font-weight: 500;
  text-align: center;
  text-decoration: none;
}
@media (hover: hover) {
  .auth-switch__option:hover { color: var(--ink); }
}
/* Касание — тоном дорожки поверх: наведения на телефоне нет. */
.auth-switch__option:active { background: var(--surface-high); color: var(--ink); }
.auth-switch__option[aria-current="page"] {
  background: var(--stepper-inset);
  color: var(--ink);
  font-weight: 600;
  box-shadow: 0 0 0 1px var(--line);
}
/* Высокий контраст Windows: фон и тень вставки браузер выбрасывает, и
   выбранный способ отличался бы одним весом шрифта. Рамка системным
   цветом текста — видна в любой схеме. */
@media (forced-colors: active) {
  .auth-switch__option[aria-current="page"] { outline: 2px solid CanvasText; outline-offset: -2px; }
}

/* ---------- Поля ---------- */

.auth-form { gap: 16px; }

/* «+7» — часть поля, а не текста. Отступ в em: при крупном шрифте
   префикс растёт вместе с цифрами и не наезжает на них. Селектор с
   :not() — чтобы перебить правило полей base.css той же формы. */
.phone-input { position: relative; }
.phone-input__prefix {
  position: absolute;
  inset-block: 0;
  left: 14px;
  display: flex;
  align-items: center;
  color: var(--ink);
  font-family: var(--font-head);
  font-size: 1.125rem;
  font-weight: 600;
  pointer-events: none;
}
.field .phone-input input:not([type="checkbox"]):not([type="radio"]) {
  padding-left: 2.6em;
  font-size: 1.125rem;
  letter-spacing: .02em;
}

/* Код: крупные цифры вразрядку по центру, как CodeField приложения. */
.field .code-input:not([type="checkbox"]):not([type="radio"]) {
  min-height: 56px;
  font-family: var(--font-head);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: .4em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.code-input::placeholder { letter-spacing: normal; }

/* Имя и фамилия в ряд: фамилия необязательна, и отдельной строкой она
   удлиняла бы форму ради поля, которое чаще всего пропускают. Ряд — от
   480: уже двух колонок поля стали бы уже подписей. */
.auth-pair { display: grid; gap: 16px; }
@media (min-width: 480px) {
  .auth-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* «Показать пароль» слева, «Забыли пароль?» справа; при крупном шрифте
   переносятся друг под друга, а не наезжают. */
.auth-row-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 16px;
  margin-top: -8px;
}
.auth-row-links > :last-child { margin-left: auto; }

/* ---------- Отметка «Я принимаю …» ----------
   Плашка тоном: единственное место формы, где человек что-то
   подписывает, не должно теряться между полями. */

.consent {
  display: grid;
  gap: 6px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-alt);
}
.consent:has(input:checked) { border-color: var(--accent); }
.consent.is-invalid { border-color: var(--danger); }
.consent .check { min-height: 0; font-size: .875rem; }
.consent .link { overflow-wrap: anywhere; }

/* ---------- Отказ (AuthError) ---------- */

.auth-error { display: grid; gap: 4px; }
.auth-error__message { font-weight: 600; }
.auth-error__hint { font-size: .875rem; }
.auth-error__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0 20px;
}
.auth-error__actions a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
}

/* ---------- «или», юридическая строка, ссылки ---------- */

.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--ink-3);
  font-size: .8125rem;
  text-align: center;
}
.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1 1 0;
  height: 1px;
  background: var(--line);
}

/* «Войти через Google / Apple»: столбик кнопок между «или» и регистрацией. */
.auth-social {
  display: grid;
  gap: 12px;
}

.auth-legal {
  color: var(--ink-3);
  font-size: .8125rem;
  line-height: 1.5;
  text-align: center;
}

.auth-links,
.auth-resend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0 24px;
  text-align: center;
}
.auth-resend__wait {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--tap);
  color: var(--ink-3);
  font-size: .875rem;
}
.auth-resend__wait .icon { width: 16px; height: 16px; }

.auth-actions { display: grid; gap: 10px; }

/* ---------- Шаги восстановления ----------
   Три чёрточки: пройденные и текущая — заливкой акцента. Только рисунок. */

.auth-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.auth-steps__bar {
  height: 4px;
  border-radius: 2px;
  background: var(--surface-high);
}
.auth-steps__bar.is-done { background: var(--accent-fill); }

/* ---------- Юридический документ ----------
   Колонка чтения ~70 знаков; длинные реквизиты и адреса переносятся
   где угодно, а не распирают страницу на 360. */

.legal-doc {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  align-content: start;
}
.legal-doc > * { max-width: 780px; }
.legal-doc__title,
.legal-doc .breadcrumbs {
  overflow-wrap: anywhere;
  -webkit-hyphens: auto;
  hyphens: auto;
}
.legal-doc__summary { display: grid; gap: 8px; }
.legal-doc__summary p { color: var(--ink-2); }
.legal-doc__body {
  color: var(--ink-2);
  font-size: 1rem;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.legal-doc__body > :first-child { margin-top: 0; }
.legal-doc__body h2 {
  margin: 36px 0 12px;
  font-size: 1.375rem;
  font-weight: 600;
}
.legal-doc__body h3 {
  margin: 24px 0 10px;
  font-size: 1.125rem;
  font-weight: 600;
}
.legal-doc__body h4 {
  margin: 20px 0 8px;
  font-size: 1rem;
  font-weight: 600;
}
.legal-doc__body p { margin-bottom: 12px; }
.legal-doc__body strong { color: var(--ink); font-weight: 600; }
.legal-doc__body ul {
  margin: 0 0 14px;
  padding-left: 22px;
  list-style: disc;
}
.legal-doc__body li { margin-bottom: 6px; }
.legal-doc__body li::marker { color: var(--ink-3); }

/* Печать документа: без панели бренда; чёрное на белом даёт base.css. */
@media print {
  .auth__aside { display: none !important; }
}