@layer components {
  /* A signed-out form set on its own raised sheet beside the words that ask for it: the app's
     own fields, then one button that says what happens. */
  .site-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-7);
    inline-size: min(var(--size-fill), var(--site-form-inline-size));
    padding: var(--space-9) var(--space-8);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-xl);
    background-color: var(--color-surface-raised);
    box-shadow: var(--elev-3);
  }

  .site-form__submit {
    align-self: stretch;
    margin-block-start: var(--space-4);
  }

  .site-form__note {
    font: var(--type-caption);
    color: var(--color-ink-faint);
    text-align: center;
    text-wrap: pretty;
  }
}