/* ============================================================================
 * auth.css — shared styles for the chrome-less authentication pages
 * (login, register, two-factor, mfa-setup, change/reset password, accept-invite,
 *  email verification). Loaded by layouts/layout_auth.html.
 *
 * Consolidation note (template-consolidation pilot, 2026-06-08):
 * Every auth page used to inline ~250 lines of near-identical CSS. That block is
 * now centralized here. The animated background gradient is unified to the
 * violet/blue scheme used by 9 of the 10 auth pages (login was the lone red
 * variant). The red accent (var(--color-danger)) is preserved on buttons,
 * focus rings and the logo across all pages.
 *
 * Token-first: values use var(--token, #fallback). The fallback keeps parity
 * even when tokens.css is absent. Genuinely page-unique CSS (OTP cells, plan
 * cards, QR blocks, step indicators, password-strength meters) stays in each
 * page's {% block extra_css %}.
 * ========================================================================== */

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

html, body {
    height: 100%;
    font-family: 'Google Sans', 'Roboto', sans-serif;
    overflow: hidden;
}

/* ── Animated / video background scaffold ─────────────────────────────────── */
#animated-bg {
    position: fixed;
    inset: 0;
    z-index: -2;
    background:
        radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.32), transparent 36%),
        radial-gradient(circle at 76% 12%, rgba(168, 85, 247, 0.22), transparent 38%),
        radial-gradient(circle at 72% 80%, rgba(59, 130, 246, 0.25), transparent 42%),
        linear-gradient(130deg, var(--color-hero-slate-1) 0%, var(--color-hero-slate-2) 44%, var(--color-hero-slate-3) 100%);
    background-size: 140% 140%;
    animation: auth-bg-drift 20s ease-in-out infinite alternate;
}

@keyframes auth-bg-drift {
    0%   { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}

/* The video is decorative: when it cannot play (autoplay blocked, battery
   saver, reduced motion, still loading) the page must not fall back to the
   browser's white canvas, which also hid the white brand logo on /web/2fa.
   html only: the root background paints beneath the z-index:-2 video, but a
   body background paints above it and hid the video entirely. */
html { background: var(--color-page-ink-bg); }

#video-bg {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    z-index: -2;
}

#video-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: -1;
    pointer-events: none;
}

/* When animation mode is active, hide the video + scrim; otherwise hide the
   animated gradient (the body class is set by layout_auth.html). */
body.bg-animation #video-bg,
body.bg-animation #video-overlay { display: none; }
body:not(.bg-animation) #animated-bg { display: none; }

/* ── Page shell (owned by layout_auth.html) ──────────────────────────────── */
.auth-layout {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 2fr;
    height: calc(100vh / var(--app-zoom, 1));
}

.auth-panel {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    padding: 2rem;
    overflow-y: auto;
}

.auth-brand-logo {
    width: 100%;
    max-width: 320px;
    height: auto;
}

/* Glass card */
.auth-card {
    width: 100%;
    max-width: 380px;
    background: var(--color-surface);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 16px 64px rgba(0, 0, 0, 0.15),
                0 8px 32px rgba(0, 0, 0, 0.1),
                inset 0 1px 0 rgba(255, 255, 255, 0.7),
                inset 0 -1px 0 rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    padding: 2.5rem 2rem;
    color: var(--color-text-primary, #111827);
}

.auth-card--wide   { max-width: 420px; }
.auth-card--center { text-align: center; }

/* ── Light rendering for the auth surface ───────────────────────────────────
 * The auth card is a fixed-white glass card over a full-screen video, so it must
 * NOT follow the OS dark mode. Its light token values live in tokens.css
 * (`.surface-light, .auth-card` island), so the card stays light in dark mode.
 * Here we only force a light color-scheme so native form controls (the caret,
 * autofill, dropdowns) also render dark-on-light. */
.auth-layout,
.auth-card {
    color-scheme: light;
}

/* ── Card header (logo + title + subtitle) ───────────────────────────────── */
.login-logo {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.4rem;
}
.login-logo .material-icons {
    font-size: 2.2rem;
    color: var(--color-danger, #ef4444);
}

.login-title {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    line-height: 1.2;
    color: var(--color-text-primary, #111827);
}

.login-subtitle {
    font-size: 0.85rem;
    color: rgba(0, 0, 0, 0.6);
    line-height: 1.5;
    margin-bottom: 1.75rem;
}

/* Result/status card text (verify-email, email-verification) */
.card-title   { font-size: 1.3rem; font-weight: 700; color: var(--color-text-primary, #111827); margin-bottom: 0.5rem; }
.card-message { font-size: 0.84rem; color: rgba(0, 0, 0, 0.55); line-height: 1.55; margin-bottom: 1.6rem; }
.card-message strong { color: var(--color-text-primary, #111827); }

/* ── Floating-label fields (login / register / password-reset) ───────────── */
.field-wrapper { position: relative; margin-bottom: 1.25rem; }

.field-wrapper input,
.field-wrapper select,
.field-wrapper textarea {
    width: 100%;
    padding: 14px;
    background: var(--color-surface);
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    color: var(--color-text-primary, #111827);
    font-size: 0.95rem;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    -webkit-appearance: none;
}
.field-wrapper textarea { resize: vertical; min-height: 72px; }

.field-wrapper input:focus,
.field-wrapper select:focus,
.field-wrapper textarea:focus {
    border-color: var(--color-danger, #ef4444);
    box-shadow: 0 0 0 2px rgba(201, 79, 64, 0.1);
}

.field-wrapper input::placeholder,
.field-wrapper textarea::placeholder { color: rgba(0, 0, 0, 0.4); }

.field-wrapper label {
    position: absolute;
    top: -0.55rem;
    left: 10px;
    background: rgba(255, 255, 255, 0.95);
    padding: 0 4px;
    font-size: 0.72rem;
    color: rgba(0, 0, 0, 0.6);
    pointer-events: none;
    border-radius: 2px;
}

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* ── Icon-prefixed fields (change-password / reset-confirm / mfa / invite) ── */
.field-group { margin-bottom: 1.1rem; }

.field-label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.65);
    margin-bottom: 0.4rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.field-wrap { position: relative; }

.field-wrap > .material-icons {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.1rem;
    color: rgba(0, 0, 0, 0.35);
    pointer-events: none;
}

.field-wrap .toggle-pw {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    pointer-events: auto;
    display: flex;
    align-items: center;
    color: rgba(0, 0, 0, 0.35);
}

.field-input {
    width: 100%;
    padding: 11px 40px 11px 38px;
    border: 1.5px solid rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.9);
    font-size: 0.92rem;
    font-family: inherit;
    color: var(--color-text-primary, #111827);
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.field-input:focus {
    border-color: var(--color-danger, #ef4444);
    box-shadow: 0 0 0 3px rgba(201, 79, 64, 0.1);
}

.field-hint {
    font-size: 0.78rem;
    color: rgba(0, 0, 0, 0.5);
    margin-top: 5px;
    line-height: 1.4;
}

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn-signin,
.btn-primary {
    width: 100%;
    padding: 13px;
    background: var(--color-danger-solid);
    color: var(--color-on-accent, #fff);
    border: none;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.2s, box-shadow 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 0.5rem;
    text-decoration: none;
}

.btn-signin:hover,
.btn-primary:hover {
    background: var(--color-danger-text, #dc2626);
    box-shadow: 0 4px 16px rgba(201, 79, 64, 0.4);
}

.btn-signin:active,
.btn-primary:active { background: var(--color-danger-text, #dc2626); }

.btn-signin:disabled,
.btn-primary:disabled {
    background: rgba(201, 79, 64, 0.4);
    cursor: not-allowed;
    box-shadow: none;
}

.btn-secondary {
    width: 100%;
    padding: 12px;
    background: transparent;
    color: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    font-size: 0.88rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.btn-secondary:hover { background: rgba(0, 0, 0, 0.04); border-color: rgba(0, 0, 0, 0.25); }

.btn-ghost {
    width: 100%;
    padding: 11px;
    background: transparent;
    color: rgba(0, 0, 0, 0.55);
    border: 1px solid rgba(0, 0, 0, 0.13);
    border-radius: 8px;
    font-size: 0.88rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-decoration: none;
    margin-top: 0.6rem;
}
.btn-ghost:hover { background: rgba(0, 0, 0, 0.04); }

/* In-button spinners */
.btn-spinner,
.spinner {
    display: inline-block;
    width: 14px; height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: var(--color-on-accent);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    vertical-align: middle;
    margin-right: 6px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Banners ──────────────────────────────────────────────────────────────── */
.login-error {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    border: 1px solid rgba(201, 79, 64, 0.3);
    border-radius: 8px;
    padding: 0.65rem 0.9rem;
    margin-bottom: 1.1rem;
    font-size: 0.85rem;
    color: var(--color-danger, #ef4444);
    background: rgba(201, 79, 64, 0.06);
}
.login-error .material-icons { font-size: 1rem; flex-shrink: 0; }

.login-success {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    border: 1px solid rgba(34, 197, 94, 0.35);
    border-radius: 8px;
    padding: 0.85rem 0.9rem;
    margin-bottom: 1.25rem;
    font-size: 0.85rem;
    color: var(--color-success-text, #16a34a);
    background: rgba(34, 197, 94, 0.08);
    line-height: 1.5;
}
.login-success .material-icons { font-size: 1.1rem; flex-shrink: 0; color: var(--color-success-text, #16a34a); margin-top: 1px; }

.login-warning {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    border: 1px solid rgba(251, 188, 5, 0.4);
    border-radius: 8px;
    padding: 0.65rem 0.9rem;
    margin-bottom: 1.1rem;
    font-size: 0.85rem;
    color: var(--color-warning, #f59e0b);
    background: rgba(251, 188, 5, 0.06);
}
.login-warning .material-icons { font-size: 1rem; flex-shrink: 0; }

.success-banner {
    display: flex; align-items: center; gap: 8px;
    background: rgba(34, 197, 94, 0.08);
    border: 1px solid rgba(34, 197, 94, 0.25);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 0.82rem;
    color: var(--color-success-text, #16a34a);
    margin-bottom: 1.2rem;
    text-align: left;
}
.success-banner .material-icons { font-size: 16px; flex-shrink: 0; }

.error-banner {
    display: flex; align-items: center; gap: 8px;
    background: rgba(201, 79, 64, 0.07);
    border: 1px solid rgba(201, 79, 64, 0.25);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 0.82rem;
    color: var(--color-danger, #ef4444);
    margin-bottom: 1.2rem;
    text-align: left;
}
.error-banner .material-icons { font-size: 16px; flex-shrink: 0; }

.warn-banner {
    display: flex; align-items: flex-start; gap: 8px;
    background: rgba(234, 179, 8, 0.07);
    border: 1px solid rgba(234, 179, 8, 0.3);
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 1.4rem;
    font-size: 0.82rem;
    color: rgba(0, 0, 0, 0.65);
    line-height: 1.5;
}
.warn-banner .material-icons { font-size: 16px; color: var(--color-warning-text, #d97706); flex-shrink: 0; margin-top: 1px; }

.info-banner {
    display: flex; align-items: flex-start; gap: 8px;
    background: rgba(59, 130, 246, 0.07);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 1.2rem;
    font-size: 0.82rem;
    color: rgba(0, 0, 0, 0.6);
    line-height: 1.5;
}
.info-banner .material-icons { font-size: 16px; color: var(--color-info-text, #2563eb); flex-shrink: 0; margin-top: 1px; }

/* ── Result-state icon (verify-email / email-verification) ───────────────── */
.state-icon-wrap { display: flex; align-items: center; justify-content: center; margin-bottom: 1.4rem; }
.state-icon {
    width: 80px; height: 80px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    animation: pop-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.state-icon.pending  { background: var(--color-warning-bg, #fef3c7); box-shadow: 0 6px 24px rgba(245, 158, 11, 0.3); position: relative; }
.state-icon.verified { background: var(--color-success-bg, #dcfce7); box-shadow: 0 6px 24px rgba(34, 197, 94, 0.3); }
.state-icon.error    { background: var(--color-danger-bg, #fee2e2);  box-shadow: 0 6px 24px rgba(239, 68, 68, 0.3); }
.state-icon .material-icons { font-size: 2.6rem; }
.state-icon.pending  .material-icons { color: var(--color-warning-text, #d97706); }
.state-icon.verified .material-icons { color: var(--color-success-text, #16a34a); }
.state-icon.error    .material-icons { color: var(--color-danger-text, #dc2626); }

.state-icon.pending::after {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    border: 2px solid rgba(245, 158, 11, 0.3);
    animation: ripple 2s ease-out infinite;
}

@keyframes pop-in {
    0%   { transform: scale(0.5); opacity: 0; }
    100% { transform: scale(1);   opacity: 1; }
}
@keyframes ripple {
    0%   { transform: scale(0.9); opacity: 0.7; }
    100% { transform: scale(1.3); opacity: 0;   }
}

/* ── Chips & info pills ──────────────────────────────────────────────────── */
.email-chip {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(59, 130, 246, 0.08);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 20px;
    padding: 4px 12px;
    font-size: 0.82rem;
    color: var(--color-info-text, #2563eb);
    font-weight: 600;
    margin: 0 auto 1.2rem;
}
.email-chip .material-icons { font-size: 14px; }

.invite-chip {
    display: flex; align-items: center; gap: 8px;
    background: rgba(59, 130, 246, 0.07);
    border: 1px solid rgba(59, 130, 246, 0.18);
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 1.4rem;
    font-size: 0.82rem;
}
.invite-chip .material-icons { font-size: 1.1rem; color: var(--color-info-text, #2563eb); flex-shrink: 0; }
.invite-chip-text { color: rgba(0, 0, 0, 0.6); }
.invite-chip-text strong { color: var(--color-text-primary, #111827); }

.tips-list { list-style: none; text-align: left; margin: 1rem 0 1.4rem; padding: 0; }
.tips-list li {
    display: flex; align-items: flex-start; gap: 8px;
    font-size: 0.78rem; color: rgba(0, 0, 0, 0.5);
    margin-bottom: 6px;
}
.tips-list li .material-icons { font-size: 14px; color: var(--color-text-faint, #6b7280); margin-top: 1px; flex-shrink: 0; }

/* ── Step indicator ───────────────────────────────────────────────────────
   Was copy-pasted into register.html, change_password.html and mfa_setup.html.
   The copies had drifted: register painted *completed* steps with --color-danger,
   so finishing a step gave no green progress feedback (cosmetic audit F8).

   Red is the auth brand accent and belongs to the ACTIVE step; a finished step is
   --color-success. `.completed` is kept as an alias of `.done` because register's
   JS writes that class name.

   Deliberately no flex/width on .step-line and no margin on .steps-row: register
   uses fixed 36px connectors, the other two use flex: 1. Pages keep that locally. */
.steps-row { display: flex; align-items: center; }
.step-dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
}
.step-dot.active {
    background: var(--color-danger-solid);
    color: var(--color-on-accent, #fff);
    box-shadow: 0 2px 8px rgba(201, 79, 64, 0.3);
}
.step-dot.done,
.step-dot.completed {
    background: var(--color-success-solid);
    color: var(--color-on-accent, #fff);
}
.step-dot.pending { background: rgba(0, 0, 0, 0.08); color: rgba(0, 0, 0, 0.4); }
.step-line { height: 2px; background: rgba(0, 0, 0, 0.1); }
.step-line.done { background: var(--color-success, #22c55e); }

/* ── Links ────────────────────────────────────────────────────────────────── */
.back-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    margin-top: 1.5rem;
    font-size: 0.83rem;
    color: rgba(0, 0, 0, 0.5);
    text-decoration: none;
    transition: color 0.15s;
}
.back-link:hover { color: var(--color-danger, #ef4444); }
.back-link .material-icons { font-size: 0.95rem; }

.text-divider { font-size: 0.75rem; color: rgba(0, 0, 0, 0.35); margin-top: 1rem; }
.link { color: var(--color-danger, #ef4444); text-decoration: none; font-weight: 600; }
.link:hover { text-decoration: underline; }

/* ── Utilities ────────────────────────────────────────────────────────────── */
/* Utility classes are single-sourced in foundation.css (linked by layout_auth.html
   after this file, so they win). Do not re-declare them here. */

/* ── Narrow screens ──────────────────────────────────────────────────────────
 * The 1fr/2fr split left the card a third of a phone's width (~110px), so every
 * label and button wrapped or overflowed. Below tablet width the panel takes the
 * full width and the page scrolls instead of clipping. */
@media (max-width: 900px) {
    .auth-layout {
        grid-template-columns: 1fr;
        height: auto;
        min-height: calc(100vh / var(--app-zoom, 1));
        min-height: calc(100dvh / var(--app-zoom, 1));
    }
    .auth-panel {
        justify-content: flex-start;
        padding: 1.5rem 1rem 2rem;
        gap: 1.25rem;
    }
    .auth-brand-logo { max-width: 220px; }
    .auth-card { padding: 2rem 1.25rem; }
}