/* /docs/status — on the docs chrome (docs/plain), so it follows the docs tokens and dark mode. */
:root { --st-ok: #2E9E6B; --st-warn: #C98A1B; --st-bad: #C2603F; --st-idle: var(--line); }

.dot { width: 10px; height: 10px; border-radius: 99px; display: inline-block; flex: none; background: var(--st-idle); }
.dot.operational { background: var(--st-ok); }
.dot.degraded { background: var(--st-warn); }
.dot.down { background: var(--st-bad); }

.st-banner { display: flex; align-items: center; flex-wrap: wrap; gap: .7rem; padding: 18px 20px; border-radius: 14px; border: 1px solid var(--line); background: var(--card); margin: 18px 0 8px; font-size: 17px; color: var(--ink); }
.st-banner .dot { width: 12px; height: 12px; }
.st-banner.st-operational { border-color: color-mix(in srgb, var(--st-ok) 40%, var(--line)); background: color-mix(in srgb, var(--st-ok) 9%, var(--card)); }
.st-banner.st-degraded { border-color: color-mix(in srgb, var(--st-warn) 45%, var(--line)); background: color-mix(in srgb, var(--st-warn) 10%, var(--card)); }
.st-banner.st-down { border-color: color-mix(in srgb, var(--st-bad) 45%, var(--line)); background: color-mix(in srgb, var(--st-bad) 10%, var(--card)); }
.st-uptime { margin-left: auto; font-size: 13.5px; color: var(--muted); font-family: var(--font-mono); }
.st-updated { color: var(--muted); font-size: 13.5px; margin: 0 0 26px; }

.status-row { display: flex; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px 18px; margin-bottom: 10px; }
.st-row { flex-direction: column; align-items: stretch; gap: 10px; }
.st-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.st-head .name { font-weight: 600; }
.st-head .name a { color: var(--ink); }
.st-head .name a:hover { color: var(--accent); }
.st-head .m, .st-incidents .m { margin-left: auto; color: var(--muted); font-size: 13.5px; }
.st-label { font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; padding: 2px 8px; border-radius: 99px; border: 1px solid currentColor; }
.st-label.st-operational { color: var(--st-ok); }
.st-label.st-degraded { color: var(--st-warn); }
.st-label.st-down { color: var(--st-bad); }
.st-label.st-idle { color: var(--muted); }

.st-bars { display: flex; gap: 2px; height: 26px; }
.st-bar { flex: 1; border-radius: 2px; background: var(--st-idle); min-width: 3px; }
.st-bar.operational { background: var(--st-ok); }
.st-bar.degraded { background: var(--st-warn); }
.st-bar.down { background: var(--st-bad); }
.st-axis { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--muted); font-family: var(--font-mono); }

.st-h2 { font-family: var(--font-display); font-weight: 600; font-size: 22px; margin: 36px 0 12px; }
.st-none { color: var(--muted); }
.st-incidents { list-style: none; padding: 0; margin: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.st-incidents li { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; border-top: 1px solid var(--line); }
.st-incidents li:first-child { border-top: 0; }
.st-incidents a { color: var(--ink); font-weight: 500; }
.st-inc-when { font-size: 13px; color: var(--muted); min-width: 96px; font-family: var(--font-mono); }
.st-foot { color: var(--muted); font-size: 12.5px; margin-top: 22px; }
@media (max-width: 560px) { .st-uptime { margin-left: 0; width: 100%; } .st-bars { gap: 1px; } }