:root {
  --ink: #0e1f25;
  --muted: rgba(14, 31, 37, 0.6);
  --line: rgba(14, 31, 37, 0.09);
  --brand: #064e3b;
  --mark: #0f5f5b;
  --up: #23a899;
  --degraded: #e0a526;
  --down: #d64545;
  --partial: #f08a4b;
  --none: #e3e7e5;
  color-scheme: light;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  margin: 0;
  background: #f6f8f7;
  color: var(--ink);
  font-family: "IBM Plex Sans", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  font-size: 15px;
  line-height: 1.45;
}

a {
  color: var(--mark);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.masthead,
main,
footer {
  width: min(56rem, 100% - 2rem);
  margin: 0 auto;
}

.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 0;
}

.brand,
.brand a {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--ink);
  font-size: 1.15rem;
  font-weight: 700;
  text-decoration: none;
}

.brand img {
  border-radius: 6px;
}

.brand em {
  border-left: 1px solid var(--line);
  padding-left: 0.6rem;
  color: var(--muted);
  font-style: normal;
  font-weight: 500;
}

.support {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  padding: 0.4rem 0.95rem;
  color: var(--ink);
  font-size: 0.875rem;
  text-decoration: none;
}

.support:hover {
  border-color: rgba(14, 31, 37, 0.2);
}

main {
  display: grid;
  gap: 1rem;
}

h2 {
  margin: 0;
  font-size: 0.95rem;
}

h3 {
  margin: 0;
  font-size: 0.95rem;
}

.muted {
  color: var(--muted);
}

.banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  padding: 1rem 1.25rem;
}

.banner strong {
  font-size: 1.15rem;
}

.banner small {
  margin-left: auto;
  color: var(--muted);
  font-size: 0.82rem;
}

.banner .dot {
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  background: var(--none);
}

.banner-up {
  border-color: rgba(35, 168, 153, 0.35);
  background: rgba(35, 168, 153, 0.08);
}
.banner-up .dot {
  background: var(--up);
  box-shadow: 0 0 0 4px rgba(35, 168, 153, 0.18);
}
.banner-degraded {
  border-color: rgba(224, 165, 38, 0.4);
  background: rgba(224, 165, 38, 0.1);
}
.banner-degraded .dot {
  background: var(--degraded);
}
.banner-down {
  border-color: rgba(214, 69, 69, 0.4);
  background: rgba(214, 69, 69, 0.08);
}
.banner-down .dot {
  background: var(--down);
}

.panel {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}

.panel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  border-bottom: 1px solid var(--line);
  padding: 0.8rem 1.25rem;
}

.monitor {
  padding: 0.9rem 1.25rem 0.75rem;
}

.monitor + .monitor {
  border-top: 1px solid var(--line);
}

.monitor-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.monitor-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.6rem;
  min-width: 0;
}

.monitor-title p {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
}

.pill {
  flex-shrink: 0;
  border-radius: 999px;
  background: var(--none);
  padding: 0.15rem 0.65rem;
  font-size: 0.78rem;
  font-weight: 600;
}
.pill-up {
  background: rgba(35, 168, 153, 0.14);
  color: #0f6b60;
}
.pill-degraded {
  background: rgba(224, 165, 38, 0.18);
  color: #8a5d00;
}
.pill-down {
  background: rgba(214, 69, 69, 0.14);
  color: #a12a2a;
}

.bars {
  display: grid;
  grid-template-columns: repeat(90, 1fr);
  gap: 2px;
  height: 1.9rem;
  margin-top: 0.6rem;
}

.bar {
  display: inline-block;
  border-radius: 2px;
  background: var(--none);
}
.bars .bar {
  height: 100%;
}
.bars .bar:hover {
  opacity: 0.7;
}
.bar.up {
  background: var(--up);
}
.bar.degraded {
  background: var(--degraded);
}
.bar.partial {
  background: var(--partial);
}
.bar.down {
  background: var(--down);
}

.monitor-foot {
  display: flex;
  justify-content: space-between;
  margin-top: 0.3rem;
  color: var(--muted);
  font-size: 0.75rem;
}

.monitor-foot strong {
  color: var(--ink);
  font-weight: 600;
}

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.9rem;
  margin: 0;
  color: var(--muted);
  font-size: 0.75rem;
}
.legend span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.legend .bar {
  width: 0.5rem;
  height: 0.75rem;
}

.incidents {
  margin: 0;
  padding: 0;
  list-style: none;
}

.incidents > li {
  padding: 0.75rem 1.25rem;
  font-size: 0.9rem;
}

.incidents > li + li {
  border-top: 1px solid var(--line);
}

.incident-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.incident p {
  margin: 0.2rem 0 0;
  font-size: 0.85rem;
}

.incident-update {
  border-left: 2px solid var(--line);
  padding-left: 0.65rem;
}

.incidents-more {
  color: var(--muted);
  font-size: 0.82rem;
}

footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin-top: auto;
  padding: 1.5rem 0;
  color: var(--muted);
  font-size: 0.8rem;
}

footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
}

footer a {
  color: var(--muted);
  text-decoration: none;
}

footer a:hover {
  color: var(--ink);
}

.range-short {
  display: none;
}

@media (max-width: 40rem) {
  .banner small {
    flex-basis: 100%;
    margin-left: 1.5rem;
  }
  .brand em {
    display: none;
  }
  .monitor-title p {
    display: none;
  }
  .range-long {
    display: none;
  }
  .range-short {
    display: inline;
  }
  .bars {
    grid-template-columns: repeat(45, 1fr);
  }
  .bars .bar:nth-child(-n + 45) {
    display: none;
  }
}