/* ============================================================
   /join/* pages — team-wide invite-code self-registration.
   ============================================================
   The landing card lives inside the regular app shell (topbar/
   tabbar/drawer remain visible because /join is public), but the
   form itself centers on the page and styles mirror auth.css so
   the experience reads as continuous with /login.
*/

.join-page {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: var(--sp-5) var(--sp-4);
  min-height: 60vh;
}

.join-card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-7) var(--sp-6);
  max-width: 440px;
  width: 100%;
  box-shadow: var(--elev-2);
  position: relative;
}

.join-card--wide { max-width: 560px; }

.join-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: var(--sp-6);
  right: var(--sp-6);
  height: 4px;
  background: var(--accent);
  border-radius: 0 0 var(--r-sm) var(--r-sm);
}

.join-card__wordmark {
  text-align: center;
  font-size: var(--t-11);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: var(--accent);
  margin: 0 0 var(--sp-1);
  font-weight: var(--w-semi);
}

.join-card__title {
  text-align: center;
  font-size: var(--t-22);
  font-weight: var(--w-bold);
  letter-spacing: var(--ls-snug);
  margin: 0 0 var(--sp-3);
  color: var(--text);
}

.join-card__sub {
  text-align: center;
  color: var(--text-mute);
  font-size: var(--t-13);
  margin: 0 0 var(--sp-5);
}

.join-card__footer {
  margin-top: var(--sp-4);
  text-align: center;
  font-size: var(--t-12);
  color: var(--text-mute);
}
.join-card__footer a { color: var(--accent); }

/* Role-chooser tiles on /join/. */
.join-options {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-bottom: var(--sp-2);
}

.join-option {
  display: block;
  padding: var(--sp-4);
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  text-decoration: none;
  transition: border-color .12s, background .12s;
}
.join-option:hover {
  border-color: var(--accent);
  background: var(--surface-2);
  text-decoration: none;
}

.join-option__title {
  display: block;
  font-size: var(--t-15);
  font-weight: var(--w-semi);
  margin-bottom: var(--sp-1);
}

.join-option__sub {
  display: block;
  font-size: var(--t-12);
  color: var(--text-mute);
}

/* Form layout — mirrors .auth-form. */
.join-form label {
  display: block;
  margin-bottom: var(--sp-3);
}
.join-form .label-text {
  display: block;
  font-size: var(--t-11);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: var(--text-mute);
  margin-bottom: var(--sp-1);
}
.join-form input[type="email"],
.join-form input[type="password"],
.join-form input[type="text"] {
  width: 100%;
  padding: var(--sp-3);
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-size: var(--t-14);
  font-family: inherit;
}
.join-form input:focus {
  border-color: var(--accent);
  outline: 0;
}

.join-btn {
  display: block;
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  background: var(--accent);
  color: #000;
  border: 1px solid var(--accent);
  border-radius: var(--r-md);
  font-weight: var(--w-semi);
  font-family: inherit;
  font-size: var(--t-14);
  cursor: pointer;
  margin-top: var(--sp-2);
}
.join-btn:hover {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
}

/* Inline alerts (success / error / info). */
.join-alert {
  padding: var(--sp-3);
  border-radius: var(--r-md);
  margin-bottom: var(--sp-4);
  font-size: var(--t-13);
}
.join-alert--error {
  background: rgba(239, 68, 68, 0.1);
  color: var(--danger);
  border: 1px solid var(--danger);
}
.join-alert--info {
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid var(--accent);
}

/* Athlete picker on /join/parent_link.php. */
.join-roster {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
  margin: 0 0 var(--sp-3);
  background: var(--bg);
}

.join-roster__legend {
  padding: 0 var(--sp-2);
  font-size: var(--t-11);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: var(--text-mute);
}

.join-roster__list {
  list-style: none;
  padding: 0;
  margin: var(--sp-2) 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--sp-1);
}

.join-roster__item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  cursor: pointer;
  color: var(--text);
  font-size: var(--t-14);
  text-transform: none;
  letter-spacing: var(--ls-normal);
  margin: 0;
}
.join-roster__item:hover { background: var(--surface-2); }
.join-roster__item input { margin: 0; }

/* Login-page secondary link back to /join — kept lightweight. */
.login-join-link {
  text-align: center;
  margin-top: var(--sp-3);
  font-size: var(--t-12);
  color: var(--text-mute);
}
.login-join-link a { color: var(--accent); }

/* ============================================================
   /join/athlete.php — Google SSO + email-password dual paths.
   ============================================================ */
.join-athlete__google { margin-bottom: var(--sp-4); }

.join-athlete__google-button {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
}
.join-athlete__google-button:hover {
  background: var(--surface-2);
  border-color: var(--accent);
}

.join-athlete__or-divider {
  display: flex;
  align-items: center;
  text-align: center;
  margin: var(--sp-4) 0;
  color: var(--text-mute);
  font-size: var(--t-11);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
}
.join-athlete__or-divider::before,
.join-athlete__or-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}
.join-athlete__or-divider span { padding: 0 var(--sp-3); }

/* ============================================================
   /join/athlete_claim.php — roster picker (radio list).
   ============================================================ */
.join-roster-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--sp-4);
  max-height: 50vh;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg);
}

.join-roster-list__item { margin: 0; }
.join-roster-list__item[hidden] { display: none; }

.join-roster-list__row {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  color: var(--text);
  font-size: var(--t-14);
  margin: 0;
}
.join-roster-list__item:last-child .join-roster-list__row {
  border-bottom: 0;
}
.join-roster-list__row:hover { background: var(--surface-2); }
.join-roster-list__row input { margin: 0; }

.join-roster-list__name { flex: 1; }
.join-roster-list__year {
  font-size: var(--t-12);
  color: var(--text-mute);
}

/* Name-match confirmation block on athlete_claim.php */
.join-match {
  margin: var(--sp-3) 0 var(--sp-4);
  padding: var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-2);
  text-align: center;
}
.join-match__lead { margin: 0 0 var(--sp-2); color: var(--text-mute); font-size: var(--t-13); }
.join-match__name { margin: 0; font-size: var(--t-18); font-weight: var(--w-bold); color: var(--text); }

/* Secondary action form sits directly under the primary button */
.join-form--secondary { margin-top: var(--sp-2); }
.join-btn--ghost {
  background: transparent;
  color: var(--text-mute);
  border: 1px solid var(--border);
}
.join-btn--ghost:hover { color: var(--text); border-color: var(--border-strong); }