/* auth.css — shared structure for the public auth pages (login, register,
   register-passkey). Generic + var-driven: colours/fonts come from the per-site
   theme.css (loaded alongside this), so these pages theme themselves per brand.
   This is the "generic" half of the same split the app uses (app.css + theme.css). */

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

body {
    /* theme.css already sets font/colour/background; we just centre the card. */
    display: flex; align-items: center; justify-content: center;
    padding: 1.5rem; min-height: 100vh;
}

.card, .register-card {
    background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
    padding: 2.5rem 2rem; width: 100%; max-width: 440px; box-shadow: var(--shadow-md);
}

.brand {
    font-family: var(--display); font-size: 1.55rem; color: var(--brand-deep);
    text-align: center; text-decoration: none; display: block; margin-bottom: .25rem;
}
.register-card h1 { font-family: var(--display); font-size: 1.45rem; color: var(--brand-deep); text-align: center; margin-bottom: .25rem; }
.subtitle { text-align: center; color: var(--ink-faint); font-size: .88rem; margin-bottom: 1.75rem; }

label { display: block; font-size: .8rem; font-weight: 600; color: var(--ink-soft); margin-bottom: .3rem; }
.field { margin-bottom: 1rem; }
input {
    width: 100%; padding: .7rem .85rem; border: 1.5px solid var(--line); border-radius: var(--r-sm);
    font-size: .95rem; font-family: inherit; color: var(--ink); background: var(--paper-2); transition: border-color .12s, background .12s;
}
input:focus { outline: none; border-color: var(--brand-mid); background: var(--card); }
.field.invalid input { border-color: var(--danger); background: #fef2f2; }
.field-err { display: none; color: var(--danger); font-size: .76rem; margin-top: .25rem; }
.field.invalid .field-err { display: block; }
.hint { color: var(--ink-faint); font-size: .74rem; margin-top: .25rem; }

.btn {
    width: 100%; padding: .8rem 1.25rem; border: none; border-radius: 2rem; cursor: pointer;
    font-size: .95rem; font-weight: 600; font-family: inherit; transition: background .15s, transform .15s;
}
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--brand-mid); transform: translateY(-1px); }
.btn-passkey { background: var(--card); color: var(--brand); border: 1.5px solid var(--brand-mid); margin-top: .25rem; }
.btn-passkey:hover:not(:disabled) { background: var(--brand-wash); }
.btn:disabled { opacity: .6; cursor: wait; }

/* register-passkey's primary action button */
.btn-register {
    width: 100%; padding: .8rem 1.25rem; background: var(--brand); color: #fff; border: none;
    border-radius: 2rem; font-size: .95rem; font-weight: 600; cursor: pointer; font-family: inherit; transition: background .15s, transform .15s;
}
.btn-register:hover:not(:disabled) { background: var(--brand-mid); transform: translateY(-1px); }
.btn-register:disabled { opacity: .6; cursor: wait; }

.divider { display: flex; align-items: center; gap: .75rem; color: var(--ink-faint); font-size: .78rem; margin: 1.25rem 0; }
.divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--line); }

.alert, .error-msg { display: none; background: #fee2e2; color: #b91c1c; padding: .6rem .8rem; border-radius: var(--r-sm); font-size: .82rem; margin-bottom: 1rem; text-align: center; }
.alert.ok { background: var(--brand-wash); color: var(--brand-deep); }

.foot { text-align: center; font-size: .85rem; color: var(--ink-soft); margin-top: 1.5rem; }
.foot a { color: var(--brand); font-weight: 600; text-decoration: none; }
.foot a:hover { text-decoration: underline; }

/* register-passkey extras */
.user-info { background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 1rem; margin-bottom: 1.5rem; font-size: .88rem; }
.user-info strong { display: block; font-size: .95rem; color: var(--ink); }
.user-info .detail { color: var(--ink-faint); font-size: .82rem; margin-top: .25rem; }
.instructions { font-size: .82rem; color: var(--ink-soft); margin-bottom: 1.5rem; line-height: 1.5; }
.status { font-size: .85rem; margin-top: 1rem; text-align: center; }
.status.ok { color: var(--ok); }
.status.err { color: var(--danger); }
.error-card { text-align: center; color: var(--danger); }
.error-card a { color: var(--brand); }