/* Central visual contract for supporter login and registration screens. */

body.supporter-auth-page {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  overflow-x: clip;
  color: var(--tz-text-soft);
  background: var(--tz-canvas);
  font-family: var(--tz-font-sans);
  line-height: 1.65;
  letter-spacing: 0;
}

body.supporter-auth-page :where(a, button, input):focus-visible {
  outline: 0;
  box-shadow: var(--tz-focus) !important;
}

body.supporter-auth-page .support-auth-brand,
body.supporter-auth-page .support-auth-home {
  color: var(--tz-text);
  text-decoration: none;
}

body.supporter-auth-page .support-auth-brand img {
  background: var(--tz-brand-50);
  border: 1px solid var(--tz-brand-200);
  border-radius: var(--tz-radius-sm);
  box-shadow: var(--tz-shadow-xs);
}

body.supporter-auth-page .support-auth-home {
  background: var(--tz-surface);
  border: 1px solid var(--tz-border-strong);
  border-radius: var(--tz-radius-sm);
}

body.supporter-auth-page .support-auth-home:hover {
  color: var(--tz-brand-700);
  background: var(--tz-brand-50);
  border-color: var(--tz-brand-200);
}

body.supporter-auth-page .support-auth-shell {
  background: var(--tz-surface);
  border: 1px solid var(--tz-border);
  border-radius: var(--tz-radius-xl);
  box-shadow: var(--tz-shadow-md);
}

body.supporter-auth-page .support-auth-card {
  color: var(--tz-text);
  background: var(--tz-surface);
}

body.supporter-auth-page .support-auth-card > header small,
body.supporter-auth-page .support-auth-eyebrow {
  color: var(--tz-brand-700);
}

body.supporter-auth-page .support-auth-card h1 {
  color: var(--tz-text);
}

body.supporter-auth-page .support-auth-card header p,
body.supporter-auth-page .support-auth-form label > span small,
body.supporter-auth-page .support-auth-hint,
body.supporter-auth-page .support-auth-switch,
body.supporter-auth-page .ui-submit-status {
  color: var(--tz-muted);
}

body.supporter-auth-page .support-auth-icon {
  color: var(--tz-brand-700);
  background: var(--tz-brand-50);
  border: 1px solid var(--tz-brand-200);
  border-radius: var(--tz-radius-md);
}

body.supporter-auth-page .support-auth-alert {
  color: var(--tz-danger);
  background: var(--tz-danger-soft);
  border: 1px solid color-mix(in srgb, var(--tz-danger) 25%, white);
  border-radius: var(--tz-radius-sm);
}

body.supporter-auth-page .support-auth-alert.is-success {
  color: var(--tz-success);
  background: var(--tz-success-soft);
  border-color: color-mix(in srgb, var(--tz-success) 25%, white);
}

body.supporter-auth-page .support-auth-form label {
  color: var(--tz-text-soft);
}

body.supporter-auth-page .support-auth-control input {
  color: var(--tz-text);
  background: var(--tz-surface);
  border: 1px solid var(--tz-border-strong);
  border-radius: var(--tz-radius-sm);
  box-shadow: none;
}

body.supporter-auth-page .support-auth-control input:focus {
  background: var(--tz-surface);
  border-color: var(--tz-brand-600);
  box-shadow: var(--tz-focus);
}

body.supporter-auth-page .support-auth-control > i,
body.supporter-auth-page .support-auth-control button {
  color: var(--tz-muted);
}

body.supporter-auth-page .support-auth-control button {
  background: transparent;
  border: 0;
  border-radius: var(--tz-radius-xs);
}

body.supporter-auth-page .support-auth-control button:hover {
  color: var(--tz-brand-700);
  background: var(--tz-brand-50);
}

body.supporter-auth-page .support-auth-submit {
  color: #fff;
  background: var(--tz-brand-600);
  border: 1px solid var(--tz-brand-600);
  border-radius: var(--tz-radius-sm);
  box-shadow: none;
}

body.supporter-auth-page .support-auth-submit:hover:not(:disabled) {
  color: #fff;
  background: var(--tz-brand-700);
  border-color: var(--tz-brand-700);
}

body.supporter-auth-page .support-auth-submit:disabled {
  color: var(--tz-muted);
  background: var(--tz-surface-soft);
  border-color: var(--tz-border);
}

body.supporter-auth-page .support-auth-switch a {
  color: var(--tz-info);
}

body.supporter-auth-page .support-auth-story {
  color: #fff;
  background: var(--tz-brand-900);
  border-inline-start: 0.3rem solid var(--tz-gold-500);
}

body.supporter-auth-page .support-auth-story__mark {
  color: var(--tz-brand-800);
  background: #fff;
  border: 2px solid var(--tz-gold-500);
  border-radius: var(--tz-radius-md);
  box-shadow: var(--tz-shadow-sm);
}

body.supporter-auth-page .support-auth-story .support-auth-eyebrow {
  color: var(--tz-gold-100);
}

body.supporter-auth-page .support-auth-story h2,
body.supporter-auth-page .support-auth-steps strong {
  color: #fff;
}

body.supporter-auth-page .support-auth-story > p:not(.support-auth-eyebrow),
body.supporter-auth-page .support-auth-steps small {
  color: var(--tz-brand-100);
}

body.supporter-auth-page .support-auth-points span {
  color: #fff;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--tz-radius-sm);
}

body.supporter-auth-page .support-auth-points i {
  color: var(--tz-brand-200);
}

body.supporter-auth-page .support-auth-steps li > span {
  color: var(--tz-brand-900);
  background: #fff;
  border: 1px solid var(--tz-brand-100);
  border-radius: var(--tz-radius-sm);
}

@media (max-width: 900px) {
  body.supporter-auth-page .support-auth-story {
    border-top: 0.25rem solid var(--tz-gold-500);
    border-inline-start: 0;
  }
}