.header-facts span,
.path-list span,
.metrics span,
.service-list span,
.host-metrics span,
.edge-metrics span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 650;
}

.header-facts strong,
.metrics strong,
.host-metrics strong,
.edge-metrics strong {
  font-family: var(--mono);
  font-size: clamp(20px, 2.7vw, 30px);
  font-weight: 650;
  line-height: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

.header-facts strong {
  font-size: clamp(15px, 1.4vw, 18px);
}

[data-status="ok"],
.overall.ok,
.service-list article.ok span {
  color: var(--ok);
}

[data-status="down"],
.overall.down,
.service-list article.down span {
  color: var(--bad);
}

[data-status="degraded"],
[data-status="pending"],
.overall.degraded,
.overall.pending,
.service-list article.degraded span,
.service-list article.pending span {
  color: var(--warn);
}

.overall {
  font-family: var(--mono);
  font-size: 12px;
  min-width: 0;
  text-transform: uppercase;
  white-space: nowrap;
}

[aria-label="Edge operation evidence"] > .flex {
  align-items: start;
  display: grid;
  gap: 8px;
}

[aria-label="Edge operation evidence"] .overall {
  justify-self: start;
}

.path-list {
  border-top: 1px solid var(--line);
  display: grid;
}

.path-list article {
  align-items: start;
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 16px;
  grid-template-columns: 42px minmax(0, 1fr);
  padding: 16px 0;
}

.path-list span {
  font-family: var(--mono);
  padding-top: 3px;
}

.path-list strong {
  display: block;
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 620;
  line-height: 1.16;
  overflow-wrap: anywhere;
}

.path-list p {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.4;
  margin-top: 5px;
}

.network-grid {
  display: grid;
  gap: 14px;
}

@media (min-width: 768px) {
  .network-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.network-grid article {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 12px;
  padding-top: 16px;
}

.network-grid span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 650;
}

.network-grid ul {
  display: grid;
  gap: 8px;
}

.network-grid li {
  font-size: 15px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.network-note {
  border-left: 3px solid var(--fg);
  color: var(--muted);
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.4;
  padding-left: 14px;
}

.edge-metrics,
.host-metrics {
  display: grid;
  gap: 12px;
}

.edge-metrics article,
.host-metrics article {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 10px;
  padding-top: 15px;
}

.edge-metrics article {
  align-items: start;
  grid-template-columns: 1fr;
}

.host-metrics article > div {
  align-items: end;
  display: flex;
  gap: 14px;
  justify-content: space-between;
  min-width: 0;
}

.host-metrics strong,
.edge-metrics strong {
  min-width: 0;
  text-align: right;
}

.edge-metrics strong {
  font-size: clamp(18px, 2.2vw, 26px);
  text-align: left;
}

.service-list {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 0;
  grid-template-columns: 1fr;
}

.service-list article {
  align-items: start;
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) auto;
  min-width: 0;
  padding: 13px 0;
}

.service-list strong {
  display: block;
  font-size: 15px;
  font-weight: 620;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.service-name {
  display: block;
  margin-bottom: 4px;
}

.service-meta {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.35;
  min-width: max-content;
  text-align: right;
}

.service-list article.ok .service-meta {
  color: var(--ok);
}

.service-list article.down .service-meta {
  color: var(--bad);
}

.service-list article.degraded .service-meta,
.service-list article.pending .service-meta {
  color: var(--warn);
}

.checks {
  display: none;
}

.updated {
  align-self: end;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 12px;
}

.meter {
  background: var(--line);
  border-radius: 999px;
  display: block;
  height: 7px;
  overflow: hidden;
  width: 100%;
}

.meter span {
  background: var(--fg);
  display: block;
  height: 100%;
  transition: width 0.4s ease;
  width: 0;
}

@media (max-width: 1023px) {
  .path-list article {
    grid-template-columns: 36px minmax(0, 1fr);
  }
}

@media (max-width: 767px) {
  .service-list article {
    grid-template-columns: 1fr;
  }

  .service-meta {
    min-width: 0;
    text-align: left;
  }
}