/* Page d'état. Complète chrome.css (en-tête et pied de page) : une bande bleu
   nuit avec le résumé, puis une liste de services séparés par des filets. */

* { box-sizing: border-box; }
body {
  margin: 0;
  background: #fff;
  color: #0a1a3a;
  font: 1.05rem/1.6 var(--font);
}
@media (prefers-color-scheme: dark) {
  body { background: #061029; color: #e6eeff; }
}
a { color: #1f6fe5; }
@media (prefers-color-scheme: dark) { a { color: #7db4ff; } }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 20px; }

.head { background: #04163f; color: #fff; padding: 52px 0 44px; }
.head h1 { margin: 0 0 18px; font-size: clamp(2rem, 5vw, 3rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; }
.resume { margin: 0 0 6px; font-size: 1.25rem; font-weight: 600; display: flex; align-items: center; gap: 12px; }
.resume::before {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  background: #9fb1d6;
}
.resume[data-state="ok"]::before { background: #3ddc97; }
.resume[data-state="degraded"]::before { background: #ffb23e; }
.resume[data-state="down"]::before { background: #ff5a4f; }
.when { margin: 0; color: #b4c4e4; font-size: .95rem; }

.checks { list-style: none; max-width: 860px; margin: 28px 0 0; padding: 0; border-bottom: 1px solid #d9e3f5; }
.checks li {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 20px;
  padding: 20px 2px;
  border-top: 1px solid #d9e3f5;
}
.checks .name { font-weight: 700; }
.checks .state { color: #4b5b7d; font-variant-numeric: tabular-nums; }
.checks [data-state="ok"] .state { color: #0a7d4b; font-weight: 600; }
.checks [data-state="down"] .state { color: #b3261e; font-weight: 600; }
@media (prefers-color-scheme: dark) {
  .checks, .checks li { border-color: #1b3677; }
  .checks .state { color: #9fb1d6; }
  .checks [data-state="ok"] .state { color: #3ddc97; }
  .checks [data-state="down"] .state { color: #ff8a80; }
}
.note { margin: 22px 0 0; max-width: 40rem; color: #4b5b7d; font-size: .95rem; }
@media (prefers-color-scheme: dark) { .note { color: #9fb1d6; } }
main { padding-bottom: 24px; }