/* ============================================================
   BOOST LSAT — Auth Pages
   "Warm Scholar" — Typography-first, restrained, focused
   ============================================================ */

@import url('/shared/boost-tokens.css');

/* ── Page scaffold ── */
.auth-page {
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: var(--surface-0);
  color: var(--text-1);
  font-family: var(--font-body);
}

/* ── Back link ── */
.auth-back {
  padding: var(--space-5) var(--space-6);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-3);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-decoration: none;
  transition: color var(--transition-fast);
  width: fit-content;
}
.auth-back:hover {
  color: var(--text-1);
}
.auth-back svg {
  width: 16px;
  height: 16px;
}

/* ── Top bar (skip + theme toggle) ── */
.auth-top-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-6);
}
.auth-theme-toggle {
  background: none;
  border: none;
  color: var(--text-3);
  cursor: pointer;
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast), background var(--transition-fast);
}
.auth-theme-toggle:hover {
  color: var(--text-1);
  background: var(--surface-2);
}
.auth-skip-link {
  color: var(--text-3);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-decoration: none;
  transition: color var(--transition-fast);
}
.auth-skip-link:hover {
  color: var(--text-1);
}

/* ── Feature access panel ── */
.feature-access-panel {
  margin-top: var(--space-6);
  padding: var(--space-4) var(--space-5);
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
}
.feature-access-panel h3 {
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-2);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  margin: 0 0 var(--space-3) 0;
}
.feature-access-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}
.feature-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  padding: var(--space-1) 0;
}
.feature-item--open {
  color: var(--color-success);
}
.feature-item--locked {
  color: var(--text-3);
  opacity: 0.6;
}
.feature-access-note {
  margin: var(--space-3) 0 0;
  font-size: var(--text-xs);
  color: var(--text-3);
  font-style: italic;
}

/* ── Main content area ── */
.auth-main {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
}

.auth-surface {
  width: 100%;
  max-width: 400px;
}

/* ── Header / Title ── */
.auth-surface h1 {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: var(--weight-extrabold);
  letter-spacing: var(--tracking-tight);
  color: var(--text-1);
  margin-bottom: var(--space-2);
}

.auth-surface .auth-subtitle {
  color: var(--text-2);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-8);
}

/* ── Form fields ── */
.auth-field {
  margin-bottom: var(--space-5);
}

.auth-field label {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-2);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  margin-bottom: var(--space-2);
}

.auth-field input,
.auth-field select {
  width: 100%;
  box-sizing: border-box;
  padding: var(--space-3) var(--space-4);
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  color: var(--text-1);
  font-size: var(--text-base);
  transition: border-color var(--transition-fast),
              background-color var(--transition-fast);
}

.auth-field input::placeholder {
  color: var(--text-3);
}

.auth-field input:hover,
.auth-field select:hover {
  border-color: var(--border-2);
}

.auth-field input:focus,
.auth-field select:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
  border-color: var(--color-primary);
  background: var(--surface-2);
}

/* ── Error state ── */
.auth-field.has-error input {
  border-color: var(--color-error);
}

.field-error {
  color: var(--color-error);
  font-size: var(--text-xs);
  margin-top: var(--space-1);
  display: none;
}

.has-error .field-error {
  display: block;
}

/* ── Global error banner ── */
.auth-error-banner {
  background: var(--color-error-10); border-radius: var(--radius-md);
  color: var(--color-error);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  margin-bottom: var(--space-5);
  display: none;
}
.auth-error-banner.visible {
  display: block;
  animation: auth-shake 0.4s var(--ease-out-quart);
}

@keyframes auth-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(2px); }
}

/* ── Success banner ── */
.auth-success-banner {
  background: var(--color-success-10); border-radius: var(--radius-md);
  color: var(--color-success);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  margin-bottom: var(--space-5);
  display: none;
}
.auth-success-banner.visible {
  display: block;
}

/* ── Submit button ── */
.auth-submit {
  width: 100%;
  padding: var(--space-3) var(--space-6);
  background: var(--color-primary);
  color: oklch(97% 0.01 175);
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color var(--transition-fast),
              transform var(--transition-fast),
              opacity var(--transition-fast);
  margin-top: var(--space-4);
}

.auth-submit:hover:not(:disabled) {
  background: var(--color-primary-hover);
  transform: translateY(-1px);
}

.auth-submit:active:not(:disabled) {
  transform: translateY(0);
}

.auth-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Spinner inside button when loading */
.auth-submit .spinner {
  display: none;
  width: 16px;
  height: 16px;
  border: 2px solid oklch(97% 0.01 175 / 0.3);
  border-top-color: oklch(97% 0.01 175);
  border-radius: 50%;
  animation: auth-spin 0.6s linear infinite;
  margin: 0 auto;
}
.auth-submit.loading .spinner { display: block; }
.auth-submit.loading .btn-text { display: none; }

@keyframes auth-spin {
  to { transform: rotate(360deg); }
}

/* ── Links row ── */
.auth-links {
  margin-top: var(--space-6);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) var(--space-6);
  font-size: var(--text-sm);
}

.auth-links a {
  color: var(--text-2);
  text-decoration: none;
  transition: color var(--transition-fast);
}
.auth-links a:hover {
  color: var(--color-primary);
}

/* ── Divider ── */
.auth-divider {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin: var(--space-6) 0;
  color: var(--text-3);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}
.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-1);
}

/* ── Footer ── */
.auth-footer {
  padding: var(--space-5) var(--space-6);
  text-align: center;
  color: var(--text-3);
  font-size: var(--text-xs);
}

/* ── Password toggle ── */
.password-wrapper {
  position: relative;
}
.password-wrapper input {
  padding-right: var(--space-10);
}
.password-toggle {
  position: absolute;
  right: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--text-3);
  cursor: pointer;
  padding: var(--space-1);
  display: flex;
  align-items: center;
  transition: color var(--transition-fast);
}
.password-toggle:hover {
  color: var(--text-1);
}

/* ── Entrance animation ── */
.auth-surface {
  animation: auth-enter 0.5s var(--ease-out-expo) both;
}

@keyframes auth-enter {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================================
   Onboarding — Two-column grid for profile fields
   ============================================================ */

.onboarding-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4) var(--space-5);
}

.onboarding-grid .auth-field {
  min-width: 0;
}

.onboarding-grid .auth-field.full-width {
  grid-column: 1 / -1;
}

.onboarding-progress {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
  font-size: var(--text-sm);
  color: var(--text-3);
}

.onboarding-progress .step-dots {
  display: flex;
  gap: var(--space-2);
}

.onboarding-progress .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border-2);
  transition: background var(--transition-fast);
}
.onboarding-progress .dot.active {
  background: var(--color-primary);
}
.onboarding-progress .dot.done {
  background: var(--color-success);
}

.skip-link {
  font-size: var(--text-sm);
  color: var(--text-3);
  cursor: pointer;
  background: none;
  border: none;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--transition-fast);
  margin-top: var(--space-3);
}
.skip-link:hover {
  color: var(--text-2);
}

/* ── Invite code field ── */
.invite-section {
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-top: var(--space-4);
}

.invite-section h3 {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-2);
  margin-bottom: var(--space-2);
}

.invite-section p {
  font-size: var(--text-xs);
  color: var(--text-3);
  margin-bottom: var(--space-3);
}

.invite-row {
  display: flex;
  gap: var(--space-2);
}

.invite-row input {
  flex: 1;
  padding: var(--space-2) var(--space-3);
  background: var(--surface-0);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  color: var(--text-1);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
}

.invite-row button {
  padding: var(--space-2) var(--space-4);
  background: var(--color-cta);
  color: var(--color-cta-text);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transition-fast);
}
.invite-row button:hover {
  background: var(--color-cta-hover);
}

/* ── Marketing consent checkbox ── */
.auth-consent {
  margin: var(--space-4) 0 0;
}

.auth-checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-2);
  line-height: 1.5;
  cursor: pointer;
}

.auth-checkbox-label input[type="checkbox"] {
  margin-top: 3px;
  flex-shrink: 0;
  accent-color: var(--color-primary);
}

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 600px) {
  .auth-surface { max-width: 100%; }

  .auth-surface h1 {
    font-size: var(--text-xl);
  }

  .onboarding-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .auth-surface {
    animation: none;
  }
  .auth-error-banner.visible {
    animation: none;
  }
}