/*
 * Spine step 3 — the identity screens.
 *
 * Layout only. Every colour, size, radius and duration is a token; this file
 * introduces no new visual language, and authors no component. Where a screen
 * needs a control it renders one from app/components/ui/.
 */

/* A vertical rhythm for stacked cards and form sections. */
.auth-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* The form column. Narrow on purpose: a wide card holding a thin column of
   inputs reads as an empty card with some text in it. */
.auth-column {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  width: 100%;
  max-width: var(--shell-player-width);
  margin-inline: auto;
}

.auth-prose {
  color: var(--text-secondary);
  font-size: var(--type-body-size);
}

.auth-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

/* The invite code is read aloud down a phone, so it is set large, spaced and
   in the gold that everything else in the chrome defers to. */
.invite-code {
  color: var(--text-gold);
  font-size: var(--type-display-size);
  font-weight: var(--font-weight-semibold);
  /* A type metric, so em rather than a spacing token — --space-1 is a layout
     step and would set the characters absurdly far apart. */
  letter-spacing: 0.08em;
  margin-top: var(--space-2);
}

/* The roster pick list: one row per unclaimed name. Names only — a roster
   carries minors' dates of birth and those never reach another player's
   screen. */
.roster-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* "Also a club admin — Switch" (D144): the text and its button on one line,
   at the top of Account and Profile, only for an account with several roles. */
.role-switch__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.role-switch__text {
  color: var(--text-primary);
  font-size: var(--type-body-size);
}

/* Linked club: each club's rows and its Unlink button are one block, and the
   blocks are spaced apart, a hairline between them, so the button reads as
   belonging to the club above it. */
.linked-clubs {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.linked-clubs > .linked-club + .linked-club {
  border-top: var(--border-width) solid var(--divider);
  padding-top: var(--space-5);
}

/* "Delete account?" (D191). Its own classes: the modal opens over both shells,
   and the sign-in screen's prose class does not belong over an admin page (D170). */
.account-deletion {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Every confirm modal's sentence (Unlink, Sign out everywhere), for the same
   reason: one of them opens over an admin page. */
.account-deletion__prose,
.confirm-prose {
  color: var(--text-secondary);
  font-size: var(--type-body-size);
  line-height: var(--type-body-leading);
}

/* --- Find your club (D214) ------------------------------------------------
 * The no-script results page lists clubs as FM14 rows that are links, and a
 * club the player already plays at swaps the code form for its wall. */
.club-directory__results {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.club-link__joined {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.club-link__joined[hidden] { display: none; }

.club-link__code-intro { margin: 0; }