/* ─────────────────────────────────────────────────────────────────────────────
   Login page stylesheet — index.html loads ONLY this file (not style.css).
   Self-contained: the base reset / tokens / form + button styles the login needs are
   included here. The accent (--primary) is a saturated teal — the chat app uses a paler
   accent, but the login page keeps its own here, fully independent.
   The login page is always light (no dark-mode toggle), so no dark rules are needed.
   ───────────────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --bg:          #F7F5F0;
    --surface:     #FFFFFF;
    --border:      #ADA48F;
    --radius:      12px;
    --shadow:      0 2px 12px rgba(60,56,44,.12);
    --muted:       #85806F;
    --text:        #2C2A24;
    /* Saturated teal accent — independent of the app's paler --primary. */
    --primary:     #3F9A9C;
    --primary-dk:  #34827F;
    --danger:      #C74C44;
    --error-bg:    #F7E8E6;
    --error-bd:    #C74C44;
    --success-bg:  #E8F2EC;
    --success-bd:  #3D9168;
}

body {
    font-family: system-ui, -apple-system, sans-serif;
    background: var(--bg);
    color: var(--text);
    height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── Card ── */
.auth-container { width: 100%; max-width: 420px; padding: 1.5rem; }
.auth-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 2.5rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.auth-card h1 { font-size: 1.75rem; text-align: center; }
.auth-card .subtitle { color: #555148; text-align: center; font-size: .95rem; }

/* ── Auth method tabs ── */
.auth-tabs, .phrase-mode-row {
    display: flex;
    gap: 0;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
}
.auth-tab {
    flex: 1;
    padding: .5rem .75rem;
    background: transparent;
    color: var(--muted);
    border: none;
    border-radius: 0;
    font-size: .875rem;
    font-weight: 500;
    width: auto;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.auth-tab:hover:not(:disabled):not(.active) { background: var(--bg); }
.auth-tab.active { background: var(--primary); color: #fff; }
.phrase-mode-row { margin-bottom: .25rem; }

/* ── Phrase words grid ── */
.phrase-words-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .4rem;
    margin: .5rem 0;
}
.phrase-word {
    display: flex;
    align-items: center;
    gap: .35rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: .3rem .5rem;
    font-size: .875rem;
}
.phrase-num { color: var(--muted); font-size: .75rem; min-width: 1.1rem; }
.phrase-val { font-weight: 600; word-break: break-all; }
.phrase-saved-label {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .875rem;
    cursor: pointer;
    margin: 1rem 0;
}
.phrase-saved-label input[type="checkbox"] { width: auto; cursor: pointer; }

/* ── Human-verification (captcha / proof-of-work) ── */
.captcha-section { display: flex; flex-direction: column; gap: .4rem; border: 1px solid var(--border); border-radius: 8px; padding: .75rem; background: var(--bg); }
.captcha-row     { display: flex; align-items: center; gap: .5rem; }
.captcha-img     { border: 1px solid var(--border); border-radius: 6px; display: block; transition: opacity .2s; }
.captcha-refresh {
    width: auto;
    padding: .3rem .6rem;
    font-size: 1.1rem;
    background: transparent;
    color: var(--muted);
    border: 1px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
}
.captcha-refresh:hover { background: var(--bg); }
.verification-widget { margin: .75rem 0; }
.pow-box {
    display: flex; align-items: center; gap: .5rem;
    border: 1px solid var(--border); border-radius: 8px;
    padding: .75rem; background: var(--bg);
}
.pow-box::before {
    content: ""; width: 14px; height: 14px; border-radius: 50%;
    border: 2px solid var(--muted); border-top-color: transparent;
    animation: pow-spin .8s linear infinite;
}
.pow-box.done::before { display: none; }
.pow-status { color: var(--muted); font-size: .9rem; }
.pow-box.done .pow-status { color: var(--ok, #3fb950); }
@keyframes pow-spin { to { transform: rotate(360deg); } }

/* ── "or" divider + Google sign-in ── */
.divider { display: flex; align-items: center; color: var(--muted); font-size: .85rem; }
.divider::before, .divider::after { content: ''; flex: 1; border-bottom: 1px solid var(--border); }
.divider span { padding: 0 .75rem; }
#google-signin { display: flex; justify-content: center; }

/* ── Banners ── */
.banner { border-radius: 8px; padding: .75rem 1rem; font-size: .9rem; line-height: 1.5; }
.banner.error   { background: var(--error-bg);   border: 1px solid var(--error-bd);   color: var(--danger); }
.banner.success { background: var(--success-bg); border: 1px solid var(--success-bd); }

/* ── Form fields ── */
#login-form { display: flex; flex-direction: column; gap: .75rem; }
#username-form { display: flex; flex-direction: column; gap: 1.5rem; }   /* username.html */
.field { display: flex; flex-direction: column; gap: .4rem; }
.field label { font-size: .875rem; font-weight: 600; color: var(--muted); }
.field-hint {
    display: block;
    min-height: 1.2em;
    line-height: 1.2;
    font-size: .8rem;
    transition: color .15s;
}
.field-hint:empty { min-height: 0; }
.field-hint.success { color: var(--success-bd); }
.field-hint.error   { color: var(--danger); }
.field-note { font-size: .8rem; color: var(--muted); }

input[type="email"],
input[type="text"] {
    width: 100%;
    padding: .65rem .9rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 1rem;
    outline: none;
    transition: border-color .15s;
}
input:focus { border-color: var(--primary); }

textarea {
    width: 100%;
    padding: .65rem .9rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: .95rem;
    font-family: inherit;
    resize: vertical;
    outline: none;
    transition: border-color .15s;
    background: var(--surface);
    color: var(--text);
}
textarea:focus { border-color: var(--primary); }

/* ── Buttons ── */
button {
    width: 100%;
    padding: .7rem 1rem;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    background: var(--primary);
    color: #fff;
    transition: background .15s;
}
button:hover:not(:disabled) { background: var(--primary-dk); }
button:disabled { opacity: .55; cursor: not-allowed; }
button.secondary {
    background: transparent;
    color: var(--muted);
    border: 1px solid var(--border);
}
button.secondary:hover:not(:disabled) { background: var(--bg); }
button.secondary.small { width: auto; font-size: .8rem; padding: .3rem .7rem; }
button.ghost {
    background: transparent;
    color: var(--muted);
    border: 1px dashed var(--border);
}