/*
 * forms.css — переиспользуемые текстовые поля и микро-формы пользовательского UI.
 * Визуальный язык — тот же, что у .stepper (common.css): pill-radius, liquid-glass,
 * полупрозрачная заливка. Применяется там, где нужен текстовый ввод (email/пароль и т.п.).
 */

/* =============================================
   .text-field — базовое текстовое поле
   Первый переиспользуемый текстовый инпут user-UI.
   Визуал повторяет .stepper (border-radius-pill + blur + alpha-border).
   ============================================= */
.text-field {
    width: 100%;
    box-sizing: border-box;
    border-radius: var(--border-radius-pill);
    border: 1px solid rgb(255 255 255 / 0.12);
    background: color-mix(in srgb, var(--color-background-dark-1) 36%, transparent);
    -webkit-backdrop-filter: blur(14px) saturate(1.25);
    backdrop-filter: blur(14px) saturate(1.25);
    /* padding как у .button--primary / .stepper-обёртки — из единой шкалы */
    padding: var(--padding-small) var(--padding-middle);
    color: var(--color-text-light-1);
    font: inherit;
    /* Плавный переход акцента на фокусе */
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.text-field::placeholder {
    color: rgb(255 255 255 / 0.4);
}

.text-field:focus {
    outline: none;
    border-color: var(--color-accent-main);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent-main) 35%, transparent);
}

/* Автозаполнение браузера не должно сбрасывать liquid-glass-фон */
.text-field:-webkit-autofill,
.text-field:-webkit-autofill:hover,
.text-field:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--color-text-light-1);
    transition: background-color 9999s ease-in-out 0s;
}

/* =============================================
   .oauth-email-form — swap-форма входа по email (Flow 2).
   Показывается вместо .oauth-sign-in-actions при клике «Войти по email».
   ============================================= */
.oauth-email-form {
    display: flex;
    flex-direction: column;
    gap: var(--padding-small);
}

.oauth-email-form[hidden] {
    display: none;
}

.oauth-email-form-actions {
    margin-top: var(--padding-micro);
}

/* Поле в ошибочном состоянии — рамка ошибки, текст ошибки рядом через .error-message--oauth-sign-in */
.text-field--error {
    border-color: var(--color-text-red-1);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-text-red-1) 28%, transparent);
}