/*
 * DartCon — ekrany sprzed wejścia do panelu (potwierdzenie adresu, w przyszłości
 * logowanie i odzyskiwanie hasła).
 *
 * WYMAGA css/base.css, wczytanego WCZEŚNIEJ.
 *
 * Jedyne miejsce w serwisie, gdzie treść jest wyśrodkowana — i to świadomie.
 * Na tych ekranach jest dokładnie jedna czynność do wykonania, więc nie ma
 * czego z czym zestawiać ani czego wyrównywać do lewej.
 */

.auth {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    min-height: 100svh;
    padding: var(--s-6) var(--s-3);
}

.auth-card {
    width: 100%;
    max-width: 480px;
    padding: var(--s-4);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}

.auth-brand { margin-bottom: var(--s-4); }

.auth h1 {
    margin: var(--s-1) 0 var(--s-2);
    font-size: 26px;
    line-height: var(--s-4);
    letter-spacing: -.02em;
}

.auth-lead {
    margin: 0 0 var(--s-3);
    font-size: 15px;
    line-height: var(--s-3);
    color: var(--text-soft);
}

/* Znika razem z podłączeniem prawdziwej poczty w etapie 3. */
.mockup-note {
    margin: 0 0 var(--s-3);
    padding: var(--s-2);
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    font-size: 13px;
    line-height: var(--s-3);
    color: var(--text-faint);
}

/* ─── Pole na kod ─────────────────────────────────────────────────────────── */

.field { margin-bottom: var(--s-3); }

.field label {
    display: block;
    margin-bottom: var(--s-1);
    font-family: var(--font-mono);
    font-size: 11px;
    line-height: var(--s-2);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/*
 * Kod jest duży i szeroko rozstrzelony, żeby dało się go porównać z wiadomością
 * cyfra po cyfrze — przy zwykłym stopniu pisma łatwo pomylić się przy szóstej.
 */
.code-input {
    width: 100%;
    padding: var(--s-2);
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-family: var(--font-mono);
    font-size: 28px;
    line-height: var(--s-4);
    letter-spacing: .4em;
    text-align: center;
    text-indent: .4em; /* wyrównuje światło doklejone za ostatnią cyfrą */
}

.code-input::placeholder { color: var(--text-faint); }

.code-input:focus {
    outline: none;
    border-color: var(--accent);
}

.field-hint {
    margin: var(--s-1) 0 0;
    font-size: 13px;
    line-height: var(--s-3);
    color: var(--text-faint);
}

/* ─── Odnośniki pod formularzem ───────────────────────────────────────────── */

.auth-alt {
    margin: var(--s-2) 0 0;
    font-size: 14px;
    line-height: var(--s-3);
    color: var(--text-muted);
}

.auth-alt a {
    color: var(--accent);
    font-weight: 600;
}

.auth-alt a:hover { color: var(--accent-hover); }

.auth-note {
    margin: var(--s-3) 0 0;
    padding-top: var(--s-2);
    border-top: 1px solid var(--border-soft);
    font-size: 13px;
    line-height: var(--s-3);
    color: var(--text-faint);
}

/*
 * Potwierdzenie zmiany hasła nad formularzem logowania (2026-08-18).
 *
 * Zastąpiło osobny ekran `/password/done`, który miał jedno zdanie i przycisk
 * prowadzący dokładnie tutaj — czyli jedynym jego działaniem było zejście
 * z drogi.
 *
 * ZIELONA krawędź, nie złota: to potwierdzenie, że coś się UDAŁO, a nie rzecz
 * wymagająca reakcji. Złoto w całym serwisie znaczy „zajmij się tym".
 *
 * Krawędź z lewej zamiast pełnej ramki — pełna ramka nad formularzem czyta się
 * jak komunikat o błędzie, a to jest dobra wiadomość.
 */
.notice-ok {
    margin: 0 0 var(--s-3);
    padding: var(--s-2);
    border-left: 2px solid var(--ok);
    border-radius: 0 var(--radius) var(--radius) 0;
    background: var(--ok-soft);
}

.notice-ok p {
    margin: 0;
    font-size: 14px;
    line-height: var(--s-3);
    color: var(--text-soft);
}

.notice-ok p + p { margin-top: var(--s-1); }

.notice-ok b { color: var(--text); }