/* Private beta gate: Loading, Log In, access-not-active, can't-reach.
   Built from the onboarding pieces (.onboarding, .ob-*) so it looks native to the app.
   Sits above every screen, sheet and video viewer until access is verified. */

.auth { z-index: 28; }
.auth-step { gap: 22px; }
.auth-step > .auth-view { width: 100%; animation: ob-in 0.35s ease; }

/* brand: the big INYEON wordmark; a little smaller once there is a form below it */
.auth-brand { padding-top: 6px; }
.auth[data-view="login"] .auth-brand .wordmark { font-size: clamp(20px, 7vw, 26px) !important; }

/* A. Loading: a soft violet light sweeping under the wordmark */
.auth-loading { display: flex; justify-content: center; padding-top: 8px; }
.auth-pulse {
  position: relative; overflow: hidden;
  width: 120px; height: 3px; border-radius: 2px;
  background: #221d31;
}
.auth-pulse::after {
  content: ""; position: absolute; inset: 0; width: 45%;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--accent-light), transparent);
  box-shadow: 0 0 12px var(--glow);
  animation: auth-sweep 1.3s ease-in-out infinite;
}
@keyframes auth-sweep { from { transform: translateX(-110%); } to { transform: translateX(230%); } }
@media (prefers-reduced-motion: reduce) { .auth-pulse::after { animation-duration: 3s; } }
.auth-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }

/* B. Log In */
.auth-form { gap: 14px; }
.auth-title { margin: 0; text-align: center; }
.auth-sub { margin: 0 0 6px; text-align: center; }
.auth-pw { position: relative; display: block; }
.auth-pw input { padding-right: 52px; }
.auth-eye {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
  width: 42px; height: 42px; border-radius: 12px;
  display: grid; place-items: center;
  color: var(--muted);
}
.auth-eye[aria-pressed="true"] { color: var(--accent-light); }
.auth-eye svg { width: 20px; height: 20px; }
.auth-form input:disabled { opacity: 0.6; }
.auth-form .ob-error { text-align: center; }

/* C. / D. messages */
.auth-msg { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.auth-msg .auth-sub { max-width: 32ch; line-height: 1.55; }
.auth-msg b { color: var(--fg); font-weight: 700; overflow-wrap: anywhere; }
.auth-badge {
  padding: 6px 12px; border-radius: 999px;
  font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent-light); background: var(--accent-soft); border: 1px solid rgba(157, 92, 255, 0.45);
  box-shadow: 0 0 16px rgba(157, 92, 255, 0.25);
}

/* footer actions */
.auth-actions { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.auth-actions .ob-cta:disabled { opacity: 0.55; box-shadow: none; cursor: default; }
.auth-actions .ob-hint { text-align: center; }