* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #f2f3f4;
  font: 12.5pt sans-serif;
  padding: 5em;
  margin-top: auto;
}

a { text-decoration: none; }
a:hover { text-decoration: underline; }

p { margin-bottom: 1em; }
button, input, textarea { font: inherit; }

.app {
  display: grid;
  grid-template: "nav nav" auto "list reader" 1fr / 24em minmax(0, 1fr);
  gap: 0 3em;
}
nav { grid-area: nav; margin-bottom: 2em; }
nav a { margin-right: 1.5em; }
nav a.on { font-weight: bold; }
nav form { display: inline; }
.linkbtn { background: none; border: 0; color: #0000ee; cursor: pointer; }
.linkbtn:hover { text-decoration: underline; }

.list { grid-area: list; min-width: 0; }
.reader { grid-area: reader; min-width: 0; }

.row { display: block; color: #000; padding: .35em 0; }
.row .top { display: flex; justify-content: space-between; gap: .5em; }
.row .from, .row .subj { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .date { white-space: nowrap; }
.row.unread .from, .row.unread .subj { font-weight: bold; }

.subject { font-weight: bold; margin-bottom: .5em; }
.hdr { margin-bottom: 1em; }
.err, .note { color: #ff0000; font-weight: bold; }
.ok { color: #008000; font-weight: bold; }
iframe.mail { width: 100%; border: 0; display: block; min-height: 120px; background: #fff; margin-bottom: 1em; }

.cform input, .cform textarea, .login input { display: block; width: 100%; max-width: 42em; margin: .25em 0 1em; }
.cform textarea { height: 20em; }

.back { display: none; }

@media screen and (max-width: 768px) {
  body { font-size: 10pt; padding: 2em; }
  .app { display: block; }
  .list { margin-bottom: 1em; }
  .app.reading .list, .app.reading nav { display: none; }
  .back { display: block; }
}