/* ============================================================
   Signup / login / account — same tokens as the rest of the site
   ============================================================ */

.auth-page{ background:var(--cream); }

.auth-main{
  position:relative; overflow:hidden;
  min-height:calc(100svh - 90px);
  display:flex; align-items:center; justify-content:center;
  padding:calc(var(--header-h) + 44px) 20px 64px;
}

.auth-card{
  position:relative; z-index:2;
  width:100%; max-width:560px;
  padding:clamp(26px, 4vw, 44px);
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-lg);
}
.auth-card-narrow{ max-width:440px; }

.auth-card h1{
  font-size:clamp(1.7rem, 4vw, 2.4rem);
  text-align:center; margin-bottom:10px;
}
.auth-lead{
  margin:0 0 28px; text-align:center;
  color:var(--ink-2); font-size:.98rem;
}
.auth-lead a{ color:var(--tan); font-weight:600; }
.auth-lead a:hover{ text-decoration:underline; }

/* ---------- fields (shared shape with the contact form) ---------- */
.auth-card .field{ margin-bottom:16px; }
.auth-card .field label{
  display:block; margin-bottom:7px;
  font-size:.9rem; font-weight:500; color:var(--ink-2);
}
.auth-card input,
.auth-card select{
  width:100%; padding:13px 16px;
  font-family:inherit; font-size:1rem; color:var(--ink);
  background:var(--cream);
  border:1px solid var(--line); border-radius:var(--radius-sm);
  transition:border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.auth-card select{
  appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A827B' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-size:18px;
  background-position:left 16px center;
  padding-inline-start:44px;
}
.auth-card input::placeholder{ color:#B9B2AC; }
.auth-card input:focus,
.auth-card select:focus{
  outline:none; background:#fff;
  border-color:var(--tan);
  box-shadow:0 0 0 3px rgba(196,164,132,.16);
}
.auth-card input.has-error,
.auth-card select.has-error{
  border-color:#C0564A; background:#FDF6F5;
}

.field-error{
  margin:6px 2px 0; font-size:.83rem; color:#A8392C; line-height:1.5;
}
.field-error[hidden]{ display:none; }

.form-error{
  margin:0 0 16px; padding:12px 16px;
  border-radius:var(--radius-sm);
  background:#FCEDEB; border:1px solid #F1D3CE;
  color:#8E2F23; font-size:.92rem; text-align:center;
}
.form-error[hidden]{ display:none; }

.auth-card .btn-block{ margin-top:6px; }
.auth-card .form-note{
  margin:14px 0 0; font-size:.78rem; line-height:1.6;
  color:var(--ink-3); text-align:center;
}

/* ---------- account ---------- */
.account-list{ margin:0 0 26px; }
.account-list > div{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  padding:13px 2px; border-bottom:1px solid var(--line);
}
.account-list > div:last-child{ border-bottom:0; }
.account-list dt{ color:var(--ink-3); font-size:.88rem; }
.account-list dd{
  margin:0; color:var(--ink); font-weight:500;
  overflow:hidden; text-overflow:ellipsis;
}

@media (max-width: 480px){
  .auth-main{ padding-inline:14px; }
  .auth-card{ padding:24px 18px; }
  .account-list > div{ flex-direction:column; gap:3px; align-items:flex-start; }
}