/* Sending a message (mail.view.MailState, _mail_state.html): under a reply draft wherever it
   renders (Today, a project page, the decide page, the Ask panel) and on the report page
   (_report_mail.html). The draft block itself (.draft, .draft-head, .draft-body) is today.css's.

   .mail-state         the block: one line per thing that happened, then the buttons
   .mail-line          one line ("Sent to Ana Ruiz.", "Not sent: Ben Okafor may not receive mail
                       yet. Approve in the Directory"); .sent green, .error red, always with words
   .draft-actions      Send, "Send without …", "Don't send", Open in Outlook in one row
   .draft-unapproved   "may not receive mail yet" after a party an admin has not approved
   .rpt-mail           the report page's Send, or its export's line on a row of its own

   Tokens only (style.css); nothing here sets a colour of its own. */

.mail-state { max-width: var(--measure); margin-top: var(--s4); }
.mail-line { margin: 0 0 var(--s2); }
.mail-line.sent { color: var(--green); font-weight: 600; }
.mail-line.error { color: var(--red); }
.mail-line a { white-space: nowrap; }

.draft-actions { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s3); }
.draft-actions form, .draft-actions .draft-send { margin: 0; }
.mail-state > .mail-line + .draft-actions { margin-top: var(--s3); }
.mail-state > .draft-actions:first-child { margin-top: 0; }

.draft-unapproved { color: var(--amber); white-space: nowrap; }

.rpt-mail { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.rpt-mail:has(.mail-state) { flex-basis: 100%; order: 10; }
.rpt-mail .mail-state { margin-top: 0; }
.rpt-mail form { margin: 0; }

@media (max-width: 700px) {
  .draft-actions form { flex: 1 1 100%; }
  .draft-actions .btn, .rpt-send .btn { width: 100%; }
  .rpt-mail, .rpt-send { flex: 1 1 100%; }
}

/* What other automations wrote after an action ("Also: Sales heads-up: KX-2 battery"), under the
   reply draft (_recorded.html, _nudged.html). */
.recorded-also { margin: var(--s2) 0 0; color: var(--muted); }