/* Status page. States: up, slow, down, checking (set as data-state). */

.status-page { padding-top: 56px; padding-bottom: 80px; max-width: 860px; }
.status-page .page-title { margin-top: 16px; }

[data-state] { --state: var(--muted); }
[data-state="up"] { --state: var(--good); }
[data-state="slow"] { --state: var(--warn); }
[data-state="down"] { --state: var(--bad); }

.overall { margin-top: 36px; display: flex; align-items: center; gap: 20px; padding: 24px 26px; box-shadow: inset 3px 0 0 var(--state); }
.overall h2 { margin-top: 0; font-size: 24px; line-height: 1.2; letter-spacing: -0.02em; }
.overall p { color: var(--muted); font-size: 14.5px; margin-top: 2px; }
.overall .btn { margin-left: auto; }
.beacon { width: 14px; height: 14px; background: var(--state); flex-shrink: 0; }
[data-state="checking"] .beacon { animation: blink 0.9s steps(1) infinite; }

.services { list-style: none; margin-top: 24px; display: grid; border-top: 1px solid var(--line2); }
.service { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 18px; padding: 18px 0;
  background: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; animation: rise 0.4s var(--ease) both; }
.service .what b { display: block; font-weight: 700; }
.service .what span { color: var(--dim); font-size: 13.5px; }
.service .detail { color: var(--muted); font-size: 13px; font-family: var(--mono); text-align: right; }
.service .pill { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 112px; padding: 6px 10px; border: 1px solid var(--line2); border-radius: 2px;
  font: 400 10.5px/1 var(--pixel); text-transform: uppercase; color: var(--state); }
.service .pill::before { content: ""; width: 6px; height: 6px; background: var(--state); }

.status-foot { margin-top: 22px; color: var(--dim); font-size: 14px; }
.status-foot a { color: var(--lumen); }

@media (max-width: 640px) {
  .overall { flex-wrap: wrap; }
  .overall .btn { margin-left: 0; }
  .service { grid-template-columns: minmax(0, 1fr) auto; }
  .service .detail { grid-column: 1 / -1; grid-row: 2; text-align: left; }
}