/* One mail in its thread (emails/_email, docs/planning/email-and-meetings.md):
   folded to a line — who, the first words, when — or open to its words. The
   fold is an accordion (accordions.css): the <details> element's own state,
   its words swapped by it; hairlines between mails only. */
@layer components {
  .mails > .mail + .mail {
    border-block-start: var(--border);
  }

  .mail__head {
    display: flex;
    align-items: start;
    gap: var(--inline-space);
    padding-block: var(--block-space);
  }

  .mail__body {
    padding-block-end: var(--block-space);
  }

  /* An HTML mail, as its sender laid it out, in a frame of its own: as tall
     as its words once mail_frame_controller has measured them, a screenful
     until then. It paints its own light paper (EmailsHelper::FRAME_STYLE),
     as mail is drawn for light, even on dark paper. */
  .mail__frame {
    display: block;
    inline-size: 100%;
    block-size: 16rem;
    border: 0;
    border-radius: var(--border-radius);
  }

  /* A plain mail keeps its lines; its quoted history folds as the HTML's
     does, a fold like every other (accordions.css lists its summary). */
  .mail__text {
    white-space: pre-wrap;
    overflow-wrap: anywhere;

    summary { color: var(--color-ink-faint); letter-spacing: .2em; }
  }

  .mail__files {
    display: flex;
    flex-wrap: wrap;
    gap: var(--inline-space-half);
    padding-block-end: var(--block-space);
  }
}