/* Оформление трёх страниц входа: login.html, verify.html, reset.html.

   ЗАЧЕМ ЭТОТ ФАЙЛ. Раньше каждая из трёх держала оформление в собственном
   <style>, и шестнадцать правил стояли в них ДОСЛОВНО одинаково. Любая
   правка означала три правки: за одну сессию так пришлось четырежды —
   размер кнопок, киматический рисунок, значок вкладки, предпросмотр
   ссылки. Каждый такой заход — шанс забыть один файл, и разошлись бы они
   молча: страницы редко смотрят рядом.

   У страниц не осталось ни одного правила: собственный <style> у них теперь
   пуст вовсе. Различия между ними живут ЗДЕСЬ и различаются классом на
   <body> — page-login, page-verify, page-reset.

   Так, а не «общее в файле, своё на странице», по вполне конкретной
   причине. Медиазапрос для широкого экрана меняет .card, и специфичности он
   не добавляет: при своём правиле .card на странице побеждало бы то, что
   ниже по документу, то есть страничное, а медиазапрос из подключённого
   файла молча переставал работать. Именно это и случилось при первой
   попытке разделения: карточка на всех трёх страницах стала 400/24px вместо
   440/32px, и поймала это только сверка вычисленных стилей до и после.

   Файл подключается ПОСЛЕ theme.css: здешние правила опираются на его
   переменные. app.css страницы входа не подключают вовсе — там раскладка
   одностраничного контура, которой здесь нет. */

*{box-sizing:border-box;margin:0;padding:0}

/* ── Общее у всех трёх ────────────────────────────────────────────────
   Фон — тот же --page-bg (theme.css), что и на основной странице: без него
   страница входа выглядела бы чужой рядом с остальным сайтом. Это градиент
   из переменных темы, без единого изображения. */
body{background:var(--page-bg);background-attachment:fixed;
     color:var(--text);font-family:system-ui,-apple-system,sans-serif;
     min-height:100vh;padding:var(--s4)}
.card{background:var(--card);border:.5px solid var(--border);border-radius:var(--r);
      padding:var(--s5);width:100%;max-width:400px}

/* ── Страница входа ───────────────────────────────────────────────────
   body намеренно НЕ флекс-контейнер, в отличие от двух других. Скрипт
   виджета Telegram сам решает, куда вставить свою рамку, и на практике
   кладёт её прямым потомком body. Будь body флексом, эта рамка становилась
   бы вторым элементом строки и выталкивала карточку за край окна. Обычный
   поток с центрированием через margin к чужим элементам в body равнодушен:
   они просто лягут ниже.

   .card, наоборот, флекс-контейнер, и это отдельный намеренный приём:
   скрипт виджета синхронный, без async, и блокирует разбор HTML на время
   запроса к telegram.org. Раньше он стоял в разметке МЕЖДУ .sub и .alt — а
   значит, пока telegram.org не ответит (или не откажет, что при недоступном
   домене тянется долго), браузер не успевал вставить в DOM ничего из того,
   что идёт ПОСЛЕ тега script: ни подписи полей, ни кнопки. Текст
   подставляет applyI18n(), но подставлять было ещё не во что. Поэтому
   виджет в разметке стоит ПОСЛЕДНИМ среди детей .card, а order у каждого
   ребёнка возвращает прежний вид на экране: order — только про отрисовку, к
   моменту появления элемента в DOM отношения не имеет. */
body.page-login{overflow-x:hidden}
body.page-login .card{margin:var(--s7) auto var(--s4);display:flex;flex-direction:column}

/* ── Подтверждение адреса и новый пароль ──────────────────────────────
   Карточка по центру окна. flex-shrink:0 — она не должна сжиматься по
   высоте, когда содержимого больше, чем окна: текст обрезался бы вместо
   прокрутки страницы. */
body.page-verify,body.page-reset{display:flex;align-items:center;justify-content:center}
body.page-verify .card,body.page-reset .card{flex-shrink:0}

/* ── Юридические страницы (оферта, политика конфиденциальности) ───────
   Карточка тоже центрируется флексом, но ТОЛЬКО по горизонтали. У
   verify/reset выше align-items:center центрирует ещё и по вертикали — там
   это безопасно: карточка короткая и заведомо ниже окна. Здесь же в
   карточке длинный документ, который почти всегда выше окна, а
   align-items:center на переполненном флекс-контейнере обрезает начало
   содержимого сверху и делает его недоступным для прокрутки (известное
   поведение центрирования флекса при переполнении: элемент выходит за оба
   края контейнера, а прокручивается только тот, что снизу) — человек долистал
   бы документ до конца, но не увидел бы его начало. Поэтому здесь только
   justify-content: центр по горизонтали, а по вертикали — обычный поток,
   который прокручивается как всегда.
   Современное лекарство от того же явления — align-items:safe center: при
   переполнении центрирование отключается и содержимое прижимается к началу.
   Здесь оно не нужно (по вертикали не центрируем вовсе), но если однажды
   понадобится центрировать длинный документ — брать надо его, а не обратно
   голый center. */
body.page-legal{display:flex;justify-content:center}

/* Виджет Telegram — сторонний iframe с фиксированной шириной (задаётся
   telegram.org по атрибуту data-size и может доехать позже, уже после
   отрисовки, скриптом виджета). Без ограничения такой iframe способен
   раздуть карточку входа на узких экранах; здесь он остаётся в своих
   границах, а при нехватке места сам получает прокрутку, не ломая карточку. */
#tg-widget{max-width:100%;overflow-x:auto}

/* Заголовок — антиквой, как на всём сайте (--serif объявлен в theme.css,
   который эти страницы подключают). Без этого страница входа набиралась бы
   гротеском и выглядела бы чужой рядом с остальным сайтом. */
h1{font-family:var(--serif);font-size:22px;font-weight:600;margin-bottom:var(--s2)}

/* --muted-ac (вариант --muted с увеличенной непрозрачностью ради контраста
   4.5:1) живёт в theme.css: раньше это объявление стояло четырьмя копиями —
   на трёх страницах входа и в app.css, — и правка контраста означала бы
   правку в четырёх местах. Само --muted не тронуто: это единая тема с
   мини-приложением. */
.sub{font-size:13px;color:var(--muted-ac);margin-bottom:var(--s5);line-height:1.5}

label{display:block;font-size:12px;color:var(--muted-ac);margin-bottom:var(--s1)}
input{width:100%;padding:var(--s3);background:var(--card2);color:var(--text);
      border:.5px solid var(--border2);border-radius:var(--rsm);font-size:15px;margin-bottom:var(--s3)}
input:hover{border-color:var(--muted2)}
/* Здесь именно :focus, а не :focus-visible: поле обязано показывать, что оно
   активно, и при попадании в него мышью.
   Рамка фокуса — лёд (--a2), как на всём сайте: акцент теперь золотой и
   сливался бы с ценностными подсветками (см. комментарий в app.css). */
input:focus{outline:2px solid var(--a2);outline-offset:1px}

/* Кнопка входа — стекло, как и на основной странице (app.css): прозрачный
   слой поверх грунта, а не заливка своим цветом (решение владельца, снято с
   присланного примера). border/backdrop-filter/box-shadow обязаны стоять
   здесь же, в базовом правиле: селектор `button` голый — под него, помимо
   кнопки входа, попадают и .ghost, и .lang, и .link ниже, и каждая из них
   явно отменяет то, что ей не подходит. */
button{width:100%;padding:var(--s4);border-radius:var(--rsm);font-size:16px;
       font-weight:600;cursor:pointer;color:var(--btn-text);
       background:var(--btn-fill);border:.5px solid var(--btn-edge);
       backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
       box-shadow:inset 0 1px 0 var(--btn-sheen),inset 0 -1px 0 var(--btn-shade),
                  var(--btn-glow)}
/* Те же четыре состояния, что и на основной странице (app.css): наведение —
   стекло гуще, нажатие — вдавлено (блик убран, тень внутрь), фокус — рамка
   льда. */
button:hover{background:var(--btn-fill-hover)}
button:active{background:var(--btn-fill);box-shadow:inset 0 1px 3px var(--btn-shade)}
button:focus-visible{outline:2px solid var(--a2);outline-offset:2px}

.alt{display:flex;align-items:center;gap:var(--s2);margin:var(--s5) 0;color:var(--muted-ac);font-size:12px}
.alt::before,.alt::after{content:"";flex:1;height:.5px;background:var(--border2)}

/* Второстепенная кнопка (вход через Google) — то же стекло, что и в app.css,
   но ледяное: разница теперь в цвете стекла, а не в том, что одна кнопка
   залита, а другая пустая. box-shadow:none обязателен — иначе базовое
   правило выше отдало бы ей золотой отсвет главной кнопки. */
.ghost{background:var(--ghost-fill);border-color:var(--ghost-edge);color:var(--text);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 -1px 0 var(--btn-shade)}
.ghost:hover{background:var(--ghost-fill-hover)}
/* Без явного :active нажатие вернуло бы кнопке золотую заливку главной —
   у base:active выше специфичность селектора, чем у голого .ghost.
   Вдавленность та же, что у главной кнопки. */
.ghost:active{background:var(--ghost-fill);box-shadow:inset 0 1px 3px var(--btn-shade)}

/* Кнопка-ссылка: ни заливки, ни рамки, ни стекла — только подчёркивание и
   цвет. border/box-shadow/backdrop-filter обнулены явно: без этого ссылка
   получила бы рамку, отсвет и размытие главной кнопки от базового правила
   выше (там переопределён только background).
   Отступ оставлен прежним (--s3), хотя у стеклянных кнопок он поднят до
   --s4: просьба владельца была про СТЕКЛЯННЫЕ кнопки, а это текстовая
   ссылка — у неё сняты и фон, и рамка, и размытие. Без этой строки она
   молча выросла бы с 39px до 47px вместе с ними. */
.link{padding:var(--s3);background:none;border:none;box-shadow:none;backdrop-filter:none;
      -webkit-backdrop-filter:none;color:var(--accent);font-size:13px;
      font-weight:500;margin-top:var(--s3)}
.link:hover{text-decoration:underline}
.link:active{color:var(--text)}

.msg{font-size:13px;margin-top:var(--s3);min-height:18px}
.msg.err{color:var(--danger)} .msg.ok{color:var(--success)}
/* Предупреждение о новом аккаунте (К4-продолжение) — не ошибка и не успех,
   поэтому свой цвет: var(--gold) уже используется в теме как акцент
   предупреждения/куратора, а не только danger/success. */
.msg.warn{color:var(--gold)}

/* Компьютер: та же начинка, больше воздуха. Раскладку выбирает CSS,
   определение устройства по user-agent не используется — оно врёт. */
@media (min-width:900px){
  .card{max-width:440px;padding:var(--s6)}
  h1{font-size:26px}
}

/* Переключатель языка — ЛЕДЯНОЕ стекло, как кнопки шапки на основной
   странице (решение владельца: стеклянными должны быть и кнопки справа
   вверху). Золотое стекло главной кнопки ему не подходит: золото на сайте
   означает «вот это ценное», а переключатель языка — служебная мелочь.
   Собственный box-shadow обязателен: без него от базового правила `button`
   выше чипу достался бы золотой отсвет большой кнопки. */
.lang{position:absolute;top:var(--s4);right:var(--s4);width:auto;padding:var(--s2) var(--s3);
      background:var(--ghost-fill);border:.5px solid var(--ghost-edge);color:var(--text);
      backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
      font-size:12px;font-weight:600;border-radius:var(--rsm);cursor:pointer;
      box-shadow:inset 0 1px 0 rgba(255,255,255,.16)}
.lang:hover{background:var(--ghost-fill-hover)}
/* Нажатие — вдавленное: блик сверху убираем, вместо него тень внутрь. */
.lang:active{background:var(--ghost-fill);box-shadow:inset 0 1px 2px var(--btn-shade)}

/* Движение — только внутри этого медиазапроса: при системной настройке
   «уменьшить движение» переходов нет вовсе, а не «покороче».
   Поля ввода включены наравне с кнопками. Прежде переход у полей был только
   на login.html, а на verify и reset его не было — расхождение случайное,
   плод трёх копий, а не решение. */
@media (prefers-reduced-motion:no-preference){
  button,input{transition:background var(--t1) ease,border-color var(--t1) ease,
               color var(--t1) ease,box-shadow var(--t2) ease}
}

/* ── Киматический рисунок ──────────────────────────────────────────────
   Просьба владельца: рисунок должен быть ВЕЗДЕ. Подвижен он и здесь, но
   втрое спокойнее основной страницы (WAVE_SLOW в wave-core.js) — на
   странице входа человек читает и печатает, а не любуется.

   Холст и завеса повторяют правила site/app.css. Это по-прежнему копия, а
   не общий файл: app.css несёт раскладку всего одностраничного контура —
   экраны, нижнюю панель, полосу плеера, — и подключать его сюда ради двух
   правил значило бы тащить килобайты чужой раскладки.

   z-index у карточки обязателен. Холст — позиционированный элемент, и без
   явного слоя у содержимого он рисовался бы ПОВЕРХ текста и полей: по
   порядку отрисовки позиционированные элементы идут выше обычного потока.
   Вход бы при этом работал, но был бы не виден. */
#wave{position:fixed;inset:0;width:100%;height:100%;z-index:0;
      pointer-events:none;display:block}
#wave-veil{position:fixed;inset:0;z-index:0;pointer-events:none;
           background:var(--veil)}
#langbar,.card{position:relative;z-index:1}
