/* Public status page. Deliberately plain: someone opening this is usually
   trying to find out whether a problem is theirs or ours, and wants that
   answer above the fold. */

/* logo.png is the full-size asset the home hero uses, so it needs an explicit
   height here or it renders at its natural size and swallows the page. Every
   other view uses the text .brand instead and never needed this rule. */
.topbar-brand {
  display: flex;
  align-items: center;
}

.topbar-logo {
  height: 28px;
  width: auto;
  display: block;
}

.status-page {
  max-width: 680px;
  margin: 0 auto;
  padding: 40px 20px 60px;
}

.status-headline {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 8px;
}

.status-headline h1 {
  font-size: 24px;
  margin: 0;
}

.status-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: var(--text-dim);
}

.status-dot.small {
  width: 10px;
  height: 10px;
  margin-top: 6px;
}

.status-dot.up {
  background: var(--green);
  box-shadow: 0 0 10px rgba(95, 163, 90, 0.6);
}

.status-dot.degraded {
  background: var(--amber);
  box-shadow: 0 0 10px rgba(217, 160, 57, 0.55);
}

.status-dot.down {
  background: var(--red);
  box-shadow: 0 0 10px rgba(194, 75, 75, 0.6);
}

.status-dot.unknown {
  background: var(--text-dim);
}

.status-players {
  color: var(--olive-bright);
  font-weight: 600;
  font-size: 18px;
  text-align: center;
  margin: 0 0 24px;
}

.status-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--panel);
}

.status-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 16px 18px;
  border-bottom: 1px solid var(--panel-border);
}

.status-item:last-child {
  border-bottom: none;
}

.status-note {
  color: var(--text-dim);
  font-size: 13px;
  margin-top: 2px;
}

.status-updated {
  color: var(--text-dim);
  font-size: 12px;
  text-align: center;
  margin-top: 20px;
}