@layer components {
  .auth {
    display: grid;
    grid-template-rows: minmax(0, 25dvh) minmax(0, 1fr);
    min-block-size: 100dvh;

    /* Remove gutter */
    #main:has(&) {
      padding-inline: 0;
    }

    @media (min-width: 640px) {
      grid-template-rows: minmax(0, 33dvh) minmax(0, 1fr);
    }

    @media (min-width: 960px) {
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 1fr;
    }
  }

  .auth__half {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    padding-block: var(--block-space-double);
    padding-inline: max(var(--main-padding), var(--inline-space-double));

    @media (min-width: 960px) {
      padding-inline: 0;

      &:first-child {
        padding-inline-start: max(
          var(--main-padding),
          calc((100dvw - var(--main-width)) / 2)
        );
      }

      &:last-child {
        padding-inline-end: max(
          var(--main-padding),
          calc((100dvw - var(--main-width)) / 2)
        );
      }
    }
  }

  .auth__half-inner {
    align-content: center;
    display: grid;
    justify-items: center;
    padding-block: var(--block-space-double);
    padding-inline: max(
      calc(3 * var(--main-padding)),
      var(--inline-space-double)
    );
  }

  .auth__brand {
    background-color: var(--color-void);
    color: var(--color-paper);
    padding-block: 0;
    padding-block-start: var(--custom-safe-inset-top);
    row-gap: var(--block-space-half);
    text-align: center;

    .auth__half-inner {
      padding-block: var(--block-space-half);
    }

    @media (min-width: 960px) {
      padding-block: var(--block-space-double);

      .auth__half-inner {
        padding-block: var(--block-space-double);
      }
    }
  }

  .auth__logo {
    --icon-size: 8ch;

    @media (min-width: 640px) {
      --icon-size: 10ch;
    }

    @media (min-width: 960px) {
      --icon-size: 15ch;
    }
  }

  .auth__wordmark {
    color: var(--color-primary);
    font-size: var(--text-wordmark, var(--text-x-large));

    span {
      color: var(--color-surface);
    }

    @media (max-width: 639px) {
      --text-wordmark: var(--text-large);
    }
  }

  .auth__tagline {
    font-size: var(--text-x-small);
    letter-spacing: var(--letter-spacing-loose);
    margin: 0;
    opacity: 0.6;
    text-transform: uppercase;
  }

  .auth__content {
    inline-size: 100%;
    max-inline-size: 48ch;
  }

  .auth__label {
    color: var(--color-ink-dark);
    font-size: var(--text-x-small);
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
  }

  .auth__status {
    gap: 0.7em;
    letter-spacing: var(--letter-spacing-loose);

    &::before {
      animation: pulse 2s ease-in-out infinite;
      background-color: currentColor;
      block-size: 0.4em;
      border-radius: 50%;
      content: "";
      inline-size: 0.4em;
    }
  }

  /* The chamfer goes on a wrapper, never the button itself: clip-path cuts
     away the area outside the border box, which is where the focus ring is. */
  .auth__submit {
    display: block;
    inline-size: 100%;

    .btn {
      --btn-border-radius: 0;

      inline-size: 100%;
      text-transform: uppercase;
    }
  }
}