body {
  color: #000;
  background: #fff;
  margin: 8px;
  font-family: initial;
  font-size: 16px;
  line-height: 1.35;
}

main { max-width: none; }
h1, h2, h3, p { margin: 0.7em 0; }
h1 { letter-spacing: -0.03em; }
h2 { border-top: 2px solid #000; padding-top: 6px; margin-top: 22px; }
h3 { margin-top: 14px; }

.controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin: 8px 0;
}
.controls label { display: inline-flex; align-items: center; gap: 5px; }
input, select, button {
  font: inherit;
  color: #000;
  background: #fff;
  border: 1px solid #555;
  border-radius: 0;
  padding: 3px 5px;
}
input { min-width: 320px; }
button { cursor: pointer; }
button:hover, button:focus, select:focus, input:focus { outline: 2px solid #000; outline-offset: 1px; }

.toc { display: flex; flex-wrap: wrap; gap: 6px 10px; margin: 8px 0 14px; }
a, .toc button.linkish {
  color: #111;
  text-underline-offset: 2px;
  text-decoration: underline;
  text-decoration-thickness: 1px;
}
a:visited { color: #333; }
a:hover, a:focus, .toc button.linkish:hover, .toc button.linkish:focus { color: #000; background: #eee; }
button.linkish { border: 0; padding: 0; background: none; }

.small { font-size: 0.92em; }
.dim { color: #333; }
.error { color: #900; font-weight: 700; }
.flag-info { background: #f5f5f5; }
.flag-watch { background: #fff7d6; }
.flag-critical { background: #ffe5e5; }

.table-wrap {
  -webkit-overflow-scrolling: touch;
  border: 1px solid #000;
  margin: 8px 0 18px;
  overflow-x: auto;
}
table {
  border-collapse: collapse;
  background: #fff;
  width: 100%;
}
th, td {
  text-align: left;
  vertical-align: top;
  white-space: nowrap;
  border: 1px solid #000;
  padding: 4px 6px;
}
td.wrap, th.wrap { white-space: normal; min-width: 260px; }
.table-wrap > table { border: 0; }
th {
  z-index: 1;
  background: #f5f5f5;
  font-weight: 700;
  position: sticky;
  top: 0;
}
button.sort {
  text-align: left;
  cursor: pointer;
  background: transparent;
  border: 0;
  width: 100%;
  padding: 0;
  font-weight: 700;
}
.num { text-align: right; font-variant-numeric: tabular-nums; }
.hidden { display: none; }

@media (width <= 760px) {
  body { margin: 6px; font-size: 14px; }
  h1 { font-size: 1.45rem; }
  h2 { margin-top: 1.1em; font-size: 1.15rem; }
  h3 { font-size: 1rem; }
  .controls { display: block; }
  .controls label, .controls span { display: block; margin: 6px 0; }
  input, select, button { box-sizing: border-box; max-width: 100%; }
  input { width: 100%; min-width: 0; margin-top: 3px; }
  .table-wrap { width: calc(100vw - 12px); margin-left: -1px; }
  table { min-width: 760px; }
  th, td { padding: 4px 5px; font-size: 13px; }
  td:nth-child(1), th:nth-child(1) {
    z-index: 2;
    background: #fff;
    position: sticky;
    left: 0;
    box-shadow: 1px 0 #000;
  }
  th:nth-child(1) { z-index: 3; background: #f5f5f5; }
}

@media (width <= 420px) {
  body { font-size: 13px; }
  table { min-width: 680px; }
  th, td { padding: 3px 4px; font-size: 12px; }
}