/* ============ ONYX auth page ============ */

.auth-body { min-height: 100vh; display: flex; flex-direction: column; }

.auth-shell {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 3rem var(--gutter) 5rem;
}

/* card */
.auth-card {
  width: 100%; max-width: 420px;
  padding: 2.4rem 2.2rem 2rem;
  position: relative; overflow: hidden;
}

.auth-eyebrow { margin-bottom: .6rem; }

.auth-title {
  font-family: var(--f-display); font-weight: 900;
  font-size: clamp(1.8rem, 5vw, 2.4rem); line-height: 1.02;
  margin-bottom: .7rem;
  background: linear-gradient(180deg, var(--spec) 0%, var(--bone) 30%, #6a6a72 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

.auth-sub {
  color: var(--ash); font-size: .96rem; line-height: 1.6;
  margin-bottom: 1.8rem; max-width: 36ch;
}
.auth-sub strong { color: var(--bone); }

/* form */
.auth-form { display: grid; gap: 1rem; }

.auth-label {
  font-family: var(--f-mono); font-size: .72rem;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ash-dim); display: block; margin-bottom: .4rem;
}

.auth-field { position: relative; }

.auth-input {
  width: 100%;
  background: var(--void); color: var(--bone);
  border: 1px solid var(--graphite); border-radius: 10px;
  padding: .8rem 1rem;
  font-family: var(--f-body); font-size: 1rem;
  outline: none; transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
  -webkit-appearance: none;
}
.auth-input::placeholder { color: var(--ash-dim); }
.auth-input:focus {
  border-color: var(--graphite-2);
  box-shadow: 0 0 0 3px rgba(255,255,255,.06);
}
.auth-input.invalid { border-color: #5a3a3a; }
.auth-code-input { text-align: center; letter-spacing: .35em; font-family: var(--f-mono); font-size: 1.35rem; }
.auth-status { min-height: 1.2em; font-family: var(--f-mono); font-size: .76rem; color: var(--ash-dim); }
.auth-resend:disabled { opacity: .45; cursor: not-allowed; }

.auth-err {
  font-family: var(--f-mono); font-size: .76rem;
  color: #b06060; margin-top: -.4rem;
}
.auth-err[hidden] { display: none; }

.auth-submit {
  width: 100%; padding: .85em 1.4em;
  position: relative; gap: .6rem;
}
.auth-submit__spinner {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.2);
  border-top-color: var(--spec);
  animation: spin .7s linear infinite;
  display: inline-block;
}
.auth-submit__spinner[hidden] { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }

/* toggle sign in / sign up */
.auth-toggle {
  margin-top: 1.4rem; text-align: center;
  font-family: var(--f-mono); font-size: .8rem; color: var(--ash-dim);
}
.auth-toggle__btn {
  background: none; border: none; cursor: pointer;
  font-family: var(--f-mono); font-size: .8rem;
  color: var(--bone); margin-left: .4rem;
  border-bottom: 1px solid var(--graphite-2);
  padding: 0; transition: color .2s;
}
.auth-toggle__btn:hover { color: var(--spec); }

/* sent state */
.auth-pane[hidden] { display: none; }

.auth-sent-icon {
  width: 60px; height: 60px; border-radius: 16px;
  background: linear-gradient(145deg, var(--onyx-2), var(--void));
  border: 1px solid var(--graphite-2);
  display: flex; align-items: center; justify-content: center;
  color: var(--bone); margin-bottom: 1.4rem;
}

.auth-resend {
  width: 100%; margin-top: .6rem;
}
.auth-resend-note {
  font-family: var(--f-mono); font-size: .76rem;
  color: var(--ash-dim); text-align: center; margin-top: .6rem;
}
.auth-resend-note[hidden] { display: none; }

.auth-back {
  display: block; width: 100%; margin-top: 1rem;
  background: none; border: none; cursor: pointer;
  font-family: var(--f-mono); font-size: .78rem;
  color: var(--ash-dim); text-align: center;
  transition: color .2s;
}
.auth-back:hover { color: var(--bone); }

/* legal */
.auth-legal {
  margin-top: 1.6rem;
  font-family: var(--f-mono); font-size: .72rem;
  color: var(--ash-dim); text-align: center;
}
.auth-legal a { color: var(--ash); border-bottom: 1px solid var(--graphite); }

@media (max-width: 480px) {
  .auth-card { padding: 2rem 1.4rem 1.8rem; }
}