/* The three mail readers: CABINET (Outlook .pst and .ost), POSTBAG (.mbox)
   and SATCHEL (.msg and winmail.dat), drawn the same way.

   On a desktop the folders, mailboxes or labels stand to the left of the
   list and the email being read, as they do in a mail program, so moving
   from one to another never scrolls the list away; on a phone they stack.
   Everything here is drawn from theme.css's tokens, and the colourways
   reach it untouched. */

.mr-drop { border: 2px dashed var(--rule-strong); border-radius: var(--radius-md); padding: 26px 18px; text-align: center; background: var(--paper-inset); transition: border-color var(--dur-2) var(--ease-standard), background var(--dur-2) var(--ease-standard); }
.mr-drop.is-over { border-color: var(--accent-strong); background: var(--paper-raised); }
.mr-drop p { margin: 0 0 10px; color: var(--ink-soft); font-size: var(--text-sm); }

.mr-app { display: grid; gap: 18px; align-items: start; }
.mr-app > * { min-width: 0; }
.mr-app .panel { margin: 0; }
.mr-main { display: grid; gap: 18px; }
@media (min-width: 1080px) {
  .mr-app { grid-template-columns: minmax(250px, 300px) minmax(0, 1fr); }
  .mr-side { position: sticky; top: 76px; max-height: calc(100vh - 92px); overflow: auto; overscroll-behavior: contain; }
}

/* The label over a group, in the product's small capitals. */
.mr-cap { font: 600 var(--text-2xs) var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 8px; }
.mr-side .mr-cap + .mr-tree, .mr-side .mr-sum { margin-bottom: 18px; }

.mr-sum { width: 100%; border-collapse: collapse; font-size: var(--text-xs); }
.mr-sum th, .mr-sum td { text-align: left; padding: 4px 8px 4px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.mr-sum th { font-weight: 600; color: var(--ink-soft); white-space: nowrap; width: 1%; }
.mr-sum td { font-variant-numeric: tabular-nums; word-break: break-word; }

/* The folder tree. */
.mr-tree { list-style: none; margin: 0; padding: 0; border: 1px solid var(--rule); border-radius: var(--radius-md); overflow: hidden; }
.mr-tree li { display: flex; align-items: stretch; border-bottom: 1px solid var(--rule); }
.mr-tree li:last-child { border-bottom: 0; }
.mr-tree li[hidden] { display: none; }
.mr-twist { flex: 0 0 32px; display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0; border: 0; background: none; color: var(--ink-faint); cursor: pointer; }
.mr-twist svg { width: 12px; height: 12px; transition: transform var(--dur-2) var(--ease-standard); }
.mr-twist[aria-expanded="false"] svg { transform: rotate(-90deg); }
.mr-twist:hover { color: var(--ink); }
.mr-twist-none { flex: 0 0 32px; }
.mr-folder { flex: 1 1 auto; min-width: 0; display: flex; justify-content: space-between; gap: 10px; align-items: center; min-height: 40px; padding: 6px 12px 6px 0; font: inherit; font-size: var(--text-sm); text-align: left; background: none; border: 0; color: var(--ink); cursor: pointer; }
.mr-tree li:hover { background: var(--paper-inset); }
.mr-tree li.is-current { background: var(--paper-inset); box-shadow: inset 3px 0 0 var(--accent-strong); }
.mr-tree li.is-current .mr-folder { font-weight: 600; }
.mr-fname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mr-folder.is-unread .mr-fname { font-weight: 600; }
.mr-group .mr-fname { color: var(--ink-soft); }
.mr-fcount { color: var(--ink-faint); font-variant-numeric: tabular-nums; font-size: var(--text-xs); white-space: nowrap; }
.mr-folder.is-unread .mr-fcount { color: var(--accent-strong); font-weight: 600; }
@media (pointer: coarse) { .mr-folder, .mr-twist { min-height: 44px; } }
/* Stacked above the list on a phone, the tree scrolls in its own box so the
   list is never more than a short scroll below it. */
@media (max-width: 1079px) { .mr-tree { max-height: 360px; overflow: auto; overscroll-behavior: contain; } }

.mr-side .field { margin: 0 0 10px; }
.mr-stack { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.mr-stack > button { width: 100%; }

/* The list: the tools above it, and the rows. */
#cbList, #cbMsg { scroll-margin-top: 84px; }
.mr-head { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; justify-content: space-between; margin: 0 0 12px; }
.mr-head h2 { margin: 0; word-break: break-word; }
.mr-tools { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: 0 12px; align-items: end; }
.mr-tools .field { margin: 0 0 10px; }
.mr-tools.is-3 { grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr)); }
@media (max-width: 860px) { .mr-tools { grid-template-columns: 1fr 1fr; } .mr-tools .mr-q { grid-column: 1 / -1; } }
@media (max-width: 420px) { .mr-tools { grid-template-columns: 1fr; } }
.mr-check { display: inline-flex; gap: 10px; align-items: center; min-height: 44px; font-size: var(--text-sm); color: var(--ink-soft); cursor: pointer; }
.mr-check input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent-strong); flex: 0 0 auto; }
.mr-status { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; min-height: 44px; }
.mr-note { font-size: var(--text-xs); color: var(--ink-soft); border-left: 3px solid var(--accent-strong); padding: 4px 0 4px 12px; margin: 0; font-variant-numeric: tabular-nums; }
.mr-note:empty { display: none; }
.mr-stop { min-height: 36px; padding: 4px 14px; }

.mr-scroll { overflow-x: auto; }
.mr-list { border-collapse: collapse; width: 100%; font-size: var(--text-xs); table-layout: auto; }
.mr-list th, .mr-list td { text-align: left; padding: 2px 10px 2px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.mr-list thead th { font-weight: 600; color: var(--ink-soft); white-space: nowrap; padding: 0 10px 0 0; }
.mr-sort { font: inherit; font-weight: 600; color: inherit; background: none; border: 0; padding: 10px 0; min-height: 40px; cursor: pointer; display: inline-flex; gap: 4px; align-items: center; }
.mr-sort:hover { color: var(--ink); }
.mr-sort svg { width: 10px; height: 10px; opacity: 0; }
th[aria-sort] .mr-sort svg { opacity: 1; }
th[aria-sort="ascending"] .mr-sort svg { transform: rotate(180deg); }
.mr-date, .mr-n { white-space: nowrap; font-variant-numeric: tabular-nums; }
td.mr-date, td.mr-n { padding-top: 10px !important; }
.mr-n { text-align: right; color: var(--ink-soft); }
th.mr-n { text-align: right; }
.mr-from { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-top: 10px !important; }
.mr-open { font: inherit; color: var(--accent-strong); background: none; border: 0; padding: 8px 0; min-height: 40px; text-align: left; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; word-break: break-word; }
.mr-row.is-unread .mr-open, .mr-row.is-unread .mr-from { font-weight: 600; }
.mr-row.is-shown { background: var(--paper-inset); }
.mr-tags { display: inline-flex; flex-wrap: wrap; gap: 4px; vertical-align: middle; margin-left: 4px; }
.mr-kind { font: 500 var(--text-2xs) var(--font-mono); color: var(--ink-soft); border: 1px solid var(--rule); border-radius: var(--radius-sm); padding: 0 6px; white-space: nowrap; }
.mr-kind.is-flag { color: var(--danger); border-color: var(--danger); }
.mr-where { display: block; font-size: var(--text-2xs); color: var(--ink-faint); margin: -6px 0 6px; word-break: break-word; }
.mr-hit { display: block; font-size: var(--text-2xs); color: var(--ink-soft); margin: -4px 0 8px; word-break: break-word; }
.mr-hit mark { background: var(--accent-soft); color: var(--ink); padding: 0 1px; border-radius: var(--radius-sm); }
.mr-empty { padding: 18px 0 6px; color: var(--ink-soft); font-size: var(--text-sm); }
.mr-pages { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; margin: 12px 0 0; }
.mr-pages span { color: var(--ink-soft); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.mr-acts { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 0; padding: 14px 0 0; border-top: 1px solid var(--rule); }
.mr-acts:empty { display: none; }

/* An email, or another item, open. */
.mr-conv { list-style: none; margin: 0 0 14px; padding: 0; border: 1px solid var(--rule); border-radius: var(--radius-md); max-height: 260px; overflow: auto; }
.mr-conv li { border-bottom: 1px solid var(--rule); }
.mr-conv li:last-child { border-bottom: 0; }
.mr-conv button { display: grid; grid-template-columns: 9.5em minmax(0, 12em) minmax(0, 1fr); gap: 10px; width: 100%; min-height: 40px; padding: 8px 12px; font: inherit; font-size: var(--text-xs); text-align: left; background: none; border: 0; color: var(--ink); cursor: pointer; font-variant-numeric: tabular-nums; }
.mr-conv button:hover { background: var(--paper-inset); }
.mr-conv button[aria-current="true"] { background: var(--paper-inset); box-shadow: inset 3px 0 0 var(--accent-strong); font-weight: 600; }
.mr-conv span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 620px) { .mr-conv button { grid-template-columns: 1fr; gap: 0; } }

.mr-nav { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 14px; }
.mr-crumb { font-size: var(--text-xs); color: var(--ink-soft); margin: 0 0 10px; }
.mr-crumb button { font: inherit; color: var(--accent-strong); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; min-height: 0; }
.mr-subject { font-size: var(--text-lg); margin: 0 0 10px; line-height: 1.35; word-break: break-word; }
.mr-table { border-collapse: collapse; width: 100%; font-size: var(--text-xs); }
.mr-table th, .mr-table td { text-align: left; padding: 6px 10px 6px 0; border-bottom: 1px solid var(--rule); vertical-align: top; word-break: break-word; }
.mr-table tbody th { width: 1%; white-space: nowrap; font-weight: 600; color: var(--ink-soft); }
.mr-review { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
.mr-review li { font-size: var(--text-xs); color: var(--ink-soft); border-left: 3px solid var(--rule-strong); padding: 2px 0 2px 12px; }
.mr-review li.is-warn { border-left-color: var(--warn); color: var(--ink); }
.mr-review li.is-bad { border-left-color: var(--danger); color: var(--ink); }
.mr-msg-acts { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0; }
.mr-headers { margin: 0 0 14px; }
.mr-headers summary { cursor: pointer; font-size: var(--text-xs); color: var(--ink-soft); min-height: 32px; display: inline-flex; align-items: center; }
.mr-headers pre { white-space: pre-wrap; word-break: break-all; font: var(--text-2xs)/1.55 var(--font-mono); background: var(--paper-inset); border: 1px solid var(--rule); border-radius: var(--radius-md); padding: 12px; max-height: 320px; overflow: auto; margin: 8px 0 0; }
/* An email is written to be read on white, whatever colour the page is. */
.mr-frame { width: 100%; height: 640px; border: 1px solid var(--rule); border-radius: var(--radius-md); background: white; display: block; }
.mr-text { white-space: pre-wrap; word-break: break-word; font: var(--text-sm)/1.55 var(--font-mono); background: var(--paper-inset); border: 1px solid var(--rule); border-radius: var(--radius-md); padding: 14px; max-height: 640px; overflow: auto; margin: 0; }
.mr-files-head { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; justify-content: space-between; margin: 22px 0 6px; }
.mr-files-head h2 { margin: 0; }
.mr-files { list-style: none; padding: 0; margin: 0; }
.mr-files li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 9px 0; border-bottom: 1px solid var(--rule); }
.mr-fwhat { flex: 1 1 50%; min-width: 0; }
.mr-fn { display: block; font-weight: 600; font-size: var(--text-sm); word-break: break-all; }
.mr-fs { display: block; font-size: var(--text-2xs); color: var(--ink-soft); word-break: break-all; font-variant-numeric: tabular-nums; }
.mr-warn { color: var(--danger); font-weight: 600; }
.mr-mini { font: 600 var(--text-2xs) var(--font-mono); min-height: 44px; padding: 6px 12px; border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--paper-raised); color: var(--ink-soft); cursor: pointer; }
.mr-mini:hover { border-color: var(--accent-strong); color: var(--ink); }
.mr-mini:disabled { opacity: .45; cursor: not-allowed; }
.mr-preview { flex: 1 1 100%; margin: 4px 0 0; }
.mr-preview img { display: block; max-width: 100%; max-height: 480px; border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--paper-inset); }
.mr-preview pre { white-space: pre-wrap; word-break: break-word; font: var(--text-2xs)/1.55 var(--font-mono); background: var(--paper-inset); border: 1px solid var(--rule); border-radius: var(--radius-sm); padding: 10px; max-height: 320px; overflow: auto; margin: 0; }

@media (max-width: 620px) {
  .mr-frame { height: 480px; }
  .mr-list thead { display: none; }
  .mr-list tr { display: grid; grid-template-columns: 1fr auto; column-gap: 10px; border-bottom: 1px solid var(--rule); padding: 6px 0; }
  .mr-list td { display: block; border: 0; padding: 0 !important; }
  .mr-list td:nth-child(3) { grid-column: 1 / -1; grid-row: 1; }
  .mr-list td:nth-child(1) { grid-column: 1; grid-row: 2; font-size: var(--text-2xs); color: var(--ink-soft); }
  .mr-list td:nth-child(4) { grid-column: 2; grid-row: 2; font-size: var(--text-2xs); }
  .mr-list td:nth-child(2) { grid-column: 1 / -1; grid-row: 3; }
  .mr-from { max-width: none; white-space: normal; word-break: break-word; font-size: var(--text-2xs); color: var(--ink-soft); }
  .mr-nav > button, .mr-msg-acts > button { flex: 1 1 auto; }
}

/* Printing is done from a frame of its own (cabinet.js, print), which is
   sealed like the one the email is read in; it is on the page only while
   the browser prints it. */
.mr-printframe { position: fixed; right: 0; bottom: 0; width: 0; height: 0; border: 0; }

/* Said to a screen reader, and not shown: an unread email is bold. */
.mr-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }