/* The signed-out screens (layouts/public and layouts/apex: sign in, sign up, password reset),
/* as shadcn/ui's login blocks (login-01/03): the workspace's mark centred above one Card whose
/* centred header names the step, fields as Field > Label + Input, a full-width primary
/* Button, a FieldDescription under it with the way back. The theme toggle sits in the corner.
/* The kit draws every piece; this only places them. */
@layer ui {
  /* The page: the mark and the card centred down it (#global-container is display: contents,
  /* so they are the body's own children). */
  body.public {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    justify-content: center;
    min-block-size: 100dvh;
    padding: 1.5rem;

    @media (min-width: 768px) {
      padding-inline: 2.5rem;
    }
  }

  .public__header {
    display: flex;
    justify-content: center;
  }

  /* The workspace's mark, centred over the card. */
  .public__brand {
    align-items: center;
    display: flex;
    justify-content: center;

    .site-logo {
      block-size: 2rem;
    }
  }

  .public__theme {
    inset-block-start: 1rem;
    inset-inline-end: 1rem;
    position: fixed;
  }

  .public__main {
    inline-size: 100%;
    max-inline-size: 24rem;

    &:has(.auth--wide) {
      max-inline-size: 28rem;
    }
  }

  /* A step: the card, then the line under it. */
  .auth {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }

  .auth__header {
    text-align: center;
  }

  .auth__form {
    display: grid;
    gap: 1.5rem;
    margin: 0;
  }

  /* A label with a link at its end ("Forgot password?"). */
  .auth__label-row {
    align-items: center;
    display: flex;
    gap: 0.5rem;
    justify-content: space-between;
  }

  /* The FieldDescription under the card: the way back, another way in. */
  .auth__note {
    padding-inline: 1.5rem;
    text-align: center;
    text-wrap: balance;
  }
}