@layer components {
  /* The way in — signing in, and starting an organization.
   *
   * The only screens in the app with no shell around them: no sidebar, no
   * account, and nowhere to navigate to. So they are the one place that draws
   * its own frame, and it is deliberately quiet — a mark, one sentence saying
   * what this is, one card, and the way to the other screen underneath it.
   *
   * The card is .panel.panel--roomy rather than a surface of its own. A sign-in
   * box is a panel, and the app already has exactly one answer to what a panel
   * looks like; this file only says where it sits and what stands around it.
   */
  .auth {
    --auth-width: 26rem;
    /* Off the top rather than centred in the window. A centred card moves the
       moment a validation summary appears above the fields, which is the one
       moment somebody is reading it. */
    --auth-offset: var(--space-triple);

    display: grid;
    gap: var(--space-and-half);
    inline-size: 100%;
    max-inline-size: var(--auth-width);
    margin-inline: auto;
    padding-block-start: var(--auth-offset);
  }

  .auth__intro {
    display: grid;
    gap: var(--space-quarter);
    justify-items: center;
    text-align: center;
  }

  .auth__brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-half);
    margin-block-end: var(--space-half);
    color: var(--color-ink-soft);
    font-size: var(--text-xx-small);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-x-wide);
    text-transform: uppercase;
  }

  /* Square, because it stands for a place rather than a person — the same rule
     that keeps the sidebar's account mark off a circle. A circle is a face by
     convention everywhere it appears. */
  .auth__mark {
    --auth-mark-size: 1.75rem;

    display: grid;
    place-items: center;
    inline-size: var(--auth-mark-size);
    block-size: var(--auth-mark-size);
    border-radius: var(--radius-small);
    background: var(--color-accent);
    color: var(--color-accent-ink);
    font-size: var(--text-x-small);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-normal);
  }

  /* A step down from a page title. These screens have no chrome to compete
     with, so the display size the app gives an h1 reads as shouting across a
     card this narrow. */
  .auth__title {
    margin: 0;
    font-size: var(--text-large);
  }

  .auth__subtitle {
    --auth-subtitle-width: 22rem;

    margin: 0;
    max-inline-size: var(--auth-subtitle-width);
    color: var(--color-ink-soft);
    font-size: var(--text-normal);
    text-wrap: balance;
  }

  /* The other door. Outside the card on purpose: it is not part of what is
     being filled in, and a link inside the panel would be one more thing
     between the last field and the button. */
  .auth__alternative {
    margin: 0;
    color: var(--color-ink-soft);
    font-size: var(--text-small);
    text-align: center;

    a {
      color: var(--color-accent);
      font-weight: var(--weight-semibold);
    }
  }
}