/* ─────────────────────────────────────────────────────────────────────────────
   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; }
/* The UA's [hidden] rule loses to any explicit `display` below (e.g. #login-form:
   display:flex), so `el.hidden = true` would not hide it. Restore the intent. */
[hidden] { display: none !important; }

:root {
    --bg:          #F7F5F0;
    --surface:     #FFFFFF;
    /* Two weights of line: hairlines for plain containers (boxes, tabs, dividers),
       a darker one only for things you can actually type in or press. One weight for
       everything made the card read as a stack of identical rectangles. */
    --border:      #E2DCCE;
    --field-border:#CBC3B1;
    --ring:        rgba(63,154,156,.18);
    --radius:      14px;
    --shadow:      0 1px 2px rgba(60,56,44,.05), 0 8px 24px rgba(60,56,44,.09);
    --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 ── */
/* Spacing has two levels only: .875rem between blocks of one group, and the
   explicit margins below between groups (identity / method / action). A single
   uniform gap gave the eye nothing to group by. */
.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: 2rem 1.75rem 1.75rem;
    display: flex;
    flex-direction: column;
    gap: .875rem;
}
.auth-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .6rem;
    margin-bottom: .5rem;
}
.auth-logo {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: block;
}
.auth-card h1 {
    font-size: 1.5rem;
    letter-spacing: -.01em;
    text-align: center;
}
.auth-card .subtitle { color: #555148; text-align: center; font-size: .95rem; }
.auth-card .subtitle.warning { color: var(--danger); font-weight: 600; }

/* Panels: same two-level rhythm inside a tab. */
#panel-email, #panel-phrase,
#phrase-signin, #phrase-register, #phrase-words-section, #success-msg {
    display: flex;
    flex-direction: column;
    gap: .875rem;
}

/* ── Auth method tabs ── */
.auth-tabs, .phrase-mode-row {
    display: flex;
    gap: 4px;
    border-radius: 10px;
    padding: 4px;
    background: var(--bg);
    border: 1px solid var(--border);
}
.auth-tabs { margin-bottom: .25rem; }
.auth-tab {
    flex: 1;
    padding: .45rem .75rem;
    border-radius: 7px;
    background: transparent;
    color: var(--muted);
    border: none;
    font-size: .875rem;
    font-weight: 600;
    width: auto;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.auth-tab:hover:not(:disabled):not(.active) { background: rgba(60,56,44,.05); color: var(--text); }
.auth-tab.active {
    background: var(--surface);
    color: var(--primary-dk);
    box-shadow: 0 1px 2px rgba(60,56,44,.10);
}

/* ── Phrase words grid ── */
.phrase-words-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .4rem;
}
.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;
}
.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: 10px; 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(--field-border);
    border-radius: 8px;
    cursor: pointer;
}
.captcha-refresh:hover { background: var(--bg); }
.verification-widget { display: block; }
.pow-box {
    display: flex; align-items: center; gap: .5rem;
    border: 1px solid var(--border); border-radius: 10px;
    padding: .7rem .85rem; background: var(--bg);
    transition: padding .2s, background .2s;
}
.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; }
/* Once solved the check is a receipt, not a control: collapse the plaque to a
   single quiet line so it stops competing with the actual form fields. */
.pow-box.done {
    border-color: transparent;
    background: transparent;
    padding: 0;
    justify-content: center;
}
.pow-box.done .pow-status { color: var(--success-bd); font-size: .8rem; }
@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: 10px; padding: .75rem .9rem; 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 rgba(61,145,104,.35); }

/* ── "Link sent" step ── */
.sent-banner { display: flex; align-items: flex-start; gap: .6rem; }
.sent-check {
    flex: none;
    width: 20px; height: 20px;
    margin-top: .1rem;
    border-radius: 50%;
    background: var(--success-bd);
    color: #fff;
    font-size: .7rem;
    line-height: 20px;
    text-align: center;
}
.sent-title { font-weight: 600; }
.sent-title strong { word-break: break-all; }
.sent-note  { color: #4B6B58; font-size: .8rem; line-height: 1.4; margin-top: .15rem; }
.sent-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
}
.resend-status { color: var(--muted); font-size: .8rem; }

/* Link-styled button: a text action that must not look like a field or a control. */
button.linklike {
    width: auto;
    padding: 0;
    background: none;
    border: none;
    color: var(--muted);
    font-size: .8rem;
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 3px;
}
button.linklike:hover:not(:disabled) { background: none; color: var(--text); }
#resend-btn { color: var(--primary-dk); font-weight: 600; }
#resend-btn:hover:not(:disabled) { color: var(--primary-dk); }

/* ── Form fields ── */
#login-form { display: flex; flex-direction: column; gap: .75rem; }
#code-form   { gap: .5rem; }
#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: .7rem .9rem;
    border: 1px solid var(--field-border);
    border-radius: 10px;
    font-size: 1rem;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--ring); }
input::placeholder, textarea::placeholder { color: #A9A392; }

textarea {
    width: 100%;
    padding: .7rem .9rem;
    border: 1px solid var(--field-border);
    border-radius: 10px;
    font-size: .95rem;
    font-family: inherit;
    resize: vertical;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
    background: var(--surface);
    color: var(--text);
}
textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--ring); }

/* ── Buttons ── */
button {
    width: 100%;
    padding: .75rem 1rem;
    border: none;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    background: var(--primary);
    color: #fff;
    transition: background .15s, box-shadow .15s;
}
button:hover:not(:disabled) { background: var(--primary-dk); }
button:disabled { opacity: .55; cursor: not-allowed; }
button:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); }
button.secondary {
    background: transparent;
    color: var(--muted);
    border: 1px solid var(--field-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(--field-border);
}

/* ── Narrow screens ── */
@media (max-width: 420px) {
    .auth-container { padding: 1rem; }
    .auth-card      { padding: 1.75rem 1.25rem 1.5rem; }
    /* The two text actions don't fit side by side here; stack them centred
       instead of letting space-between wrap into a ragged second line. */
    .sent-actions   { flex-direction: column; align-items: center; gap: .45rem; }
}