/* Sign-in and verification */

/* ── Theme tokens ─────────────────────────────────────────────────────────
   Every colour this sheet paints comes from here. The light values are the
   ones the sheet always used, moved out of the rules unchanged, so light mode
   renders exactly as before; the dark block restates each one for a dark
   ground. Nothing below this block names a colour directly - that is what
   lets the whole sheet turn over on one attribute. */
:root {
    --auth-faint: #787f8a;
    --auth-green-deep: #065f46;
    --auth-indigo-deep: #1e1b4b;
    --auth-indigo-deep-2: #312e81;
    --auth-indigo-deep-3: #4338ca;
    --auth-indigo-deep-4: #3730a3;
    --auth-indigo-deep-5: #1e40af;
    --auth-indigo-deep-a10: rgba(67,56,202,0.1);
    --auth-ink: #374151;
    --auth-ink-a12: rgba(0,0,0,0.12);
    --auth-line: #e2e5eb;
    --auth-muted: #6b7280;
    --auth-orange: #ef4444;
    --auth-orange-2: #dc2626;
    --auth-orange-deep: #991b1b;
    --auth-surface: #f0eef6;
    --auth-surface-2: #fff;
    --auth-surface-3: #fafbfc;
    --auth-surface-a12: rgba(255,255,255,0.12);
    --auth-surface-a3: rgba(255,255,255,0.03);
    --auth-surface-a30: rgba(255,255,255,0.3);
    --auth-surface-a4: rgba(255,255,255,0.04);
    --auth-surface-a65: rgba(255,255,255,0.65);
    --auth-x1: #eef2ff;
    --auth-x1: #f1f3f7;
    --auth-x2: #B91C1C;
}

:root[data-bs-theme="dark"] {
    --auth-faint: #7a818b;
    --auth-green-deep: #7dc8aa;
    --auth-indigo-deep: #c7cbfb;
    --auth-indigo-deep-2: #b3bbfc;
    --auth-indigo-deep-3: #a0abfc;
    --auth-indigo-deep-4: #aab5fc;
    --auth-indigo-deep-5: #98b6f9;
    --auth-indigo-deep-a10: rgba(160,171,252,0.1);
    --auth-ink: #c9cfd9;
    --auth-ink-a12: rgba(0,0,0,0.384);
    --auth-line: #3f414b;
    --auth-muted: #9ea4b2;
    --auth-orange: #f47b73;
    --auth-orange-2: #f47c6f;
    --auth-orange-deep: #fd9286;
    --auth-surface: #1f2126;
    --auth-surface-2: #292a31;
    --auth-surface-3: #26282e;
    --auth-surface-a12: rgba(22,22,22,0.12);
    --auth-surface-a3: rgba(22,22,22,0.03);
    --auth-surface-a30: rgba(22,22,22,0.3);
    --auth-surface-a4: rgba(22,22,22,0.04);
    --auth-surface-a65: rgba(22,22,22,0.65);
    --auth-x1: #21232b;
    --auth-x1: #212325;
    --auth-x2: #fc8376;
}
/* ── layouts/auth/app.blade.php ─────────────────────────── */
*, *::before, *::after {box-sizing: border-box; margin: 0; padding: 0;}
html {font-size: 16px; -webkit-text-size-adjust: 100%;}
body {font-family: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            color: var(--auth-indigo-deep);
            background: var(--auth-surface);
            line-height: 1.5;
            -webkit-font-smoothing: antialiased;
            min-height: 100vh;
            min-height: 100dvh;}
.auth-page {display: flex;
            flex-direction: column;
            min-height: 100vh;
            min-height: 100dvh;}
.auth-hero {background: linear-gradient(135deg, var(--auth-indigo-deep) 0%, var(--auth-indigo-deep-2) 50%, var(--auth-indigo-deep-3) 100%);
            padding: 48px 24px 40px;
            text-align: center;
            position: relative;
            overflow: hidden;}
.auth-hero::before {content: '';
            position: absolute;
            top: -40%;
            right: -20%;
            width: 300px;
            height: 300px;
            border-radius: 50%;
            background: var(--auth-surface-a4);}
.auth-hero::after {content: '';
            position: absolute;
            bottom: -30%;
            left: -15%;
            width: 250px;
            height: 250px;
            border-radius: 50%;
            background: var(--auth-surface-a3);}
.auth-logo-icon {display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 64px;
            height: 64px;
            background: var(--auth-surface-a12);
            border-radius: 18px;
            margin-bottom: 16px;}
.auth-brand {font-size: 1.8rem;
            font-weight: 800;
            color: var(--auth-surface-2);
            letter-spacing: -0.5px;
            margin-bottom: 6px;}
.auth-tagline {font-size: 0.95rem;
            color: var(--auth-surface-a65);
            font-weight: 500;}
.auth-form-panel {flex: 1;
            background: var(--auth-surface-2);
            border-radius: 24px 24px 0 0;
            margin-top: -16px;
            position: relative;
            z-index: 1;
            padding: 32px 24px 40px;}
.auth-form-title {font-size: 1.4rem;
            font-weight: 700;
            color: var(--auth-indigo-deep);
            margin-bottom: 4px;}
.auth-form-subtitle {font-size: 0.9rem;
            color: var(--auth-muted);
            margin-bottom: 28px;}
.auth-field {margin-bottom: 18px;}
.auth-label {display: block;
            font-size: 0.82rem;
            font-weight: 600;
            color: var(--auth-ink);
            margin-bottom: 6px;
            letter-spacing: 0.01em;}
.auth-input {width: 100%;
            height: 50px;
            padding: 0 16px;
            border: 1.5px solid var(--auth-line);
            border-radius: 12px;
            font-family: inherit;
            font-size: 1rem;
            color: var(--auth-indigo-deep);
            background: var(--auth-surface-3);
            outline: none;
            transition: border-color 0.15s, box-shadow 0.15s;
            -webkit-appearance: none;}
.auth-input:focus {border-color: var(--auth-indigo-deep-3);
            box-shadow: 0 0 0 3px var(--auth-indigo-deep-a10);
            background: var(--auth-surface-2);}
.auth-input::placeholder {color: var(--auth-faint);}
.auth-input.is-invalid {border-color: var(--auth-orange);}
.auth-error {font-size: 0.82rem;
            color: var(--auth-orange-2);
            margin-top: 4px;}
.auth-row {display: flex;
            justify-content: flex-end;
            align-items: center;
            margin-bottom: 24px;}
.auth-link {font-size: 0.88rem;
            font-weight: 600;
            color: var(--auth-indigo-deep-3);
            text-decoration: none;}
.auth-link:hover {text-decoration: underline;}
.auth-btn {width: 100%;
            height: 52px;
            border: none;
            border-radius: 12px;
            font-family: inherit;
            font-size: 1rem;
            font-weight: 700;
            cursor: pointer;
            -webkit-tap-highlight-color: transparent;
            transition: background 0.15s, transform 0.1s;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;}
.auth-btn-primary {background: var(--auth-indigo-deep-3);
            color: var(--auth-surface-2);}
.auth-btn-primary:hover {background: var(--auth-indigo-deep-4);}
.auth-btn-primary:active {transform: scale(0.98);}
.auth-btn-primary:disabled {opacity: 0.6;
            cursor: not-allowed;
            transform: none;}
.auth-spinner {display: inline-block;
            width: 18px;
            height: 18px;
            border: 2px solid var(--auth-surface-a30);
            border-top-color: var(--auth-surface-2);
            border-radius: 50%;
            animation: auth-spin 0.6s linear infinite;}
@keyframes auth-spin {
to { transform: rotate(360deg); }
}
.auth-footer {text-align: center;
            margin-top: 24px;
            font-size: 0.9rem;
            color: var(--auth-muted);}
.auth-footer a {color: var(--auth-indigo-deep-3);
            font-weight: 600;
            text-decoration: none;}
.auth-footer a:hover {text-decoration: underline;}

/* Passkeys.
   Tokens only, so the dark palette at the top of this file already covers it.
   The block stays hidden until the browser says it can do WebAuthn.

   It sits above the password fields: it is the quickest way in, and at the foot
   of the page it was below the fold on a phone, so the only way to find the
   faster option was to scroll past the slower one. */
.auth-passkey {margin-bottom: 4px;}
.auth-btn-passkey {border: 1px solid var(--auth-indigo-deep-3);
            color: var(--auth-indigo-deep-3);
            background: transparent;
            font-weight: 600;}
.auth-btn-passkey:hover {background: var(--auth-indigo-deep-a10);}
.auth-divider {display: flex;
            align-items: center;
            gap: 12px;
            margin: 16px 0;
            color: var(--auth-muted);
            font-size: 0.8rem;}
.auth-divider::before,
.auth-divider::after {content: "";
            flex: 1 1 auto;
            height: 1px;
            background: var(--auth-line);}
.auth-passkey-error {margin-top: 10px; text-align: center;}
.auth-copyright {text-align: center;
            padding: 20px 24px;
            font-size: 0.78rem;
            color: var(--auth-faint);}
.auth-turnstile {display: flex;
            justify-content: center;
            margin-bottom: 20px;}
.auth-turnstile .mb-4 {margin-bottom: 0 !important;}
.auth-toast {position: fixed;
            top: 16px;
            left: 16px;
            right: 16px;
            z-index: 100;
            padding: 14px 18px;
            border-radius: 12px;
            font-size: 0.9rem;
            font-weight: 500;
            box-shadow: 0 4px 16px var(--auth-ink-a12);
            animation: auth-toast-in 0.3s ease;}
.auth-toast.success {background: var(--auth-green-deep); color: var(--auth-surface-2);}
.auth-toast.error {background: var(--auth-orange-deep); color: var(--auth-surface-2);}
.auth-toast.info {background: var(--auth-indigo-deep-5); color: var(--auth-surface-2);}
@keyframes auth-toast-in {
from { opacity: 0; transform: translateY(-10px); }
            to { opacity: 1; transform: translateY(0); }
}

/* ── livewire/auth/verify-two-factor.blade.php ─────────────────────────── */
.tfa-code-grid {display: flex;
        justify-content: center;
        gap: 8px;
        margin-bottom: 8px;}
.tfa-digit {width: 48px;
        height: 56px;
        text-align: center;
        font-size: 1.4rem;
        font-weight: 700;
        font-family: 'Figtree', sans-serif;
        color: var(--auth-indigo-deep);
        background: var(--auth-surface-3);
        border: 1.5px solid var(--auth-line);
        border-radius: 10px;
        outline: none;
        -webkit-appearance: none;}
.tfa-digit:focus {border-color: var(--auth-indigo-deep-3);
        box-shadow: 0 0 0 3px var(--auth-indigo-deep-a10);
        background: var(--auth-surface-2);}

/* ── breakpoints (last, so their overrides win) ──────────── */
@media (min-width: 768px) {
.auth-page {
                flex-direction: row;
                align-items: stretch;
            }

            .auth-hero {
                flex: 1;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                padding: 60px 48px;
                min-height: 100vh;
            }

            .auth-logo-icon {
                width: 80px;
                height: 80px;
                border-radius: 22px;
                margin-bottom: 24px;
            }

            .auth-brand { font-size: 2.4rem; margin-bottom: 8px; }
            .auth-tagline { font-size: 1.1rem; }

            .auth-form-panel {
                flex: none;
                width: 480px;
                border-radius: 0;
                margin-top: 0;
                display: flex;
                flex-direction: column;
                justify-content: center;
                padding: 48px 40px;
            }

            .auth-form-title { font-size: 1.6rem; }
}
@media (min-width: 1200px) {
.auth-form-panel { width: 520px; padding: 60px 56px; }
            .auth-hero { padding: 80px 60px; }
            .auth-brand { font-size: 2.8rem; }

            .auth-hero::before { width: 500px; height: 500px; }
            .auth-hero::after { width: 400px; height: 400px; }
}

/* Accept-invitation and reset-password share these. */
.auth-hint { font-size: .78rem; color: var(--auth-faint); margin-top: 4px; line-height: 1.45; }
.auth-consent { display: flex; align-items: flex-start; gap: 10px; }
.auth-consent input[type="checkbox"] {
  width: 20px; height: 20px; margin-top: 2px; accent-color: var(--auth-indigo-deep-3); flex-shrink: 0;
}
.auth-consent label { font-size: .88rem; color: var(--auth-muted); cursor: pointer; }
.auth-consent-error { margin-top: -12px; margin-bottom: 12px; }

/* ── Lifted out of verify-two-factor.blade.php ─────────────────────────────
   These were style attributes on the template. A colour in a style
   attribute cannot follow a theme, so they had to come here. */
.auth-ink { color: var(--auth-faint); }
.auth-tcenter { text-align: center; margin-bottom: 24px; }
.auth-irow-mid-jmid { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; background: var(--auth-x1); border-radius: 14px; margin-bottom: 16px; }
.auth-mb { margin-bottom: 4px; }
.auth-fs0_95r-semi-ink { font-weight: 600; color: var(--auth-indigo-deep); font-size: 0.95rem; }
.auth-mb-2 { margin-bottom: 20px; }
.auth-tcenter-fs0_85r-semi { font-size: 0.85rem; font-weight: 600; color: var(--auth-ink); margin-bottom: 8px; text-align: center; }
.auth-tcenter-2 { text-align: center; }
.auth-row-g10 { display: flex; gap: 10px; margin-bottom: 20px; }
.auth-x { flex: 1; }
.auth-x-2 { flex: none; }
.auth-tcenter-fs0_88r { text-align: center; font-size: 0.88rem; }

/* ── Lifted out of verify-email.blade.php ─────────────────────────────
   These were style attributes on the template. A colour in a style
   attribute cannot follow a theme, so they had to come here. */
.auth-mb-3 { margin-bottom: 20px; }
.auth-ink-2 { color: var(--auth-indigo-deep); }
.auth-fs0_9r-med-ink { background: var(--auth-x1); border-radius: 10px; padding: 14px 16px; margin-bottom: 20px; color: var(--auth-indigo-deep-3); font-size: 0.9rem; font-weight: 500; }
.auth-mb-4 { margin-bottom: 16px; }
.auth-tcenter-fs0_85r-ink { text-align: center; font-size: 0.85rem; color: var(--auth-faint); margin-bottom: 20px; }
.auth-tcenter-3 { text-align: center; }
.auth-fs0_9r { font-size: 0.9rem; }

/* ── Lifted out of reset-password.blade.php ─────────────────────────────
   These were style attributes on the template. A colour in a style
   attribute cannot follow a theme, so they had to come here. */
.auth-fs0_78r-ink { font-size: 0.78rem; color: var(--auth-faint); margin-top: 4px; }
.auth-row-top-g10 { display: flex; align-items: flex-start; gap: 10px; }
.auth-w { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--auth-indigo-deep-3); flex-shrink: 0; }
.auth-fs0_88r-ink { font-size: 0.88rem; color: var(--auth-muted); cursor: pointer; }
.auth-mb-5 { margin-top: -12px; margin-bottom: 12px; }

/* ── Lifted out of register.blade.php ─────────────────────────────
   These were style attributes on the template. A colour in a style
   attribute cannot follow a theme, so they had to come here. */
.auth-fs0_78r-ink-2 { font-size: 0.78rem; color: var(--auth-faint); margin-top: 4px; }
.auth-row-top-g10-2 { display: flex; align-items: flex-start; gap: 10px; }
.auth-w-2 { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--auth-indigo-deep-3); flex-shrink: 0; }
.auth-fs0_88r-ink-2 { font-size: 0.88rem; color: var(--auth-muted); cursor: pointer; }
.auth-mb-6 { margin-top: -12px; margin-bottom: 12px; }

/* ── Lifted out of logout.blade.php ─────────────────────────────
   These were style attributes on the template. A colour in a style
   attribute cannot follow a theme, so they had to come here. */
.auth-ink-bg { background: var(--auth-x1); color: var(--auth-indigo-deep-3); padding: 0 24px; height: 52px; }
.auth-row-mid-g8 { display: flex; align-items: center; gap: 8px; padding: 10px 16px; color: var(--auth-x2); font-size: 0.85rem; font-weight: 500; text-decoration: none; cursor: pointer; }

/* ── Lifted out of forgot-password.blade.php ─────────────────────────────
   These were style attributes on the template. A colour in a style
   attribute cannot follow a theme, so they had to come here. */
.auth-mb-7 { margin-bottom: 12px; }
.auth-semi-ink-bg { background: var(--auth-x1); color: var(--auth-indigo-deep-3); font-weight: 600; }

/* ── A word about why you are back on this page ───────────────────────────
   Shown when a reset link has timed out. It replaces an abort(403), which
   rendered the "you do not have access to this" page and read to the person
   holding the link as though their account had been locked. */
.auth-note {
    border-radius: 10px;
    padding: .75rem .9rem;
    margin-bottom: 1.1rem;
    font-size: .88rem;
    line-height: 1.5;
    border: 1px solid var(--auth-note-border);
    background: var(--auth-note-bg);
    color: var(--auth-note-ink);
}
:root {
    --auth-note-bg: #fff8ec;
    --auth-note-border: #f0dcb4;
    --auth-note-ink: #7a5300;
}
:root[data-bs-theme="dark"] {
    --auth-note-bg: rgba(251,191,36,.10);
    --auth-note-border: rgba(251,191,36,.30);
    --auth-note-ink: #fcd34d;
}

/* ── Signing in with a recovery code ──────────────────────────────────────
   The way back in when the authenticator is gone. Kept below the six-digit
   form and only opened on request, so the ordinary path stays the obvious
   one. */
.auth-recovery { display: flex; flex-direction: column; gap: .6rem; text-align: left; margin-top: .9rem; }
.auth-recovery .auth-input { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .02em; }
/* The column must not shrink the button: .auth-btn carries its own height and
   a flex-shrink from the parent collapses it to a strip. */
.auth-recovery .auth-btn { flex: none; }
.auth-mt { margin-top: 1.2rem; }

/* ── Remembering a device ─────────────────────────────────────────────────
   Sits under the code boxes and above the Verify button, because it is a
   decision about this sign-in rather than a setting. */
.auth-trust {
    display: flex; align-items: center; flex-wrap: wrap; gap: .45rem;
    margin: 0 0 1rem; font-size: .86rem; color: var(--auth-muted);
    cursor: pointer;
}
.auth-trust input[type="checkbox"] { accent-color: var(--auth-indigo-deep-3); margin: 0; }
.auth-trust-select {
    border: 1px solid var(--auth-line); border-radius: 7px;
    padding: .25rem .45rem; font-family: inherit; font-size: .84rem;
    /* The control is a field, so it takes the field's ground and ink rather
       than inheriting the lede's colour - inherit left it grey-on-white and,
       in dark, a white control on a dark page. */
    background: var(--auth-surface-2); color: var(--auth-ink);
}