@layer components {
  .page-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-5);
    max-inline-size: var(--measure-tight);
    margin-inline: auto;
    padding-block: calc(var(--safe-top) + var(--space-13)) var(--space-9);
    padding-inline: var(--gutter-fluid);
    text-align: center;
  }

  .page-message__icon {
    --icon-size: var(--button-icon-size-large);

    display: grid;
    place-items: center;
    inline-size: var(--button-size-large);
    block-size: var(--button-size-large);
    margin-block-end: var(--space-2);
    border-radius: var(--radius-card);
    background-color: var(--color-surface-sunken);
    color: var(--color-ink-muted);
  }

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

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

  .page-message__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-4);
    margin-block-start: var(--space-4);
  }

  /* A choice the action needs first, such as which account a vault joins, sits above it at full width. */
  .page-message__form {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-5);
    inline-size: var(--size-fill);
  }

  .page-message__form > .field {
    align-self: stretch;
    text-align: start;
  }
}