/* ==========================================================================
   app-mail.css — three panes, because that is what Mail.app was.

   The list column carries two lines per row: who, then what. The unread
   weight is the only emphasis in the whole window, which is correct — in a
   folder of four hundred messages the question is never "what does this
   say", it is "which of these is from a person".
   ========================================================================== */

.browser .col.mail-boxes { flex: 0 0 118px; }
.browser .col.mail-list  { flex: 0 0 236px; }

.mail-boxes .row .when { font-variant-numeric: tabular-nums; opacity: .65; }
.mail-boxes .row.has-unread .nm { font-weight: 700; }
.mail-boxes .row.has-unread .when { opacity: 1; color: var(--amber-dim); }
.mail-boxes .row.sel .when { color: rgba(255,255,255,.8); }

.mail-row {
  align-items: flex-start;
  white-space: normal;
  padding: 4px 5px 5px 7px;
  border-bottom: 1px solid rgba(87,78,68,.22);
}
.mail-row .nm { display: block; flex: 1 1 auto; min-width: 0; }
.mail-row .m-from {
  display: block; font-size: 11.5px; line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mail-row .m-subj {
  display: block; font-size: 10.5px; line-height: 1.3; opacity: .72;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mail-row.unread .m-from { font-weight: 700; }
.mail-row.unread .m-subj { opacity: .95; }
.mail-row.draft .m-from { font-style: italic; opacity: .8; }
.mail-row .when { align-self: flex-start; margin-left: 6px; }
.mail-row .m-flag { color: var(--amber-dim); font-size: 8px; margin-left: 4px; }
.mail-row.sel .m-flag { color: var(--amber-hot); }

/* a message body reads as prose, not as a file */
.m-body {
  font-size: 12.5px; line-height: 1.62; margin: 0 0 11px; max-width: 62ch;
}
.m-unsent {
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--rust);
  border-top: 1px solid rgba(87,78,68,.4); padding-top: 8px; margin-top: 4px;
}

@media (max-width: 640px) {
  .browser .col.mail-boxes { flex: 0 0 92px; }
  .browser .col.mail-list  { flex: 1 1 auto; }
}