/* Login / password-reset auth screens (#1481).
 *
 * Screen visibility is driven by [data-active-screen] on the .tp-auth-form
 * element (see js/auth-screens.js); every screen renders in the DOM so
 * assistive tech and JS-disabled visitors can still reach every field - the
 * form itself emits a <noscript> stylesheet that forces every screen visible
 * (stacked) when this attribute is never toggled.
 */

.tp-auth-form .tp-auth-screen {
  display: none;
}
.tp-auth-form[data-active-screen="landing"] .tp-auth-screen--landing,
.tp-auth-form[data-active-screen="password"] .tp-auth-screen--password,
.tp-auth-form[data-active-screen="magiclink"] .tp-auth-screen--magiclink,
.tp-auth-form[data-active-screen="sso"] .tp-auth-screen--sso {
  display: block;
}

.tp-auth-screen__heading {
  margin: 0 0 var(--tp-spacing-2);
  font-size: var(--tp-font-size-lg);
  font-weight: var(--tp-font-weight-bold);
  line-height: var(--tp-line-height-tight, 1.2);
}
.tp-auth-screen__intro {
  margin: 0 0 var(--tp-spacing-4);
  color: var(--tp-color-text-muted);
  font-size: var(--tp-font-size-sm);
}

/* Landing screen: 3-card sign-in method picker. */
.tp-auth-method-grid {
  display: flex;
  flex-direction: column;
  gap: var(--tp-spacing-3);
}
.tp-auth-method-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--tp-spacing-1);
  width: 100%;
  padding: var(--tp-spacing-4);
  background: var(--tp-color-surface-default);
  border: 1px solid var(--tp-color-border-default);
  border-inline-start: 4px solid var(--tp-color-primary);
  border-radius: var(--tp-border-radius-md);
  font: inherit;
  text-align: start;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.tp-auth-method-card:hover {
  border-color: var(--tp-color-primary);
  box-shadow: var(--tp-shadow-sm);
}
.tp-auth-method-card:focus-visible {
  outline: 2px solid var(--tp-color-primary);
  outline-offset: 2px;
}
.tp-auth-method-card--magiclink {
  border-inline-start-color: var(--tp-color-success);
}
.tp-auth-method-card--sso {
  border-inline-start-color: var(--tp-color-warning);
}
.tp-auth-method-card__title {
  font-weight: var(--tp-font-weight-bold);
  color: var(--tp-color-text-default);
}
.tp-auth-method-card__desc {
  font-size: var(--tp-font-size-sm);
  color: var(--tp-color-text-muted);
}

/* Back-to-options control, shared by every sub-screen. */
.tp-auth-back-link {
  display: inline-block;
  margin-bottom: var(--tp-spacing-3);
  padding: 0;
  background: none;
  border: 0;
  color: var(--tp-color-primary);
  font: inherit;
  font-size: var(--tp-font-size-sm);
  cursor: pointer;
}
.tp-auth-back-link:hover {
  text-decoration: underline;
}
.tp-auth-back-link:focus-visible {
  outline: 2px solid var(--tp-color-primary);
  outline-offset: 2px;
}

/* Password screen: "Password" label + "Forgot your password?" on one row. */
.tp-auth-password-label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--tp-spacing-3);
}
.tp-auth-forgot-password-link {
  font-size: var(--tp-font-size-sm);
  color: var(--tp-color-primary);
  text-decoration: none;
}
.tp-auth-forgot-password-link:hover {
  text-decoration: underline;
}
.tp-auth-forgot-password-link:focus-visible {
  outline: 2px solid var(--tp-color-primary);
  outline-offset: 2px;
}

/* Password screen: "<- Back to sign in options" directly below the
 * full-width Log In button. */
.tp-auth-screen--password .form-actions {
  width: 100%;
}
.tp-auth-screen--password .form-actions .form-submit {
  width: 100%;
}
.tp-auth-screen--password .tp-auth-back-link {
  display: block;
  margin: var(--tp-spacing-3) 0 0;
}

/* Magic-link screen: match the input rhythm of the rest of the card. */
.tp-auth-magiclink-fields {
  display: flex;
  flex-direction: column;
  gap: var(--tp-spacing-3);
}

/* University Account (SSO) screen. */
.tp-auth-sso__scope {
  margin: 0 0 var(--tp-spacing-4);
  padding-inline-start: var(--tp-spacing-4);
  font-size: var(--tp-font-size-sm);
  color: var(--tp-color-text-muted);
}
.tp-auth-sso__button {
  display: block;
  width: 100%;
  text-align: center;
}
.tp-auth-sso__unavailable {
  color: var(--tp-color-danger);
  font-size: var(--tp-font-size-sm);
}

/* Password-reset "Quick security check" banner around the CAPTCHA element. */
.tp-security-check {
  margin-top: var(--tp-spacing-4);
  padding: var(--tp-spacing-3);
  background: var(--tp-color-surface-subtle);
  border: 1px solid var(--tp-color-border-default);
  border-radius: var(--tp-border-radius-md);
}
.tp-security-check__label {
  margin: 0 0 var(--tp-spacing-2);
  font-weight: var(--tp-font-weight-bold);
  font-size: var(--tp-font-size-sm);
}

/* Persistent footer links (need-help + buy-pin) - present on every screen
 * because they render as siblings of .tp-auth-screen, not inside it, so the
 * [data-active-screen] rules above never hide them. tpemis-self-service__help-link
 * is the login form's existing "Need help?" link (tpemis_self_service module,
 * untouched here); restyled to match the new footer links. */
.tp-auth-persistent-footer__link,
.tpemis-self-service__help-link {
  display: block;
  margin-top: var(--tp-spacing-3);
  padding-top: var(--tp-spacing-3);
  border-top: 1px solid var(--tp-color-border-default);
  font-size: var(--tp-font-size-sm);
  text-align: left;
}