/* ============================================================
   auth.css — sign-in / register / verify screens
   Composes core tokens and components. Defines no colours.
   ============================================================ */

.l-auth { background: var(--bg2); }

.l-auth__shell { display: grid; min-height: 100dvh; grid-template-columns: 1fr; }
@media (min-width: 1024px) {
  .l-auth__shell { grid-template-columns: 5fr 7fr; }
}

/* Brand panel — dark in both themes, like the footer */
.l-auth__aside {
  display: none;
  background: var(--brand-900);
  background-image:
    radial-gradient(ellipse at 20% 0%, color-mix(in srgb, var(--brand-600) 55%, transparent), transparent 55%),
    radial-gradient(ellipse at 100% 100%, color-mix(in srgb, var(--gold-600) 22%, transparent), transparent 50%);
}
@media (min-width: 1024px) { .l-auth__aside { display: block; } }
.l-auth__aside-inner {
  height: 100%;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: var(--s-10) var(--s-12);
}
.l-auth__aside-copy { max-width: 46ch; }

.l-auth__main {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: var(--s-8) var(--gutter);
  gap: var(--s-6);
}
.l-auth__card {
  width: 100%; max-width: 480px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-2);
  padding: var(--s-8);
}
@media (min-width: 640px) { .l-auth__card { padding: var(--s-10); } }
.l-auth__card--wide { max-width: 640px; }

.l-auth__foot { display: flex; align-items: center; gap: var(--s-5); }

.a-title { margin-bottom: var(--s-2); }
.a-sub   { color: var(--muted); font-size: var(--fs-sm); margin-bottom: var(--s-8); }
.a-switch { text-align: center; font-size: var(--fs-sm); color: var(--muted); margin-top: var(--s-8); }

/* Country code + number as one control */
.a-phone { display: grid; grid-template-columns: 128px 1fr; gap: var(--s-2); }
.a-phone .c-select { padding-right: var(--s-8); }

/* Exam picker chips inside the register form */
.a-exam-pick { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.a-exam-pick input { position: absolute; opacity: 0; width: 0; height: 0; }
.a-exam-pick input:focus-visible + .c-chip {
  outline: var(--focus-w) solid var(--focus-ring); outline-offset: var(--focus-offset);
}
.a-exam-pick input:checked + .c-chip {
  background: var(--exam-accent, var(--brand-600));
  border-color: var(--exam-accent, var(--brand-600));
  color: var(--on-brand);
}

/* OTP screen */
.a-otp-meta { display: flex; justify-content: space-between; gap: var(--s-4); font-size: var(--fs-xs); color: var(--muted); margin-top: var(--s-3); }
.a-otp-timer { font-variant-numeric: tabular-nums; }

/* Brand panel typography — dark surface, so --text would be wrong */
.l-auth__aside .c-site-header__name { color: var(--on-brand); }
.l-auth__aside-eyebrow  { color: var(--gold-400); }
.l-auth__aside-title    { color: var(--on-brand); margin-top: var(--s-3); }
.l-auth__aside-text     { color: var(--on-dark); margin-top: var(--s-4); max-width: 40ch; }
.l-auth__aside-copy-foot{ color: var(--on-dark-muted); }

/* Subject picker on onboarding */
.a-subject-grid { display: grid; gap: var(--s-3); grid-template-columns: 1fr; }
@media (min-width: 480px) { .a-subject-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.a-subject-card {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-4);
  cursor: pointer;
}
.a-subject-card input { width: 20px; height: 20px; accent-color: var(--brand-600); flex-shrink: 0; }
.a-subject-card__body { flex: 1; min-width: 0; }
.a-subject-card__name { display: block; }
.a-subject-card:has(input:checked) { border-color: var(--brand-600); box-shadow: 0 0 0 1px var(--brand-600); }

/* Form action rows */
.a-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; margin-top: var(--s-4); }
.a-actions__primary { margin-left: auto; }

/* Inline "start over" form inside a paragraph */
.a-inline-form { display: inline; }