/* only what the status page adds; everything else is the site's own site.css and its tokens */
.status { padding-block: 40px 64px; }
.status-title { display: flex; align-items: center; gap: 14px; }
.status-title .status-dot { width: 14px; height: 14px; }
.status-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--faint); }
.status-title--up .status-dot, .status-item--up .status-dot { background: var(--ok); box-shadow: 0 0 0 4px var(--ok-tint); }
.status-title--down .status-dot, .status-item--down .status-dot { background: var(--danger); box-shadow: 0 0 0 4px var(--danger-tint); }
.status-title--stale .status-dot { background: var(--amber); }
.status-item--off .status-dot { background: transparent; border: 2px solid var(--faint); }

.status-group + .status-group { margin-top: 36px; }
.status-group h2 { margin: 0 0 12px; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.status-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.status-item { padding: 14px 18px; }
.status-item + .status-item { border-top: 1px solid var(--border); }
.status-item__main { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.status-item__name { font-weight: 600; }
.status-item__state { font-size: 14px; color: var(--muted); }
.status-item--down .status-item__state { color: var(--danger); font-weight: 600; }
.status-item__meta { margin-left: auto; font-size: 13px; color: var(--faint); }
.status-item__uptime { margin: 6px 0 0; font-size: 12.5px; color: var(--faint); }

.status-bar { display: flex; gap: 2px; margin-top: 10px; height: 26px; }
.status-bar__day { flex: 1 1 0; min-width: 0; border-radius: 2px; background: var(--border); }
.status-bar__day--up { background: var(--ok); }
.status-bar__day--part { background: var(--amber); }
.status-bar__day--down { background: var(--danger); }

.status-changes { list-style: none; margin: 0; padding: 0; }
.status-change { padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 14.5px; }
.status-change time { color: var(--faint); font-size: 13px; margin-right: 10px; }
.status-change--down { color: var(--danger); }
.status-none { color: var(--muted); font-size: 14px; }

a.theme-toggle { text-decoration: none; }

@media (max-width: 560px) {
  .status-item__meta { margin-left: 0; width: 100%; }
  .status-bar { height: 22px; gap: 1px; }
}