:root {
  color-scheme: light dark;

  --ink: #111;
  --ink-2: #333;
  --text-2: #555;
  --text-3: #666;
  --muted: #888;
  --muted-2: #999;
  --faint-2: #aaa;
  --faint: #bbb;
  --line: #ddd;
  --line-2: #eee;
  --bg: #fff;
  --panel: #fafafa;
  --err: #c00;
  --err-text: #900;
  --err-bg: #fff5f5;
  --warn: #e60;

  --track-bg: #e5e5e5;
  --up: #1a7f37;
  --up-bg: #f2f9f4;
  --down: #c00;
  --down-bg: #fff5f5;
  --none: #d5d5d5;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #ededed;
    --ink-2: #cfcfcf;
    --text-2: #b4b4b4;
    --text-3: #a0a0a0;
    --muted: #8c8c8c;
    --muted-2: #7e7e7e;
    --faint-2: #6f6f6f;
    --faint: #5e5e5e;
    --line: #3a3a3a;
    --line-2: #262626;
    --bg: #121212;
    --panel: #1b1b1b;
    --err: #ff6b6b;
    --err-text: #ff8f8f;
    --err-bg: #2a1414;
    --warn: #ff9f43;

    --track-bg: #333;
    --up: #3fb950;
    --up-bg: #122016;
    --down: #ff6b6b;
    --down-bg: #2a1414;
    --none: #3a3a3a;
  }
}

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

html { font-size: 112.5%; }

body {
  font-family: ui-monospace, "SF Mono", "Fira Code", "Menlo", monospace;
  background: var(--bg);
  color: var(--ink);
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 3rem 1rem;
}

.wrap {
  width: 100%;
  max-width: 1025px;
}

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2.5rem;
}
.site-header > .brand {
  display: flex;
  align-items: center;
  gap: .75rem;
}
.logo {
  display: inline-flex;
  align-items: center;
  color: var(--ink);
  text-decoration: none;
  line-height: 0;
}
a.logo:hover { opacity: .75; }
.logo-mark {
  display: block;
  height: 26px;
}
.tagline {
  font-size: .72rem;
  color: var(--faint-2);
}
@media (max-width: 520px) {
  .tagline { display: none; }
}
.site-nav { display: flex; gap: 1.25rem; }
.site-nav a {
  font-size: .72rem;
  color: var(--muted);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.site-nav a:hover { color: var(--ink); }

.verdict {
  font-size: clamp(1rem, 2.2vw, 1.15rem);
  line-height: 1.35;
  letter-spacing: -.01em;
  font-weight: 400;
  color: var(--up);
  max-width: 30ch;
}
.verdict--warn { color: var(--warn); }
.verdict--mixed { color: var(--err); }
.verdict--down { color: var(--err-text); }
.verdict--unknown { color: var(--muted); }

.meta {
  margin-top: .85rem;
  font-size: .74rem;
  line-height: 1.8;
  color: var(--muted);
  max-width: 52ch;
}

.stale {
  margin-top: 1.4rem;
  border: 1px solid var(--warn);
  padding: .7rem 1rem;
  font-size: .76rem;
  line-height: 1.5;
  color: var(--warn);
}

.card {
  margin: 3.2rem 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
}
.sim {
  width: 100%;
  max-width: 460px;
  height: auto;
  display: block;
}
.sim .case {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2;
}
.sim text {
  font-family: inherit;
  font-size: 13px;
  letter-spacing: 1.3px;
  fill: var(--muted);
  text-transform: uppercase;
}
.sim text.col { text-anchor: middle; }
.sim text.row { text-anchor: end; }

.pad--up { fill: var(--up); }
.pad--warn { fill: var(--warn); }
.pad--down { fill: var(--err); }
.pad--unknown { fill: var(--track-bg); }
.pad--none { fill: url(#unserved); }
.unserved-bg { fill: var(--bg); }
.unserved-line { stroke: var(--line); stroke-width: 3; }

.key {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem 1.4rem;
  font-size: .64rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--faint-2);
}
.key-item {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
}
.sw {
  width: .62rem;
  height: .62rem;
  border-radius: 2px;
  display: block;
  flex: none;
}
.sw--up { background: var(--up); }
.sw--warn { background: var(--warn); }
.sw--down { background: var(--err); }
.sw--none { background: var(--line-2); border: 1px solid var(--line); }

.figures {
  margin-top: 3.2rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line-2);
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.fig-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .35rem 1.5rem;
  font-size: .7rem;
  color: var(--faint-2);
}
.fig-name {
  min-width: 9rem;
  color: var(--text-2);
  letter-spacing: .02em;
}
.fig {
  min-width: 10.5rem;
  font-variant-numeric: tabular-nums;
}
.fig b {
  font-weight: 400;
  color: var(--ink-2);
}
.fig-note {
  margin-top: .7rem;
  font-size: .66rem;
  color: var(--faint);
  letter-spacing: .03em;
}

.events {
  margin-top: 1.6rem;
  list-style: none;
  font-size: .72rem;
  line-height: 1.9;
  color: var(--muted);
}
.events li::before {
  content: "· ";
  color: var(--err);
}

@media (max-width: 620px) {
  .card { margin-top: 2.4rem; }
  .figures { margin-top: 2.4rem; }
  .fig-line { gap: .2rem 1.1rem; }
  .fig { min-width: 0; }
  .fig-name { min-width: 100%; color: var(--ink-2); }
}

.site-footer {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .5rem 1rem;
  font-size: .7rem;
  color: var(--faint-2);
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line-2);
  letter-spacing: .04em;
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
}
.footer-links a {
  color: var(--muted);
  text-decoration: none;
}
.footer-links a:hover { color: var(--ink); }
.footer-links a + a::before {
  content: "·";
  color: var(--line);
  margin: 0 .55rem;
}
.footer-onion,
.footer-i2p {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
}
.footer-onion svg,
.footer-i2p svg {
  width: .9rem;
  height: .9rem;
  flex-shrink: 0;
}
.footer-onion svg { fill: currentColor; }
.footer-i2p svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.footer-meta { color: var(--faint); }

@media (max-width: 760px) {
  body { padding: 2rem 1rem; }
  .svc, .events { padding: 1rem 1.1rem 1.2rem; }
  .row {
    grid-template-columns: auto 1fr;
    gap: .45rem .75rem;
    padding: .7rem 0;
  }
  .row-state { justify-self: end; }
  .bar { grid-column: 1 / -1; }
  .row-meta {
    grid-column: 1 / -1;
    text-align: left;
    font-size: .68rem;
  }
}

@media (max-width: 560px) {
  .site-footer {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1rem;
    font-size: .78rem;
  }
  .footer-links {
    justify-content: center;
    column-gap: 1.25rem;
    row-gap: .6rem;
  }
  .footer-links a { padding: .15rem 0; }
  .footer-links a + a::before { content: none; }
}