/* Лёгкий CSS для трёх самостоятельных страниц вне SPA: login.html, 404.html,
   suspended.html. Полный style.css (445 КБ / 12,7К строк) им не нужен.

   Это ЕДИНСТВЕННОЕ место, где живут их стили: блок .login-* из style.css
   удалён, дублирующего источника нет и синхронизировать не с чем.
   ⚠ Токены ниже — копия нужного подмножества из style.css: меняешь значение
   токена там (палитра, тёмная тема) — поправь и здесь. Исключение —
   --login-deep-*: этих оттенков в style.css нет вовсе, они только тут.

   Состав: 1) минимальный набор токенов :root/:root[data-theme="dark"], реально
   используемых ниже; 2) базовый reset (*, :focus-visible, body, button,
   input/textarea/select) — без него поедут box-sizing, отступы body,
   унаследованный шрифт/цвет текста и кольцо фокуса; 3) сообщение на белом
   (.msg-* — 404 и «приостановлена»); 4) страница входа (.lg-*). */

:root {
  --bg: #ffffff;
  --bg-soft: #fbfaf8;
  --border: #e9e7e1;
  --text: #1d1b18;
  --accent: #1d1b18;
  --accent-link: #2563b8;
  /* Единое кольцо фокуса для клавиатурной навигации — используется базовым
     :focus-visible ниже (кнопка «Войти»/переключатель показа пароля и т.п.). */
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent-link);
  /* Стеклянный бейдж-иконка логотипа (сквиркл) — используется инлайн-SVG
     логотипа прямо в разметке страниц (var(--brand-badge-*) в fill/stroke). */
  --brand-badge-a: #c3cba2;
  --brand-badge-b: #77835a;
  --brand-badge-ring: #fbfbf3;
  --brand-badge-wave: #31401e;
  /* Палитра самостоятельных страниц. Живёт на :root, а не на классе шелла:
     шеллов два (.lg-page у входа, .msg-page у 404 и «приостановлена»), палитра
     у них одна. */
  --login-accent: #707c3f;
  --login-accent-hover: #5c6634;
  /* Текст на акценте — свой токен: в тёмной теме акцент светлый, и белым по
     нему не прочитать (кнопка «На главную» на 404). */
  --login-accent-text: #ffffff;
  /* Полотно входа. Оттенков, которых нет в style.css, здесь четыре: в
     приложении такой глубины нет и быть не должно, она нужна только на входной
     странице. Выведены из --brand-badge-wave (#31401e). Тёмной пары у них нет
     намеренно — полотно тёмное в обеих темах.
     ⚠ --login-deep-ink и --login-deep-accent читает login.js (tokenRGB), он
     понимает ТОЛЬКО #rrggbb: переписать их на color-mix нельзя, полотно молча
     уедет на фолбэк. */
  --login-deep-1: #262e17;
  --login-deep-2: #141a0c;
  --login-deep-ink: #eff1e1;
  --login-deep-muted: #a4ac82;
  --login-deep-accent: #c7d09b;
  /* Копия --red из style.css (тексты ошибок входа). */
  --login-danger: #c14a34;
  /* Приглушённые чернила выводим из --text, а не хардкодим: --text-muted из
     style.css даёт на бумаге 3,2:1 и для основного текста не проходит. Обе
     ступени замерены и держат AA в обеих темах: -soft 5,9:1, -faint 4,6:1. */
  --login-ink-soft: color-mix(in srgb, var(--text) 68%, var(--bg));
  --login-ink-faint: color-mix(in srgb, var(--text) 62%, var(--bg));
  color-scheme: light;
  font-family: 'Geist', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

:root[data-theme="dark"] {
  --bg: #201e1b;
  --bg-soft: #1a1816;
  --border: #34312c;
  --text: #ededed;
  --accent: #ededed;
  --accent-link: #7fa9dd;
  --brand-badge-a: #aeb884;
  --brand-badge-b: #56613b;
  --brand-badge-ring: #f5f4e9;
  --brand-badge-wave: #2a331a;
  --login-accent: #a8b378;
  --login-accent-hover: #b9c48c;
  --login-accent-text: #201e1b;
  --login-deep-1: #1d2410;
  --login-deep-2: #0d1106;
  --login-danger: #e08573;
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

/* Базовое кольцо фокуса для клавиатурной навигации (как в style.css) —
   иначе на Tab-фокусе кнопки/ссылки на этих страницах покажут дефолтный
   браузерный outline вместо токенизированного кольца. */
:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Поля ввода: убрать кольцо фокуса, оставить нейтральную рамку —
   .lg-control input ниже переопределяет border-color своим акцентом. */
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[contenteditable="true"]:focus-visible {
  box-shadow: none;
  border-color: var(--accent);
}

body {
  margin: 0;
  background: var(--bg-soft);
  color: var(--text);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
}

button {
  font-family: inherit;
  cursor: pointer;
}

input, textarea, select {
  font-family: inherit;
  font-size: 14px;
}

/* ---------- Сообщение на белом: 404 и «компания приостановлена» ----------
   Карточка на оливковом градиенте с двумя размытыми пятнами убрана: обе
   страницы это одна фраза и одно действие, и держать под них отдельный шелл с
   декором незачем. Марка в углу — как на входе; кнопка одна и та же .lg-submit
   на всех трёх страницах. */

.msg-page {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 28px;
  min-height: 100dvh;
  padding: 30px clamp(24px, 5vw, 56px) 44px;
  background: var(--bg);
}

.msg-mark {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.msg-mark b {
  font-weight: 600;
  color: var(--login-accent);
}

.msg-mark-icon {
  display: inline-flex;
  width: 28px;
  height: 28px;
  flex: none;
}

.msg-mark-icon svg {
  width: 100%;
  height: 100%;
}

/* Блок по центру страницы, текст по левому краю: так же, как в колонке формы
   на входе. Центрованный текст здесь читался бы как диалог, а мы от диалога и
   уходим. */
.msg {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  max-width: 44ch;
  margin: 0 auto;
}

.msg h1 {
  margin: 0;
  font-size: 30px;
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.msg p {
  margin: 10px 0 26px;
  color: var(--login-ink-soft);
  font-size: 14px;
  line-height: 1.55;
}

/* Кнопка по центру блока, а не по левому краю: текста здесь две строки, и
   действие одно — на оси оно читается как итог сообщения, а не как продолжение
   абзаца. */
.msg .lg-submit {
  align-self: center;
}

/* ---------- Страница входа: полотно «поток» + бумага с формой ----------
   Две половины вместо карточки по центру. Слева знак бренда в плакатном
   масштабе: поле волн (canvas из login.js) обтекает кольцо «О», сквозь кольцо
   идёт волна — та же пара фигур, что в логотипе. Справа форма.
   aria-hidden стоит только на самом canvas: марка, обещание и перечень
   модулей — обычный текст, скринридер их читает. Без JS остаётся градиент,
   форма работает целиком. */

.lg-page {
  display: grid;
  grid-template-columns: 1.08fr 1fr;
  min-height: 100dvh;
}

/* ── Левая половина ── */

.lg-flow {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 26px;
  overflow: hidden;
  padding: 34px 38px;
  background: radial-gradient(120% 90% at 22% 12%, var(--login-deep-1), var(--login-deep-2) 72%);
  color: var(--login-deep-ink);
}

.lg-flow canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
}

/* Виньетка: гасит поле у краёв, чтобы текст поверх него читался. */
.lg-flow::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to top, rgba(11, 15, 5, 0.88) 4%, rgba(11, 15, 5, 0.55) 26%, transparent 46%),
    linear-gradient(to bottom, rgba(11, 15, 5, 0.5), transparent 20%),
    radial-gradient(120% 80% at 50% 44%, transparent 42%, rgba(11, 15, 5, 0.5));
}

.lg-flow > * {
  position: relative;
  z-index: 2;
}

.lg-mark {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.lg-mark b {
  font-weight: 600;
  color: var(--login-deep-accent);
}

.lg-mark-icon {
  display: inline-flex;
  width: 28px;
  height: 28px;
  flex: none;
}

.lg-mark-icon svg {
  width: 100%;
  height: 100%;
}

/* Текст прижат к низу: верхние две трети полотна отданы кольцу. */
.lg-copy {
  margin-top: auto;
}

.lg-say {
  max-width: 15ch;
  margin: 0;
  font-size: clamp(30px, 3.6vw, 50px);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.032em;
  text-wrap: balance;
}

.lg-say span {
  color: var(--login-deep-accent);
}

.lg-say-sub {
  max-width: 34ch;
  margin: 16px 0 0;
  color: var(--login-deep-muted);
  font-size: 14px;
  line-height: 1.55;
}

.lg-rail {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 0;
  margin: 0;
  padding: 18px 0 0;
  border-top: 1px solid color-mix(in srgb, var(--login-deep-accent) 16%, transparent);
  list-style: none;
  color: var(--login-deep-muted);
  font-family: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.lg-rail li {
  display: inline-flex;
  align-items: center;
}

.lg-rail li + li::before {
  content: '';
  width: 3px;
  height: 3px;
  margin: 0 11px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.5;
}

/* ── Правая половина ── */

.lg-paper {
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 24px;
  padding: 30px clamp(28px, 4.4vw, 64px) 26px;
  background: var(--bg);
}

.lg-form-wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  max-width: 372px;
}

.lg-form-wrap h1 {
  margin: 0;
  font-size: 30px;
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.lg-lede {
  margin: 9px 0 26px;
  color: var(--login-ink-soft);
  font-size: 13.5px;
  line-height: 1.5;
}

.lg-page form {
  display: flex;
  flex-direction: column;
  gap: 15px;
  text-align: left;
}

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

.lg-label {
  color: var(--login-ink-soft);
  font-size: 12px;
  font-weight: 500;
}

.lg-control {
  position: relative;
  display: flex;
  align-items: center;
}

.lg-control-icon {
  position: absolute;
  left: 13px;
  display: inline-flex;
  width: 17px;
  height: 17px;
  color: var(--login-ink-faint);
  pointer-events: none;
  transition: color 0.16s ease;
}

.lg-control-icon svg {
  width: 100%;
  height: 100%;
}

.lg-control:focus-within .lg-control-icon {
  color: var(--login-accent);
}

.lg-control input {
  width: 100%;
  height: 48px;
  padding: 0 42px;
  border: 1px solid var(--border);
  border-radius: 12px;
  outline: none;
  background: var(--bg-soft);
  color: var(--text);
  font-size: 14px;
  transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}

.lg-control input::placeholder {
  color: var(--login-ink-faint);
}

.lg-control input:focus-visible {
  border-color: var(--login-accent);
  background: var(--bg);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--login-accent) 14%, transparent);
}

/* Код 2FA: цифры из приложения либо резервный код из букв и цифр — моно, чтобы
   символы не путались при переписывании с листка. */
.lg-code {
  font-family: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 16px;
  letter-spacing: 0.18em;
}

.lg-peek {
  position: absolute;
  right: 10px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: none;
  color: var(--login-ink-faint);
}

.lg-peek svg {
  width: 18px;
  height: 18px;
}

.lg-peek:hover {
  color: var(--text);
}

.lg-peek.active {
  color: var(--login-accent);
}

/* Слот занимает высоту всегда: без него форма прыгает в момент ошибки. */
.lg-slot {
  min-height: 17px;
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
}

.lg-error {
  color: var(--login-danger);
}

.lg-caps {
  color: var(--login-ink-soft);
}

.lg-error:not(:empty) + .lg-caps {
  display: none;
}

.lg-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 48px;
  margin-top: 3px;
  padding: 0 20px;
  border: none;
  border-radius: 12px;
  background: var(--login-accent);
  color: var(--login-accent-text);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.16s ease;
}

.lg-submit:hover {
  background: var(--login-accent-hover);
}

.lg-submit svg {
  width: 17px;
  height: 17px;
}

.lg-submit-arrow {
  transition: transform 0.2s cubic-bezier(0.3, 0.8, 0.3, 1);
}

.lg-submit:hover .lg-submit-arrow {
  transform: translateX(3px);
}

.lg-hint {
  margin: 14px 0 0;
  color: var(--login-ink-soft);
  font-size: 12.5px;
  line-height: 1.45;
}

.lg-foot {
  margin: 0;
  color: var(--login-ink-faint);
  font-size: 11.5px;
}

/* ── Узкий экран: полотно узкой полосой сверху, форма целиком в первом экране ──
   Главное условие: поля, кнопка и подсказки видны без прокрутки. Поэтому у
   полотна НЕТ доли высоты (было 46dvh — форма уезжала под сгиб): полоса
   занимает столько, сколько нужно марке и одной фразе, остальное берёт форма.
   Всё, что не про вход — подзаголовок и перечень модулей — на этой ширине
   снимается: на телефон приходят входить, а не читать про продукт. */
@media (max-width: 940px) {
  .lg-page {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }

  .lg-flow {
    gap: 14px;
    padding: 18px 22px 20px;
  }

  .lg-say {
    max-width: none;
    font-size: clamp(21px, 6.2vw, 30px);
  }

  .lg-say-sub,
  .lg-rail,
  .lg-foot {
    display: none;
  }

  /* gap: 0 — подпись внизу скрыта, а зазор между строками грида остался бы
     мёртвым и стоил бы 16 px из тех, ради которых всё это делается. */
  .lg-paper {
    gap: 0;
    padding: 20px 22px 18px;
  }

  .lg-form-wrap {
    max-width: none;
  }

  .lg-form-wrap h1 {
    font-size: 24px;
  }

  .lg-lede {
    margin: 6px 0 18px;
    font-size: 13px;
  }

  .lg-page form {
    gap: 12px;
  }

  .lg-control input,
  .lg-submit {
    height: 46px;
  }

  .lg-hint {
    margin: 10px 0 0;
    font-size: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lg-page,
  .lg-page *,
  .msg-page,
  .msg-page * {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}