.auth-page {
  position: relative;
  min-height: 100svh;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--block-gap-l);
  padding: clamp(var(--px-16), 4vw, var(--px-40)) clamp(var(--px-16), 4vw, var(--px-40)) var(--px-80);
}

.auth-logo {
  width: clamp(0px, 100%, var(--px-800));
  height: auto;
}

.auth-footer {
  position: absolute;
  right: clamp(var(--px-16), 4vw, var(--px-40));
  bottom: var(--px-24);
  left: clamp(var(--px-16), 4vw, var(--px-40));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--px-8);
}

.auth-micrographics {
  color: hsl(15, 86%, 50%);
  width: min(100%, calc(631px * var(--auth-micrographics-scale)));
  max-width: 50%;
}

.auth-micrographics svg {
  display: block;
  width: 100%;
  height: auto;
}

.auth-tagline {
  color: var(--font-uno--color);
  font-size: var(--font-size-l);
  line-height: var(--line-height-m);
}

.auth-card {
  width: min(100%, 32rem);
  display: flex;
  flex-direction: column;
  gap: var(--block-gap-l);
  padding: var(--block-padding-l);
  border-radius: var(--block-border-radius-l);
  background-color: var(--bg-surface-1);
}

.auth-title {
  font-size: var(--px-20);
  line-height: var(--px-24);
}

.auth-title-primary,
.auth-title-email {
  display: block;
  line-height: var(--px-28);
}

.auth-title-email {
  font-weight: 400;
  color: var(--font-success--color);
}

.auth-title-group {
  display: flex;
  flex-direction: column;
  gap: var(--block-gap-xs);
}

.auth-subtitle {
  margin: 0;
  color: var(--font-muted--color);
  font-size: var(--font-size-s);
  line-height: var(--line-height-s);
}

.auth-header-meta {
  white-space: nowrap;
}

.otp-code-input-wrapper {
  --input--height: calc(var(--element-l--height) * 3);
  --input--font-size: var(--px-64);
  --input--line-height: var(--px-64);
}

.otp-code-input {
  padding-inline: var(--px-4);
  text-align: left;
  font-family: var(--font-family-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--px-8);
  /* lint-allow: field-chrome-none — OTP cells use the tokenized underline and focus treatment below */
  outline: none;
  border-radius: 0;
  background-image: repeating-linear-gradient(
    to right,
    var(--element-field--border-color) 0 1ch,
    transparent 1ch calc(1ch + var(--px-8))
  );
  background-repeat: no-repeat;
  background-size: calc((1ch + var(--px-8)) * 5 + 1ch) var(--px-2);
  background-position: var(--px-4) calc(100% - var(--px-20));

  &:hover:not(:disabled) {
    background-image: repeating-linear-gradient(
      to right,
      var(--element-field--border-color-hover) 0 1ch,
      transparent 1ch calc(1ch + var(--px-8))
    );
  }

  &:focus-visible:not(:disabled) {
    outline-width: var(--element--focus-outline-width);
    outline-style: var(--element--focus-outline-style);
    outline-color: var(--element-field--focus-outline-color);
    outline-offset: var(--element-field--focus-outline-offset);
    background-image: repeating-linear-gradient(
      to right,
      var(--element-field--focus-outline-color) 0 1ch,
      transparent 1ch calc(1ch + var(--px-8))
    );
  }
}

.auth-code-form.is-confirmed .otp-code-input {
  color: var(--font-success--color);
}

.auth-code-form.is-rejected .otp-code-input {
  color: var(--font-danger--color);
}

.auth-muted-link {
  color: var(--font-muted--color);
}

.auth-turnstile {
  display: flex;
  justify-content: center;
}

.auth-copy {
  color: var(--font-uno--color);
  font-size: var(--font-size-m);
  line-height: var(--line-height-m);
}

.auth-secondary-copy {
  color: var(--font-muted--color);
  font-size: var(--font-size-s);
  line-height: var(--line-height-s);
}

.auth-inline-actions {
  display: flex;
  align-items: baseline;
  gap: var(--group-gap-s);
  flex-wrap: wrap;
}

.auth-inline-form {
  display: inline;
}

.auth-inline-link {
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}

.auth-inline-link:disabled {
  color: var(--font-disabled--color);
  cursor: not-allowed;
  text-decoration-color: transparent;
}

.auth-reset-form {
  width: 100%;
}

.auth-reset-actions {
  margin-top: var(--block-gap-s);
}

.auth-links p {
  font-size: var(--font-size-s);
  line-height: var(--line-height-s);
}