/* =============================================================================
   Auth pages — login / signup / forgot / reset / verify
   ============================================================================= */

.auth-shell {
  min-height: calc(100vh - var(--header-h));
  padding: var(--s-7) var(--s-4);
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(40rem 28rem at 110% -10%, rgba(8,145,178,0.18), transparent 60%),
    radial-gradient(40rem 28rem at -10% 110%, rgba(249,115,22,0.16), transparent 60%),
    linear-gradient(180deg, #f0f6ff 0%, #ffffff 100%);
}

.auth-card {
  width: 100%;
  max-width: 460px;
  background: #fff;
  border-radius: var(--r-lg);
  border: 1px solid var(--c-border);
  box-shadow: var(--sh-xl);
  padding: var(--s-7) var(--s-6);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.auth-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 4px;
  background: var(--grad-warm);
}
.auth-card--wide { max-width: 540px; }

.auth-card__head { margin-bottom: var(--s-5); }
.auth-card__head h1 { font-size: var(--fs-2xl); margin-bottom: var(--s-3); }
.auth-card__head p  { color: var(--c-ink-muted); }
.auth-card__head a  { color: var(--c-navy); text-decoration: underline; }
.auth-card__note    { margin-top: var(--s-3); font-size: var(--fs-sm); color: var(--c-ink-faint); }
.auth-card__icon {
  display: inline-flex;
  width: 56px;
  height: 56px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--grad-cool);
  color: #fff;
  font-size: 1.6rem;
  margin-bottom: var(--s-4);
}

.auth-card__error {
  background: var(--c-danger-bg);
  color: var(--c-danger);
  border: 1px solid color-mix(in srgb, var(--c-danger) 30%, transparent);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  text-align: left;
  margin-bottom: var(--s-4);
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  text-align: left;
}

.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

/* Multi-field rows: lay fields side by side on wider screens, collapse to a
   single column on phones. minmax(0,…) lets cells shrink so inputs never
   overflow their track. */
.field-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: var(--s-4);
}
.field-row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 640px) {
  .field-row, .field-row--3 { grid-template-columns: 1fr; }
}
.field__label {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-ink);
}
.field__label small { color: var(--c-ink-faint); font-weight: 500; }
.field input,
.field textarea,
.field select {
  width: 100%;
  font: inherit;
  font-size: var(--fs-md);
  padding: 0.75rem 0.9rem;
  border: 1.5px solid var(--c-border-strong);
  border-radius: var(--r-md);
  background: var(--c-surface);
  color: var(--c-ink);
  transition: border-color .2s var(--ease-out), box-shadow .2s, background .2s;
}
.field input:focus,
.field textarea:focus,
.field select:focus {
  border-color: var(--c-navy);
  outline: none;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-navy) 16%, transparent);
}
.field__hint  { color: var(--c-ink-faint); font-size: var(--fs-xs); }
.field__error { color: var(--c-danger); font-size: var(--fs-xs); font-weight: 600; }
.field input[aria-invalid="true"],
.field input:user-invalid { border-color: var(--c-danger); }

.auth-form__submit { margin-top: var(--s-2); }

.auth-card__foot {
  margin-top: var(--s-5);
  font-size: var(--fs-sm);
  color: var(--c-ink-muted);
}
.auth-card__foot a { color: var(--c-navy); font-weight: 600; }

@media (max-width: 540px) {
  .auth-card { padding: var(--s-6) var(--s-4); }
  .auth-card__head h1 { font-size: var(--fs-xl); }
}