/* ======================================================================
   SarkariReady — Account / Auth UI (signup, login, forgot, reset, account)
   Every class here is prefixed "au-" (frontend-dev contract, 31 Jul 2026).
   Reuses style.css tokens/components (.wizard-wrap, form#wizard, .field,
   .consent, .btn, .section-h, .side-card, .done-box…) — this file only adds
   what those don't already cover. No new colors: every value below is a
   var(--…) token already defined in style.css, so dark mode (the
   [data-theme="dark"] root override in style.css) flips these for free.
   ====================================================================== */

/* single-purpose auth cards (login/signup/forgot/reset) — narrower reading
   width than the multi-field subscribe wizard, since these forms are short */
.au-card{max-width:440px}

/* Defensive belt-and-suspenders: style.css's shared `.field input,
   .field select` rule sets a background but never an explicit `color`, so in
   [data-theme="dark"] the color falls back to whatever the browser defaults
   to. `au-input` states it explicitly for every field in THESE 5 templates
   without touching the shared style.css rule (owned by another agent right
   now). NOTE for whoever reads this next: in the QA browser tool used to
   screenshot this build, computed `color` on <input>/<select> would not
   change even via an inline `!important` override — a tooling rendering quirk
   for native form widgets in that specific harness, not a normal browser
   behavior, so it could not be used to visually *confirm* this line has any
   real effect. Kept anyway because it's correct, harmless, zero-risk CSS
   (background/spacing/overflow — everything else — WAS reliably confirmed
   visually in that same tool). If a real browser later shows dark-mode input
   text is still hard to read, this is the first place to check. */
.au-input{color:var(--ink)}

/* signup value-prop list */
.au-benefits{list-style:none; margin:0 0 20px; padding:0; display:flex; flex-direction:column; gap:9px}
.au-benefits li{display:flex; gap:9px; align-items:flex-start; font-size:13.5px; color:var(--ink-2); line-height:1.45}
.au-benefits li .ic{width:17px; height:17px; color:var(--green); flex-shrink:0; margin-top:1px}
.au-benefits li a{color:var(--brand-ink); font-weight:600}

/* password field with an inline "Show/Hide" toggle */
.au-pw-wrap{position:relative}
.au-pw-wrap input{padding-right:68px}
.au-pw-toggle{position:absolute; right:6px; top:31px; height:36px; padding:0 12px;
  border:none; background:var(--surface-2); color:var(--ink-2); border-radius:8px;
  font-size:12.5px; font-weight:700; cursor:pointer; font-family:inherit}
.au-pw-toggle:hover{background:var(--surface-3); color:var(--ink)}
.au-pw-toggle:focus-visible{outline:2px solid var(--brand); outline-offset:2px}

/* plain-language password strength hint (text, not a scored meter — this
   audience needs "too short" / "OK" / "strong" in words, not a bar to guess) */
.au-pw-hint{display:block; font-size:12px; color:var(--muted); margin-top:7px; line-height:1.4}
.au-pw-hint.weak{color:var(--red)}
.au-pw-hint.ok{color:var(--amber-ink)}
.au-pw-hint.strong{color:var(--green-ink)}

/* message banners — flash() rendering, matches the site's existing
   flash()/get_flashed_messages() idiom (see admin/login.html, practice_*.html)
   but styled for a public-facing page rather than the amber-only admin one */
.au-flash{font-size:13.5px; padding:12px 14px; border-radius:var(--r-sm); margin:0 0 18px; line-height:1.5}
.au-flash-error{background:var(--red-soft); color:var(--red)}
.au-flash-ok{background:var(--green-soft); color:var(--green-ink)}
.au-flash-warn{background:var(--amber-soft); color:var(--amber-ink)}

/* helper link row under a card form ("Forgot password?" / "Create account" / "Log in") */
.au-links{display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; margin-top:18px; font-size:13.5px}
.au-links a{color:var(--brand-ink); font-weight:700}
.au-links a:hover{text-decoration:underline}
.au-links-center{justify-content:center; text-align:center}

/* ---------- Account page ---------- */
.au-account-top{display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:26px}
.au-avatar{width:52px; height:52px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(140deg,var(--navy),#2A3766); color:#fff;
  display:grid; place-items:center; font-size:20px; font-weight:800; font-family:var(--serif)}
.au-account-id{flex:1; min-width:160px}
.au-account-id h1{font-size:19px; margin:0 0 3px}
.au-account-id p{font-size:12.5px; color:var(--muted); margin:0}
.au-account-actions{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.au-stat{display:block; background:var(--surface-2); border-radius:var(--r-sm);
  padding:9px 18px; text-align:center; min-width:78px; text-decoration:none; color:inherit; transition:.15s}
.au-stat:hover{background:var(--surface-3)}
.au-stat b{display:block; font-size:19px; color:var(--brand-ink); font-family:var(--serif)}
.au-stat span{font-size:11px; color:var(--muted); font-weight:600}

.au-section{margin-bottom:30px}
.au-section .section-h{margin-bottom:14px}
/* read-only value display (email/phone on the account form — no change-email
   route exists in the contract, so these render as text, never as inputs
   that would silently do nothing on submit) */
.au-static{padding:12px 14px; border-radius:11px; background:var(--surface-2); color:var(--ink-2); font-size:15px; margin:0}

/* Danger Zone — same visual weight/size as the Save/Download actions above
   it (no dark pattern: delete is never smaller or greyed-out to hide it) */
.au-danger{border:1.5px solid var(--red); background:var(--red-soft); border-radius:var(--r); padding:18px}
.au-danger p{font-size:13.5px; color:var(--ink-2); margin:0 0 14px}
.au-danger .consent{background:var(--surface)}
.au-btn-danger{background:var(--red); color:#fff}
.au-btn-danger:hover{background:#B01049; color:#fff}

@media(max-width:520px){
  .au-account-actions{width:100%; justify-content:space-between}
}