@layer components {
  .app-shell {
    display: flex;
    flex-direction: column;
    min-block-size: 100svh;
  }

  .app-main {
    flex: 1;
    inline-size: 100%;
    max-inline-size: 1120px;
    margin-inline: auto;
    padding: var(--space-6) var(--space-4) calc(var(--launcher-clearance) + env(safe-area-inset-bottom));
  }

  @media (min-width: 768px) {
    .app-main {
      padding: var(--space-8) var(--space-6) calc(var(--launcher-clearance) + env(safe-area-inset-bottom));
    }
  }

  .auth-layout {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-block-size: 100svh;
    padding: var(--space-6) var(--space-4);
    gap: var(--space-5);
  }

  @media (min-width: 768px) {
    .auth-layout {
      padding: var(--space-8) var(--space-4);
      gap: var(--space-6);
    }
  }

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

  .auth-layout__caption {
    color: var(--color-ink-subtle);
    font-size: var(--text-12);
    font-style: italic;
    text-align: center;
  }
}