.status-page {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--s-10) var(--s-4) var(--s-16);
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
}

.status-head {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.status-brand {
  color: var(--fg-subtle);
  text-decoration: none;
}

.status-overall {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-6);
}

.status-overall p {
  margin: 0;
}

.status-notice {
  margin: 0;
}

.status-incident {
  padding: var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.status-incident p {
  margin: 0;
}

.status-feed {
  list-style: none;
  margin: var(--s-4) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.status-feed__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-3);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
}

.status-feed__body {
  flex-basis: 100%;
  margin: 0;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.status-components {
  padding: 0;
}

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

.status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-6);
  border-top: 1px solid var(--line);
}

.status-row:first-child {
  border-top: 0;
}

.status-row__name {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  min-width: 0;
}

.status-row__state {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-shrink: 0;
}

.status-row__text {
  color: var(--fg);
}

.status-dot {
  width: var(--s-3);
  height: var(--s-3);
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--fg-subtle);
}

[data-tone='operational'] .status-dot { background: var(--ok); }
[data-tone='degraded'] .status-dot { background: var(--warn); }
[data-tone='down'] .status-dot { background: var(--err); }
[data-tone='unknown'] .status-dot,
[data-tone='no_data'] .status-dot { background: var(--line-strong); }

[data-tone='unknown'] .status-row__text,
[data-tone='no_data'] .status-row__text { color: var(--fg-muted); }

.status-foot {
  margin-top: var(--s-4);
}

@media (max-width: 560px) {
  .status-row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-2);
    padding: var(--s-4);
  }
}