.fz-auth--tenant {
  --fz-auth-ink: var(--tenant-text);
  --fz-auth-text: var(--tenant-text);
  --fz-auth-muted: var(--tenant-text);
  --fz-auth-green: var(--tenant-primary);
  --fz-auth-soft: color-mix(in srgb, var(--tenant-primary) 5%, var(--tenant-background));
  --fz-auth-line: color-mix(in srgb, var(--tenant-text) 22%, var(--tenant-background));
  min-height: auto;
  background:
    radial-gradient(circle at 12% 10%, color-mix(in srgb, var(--tenant-primary) 9%, transparent), transparent 42%),
    var(--tenant-background);
  font-family: var(--tenant-body-font);
}

.fz-auth--tenant .fz-auth-shell,
.fz-auth--tenant .fz-auth-panel,
.fz-auth--tenant .fz-auth-card {
  min-width: 0;
}

.fz-auth--tenant .fz-auth-panel,
.fz-auth--tenant .fz-auth-card {
  border-radius: var(--tenant-radius-card);
}

.fz-auth--tenant .fz-auth-panel {
  color: var(--tenant-on-primary);
  background: var(--tenant-primary);
  border-color: var(--tenant-primary);
}

.fz-auth--tenant .fz-auth-brand {
  flex-direction: row;
  gap: 1rem;
  text-align: left;
}

.fz-auth--tenant .fz-auth-brand img {
  flex: 0 0 auto;
  width: 6rem;
  height: 6rem;
  padding: 0.5rem;
  border-radius: var(--tenant-radius-button);
  background: #ffffff;
  object-fit: contain;
  filter: none;
}

.fz-auth--tenant .fz-auth-club-name {
  min-width: 0;
  font-size: 1.15rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.fz-auth--tenant .fz-auth-panel h1,
.fz-auth--tenant .fz-auth-card-heading h2 {
  font-family: var(--tenant-heading-font);
  overflow-wrap: anywhere;
}

.fz-auth--tenant .fz-auth-panel :is(h1, p, .fz-auth-brand, .fz-auth-kicker, .fz-auth-proof span, .fz-auth-proof i) {
  color: var(--tenant-on-primary);
}

.fz-auth--tenant .fz-auth-kicker,
.fz-auth--tenant .fz-auth-proof span {
  border: 1px solid color-mix(in srgb, var(--tenant-on-primary) 30%, transparent);
  background: transparent;
}

.fz-auth--tenant .fz-auth-proof span {
  border-radius: var(--tenant-radius-button);
}

.fz-auth--tenant .fz-auth-card,
.fz-auth--tenant .fz-auth-field input {
  background: var(--tenant-background);
}

.fz-auth--tenant .fz-auth-card-heading span,
.fz-auth--tenant .fz-auth-submit {
  color: var(--tenant-on-primary);
  background: var(--tenant-primary);
}

.fz-auth--tenant .fz-auth-field label,
.fz-auth--tenant .fz-auth-links,
.fz-auth--tenant .fz-auth-bottom-link {
  color: var(--fz-auth-text);
}

.fz-auth--tenant .fz-auth-field input {
  border-color: var(--fz-auth-line);
  border-radius: var(--tenant-radius-button);
}

.fz-auth--tenant .fz-auth-field input:focus {
  border-color: var(--fz-auth-ink);
  outline: 2px solid var(--fz-auth-ink);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--tenant-primary) 18%, transparent);
}

.fz-auth--tenant .fz-auth-submit {
  border-radius: var(--tenant-radius-button);
  box-shadow: 0 12px 26px color-mix(in srgb, var(--tenant-primary) 18%, transparent);
}

.fz-auth--tenant .fz-auth-secondary-action {
  min-height: 2.75rem;
  border-color: var(--fz-auth-line);
  border-radius: var(--tenant-radius-button);
  color: var(--fz-auth-ink);
  background: var(--tenant-background);
}

.fz-auth--tenant :is(.fz-auth-note, .fz-auth-check, .fz-auth-subsection) {
  border-radius: var(--tenant-radius-button);
  color: var(--fz-auth-text);
  background: var(--fz-auth-soft);
}

.fz-auth--tenant :is(.fz-auth-check, .fz-auth-links, .fz-auth-bottom-link) a {
  color: var(--fz-auth-ink);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--tenant-primary);
  text-underline-offset: 0.2em;
}

.fz-auth--tenant :is(a, button, input[type="checkbox"]):focus-visible {
  outline: 2px solid var(--fz-auth-ink);
  outline-offset: 4px;
}

.fz-auth--tenant .fz-auth-panel a:focus-visible {
  outline-color: var(--tenant-on-primary);
}

.fz-auth--tenant .fz-auth-email {
  font-size: 1.15rem;
  overflow-wrap: anywhere;
}

.fz-auth--tenant .fz-auth-field .fz-auth-code {
  text-align: center;
  font-size: clamp(1.5rem, 6vw, 2.25rem);
  letter-spacing: 0.3em;
  font-weight: 700;
}

.fz-auth--tenant .fz-auth-resend {
  width: 100%;
  margin-top: 1rem;
}

@media (min-width: 760px) and (max-width: 1023px) {
  .fz-auth--tenant .fz-auth-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .fz-auth--tenant .fz-auth-panel {
    min-height: auto;
  }
}

@media (min-width: 1024px) {
  .fz-auth--tenant .fz-auth-shell {
    grid-template-columns: minmax(0, 0.94fr) minmax(0, 0.76fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .fz-auth--tenant :is(input, button) {
    transition: none;
  }

  .fz-auth--tenant :is(.fz-auth-submit, .fz-auth-secondary-action):hover {
    transform: none;
  }
}
