/* A client's Report email section (clients/_report_email): the form card in
   the main column and, beside it, the preview card, what the email says and
   when it went and goes next. One column on a narrow page. */
@layer components {
  .report-email {
    align-items: start;
    display: grid;
    gap: 1.5rem;

    @container section-page (width >= 52rem) {
      grid-template-columns: minmax(0, 1fr) 18rem;
    }
  }

  .report-email__fields {
    display: grid;
    gap: 1.25rem;
  }

  .report-email__aside {
    display: grid;
    gap: 1rem;
  }

  .report-email__actions {
    display: grid;
    gap: 0.5rem;
  }

  .report-email__contents {
    display: grid;
    gap: 0.5rem;
    list-style: disc;
    margin: 0;
    padding-inline-start: 1.125rem;
  }

  .report-email__facts {
    padding-inline: 0.25rem;
  }
}