/* The logged-out account pages on NotAuth.Master: scripts/LogIn.aspx ("Your
   session has ended"), scripts/LogOut.aspx, the root LogIn.aspx and SignUp.aspx.
   Only what the sk- components do not: the centred card, the bullet-less
   reasons list, the LogOut logo, the login readings row, the sign-up form's
   section gaps and captcha.
   Everything else is components. */

.sk-session-ended {
  text-align: center;
}

/* Body copy in a card is capped at 70ch; centre the capped box too. */
.sk-session-ended p {
  margin-inline: auto;
}

/* The reasons read as three plain lines, no bullets. Declared after the
   design system's `.sk-card :where(ul)`, so the padding reset wins. */
.sk-session-reasons {
  padding-left: 0;
  list-style: none;
}

.sk-session-logo {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto var(--sk-space-4);
}

/* The login pages' readings (server time, kingdoms online) at the top of the
   login card: the two tiles share the row, rather than taking two of its three
   tracks above 1200px and leaving the third empty. */
.sk-session-readings {
  --sk-mini-cols: 2;
  margin: 0 0 var(--sk-space-5);
}

/* A second or third section head inside one card (SignUp): the gap a
   div.sk-eyebrow section gets, which sk-section-head (bottom margin only) does not. */
.sk-section-head.sk-session-section {
  margin-top: var(--sk-space-5);
}

/* The reCAPTCHA widget (304px wide), its error and the Sign up button,
   centred under the form. */
.sk-session-captcha {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sk-space-2);
  margin-top: var(--sk-space-5);
}

/* The button row takes the column's width, so Sign up's sk-btn--wide can go full
   width on a phone; the centred column above had shrunk it to its 260px minimum. */
.sk-session-captcha > .sk-actions {
  align-self: stretch;
}