/* ==========================================================================
   AUTH, три экрана входа: kapika-login · kapika-register · kapika-recover.
   page-CSS батча Б5 (переезд корневого kapika-auth.css, который удалён).

   ЧТО ЗДЕСЬ ЕСТЬ И ЧЕГО НЕТ.
   Здесь только то, у чего ОДИН потребитель (эти три экрана): сплит-раскладка,
   шаги регистрации, декоративный градиент правой панели и сама маркетинговая
   панель. Всё остальное берётся у ядра и НЕ переопределяется:
     .page-title · .page-lead · .form · .field(+__label/__control/__input/
     __hint/__toggle, --error/--ok) · .check(+__input/__box) · .button(+--accent/
     --ghost/--block/--lg) · .textlink(--sm) · .state(+--ok/__icon/__title/
     __text/__note/__actions) · .visually-hidden.
   Свой :root здесь ЗАПРЕЩЁН (он был в kapika-auth.css и был вторым источником
   правды): токены приходят из assets/css/core.css.

   ⚠️ ШАПКИ И ПОДВАЛА У ЭТИХ ТРЁХ ЭКРАНОВ НЕТ ПО ЗАМЫСЛУ (решение ядра, см.
   assets/_core-notes.md, ## core-b4b5): вход не показывает ни бейдж корзины,
   ни меню кабинета. Поэтому в страницах нет маркеров партиалов, и build.py
   их честно пропускает («нет маркеров»).

   ⚠️ ГЛАВНОЕ ДЕЙСТВИЕ ВХОДА СИНЕЕ (.button--accent), а не лаймовое:
   в ядре --primary закреплён за действием заказа. Так вид входа совпадает
   с исходником.

   БЕЛЫЙ ТЕКСТ НА ГРАДИЕНТЕ ЗАМЕРЕННЫЙ, А НЕ «ЗАВЕДОМО КОНТРАСТНЫЙ».
   На правой панели лежат цветные блобы под сильным блюром, то есть подложка у
   каждой строки СВОЯ. Исходная палитра давала на самом светлом блобе (#2a83d4)
   4.01:1 для белого, это ниже порога 4.5:1, а текст там ещё и приглушался
   прозрачностью (.85 → ~3.2:1). Поэтому: (1) светлые блобы опущены по
   светлоте, (2) весь текст панели СПЛОШНОЙ белый (иерархию держат кегль и
   насыщенность, а не альфа), (3) «стеклянные» плашки ТЕМНЯТ подложку
   (rgba(0,24,50,…)), а не светлят её: светлая плёнка на светлом блобе
   роняла контраст белого текста. Замеры лежат в отчёте батча.

   Desktop-first, лестница (max-width): 1240 · 1024 · 900 · 768 · 560 · 400.
   ========================================================================== */

/* ==========================================================================
   1. СПЛИТ-РАСКЛАДКА
   ========================================================================== */
/* В полосах по краям виден фон страницы (--page) из ядра: обе половины лежат
   на нём карточками с общим радиусом. Ширина капается на 1680, как у .wrap,
   иначе на 1920+ форма уезжает в самый угол экрана. */
.auth{
  display:flex;
  gap:16px;
  min-height:100vh;
  max-width:1680px;
  margin-inline:auto;
  padding:16px;
}
.auth__panel{
  flex:1 1 50%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:#fff;
  border-radius:var(--r);
}
/* КОЛОНКА ФОРМЫ. Панель широкая (половина экрана), а форма стояла в узких
   392px и терялась в пустоте, её расширили до 460px: поля и кнопка стали шире,
   форма перестала выглядеть зажатой. */
.auth__inner{width:100%;max-width:460px}

.auth__logo{display:block;height:60px;width:auto;margin-bottom:24px}

/* ссылка «Ко входу» над логотипом: сама ссылка берёт .textlink--sm ядра,
   отступ держит СВОЯ обёртка (page-CSS не двигает компонент ядра) */
.auth__back{margin:0 0 26px}

/* форма отбивается от лида; у .form ядра своих внешних отступов нет */
.auth__inner .form{margin-top:18px}

/* ЭКРАН РЕЗУЛЬТАТА (.state ядра) отбивается от H1 так же, как лид формы:
   без отступа он вставал вплотную к заголовку. */
.auth__inner [data-auth-view="done"]{margin-top:26px}
/* КОЛЬЦА ФОКУСА У НЕГО НЕТ НАМЕРЕННО. Узел получает фокус ПРОГРАММНО
   (tabindex="-1"), чтобы читалка начала читать результат с его начала;
   в табуляцию он не входит и нажать его нельзя, поэтому «видимый фокус»
   ему не нужен, а синяя рамка вокруг половины экрана читалась бы как
   рамка карточки. У всех клавиатурных целей кольцо ядра на месте. */
.auth__inner [data-auth-view="done"]:focus,
.auth__inner [data-auth-view="done"]:focus-visible{outline:none}

/* строка «Нет аккаунта? · Войти» под формой */
.auth__alt{
  margin:24px 0 0;
  font-size:14px;font-weight:600;color:var(--muted);text-align:center;
}
/* ==========================================================================
   2. МЕЛОЧЬ ФОРМЫ (необязательное поле, действия шага)
   ========================================================================== */
/* «(необязательно)» прямо в подписи поля */
.auth__opt{font-weight:600;color:var(--muted)}

/* строка кнопок шага регистрации: «Назад» по содержимому, остаток у действия */
.auth__actions{display:flex;gap:12px}
.auth__actions .button{flex:1 1 auto;justify-content:center}
.auth__actions .button--ghost{flex:0 0 auto}

/* СТРОКА СОСТОЯНИЯ ФОРМЫ (aria-live).
   МЕСТО ПОД НЕЁ ДЕРЖИТСЯ ВСЕГДА. Раньше пустая строка гасилась (:empty), и
   первое же сообщение удлиняло колонку, а колонка выровнена по центру
   экрана (.auth__panel), поэтому кнопка при появлении ошибки подпрыгивала.
   38px это две строки 13px/1.45: в них укладываются и отказ входа, и сообщение
   о модерации, то есть высота не меняется ни в одном из состояний. */
.auth__status{
  display:flex;align-items:flex-start;gap:8px;
  min-height:38px;
  margin:0;
  font-size:13px;line-height:1.45;font-weight:700;color:var(--ink2);
}
/* ЗНАЧОК ВЫРОВНЕН ПО ПЕРВОЙ СТРОКЕ ТЕКСТА. Своя line-height у него была
   больше строки подписи (16×1.3 против 13×1.45), из-за чего значок стоял
   выше текста и строка выглядела кривой. Теперь его коробка ровно строка
   текста, а глиф центрирован в ней. */
.auth__status i{
  flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  height:calc(13px * 1.45);   /* ровно строка текста: кегль × межстрочный сверху */
  font-size:16px;line-height:1;
}
/* длинный адрес или слово переносится внутри строки, а не растягивает её */
.auth__status span{min-width:0;overflow-wrap:anywhere}
.auth__status--error{color:var(--ink-alert)}
/* УСПЕХ ПОКАЗАН ЗЕЛЁНЫМ (сообщение о письме для восстановления пароля).
   Тон --green-deep: 5.11:1 на белой панели формы при пороге 4.5:1.
   Тон .field--ok (--green-ink) здесь не годится: на 13px он читается почти
   чёрным, а сообщение должно быть видно именно зелёным. */
.auth__status--ok{color:var(--green-deep)}

/* ПЛАШКА ЧЕСТНОСТИ: чего прототип не делает и какой доступ открыт.
   Это не «подсказка», а часть содержимого экрана, поэтому обычный текст
   на подложке, а не всплывашка. */
.auth__demo{
  margin-top:22px;padding:14px 16px;
  background:var(--bg2);border-radius:var(--r2);
}
.auth__demo-title{
  display:flex;align-items:center;gap:7px;
  margin:0 0 6px;
  font-size:13px;font-weight:800;color:var(--ink);
}
.auth__demo-title i{font-size:17px;color:var(--blue)}
.auth__demo-text{margin:0;font-size:12.5px;line-height:1.55;font-weight:600;color:var(--ink2)}
.auth__demo-text b{font-weight:800;color:var(--ink)}

/* ==========================================================================
   3. ШАГИ РЕГИСТРАЦИИ
   ========================================================================== */
.auth__steps{
  display:flex;gap:10px;
  margin:18px 0 0;padding:0;
  list-style:none;
}
.auth__step{
  flex:1;
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;
  background:var(--bg2);border-radius:var(--r2);
  transition:background .15s;
}
.auth__step-num{
  flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  width:24px;height:24px;
  background:#fff;border:1.5px solid var(--line2);border-radius:50%;
  font-size:13px;font-weight:800;color:var(--muted);
}
.auth__step-num i{font-size:14px}
.auth__step-title{font-size:12.5px;font-weight:700;line-height:1.15;color:var(--muted)}
/* текущий шаг */
.auth__step--on{background:var(--blue-t)}
.auth__step--on .auth__step-num{background:var(--blue);border-color:var(--blue);color:#fff}
.auth__step--on .auth__step-title{color:var(--blue-d)}
/* пройденный шаг: лайм уходит в ЗАЛИВКУ, а галочку на нём красит тёмный ink
   ядра (белый по лайму давал 1.70:1, см. --green-ink) */
.auth__step--done .auth__step-num{background:var(--green);border-color:var(--green-deep);color:var(--green-ink)}
.auth__step--done .auth__step-title{color:var(--ink2)}

/* ПАНЕЛЬ ШАГА. Внутри неё та же вертикаль полей, что у .form ядра (gap 16),
   но ВТОРОГО .form на странице мы не заводим: шаг это часть одной формы, а
   вложенный блок с тем же именем читался бы как вторая форма. Скрытие идёт
   атрибутом hidden ([hidden]{display:none!important} в ядре). */
.auth__step-panel{
  display:flex;flex-direction:column;gap:16px;
  animation:auth-fade .2s ease;
}
@keyframes auth-fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ==========================================================================
   4. ПРАВАЯ БРЕНДОВАЯ ПАНЕЛЬ
   ========================================================================== */
/* Слои панели уложены ПОРЯДКОМ УЗЛОВ, а не z-index: у позиционированных
   элементов с z-index:auto порядок отрисовки = порядок в DOM
   (mesh → зерно → head → foot). Своих слоёв в шкалу z-index проект не
   добавляет: их ровно десять, и все токенами. */
.auth__aside{
  position:relative;
  flex:1 1 50%;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:52px 48px;
  overflow:hidden;
  border-radius:var(--r);
  background:#003a73;
  color:#fff;
}
/* mesh: реальные цветные блобы под сильным блюром (техника исходника).
   ⚠️ ПАЛИТРА ОПУЩЕНА ПО СВЕТЛОТЕ: самый светлый тон это носитель контраста
   для ВСЕГО белого текста панели. Было #2a83d4 (4.01:1 для белого),
   стало #1E6EB4 (5.32:1); остальные тона это тени того же фирменного #005EB8. */
.auth__mesh{position:absolute;inset:-14%;filter:blur(82px);pointer-events:none}
.auth__blob{position:absolute}
.auth__blob--1{width:70%;height:56%;left:42%;top:50%;background:#1E6EB4;border-radius:58% 42% 52% 48%/56% 50% 50% 44%}
.auth__blob--2{width:58%;height:50%;left:22%;top:44%;background:#005EB8;border-radius:46% 54% 52% 48%/54% 46% 54% 46%}
.auth__blob--3{width:56%;height:46%;left:56%;top:62%;background:#0B62B0;border-radius:52% 48% 46% 54%/48% 56% 44% 52%}
.auth__blob--4{width:58%;height:72%;left:-24%;top:8%;background:#00498f;border-radius:44% 56% 60% 40%/50% 48% 52% 50%}
.auth__blob--5{width:52%;height:34%;left:34%;top:-14%;background:#003f7a;border-radius:54% 46% 50% 50%/50% 52% 48% 50%}
/* тонкое зерно поверх градиента: процедурный SVG-шум, без картинки */
.auth__grain{
  position:absolute;inset:0;
  opacity:.08;mix-blend-mode:overlay;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
.auth__aside-head,
.auth__aside-foot{position:relative}

.auth__aside-title{
  margin:0;
  font-size:40px;font-weight:800;line-height:1.08;letter-spacing:-.01em;
}
/* «и одежды» это крупный текст (40px), порог 3:1: приглушение допустимо */
.auth__aside-soft{font-weight:400;color:rgba(255,255,255,.86)}
.auth__aside-lead{
  max-width:420px;margin:18px 0 0;
  font-size:15px;line-height:1.55;font-weight:500;color:#fff;
}

.auth__benefits{margin:26px 0 0;padding:0;list-style:none}
.auth__benefit{
  display:flex;align-items:center;gap:13px;
  margin-bottom:16px;
  font-size:15.5px;font-weight:600;line-height:1.4;color:#fff;
}
.auth__benefit:last-child{margin-bottom:0}
.auth__benefit-icon{
  flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:50%;
  background:var(--green);color:var(--green-ink);
}
.auth__benefit-icon i{font-size:16px}

/* синее кольцо фокуса ядра на тёмной панели не читается, здесь оно белое */
.auth__aside a:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* ==========================================================================
   5. АДАПТИВ (лестница 1240 · 1024 · 900 · 768 · 560 · 400)
   ========================================================================== */
@media(max-width:1240px){
  .auth__aside{padding:44px 40px}
  .auth__aside-title{font-size:36px}
}

/* ≤1024: БРЕНДОВАЯ ПАНЕЛЬ УХОДИТ (решение исходника, у которого свод был на
   980; ступень сведена к лестнице). Форма занимает экран целиком: на планшете
   половина ширины под маркетинг оставляла полю ввода меньше 300px. */
@media(max-width:1024px){
  .auth__aside{display:none}
  .auth__panel{padding:24px 16px}
}

@media(max-width:900px){
  .auth__logo{height:54px;margin-bottom:28px}
}

@media(max-width:768px){
  .auth__inner{max-width:420px}
}

@media(max-width:560px){
  /* карточка распахивается на весь экран: рамка в 16px на телефоне это
     потерянная ширина поля, а не воздух */
  .auth{padding:0;gap:0}
  .auth__panel{padding:22px 16px 32px;border-radius:0;align-items:flex-start}
  .auth__inner{max-width:none}
  .auth__logo{height:50px;margin-bottom:22px}
  .auth__steps{gap:8px}
  .auth__step{padding:9px 10px;gap:8px}
  .auth__step-title{font-size:12px}
  .auth__actions{flex-wrap:wrap}
  .auth__actions .button{flex:1 1 100%}
}

@media(max-width:400px){
  .auth__panel{padding:18px 12px 28px}
  .auth__demo{padding:12px 13px}
  .auth__step{flex-direction:column;align-items:flex-start;gap:6px}
}

/* Строка подсказки под полем занимает место всегда, даже пустая: иначе
   появление ошибки раздвигает форму и кнопка уезжает из-под курсора.
   Только внутри форм авторизации, в кабинете поля живут по своим правилам.

   32px даёт ДВЕ строки по 12px, и это не запас «на всякий случай». Резерв в одну
   строку работал ровно до тех пор, пока отказ умещался в строку, а часть
   текстов длиннее: «Напишите название компании, с ним менеджер найдёт вас в
   реестре» это 63 знака, и в колонке 392px (десктоп) он переносится. Строка
   тогда росла с 16 до 30px и уводила вниз всё, что под полем. На ПЕРВОМ шаге
   анкеты этого не видно просто потому, что его отказы короче, то есть
   разницы между шагами нет, есть длина текста; на телефоне (колонка от 296px)
   переносится уже почти каждый.
   Замер по всем текстам трёх форм (вход · анкета · восстановление) на ширинах
   колонки 296/320/343/392px: максимум 30px, в три строки не уходит ни один. */
/* Строка подсказки/ошибки НЕ резервирует пусто под каждым полем: раньше здесь
   стоял min-height:32px, чтобы кнопка не подпрыгивала при появлении красной
   ошибки, но из-за него форма разъезжалась по вертикали пустыми промежутками.
   Теперь слот пуст = 0 высоты; ошибка появляется по месту, форма компактная. */
.form .field__hint{display:block}
.form .field__hint:empty{display:none}

/* Капча ядра. Появляется в форме не сразу: групповая политика включает её
   после серии неудачных попыток, и тогда картинку подставляет auth.js. */
.field__captcha{display:block;margin:0 0 8px;border-radius:10px;background:var(--bg2);border:1px solid var(--line2)}

/* ЮРИДИЧЕСКИЕ ССЫЛКИ ПОД ФОРМОЙ. Подвала у экрана входа нет, а оферта и
   политика должны быть достижимы ДО входа, иначе гость до них не доберётся
   никак. Вид тот же, что в подвале (.footer__legal-link), поэтому своих правил
   для самих ссылок здесь нет: только раскладка строки.
   Запас снизу оставлен под полосу про cookie: она стоит поверх страницы, и
   без него на низком экране ссылки оказывались бы под ней. */
.auth__legal{
  display:flex;flex-wrap:wrap;justify-content:center;gap:8px 20px;
  margin:28px 0 0;
  /* ЗАПАС ПОД ПОЛОСУ ПРО COOKIE. Она прибита к низу экрана и накрывала эти
     ссылки: замер на 1440px дал 90px, на узких она в две строки и выше.
     Число не зашиваем: высоту меряет сама полоса и кладёт в --cookiebar-h
     (include/cookie-note.php). Полосы нет или её закрыли, значит переменной нет,
     берётся запасной ноль, и лишней дырки внизу не появляется. */
  padding-bottom:calc(var(--cookiebar-h, 0px) + 12px);
}