/* ── Login page styles ─────────────────────────────────────────────────────
   Shares the same design language as style.css (same CSS variables, font,
   colour palette) but lays out a simple centred card instead of the full app. */

:root {
    --bg:           #f1f5f9;
    --surface:      #ffffff;
    --border:       #e2e8f0;
    --border-focus: #3b82f6;
    --primary:      #3b82f6;
    --primary-h:    #2563eb;
    --danger:       #ef4444;
    --danger-lite:  #fef2f2;
    --text:         #0f172a;
    --text-muted:   #64748b;
    --nav-bg:       #1e293b;
    --shadow-md:    0 4px 12px rgba(0,0,0,.08);
    --radius:       10px;
    --radius-sm:    6px;
}

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

body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    background: var(--bg);
    color: var(--text);
    font-size: 14px;
    line-height: 1.5;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ── Header band matching the app navbar ─────────────────────────────────── */

.login-header {
    background: var(--nav-bg);
    height: 56px;
    display: flex;
    align-items: center;
    padding: 0 24px;
    box-shadow: var(--shadow-md);
}

/* Brand lockup on the login / reset headers — inline SVG nest-and-feather
   logo plus the "My Feathered Nest" wordmark.  Laid out as a flex row so the
   icon and text stay vertically centred inside the 56px header band.
   Anchor variant keeps the wordmark white and removes the default underline. */
.login-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 17px;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    letter-spacing: -.3px;
}

.login-brand:hover { color: #fff; }

/* Logo sizing — SVG viewBox is 48x40 so width is slightly larger than height.
   Fixed height keeps alignment with the header band. */
.login-brand .brand-logo {
    height: 34px;
    width: auto;
    flex-shrink: 0;
}

/* ── Centred card ─────────────────────────────────────────────────────────── */

.login-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 16px;
}

.login-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    padding: 40px 40px 36px;
    width: 100%;
    max-width: 380px;
}

.login-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 6px;
}

.login-subtitle {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 28px;
}

/* ── Error alert ──────────────────────────────────────────────────────────── */

.login-error {
    background: var(--danger-lite);
    border: 1px solid #fca5a5;
    color: #b91c1c;
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    font-size: 13px;
    margin-bottom: 20px;
}

/* ── Form fields ──────────────────────────────────────────────────────────── */

.form-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 16px;
}

.form-field label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
}

.form-field input {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 8px 12px;
    font-size: 14px;
    font-family: inherit;
    color: var(--text);
    background: #fff;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
    width: 100%;
}

.form-field input:focus {
    border-color: var(--border-focus);
    box-shadow: 0 0 0 3px rgba(59,130,246,.15);
}

/* ── Submit button ────────────────────────────────────────────────────────── */

.btn-login {
    width: 100%;
    margin-top: 8px;
    padding: 10px;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background .15s;
}

.btn-login:hover {
    background: var(--primary-h);
}

/* While a submit is in flight the button is set to disabled in JS. Without
   these rules the browser blocks clicks but the button still looks fully
   active (primary fill, pointer cursor, hover highlight), so users assume
   they need to click again. Greying it out and switching the cursor makes
   the working state visually unambiguous. */
.btn-login:disabled,
.btn-login[disabled] {
    background: var(--primary);
    opacity: .6;
    cursor: not-allowed;
}
.btn-login:disabled:hover,
.btn-login[disabled]:hover {
    background: var(--primary);
}

/* ── Tab bar ──────────────────────────────────────────────────────────────
   Two equal-width tabs above the form. The active tab gets a primary-
   coloured underline; the inactive tab sits below a muted divider. */

.login-tabs {
    display: flex;
    border-bottom: 1px solid var(--border);
    margin: -8px -12px 22px;
}

.tab-btn {
    flex: 1;
    background: none;
    border: none;
    padding: 10px 0;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color .15s, border-color .15s;
}

.tab-btn:hover { color: var(--text); }

.tab-btn.is-active {
    color: var(--text);
    font-weight: 600;
    border-bottom-color: var(--primary);
}

/* ── Tab panels ───────────────────────────────────────────────────────────
   Only .is-active is visible; the hidden attribute on the non-active panel
   is set in HTML and toggled in JS. */

.tab-panel { display: none; }
.tab-panel.is-active { display: block; }

/* ── Banners (success + error) ────────────────────────────────────────────
   Thin, full-width alerts used to surface query-string flags like
   ?verified=true or ?reset=true once login.js parses the URL. */

.login-banner {
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    font-size: 13px;
    margin-bottom: 20px;
}

.login-banner--success {
    background: #ecfdf5;
    border: 1px solid #6ee7b7;
    color: #065f46;
}

.login-banner--error {
    background: var(--danger-lite);
    border: 1px solid #fca5a5;
    color: #b91c1c;
}

/* Informational banner — used on the Register tab to steer existing-family
   invitees toward the invitation flow rather than self-service registration. */
.login-banner--info {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1e40af;
}

/* ── Form helper text ─────────────────────────────────────────────────────
   Small grey note shown below a field (e.g. password-strength rules, optional
   flag on the surname input). */

.form-help {
    font-size: 12px;
    font-weight: 400;
    color: var(--text-muted);
}

/* ── Links row under the password field ───────────────────────────────── */

.form-links {
    display: flex;
    justify-content: flex-end;
    margin: -6px 0 14px;
}

/* The `hidden` attribute's display:none is otherwise overridden by the
   .form-links display:flex rule above, so JS-gated rows (e.g.
   #resendVerificationRow) would stay visible. This higher-specificity rule
   restores hiding so they stay hidden until login.js clears `hidden`. */
.form-links[hidden] {
    display: none;
}

.link-btn {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    font-size: 12px;
    color: var(--primary);
    cursor: pointer;
    text-decoration: underline;
}

.link-btn:hover { color: var(--primary-h); }

/* ── Post-registration / post-reset confirmation blocks ────────────────── */

.register-success {
    background: #ecfdf5;
    border: 1px solid #6ee7b7;
    border-radius: var(--radius-sm);
    padding: 18px;
    color: #065f46;
}

.register-success h2 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 6px;
}

.register-success p {
    font-size: 13px;
    line-height: 1.5;
}

.register-success p + p { margin-top: 10px; }
.register-success .muted { color: #4b7268; }

/* ── Forgot-password dialog ───────────────────────────────────────────── */

/* Native <dialog> centering varies between browsers (Chrome anchors top,
   Firefox centers). Force true viewport-centering with position: fixed +
   translate, overriding the UA-default top/margin. Applies to every dialog
   used by the auth / registration flow via the shared .auth-dialog class. */
.auth-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    border: none;
    border-radius: var(--radius);
    box-shadow: 0 24px 64px rgba(0,0,0,.20);
    padding: 28px 28px 24px;
    max-width: 380px;
    width: calc(100% - 32px);
}

.auth-dialog::backdrop {
    background: rgba(15, 23, 42, 0.45);
}

.auth-dialog h2 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 6px;
}

.auth-dialog .muted {
    color: var(--text-muted);
    font-size: 13px;
    margin-bottom: 16px;
}

.dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 12px;
}

.btn-secondary {
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 8px 14px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background .15s;
}

.btn-secondary:hover { background: #f8fafc; }

/* ── Trust link under the login card ───────────────────────────────────
   Centred small link to /security.html, sitting just below the card on
   the login page. Kept visually quiet (muted by default, primary on hover)
   so it doesn't compete with the Sign-in CTA but is easy to find for
   anyone hesitating. */
.login-trust-link {
    text-align: center;
    margin-top: 18px;
    font-size: 13px;
}

.login-trust-link a {
    color: var(--text-muted);
    text-decoration: none;
}

.login-trust-link a:hover {
    color: var(--primary);
    text-decoration: underline;
}