/* ===================================================================
   Horizon Symmetry, client space: the login pages

   Log in, create an account, forgot password, new password, and the
   page an email link lands on. One narrow column on the black, the
   studio mark above it and the portal's violet horizon behind it.
   The questionnaire's fields and the solid pill come from portal.css,
   so a client meets the same controls before and after logging in.
   =================================================================== */

.auth {
  --p-danger: #FF8F94;     /* 8.2:1 on black */
  --arrive: cubic-bezier(0.22, 0.72, 0.24, 1);
}

.auth__glow {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(38rem 30rem at 50% 34%, rgba(155, 59, 224, 0.17), rgba(155, 59, 224, 0.045) 50%, transparent 74%);
}

.auth__wrap {
  position: relative;
  z-index: 1;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(1.75rem, 5vh, 2.75rem);
  padding-top: clamp(2rem, 8vh, 5rem);
  padding-bottom: max(clamp(2rem, 8vh, 5rem), env(safe-area-inset-bottom));
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
}

.auth__studio {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 44px;
  color: var(--ink-dim);
  font-size: 0.95rem;
  text-decoration: none;
  transition: color 0.3s var(--ease);
}
.auth__studio:hover { color: var(--ink); }
.auth__studio img { width: 1.7rem; height: auto; }

.auth__card { width: min(26rem, 100%); }

.auth__title {
  margin: 0;
  font-family: var(--pixel);
  font-weight: 400;
  font-size: clamp(2.2rem, 8vw, 2.9rem);
  line-height: 1.02;
  color: var(--ink);
  text-wrap: balance;
}
.auth__title:focus { outline: none; }

.auth__lede {
  margin: 0.9rem 0 0;
  color: var(--ink-dim);
  font-size: 1.02rem;
  line-height: 1.6;
  text-wrap: pretty;
}
.auth__lede b { color: var(--ink); font-weight: 500; overflow-wrap: anywhere; }
.auth__lede a { color: var(--ink); }

/* ---------- the form ------------------------------------------------ */

.auth__form { display: grid; gap: 1.15rem; margin-top: 2rem; }

.fld { display: grid; gap: 0.5rem; }
.fld__top { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.fld label { color: var(--ink); font-size: 0.93rem; font-weight: 500; }
.fld__hint { margin: 0; color: var(--ink-faint); font-size: 0.86rem; }

/* a small link, with a tap area of 44px that does not push the layout */
.fld__aside {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  margin-top: -0.75rem;
  margin-bottom: -0.75rem;
  color: var(--ink-dim);
  font-size: 0.88rem;
  text-decoration: none;
}
.fld__aside:hover { color: var(--ink); }

.auth .field { min-height: 3rem; }
.auth .field[aria-invalid="true"] { border-color: rgba(255, 143, 148, 0.6); }

.fld__err { margin: 0; color: var(--p-danger); font-size: 0.88rem; line-height: 1.45; }
.fld__err:empty { display: none; }

.pw { position: relative; }
.pw .field { padding-right: 3.3rem; }
.pw__eye {
  position: absolute;
  top: 50%;
  right: 0.2rem;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 0.6rem;
  background: none;
  color: var(--ink-faint);
  cursor: pointer;
  transition: color 0.3s var(--ease);
}
.pw__eye:hover,
.pw__eye[aria-pressed="true"] { color: var(--ink); }
.pw__eye svg { width: 1.2rem; height: 1.2rem; }

.auth__err {
  margin: 0;
  padding: 0.8rem 1rem;
  border: 1px solid rgba(255, 143, 148, 0.35);
  border-radius: 0.8rem;
  color: var(--p-danger);
  font-size: 0.93rem;
  line-height: 1.5;
}
.auth__err:empty { display: none; }

.portal .cta.auth__go {
  width: 100%;
  height: 3rem;
  justify-content: center;
  margin-top: 0.4rem;
  font-size: 1rem;
}
.auth__go[aria-busy="true"] { opacity: 0.72; cursor: progress; }

/* ---------- Google, and the way between pages ----------------------- */

.auth__google { display: grid; gap: 1.15rem; margin-top: 2rem; }
.auth__google[hidden],
.auth__test[hidden] { display: none; }
.auth__google + .auth__form { margin-top: 1.15rem; }

.auth__ghost {
  width: 100%;
  height: 3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  border: 1px solid var(--rule);
  border-radius: 30em;
  background: none;
  color: var(--ink);
  font: 500 1rem/1 var(--body);
  cursor: pointer;
  transition: border-color 0.3s var(--ease);
}
.auth__ghost:hover { border-color: rgba(230, 196, 250, 0.45); }
.auth__ghost svg { width: 1.1rem; height: 1.1rem; }

.auth__or {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0;
  color: var(--ink-faint);
  font-size: 0.85rem;
}
.auth__or::before,
.auth__or::after { content: ""; flex: 1; height: 1px; background: var(--rule); }

.auth__alt {
  margin: 1.6rem 0 0;
  color: var(--ink-faint);
  font-size: 0.95rem;
  line-height: 1.5;
}
.auth__alt a {
  display: inline-block;
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
  margin-top: -0.6rem;
  margin-bottom: -0.6rem;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: rgba(230, 196, 250, 0.45);
  text-underline-offset: 0.22em;
}

/* ---------- a finished step: check your email, link expired --------- */

.auth__state { display: grid; justify-items: center; text-align: center; }
.auth__state .auth__lede { max-width: 24rem; }
.auth__state .cta { margin-top: 2rem; }
.auth__hosy {
  width: 7.5rem;
  height: auto;
  margin-bottom: 1.4rem;
  filter: drop-shadow(0 0 18px rgba(155, 59, 224, 0.5));
  animation: p-float 6s ease-in-out infinite;
}

/* ---------- test mode, localhost only ------------------------------- */

.auth__test {
  width: min(26rem, 100%);
  padding: 1rem 1.1rem;
  border: 1px dashed rgba(230, 196, 250, 0.3);
  border-radius: 0.9rem;
  color: var(--ink-dim);
  font-size: 0.9rem;
  line-height: 1.55;
}
.auth__test p { margin: 0; }
.auth__test strong { color: var(--ink); font-weight: 500; }
.auth__test code { color: var(--violet-hot); font: 500 0.88rem/1 var(--body); }
.auth__test-fill { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.8rem; }
.auth__test-fill button {
  min-height: 36px;
  padding: 0 0.9rem;
  border: 1px solid var(--rule);
  border-radius: 30em;
  background: none;
  color: var(--ink);
  font: 500 0.85rem/1 var(--body);
  cursor: pointer;
}
.auth__test-fill button:hover { border-color: rgba(230, 196, 250, 0.45); }

/* ---------- arrival ------------------------------------------------- */

/* the site's arrival: up from nothing, 82% as it stops, then full */
@keyframes auth-in {
  from { opacity: 0; transform: translateY(14px); }
  68% { opacity: 0.82; transform: none; }
  to { opacity: 1; transform: none; }
}
.auth__card,
.auth__test { animation: auth-in 0.9s var(--arrive) both; }
.auth__test { animation-delay: 0.12s; }

@media (prefers-reduced-motion: reduce) {
  .auth__card,
  .auth__test,
  .auth__hosy { animation: none; }
}