/* ════════════════════════════════════════════════════════════════════
   Модальное окно входа. Построено на нативном <dialog>: фокус-ловушка,
   Esc и затемнение достаются от браузера, нам остаётся внешний вид.
   ════════════════════════════════════════════════════════════════════ */

.auth {
  /* <dialog> по умолчанию — inline-блок с рамкой и авто-шириной. */
  width: min(440px, calc(100vw - var(--sp-8)));
  max-height: calc(100dvh - var(--sp-8));
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--c-text);
  /* Без прокрутки max-height просто обрезает панель, и на низком окне
     (телефон в альбоме, короткое окно десктопа) поле пароля и кнопка
     входа становятся недостижимы ничем: диалог фиксирован, страница под
     ним заперта, scrollIntoView внутри него не работает. */
  overflow-y: auto;
  overscroll-behavior: contain;
}

.auth::backdrop {
  background: rgba(4, 7, 6, 0.72);
  -webkit-backdrop-filter: blur(10px) saturate(0.85);
          backdrop-filter: blur(10px) saturate(0.85);
  animation: auth-backdrop-in calc(0.32s * var(--motion, 1)) var(--ease-out) both;
}
.auth.is-closing::backdrop {
  animation: auth-backdrop-out calc(0.24s * var(--motion, 1)) var(--ease-soft) both;
}

@keyframes auth-backdrop-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes auth-backdrop-out { from { opacity: 1; } to { opacity: 0; } }

/* ── Панель ────────────────────────────────────────────────────────── */

.auth__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  padding: var(--sp-8) var(--sp-7) var(--sp-7);
  border-radius: var(--r-xl);
  background:
    radial-gradient(ellipse 80% 60% at 50% -10%,
      color-mix(in srgb, var(--c-accent) 12%, transparent), transparent 70%),
    var(--c-surface);
  border: 1px solid var(--c-line);
  box-shadow: var(--shadow-pop);
  animation: auth-in calc(0.38s * var(--motion, 1)) var(--ease-out) both;
}
.auth.is-closing .auth__panel {
  animation: auth-out calc(0.24s * var(--motion, 1)) var(--ease-soft) both;
}

@keyframes auth-in {
  from { opacity: 0; transform: translateY(18px) scale(0.96); }
  to   { opacity: 1; transform: none; }
}
@keyframes auth-out {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateY(10px) scale(0.98); }
}

/* Тонкая акцентная линия по верхнему краю — «свет из-за панели». */
.auth__panel::before {
  content: '';
  position: absolute;
  inset: 0 auto auto;
  left: 12%;
  right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--c-accent), transparent);
  opacity: 0.8;
}

/* Встряска при отказе сервера. */
.auth__panel.is-error {
  animation: auth-shake calc(0.42s * var(--motion, 1)) var(--ease-soft) both;
  border-color: color-mix(in srgb, var(--c-live) 45%, transparent);
}
@keyframes auth-shake {
  0%, 100% { transform: translateX(0); }
  15%      { transform: translateX(-8px); }
  30%      { transform: translateX(7px); }
  45%      { transform: translateX(-5px); }
  60%      { transform: translateX(3px); }
  80%      { transform: translateX(-1px); }
}

.auth__panel.is-success {
  border-color: color-mix(in srgb, var(--c-accent) 55%, transparent);
}

/* ── Шапка окна ────────────────────────────────────────────────────── */

.auth__head {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding-right: var(--sp-8); /* место под крестик */
}

.auth__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--c-accent);
}

.auth__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
}

.auth__accent { color: var(--c-accent); }

.auth__subtitle {
  font-size: var(--fs-xs);
  line-height: var(--lh-normal);
  color: var(--c-muted);
}

.auth__close {
  position: absolute;
  top: var(--sp-5);
  right: var(--sp-5);
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--r-md);
  color: var(--c-dim);
  transition: color var(--t-fast), background var(--t-fast), transform var(--t-fast);
}
.auth__close:hover {
  color: var(--c-text);
  background: var(--c-fill-hover);
  transform: rotate(90deg);
}

/* ── Поля ──────────────────────────────────────────────────────────── */

.auth__form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.auth__field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.auth__label {
  font-size: var(--fs-2xs);
  font-weight: 500;
  color: var(--c-muted);
}

.auth__control { position: relative; }

.auth__input {
  width: 100%;
  height: 52px;
  padding: 0 var(--sp-4);
  border-radius: var(--r-md);
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  color: var(--c-text);
  font-size: var(--fs-md);
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}
.auth__input::placeholder { color: var(--c-dim); }
.auth__input:hover { border-color: var(--c-line-strong); }
.auth__input:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--c-accent) 60%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-accent) 16%, transparent);
}
.auth__input[aria-invalid="true"] {
  border-color: color-mix(in srgb, var(--c-live) 60%, transparent);
}
.auth__input[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-live) 18%, transparent);
}
/* Место под кнопку-глаз в поле пароля. */
.auth__input--password { padding-right: 52px; }

/* Автозаполнение Chrome перекрашивает поле в белый — возвращаем тему. */
.auth__input:-webkit-autofill,
.auth__input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--c-text);
  -webkit-box-shadow: 0 0 0 1000px var(--c-bg) inset;
  caret-color: var(--c-text);
}

.auth__peek {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--r-sm);
  color: var(--c-dim);
  transition: color var(--t-fast), background var(--t-fast);
}
.auth__peek:hover { color: var(--c-text); background: var(--c-fill-hover); }
.auth__peek[aria-pressed="true"] { color: var(--c-accent); }
.auth__peek[aria-pressed="true"] .auth__peek-slash { opacity: 0; }
.auth__peek-slash { transition: opacity var(--t-fast); }

.auth__hint {
  min-height: 1em;
  font-size: var(--fs-2xs);
  line-height: 1.3;
  color: var(--c-live);
}

.auth__caps:not(.is-visible) { display: none; }

.auth__caps {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: 0.06em;
  color: var(--c-warn);
}

/* ── Ошибка от сервера ─────────────────────────────────────────────── */

.auth__error {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--c-live) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--c-live) 34%, transparent);
  color: var(--c-text);
  font-size: var(--fs-xs);
  line-height: var(--lh-normal);
  animation: auth-error-in calc(0.3s * var(--motion, 1)) var(--ease-out) both;
}
/* Скрыт по умолчанию, но остаётся в дереве — см. комментарий в разметке. */
.auth__error:not(.is-visible) {
  display: none;
}
@keyframes auth-error-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
.auth__error::before {
  content: '';
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--c-live);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-live) 22%, transparent);
}

/* ── Кнопка отправки ───────────────────────────────────────────────── */

.auth__submit { position: relative; overflow: hidden; }

.auth__submit.is-pending {
  color: transparent;
  pointer-events: none;
}
/* Спиннер рисуется поверх текста, поэтому ширина кнопки не прыгает. */
.auth__submit.is-pending::after {
  content: '';
  position: absolute;
  inset: 50% auto auto 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border: 2px solid color-mix(in srgb, var(--c-bg) 35%, transparent);
  border-top-color: var(--c-bg);
  border-radius: 50%;
  animation: auth-spin 0.7s linear infinite;
}
@keyframes auth-spin { to { transform: rotate(360deg); } }

/* Ожидание по 429 — это не «идёт запрос»: текст обратного отсчёта должен
   быть виден, поэтому у него свой класс без color: transparent и спиннера. */
.auth__submit.is-cooldown {
  background: var(--c-fill);
  border: 1px solid var(--c-line-strong);
  color: var(--c-muted);
  font-variant-numeric: tabular-nums;
  /* .btn[disabled] гасит кнопку до 55% — отсчёт должен читаться. */
  opacity: 1;
}
.auth__submit.is-cooldown::after { content: none; }

/* ── Подвал окна ───────────────────────────────────────────────────── */

.auth__foot {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--c-line);
}

.auth__note {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  font-size: var(--fs-2xs);
  line-height: var(--lh-normal);
  color: var(--c-muted);
}
.auth__note .icon { margin-top: 2px; color: var(--c-accent); }

.auth__legal {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-xs);
  letter-spacing: 0.06em;
  color: var(--c-dim);
}

@media (max-width: 480px) {
  .auth__panel { padding: var(--sp-7) var(--sp-5) var(--sp-6); }
  .auth__input { height: 48px; }
}

/* Отключённое движение: окно появляется сразу, встряски нет. */
@media (prefers-reduced-motion: reduce) {
  .auth::backdrop,
  .auth__panel,
  .auth__error { animation: none; }
  .auth__panel.is-error { animation: none; }
  .auth__close:hover { transform: none; }
}