html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }
body {
  margin: 0 auto;
  max-width: 960px;
  padding: 1.25rem 1.25rem 3rem;
  font: 16px/1.45 system-ui, -apple-system, Segoe UI, sans-serif;
  color: #122018;
  background: #f3f6f4;
}
h1 { margin: 0 0 0.4rem; font-size: 1.7rem; letter-spacing: -0.02em; }
h2 { margin: 1.6rem 0 0.6rem; font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; color: #5a6b60; }
.overall {
  display: inline-block;
  margin: 0 0 0.4rem;
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
  font-weight: 650;
}
.overall.up { background: #d7f4de; color: #0b5c28; }
.overall.down { background: #f8d4d4; color: #8a1515; }
.overall.unknown { background: #ececec; color: #444; }
.meta { color: #4a5a50; font-size: 0.9rem; margin: 0 0 1rem; }
.windows { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 0.4rem; }
.window {
  display: inline-block;
  padding: 0.28rem 0.7rem;
  border: 1px solid #c5d0c8;
  border-radius: 999px;
  background: #fff;
  color: #1c2b22;
  text-decoration: none;
  font-size: 0.88rem;
}
.window.active { background: #122018; color: #fff; border-color: #122018; }
table { width: 100%; border-collapse: collapse; background: #fff; }
th, td { border: 1px solid #d5ddd8; padding: 0.5rem 0.55rem; text-align: left; vertical-align: top; }
th { background: #eef3f0; font-size: 0.82rem; font-weight: 650; }
td.up, span.up { color: #0b5c28; font-weight: 650; }
td.down, span.down { color: #8a1515; font-weight: 650; }
td.stale, span.stale, .checker.stale { color: #8a6a12; font-weight: 650; }
td.unknown { color: #667066; }
.incidents .meta { margin: 0.15rem 0 0; }
a { color: #0b5c28; }
.incidents { padding-left: 1.2rem; }
.incidents li { margin: 0.25rem 0; }
@media (max-width: 640px) {
  table { font-size: 0.9rem; }
  th:nth-child(n+4), td:nth-child(n+4) { display: none; }
}
