/* Экран «Вход» — из макета «Клуб - Вход». Числа те же, без округлений.

   Отдельным файлом, а не разделом в screens.css: экраны переносятся
   параллельно, и общий файл был бы одной точкой столкновения на несколько рук.
   Классы с собственным префиксом `lg`, общее берётся из base.css (`cs-*`) и
   anim.css.

   ОДНА РАЗМЕТКА НА ТРИ СЕКЦИИ. Маршрута у входа три (`/login`, `/login/code`,
   `/login/nick`), а макет один; экран собирает его в трёх состояниях и пишет в
   три разные секции — правила поэтому не привязаны к `#s-login` и работают во
   всех трёх (см. src/screens/site/login.js).

   ЦВЕТ. Литерал вина из макета (rgba(232,83,107,.3) в обложке, .45 на кромке
   набранной ячейки) здесь не стоит: клуб красится темой, и у «Льда» обложка
   обязана быть голубой. Доли от акцента считает `color-mix` — тем же приёмом,
   каким в tokens.css считается `--accDeep`, а в screens-bar.css — кромка
   выбранной плитки.

   СВОЙ КЕЙФРЕЙМ ОДИН, И ЭТО ПРОВЕРЕНО ЧИСЛАМИ.
     `lgFloat` — макетный `floaty` качает знак клуба ЧИСТО ВЕРТИКАЛЬНО, на 5px.
       Общий `floaty` в anim.css взят с карты участника: там −6px и поворот на
       ±1.2°, и на пунктирном квадрате 88×88 поворот виден сразу. (Ровно та же
       вертикаль уже лежит в screens-about.css под именем `abFloat` — но это
       кейфрейм чужого экрана, и держаться за него значит связать два файла,
       которые правят разные руки.)
     `glare` совпал: 90px блика по обложке — та же полоса, что в
       screens-stats.css и screens-bonuses.css, и время из макета (7s) стоит в
       правиле, а не в кейфрейме. */

/* ══ ОБЛОЖКА ══════════════════════════════════════════════════════════════ */

.lgCover {
  position: relative;
  height: 392px;
  overflow: hidden;
  background: linear-gradient(160deg, color-mix(in srgb, var(--acc) 30%, transparent), var(--bg2) 62%);
}

/* Блик раз в семь секунд. Живёт в неподвижном каркасе экрана: перерисовка
   иначе уводила бы его обратно за край (src/screens/site/lib.js). */
.lgGlare {
  position: absolute; top: 0; bottom: 0;
  width: 90px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .12), transparent);
  animation: glare 7s ease-in-out infinite;
}

/* Масть подрезана углом обложки — это фон, а не значок. Чёрная прозрачность, а
   не акцент: она должна темнить обложку, а не спорить с ней цветом. */
.lgSuit {
  position: absolute; right: -30px; bottom: -60px;
  font-size: 220px; line-height: 1;
  color: rgba(0, 0, 0, .18);
  pointer-events: none;
  user-select: none; -webkit-user-select: none;
}

.lgCoverIn { position: relative; padding: 72px 22px 0; }

/* Пунктирная рамка-заглушка остаётся ТОЛЬКО для клуба, который знак ещё не
   загрузил: пунктир значит «сюда ещё не положили картинку», и поверх
   положенной он читался бы как ошибка. */
.lgLogo {
  display: inline-flex;
  flex-direction: column; align-items: center; justify-content: center;
  gap: 4px;
  width: 88px; height: 88px;
  border-radius: 26px;
  border: 1.5px dashed rgba(255, 255, 255, .4);
  background: rgba(0, 0, 0, .22);
  color: rgba(255, 255, 255, .7);
  animation: lgFloat 6s ease-in-out infinite;
}
.lgLogo i { font-size: 22px; }
.lgLogoCap { font-size: 8.5px; font-weight: 800; letter-spacing: .7px; text-transform: uppercase; }
.lgLogo.has {
  border-style: solid;
  border-color: var(--line);
  background-size: cover;
  background-position: center;
}

.lgName {
  margin-top: 16px;
  font-family: var(--f-head);
  font-size: 30px; font-weight: 800; letter-spacing: -1.2px; line-height: 1.05;
  color: #fff;
}

/* Город и адрес. Года основания у клуба нет — развилка названа в шапке
   src/screens/site/login.js. Строка одна: у живого клуба адрес бывает длинным,
   и перенос сдвинул бы всё, что стоит под обложкой на фиксированной высоте. */
.lgWhere { margin-top: 10px; font-size: 11.5px; color: rgba(255, 255, 255, .72); }

/* ══ ФОРМА ════════════════════════════════════════════════════════════════
   Низ у макета не задан — там страница кончается рамкой телефона. У нас это
   конец документа, и последняя кнопка не должна упираться в полосу «домой»:
   24px воздуха плюс безопасная зона. Оболочки на шагах входа нет вовсе
   (`NO_NAV` в ui/shell.js), поэтому места под таблетку навигации не нужно. */
.lgForm { padding: 24px 22px calc(24px + env(safe-area-inset-bottom, 0px)); }

.lgH {
  font-family: var(--f-head);
  font-size: 19px; font-weight: 800; letter-spacing: -.5px;
  color: #fff;
}
.lgLead {
  margin-top: 8px;
  font-size: 13px; font-weight: 650; line-height: 1.5;
  color: rgba(255, 255, 255, .62);
}

/* ── строка поля ──────────────────────────────────────────────────────────
   Одна и та же и под номер, и под подтверждённый номер, и под ник. */
.lgRow {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  margin-top: 16px;
  padding: 13px 15px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--line);
  text-align: left;
  transition: border-color .25s ease;
}
/* Строки нет, пока нет номера: после перезагрузки страницы черновик пуст, а
   пустая рамка с одним «+7» выглядит поломкой. */
.lgRow.none { display: none; }

.lgPre { font-size: 15px; font-weight: 700; color: rgba(255, 255, 255, .7); }
.lgSep { width: 1px; height: 20px; flex: none; background: var(--line); }

.lgIn {
  flex: 1; min-width: 0;
  padding: 0;
  background: none; border: 0; outline: none;
  font-size: 15px; font-weight: 700; letter-spacing: .5px;
  color: #fff;
}
.lgIn::placeholder { color: rgba(255, 255, 255, .3); }
/* Ник — не число: моноширинный шрифт и разрядка ему не идут (base.css). */
.lgIn.body { font-family: var(--f-body); font-weight: 800; letter-spacing: 0; }

/* Галочка «номер похож на настоящий». Зелёная — цвет состояния, темой он не
   красится намеренно (tokens.css): «всё в порядке» значит одно во всех клубах. */
.lgOk { flex: none; font-size: 19px; color: var(--ok); opacity: 0; transition: opacity .25s ease; }
.lgRow.ok { border-color: rgba(99, 214, 159, .45); }
.lgRow.ok .lgOk { opacity: 1; }
/* Отказ сервера красит кромку поля, о котором он. */
.lgRow.bad { border-color: var(--acc); }

/* «Изменить» у номера на шаге кода: в макете этого нет — там один экран, и
   возвращаться в нём некуда (см. шапку src/screens/site/login.js). */
.lgEdit { flex: none; font-family: var(--f-mono); font-size: 11px; font-weight: 700; color: var(--acc); }

/* ── код ──────────────────────────────────────────────────────────────────
   Ячейки — картинка набранного; настоящее поле лежит поверх них невидимым,
   чтобы человеку остались подстановка кода из СМС, backspace и вставка. */
.lgCode { position: relative; display: flex; gap: 8px; margin-top: 10px; }
.lgCell {
  display: flex; align-items: center; justify-content: center;
  flex: 1;
  height: 54px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--line);
  font-size: 22px; font-weight: 700;
  color: #fff;
  transition: border-color .25s ease;
}
.lgCell.on { border-color: color-mix(in srgb, var(--acc) 45%, transparent); }
/* `opacity`, а не `display:none` и не `visibility`: спрятанное этими двумя
   поле браузер не фокусирует, а значит не откроет клавиатуру и не предложит
   код из СМС. Размер шрифта тут ни на что не влияет — поля не видно, — и
   поэтому он ровно 16px: меньше 16 iOS зумит страницу на фокусе. */
.lgCodeIn {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  padding: 0;
  opacity: 0;
  background: none; border: 0; outline: none;
  font-size: 16px;
}

/* Подпись под ячейками: «код отправлен · повторить через 0:24». */
.lgHint { margin-top: 9px; font-size: 11px; color: rgba(255, 255, 255, .5); }
.lgHint:empty { display: none; }
.lgHintBtn { font-family: inherit; font-size: 11px; font-weight: 700; color: var(--acc); }

/* Код в dev прямо на экране: СМС-провайдера у площадки нет. На проде с
   провайдером строки не будет вовсе. */
.lgDev {
  margin-top: 9px;
  font-size: 11px; font-weight: 650; line-height: 1.45;
  color: rgba(255, 255, 255, .5);
}
.lgDev:empty { display: none; }
.lgDev b { font-family: var(--f-mono); letter-spacing: 2px; color: var(--acc); }

/* Отказ сервера словами. В макете такой строки нет — там нечему отказывать. */
.lgErr {
  margin-top: 9px;
  font-size: 11.5px; font-weight: 700; line-height: 1.45;
  color: var(--acc);
}
.lgErr:empty { display: none; }

/* ── кнопка ───────────────────────────────────────────────────────────────
   Пока номер не набран — приглушена, но НАЖИМАЕТСЯ: на нажатие пустого поля
   действие отвечает словами («Укажите номер телефона»), и это полезнее
   мёртвой кнопки, которая молчит о причине. */
.lgBtn {
  display: flex; align-items: center; justify-content: center;
  width: 100%;
  margin-top: 12px;
  padding: 15px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .08);
  color: rgba(255, 255, 255, .45);
  font-size: 14.5px; font-weight: 800;
  transition: background .25s ease, color .25s ease;
}
.lgBtn.on { background: var(--acc); color: var(--accInk); }

/* ── другой способ войти ─────────────────────────────────────────────────── */
.lgOr { display: flex; align-items: center; gap: 10px; margin: 16px 0; }
.lgOrLine { flex: 1; height: 1px; background: var(--line); }
.lgOrCap { font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase; color: rgba(255, 255, 255, .4); }

.lgTg {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%;
  padding: 13px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--line);
  color: #fff;
  font-size: 13.5px; font-weight: 800;
}
.lgTg i { font-size: 18px; color: var(--acc); }
/* Входа через Telegram у нас нет ни на сервере, ни в протоколе. Кнопка стоит
   как в макете, но приглушена и не нажимается, а строка под ней объясняет, что
   это не поломка. Живая на вид кнопка, которая ничего не открывает, — ложь
   интерфейса, даже если она красиво стоит в ряд. */
.lgTg[disabled] { opacity: .45; cursor: default; }
.lgTgNote {
  margin-top: 9px;
  font-size: 11px; font-weight: 650; line-height: 1.45;
  color: rgba(255, 255, 255, .5);
}

.lgGuest {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%;
  margin-top: 9px;
  padding: 12px;
  background: none;
  color: rgba(255, 255, 255, .6);
  font-size: 13px; font-weight: 750;
}
.lgGuest i { font-size: 16px; }

/* ══ КЕЙФРЕЙМЫ ════════════════════════════════════════════════════════════ */

/* Знак клуба висит, а не качается: чистая вертикаль на 5px (см. шапку файла). */
@keyframes lgFloat { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-5px) } }

/* ══ iOS ══════════════════════════════════════════════════════════════════
   Safari на телефоне увеличивает страницу, когда фокус уходит в поле мельче
   16px, и обратно уже не отъезжает — экран входа так и остаётся увеличенным на
   всю оставшуюся сессию. Число макета (15px) остаётся везде, где это
   безопасно; на iOS поле поднимается до 16px. Пиксель разницы виден только
   рядом с макетом, зум ломает весь экран. */
@supports (-webkit-touch-callout: none) {
  .lgIn { font-size: 16px; }
}

/* ══ ШИРОКИЙ ЭКРАН ════════════════════════════════════════════════════════
   Макета десктопа нет (styles/site/desktop.css), правило одно — колонка.
   Обложка при этом остаётся во всю ширину: это фон страницы, и колонкой она
   превратилась бы в плитку посреди пустоты. */
@media (min-width: 768px) {
  .lgCoverIn, .lgForm {
    max-width: var(--cs-col);
    margin-left: auto;
    margin-right: auto;
  }
}

/* ══ МЕНЬШЕ ДВИЖЕНИЯ ══════════════════════════════════════════════════════
   Блок из макета. Он здесь, а не в общем anim.css, потому что у сайта клуба
   такого правила пока нет вовсе — каталожный base.css на клубном имени не
   подключается (styles/site/tokens.css). Завести его на весь сайт стоит
   отдельной строкой, и это не работа этого экрана. */
@media (prefers-reduced-motion: reduce) {
  .lgWrap * {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}