/* Экраны аккаунта: вход, регистрация, сброс пароля.
 * Числа из фреймов «04 - Log In», «06 - Registration», «09 - Password Reset».
 * В макете это карточки поверх страницы; здесь — отдельные маршруты (F4),
 * поэтому карточка центрируется на светлой подложке макета.
 */

.auth { background: var(--color-bg-light); color: var(--color-text-dark); padding-block: var(--space-48); }
.auth__inner { display: flex; justify-content: center; }

.auth__card {
  display: flex; flex-direction: column; gap: var(--space-24);
  width: 460px; max-width: 100%; padding: var(--space-32);
  background: var(--color-bg-light);
  border: 1px solid var(--color-border-light); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.auth__card--wide { width: 720px; }

.auth__header { display: flex; align-items: center; justify-content: space-between; }
.auth__title-block { display: flex; flex-direction: column; gap: var(--space-4); }
.auth__title {
  font-family: var(--font-text);
  font-size: var(--fs-h2); font-weight: 900; line-height: 35px; letter-spacing: -.5px;
  text-transform: uppercase; color: var(--color-text-dark);
}
.auth__sub {
  font-family: var(--font-text);
  font-size: var(--fs-body); line-height: 20px; color: var(--color-text-dark);
}
.auth__note {
  font-family: var(--font-text);
  font-size: var(--fs-sm); line-height: 20px; color: var(--color-text-dark-muted);
}

.auth__form { display: flex; flex-direction: column; gap: var(--space-20); }
.auth__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-16); }
.auth__grid-full { grid-column: 1 / -1; }

/* Поля на светлой карточке: белый ввод в рамке, как в макете. */
.auth .field__label {
  font-family: var(--font-text);
  font-size: var(--fs-body); font-weight: 700; line-height: 15.23px; color: var(--color-text-dark);
}
.auth .field input,
.auth .field select {
  min-height: 48px; padding: var(--space-12);
  background: var(--color-card);
  border: 1px solid var(--color-border-light); border-radius: var(--radius-10);
  font-family: var(--font-text); font-size: var(--fs-body); line-height: 15.23px;
  color: var(--color-text-dark);
}
.auth .field input:focus, .auth .field select:focus {
  border-color: var(--color-text-dark); box-shadow: var(--focus-ring-dark);
}
.auth .field__hint { font-family: var(--font-text); font-size: var(--fs-xs); color: var(--color-text-dark-muted); }

/* Поле с кнопкой «Show»: кнопка лежит внутри рамки, поэтому обрамление
   рисует обёртка, а у самого input рамки нет — иначе будет двойная. */
.field__with-action {
  display: flex; align-items: center; gap: var(--space-8);
  padding-right: var(--space-12);
  background: var(--color-card);
  border: 1px solid var(--color-border-light); border-radius: var(--radius-10);
}
.field__with-action:focus-within { border-color: var(--color-text-dark); box-shadow: var(--focus-ring-dark); }
.auth .field__with-action input { flex: 1; border: 0; box-shadow: none; background: transparent; }
.auth .field__with-action input:focus { box-shadow: none; }
.field__toggle {
  flex: none;
  padding: var(--space-6) var(--space-10);
  background: var(--color-card);
  border: 1px solid var(--color-border-light); border-radius: var(--radius-pill);
  font-family: var(--font-text);
  font-size: var(--fs-2xs); font-weight: 800; line-height: 13px; letter-spacing: .5px;
  text-transform: uppercase; color: var(--color-text-dark); cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease);
}
.field__toggle:hover { background: var(--color-bg-light); }

.auth__legals { display: flex; flex-direction: column; gap: var(--space-12); }
.auth__legals .field__label {
  font-size: var(--fs-sm); font-weight: 400; line-height: 18px; color: var(--color-text-dark-muted);
}
.auth__legals a { color: var(--color-text-dark); text-decoration: underline; text-underline-offset: 2px; }

.auth__actions { display: flex; flex-direction: column; align-items: center; gap: var(--space-16); }
.auth__submit {
  width: 100%; min-height: 52px; padding: var(--space-14, 14px) 0;
  border-radius: var(--radius-12);
  font-family: var(--font-text);
  font-size: var(--fs-body); font-weight: 900; line-height: 15.23px; letter-spacing: 1px;
  text-transform: uppercase;
}
.auth__redirect {
  font-family: var(--font-text);
  font-size: var(--fs-xs); font-weight: 500; line-height: 13.06px; color: var(--color-text-dark);
}
.auth__redirect a {
  font-weight: 800; color: var(--color-text-dark);
  text-decoration: underline; text-underline-offset: 3px;
  position: relative;
}
/* Тап-зона 24px псевдоэлементом: паддинг сдвинул бы строку под кнопкой. */
.auth__redirect a::after { content: ""; position: absolute; inset: 50% 0 auto 0; translate: 0 -50%; height: 24px; }

@media (max-width: 767px) {
  .auth { padding-block: var(--space-24); }
  .auth__card { gap: var(--space-16); padding: var(--space-20); }
  .auth__title { font-size: var(--fs-h3); line-height: 30px; }
  .auth__grid { grid-template-columns: 1fr; }
  .auth__form { gap: var(--space-16); }
}