/* auth-modal.css — the sign-in modal shell (SignIn.open() in /portfolio/js/signin.js).
   Extracted from portfolio/css/taste.css so pages that load the LIGHT taste-core.css
   (e.g. /explore) still style the modal. Uses the shared palette vars (--bg/--muted/…),
   which every page already defines via taste-core.css / palette.css. Class-scoped only —
   no nav/layout rules (those stay in site-nav.css / taste.css). */
.stat-modal-overlay{position:fixed;inset:0;background:rgba(20,18,15,.5);display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px;animation:pf-fadein .15s ease}
@keyframes pf-fadein{from{opacity:0}to{opacity:1}}
@keyframes pf-pop{from{transform:scale(.94);opacity:.4}to{transform:none;opacity:1}}
.auth-modal{background:var(--bg);border-radius:24px;max-width:400px;width:100%;box-shadow:0 24px 64px rgba(0,0,0,.32);
  overflow:hidden;animation:pf-pop .22s cubic-bezier(.2,.85,.25,1)}
.auth-modal .am-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:22px 24px 4px}
.auth-modal .am-title{font-size:24px;font-weight:700;letter-spacing:-.4px}
.auth-modal .am-x{border:none;background:var(--ivory);width:32px;height:32px;border-radius:50%;font-size:20px;
  cursor:pointer;color:var(--black);line-height:1;flex:0 0 auto}
.auth-modal .am-x:hover{opacity:.65}
.auth-modal .am-body{padding:8px 24px 26px}
.auth-modal .am-sub{color:var(--muted);font-size:13.5px;font-weight:500;margin:2px 0 20px;line-height:1.4}
.btn-google{display:flex;align-items:center;justify-content:center;gap:11px;width:100%;border:1.5px solid var(--border-medium);
  background:var(--bg);border-radius:var(--pill);padding:13px;font:inherit;font-weight:700;font-size:15px;color:var(--black);cursor:pointer;transition:.15s}
.btn-google:hover{background:var(--ivory)}
.btn-google svg{width:18px;height:18px;flex:none}
.am-or{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:12px;font-weight:600;margin:18px 0}
.am-or::before,.am-or::after{content:"";flex:1;height:1px;background:var(--border-medium)}
.am-field{margin-bottom:12px}
.am-field label{display:block;color:var(--muted);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px}
.am-field input{width:100%;border:1.5px solid var(--border-medium);background:var(--bg);border-radius:14px;
  padding:12px 14px;font:inherit;font-weight:600;font-size:15px;color:var(--black);outline:none;transition:border-color .15s}
.am-field input:focus{border-color:var(--black)}
.am-submit{width:100%;border:none;background:var(--black);color:var(--ivory);border-radius:var(--pill);
  padding:14px;font:inherit;font-weight:700;font-size:15px;cursor:pointer;margin-top:4px;transition:opacity .15s}
.am-submit:hover{opacity:.85}.am-submit:disabled{opacity:.4;cursor:default}
.am-err{color:var(--error);font-size:13px;font-weight:600;margin-top:12px;min-height:18px}
.am-warn{background:#FDF6E3;color:#8A6D1B;border-radius:12px;padding:11px 13px;font-size:12.5px;font-weight:600;margin-top:12px;line-height:1.4}
.am-toggle{text-align:center;color:var(--muted);font-size:13px;font-weight:500;margin-top:16px}
.am-toggle button{border:none;background:none;color:var(--black);font:inherit;font-weight:700;font-size:13px;cursor:pointer;text-decoration:underline}