/* ==========================================================================
   AUTH PAGES (login / register / become-a-teacher)
   Split-panel layout: form on one side, brand visual on the other.
   Deliberately monochrome-navy on the visual side — the brand system
   explicitly avoids "excessive gradients" and rainbow color mixing;
   sophistication here comes from depth and typography, not color count.
   ========================================================================== */

.auth-page {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.auth-panel {
  display: flex;
  flex-direction: column;
  padding: var(--sp-6) var(--sp-8);
  position: relative;
  z-index: 1;
}

.auth-panel .brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-10);
  font-family: var(--font-display);
  font-weight: var(--fw-h4);
  font-size: var(--fs-h4);
  color: var(--text-primary);
  text-decoration: none;
}

.auth-card {
  max-width: 400px;
  width: 100%;
  margin: auto;
  animation: auth-card-in 420ms var(--ease-out) both;
}

@keyframes auth-card-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .auth-card { animation: none; }
}

.auth-title {
  font-family: var(--font-display);
  font-weight: var(--fw-h1);
  font-size: clamp(26px, 3.2vw, var(--fs-h1));
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-h1);
  color: var(--text-primary);
  margin-bottom: var(--sp-2);
}

.auth-subtitle {
  font-size: var(--fs-body);
  color: var(--text-secondary);
  line-height: var(--lh-body);
  margin-bottom: var(--sp-6);
}

.auth-submit {
  width: 100%;
  margin-top: var(--sp-2);
}

.auth-switch {
  text-align: center;
  margin-top: var(--sp-5);
  font-size: var(--fs-body-sm);
  color: var(--text-secondary);
}
.auth-switch a { color: var(--brand-primary); font-weight: 600; text-decoration: none; }
.auth-switch a:hover { text-decoration: underline; }

.auth-divider { display: flex; align-items: center; gap: var(--sp-3); margin: var(--sp-4) 0; color: var(--text-faint); font-size: var(--fs-caption); }
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--border-default); }

/* ---- Role picker (register page) ---- */
.auth-role-select {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}

.auth-role-option {
  border: 1.5px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: var(--sp-4);
  text-align: center;
  cursor: pointer;
  background: var(--bg-surface);
  transition: border-color var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.auth-role-option:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.auth-role-option:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.auth-role-option i { font-size: 22px; color: var(--text-muted); margin-bottom: var(--sp-2); display: block; margin-inline: auto; }
.auth-role-option span { font-size: var(--fs-body-sm); font-weight: 600; color: var(--text-primary); }

.auth-role-option.is-selected {
  border-color: var(--brand-primary);
  background: var(--brand-primary-soft);
}
.auth-role-option.is-selected i,
.auth-role-option.is-selected span { color: var(--brand-primary); }

/* Focus lift on inputs inside the auth card specifically — a small
   extra bit of responsiveness on top of the global form-input:focus */
.auth-card .form-input:focus,
.auth-card .form-select:focus {
  transform: translateY(-1px);
}

/* ---- Visual side panel — monochrome violet, no rainbow mesh ---- */
.auth-visual {
  position: relative;
  background: var(--primary-dark);
  display: flex;
  align-items: flex-end;
  padding: var(--sp-10);
  overflow: hidden;
}

/* A single, slow-drifting glow in the brand's own violet range —
   depth without introducing off-brand hues. */
.auth-visual-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 15%, rgba(151, 117, 250, 0.55) 0%, transparent 45%),
    radial-gradient(circle at 85% 75%, rgba(255, 255, 255, 0.12) 0%, transparent 40%);
  animation: auth-mesh-drift 20s ease-in-out infinite alternate;
}
@media (prefers-reduced-motion: reduce) {
  .auth-visual-glow { animation: none; }
}

@keyframes auth-mesh-drift {
  from { transform: scale(1) translate(0, 0); }
  to { transform: scale(1.06) translate(-2%, 2%); }
}

.auth-visual::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(hsl(0 0% 100% / 0.08) 1px, transparent 1px);
  background-size: 28px 28px;
  opacity: 0.6;
  pointer-events: none;
}

.auth-visual-content { position: relative; max-width: 420px; z-index: 1; }

.auth-visual-content .eyebrow {
  display: inline-block;
  font-size: var(--fs-overline);
  font-weight: var(--fw-overline);
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--ivory-100);
  padding: var(--sp-1) var(--sp-3);
  border: 1px solid hsl(0 0% 100% / 0.2);
  border-radius: var(--radius-full);
}

.auth-visual-title {
  color: var(--text-on-inverse);
  font-family: var(--font-display);
  font-weight: var(--fw-h2);
  font-size: clamp(22px, 2.4vw, var(--fs-h2));
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
  margin-top: var(--sp-4);
}

/* ============================================================
   RESPONSIVE — matches the platform's full breakpoint set
   ============================================================ */
/* --bp-lg: the split panel collapses to a single column and the brand
   visual is dropped — at this width it would steal space the form
   needs, and the form is the only thing on this page that matters. */
@media (max-width: 1024px) {
  .auth-page { grid-template-columns: 1fr; }
  .auth-visual { display: none; }
  .auth-panel { padding: var(--sp-5) var(--sp-5); }
}

@media (max-width: 480px) {
  .auth-panel { padding: var(--sp-4) var(--sp-4); }
  .auth-panel .brand { margin-bottom: var(--sp-6); }
  .auth-role-select { grid-template-columns: 1fr; }
}

/* ---- Language switcher placement (auth pages only) ---- */
/* Top-right corner of the panel, next to the brand row — a common,
   expected spot for a language picker on a login/register screen. */
.auth-panel .lang-switch {
  position: absolute;
  top: var(--sp-6);
  right: var(--sp-6);
}
@media (max-width: 640px) {
  .auth-panel .lang-switch { position: static; margin-bottom: var(--sp-4); align-self: flex-end; }
}