/* signup.css — sign-up-only additions on top of auth.css
 * (auth.css carries the shared split-screen shell + form-field styles).
 * Adds: role toggle, passive legal line, spacing. Tokens from critical.css only. */

/* A touch more breathing room between groups on the (taller) sign-up form */
.signup-form .login-form__group{margin-bottom:20px;}

/* ══════════════════════════
   ROLE TOGGLE — Learner / Teacher (binary segmented control)
   The radios are the real control (accessible); the labels are the segments.
══════════════════════════ */
.signup-role{
  border:none;padding:0;margin:0 0 22px;
}
.signup-role__legend{
  /* matches .login-form__label */
  font-size:13px;font-weight:800;
  color:rgba(255,255,255,0.88);
  padding:0;margin-bottom:9px;
}
.signup-role__toggle{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4px;
  padding:4px;
  background:rgba(255,255,255,0.04);
  border:1px solid var(--card-bdr);
  border-radius:var(--r-pill);
}
.signup-role__opt{
  position:relative;
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:11px;
  border-radius:var(--r-pill);
  font-size:14px;font-weight:800;
  color:var(--text-dim);
  cursor:pointer;
  transition:background 0.16s,color 0.16s;
}
.signup-role__opt svg{width:18px;height:18px;}
/* Hide the native radio but keep it focusable/operable */
.signup-role__opt input{
  position:absolute;opacity:0;
  width:1px;height:1px;margin:0;
}
/* Selected segment */
.signup-role__opt:has(input:checked){
  background:var(--yellow);
  color:var(--navy);
}
/* Keyboard focus ring */
.signup-role__opt:has(input:focus-visible){
  box-shadow:0 0 0 3px rgba(79,134,247,0.30);
}

/* ══════════════════════════
   TERMS ROW — explicit checkbox; multi-line, so align to the top
══════════════════════════ */
.signup-form__terms{
  display:flex;align-items:flex-start;gap:9px;
  font-size:13px;font-weight:600;
  color:var(--text-dim);line-height:1.5;
  margin:4px 0 22px;
  cursor:pointer;
}
.signup-form__terms input{
  width:17px;height:17px;flex-shrink:0;
  margin-top:1px;
  accent-color:var(--yellow);
  cursor:pointer;
}
.signup-form__terms a{
  color:#8FB4FB;font-weight:700;
}
.signup-form__terms a:hover{text-decoration:underline;}