@layer components {
  .new-conversation {
    display: flex;
    flex: auto;
    flex-direction: column;
    justify-content: safe center;
    gap: var(--space-7);
    min-block-size: var(--space-0);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-block: var(--space-7) calc(var(--dock-clearance) + var(--space-9));
  }

  .new-conversation__intro {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    max-inline-size: var(--measure);
    margin-inline: auto;
    padding-inline: var(--gutter-fluid);
    text-align: center;
  }

  .new-conversation__title {
    font: var(--type-display-2);
    letter-spacing: var(--tracking-display);
    color: var(--color-ink-display);
    text-wrap: balance;
  }

  .new-conversation__lead {
    font: var(--type-body);
    color: var(--color-ink-muted);
    text-wrap: pretty;
  }

  .new-conversation .participants {
    justify-content: safe center;
  }

  .new-conversation__actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    inline-size: var(--size-fill);
    max-inline-size: var(--measure-tight);
    margin-inline: auto;
    padding-inline: var(--gutter-fluid);
  }

  .new-conversation__action .button {
    inline-size: var(--size-fill);
  }

  .new-conversation__hint {
    margin-block: calc(-1 * var(--space-2)) var(--space-4);
    font: var(--type-caption);
    color: var(--color-ink-faint);
    text-align: center;
    text-wrap: balance;
  }
}

@layer components {
  /* On a Page (First Run's Start) the whole screen scrolls as one, and the block still sits in
     the middle of the space under the logo. */
  .page:has(> .new-conversation) {
    display: flex;
    flex-direction: column;
  }

  .page > .new-conversation {
    flex: 1 0 auto;
    overflow: visible;
    padding-block-end: var(--space-9);
  }
}

@layer components {
  /* Who set this up, when someone did: the Partner Plaque the vault will carry, in a Paper
     vault's inks because it stands on the page, not in an arch. */
  .new-conversation__from {
    --vault-course: var(--color-border-strong);
    --vault-quiet: var(--color-ink-faint);
    --vault-crown-ink: var(--color-ink-display);
    --vault-hover: var(--color-surface-sunken);

    display: flex;
    flex-direction: column;
    align-items: center;
    margin-block-end: var(--space-8);
    padding-inline: var(--gutter-fluid);
  }

  .new-conversation__from .partner-plaque {
    margin-block: var(--space-0);
  }
}