/* see CLAUDE_notes.md */

:root{
  --fa-ink:#12303f; --fa-ink-2:#5b6f7b; --fa-line:#d8e0e6;
  --fa-accent:#2e5d78; --fa-accent-dk:#24485e; --fa-bg:#eef2f4;
}
/* Wrapper inside <main> — centres the card and gives it breathing room below
   the header. */
.auth-page{ width:100%; padding:2.5rem 16px 3.5rem; box-sizing:border-box;
            font-family:'Inter',system-ui,-apple-system,Segoe UI,Arial,sans-serif; }
.auth-wrap{max-width:400px;margin:0 auto;background:#fff;border:1px solid var(--fa-line);
           border-radius:10px;padding:26px 28px;box-shadow:0 8px 30px rgba(0,0,0,.08);
           color:var(--fa-ink);}
.auth-brand{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-xl);font-weight:700;
            color:var(--fa-ink);text-decoration:none;}
.auth-brand span{color:var(--fa-accent);}
.auth-wrap h1{font-size:var(--fs-xl);margin:12px 0 4px;color:var(--fa-ink);}
.auth-sub{color:var(--fa-ink-2);font-size:var(--fs-xs);margin-bottom:18px;line-height:1.45;}
.auth-wrap label{display:block;font-size:var(--fs-xs);font-weight:600;color:#456;margin:12px 0 4px;}
.auth-wrap input[type=text],.auth-wrap input[type=email],.auth-wrap input[type=password]{
   width:100%;box-sizing:border-box;padding:9px 10px;border:1px solid #c7d0d6;
   border-radius:6px;font-size:var(--fs-sm);font-family:inherit;}
.auth-wrap input:focus{outline:2px solid rgba(46,93,120,.25);border-color:var(--fa-accent);}
.auth-hint{font-weight:400;color:#8a98a0;}
/* Standalone note under a field group (first_login explains the one visible
   field). The inline .auth-hint above rides inside a <label>; this one is its
   own block, so it needs the spacing and size a label was giving it. */
.auth-hint--block{display:block;margin-top:10px;font-size:var(--fs-2xs);line-height:1.45;}

/* ── first login ─────────────────────────────────────────────────────────
   The temporary password starts VISIBLE (type=text) and is read character by
   character off a link or a message, so it is set in a monospace face with a
   little tracking: l/1 and O/0 have to be told apart. The same class stays on
   the field once it is masked, and on Confirm, so the box does not resize or
   change character the moment the visitor types. */
.auth-wrap input.fl-pw{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
   letter-spacing:.02em;}

/* The way back after an accidental keystroke — see first_login.php. Quiet, and
   below the hint, because keeping the temporary password is already the default
   and this is only for someone who left it by mistake. */
.fl-undo{margin-top:8px;}
.fl-undo a{font-size:var(--fs-2xs);color:var(--fa-ink-2);text-decoration:underline;}
.fl-undo a:hover{color:var(--fa-accent);}
.auth-remember{display:flex;align-items:center;gap:8px;margin:14px 0 0;font-size:var(--fs-xs);
               font-weight:500;color:#456;cursor:pointer;}
.auth-remember input{width:auto;margin:0;accent-color:var(--fa-accent);cursor:pointer;}
.auth-btn{margin-top:18px;width:100%;padding:10px;border:0;border-radius:6px;
          background:var(--fa-accent);color:#fff;font-size:var(--fs-md);font-weight:600;
          cursor:pointer;font-family:inherit;}
.auth-btn:hover{background:var(--fa-accent-dk);}
.auth-btn[disabled]{background:#9fb3bf;cursor:not-allowed;}
.auth-links{margin-top:14px;font-size:var(--fs-xs);display:flex;justify-content:space-between;gap:10px;}
.auth-links a{color:var(--fa-accent);text-decoration:none;}
.auth-links a:hover{text-decoration:underline;}
.auth-err{background:#fdecea;border:1px solid #f3b4ad;color:#922;padding:9px 11px;
          border-radius:6px;font-size:var(--fs-xs);margin-bottom:6px;line-height:1.45;}
.auth-ok{background:#e7f5e6;border:1px solid #8fc78a;color:#216a1c;padding:9px 11px;
         border-radius:6px;font-size:var(--fs-xs);margin-bottom:6px;line-height:1.45;}
.auth-note{background:#fff6e5;border:1px solid #f0d9a8;color:#7a5b16;padding:10px 12px;
           border-radius:6px;font-size:var(--fs-xs);margin-bottom:10px;line-height:1.5;}
.auth-note a{color:#7a5b16;}
.auth-foot{margin-top:18px;padding-top:12px;border-top:1px solid var(--fa-line);
           font-size:var(--fs-xs);color:#8a98a0;text-align:center;}
.auth-foot a{color:#8a98a0;text-decoration:none;}
.auth-foot a:hover{text-decoration:underline;}

/* ── Two-column login (form + register promo) ───────────────────────────────
   auth_head($title, true) wraps the promo aside and the form card in .auth-split.
   The .reg-cta card itself is styled by the shared register_cta.css. */
.auth-split{
  display:flex;
  align-items:stretch;
  gap:22px;
  max-width:840px;
  margin:0 auto;
  box-sizing:border-box;
}
.auth-split .auth-wrap{
  margin:0;
  flex:0 0 380px;
  max-width:380px;
}
.auth-split-promo{
  flex:1 1 auto;
  min-width:0;
  display:flex;
}
.auth-split-promo .reg-cta{ width:100%; }

@media (max-width:780px){
  .auth-split{
    flex-direction:column;
    max-width:400px;
  }
  .auth-split .auth-wrap{ flex-basis:auto; max-width:100%; }
  .auth-split-promo{ order:2; }          /* form first, promo below, on phones */
}

/* ── Register page: expanded benefits + reveal-on-check fields ───────────── */

/* Expanded "why register" list at the top of the register form. */
.reg-why{
  margin:0 0 20px;
  padding:14px 16px;
  border:1px solid var(--fa-line);
  border-radius:8px;
  background:#f7fafb;
}
.reg-why h2{
  margin:0 0 10px;
  font-size:var(--fs-xs);
  font-weight:700;
  letter-spacing:.03em;
  text-transform:uppercase;
  color:var(--fa-accent-dk);
}
.reg-why ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.reg-why li{ display:flex; align-items:flex-start; gap:10px; }
.reg-why .reg-why-tick{
  flex:0 0 auto; width:18px; height:18px; margin-top:1px; border-radius:50%;
  background:var(--fa-accent); color:#fff; font-size:11px; font-weight:700;
  line-height:18px; text-align:center;
}
.reg-why b{ display:block; font-size:var(--fs-xs); color:var(--fa-ink); }
.reg-why span{ font-size:var(--fs-xs); color:var(--fa-ink-2); line-height:1.45; }

/* Grouped checkbox options (keep-updated / open-to-collaborate / roles). */
.reg-opts{
  margin:16px 0 4px;
  padding-top:14px;
  border-top:1px solid var(--fa-line);
}
.reg-opts-legend{
  font-size:var(--fs-xs); font-weight:700; color:#456;
  letter-spacing:.02em; margin-bottom:2px;
}
.reg-check{
  display:flex; align-items:flex-start; gap:9px;
  margin:12px 0 0; font-size:var(--fs-xs); font-weight:500; color:#3a4a52;
  cursor:pointer; line-height:1.4;
}
.reg-check input{
  width:auto; margin:2px 0 0; accent-color:var(--fa-accent); cursor:pointer;
  flex:0 0 auto;
}
.reg-check .reg-check-sub{
  display:block; font-weight:400; font-size:var(--fs-xs); color:var(--fa-ink-2); margin-top:1px;
}

/* A follow-up field that only appears once its checkbox is ticked. */
.reg-reveal{
  margin:8px 0 4px 27px;
  display:none;
}
.reg-reveal.is-open{ display:block; }
.reg-reveal label{ margin-top:6px; }