/* auth.css — page-level styles for auth flows
   Uses Design tokens from core.css and keeps layout accessible and mobile-first
*/

/* Page container */
.auth-container{
  min-height: calc(100vh - 120px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:var(--spacing-lg) var(--spacing-md);
  background: linear-gradient(180deg, var(--WHITE) 0%, #fbf9ff 100%);
}

.auth-inner{
  width:100%;
  max-width:720px;
  margin:auto;
  padding:var(--spacing-lg);
}

/* Card override for a slightly elevated, brand-neutral look */
.auth-card{
  background:var(--WHITE);
  border:1px solid var(--SILVER);
  border-radius:12px;
  padding:calc(var(--spacing-lg) + 8px);
  box-shadow: 0 6px 18px rgba(15,15,15,0.06);
}

/* Heading and intro */
.auth-card h2{font-size:1.6rem;margin-bottom:0.5rem;color:var(--BLACK)}
.auth-card .muted{color:#6b6b6b;margin-bottom:0.75rem}

/* Forms */
.auth-card label{display:block;margin-top:0.6rem;font-size:0.95rem}
.auth-card input{width:100%;padding:0.66rem;margin-top:0.35rem;border:1px solid var(--SILVER);border-radius:8px;font-size:1rem}
.auth-card input:focus{border-color:var(--ACCENT);box-shadow:0 0 0 3px color-mix(in srgb, var(--ACCENT) 8%, white)}

/* Actions */
.auth-card .actions{display:flex;gap:0.6rem;margin-top:1.2rem}
.auth-card .btn{flex:0 0 auto;padding:.6rem 1rem}
.auth-card .muted-btn{background:transparent;border:1px solid var(--SILVER);color:var(--BLACK)}

/* Result and errors */
.auth-card #result{margin-top:1rem;color:#333}
error-feedback{display:block;margin-top:0.5rem}

/* Consent / legal */
.auth-card .consent{display:block;margin-top:0.8rem;font-size:0.925rem;color:#444}
.auth-card .consent input{margin-right:0.5rem;vertical-align:middle}

/* Responsive tweaks */
@media (max-width:480px){
  .auth-inner{padding:0}
  .auth-card{padding:var(--spacing-md);border-radius:10px}
  .auth-card h2{font-size:1.25rem}
}