/* Страница входа auth.* в стиле карточки /auth LMS (тёмная тема).
   Токены — из @insperia/ui (.dark) и lms-frontend src/pages/auth/config.
   Без сборки: файл отдаётся как есть, ссылка из base.html несёт ?v=<хэш>. */

@font-face {
  font-family: Raleway;
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("fonts/raleway-regular.7212044a.woff2") format("woff2");
}

@font-face {
  font-family: Raleway;
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url("fonts/raleway-medium.0f53510a.woff2") format("woff2");
}

/* Веса как в @insperia/ui: stolzl-book — 400, stolzl-regular — 500,
   stolzl-medium — 600 (заголовки на мобильном; без файла был бы 500). */
@font-face {
  font-family: Stolzl;
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("fonts/stolzl-book.5df9c355.woff2") format("woff2");
}

@font-face {
  font-family: Stolzl;
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url("fonts/stolzl-regular.22d44f78.woff2") format("woff2");
}

@font-face {
  font-family: Stolzl;
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url("fonts/stolzl-medium.7e5b5966.woff2") format("woff2");
}

:root {
  color-scheme: dark;
  --font-primary: "Raleway", system-ui, sans-serif;
  --font-secondary: "Stolzl", system-ui, sans-serif;

  --background: oklch(19.13% 0 0);
  --background-alt: oklch(19.13% 0 0);
  --gradient-from: oklch(28.5% 0 0);
  --gradient-to: oklch(0% 0 0);
  --foreground: oklch(100% 0 0);
  /* Как LMS (решение user 3.0e: паритет важнее; на карточке ~3.8:1). */
  --muted-foreground: oklch(55% 0 0);
  --border: oklch(32.7% 0.003 264);
  --input: oklch(32.7% 0.003 264);

  --primary: oklch(81.8% 0.118 166.5);
  --primary-hover: oklch(91.25% 0.0847 170.45);
  --primary-foreground: oklch(19.13% 0 0);
  /* Неактивная кнопка LMS (bg-muted, text-muted-foreground): контраст
     неактивным элементам не нужен (WCAG 1.4.3), берём как есть. */
  --disabled: rgb(41 41 41);
  --disabled-foreground: rgb(113 113 113);
  /* Кольцо фокуса полей и активной ячейки кода (ring-ring/50 в LMS). */
  --ring: rgb(115 115 115);
  --field-bg: color-mix(in oklab, var(--input) 30%, transparent);

  /* Текст ошибки — тоже destructive, как text-destructive LMS. */
  --destructive: oklch(51.8% 0.224 27.3);

  --radius-card: 0.7rem;
  --radius-card-md: 0.95rem;
  --radius-input: 0.45rem;
  --radius-button: calc(0.45rem - 2px);
  --focus-ring: 2px solid var(--primary);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

/* Поля и кнопки сами шрифтовые настройки не наследуют (как preflight Tailwind). */
button,
input,
select,
textarea {
  font-feature-settings: inherit;
  font-variation-settings: inherit;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  font: 400 1rem/1.5 var(--font-primary);
  /* Цифры одной высоты, как body @insperia/ui: у Raleway по умолчанию
     «старостильные» (9, 5, 7 уходят под строку). */
  font-feature-settings: "lnum";
  tab-size: 4;
  color: var(--foreground);
  background-color: var(--background);
  /* Большой логотип внизу справа поверх градиента, как AuthPageBackground. */
  background-image:
    url("bg-logo.5d1ac334.svg"),
    linear-gradient(to right, var(--gradient-from), var(--gradient-to));
  background-repeat: no-repeat;
  background-position: right bottom, 0 0;
  background-size: min(91.6667%, 85rem) auto, 100% 100%;
}

.header {
  padding: 18px 16px;
}

.logo {
  display: block;
  width: auto;
  height: 40px;
  color: var(--foreground);
}

/* Карточка 342px на 390 (как /auth LMS), 356px с md. */
.page {
  display: flex;
  justify-content: center;
  padding: 14px 24px 48px;
}

/* Колонка: «‹ К способам входа» (шаги) и карточка под ней. */
.page__column {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 356px;
}

.card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  min-height: 280px;
  padding: 24px 16px;
  background: var(--background-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
}

/* Шаг входа (телефон, код, пароль): карточка gap-6 LMS. */
.card--step {
  gap: 24px;
}

/* authLayoutTitleClass LMS: 20/24 semibold tracking-tight, с lg — 20/28 medium. */
.card__title {
  margin: 0;
  font: 600 1.25rem/1.5rem var(--font-secondary);
  font-feature-settings: inherit; /* shorthand font сбрасывает lnum */
  letter-spacing: -0.025em;
  text-align: center;
  overflow-wrap: anywhere;
}

/* «Введи номер телефона / и пароль» — две строки по 20/24. */
.card__title-line {
  display: block;
  font-size: 1.25rem;
  line-height: 1.5rem;
}

.card__head {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.card__lead {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.125rem;
  color: var(--muted-foreground);
  text-align: center;
}

.card__text {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.125rem;
}

.card__text--center {
  text-align: center;
  white-space: pre-line;
}

.card__note {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1rem;
  color: var(--muted-foreground);
  overflow-wrap: anywhere;
}

.card__note--center {
  text-align: center;
}

.form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
}

.form .btn {
  margin-top: 8px;
}

/* Форма шага LMS: flex gap-5, кнопка без своего отступа. */
.form--step {
  gap: 20px;
}

.form--step .btn {
  margin-top: 0;
}

/* Шаг телефона: mt-4 после заголовка. */
.form--phone {
  margin-top: 16px;
}

/* FieldSet gap-2 LMS: поля, подсказка и ошибка под ними. */
.field-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.field__label {
  align-self: flex-start;
  margin: 0;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1rem;
  color: var(--foreground);
}

.field__hint {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1rem;
  color: var(--muted-foreground);
}

/* Поле LMS: без рамки, ошибка и фокус — тенью (рамка сдвинула бы текст). */
.field__input {
  width: 100%;
  height: 44px;
  padding: 0 10px;
  font: 400 0.875rem/1.125rem var(--font-primary);
  font-feature-settings: inherit; /* shorthand font сбрасывает lnum */
  color: var(--foreground);
  background: var(--field-bg);
  border: 0;
  border-radius: var(--radius-input);
}

.field__input::placeholder {
  color: var(--muted-foreground);
  opacity: 1;
}

.field__input[aria-invalid="true"] {
  box-shadow: inset 0 0 0 1px var(--destructive);
}

/* Значение без ввода (номер на шаге кода, CodeStepPhoneInfo). */
.field__value {
  display: flex;
  align-items: center;
  height: 44px;
  margin: 0;
  padding: 0 12px;
  font-size: 0.875rem;
  line-height: 1.125rem;
  background: var(--field-bg);
  border-radius: var(--radius-input);
}

/* Шаг кода: плашка «Код отправлен», текст, ячейки, таймер, кнопка. */
.code {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.notice {
  display: flex;
  justify-content: center;
  margin: 0;
  padding: 12px 0;
  font-size: 0.875rem;
  line-height: 1.125rem;
  color: var(--muted-foreground);
  background: var(--field-bg);
  border-radius: var(--radius-input);
}

.code__actions {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 10px;
}

.code__form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  margin: 0;
}

/* Без JS — обычное поле; otp.js ставит .otp--js: поле прозрачное поверх
   ячеек (как input-otp), цифры рисуются в .otp__slot. */
.otp {
  position: relative;
  width: 100%;
}

.otp--js {
  width: auto;
}

.otp--js .otp__input {
  position: absolute;
  inset: 0;
  z-index: 2;
  height: 100%;
  padding: 0;
  color: transparent;
  caret-color: transparent;
  background: transparent;
  box-shadow: none;
}

.otp--js .otp__input::selection {
  background: transparent;
}

/* Фокус и ошибку показывают ячейки, не прозрачное поле над ними. */
.otp--js .otp__input:focus,
.otp--js .otp__input[aria-invalid="true"],
.otp--js .otp__input[aria-invalid="true"]:focus {
  outline: none;
  box-shadow: none;
}

.otp__slots {
  display: flex;
  gap: 6px;
}

/* InputOTPSlot @insperia/ui: 36×44 (42 с md), у первой ячейки — левая рамка. */
.otp__slot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  text-align: center;
  height: 44px;
  font-size: 1rem;
  line-height: 1.25rem;
  background: var(--field-bg);
  border: 0 solid transparent;
  border-radius: var(--radius-input);
}

.otp__slot:first-child {
  border-left-width: 1px;
  border-radius: var(--radius-button) var(--radius-input) var(--radius-input) var(--radius-button);
}

.otp__slot:last-child {
  border-radius: var(--radius-input) var(--radius-button) var(--radius-button) var(--radius-input);
}

.otp__slot--filled {
  border-color: color-mix(in oklab, var(--foreground) 50%, transparent);
}

.otp__slot--active {
  z-index: 1;
  border-color: var(--ring);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent);
}

.otp__slot--active:empty::after {
  content: "";
  width: 1px;
  height: 16px;
  background: var(--foreground);
  animation: caret-blink 1.2s ease-out infinite;
}

@keyframes caret-blink {
  0%,
  70%,
  100% {
    opacity: 1;
  }
  20%,
  50% {
    opacity: 0;
  }
}

/* authPrimaryButtonClass LMS: 44 (42 с md), px-4 py-3, Stolzl 14/18. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-height: 44px;
  padding: 12px 16px;
  font: 400 0.875rem/1.125rem var(--font-secondary);
  font-feature-settings: inherit; /* shorthand font сбрасывает lnum */
  text-align: center;
  text-decoration: none;
  border: 0;
  border-radius: var(--radius-button);
  cursor: pointer;
}

.btn--primary {
  color: var(--primary-foreground);
  background: var(--primary);
}

.btn--primary:hover {
  background: var(--primary-hover);
}

.btn--primary:active {
  background: var(--foreground);
}

/* Outline-кнопки выбора способа (authLayoutOutlineButtonClass): 44 на всех ширинах. */
.btn--secondary {
  padding-block: 0;
  line-height: 1.25rem;
  color: var(--foreground);
  background: var(--background-alt);
  border: 1px solid var(--border);
}

.btn--secondary:hover {
  background: color-mix(in oklab, var(--foreground) 10%, var(--background-alt));
}

/* Кнопки соцсетей LMS (TelegramButton/VkButton): фирменная заливка, Stolzl 500. */
.btn--telegram,
.btn--vk {
  gap: 12px;
  padding: 0 10px;
  font-weight: 500;
  color: #fff;
  border: 1px solid transparent;
}

.btn--telegram {
  background: #24a1de;
}

.btn--telegram:hover {
  background: #2096d0;
}

.btn--telegram:active {
  background: #1b85bc;
}

.btn--vk {
  background: #07f;
}

.btn--vk:hover {
  background: #0071eb;
}

.btn--vk:active {
  background: #0061d5;
}

.btn:disabled,
.btn[aria-disabled="true"] {
  color: var(--disabled-foreground);
  background: var(--disabled);
  border-color: transparent;
  cursor: default;
}

.btn svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

/* Значок соцсети — как у кнопок LMS /auth (24px, отступ 12px). */
.btn--telegram svg,
.btn--vk svg {
  width: 24px;
  height: 24px;
}

:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
}

/* Фокус поля — кольцо ring-3 ring-ring/50 LMS. */
.field__input:focus {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent);
}

.field__input[aria-invalid="true"]:focus {
  box-shadow:
    inset 0 0 0 1px var(--destructive),
    0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent);
}

/* Альтернативные способы входа под «или» — столбик кнопок (gap-2 в LMS). */
.methods {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 0 8px;
  font-size: 0.75rem;
  line-height: 1rem;
  color: color-mix(in oklab, var(--foreground) 60%, transparent);
}

.divider::before,
.divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: color-mix(in oklab, var(--foreground) 20%, transparent);
}

/* Тонкая линия между основным действием и остальными (главная identity). */
.separator {
  width: 100%;
  height: 1px;
  margin: 0;
  border: 0;
  background: color-mix(in oklab, var(--foreground) 20%, transparent);
}

.form-error {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--destructive);
  text-align: center;
}

.form-error:empty {
  display: none;
}

/* Ошибка под полем шага (text-xs text-destructive LMS); на шаге кода — по центру. */
.field-group .form-error,
.code__form .form-error {
  font-size: 0.75rem;
  line-height: 1rem;
  text-align: left;
}

.code__form .form-error {
  text-align: center;
}

.legal {
  margin: 0;
  font-size: 11px;
  line-height: 1.375;
  color: var(--muted-foreground);
}

.legal a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Второстепенное действие текстом — как «назад» на /auth LMS (text-xs,
   foreground, hover:opacity-80); подчёркнута, чтобы читалась как ссылка. */
.link {
  align-self: center;
  font-size: 0.75rem;
  line-height: 1rem;
  color: var(--foreground);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Ссылка под карточкой («Забыли пароль?»). */
.card + .link {
  margin-top: 16px;
}

/* «‹ К способам входа» над карточкой (authStepBackButtonClass LMS). */
.back {
  display: inline-flex;
  text-align: center;
  align-self: flex-start;
  align-items: center;
  gap: 4px;
  margin: 0 0 12px 4px;
  font-size: 0.75rem;
  line-height: 1rem;
  color: var(--foreground);
  text-decoration: none;
}

.back--spaced {
  margin-bottom: 20px;
}

.back svg {
  flex-shrink: 0;
  width: 12px;
  height: 12px;
}

.legal a:hover,
.link:hover,
.back:hover {
  opacity: 0.8;
}

code {
  font-family: ui-monospace, monospace;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (min-width: 768px) {
  .header {
    padding: 18px 40px;
  }

  .page {
    padding-top: 52px;
  }

  .page {
    padding-inline: 16px;
  }

  .card {
    min-height: 304px;
    border-radius: var(--radius-card-md);
  }

  /* md:h-10.5 LMS: поля, ячейки кода и основная кнопка — 42px. */
  .field__input,
  .otp__slot {
    height: 42px;
  }

  .btn--primary {
    min-height: 42px;
  }
}

@media (min-width: 1024px) {
  .card {
    padding: 32px;
  }

  .card__title {
    font-weight: 500;
    line-height: 1.75rem;
    letter-spacing: normal;
  }

  /* AuthChoiceTitle: lg:text-2xl/7. */
  .card__title--choice {
    font-size: 1.375rem;
  }
}

/* Анимаций нет; на случай будущих — выключаем при reduce. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* Место под виджет (его iframe ~100px) заранее: форма не прыгает при загрузке. */
.smart-captcha {
  min-height: 102px;
}

/* SmartCaptcha: captcha.js вставляет эти правила inline-<style>, а CSP
   (style-src 'self') их блокирует — копия отсюда. Без неё окно с заданием
   капчи встаёт в поток страницы, а не модальным слоем. Взято из
   https://smartcaptcha.yandexcloud.net/captcha.js (2026-10-18);
   .smart-captcha{min-width:300px} не взят — шире карточки на 320 px. */
.SmartCaptcha-Overlay {
  z-index: 9999999;
  width: var(--smart-captcha-doc-width, 100%);
  height: var(--smart-captcha-doc-height, 100%);
  background: #0006;
  margin: 0;
  padding: 0;
  position: fixed;
  top: -10000px;
  left: -10000px;
}
.SmartCaptcha-Overlay.SmartCaptcha-Overlay_visible {
  top: 0;
  left: 0;
}
.SmartCaptcha-Overlay.SmartCaptcha-Overlay_no_background {
  background: none;
}
.SmartCaptcha-Spin {
  visibility: hidden;
  box-sizing: border-box;
  border: 2px solid #0000;
  border-radius: 50%;
  display: none;
}
.SmartCaptcha-Overlay .SmartCaptcha-Spin {
  margin: auto;
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
}
.SmartCaptcha-Overlay_visible.SmartCaptcha-Overlay_show_spinner .SmartCaptcha-Spin {
  visibility: visible;
  border-top-color: var(--spin-view-default-border-color, #5282ff);
  border-left-color: var(--spin-view-default-border-color, #5282ff);
  width: 50px;
  height: 50px;
  animation: 1s linear 0.21s infinite smart-captcha-spin;
  display: inline-block;
}
@keyframes smart-captcha-spin {
  to {
    transform: translateY(-50%) rotate(360deg);
  }
}

/* Атрибут hidden сильнее display у .btn/.form: скрытое (passkey без JS) скрыто. */
[hidden] {
  display: none !important;
}

/* Элемент списка в карточке (ключи доступа). */
.item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-input);
}

/* Раздел страницы аккаунта. */
.card__subtitle {
  margin: 8px 0 0;
  font: 500 1rem/1.25rem var(--font-secondary);
  font-feature-settings: inherit; /* shorthand font сбрасывает lnum */
}

/* QR секрета TOTP: SVG со своим белым фоном, тихая зона — внутри. */
.qr {
  align-self: center;
  width: 200px;
  height: 200px;
  border-radius: var(--radius-input);
}

.secret {
  overflow-wrap: anywhere;
}

/* Резервные коды — сеткой в две колонки, моноширинно. */
.codes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 1rem;
  text-align: center;
}