/* ==========================================================
   SIGN IN / SIGN UP — page-auth.php
   Only loaded on this template (see functions.php enqueue block).
   Assumes topsteen.css (design tokens, .btn, nav/topbar/footer,
   .filter-defs marble filters) already loaded first.
   ========================================================== */

.auth-page{ min-height:100vh; }

.auth-scene{
  display:grid; grid-template-columns:1.1fr 1fr; min-height:100vh;
  padding-top:114px; /* clears fixed topbar(40) + sticky nav(74) on first paint */
}

/* ---------- Left: cursor-reactive marble visual ---------- */
.auth-visual{
  position:relative; overflow:hidden; background:#1c1712;
  display:flex; align-items:flex-end; padding:64px 64px 80px;
}
.auth-visual-slab{
  position:absolute; inset:-10%;
  background:radial-gradient(120% 100% at 20% 0%, #4a4038 0%, #241f1a 55%, #141210 100%);
  transition:transform .5s var(--ease);
  will-change:transform;
}
.auth-visual-shade{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(20,18,16,.1) 0%, rgba(20,18,16,.55) 65%, rgba(20,18,16,.92) 100%);
}
.auth-visual-content{ position:relative; z-index:2; max-width:460px; }
.auth-visual-content .eyebrow{
  display:inline-block; font-family:'Manrope',sans-serif; font-size:11.5px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--orange-2); margin-bottom:18px;
}
.auth-visual-content h1{
  font-family:'Fraunces',serif; font-weight:500; font-size:clamp(34px,3.6vw,50px);
  line-height:1.08; color:var(--slab-cream); margin:0 0 20px;
}
.auth-visual-content > p{
  font-size:14.5px; line-height:1.7; color:var(--marble-muted); max-width:380px; margin:0 0 40px;
}
.auth-visual-quote{
  border-left:2px solid var(--orange); padding-left:20px;
}
.auth-visual-quote p{
  font-family:'Fraunces',serif; font-style:italic; font-size:17px; line-height:1.5;
  color:var(--slab-cream-dim); margin:0 0 8px;
}
.auth-visual-quote span{ font-size:11.5px; color:var(--marble-muted); letter-spacing:.03em; }

/* ---------- Right: floating glass card ---------- */
.auth-panel{
  display:flex; align-items:center; justify-content:center; padding:64px 40px;
  background:
    radial-gradient(600px 500px at 85% 15%, rgba(226,98,42,.08), transparent 60%),
    var(--stone-black);
}
.auth-card{
  width:100%; max-width:420px;
  background:var(--stone-black-2);
  border:1px solid var(--line); border-radius:18px;
  padding:40px 38px 36px;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.55);
}

/* Tabs */
.auth-tabs{ position:relative; display:flex; background:rgba(0,0,0,.25); border:1px solid var(--line); border-radius:999px; padding:4px; margin-bottom:26px; }
.auth-tab{
  position:relative; z-index:2; flex:1 1 50%; background:none; border:none; cursor:pointer;
  padding:11px 10px; font-family:'Manrope',sans-serif; font-size:13px; font-weight:700;
  color:var(--marble-muted); border-radius:999px; transition:color .3s;
}
.auth-tab.is-active{ color:var(--stone-black); }
.auth-tab-indicator{
  position:absolute; top:4px; left:4px; width:calc(50% - 4px); height:calc(100% - 8px);
  background:var(--orange); border-radius:999px; z-index:1;
  transition:transform .4s var(--ease);
  /* transform is set inline by auth.js (translateX(0) or translateX(100%))
     rather than via a :has() selector, so this still works in any browser
     regardless of :has() support. */
}

/* Alerts */
.auth-alert{
  font-size:12.5px; line-height:1.5; padding:12px 14px; border-radius:10px; margin-bottom:18px;
  animation:authAlertIn .35s var(--ease);
}
.auth-alert--error{ background:rgba(226,42,42,.12); border:1px solid rgba(226,42,42,.35); color:#f5b8b0; }
.auth-alert--notice{ background:rgba(226,98,42,.1); border:1px solid rgba(226,98,42,.3); color:var(--orange-2); }
@keyframes authAlertIn{ from{ opacity:0; transform:translateY(-6px);} to{ opacity:1; transform:translateY(0);} }

/* Forms container — sliding panel, both forms sit side by side and
   translate as one strip so switching tabs feels like one continuous
   motion instead of a content swap. */
.auth-forms{ position:relative; overflow:hidden; }
.auth-forms-track{ display:flex; width:200%; transition:transform .45s var(--ease); }
.auth-forms[data-active="register"] .auth-forms-track{ transform:translateX(-50%); }
.auth-form{ width:50%; flex-shrink:0; display:flex; flex-direction:column; gap:16px; padding:2px; }

.auth-field{ display:flex; flex-direction:column; gap:7px; }
.auth-field > span{ font-family:'Manrope',sans-serif; font-size:11.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--marble-muted); }
.auth-field input[type="email"], .auth-field input[type="text"], .auth-field input[type="password"]{
  width:100%; background:rgba(0,0,0,.22); border:1px solid var(--line); border-radius:10px;
  padding:12px 14px; font-family:'Manrope',sans-serif; font-size:14px; color:var(--slab-cream);
  transition:border-color .3s, background .3s;
}
.auth-field input::placeholder{ color:rgba(182,170,153,.5); }
.auth-field input:focus{ outline:none; border-color:var(--orange-2); background:rgba(0,0,0,.32); }

.auth-pw-wrap{ position:relative; }
.auth-pw-wrap input{ padding-right:42px; }
.auth-pw-toggle{
  position:absolute; right:6px; top:50%; transform:translateY(-50%); width:30px; height:30px;
  display:flex; align-items:center; justify-content:center; background:none; border:none;
  color:var(--marble-muted); cursor:pointer; transition:color .3s;
}
.auth-pw-toggle svg{ width:18px; height:18px; }
.auth-pw-toggle:hover, .auth-pw-toggle.is-visible{ color:var(--orange-2); }

.auth-row{ display:flex; align-items:center; justify-content:space-between; font-size:12.5px; }
.auth-remember{ display:flex; align-items:center; gap:7px; color:var(--marble-muted); cursor:pointer; }
.auth-remember input{ accent-color:var(--orange); }
.auth-forgot{ color:var(--marble-muted); text-decoration:none; transition:color .3s; }
.auth-forgot:hover{ color:var(--orange-2); }

.auth-terms{ display:flex; align-items:flex-start; gap:9px; font-size:12px; line-height:1.5; color:var(--marble-muted); cursor:pointer; }
.auth-terms input{ margin-top:3px; accent-color:var(--orange); flex-shrink:0; }
.auth-terms a{ color:var(--slab-cream-dim); text-decoration:underline; text-underline-offset:2px; }

.auth-submit{ width:100%; text-align:center; justify-content:center; display:flex; margin-top:4px; position:relative; }
.auth-submit:disabled{ opacity:.4; cursor:not-allowed; transform:none !important; }
.auth-submit.is-loading{ color:transparent !important; pointer-events:none; }
.auth-submit.is-loading::after{
  content:''; position:absolute; width:18px; height:18px; top:50%; left:50%; margin:-9px 0 0 -9px;
  border:2px solid rgba(20,18,16,.35); border-top-color:var(--stone-black); border-radius:50%;
  animation:authSpin .7s linear infinite;
}
@keyframes authSpin{ to{ transform:rotate(360deg); } }

/* Password strength meter */
.auth-strength{ margin-top:-4px; }
.auth-strength-bar{ display:flex; gap:5px; margin-bottom:9px; }
.auth-strength-bar span{ flex:1 1 0; height:4px; border-radius:3px; background:var(--line); transition:background .3s; }
.auth-strength[data-level="1"] .auth-strength-bar span:nth-child(1){ background:#d64545; }
.auth-strength[data-level="2"] .auth-strength-bar span:nth-child(-n+2){ background:#e08a3c; }
.auth-strength[data-level="3"] .auth-strength-bar span:nth-child(-n+3){ background:var(--orange-2); }
.auth-strength[data-level="4"] .auth-strength-bar span{ background:#5fb87a; }
.auth-strength-label{ display:block; font-size:11px; font-weight:700; letter-spacing:.03em; color:var(--marble-muted); margin-bottom:10px; }
.auth-strength[data-level="1"] .auth-strength-label{ color:#d64545; }
.auth-strength[data-level="2"] .auth-strength-label{ color:#e08a3c; }
.auth-strength[data-level="3"] .auth-strength-label{ color:var(--orange-2); }
.auth-strength[data-level="4"] .auth-strength-label{ color:#5fb87a; }

.auth-checklist{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:6px 10px; }
.auth-checklist li{
  display:flex; align-items:center; gap:6px; font-size:11.5px; color:rgba(182,170,153,.55);
  transition:color .25s;
}
.auth-checklist li svg{
  width:13px; height:13px; flex-shrink:0; opacity:.25; transition:opacity .25s, color .25s;
}
.auth-checklist li.is-met{ color:var(--slab-cream-dim); }
.auth-checklist li.is-met svg{ opacity:1; color:#5fb87a; }

.auth-match{ font-size:11.5px; min-height:14px; display:block; }
.auth-match.is-match{ color:#5fb87a; }
.auth-match.is-mismatch{ color:#d64545; }

/* Divider + social */
.auth-divider{ display:flex; align-items:center; gap:14px; margin:26px 0 18px; }
.auth-divider::before, .auth-divider::after{ content:''; flex:1; height:1px; background:var(--line); }
.auth-divider span{ font-size:11px; color:var(--marble-muted); white-space:nowrap; }

.auth-social{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.auth-social-btn{
  display:flex; align-items:center; justify-content:center; gap:9px;
  padding:11px 12px; border:1px solid var(--line); border-radius:10px;
  font-family:'Manrope',sans-serif; font-size:13px; font-weight:600; color:var(--slab-cream-dim);
  text-decoration:none; transition:border-color .3s, transform .3s, background .3s;
}
.auth-social-btn svg{ width:17px; height:17px; flex-shrink:0; }
.auth-social-btn:hover{ border-color:var(--orange-2); background:rgba(226,98,42,.06); transform:translateY(-2px); }

/* "Already signed in" state */
.auth-already{ text-align:center; padding:18px 0 6px; }
.auth-already-icon{
  width:56px; height:56px; margin:0 auto 18px; border-radius:50%;
  background:rgba(226,98,42,.12); display:flex; align-items:center; justify-content:center; color:var(--orange-2);
}
.auth-already-icon svg{ width:26px; height:26px; }
.auth-already p{ font-size:14px; color:var(--marble-muted); line-height:1.6; margin:0 0 22px; }
.auth-already p strong{ color:var(--slab-cream); }
.auth-logout-link{ display:block; text-align:center; margin-top:14px; font-size:12.5px; color:var(--marble-muted); text-decoration:none; transition:color .3s; }
.auth-logout-link:hover{ color:var(--orange-2); }

/* ---------- Responsive ---------- */
@media(max-width:980px){
  .auth-scene{ grid-template-columns:1fr; }
  .auth-visual{ min-height:280px; padding:40px 28px; }
  .auth-visual-content{ max-width:100%; }
  .auth-visual-content h1{ font-size:clamp(28px,6vw,38px); }
  .auth-visual-content > p{ margin-bottom:24px; }
  .auth-visual-quote{ display:none; } /* room is precious once stacked; the tagline above already carries the voice */
  .auth-panel{ padding:36px 20px 60px; }
}
@media(max-width:520px){
  .auth-scene{ padding-top:100px; }
  .auth-card{ padding:30px 22px 28px; border-radius:14px; }
  .auth-checklist{ grid-template-columns:1fr; }
  .auth-social{ grid-template-columns:1fr; }
}

@media(prefers-reduced-motion: reduce){
  .auth-visual-slab, .auth-forms-track, .auth-tab-indicator{ transition:none; }
}