/* ==========================================================================
   login.css — экран входа в панель (js/login.js)
   --------------------------------------------------------------------------
   Свой неймспейс .lgn-*, а не легаси .auth-card/.input/.btn: те захардкожены
   под тёмный фон (css/legacy/tokens-reset.css:57 `.auth-card` тень .42,
   :204 `.input{background:#111}`, :213 `.btn{background:#fff;color:#111}`) —
   на светлой теме это давало чёрные поля и белую-на-белом кнопку, а `.empty`
   (:308, min-height:180px) раздувал строку ошибки в пустой блок на 180px.
   Здесь всё резолвится через токены base/tokens.css; theme-local переменные
   объявлены на .lgn-screen (паттерн .dtile--chart из bento.css).

   Композиция: одна центрированная колонка — логотип НАД карточкой (голый, без
   капсулы и свечения), карточка на hairline-бордере с мягкой тенью,
   floating-label поля, full-width контрастная кнопка. Ничего сверх формы.

   БЕЗ брендового акцента: оранжевый здесь не используется нигде — ни в кнопке,
   ни в подсветке фокуса. Всё интерактивное строится на --text-strong, поэтому
   кнопка и бордер фокуса сами инвертируются по темам (графит на светлой,
   светлые на тёмной). Красный/жёлтый в .lgn-alert остаются: это статусные
   цвета сообщения, а не акцент.
   ========================================================================== */

.lgn-screen {
  /* --- theme-local --- */
  --lgn-muted: color-mix(in srgb, var(--text-strong) 62%, transparent);
  --lgn-hairline: color-mix(in srgb, var(--text-strong) 16%, var(--border));
  --lgn-field-bg: var(--bg-surface);
  --lgn-ink: var(--text-strong);
  --lgn-ring: color-mix(in srgb, var(--text-strong) 13%, transparent);
  --lgn-shadow: 0 1px 2px rgba(16, 19, 25, .05), 0 18px 44px -16px rgba(16, 19, 25, .18);
  --lgn-ease: cubic-bezier(.4, 0, .2, 1);

  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 32px 20px calc(32px + env(safe-area-inset-bottom, 0px));
  background: var(--bg);
}

/* Тёмная тема: поле уходит НИЖЕ карточки (--bg темнее --card-bg), тень глубже,
   кромка карточки чуть светлее --border — иначе край тонет в фоне. */
[data-theme="dark"] .lgn-screen {
  --lgn-field-bg: var(--bg);
  --lgn-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 26px 60px -20px rgba(0, 0, 0, .66);
}
[data-theme="dark"] .lgn-card { border-color: color-mix(in srgb, var(--text-strong) 8%, var(--border)); }

.lgn-col {
  width: min(400px, 100%);
  animation: lgn-in .38s cubic-bezier(.16, 1, .3, 1) both;
}

/* ---- Логотип: над карточкой, по центру, без подложки ---- */
.lgn-mark {
  display: block;
  width: 56px;
  height: 56px;
  margin: 0 auto 26px;
  object-fit: contain;
}

/* ---- Карточка ---- */
.lgn-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 30px 28px 28px;
  box-shadow: var(--lgn-shadow);
}

.lgn-title {
  margin: 0;
  font-size: 24px;
  line-height: 1.16;
  font-weight: calc(700 + var(--fw-adjust));
  letter-spacing: -.022em;
  color: var(--text-strong);
}

.lgn-sub {
  margin: 7px 0 24px;
  font-size: 14px;
  line-height: 1.45;
  font-weight: calc(500 + var(--fw-adjust));
  color: var(--lgn-muted);
}

/* ---- Поля с плавающим лейблом ----------------------------------------
   `placeholder=" "` в разметке — обязателен: состояние лейбла считывается
   через :placeholder-shown (работает и при autofill, там значение уже есть). */
.lgn-form {
  display: grid;
  gap: 10px;
}

.lgn-field {
  position: relative;
  display: block;
}

.lgn-form .lgn-input {
  width: 100%;
  height: 56px;
  padding: 23px 14px 7px;
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: calc(500 + var(--fw-adjust));
  line-height: 1.2;
  color: var(--text-strong);
  background: var(--lgn-field-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  outline: none;
  transition: border-color .16s var(--lgn-ease), box-shadow .16s var(--lgn-ease), background .16s var(--lgn-ease);
}

.lgn-form .lgn-input::placeholder { color: transparent; }

.lgn-form .lgn-input:hover { border-color: var(--lgn-hairline); }

.lgn-form .lgn-input:focus {
  background: var(--card-bg);
  border-color: var(--lgn-ink);
  box-shadow: 0 0 0 3px var(--lgn-ring);
}

/* Chrome autofill перекрашивает поле собственным жёлтым/синим фоном — гасим
   инсет-тенью в цвет поля. На фокусе возвращаем и кольцо (одно свойство). */
.lgn-form .lgn-input:-webkit-autofill,
.lgn-form .lgn-input:-webkit-autofill:hover {
  -webkit-text-fill-color: var(--text-strong);
  -webkit-box-shadow: 0 0 0 1000px var(--lgn-field-bg) inset;
  caret-color: var(--text-strong);
  transition: background-color 600000s 0s;
}
.lgn-form .lgn-input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--card-bg) inset, 0 0 0 3px var(--lgn-ring);
}

.lgn-label {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  transform-origin: left center;
  font-size: 15px;
  font-weight: calc(500 + var(--fw-adjust));
  line-height: 1.2;
  color: var(--lgn-muted);
  pointer-events: none;
  white-space: nowrap;
  transition: transform .16s var(--lgn-ease), color .16s var(--lgn-ease);
}

.lgn-input:focus + .lgn-label,
.lgn-input:not(:placeholder-shown) + .lgn-label {
  transform: translateY(calc(-50% - 13px)) scale(.74);
}

.lgn-input:focus + .lgn-label { color: var(--lgn-ink); }

/* ---- Кнопка ---- */
.lgn-submit {
  position: relative;
  overflow: hidden;
  margin-top: 8px;
  width: 100%;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 10px;
  background: var(--lgn-ink);
  color: var(--bg);
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: calc(700 + var(--fw-adjust));
  letter-spacing: -.01em;
  transition: background .15s var(--lgn-ease), transform .15s var(--lgn-ease);
}

/* hover подмешивает фон темы: чернильная кнопка светлеет, светлая уходит в серый */
.lgn-submit:hover:not(:disabled) { background: color-mix(in srgb, var(--lgn-ink) 86%, var(--bg)); }
.lgn-submit:active:not(:disabled) { transform: scale(.985); }
.lgn-submit:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--lgn-ring); }
.lgn-submit:disabled { cursor: progress; opacity: .74; }

/* Ожидание ответа /auth/login — не спиннер, а полоска по нижней кромке кнопки
   (индетерминированная, ~1.1s: быстрее — дёргается, медленнее — «завис»). */
.lgn-submit[data-busy]::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 38%;
  height: 2px;
  background: currentColor;
  opacity: .55;
  animation: lgn-sweep 1.1s var(--lgn-ease) infinite;
}

/* ---- Ошибка / пояснение ---- */
/* Радиус/паддинг НАМЕРЕННО меньше, чем у поля (8 vs 10, 10 vs 23) — иначе
   тинтованный блок читается как третий инпут. */
.lgn-alert {
  margin: 0 0 16px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.45;
  font-weight: calc(500 + var(--fw-adjust));
  background: var(--red-bg);
  border: 1px solid color-mix(in srgb, var(--red) 30%, transparent);
  /* чистый --red на своём же 12%-фоне даёт ~3.3:1 — подмешиваем --text-strong
     до ≥4.5:1 в обеих темах */
  color: color-mix(in srgb, var(--red) 72%, var(--text-strong));
}

.lgn-alert--note {
  background: color-mix(in srgb, var(--yellow) 12%, transparent);
  border-color: color-mix(in srgb, var(--yellow) 30%, transparent);
  color: color-mix(in srgb, var(--yellow) 62%, var(--text-strong));
}

@keyframes lgn-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

@keyframes lgn-sweep {
  from { transform: translateX(-110%); }
  to   { transform: translateX(275%); }
}

/* ---- ≤460px: 16px в поле, иначе iOS Safari зумит страницу на фокусе ---- */
@media (max-width: 460px) {
  .lgn-card { padding: 26px 20px 24px; border-radius: 14px; }
  .lgn-mark { width: 48px; height: 48px; margin-bottom: 20px; }
  .lgn-title { font-size: 22px; }
  .lgn-form .lgn-input,
  .lgn-label { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .lgn-col,
  .lgn-submit[data-busy]::after { animation: none !important; }
  .lgn-form .lgn-input,
  .lgn-label,
  .lgn-submit { transition: none !important; }
}