/* The status page (status.html). */
.status-header { border-bottom: 1px solid var(--line); }
.status-header .header-inner { display: flex; align-items: center; justify-content: space-between; min-height: 72px; gap: 16px; }
.status-main { padding: 40px 0 64px; display: grid; gap: 32px; max-width: 760px; }
.status-main h1 { font-size: clamp(30px, 5vw, 42px); }
.status-main h2 { font-size: 20px; margin-bottom: 12px; }
.status-main .note { color: var(--text-2); font-size: 14px; margin-bottom: 12px; }
.status-banner { display: flex; align-items: center; gap: 14px; padding: 20px 22px; border-radius: var(--radius); border: 1px solid var(--line-2); background: var(--panel); font-size: 18px; font-weight: 700; }
.status-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); overflow: hidden; }
.status-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 14px 18px; border-top: 1px solid var(--line); }
.status-list li:first-child { border-top: 0; }
.status-list .name { font-weight: 650; flex: 1 1 200px; }
.status-list .state { color: var(--text-2); font-size: 14px; }
.status-list .text { flex-basis: 100%; color: var(--text-2); font-size: 14px; white-space: pre-line; }
.dot { width: 12px; height: 12px; border-radius: 50%; flex: none; background: var(--text-3); }
[data-state="ok"] .dot, [data-overall="ok"] .dot { background: var(--green); }
[data-state="late"] .dot, [data-state="waiting"] .dot, [data-state="minor"] .dot, [data-state="info"] .dot, [data-overall="degraded"] .dot { background: var(--amber); }
[data-state="problem"] .dot, [data-state="major"] .dot, [data-overall="problem"] .dot { background: #ef4444; }
[data-state="info"] .dot, [data-state="fixed"] .dot { background: var(--blue); }