/* AiLookout -- account pages (login, register, confirm, reset).
   Self-contained: every rule is scoped under .auth-card so nothing here leaks into the
   rest of the site, and every colour reads a site token with a fallback so the pages
   render sensibly even before app.css loads. */

.auth-section { padding: 48px 0 64px; }

.auth-wrap {
    width: 100%;
    max-width: 440px;
    margin-inline: auto;
    padding-inline: var(--gutter, 16px);
}
.auth-wrap.wide { max-width: 560px; }

.auth-card {
    background: var(--surface, #ffffff);
    border: 1px solid var(--border, #d9dee6);
    border-radius: var(--radius-lg, 16px);
    box-shadow: var(--shadow-lg, 0 12px 32px rgba(16, 24, 40, 0.12));
    padding: 32px 28px;
    color: var(--text, #141a22);
}

.auth-card .auth-head { text-align: center; margin-bottom: 24px; }
.auth-card .auth-brand {
    display: inline-flex; align-items: center; gap: 8px;
    font-weight: 700; font-size: 1.125rem; letter-spacing: -0.01em;
    color: var(--text, #141a22); text-decoration: none;
}
.auth-card .auth-brand svg { width: 26px; height: 26px; }
.auth-card .auth-icon {
    display: grid; place-items: center;
    width: 56px; height: 56px; margin: 18px auto 4px;
    border-radius: 16px;
    color: var(--accent, #0f766e);
    background: color-mix(in srgb, var(--accent, #0f766e) 12%, transparent);
}
.auth-card h1.auth-h1 {
    font-size: 1.6rem; font-weight: 700; line-height: 1.2; letter-spacing: -0.02em;
    margin: 12px 0 0; color: var(--text, #141a22);
}
.auth-card h1.auth-h1:focus, .auth-card h1.auth-h1:focus-visible { outline: none; }
.auth-card .auth-blurb { color: var(--text-2, #4b5563); margin: 6px 0 0; font-size: 0.95rem; }

/* ---------- fields ---------- */
.auth-card .field { margin-bottom: 16px; }
.auth-card .field label {
    display: block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--text-3, #6b7280); margin-bottom: 6px;
}
.auth-card .field label .optional { text-transform: none; letter-spacing: 0; font-weight: 500; }
.auth-card .text-input {
    width: 100%; height: 44px; padding: 10px 14px;
    background: var(--surface-2, #eef1f5); color: var(--text, #141a22);
    border: 1px solid var(--border, #d9dee6); border-radius: var(--radius, 10px);
    font: inherit; font-size: 0.95rem;
    transition: border-color 120ms ease, box-shadow 120ms ease, background 120ms ease;
}
.auth-card .text-input:focus {
    outline: none; background: var(--surface, #ffffff);
    border-color: var(--accent, #0f766e);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #0f766e) 22%, transparent);
}
.auth-card .text-input::placeholder { color: var(--text-3, #6b7280); }
.auth-card .text-input.invalid { border-color: var(--danger, #b42318); }
.auth-card .hint { display: block; font-size: 0.8rem; color: var(--text-3, #6b7280); margin-top: 4px; }
.auth-card .hint.error, .auth-card .validation-message { color: var(--danger, #b42318); }

.auth-card .field.check { display: flex; align-items: center; gap: 8px; }
.auth-card .field.check input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent, #0f766e); }
.auth-card .field.check label {
    margin: 0; text-transform: none; letter-spacing: 0; font-size: 0.9rem; font-weight: 500;
    color: var(--text-2, #4b5563);
}

.auth-card .field-row { display: flex; justify-content: flex-end; margin: -6px 0 14px; }

/* ---------- buttons (base .btn comes from app.css; these only add what the card needs) ---------- */
.auth-card .btn-block { width: 100%; }
.auth-card .btn + .btn { margin-top: 10px; }

/* ---------- alerts ---------- */
.auth-card .alert {
    padding: 10px 14px; border-radius: var(--radius, 10px);
    font-size: 0.9rem; line-height: 1.5; margin-bottom: 16px;
    border: 1px solid transparent;
}
.auth-card .alert ul { margin: 0; padding-left: 18px; list-style: disc; }
.auth-card .alert-error   { background: #fff1f2; color: #b4232d; border-color: #fecdd3; }
.auth-card .alert-warning { background: #fff8eb; color: #a15c07; border-color: #fde68a; }
.auth-card .alert-success { background: #ecfdf5; color: #06795a; border-color: #a7f3d0; }
.auth-card .alert-info    { background: #eff5ff; color: #1d4ed8; border-color: #bfdbfe; }
.auth-card .alert a { color: inherit; font-weight: 700; text-decoration: underline; }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .auth-card .alert-error   { background: #3b1518; color: #fca5a5; border-color: #7f1d1d; }
    :root:not([data-theme="light"]) .auth-card .alert-warning { background: #3a2a0a; color: #fcd34d; border-color: #78350f; }
    :root:not([data-theme="light"]) .auth-card .alert-success { background: #0d2f23; color: #6ee7b7; border-color: #065f46; }
    :root:not([data-theme="light"]) .auth-card .alert-info    { background: #0f1f3d; color: #93c5fd; border-color: #1e3a8a; }
}
:root[data-theme="dark"] .auth-card .alert-error   { background: #3b1518; color: #fca5a5; border-color: #7f1d1d; }
:root[data-theme="dark"] .auth-card .alert-warning { background: #3a2a0a; color: #fcd34d; border-color: #78350f; }
:root[data-theme="dark"] .auth-card .alert-success { background: #0d2f23; color: #6ee7b7; border-color: #065f46; }
:root[data-theme="dark"] .auth-card .alert-info    { background: #0f1f3d; color: #93c5fd; border-color: #1e3a8a; }

/* ---------- footer text + links ---------- */
.auth-card .auth-foot {
    text-align: center; margin: 16px 0 0; font-size: 0.9rem; color: var(--text-2, #4b5563);
}
.auth-card .auth-note { font-size: 0.85rem; color: var(--text-2, #4b5563); margin: 0 0 16px; }
.auth-card .text-link {
    font-weight: 600; color: var(--accent, #0f766e);
    background: none; border: none; cursor: pointer; padding: 0; font: inherit;
}
.auth-card .text-link:hover { text-decoration: underline; }
.auth-card .text-link.danger { color: var(--text-3, #6b7280); }
.auth-card .text-link.danger:hover { color: var(--danger, #b42318); }

@media (max-width: 480px) {
    .auth-section { padding: 24px 0 40px; }
    .auth-card { padding: 24px 18px; }
}