/* static/public/auth.css — PR-PUB-3: auth-поверхность WibeSeller (/login).
   Значения ТОЛЬКО из static/tokens.css (var(--wbm-*)) — docs/design_canon.md.
   Раньше static/login.html держал вторую локальную дизайн-систему (хардкод
   hex/px в inline <style>) — убрано: одни и те же токены, что у публичного
   сайта (static/public/public.css), поэтому auth и public выглядят одним
   продуктом, а не двумя разными интерфейсами. */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* Тот же системный шрифтовой стек, что у публичного сайта (без внешнего
   Google Fonts запроса — см. public.css докстринг). */
:root {
  --wbm-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --wbm-font-display: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

body {
  margin: 0; min-height: 100vh;
  display: flex; flex-direction: column;
  background: var(--wbm-color-canvas); color: var(--wbm-color-text);
  font-family: var(--wbm-font); font-size: var(--wbm-fs-lg);
  line-height: var(--wbm-lh-normal, 1.5); -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
p { margin: 0; }

/* ── Минимальный header — бренд + «На главную» (не полный pub-topbar: страница
   с одной задачей, лишняя навигация только отвлекает от формы). ─────────── */
.auth-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--wbm-space-4) var(--wbm-layout-gutter);
  max-width: 1280px; margin: 0 auto; width: 100%;
}
.auth-brand {
  display: inline-flex; align-items: center; gap: var(--wbm-space-2);
  font-family: var(--wbm-font-display); font-weight: var(--wbm-weight-extrabold);
  font-size: var(--wbm-fs-xl); text-decoration: none; color: var(--wbm-color-text);
}
.auth-brand img { border-radius: var(--wbm-radius-sm); object-fit: cover; }
.auth-brand:focus-visible { outline: none; box-shadow: var(--wbm-focus-ring); border-radius: var(--wbm-radius-sm); }
.auth-home-link {
  text-decoration: none; color: var(--wbm-color-text-secondary);
  font-size: var(--wbm-fs-sm); font-weight: var(--wbm-weight-medium);
}
.auth-home-link:hover { color: var(--wbm-color-action); }

/* ── Card ───────────────────────────────────────────────────────────────── */
.auth-main {
  flex: 1; display: flex; align-items: center; justify-content: center;
  padding: var(--wbm-space-6) var(--wbm-layout-gutter-compact, var(--wbm-layout-gutter));
}
.auth-card {
  background: var(--wbm-color-surface); border: var(--wbm-border-width, 1px) solid var(--wbm-color-border);
  border-radius: var(--wbm-radius-lg); padding: var(--wbm-space-8) var(--wbm-space-8) var(--wbm-space-6);
  max-width: 400px; width: 100%; box-shadow: var(--wbm-shadow-2);
}
.auth-logo { font-size: var(--wbm-fs-2xl); text-align: center; margin-bottom: var(--wbm-space-1); }
.auth-title {
  font-family: var(--wbm-font-display); font-size: var(--wbm-fs-xl);
  font-weight: var(--wbm-weight-extrabold); color: var(--wbm-color-text);
  text-align: center; margin: 0 0 var(--wbm-space-1);
}
.auth-subtitle {
  font-size: var(--wbm-fs-sm); color: var(--wbm-color-text-tertiary);
  text-align: center; margin: 0 0 var(--wbm-space-6);
}
.auth-intent {
  display: flex; flex-direction: column; gap: var(--wbm-space-1);
  margin: 0 0 var(--wbm-space-5); padding: var(--wbm-space-3);
  border: var(--wbm-border-width, 1px) solid color-mix(in oklab, var(--wbm-color-action) 32%, transparent);
  border-radius: var(--wbm-radius-sm); background: color-mix(in oklab, var(--wbm-color-action) 8%, transparent);
  color: var(--wbm-color-text-secondary); font-size: var(--wbm-fs-sm); text-align: center;
}
.auth-intent[hidden] { display: none; }
.auth-intent b { color: var(--wbm-color-text); }

/* ── Tabs ───────────────────────────────────────────────────────────────── */
.auth-tabs {
  display: flex; gap: var(--wbm-space-1);
  background: var(--wbm-color-canvas); border: var(--wbm-border-width, 1px) solid var(--wbm-color-border);
  border-radius: var(--wbm-radius); padding: var(--wbm-space-1); margin-bottom: var(--wbm-space-5);
}
.auth-tab {
  flex: 1; text-align: center; padding: var(--wbm-space-2);
  border-radius: var(--wbm-radius-sm); font-size: var(--wbm-fs-sm); font-weight: var(--wbm-weight-semibold);
  color: var(--wbm-color-text-secondary); cursor: pointer; border: none; background: transparent;
  font-family: inherit; min-height: var(--wbm-touch-target-min);
}
.auth-tabs[hidden] { display: none; }
.auth-tab.active { background: var(--wbm-accent-grad); color: #fff; }
.auth-tab:focus-visible { outline: none; box-shadow: var(--wbm-focus-ring); }

/* ── Form ───────────────────────────────────────────────────────────────── */
.auth-field { display: block; font-size: var(--wbm-fs-sm); color: var(--wbm-color-text-secondary); margin: var(--wbm-space-4) 0 var(--wbm-space-2); }
.auth-input {
  width: 100%; padding: var(--wbm-space-3); border-radius: var(--wbm-radius-sm);
  border: var(--wbm-border-width, 1px) solid var(--wbm-color-border-strong);
  background: var(--wbm-color-canvas); color: var(--wbm-color-text); font-size: var(--wbm-fs-md);
  font-family: var(--wbm-font);
}
.auth-input:focus-visible { outline: none; border-color: var(--wbm-color-action); box-shadow: var(--wbm-focus-ring); }
.auth-row { display: flex; align-items: center; gap: var(--wbm-space-2); margin: var(--wbm-space-5) 0; font-size: var(--wbm-fs-sm); color: var(--wbm-color-text-secondary); }
.auth-row input { width: 16px; height: 16px; accent-color: var(--wbm-color-action); }

/* ── Согласия при регистрации (PUB-L1-LEGAL контракт) ────────────────────
   `fieldset` вместо `div`: три чекбокса — одна смысловая группа, и скринридер
   обязан объявить её назначение перед первым же полем. Сбрасываем браузерную
   рамку/отступы fieldset, а не отказываемся от семантики ради вида.
   Метка выравнивается по ВЕРХУ, а не по центру: текст согласия переносится на
   2–3 строки, и центрирование уводило бы квадратик чекбокса в середину абзаца. */
.auth-consents {
  border: none; padding: 0; margin: var(--wbm-space-5) 0 0; min-width: 0;
}
.auth-consents-legend {
  padding: 0; font-size: var(--wbm-fs-2xs); font-weight: var(--wbm-weight-semibold);
  letter-spacing: var(--wbm-letter-wide); text-transform: uppercase;
  color: var(--wbm-color-text-tertiary);
}
.auth-row.auth-consent {
  align-items: flex-start; margin: var(--wbm-space-3) 0 0;
  line-height: var(--wbm-lh-normal, 1.5);
}
.auth-row.auth-consent input {
  flex: none; margin-top: 2px;
}
.auth-row.auth-consent label { margin: 0; }
.auth-row.auth-consent a { color: var(--wbm-color-action); }
.auth-row.auth-consent input:focus-visible {
  outline: none; box-shadow: var(--wbm-focus-ring);
}

.auth-btn {
  width: 100%; padding: var(--wbm-space-3); border: none; border-radius: var(--wbm-radius-sm);
  cursor: pointer; margin-top: var(--wbm-space-5);
  background: var(--wbm-accent-grad); color: #fff; font-size: var(--wbm-fs-md);
  font-weight: var(--wbm-weight-semibold); font-family: inherit; min-height: var(--wbm-touch-target-min);
}
.auth-btn:disabled { opacity: .6; cursor: default; }
.auth-btn:focus-visible { outline: none; box-shadow: var(--wbm-focus-ring); }
.auth-btn-ghost {
  background: transparent; color: var(--wbm-color-text);
  border: var(--wbm-border-width, 1px) solid var(--wbm-color-border-strong);
}

/* ── Messages (aria-live) ──────────────────────────────────────────────── */
.auth-msg {
  display: none; margin-top: var(--wbm-space-4); padding: var(--wbm-space-2) var(--wbm-space-3);
  border-radius: var(--wbm-radius-sm); font-size: var(--wbm-fs-sm); text-align: center;
}
.auth-msg.err { display: block; background: color-mix(in oklab, var(--wbm-bad) 12%, transparent); border: var(--wbm-border-width, 1px) solid color-mix(in oklab, var(--wbm-bad) 35%, transparent); color: var(--wbm-bad); }
.auth-msg.ok { display: block; background: color-mix(in oklab, var(--wbm-good) 12%, transparent); border: var(--wbm-border-width, 1px) solid color-mix(in oklab, var(--wbm-good) 35%, transparent); color: var(--wbm-good); }

.auth-hint { font-size: var(--wbm-fs-xs); color: var(--wbm-color-text-tertiary); text-align: center; margin-top: var(--wbm-space-5); }
.auth-link { color: var(--wbm-color-action); cursor: pointer; text-decoration: none; font-size: var(--wbm-fs-sm); background: none; border: none; font-family: inherit; padding: 0; }
.auth-link:hover { text-decoration: underline; }
.auth-link:focus-visible { outline: none; box-shadow: var(--wbm-focus-ring); border-radius: var(--wbm-radius-xs); }
.auth-center { text-align: center; margin-top: var(--wbm-space-4); }
.auth-pane { display: none; }
.auth-pane.active { display: block; }

/* ── Регистрация закрыта: приглашения (PR-PUB-3) ─────────────────────────── */
.auth-invite {
  text-align: center; padding: var(--wbm-space-4) 0 var(--wbm-space-2);
}
.auth-invite p { color: var(--wbm-color-text-secondary); font-size: var(--wbm-fs-sm); margin-bottom: var(--wbm-space-5); }

/* ── Footer ─────────────────────────────────────────────────────────────── */
.auth-footer {
  padding: var(--wbm-space-6) var(--wbm-layout-gutter); text-align: center;
  font-size: var(--wbm-fs-xs); color: var(--wbm-color-text-tertiary);
}
.auth-footer a { color: inherit; text-decoration: none; margin: 0 var(--wbm-space-2); }
.auth-footer a:hover { color: var(--wbm-color-action); }

@media (max-width: 480px) {
  .auth-card { padding: var(--wbm-space-6) var(--wbm-space-5) var(--wbm-space-5); }
  .auth-header { padding: var(--wbm-space-3) var(--wbm-layout-gutter-compact, var(--wbm-layout-gutter)); }
}

/* ── [PUB-UX1] Состояния и онбординг внешнего клиента ─────────────────────
   Дополнение той же scoped-семьи `.auth-*`; вторая дизайн-система не
   заводится, все значения — из static/tokens.css (docs/design_canon.md §2). */

/* Скип-ссылка: клавиатурный пользователь не обязан проходить шапку. */
.auth-skip {
  position: absolute; left: var(--wbm-space-2); top: calc(-1 * var(--wbm-space-12));
  z-index: var(--wbm-z-toast);
  padding: var(--wbm-space-2) var(--wbm-space-3);
  background: var(--wbm-color-surface); color: var(--wbm-color-text);
  border: var(--wbm-border-width, 1px) solid var(--wbm-color-border-strong);
  border-radius: var(--wbm-radius-sm); font-size: var(--wbm-fs-sm);
  text-decoration: none;
}
.auth-skip:focus-visible { top: var(--wbm-space-2); box-shadow: var(--wbm-focus-ring); outline: none; }

/* ── Прогресс подключения ────────────────────────────────────────────────
   Человек должен видеть, где он в пути и сколько осталось, а не угадывать. */
.auth-steps {
  display: flex; align-items: flex-start; gap: var(--wbm-space-1);
  list-style: none; margin: 0 0 var(--wbm-space-5); padding: 0;
}
/* Собственный display перебивает UA-правило [hidden]{display:none} — без этой
   строки скрытый прогресс-рельс всё равно отрисовывался (например на обычном
   входе, где шага онбординга нет вовсе). Та же причина у .auth-input-wrap. */
.auth-steps[hidden] { display: none; }
.auth-step {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  gap: var(--wbm-space-1); position: relative; min-width: 0;
}
.auth-step + .auth-step::before {
  content: ""; position: absolute; top: calc(var(--wbm-space-3) - 1px); right: 50%;
  width: 100%; height: var(--wbm-border-width, 1px); background: var(--wbm-color-border);
}
/* Линию рисует ::before СЛЕДУЮЩЕГО шага, то есть она соединяет «предыдущий →
   этот». Заливать её вправо от ТЕКУЩЕГО шага нельзя: следующий шаг ещё не
   пройден, а закрашенная линия читается как «дошли и сюда». */
.auth-step.done + .auth-step::before { background: var(--wbm-color-action); }
.auth-step-dot {
  /* Точка перекрывает соединительную линию соседнего шага: линия рисуется
     ::before у следующего .auth-step и лежит ниже по порядку укладки, поэтому
     достаточно позиционирования без числового z-index (design_canon §2.3). */
  position: relative; z-index: var(--wbm-z-sticky);
  width: var(--wbm-space-6); height: var(--wbm-space-6); border-radius: var(--wbm-radius-pill);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--wbm-fs-2xs); font-weight: var(--wbm-weight-bold);
  background: var(--wbm-color-canvas); color: var(--wbm-color-text-tertiary);
  border: var(--wbm-border-width, 1px) solid var(--wbm-color-border-strong);
}
.auth-step-label {
  font-size: var(--wbm-fs-2xs); color: var(--wbm-color-text-tertiary);
  text-align: center; line-height: var(--wbm-lh-tight, 1.2);
}
/* Пройденный шаг остаётся с номером: «шаг 2 из 4» читается лучше галочки,
   а номер не исчезает у screen reader. Пройденное — спокойная зелёная обводка,
   текущее — акцентная заливка: разница видна и без цвета (толщина/фон). */
.auth-step.done .auth-step-dot {
  background: var(--wbm-good-bg); border-color: var(--wbm-good); color: var(--wbm-good);
}
/* Текущий шаг — сплошная акцентная заливка; ink берётся из surface, а не из
   литерального белого: в тёмной теме он обязан инвертироваться вместе с ней. */
.auth-step.current .auth-step-dot {
  background: var(--wbm-accent); border-color: var(--wbm-accent);
  color: var(--wbm-color-surface);
}
.auth-step.current .auth-step-label,
.auth-step.done .auth-step-label { color: var(--wbm-color-text-secondary); }
.auth-step.current .auth-step-label { font-weight: var(--wbm-weight-semibold); }

/* ── Загрузка конфигурации и её сбой ─────────────────────────────────────
   Раньше ошибка /api/auth-config молча проглатывалась и человек оставался на
   мёртвой странице; теперь у сбоя есть текст и действие. */
.auth-boot {
  display: flex; align-items: center; justify-content: center; gap: var(--wbm-space-2);
  padding: var(--wbm-space-6) 0; font-size: var(--wbm-fs-sm); color: var(--wbm-color-text-tertiary);
}
.auth-boot[hidden], .auth-boot-error[hidden], .auth-body[hidden] { display: none; }
.auth-spinner {
  width: var(--wbm-space-4); height: var(--wbm-space-4); flex: none;
  border: 2px solid var(--wbm-color-border-strong); border-top-color: var(--wbm-color-action);
  border-radius: var(--wbm-radius-pill); animation: auth-spin var(--wbm-motion-slow, .9s) linear infinite;
}
@keyframes auth-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .auth-spinner { animation-duration: 3s; }
  html { scroll-behavior: auto; }
}
.auth-boot-error { padding: var(--wbm-space-4) 0 var(--wbm-space-2); text-align: center; }
.auth-boot-error p { font-size: var(--wbm-fs-sm); color: var(--wbm-color-text-secondary); }

/* ── Поля: подсказка, ошибка, показ пароля, код ──────────────────────────── */
.auth-help {
  font-size: var(--wbm-fs-2xs); color: var(--wbm-color-text-tertiary);
  margin: var(--wbm-space-1) 0 0; line-height: var(--wbm-lh-normal, 1.5);
}
.auth-note {
  font-size: var(--wbm-fs-sm); color: var(--wbm-color-text-secondary);
  text-align: center; margin: 0 0 var(--wbm-space-4);
}
.auth-note.ok { color: var(--wbm-good); font-weight: var(--wbm-weight-medium); }
.auth-input.invalid { border-color: var(--wbm-bad); }
.auth-input.invalid:focus-visible { border-color: var(--wbm-bad); }
.auth-input:disabled, .auth-input[readonly] {
  background: var(--wbm-color-disabled-bg); color: var(--wbm-color-text-secondary);
}
.auth-input-wrap { position: relative; display: block; }
.auth-input-wrap[hidden] { display: none; }
.auth-input-wrap .auth-input { padding-right: var(--wbm-space-10); }
.auth-reveal {
  position: absolute; top: 0; right: 0; height: 100%;
  min-width: var(--wbm-touch-target-min); padding: 0 var(--wbm-space-2);
  border: none; background: transparent; cursor: pointer;
  font-size: var(--wbm-fs-md); line-height: 1; color: var(--wbm-color-text-tertiary);
  border-radius: var(--wbm-radius-sm);
}
.auth-reveal:focus-visible { outline: none; box-shadow: var(--wbm-focus-ring); }
.auth-reveal[aria-pressed="true"] { color: var(--wbm-color-action); }
.auth-input-code {
  letter-spacing: .3em; text-align: center;
  font-size: var(--wbm-fs-xl); font-weight: var(--wbm-weight-semibold);
}

/* ── Сообщения: к err/ok добавлены нейтральное и предупреждающее ─────────── */
.auth-msg.info {
  display: block; background: var(--wbm-info-bg);
  border: var(--wbm-border-width, 1px) solid color-mix(in oklab, var(--wbm-info) 35%, transparent);
  color: var(--wbm-info);
}
.auth-msg.warn {
  display: block; background: var(--wbm-warn-bg);
  border: var(--wbm-border-width, 1px) solid color-mix(in oklab, var(--wbm-warn) 35%, transparent);
  color: var(--wbm-warning-ink, var(--wbm-warn));
  text-align: left;
}

.auth-link:disabled { color: var(--wbm-color-text-disabled); cursor: default; text-decoration: none; }
.auth-cooldown { display: block; margin-top: var(--wbm-space-1); }
.auth-cooldown[hidden] { display: none; }

/* Ссылка, оформленная как основная кнопка (CTA приглашения). */
.auth-btn-link {
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none;
}
.auth-invite-head {
  font-size: var(--wbm-fs-md); font-weight: var(--wbm-weight-semibold);
  color: var(--wbm-color-text); margin-bottom: var(--wbm-space-2);
}

@media (max-width: 480px) {
  /* На узком экране подписи шагов не должны переноситься в столбик из
     одиночных букв — сокращаем шаг до точки с номером и одной строки. */
  .auth-step-label { font-size: var(--wbm-fs-2xs); }
  .auth-steps { gap: var(--wbm-space-0); }
}

/* См. комментарий в public.css: `wbm-root` берётся ради канонической тёмной
   палитры, а механика кабинета (пользовательский zoom и производная от него
   ширина) на странице входа не нужна и гасится здесь. */
body.wbm-root {
  zoom: normal;
  width: auto;
  min-height: 100%;
  letter-spacing: normal;
}