/* ==========================================================================
   assets/css/page-auth.css — auth/*.php (login, register/signup, username,
   verified, forgot, check-email, reset, phone code).
   References: lite5/auth-login-preview.html, auth-signup, auth-username,
   auth-verified, auth-forgot, auth-check-email, auth-reset, auth-phone.
   Page-specific layout only — tokens/colours/radii/shadows come from
   brutal-lite.css (Appendix A). Moved out of assets/css/legacy-pages.css
   SECTION 2 (builder B1, see PAGE-BUILDER.md report) — these classes are
   exclusive to the 8 auth/*.php pages, grepped first to confirm.
   Owner: builder B1.
   ========================================================================== */
/* reference: .auth-body{padding-top:60px;} — the old legacy-pages.css value
   (28px) never matched the reference; fixed here. */
.auth-body{padding-top:60px;}
.logo-stamp{display:flex;justify-content:center;margin:6px 0 22px;}
.logo-stamp img{width:60px;height:60px;display:block;transform:rotate(-4deg);border-radius:14px;
  border:var(--bd);box-shadow:var(--sh);background:var(--yellow);padding:8px;}
.btn-social{width:100%;margin-bottom:12px;gap:10px;}
.btn-social svg{width:19px;height:19px;flex:0 0 auto;}
.or-div{display:flex;align-items:center;gap:10px;margin:22px 0;}
.or-div .line{flex:1;height:1px;background:var(--line);}
.or-div span{font:700 12px/1 var(--font-ui);color:var(--muted-2);text-transform:uppercase;letter-spacing:.06em;}
.field-icon{color:var(--muted);font-size:18px;flex:0 0 auto;}
.eye{color:var(--muted-2);font-size:17px;flex:0 0 auto;background:none;border:0;cursor:pointer;display:flex;}
.forgot-row{display:flex;justify-content:flex-end;margin:-6px 2px 22px;}
.forgot-row a{font:700 13.5px/1 var(--font-ui);color:var(--blue);}
.bottom-link{text-align:center;margin-top:24px;font-size:14px;font-weight:600;color:var(--muted);}
.bottom-link a{color:var(--blue);font-weight:800;}
.top-bar{padding:0 0 10px;}
/* v271 errors = calm "on the fields" style (owner pick B): no box, red line + red field outlines.
   lite.css isn't loaded on auth pages, so .field-error is defined here. */
.field-error{display:flex;align-items:flex-start;gap:6px;margin:0 2px 14px;
  font:700 13px/1.4 var(--font-ui);color:#d22a20;}
.field-error i{font-size:16px;flex:0 0 auto;margin-top:1px;}
.field-error.field-note{color:var(--muted);font-weight:600;}
.input.is-bad{border-color:var(--red);}
.field-error--under{margin-top:-4px;margin-bottom:14px;}

/* -- signup: link field, password strength, terms checkbox -- */
.link-field{padding-left:6px;gap:0;}
.link-prefix{display:inline-flex;align-items:center;flex:0 0 auto;margin-right:8px;
  font:700 11px/1 var(--font-ui);color:var(--muted);background:none;border:0;white-space:nowrap;}
.link-field input{font-weight:700;}
.field-hint-ok{display:inline-flex;align-items:center;gap:5px;margin:8px 2px 0;
  font:800 11.5px/1 var(--font-ui);color:var(--ink);background:var(--lime);border:var(--bd);
  border-radius:var(--r-pill);padding:4px 9px;box-shadow:var(--sh-sm);transform:rotate(2deg);}
.field-hint-ok i{font-size:12px;}
.strength-row{display:flex;align-items:center;gap:8px;margin:10px 2px 0;}
.strength-bar{flex:1;display:flex;gap:4px;}
.strength-bar span{flex:1;height:7px;border-radius:3px;border:1.5px solid var(--ink);background:#fff;}
.strength-bar span.filled{background:var(--yellow);}
.strength-label{font:800 12px/1 var(--font-ui);color:var(--ink);flex:0 0 auto;}
.check-row{display:flex;align-items:flex-start;gap:10px;margin:22px 2px 22px;}
.checkbox{width:22px;height:22px;border-radius:6px;flex:0 0 auto;margin-top:1px;background:#fff;
  border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--ink);font-size:13px;appearance:none;cursor:pointer;position:relative;}
.checkbox:checked{background:var(--yellow);border:var(--bd);}
.checkbox:checked::after{content:"\2713";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:900;line-height:1;}
.checkbox:focus-visible{outline:2px solid var(--blue);outline-offset:2px;}
.check-label{font-size:13px;color:var(--muted);font-weight:500;line-height:1.5;}
.check-label a{color:var(--blue);font-weight:700;}

/* -- username step -- */
.avatar-wrap{position:relative;width:96px;height:96px;margin:4px auto 20px;}
.avatar-wrap img.av{width:96px;height:96px;}
.camera-badge{position:absolute;bottom:-2px;right:-2px;width:30px;height:30px;border-radius:50%;
  background:var(--yellow);border:var(--bd);display:flex;align-items:center;justify-content:center;color:var(--ink);font-size:14px;}
.at-prefix{color:var(--ink);font-weight:800;font-size:16px;flex:0 0 auto;}
.hint-ok{display:inline-flex;align-items:center;gap:5px;margin:9px 2px 20px;
  font:800 11.5px/1 var(--font-ui);color:var(--ink);background:var(--lime);border:var(--bd);
  border-radius:var(--r-pill);padding:4px 9px;box-shadow:var(--sh-sm);transform:rotate(2deg);}
.hint-ok i{font-size:12px;}
.field-hint-grey{font-size:12.5px;color:var(--muted);font-weight:500;margin:8px 2px 20px;}
.chip-row{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 24px;}
.footnote{text-align:center;margin-top:18px;font-size:12.5px;color:var(--muted);font-weight:500;}
.fine-print{font-size:12px;font-weight:500;color:var(--muted-2);text-align:center;line-height:1.5;margin:16px 0 0;}
.fine-print a{color:var(--blue);font-weight:700;}

/* -- verified / celebration -- */
.center-body{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 8px 0;text-align:center;}
.confetti-wrap{position:relative;width:220px;height:220px;display:flex;align-items:center;justify-content:center;margin-bottom:10px;}
.confetti-wrap .bit{position:absolute;border:1.5px solid var(--ink);}
.success-circle{position:relative;z-index:5;width:104px;height:104px;border-radius:50%;background:var(--yellow);
  border:var(--bd);display:flex;align-items:center;justify-content:center;}
.success-circle i{color:var(--ink);font-size:46px;}
.body-text{font-size:15px;color:var(--muted);font-weight:500;line-height:1.55;text-align:center;max-width:280px;margin:4px auto 28px;}
.btn-group{width:100%;}
.btn-group .btn{margin-bottom:12px;}

/* -- forgot / check-email / reset / phone: icon tile -- */
.icon-tile{width:72px;height:72px;border-radius:16px;background:var(--yellow);border:var(--bd);
  display:flex;align-items:center;justify-content:center;color:var(--ink);font-size:32px;margin:4px 0 22px;transform:rotate(-3deg);}
.subtitle{font-size:15px;color:var(--muted);font-weight:500;line-height:1.5;margin:0 0 28px;}
.subtitle b{color:var(--ink);font-weight:700;}
.subtitle a{color:var(--blue);font-weight:700;margin-left:2px;}

/* -- reset password: strength + checklist -- */
.input input.pw-dots{letter-spacing:3px;}
.strength-seg-row{display:flex;gap:5px;margin:-2px 2px 20px;align-items:center;}
.strength-seg{flex:1;height:6px;border-radius:3px;border:1.5px solid var(--ink);background:#fff;}
.strength-seg.filled{background:var(--lime);}
.match-note{display:flex;align-items:center;gap:5px;font:700 12.5px/1 var(--font-ui);color:var(--ink);margin:-4px 2px 24px;}
.checklist{margin:0 2px 28px;display:flex;flex-direction:column;gap:10px;}
.check-item{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:600;color:var(--muted-2);}
.check-item.ok{color:var(--ink);}
.tick{width:18px;height:18px;border-radius:50%;background:var(--card-2);border:1.5px solid var(--line);
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;font-size:11px;color:transparent;}
.check-item.ok .tick{background:var(--lime);border-color:var(--ink);color:var(--ink);}

/* -- phone code boxes -- */
.code-row{display:flex;gap:8px;margin-bottom:16px;justify-content:space-between;}
.code-box{width:48px;height:56px;border-radius:12px;background:#fff;border:1.5px solid var(--line);
  display:flex;align-items:center;justify-content:center;font:800 22px/1 var(--font-display);color:var(--ink);}
.code-box.focus{border:var(--bd);}
.resend-note{font-size:13.5px;color:var(--muted);font-weight:600;margin:0 2px 28px;}

/* v184 — sign-up profile photo: tappable circle + a row of ready avatars (one pre-picked) */
label.avatar-wrap{ display:block; cursor:pointer; }
.avatar-wrap img.av{ object-fit:cover; border-radius:50%; }
.su-av__row{ display:flex; gap:10px; overflow-x:auto; padding:4px 2px 8px; scrollbar-width:none; }
.su-av__row::-webkit-scrollbar{ display:none; }
.su-av__it, .su-av__up{ flex:0 0 48px; width:48px; height:48px; padding:0; border-radius:50%; background:none; border:0; cursor:pointer; }
.su-av__it img{ width:48px; height:48px; border-radius:50%; border:2px solid var(--ink); display:block; }
.su-av__it.is-on img{ outline:3px solid var(--yellow); outline-offset:2px; }
/* v272: ".field.su-av" prefix — the generic ".field label{display:block;margin…}" was beating
   this rule, so the camera icon sat in the top-left corner instead of the middle of the circle */
.field.su-av .su-av__up{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; margin:0; border:1.5px dashed var(--ink-soft);
  color:var(--ink); font:700 9px/1 var(--font-ui); }
.su-av__up i{ font-size:20px; }

/* v196: buttons give clear feedback — press-down on tap, spinner while busy (phone sign-in) */
.page .btn:not(:disabled):active{transform:translate(2px,2px);box-shadow:none;}
.page .btn:disabled:not(.is-busy){opacity:.4;}
.btn.is-busy{cursor:progress;}
.btn-spin{display:inline-block;width:17px;height:17px;margin-right:9px;vertical-align:-3px;border-radius:50%;border:2.5px solid currentColor;border-right-color:transparent;animation:authSpin .7s linear infinite;}
@keyframes authSpin{to{transform:rotate(360deg);}}
@media (prefers-reduced-motion:reduce){.btn-spin{animation-duration:2s;}}
#phResend{background:none;border:0;padding:0;font:inherit;font-weight:700;cursor:pointer;}
#phResend:disabled{color:var(--muted);cursor:default;}
/* v196: phone number = country-code box + number box */
.ph-row{display:flex;gap:8px;}
.ph-cc{position:relative;flex:0 0 auto;gap:6px;padding:0 12px;cursor:pointer;}
.ph-cc__show{font-weight:700;font-size:16px;white-space:nowrap;}
.ph-cc i{font-size:14px;}
.ph-cc select{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;font-size:16px;}
.ph-num{flex:1;min-width:0;}
.ph-cc:focus-within{border:var(--bd);box-shadow:var(--sh-sm);}