/* Forms ------------------------------------------------------------ */
.form {
  display: grid;
  gap: var(--s-4);
  max-width: 560px;
}
.form--wide { max-width: 100%; }

.field { display: grid; gap: .35rem; }
.field__label {
  font-size: .82rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mist-3);
  font-weight: 600;
}
.field__hint  { font-size: .8rem; color: var(--mist-3); }
.field__error { font-size: .85rem; color: var(--bad); }

.input,
.textarea,
.select {
  width: 100%;
  padding: .85rem 1rem;
  background: rgba(0,0,0,.35);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  color: var(--mist);
  font-family: inherit;
  font-size: 1rem;
  transition: border-color var(--dur) var(--easing), background var(--dur) var(--easing);
}
.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--brand);
  background: rgba(0,0,0,.5);
  box-shadow: 0 0 0 4px rgba(43,182,255,.18);
}
.textarea { min-height: 140px; resize: vertical; }

.field-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-4);
}
@media (max-width: 600px) { .field-row { grid-template-columns: 1fr; } }

/* Auth pages --------------------------------------------------------- */
.auth {
  min-height: calc(100dvh - 120px);
  display: grid;
  place-items: center;
  padding: var(--s-7) var(--content-pad);
}
.auth__card {
  width: 100%;
  max-width: 460px;
  background: var(--ink-2);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 4vw, 2.5rem);
  box-shadow: var(--shadow-2);
}
.auth__title {
  font-size: 2.25rem;
  margin-bottom: .25rem;
}
.auth__title .text-pop { color: var(--pop); }
.auth__lede {
  color: var(--mist-2);
  margin-bottom: var(--s-5);
}
.auth__alt {
  margin-top: var(--s-5);
  font-size: .9rem;
  color: var(--mist-3);
  text-align: center;
}