/*
 * Экраны входа, регистрации и восстановления пароля (А1–А6) — по AuthLogin, AuthRegister,
 * AuthRecover и AuthBrand прототипа: слева коралловая панель (7 колонок), справа карточка формы (5).
 * Значения — из tokens.css; числа px — только геометрия иллюстраций (и минимальная высота их области).
 */
.auth-page {
  min-height: 100vh; padding: var(--space-4);
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-6);
}

/* ---------- Коралловая панель ---------- */
.auth-brand {
  grid-column: span 7; min-height: calc(100vh - 2 * var(--space-4));
  padding: var(--space-6) var(--space-14) var(--space-12);
  display: flex; flex-direction: column; gap: var(--space-10); color: var(--color-text);
}
.auth-brand .logo { align-self: flex-start; }
.auth-brand__head { display: flex; flex-direction: column; gap: var(--space-6); }
.auth-brand__title {
  font-family: var(--font-display); font-size: var(--font-size-display-l); line-height: var(--line-height-display-l);
  font-weight: var(--font-weight-display-l); text-transform: uppercase; color: var(--color-text-on-brand); text-wrap: balance;
}
.auth-brand .brand-list { padding-top: var(--space-7); border-top: var(--border-width-field) solid var(--brand-divider); }

/* Иллюстрация панели (AuthBrand): две плиты, жёлтый стикер с иконкой экрана, письмо, «✓ 14:00» */
.illu--auth { flex: 1; min-height: 260px; display: grid; place-items: center; }
.illu--auth .illu__plate {
  width: 200px; height: 200px; border: var(--border-width-ink) solid var(--color-border-ink); border-radius: var(--radius-block);
}
.illu--auth .illu__plate--back { position: absolute; transform: translate(16px, 18px) var(--illu-plate); background: var(--color-tag-bg); box-shadow: -14px 14px 0 var(--color-border-ink); }
.illu--auth .illu__plate--top {
  position: relative; transform: var(--illu-plate); background: var(--color-bg-surface);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2-5); padding: var(--space-3-5);
}
.illu--auth .illu__sticker--main { top: 8px; left: calc(50% - 200px); width: 96px; height: 96px; border-radius: var(--radius-modal); background: var(--color-accent); box-shadow: var(--shadow-highlight); transform: rotate(-8deg); }
.illu--auth .illu__sticker--main .icon { --icon-size: 44px; }
.illu--auth .illu__sticker--mail { top: 24px; right: calc(50% - 190px); width: 72px; height: 72px; border-radius: var(--radius-pill); background: var(--color-bg-surface); }
.illu--auth .illu__sticker--mail .icon { --icon-size: 32px; }
.illu--auth .illu__sticker--time { bottom: 16px; right: calc(50% - 210px); padding: var(--space-2-5) var(--space-3-5); }

/* ---------- Колонка с формой ---------- */
.auth-main {
  grid-column: span 5; display: flex; flex-direction: column; justify-content: center; gap: var(--space-4);
  padding: var(--space-6) var(--space-14) var(--space-6) 0;
}
.back-link {
  align-self: flex-start; display: inline-flex; align-items: center; gap: var(--space-1-5); min-height: var(--control-height-m);
  font-size: var(--font-size-label); line-height: var(--line-height-single); font-weight: var(--font-weight-label);
  text-decoration: none; color: var(--color-text-link);
}
.back-link--center { align-self: center; }

.auth-card {
  display: flex; flex-direction: column; gap: var(--space-6); padding: var(--space-8);
  background: var(--color-bg-surface); border: var(--border-width-field) solid var(--color-border); border-radius: var(--radius-modal);
}
.auth-card__head { display: flex; flex-direction: column; gap: var(--space-2); }
.auth-card__head--loose { gap: var(--space-3); }
.auth-card__title {
  font-family: var(--font-display); font-size: var(--font-size-h1); line-height: var(--line-height-h1);
  font-weight: var(--font-weight-h1); text-transform: uppercase; overflow-wrap: anywhere;
}
.auth-card__title:focus { outline: none; }
.auth-card__lead { font-size: var(--font-size-body-m); line-height: var(--line-height-body-m); color: var(--color-text-description); text-wrap: pretty; }
.auth-card__lead--strong { color: var(--color-text); }
.auth-card__fields { display: flex; flex-direction: column; gap: var(--space-4); }
.auth-card__actions { display: flex; flex-direction: column; gap: var(--space-2-5); }
.auth-card hr { margin: 0; border: 0; border-top: var(--border-width-field) solid var(--color-border); }
.auth-switch { text-align: center; font-size: var(--font-size-body-s); line-height: var(--line-height-body-s); color: var(--color-text-secondary); }
.auth-switch a { font-weight: var(--font-weight-label); }
.forgot-link { align-self: flex-start; display: inline-flex; align-items: center; min-height: var(--control-height-m); font-size: var(--font-size-label); line-height: var(--line-height-label); font-weight: var(--font-weight-label); }
.form-alert:empty { display: none; }

/* «или» между формой и «Войти с Яндекс ID» (решение 2026-10-23): линии — как hr карточки */
.auth-or {
  display: flex; align-items: center; gap: var(--space-3);
  font-size: var(--font-size-caption); line-height: var(--line-height-caption); color: var(--color-text-secondary);
}
.auth-or::before, .auth-or::after { content: ''; flex: 1; border-top: var(--border-width-field) solid var(--color-border); }
/*
 * «Войти с Яндекс ID» (А1, А2; решение 2026-10-25). Сама кнопка — по требованиям Яндекса к кнопке входа, а не по tokens.css:
 * цвет, обводка, текст, логотип и отступы внутри — как у кнопки Яндекс ID (конструктор autofill.yandex.ru/suggest/button/constructor,
 * классы yaPersonalButton): тип additional, тема light, размер l. Менять разрешено только тип, тему, скругление и размер
 * (с пропорциями), поэтому здесь числа Яндекса. Наше — скругление (как у кнопок проекта) и всё вокруг кнопки:
 * ширина колонки, отступы до соседей (gap карточки), кольцо фокуса.
 * Справа — пустое место аватара (24px): у Яндекса там аватар вошедшего в Яндекс пользователя, а без их скрипта он неизвестен;
 * место держит текст по центру, как у оригинала.
 */
.ya-id-btn {
  box-sizing: border-box; width: 100%; height: 48px; min-width: 176px; padding: 11px 13px;
  display: flex; justify-content: space-between; align-items: center;
  font-family: "YS Text", "Helvetica Neue", Arial, sans-serif; font-size: 14px; line-height: 16px;
  color: #000; background-color: #fff; border: 1px solid #000; border-radius: var(--radius-pill);
  text-decoration: none; cursor: pointer; transition: opacity 0.6s, background-color 0.3s;
}
.ya-id-btn:hover, .ya-id-btn:visited { color: #000; }
.ya-id-btn:focus-visible { outline-offset: var(--focus-ring-offset-button); }
.ya-id-btn__logo {
  flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%;
  background: center / contain no-repeat url("data:image/svg+xml,%3Csvg width='44' height='44' viewBox='0 0 44 44' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='44' height='44' fill='%23FC3F1D'/%3E%3Cpath d='M24.7407 33.9778H29.0889V9.04443H22.7592C16.3929 9.04443 13.0538 12.303 13.0538 17.1176C13.0538 21.2731 15.2187 23.6163 19.0532 26.1609L21.3832 27.6987L18.3927 25.1907L12.4667 33.9778H17.1818L23.5115 24.5317L21.3098 23.0671C18.6496 21.2731 17.3469 19.8818 17.3469 16.8613C17.3469 14.2068 19.2183 12.4128 22.7776 12.4128H24.7223V33.9778H24.7407Z' fill='white'/%3E%3C/svg%3E");
}
.ya-id-btn__text { margin-left: 16px; overflow: hidden; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
.ya-id-btn__slot { flex-shrink: 0; width: 24px; height: 24px; margin-left: 16px; }

/* Шаг «телефон и согласие»: почта и имя от Яндекса — только чтение */
.auth-facts { display: flex; flex-direction: column; gap: var(--space-1); font-size: var(--font-size-body-m); line-height: var(--line-height-body-m); }
.auth-facts b { overflow-wrap: anywhere; }

/* Заглушка карточки, пока проверяется ссылка из письма */
.auth-card--loading .skeleton--title { height: var(--control-height-field); width: 70%; border-radius: var(--radius-field); }
.auth-card--loading .skeleton--field { height: var(--control-height-field); border-radius: var(--radius-field); }

/* Иллюстрации А4 «Проверьте почту» и А6 «Ссылка устарела» */
.auth-art { position: relative; }
.auth-art--sent { width: 120px; height: 104px; }
.auth-art--expired { width: 140px; height: 112px; }
.auth-art__tile {
  position: absolute; width: 104px; height: 88px; border-radius: var(--radius-panel);
  border: var(--border-width-ink) solid var(--color-border-ink); box-shadow: var(--shadow-raised);
  display: grid; place-items: center; transform: rotate(-6deg);
}
.auth-art--sent .auth-art__tile { left: 0; top: 8px; background: var(--color-accent); }
.auth-art--sent .auth-art__tile .icon { --icon-size: 44px; }
.auth-art--expired .auth-art__tile {
  left: 8px; top: 16px; color: var(--color-text-description);
  background: repeating-linear-gradient(135deg, var(--color-bg-muted) 0 6px, var(--color-border) 6px 12px);
}
.auth-art--expired .auth-art__tile .icon { --icon-size: 40px; }
.auth-art__badge {
  position: absolute; right: 0; top: 0; border-radius: var(--radius-pill);
  border: var(--border-width-ink) solid var(--color-border-ink); display: grid; place-items: center;
}
.auth-art--sent .auth-art__badge { width: 40px; height: 40px; background: var(--color-success); color: var(--color-text-on-brand); }
.auth-art--expired .auth-art__badge { width: 56px; height: 56px; background: var(--color-bg-surface); box-shadow: var(--shadow-raised); }

/* ---------- Планшет и телефон: панель сверху, только логотип и заголовок ---------- */
@media (max-width: 1023px) {
  .auth-page { grid-template-columns: 1fr; gap: var(--space-4); }
  .auth-brand { grid-column: 1; min-height: 0; padding: var(--space-6); gap: var(--space-6); border-radius: var(--radius-modal); }
  .auth-brand .illu, .auth-brand .brand-list { display: none; }
  .auth-main { grid-column: 1; padding: 0; width: 100%; max-width: calc(var(--container-max) / 2); margin: 0 auto; }
}
@media (max-width: 767px) {
  .auth-page { padding: var(--space-2); }
  .auth-brand { padding: var(--space-4); }
  /* display-l (48px на телефоне) не помещает «ЗАПИСЫВАЙТЕСЬ» в 375px — здесь размер h1 */
  .auth-brand__title { font-size: var(--font-size-h1); line-height: var(--line-height-h1); }
  .auth-card { padding: var(--space-5); }
}