/* BAREcode — PUBLIC auth pages (login + signup).
 * Rides landing.css for the suite fonts + base tokens (--accent amber, --ink,
 * --card, --line, --bg). Square-corner idiom on the white base, BAREcode's
 * estate amber accent (--brand-code #b45309). Mirrors the baresolar-public auth
 * card, including the signup / 2FA-enrolment / recovery-code surfaces. */

.authbody{background-image:radial-gradient(900px 360px at 50% -120px,
  color-mix(in srgb, var(--accent) 15%, transparent), transparent 70%)}

.authpage{max-width:460px; margin:0 auto; padding:34px 24px 46px; display:flex;
  flex-direction:column; min-height:100vh; text-align:center}

.authback{font-size:.85rem; font-weight:500; color:var(--muted); text-decoration:none;
  padding-bottom:22px; display:inline-block}
.authback:hover{color:var(--accent)}

.authcard{background:var(--card); border:1px solid var(--line); padding:30px 30px 26px;
  box-shadow:0 6px 24px rgba(23,20,31,.05); text-align:left}

.authbrand{display:flex; align-items:center; gap:10px; padding-bottom:6px}
.authlogo{width:30px; height:30px; border-radius:9px; flex:none;
  background:linear-gradient(135deg, var(--grad-a), var(--grad-b));
  box-shadow:0 2px 8px rgba(23,20,31,.16)}
.authword{font-family:'Fraunces',Georgia,serif; font-weight:700; font-size:1.15rem; letter-spacing:-.01em}
.aw-pre{color:var(--ink)} .aw-ac{color:var(--accent)}

.authtagline{font-family:'Sora','Inter',sans-serif; font-size:1.02rem; font-weight:600;
  color:var(--ink-2); margin:10px 0 4px}
.authstep{font-size:.92rem; line-height:1.55; color:var(--ink-2); margin:8px 0 6px}

.authfield{margin:14px 0}
.authfield label{display:block; font-size:.82rem; font-weight:600; color:var(--ink-2);
  margin-bottom:6px; letter-spacing:.01em}
.authfield input{width:100%; box-sizing:border-box; font:inherit; font-size:.98rem;
  padding:11px 13px; border:1px solid var(--line); background:var(--bg);
  color:var(--ink); outline:none; transition:border-color .15s, box-shadow .15s}
.authfield input:focus{border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent)}
.authcode{letter-spacing:.32em; text-align:center; font-family:'JetBrains Mono',ui-monospace,monospace}

.authbtn{display:inline-block; width:100%; box-sizing:border-box; margin-top:14px;
  font-family:'Sora',sans-serif; font-weight:600; font-size:.95rem; text-align:center;
  color:#fff; background:var(--accent); border:0; padding:12px 22px; text-decoration:none;
  box-shadow:0 6px 18px color-mix(in srgb, var(--accent) 34%, transparent);
  transition:filter .15s; cursor:pointer}
.authbtn:hover{filter:brightness(1.06)}

.autherror{font-size:.88rem; line-height:1.5; color:#9f1239;
  background:color-mix(in srgb, var(--accent) 8%, transparent);
  border:1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  padding:10px 14px; margin:12px 0 2px}

.authhint{font-size:.8rem; color:var(--muted); margin:10px 0 0; text-align:center}
.authnote{font-size:.8rem; color:var(--muted); margin:6px 0 0}

/* Wider card for the signup / enrolment surfaces. */
.authpage--wide{max-width:560px}
.authpage--wide .authcard{padding:30px 34px 30px}

.authbtn--link{display:block}

/* Sign-in / sign-up cross-link under a form. */
.authswitch{font-size:.86rem; color:var(--muted); margin:18px 0 0; text-align:center}
.authswitch a{color:var(--accent); font-weight:600; text-decoration:none}
.authswitch a:hover{text-decoration:underline}

/* Honeypot — kept in the DOM for bots but away from humans + assistive tech. */
.authtrap{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

/* --- 2FA enrolment (signup enrol stage) ------------------------------- */
.enrol{display:flex; gap:20px; align-items:center; margin:16px 0 4px; flex-wrap:wrap}
.enrol__qr{flex:none; width:180px; height:180px; background:#fff; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center}
.enrol__qr svg{width:168px; height:168px}
.enrol__manual{flex:1; min-width:170px}
.enrol__secret{display:block; font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:.95rem; letter-spacing:.06em; color:var(--ink);
  background:var(--bg); border:1px solid var(--line); padding:10px 12px; word-break:break-all}

/* --- recovery codes (signup done) ------------------------------------- */
.codes{display:grid; grid-template-columns:repeat(2, 1fr); gap:8px; margin:14px 0 4px}
.codes__one{font-family:'JetBrains Mono',ui-monospace,monospace; font-size:.9rem;
  color:var(--ink); background:var(--bg); border:1px solid var(--line);
  padding:9px 10px; text-align:center}

.authfoot{padding-top:28px; font-size:.82rem; color:var(--muted); text-align:center}
.authfoot strong{font-family:'Fraunces',serif; color:var(--ink); font-weight:700}

@media (max-width:520px){
  .authcard{padding:22px 20px 20px}
  .authpage--wide .authcard{padding:22px 20px 20px}
  .enrol{flex-direction:column; align-items:stretch}
  .enrol__qr{margin:0 auto}
  .codes{grid-template-columns:1fr}
}