/* ============================================
   WritingNepal — Auth flow (sign-up) styles
   Extends style.css tokens. Kept in its own file since
   this is a self-contained flow, not the marketing site.
   ============================================ */

.auth-page{
  min-height:100vh;
  background:
    radial-gradient(circle at 12% 8%, #FBEBC8 0%, transparent 40%),
    radial-gradient(circle at 92% 85%, #E4EFF9 0%, transparent 38%),
    var(--paper);
  display:flex;
  flex-direction:column;
}
/* the [hidden] attribute must win over any display:grid/flex utility class */
[hidden]{ display:none !important; }
.auth-header{
  padding:24px 28px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.auth-header .brand{ transform:scale(0.92); transform-origin:left center; }
.auth-exit{
  font-size:.86rem;
  font-weight:700;
  color:var(--ink-soft);
  display:flex;
  align-items:center;
  gap:6px;
}
.auth-exit:hover{ color:var(--clay-deep); }

.auth-shell{
  flex:1;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:24px 20px 80px;
}
.auth-card{
  width:100%;
  max-width:760px;
  background:var(--white);
  border:2px solid var(--ink);
  border-radius:var(--radius-lg);
  box-shadow:6px 6px 0 var(--gold);
  padding:0;
  position:relative;
  overflow:hidden;
}
.auth-card-top{ padding:36px 44px 0; }
@media (max-width:640px){ .auth-card-top{ padding:26px 22px 0; } }

/* ---- fix: hard-edged box-shadow + overflow:hidden + border-radius
   is a known cross-browser rendering trap (confirmed on Chrome/macOS)
   — the shadow can render with sharp, un-rounded corners poking out
   past the card's own rounded edges instead of following the curve,
   even though the card itself renders correctly rounded. Sign Up
   genuinely needs overflow:hidden (its multi-step panels animate/
   slide and need to stay clipped to the rounded corners during
   transitions), so it isn't safe to remove globally from .auth-card.
   Forgot Password and Reset Password have no such animated content,
   so they opt out via this body class instead — same shadow, same
   rounded card, just without the glitch. */
.static-auth-card .auth-card{ overflow:visible;padding:44px 44px 40px; }

/* ---- stepper ---- */
.stepper{
  display:flex;
  align-items:center;
  gap:6px;
  margin-bottom:36px;
}
.stepper .dot{
  flex:1;
  height:6px;
  border-radius:999px;
  background:var(--line);
  transition:background .3s ease;
}
.stepper .dot.done{ background:var(--gold); }
.stepper .dot.current{ background:var(--bronze); }

.step-panel{ display:none; }
.step-panel.active{
  display:block;
  animation:step-in .38s var(--bounce);
}
@keyframes step-in{
  from{ opacity:0; transform:translateY(14px); }
  to{ opacity:1; transform:translateY(0); }
}
@media (prefers-reduced-motion: reduce){
  .step-panel.active{ animation:none; }
}

/* two-column step: sketch panel + fields, same language as the homepage pitch box */
.step-grid{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  align-items:stretch;
}
.step-grid[hidden]{ display:none; }
.step-visual{
  background:var(--paper-deep);
  border-right:2px dashed var(--line);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:32px 28px;
  text-align:center;
  gap:14px;
}
.step-visual svg{ width:100%; max-width:180px; }
.step-visual .visual-note{
  font-size:.82rem;
  color:var(--ink-soft);
  max-width:22ch;
}
.step-fields{ padding:36px 44px 32px; }
.step-fields-full{ padding:36px 44px 32px; }

.step-kicker{
  display:inline-block;
  background:var(--ink);
  color:var(--gold);
  font-size:.7rem;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
  padding:4px 11px;
  border-radius:999px;
  margin-bottom:12px;
}

@media (max-width: 640px){
  .step-grid{ grid-template-columns:1fr; }
  .step-visual{ border-right:none; border-bottom:2px dashed var(--line); padding:24px; }
  .step-fields, .step-fields-full{ padding:26px 22px 24px; }
}

.step-eyebrow{
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--clay-deep);
  margin-bottom:10px;
}
.step-title{
  font-family:'Fraunces',serif;
  font-weight:700;
  font-size:1.7rem;
  margin:0 0 8px;
  line-height:1.2;
}
.step-sub{
  color:var(--ink-soft);
  font-size:.98rem;
  margin:0 0 28px;
  max-width:48ch;
}

/* ---- role picker cards ---- */
.role-cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  margin-bottom:8px;
}
.role-card{
  border:2px solid var(--line);
  border-radius:18px;
  padding:22px 14px 18px;
  text-align:center;
  background:var(--paper);
  transition:transform .25s var(--bounce), border-color .2s ease, background .2s ease;
}
.role-card:hover{ transform:translateY(-4px); border-color:var(--gold); }
.role-card.selected{
  border-color:var(--clay);
  background:#FFF6EF;
  transform:translateY(-4px);
  box-shadow:var(--shadow);
}
.role-card svg{ width:64px; height:64px; margin:0 auto 12px; display:block; }
.role-card h4{
  font-family:'Work Sans',sans-serif;
  font-weight:700;
  font-size:.98rem;
  margin:0 0 4px;
}
.role-card p{ font-size:.78rem; color:var(--ink-soft); margin:0; }

/* ---- upload dropzone ---- */
.upload-zone{
  border:2px dashed var(--line);
  border-radius:16px;
  padding:26px;
  display:flex;
  align-items:center;
  gap:16px;
  cursor:pointer;
  transition:border-color .2s ease, background .2s ease;
  margin:20px 0 8px;
}
.upload-zone:hover{ border-color:var(--sky); background:#F7FBFE; }
.upload-zone .icon{
  width:52px;height:52px;border-radius:50%;
  background:var(--paper-deep);
  display:flex;align-items:center;justify-content:center;
  flex:none;
  font-size:1.4rem;
}
.upload-zone .label{ font-weight:700; font-size:.92rem; }
.upload-zone .hint{ font-size:.8rem; color:var(--ink-soft); }

/* ---- verification code ---- */
.code-inputs{
  display:flex;
  gap:12px;
  margin:8px 0 28px;
}
.code-inputs input{
  width:60px;
  height:64px;
  text-align:center;
  font-size:1.6rem;
  font-weight:800;
  border-radius:14px;
  border:2px solid var(--line);
  font-family:'Fraunces',serif;
  background:var(--paper);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.code-inputs input:focus{ border-color:var(--clay); outline:none; box-shadow:0 0 0 4px rgba(232,106,51,0.14); }
.resend-hint{ font-size:.86rem; color:var(--ink-soft); }
.resend-hint a{ color:var(--clay-deep); font-weight:700; }

/* ---- checkbox row ---- */
.check-row{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:.88rem;
  color:var(--ink-soft);
  margin:18px 0;
}
.check-row input{ margin-top:3px; width:17px; height:17px; accent-color:var(--clay); flex:none; }
/* Text (and any inline links) now lives in its own <span> sibling to
   the checkbox, rather than as loose text nodes mixed directly into
   the flex container — those used to each become their own separate
   flex item and wrap independently of each other, scattering the
   sentence across the row unpredictably instead of flowing as one
   paragraph. */
.check-row span{ line-height:1.5; }

/* ---- step actions ---- */
.step-actions{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:30px;
  gap:12px;
}
.step-back{
  font-size:.88rem;
  font-weight:700;
  color:var(--ink-soft);
}
.step-back:hover{ color:var(--ink); }
.step-back:disabled, .step-back.hidden{ visibility:hidden; }

/* ---- success ---- */
.success-badge{
  width:84px;height:84px;
  border-radius:50%;
  background:#E6F2E9;
  display:flex;align-items:center;justify-content:center;
  font-size:2.2rem;
  margin:0 auto 20px;
  animation:pop-in .5s var(--bounce);
}
@keyframes pop-in{
  0%{ transform:scale(0); }
  70%{ transform:scale(1.15); }
  100%{ transform:scale(1); }
}
@media (prefers-reduced-motion: reduce){
  .success-badge{ animation:none; }
}

@media (max-width: 640px){
  .auth-card{ padding:32px 24px 28px; }
  .role-cards{ grid-template-columns:1fr; }
  .code-inputs input{ width:100%; }
}