/* status.iridex.me — page-specific rules only; everything else (tokens,
   resets, .container, .btn) comes from base.css, copied straight from
   homepage/ so this page matches the rest of the site without pulling in
   site.css's much larger, mostly-irrelevant rule set. */

body { background: var(--bg); }

.status-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-6) 0;
}
.status-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-lg);
  color: var(--text-bright);
  text-decoration: none;
}
.status-brand img { width: 28px; height: 28px; }

.status-hero {
  text-align: center;
  padding: var(--space-8) 0 var(--space-7);
}
.status-hero h1 { margin: 0 0 var(--space-3); font-size: var(--text-3xl); }
.status-banner {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  border-radius: 999px;
  border: 1px solid var(--border-hi);
  background: var(--surface-alt);
  font-size: var(--text-md);
  font-weight: 600;
}
.status-banner .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--text-dim); }
.status-banner.is-up { border-color: rgba(125, 211, 160, 0.4); color: var(--success); }
.status-banner.is-up .dot { background: var(--success); box-shadow: 0 0 0 4px rgba(125, 211, 160, 0.18); }
.status-banner.is-down { border-color: rgba(229, 72, 77, 0.4); color: var(--danger); }
.status-banner.is-down .dot { background: var(--danger); box-shadow: 0 0 0 4px rgba(229, 72, 77, 0.18); }

.status-list {
  max-width: 640px;
  margin: 0 auto var(--space-8);
  display: grid;
  gap: 10px;
}
.status-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.status-row .dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; background: var(--text-dim); }
.status-row .dot.is-up { background: var(--success); }
.status-row .dot.is-down { background: var(--danger); }
.status-row-name { flex: 1; font-size: var(--text-md); }
.status-row-state { font-size: var(--text-sm); font-weight: 600; color: var(--text-dim); }
.status-row-state.is-up { color: var(--success); }
.status-row-state.is-down { color: var(--danger); }

.status-footer {
  text-align: center;
  color: var(--text-dim);
  font-size: var(--text-sm);
  padding-bottom: var(--space-8);
}
.status-footer a { color: var(--text-muted); }

.status-skeleton {
  max-width: 640px;
  margin: 0 auto var(--space-8);
  display: grid;
  gap: 10px;
}
/* .status-skeleton's own `display: grid` above otherwise beats the
   browser's default [hidden] { display: none } — same specificity, later
   in the cascade — so the skeleton stayed visible under the real rows once
   they loaded. */
.status-skeleton[hidden], .status-list[hidden] { display: none; }
.status-skeleton-row {
  height: 56px;
  border-radius: var(--radius-lg);
  background: linear-gradient(90deg, var(--surface) 25%, var(--surface-alt) 37%, var(--surface) 63%);
  background-size: 400% 100%;
  animation: status-shimmer 1.4s ease infinite;
}
@keyframes status-shimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}