/* Simple, readable archive style */
:root { color-scheme: light dark; }
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
  line-height: 1.5;
}
a { color: inherit; }
.container { max-width: 1100px; margin: 0 auto; padding: 16px; }
.topbar { border-bottom: 1px solid rgba(128,128,128,.35); background: rgba(128,128,128,.08); }
h1 { margin: 0 0 8px; font-size: 20px; }
.meta { margin: 0; opacity: .75; font-size: 13px; }
.hint { margin: 6px 0 0; opacity: .75; font-size: 13px; }

.nav { margin-bottom: 8px; display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.nav .sep { opacity:.6; }
.nav .dim { opacity:.55; }

.searchbox { margin: 12px 0 0; }
.searchbox input { width: 100%; padding: 10px 12px; font-size: 14px; }

table.list { width: 100%; border-collapse: collapse; }
table.list th, table.list td {
  padding: 10px 8px;
  border-top: 1px solid rgba(128,128,128,.25);
  vertical-align: top;
}
table.list thead th { text-align: left; font-size: 13px; opacity: .8; border-top: none; }

.col-date { width: 190px; white-space: nowrap; }
.col-from { width: 260px; }
.col-count { width: 120px; white-space: nowrap; }

.row-link { display: block; text-decoration: none; }
.row-link:hover { text-decoration: underline; }

.msg-subject { font-size: 18px; margin: 0 0 10px; }
.msg-meta { font-size: 14px; }
.msg-meta .k { opacity: .75; display: inline-block; width: 52px; }

.message { border: 1px solid rgba(128,128,128,.25); border-radius: 8px; padding: 12px; background: rgba(128,128,128,.06); }
pre.body {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Noto Sans Mono", monospace;
  font-size: 13px;
}
.foot { opacity: .75; }