/*
 * Auth pages — Drimple Core mono design
 * AUTH-UX-1: login / forgot_password / reset_password
 * Czyste tokeny var(--*), zero hardkodowanych kolorów.
 * Fonty: Schibsted Grotesk (UI) + JetBrains Mono (utility/mono).
 */

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Root layout ── */
html, body {
    min-height: 100vh;
    background: var(--bg);
    color: var(--ink);
    font-family: 'Schibsted Grotesk', system-ui, sans-serif;
}

body {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    min-height: 100vh;
}

/* ── Outer wrapper ── */
.auth-wrap {
    width: 100%;
    max-width: 408px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

/* ── Card ── */
.auth-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 11px;
    box-shadow: var(--shadow-raise);
    padding: 40px 38px 34px;
    width: 100%;
}

/* ── Lockup (Drimple logo + CORE eyebrow) ── */
.auth-lockup {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.auth-lockup-mark {
    display: inline-flex;
    align-items: center;
    gap: 11px;
}

.auth-lockup-wordmark {
    font-weight: 700;
    font-size: 24px;
    letter-spacing: -0.02em;
    color: var(--ink);
}

.auth-lockup-eyebrow {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink3);
    border: 1px solid var(--line2);
    border-radius: 999px;
    padding: 3px 11px;
}

/* ── Card heading ── */
.auth-head {
    text-align: center;
    margin-top: 26px;
    margin-bottom: 26px;
}

.auth-head h1 {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ink);
}

.auth-head p {
    margin: 8px 0 0;
    font-size: 14px;
    color: var(--ink2);
}

/* ── Fields ── */
.auth-fields {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.auth-field {
    display: block;
    width: 100%;
}

.auth-field-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 7px;
}

.auth-field-wrap {
    position: relative;
}

.auth-input {
    width: 100%;
    height: 44px;
    padding: 0 13px;
    background: var(--surface);
    border: 1px solid var(--line2);
    border-radius: var(--radius-sm);
    font-family: 'Schibsted Grotesk', system-ui, sans-serif;
    font-size: 14.5px;
    color: var(--ink);
    outline: none;
    transition: border-color .12s, box-shadow .12s;
}

.auth-input--mono {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 13.5px;
}

.auth-input:focus {
    border-color: var(--ink);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--ink) 12%, transparent);
}

.auth-input::placeholder {
    color: var(--ink3);
}

/* Input with trailing slot (show/hide password) */
.auth-input--has-trailing {
    padding-right: 64px;
}

.auth-input-trailing {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
}

/* ── Show/hide password toggle ── */
.auth-show-btn {
    height: 32px;
    padding: 0 10px;
    border-radius: var(--radius-xs);
    border: none;
    background: transparent;
    cursor: pointer;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink3);
    transition: color .12s;
}

.auth-show-btn:hover {
    color: var(--ink);
}

/* ── Primary button ── */
.auth-btn-wrap {
    margin-top: 4px;
}

.auth-btn-primary {
    width: 100%;
    height: 46px;
    border: 1px solid var(--accent);
    border-radius: var(--radius-sm);
    cursor: pointer;
    background: var(--accent);
    color: var(--accentText);
    font-family: 'Schibsted Grotesk', system-ui, sans-serif;
    font-size: 15px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: box-shadow .12s, transform .12s;
}

.auth-btn-primary:hover {
    box-shadow: var(--shadow-raise);
    transform: translateY(-1px);
}

/* ── Text link (quiet) ── */
.auth-links {
    display: flex;
    justify-content: center;
    margin-top: 16px;
}

.auth-text-link {
    background: none;
    border: none;
    cursor: pointer;
    font-family: 'Schibsted Grotesk', system-ui, sans-serif;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink2);
    text-decoration: none;
    text-underline-offset: 3px;
    padding: 4px 6px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color .12s;
}

.auth-text-link:hover {
    color: var(--ink);
    text-decoration: underline;
}

/* ── Footer caption ── */
.auth-footer {
    text-align: center;
    margin-top: 22px;
    font-size: 12px;
    color: var(--ink3);
}

/* ── Theme toggle (fixed corner) ── */
.auth-theme-toggle {
    position: fixed;
    top: 18px;
    right: 18px;
    width: 38px;
    height: 38px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    border: 1px solid var(--line);
    background: var(--surface);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-card);
    transition: background .12s;
    z-index: 10;
}

.auth-theme-toggle:hover {
    background: var(--surfaceHover);
}

/* Icons in theme toggle: show correct one per mode */
.icon-sun,
.icon-moon {
    display: block;
    flex: 0 0 auto;
}

/* Light mode → show moon (switch to dark) */
html:not(.dark) .icon-sun { display: none; }
html:not(.dark) .icon-moon { display: block; }
/* Dark mode → show sun (switch to light) */
html.dark .icon-sun { display: block; }
html.dark .icon-moon { display: none; }

/* ── Alert messages ── */
.auth-alert {
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    font-size: 13.5px;
    margin-bottom: 16px;
    font-weight: 500;
}

.auth-alert--error {
    background: var(--errBg);
    color: var(--err);
    border: 1px solid color-mix(in oklab, var(--err) 25%, var(--errBg));
}

.auth-alert--success {
    background: var(--okBg);
    color: var(--ok);
    border: 1px solid color-mix(in oklab, var(--ok) 25%, var(--okBg));
}

/* ── Sent view: mail icon circle ── */
.auth-sent-icon {
    display: flex;
    justify-content: center;
    margin-top: 28px;
}

.auth-sent-icon-circle {
    width: 52px;
    height: 52px;
    border-radius: 999px;
    background: var(--okBg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ── Sent view: email chip ── */
.auth-email-chip-wrap {
    text-align: center;
    margin-top: -12px;
    margin-bottom: 24px;
}

.auth-email-chip {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 13px;
    color: var(--ink);
    background: var(--surfaceAlt);
    border: 1px solid var(--line);
    border-radius: var(--radius-xs);
    padding: 6px 12px;
    display: inline-block;
}