/* Palette + tokens lifted from blueskyevo.com */
:root {
  --blue: #0a6ccd;
  --blue-pale: #e6f0fb;
  --navy: #0a2540;
  --yellow: #ffe500;
  --yellow-light: #fffbd6;
  --white: #ffffff;
  --bg: #f2f2f2;
  --card-border: #edf7ff;
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-400: #9ca3af;
  --gray-600: #4b5563;
  --gray-800: #1f2937;

  /* Semantic status colors tuned to sit on the light brand surface */
  --green: #16a34a;
  --red: #dc2626;
  --amber: #b58900;

  --radius: 5px;
  --shadow: 0 1px 3px rgba(10, 37, 64, 0.08), 0 8px 32px rgba(10, 37, 64, 0.06);
  --shadow-lg: 0 4px 12px rgba(10, 37, 64, 0.1), 0 16px 48px rgba(10, 37, 64, 0.08);
  --transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

* { box-sizing: border-box; }

/* Page background spans the full viewport; content is capped + centered. */
html { background: var(--bg); }

body {
  margin: 0 auto;
  max-width: 800px;
  font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--gray-800);
  padding: 24px;
  line-height: 1.5;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 8px;
}

.title h1 {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -0.01em;
}
/* Brand yellow underline accent on the title */
.title h1::after {
  content: "";
  display: block;
  width: 44px;
  height: 4px;
  margin-top: 6px;
  background: var(--yellow);
  border-radius: 2px;
}
.subtitle { color: var(--gray-600); font-size: 13px; }

.summary { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.pill {
  background: var(--white);
  border: 1px solid var(--card-border);
  border-radius: 999px;
  padding: 5px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--gray-800);
  box-shadow: var(--shadow);
}
.pill-down { color: var(--red); border-color: rgba(220, 38, 38, 0.25); }
.pill-muted { color: var(--gray-600); }

button {
  background: var(--blue);
  color: var(--white);
  border: none;
  border-radius: var(--radius);
  padding: 7px 16px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: filter var(--transition), box-shadow var(--transition);
  box-shadow: var(--shadow);
}
button:disabled { opacity: 0.5; cursor: default; box-shadow: none; }

.meta { color: var(--gray-600); font-size: 12px; margin: 4px 0 16px; }

.error {
  background: rgba(220, 38, 38, 0.06);
  border: 1px solid rgba(220, 38, 38, 0.3);
  color: var(--red);
  padding: 10px 14px;
  border-radius: var(--radius);
  margin-bottom: 16px;
  font-size: 13px;
}

table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--white);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}

th, td {
  text-align: left;
  padding: 11px 14px;
  border-bottom: 1px solid var(--gray-100);
  font-size: 13px;
}
th {
  color: var(--gray-600);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.5px;
  background: var(--gray-50);
}
tbody tr:last-child td { border-bottom: none; }
tbody tr { transition: background var(--transition); }
tr.down { background: rgba(220, 38, 38, 0.05); box-shadow: inset 3px 0 0 var(--red); }

a { color: var(--blue); text-decoration: none; font-weight: 500; }

.status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}
.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.s-success .dot { background: var(--green); }
.s-success { color: var(--green); }
.s-crashed .dot, .s-failed .dot { background: var(--red); }
.s-crashed, .s-failed { color: var(--red); }
.s-building .dot, .s-deploying .dot, .s-queued .dot, .s-waiting .dot { background: var(--yellow); }
.s-building, .s-deploying, .s-queued, .s-waiting { color: var(--amber); }
.s-other .dot { background: var(--gray-400); }
.s-other { color: var(--gray-600); }