/* ОКНО ВХОДА И РЕГИСТРАЦИИ
 *
 * Общее для всего сайта. Отдельных страниц входа
 * и регистрации больше нет — человек остаётся там, где был.
 *
 * Одето как сцены страницы книг: тёмно-синий фон с фото
 * крыла и мягким голубым светом, тонкая золотая рамка как
 * на обложке, Cormorant в заголовке, плоские кнопки
 * с разрядкой, главная — золотая.
 */

.auth-modal {
    --au-ink: #0b1d2b;
    --au-gold: #d8b46a;
    --au-gold-soft: rgba(216, 180, 106, 0.35);
    --au-ease: cubic-bezier(.2, .7, .2, 1);

    position: fixed;
    inset: 0;
    z-index: 900;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 20px;
}

.auth-modal[hidden] {
    display: none;
}

.auth-backdrop {
    position: absolute;
    inset: 0;

    /* Затемнение в синеву сцены и размытие: вместе они
       читаются мягче, чем одна плотная заливка */
    background: rgba(11, 29, 43, 0.45);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.auth-dialog {
    position: relative;
    z-index: 1;
    isolation: isolate;

    width: min(440px, 100%);
    max-height: calc(100vh - 40px);
    overflow-y: auto;

    padding: 46px 40px 38px;

    background:
        radial-gradient(70% 45% at 50% 0%, rgba(56, 183, 215, 0.1), transparent 70%),
        linear-gradient(180deg, rgba(3, 9, 15, 0.92), rgba(3, 9, 15, 0.98)),
        url("/static/images/bg-window.webp") 85% 100% / cover no-repeat,
        var(--au-ink);
    border: 1px solid var(--au-gold-soft);
    border-radius: 0;

    color: var(--white);

    box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.75);

    scrollbar-color: rgba(216, 180, 106, 0.4) transparent;
}

/* Вторая тонкая рамка внутри — как на обложке книги */

.auth-dialog::before {
    content: "";

    position: absolute;
    inset: 7px;
    z-index: -1;

    border: 1px solid rgba(216, 180, 106, 0.14);

    pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {

    @keyframes auth-in {
        from {
            opacity: 0;
            transform: translateY(18px) scale(0.985);
        }
    }

    @keyframes auth-fade {
        from { opacity: 0; }
    }

    .auth-modal:not([hidden]) .auth-backdrop {
        animation: auth-fade 0.35s ease both;
    }

    .auth-modal:not([hidden]) .auth-dialog {
        animation: auth-in 0.55s var(--au-ease) both;
    }
}


/* ========================================
   КРЕСТИК
======================================== */

/* Нарисован полосками: знак умножения сидит по
   математической оси шрифта и выглядит смещённым */

.auth-close {
    position: absolute;
    top: 16px;
    right: 16px;

    width: 34px;
    height: 34px;

    padding: 0;
    border: 1px solid transparent;
    border-radius: 0;
    background: transparent;

    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;

    transition: color 0.2s ease, border-color 0.2s ease;
}

.auth-close::before,
.auth-close::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;

    width: 14px;
    height: 1px;

    background: currentColor;
}

.auth-close::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.auth-close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

@media (hover: hover) {

    .auth-close:hover {
        color: var(--au-gold);
        border-color: var(--au-gold-soft);
    }
}

.auth-close:focus-visible {
    outline: 2px solid var(--au-gold);
    outline-offset: 2px;
}


/* ========================================
   ЗАГОЛОВОК И ФОРМА
======================================== */

.auth-heading {
    margin: 0 0 12px;

    font-family: var(--font-header);
    font-size: 42px;
    font-weight: 500;
    line-height: 1;

    text-transform: none;
    letter-spacing: 0.01em;

    color: var(--white);
}

.auth-sub {
    margin: 0 0 26px;

    color: rgba(255, 255, 255, 0.72);
    font-size: 14px;
    line-height: 1.65;
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Поля — как поле почты у бесплатной книги */

.auth-form input {
    height: 50px;
    padding: 0 16px;

    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 0;

    color: var(--white);
    font-family: var(--font-body);
    font-size: 15px;

    outline: none;

    transition:
        border-color 0.2s ease,
        background-color 0.2s ease;
}

.auth-form input[hidden] {
    display: none;
}

.auth-form input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.auth-form input:focus {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--au-gold);
}

/* Автозаполнение браузера красит поле в белое — возвращаем синеву */

.auth-form input:-webkit-autofill,
.auth-form input:-webkit-autofill:hover,
.auth-form input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--white);
    -webkit-box-shadow: 0 0 0 40px #13293a inset;
    caret-color: var(--white);
    transition: background-color 9999s ease 0s;
}

/* Главная кнопка — золотая, на наведении белая */

.auth-form button {
    min-height: 52px;
    margin-top: 8px;

    background: var(--au-gold);
    border: 1px solid var(--au-gold);
    border-radius: 0;

    color: var(--au-ink);
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;

    text-transform: uppercase;
    letter-spacing: 2.4px;

    cursor: pointer;

    transition:
        transform 0.25s var(--au-ease),
        background-color 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        opacity 0.2s ease;
}

.auth-form button:disabled {
    opacity: 0.6;
    cursor: default;
}

@media (hover: hover) {

    .auth-form button:hover:not(:disabled) {
        transform: translateY(-2px);

        background: var(--white);
        border-color: var(--white);

        box-shadow: 0 18px 34px -18px rgba(0, 0, 0, 0.6);
    }
}

.auth-form button:focus-visible,
.auth-code-actions button:focus-visible,
.auth-done-button:focus-visible {
    outline: 2px solid var(--au-gold);
    outline-offset: 3px;
}

.auth-note {
    margin: 8px 0 0;

    color: rgba(255, 255, 255, 0.55);
    font-size: 12px;
    line-height: 1.55;
}

.auth-note:empty {
    display: none;
}

.auth-error {
    margin: 6px 0 0;

    color: #ffb4a8;
    font-size: 13px;
    line-height: 1.45;
}


/* ========================================
   ЭКРАН «ВЫ ЗАПИСАНЫ»
======================================== */

.auth-done {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.auth-done[hidden] {
    display: none;
}

/* Галочка — это угол: у прямоугольника оставлены две
   стороны, правая и нижняя, и он повёрнут на 45 градусов.
   Так линии сходятся сами и не разъезжаются, как было
   у двух отдельных полосок. */

.auth-done-mark {
    position: relative;

    width: 64px;
    height: 64px;
    margin-bottom: 22px;

    border: 1px solid var(--au-gold);
    border-radius: 50%;

    box-shadow: 0 0 34px 4px rgba(56, 183, 215, 0.25);
}

.auth-done-mark::after {
    content: "";

    position: absolute;
    left: 50%;
    top: 47%;

    width: 12px;
    height: 22px;

    border-right: 1.5px solid var(--au-gold);
    border-bottom: 1.5px solid var(--au-gold);

    /* Сдвиг вверх-влево на половину — потому что зрительный
       центр галочки ниже и правее центра её рамки */
    transform: translate(-50%, -55%) rotate(45deg);
}

.auth-done-text {
    margin: 10px 0 0;
    max-width: 290px;

    color: rgba(255, 255, 255, 0.72);
    font-size: 15px;
    line-height: 1.65;
}

.auth-done-button {
    min-height: 50px;
    margin-top: 26px;
    padding: 0 34px;

    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 0;

    color: var(--white);
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;

    text-transform: uppercase;
    letter-spacing: 2.4px;

    cursor: pointer;

    transition:
        background-color 0.25s ease,
        border-color 0.25s ease,
        color 0.25s ease;
}

@media (hover: hover) {

    .auth-done-button:hover:not(:disabled) {
        background: var(--au-gold);
        border-color: var(--au-gold);
        color: var(--au-ink);
    }
}


/* ========================================
   ЗНАК ШКОЛЫ
======================================== */

/* Бабочка и название над заголовком — так окно
   опознаётся как своё, а не как форма ниоткуда */

.auth-mark {
    margin-bottom: 16px;

    font-size: 26px;
    line-height: 1;
}

.auth-mark img {
    filter: brightness(1.45) drop-shadow(0 0 10px rgba(56, 183, 215, 0.45));
}

.auth-brand {
    margin-bottom: 14px;

    color: var(--au-gold);

    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 600;

    text-transform: uppercase;
    letter-spacing: 4px;
}


/* ========================================
   ПАРОЛЬ С ГЛАЗКОМ
======================================== */

/* Пароль набирают вслепую и ошибаются, а ошибка видна только
   отказом входа. Кнопка лежит внутри поля, чтобы не отнимать
   у формы отдельную строку. */

.auth-password {
    position: relative;
    display: flex;
}

.auth-password input {
    flex: 1;

    /* Место под кнопку, иначе длинный пароль уезжает под неё */
    padding-right: 96px;
}

/* Перебиваем .auth-form button: та кнопка залитая, во всю ширину и
   в прописных, а здесь нужна тихая надпись внутри поля. Селектор из
   двух классов — чтобы взять верх по весу, а не по порядку. */

.auth-form .auth-eye,
.auth-eye {
    position: absolute;
    right: 1px;
    top: 1px;
    bottom: 1px;

    width: auto;
    min-height: 0;
    margin: 0;
    padding: 0 14px;

    background: transparent;
    border: 0;
    border-radius: 0;

    color: var(--au-gold);

    font-family: inherit;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 1.6px;
    text-transform: uppercase;

    cursor: pointer;
}

@media (hover: hover) {

    .auth-eye:hover {
        background: rgba(255, 255, 255, 0.06);
    }
}


/* ========================================
   ЗАБЫЛИ ПАРОЛЬ
======================================== */

/* Та же история: ссылка, а не вторая главная кнопка. */

.auth-form .auth-forgot,
.auth-forgot {
    width: auto;
    min-height: 0;
    margin: 12px auto 0;
    padding: 4px;

    background: none;
    border: 0;

    text-transform: none;
    font-weight: 400;
    letter-spacing: 0;

    color: rgba(255, 255, 255, 0.6);

    font-family: inherit;
    font-size: 13px;

    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.25);
    text-underline-offset: 4px;

    cursor: pointer;

    transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

/* «Назад ко входу» стоит вне формы — ставим по центру */

.auth-recover > .auth-forgot {
    display: block;
}

@media (hover: hover) {

    .auth-forgot:hover {
        color: var(--au-gold);
        text-decoration-color: var(--au-gold-soft);
    }
}


/* ========================================
   КОД ОТ ДНЕВНИКА
======================================== */

/* Экран показывается один раз в жизни аккаунта. Код здесь —
   главное, поэтому он крупный, моноширинный и с разрядкой:
   его будут переписывать руками. */

.auth-code-value {
    margin: 20px 0;
    padding: 18px 12px;

    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--au-gold);
    border-radius: 0;

    color: var(--white);

    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 17px;
    letter-spacing: .12em;
    text-align: center;
    word-break: break-all;

    user-select: all;
}

.auth-code-actions {
    display: flex;
    gap: 8px;
}

.auth-code-actions button {
    flex: 1;

    min-height: 44px;

    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 0;

    color: var(--white);

    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.8px;
    text-transform: uppercase;

    cursor: pointer;

    transition: border-color 0.2s ease, color 0.2s ease;
}

@media (hover: hover) {

    .auth-code-actions button:hover {
        border-color: var(--au-gold);
        color: var(--au-gold);
    }
}

/* Предупреждение должно читаться как предупреждение, а не как
   ещё один абзац мелким шрифтом. */

.auth-warning {
    margin: 18px 0;
    padding: 12px 14px;

    background: rgba(216, 180, 106, 0.10);
    border-left: 2px solid var(--au-gold);

    color: rgba(255, 255, 255, 0.85);

    font-size: 13px;
    line-height: 1.55;
}

.auth-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;

    margin-bottom: 16px;

    color: rgba(255, 255, 255, 0.85);

    font-size: 14px;
    cursor: pointer;
}

.auth-check input {
    width: 18px;
    height: 18px;

    margin: 1px 0 0;
    flex: 0 0 auto;

    accent-color: var(--au-gold);

    cursor: pointer;
}

.auth-done-button:disabled {
    opacity: .45;
    cursor: default;
}

/* Кнопка «Продолжить» после кода — главная, значит золотая */

.auth-code .auth-done-button {
    width: 100%;
    margin-top: 6px;

    background: var(--au-gold);
    border-color: var(--au-gold);
    color: var(--au-ink);
}

@media (hover: hover) {

    .auth-code .auth-done-button:hover:not(:disabled) {
        background: var(--white);
        border-color: var(--white);
    }
}


/* ========================================
   ПЕРЕКЛЮЧАТЕЛЬ РЕЖИМА
======================================== */

/* «Уже есть аккаунт? — Войти» и наоборот. Подпись и кнопка стоят в
   строку: это один вопрос с одним ответом, а не два действия. */

.auth-switch {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;

    margin-top: 18px;
    padding-top: 18px;

    border-top: 1px solid rgba(255, 255, 255, 0.14);

    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
}

.auth-form .auth-switch button,
.auth-switch button {
    width: auto;
    min-height: 0;
    margin: 0;
    padding: 0;

    background: none;
    border: 0;

    color: var(--au-gold);

    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;

    text-decoration: underline;
    text-decoration-color: var(--au-gold-soft);
    text-underline-offset: 4px;

    cursor: pointer;
}


/* ========================================
   ТИХИЕ КНОПКИ НА НАВЕДЕНИИ
======================================== */

/* В форме есть одна главная кнопка — залитая, и правило её наведения
   .auth-form button:hover весит больше одиночного класса. Поэтому без
   этого блока глазок, «забыли пароль» и переключатель режима на
   наведении заливались во всю ширину.
 *
 * Селекторы здесь той же длины, но стоят ниже по файлу — этого хватает,
 * чтобы взять верх. Держим их вместе: разойдутся по файлу — кто-нибудь
 * поправит одно и не заметит остальных, как уже случилось. */

@media (hover: hover) {

    /* Имя тега в селекторе обязательно: у .auth-form button:hover
       оно есть, и без него правило весит на единицу меньше —
       проверено, глазок продолжал заливаться. */

    .auth-form button.auth-eye:hover:not(:disabled),
    .auth-form button.auth-forgot:hover:not(:disabled),
    .auth-form .auth-switch button:hover:not(:disabled) {
        border-color: transparent;
        box-shadow: none;
        transform: none;
    }

    .auth-form button.auth-eye:hover:not(:disabled) {
        background: rgba(255, 255, 255, 0.06);
        color: var(--au-gold);
    }

    .auth-form button.auth-forgot:hover:not(:disabled) {
        background: transparent;
        color: var(--au-gold);
    }

    .auth-form .auth-switch button:hover:not(:disabled) {
        background: transparent;
        color: var(--white);
        text-decoration-color: var(--white);
    }
}


/* ========================================
   ТЕЛЕФОН
======================================== */

@media (max-width: 480px) {

    .auth-modal {
        padding: 12px;
    }

    .auth-dialog {
        max-height: calc(100vh - 24px);
        padding: 38px 24px 30px;
    }

    .auth-heading {
        font-size: 36px;
    }
}


/* ========================================
   СВЕТЛОЕ ОКНО
   Кремовый фон, золотая двойная рамка, тёмно-синий текст —
   как плашка о данных. Главная кнопка — тёмно-синяя.
======================================== */

.auth-modal .auth-dialog {
    background:
        radial-gradient(70% 40% at 50% 0%, rgba(216, 180, 106, 0.16), transparent 70%),
        #fbf6f2;
    color: var(--au-ink);
    border-color: rgba(216, 180, 106, 0.6);
    box-shadow: 0 40px 90px -30px rgba(11, 29, 43, 0.5);
    scrollbar-color: rgba(216, 180, 106, 0.5) transparent;
}

.auth-modal .auth-dialog::before { border-color: rgba(216, 180, 106, 0.3); }

.auth-modal .auth-heading,
.auth-modal .auth-code-value,
.auth-modal .auth-form input { color: var(--au-ink); }

.auth-modal .auth-sub,
.auth-modal .auth-done-text,
.auth-modal .auth-warning,
.auth-modal .auth-check { color: #4a4a4a; }

.auth-modal .auth-note,
.auth-modal .auth-switch,
.auth-modal .auth-forgot { color: #6b6b6b; }

.auth-modal .auth-forgot { text-decoration-color: rgba(11, 29, 43, 0.25); }

.auth-modal .auth-brand,
.auth-modal .auth-eye,
.auth-modal .auth-switch button { color: #a07a35; }

.auth-modal .auth-error { color: #b3261e; }

.auth-modal .auth-close { color: #6b6b6b; }

.auth-modal .auth-form input {
    background: #fff;
    border-color: rgba(11, 29, 43, 0.18);
}

.auth-modal .auth-form input::placeholder { color: #9a9a9a; }

.auth-modal .auth-form input:focus {
    background: #fff;
    border-color: var(--au-gold);
}

.auth-modal .auth-form input:-webkit-autofill,
.auth-modal .auth-form input:-webkit-autofill:hover,
.auth-modal .auth-form input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--au-ink);
    -webkit-box-shadow: 0 0 0 40px #fff inset;
    caret-color: var(--au-ink);
}

.auth-modal .auth-form button[type="submit"],
.auth-modal .auth-code .auth-done-button {
    background: var(--au-ink);
    border-color: var(--au-ink);
    color: #fff;
}

.auth-modal .auth-done-button,
.auth-modal .auth-code-actions button {
    color: var(--au-ink);
    border-color: rgba(11, 29, 43, 0.3);
}

.auth-modal .auth-code-value {
    background: #fff;
}

.auth-modal .auth-warning { background: rgba(216, 180, 106, 0.14); }

@media (hover: hover) {
    .auth-modal .auth-form button[type="submit"]:hover:not(:disabled),
    .auth-modal .auth-code .auth-done-button:hover:not(:disabled),
    .auth-modal .auth-done-button:hover:not(:disabled) {
        background: var(--au-gold);
        border-color: var(--au-gold);
        color: var(--au-ink);
    }

    .auth-modal .auth-close:hover,
    .auth-modal .auth-forgot:hover,
    .auth-modal .auth-code-actions button:hover { color: #a07a35; border-color: var(--au-gold); }

    .auth-modal .auth-forgot:hover { border-color: transparent; }

    .auth-modal .auth-form button.auth-eye:hover:not(:disabled) {
        background: rgba(216, 180, 106, 0.12);
        color: #a07a35;
    }
}