:root {
  --ink: #1d1d1b;
  --muted: #6b6b66;
  --rule: #d9d6cf;
  --paper: #fbfaf7;
  --accent: #8a2f1f;
  --max: 42rem;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 17px/1.55 Georgia, "Times New Roman", serif;
}
.masthead {
  display: flex; justify-content: space-between; align-items: baseline;
  max-width: var(--max); margin: 0 auto; padding: 1.1rem 1rem 0.6rem;
  border-bottom: 1px solid var(--ink);
}
.wordmark {
  color: var(--ink); text-decoration: none; font-weight: 700;
  letter-spacing: 0.02em; font-size: 1.15rem;
}
.page { max-width: var(--max); margin: 0 auto; padding: 1.5rem 1rem 3rem; }
.narrow { max-width: 30rem; }
h1 { font-size: 1.6rem; line-height: 1.2; margin: 0 0 0.75rem; font-weight: 700; }
p { margin: 0 0 1rem; }
.dateline, .status, .colophon { color: var(--muted); font-size: 0.9rem; }
.colophon { max-width: var(--max); margin: 0 auto; padding: 0 1rem 1.5rem; }
label { display: block; font-size: 0.9rem; color: var(--muted); margin-bottom: 0.3rem; }
input[type="password"] {
  width: 100%; font: inherit; padding: 0.6rem 0.7rem; margin-bottom: 1rem;
  border: 1px solid var(--rule); border-radius: 3px; background: #fff; color: var(--ink);
}
button {
  font: inherit; padding: 0.6rem 1.1rem; border: 1px solid var(--ink); border-radius: 3px;
  background: var(--ink); color: var(--paper); cursor: pointer;
}
button.link {
  background: none; border: none; color: var(--muted); padding: 0; font-size: 0.9rem;
  text-decoration: underline;
}
.inline { display: inline; }
.error { color: var(--accent); }

/* navigation */
.topnav { display: flex; gap: 0.9rem; align-items: baseline; font-size: 0.9rem; flex-wrap: wrap; justify-content: flex-end; }
.topnav a { color: var(--muted); text-decoration: none; }
.topnav a.current { color: var(--ink); border-bottom: 2px solid var(--ink); }

/* items feed */
.filter { margin: 0 0 1.25rem; display: flex; gap: 0.5rem; align-items: baseline; }
.filter label { margin: 0; }
select, input:not([type="checkbox"]), textarea { font: inherit; font-size: 0.95rem; padding: 0.35rem 0.5rem; border: 1px solid var(--rule); border-radius: 3px; background: #fff; color: var(--ink); max-width: 100%; }
.items { list-style: none; padding: 0; margin: 0; }
.items li { padding: 0.8rem 0; border-bottom: 1px solid var(--rule); }
.items .meta { font-size: 0.8rem; color: var(--muted); margin-bottom: 0.15rem; }
.items .source { color: var(--ink); font-weight: 700; }
.items .title { color: var(--ink); text-decoration: none; font-weight: 700; line-height: 1.3; }
.items .title:hover { text-decoration: underline; }
.items .snippet { font-size: 0.9rem; color: var(--muted); margin-top: 0.2rem; }
.pager { display: flex; gap: 1.5rem; margin-top: 1.25rem; }

/* sources */
table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
th, td { text-align: left; padding: 0.5rem 0.4rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
th { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); font-weight: 400; }
td small { color: var(--muted); }
.badge { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; padding: 0.1rem 0.4rem; border-radius: 3px; border: 1px solid var(--rule); }
.badge.ok { color: #2d5a27; border-color: #2d5a27; }
.badge.failing { color: var(--accent); border-color: var(--accent); }
.badge.retrying, .badge.quiet { color: #8a6d1f; border-color: #8a6d1f; }
.badge.off, .badge.waiting { color: var(--muted); }
.ok { color: #2d5a27; }
.stack label { display: block; margin-bottom: 0.75rem; }
.stack input:not([type="checkbox"]), .stack textarea, .stack select { display: block; width: 100%; margin-top: 0.2rem; }
.stack .row { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.stack .row label { flex: 1 1 8rem; }
.stack .check { display: flex; gap: 0.5rem; align-items: center; color: var(--ink); }
.stack .check input { width: auto; }
button.secondary { background: none; color: var(--ink); margin-top: 0.75rem; }
.addbox { margin-top: 1.5rem; }
.addbox summary { cursor: pointer; color: var(--muted); }
pre { font-size: 0.8rem; overflow-x: auto; background: #fff; padding: 0.6rem; border: 1px solid var(--rule); }
@media (max-width: 600px) { th:nth-child(5), td:nth-child(5) { display: none; } }

h2 { font-size: 1.15rem; margin: 1.75rem 0 0.25rem; }
.summary { font-size: 1.05rem; }
.masthead { flex-wrap: wrap; gap: 0.4rem; }