/* status.natbox.io, on top of natbox.io's site.css */
:root { --up: #16a34a; --minor: #e5a00d; --major: #dc2626; --nd: #e4e8ee; }
@media (prefers-color-scheme: dark) { :root { --up: #22c55e; --minor: #f5b82e; --major: #f05252; --nd: #1e2738; } }

.brand .tag { font-style: normal; font-weight: 600; font-size: 13px; color: var(--muted); border: 1px solid var(--line-2); border-radius: 999px; padding: 1px 9px; margin-left: 2px; letter-spacing: 0; }
.status { max-width: 880px; padding-top: 40px; padding-bottom: 56px; }
.status h2 { font-size: 18px; letter-spacing: -.01em; margin: 0 0 18px; }

.banner { display: flex; gap: 16px; align-items: center; border-radius: var(--radius); padding: 22px 24px; color: #fff; margin-bottom: 24px; box-shadow: var(--shadow); }
.banner.up { background: var(--up); }
.banner.degraded { background: var(--minor); color: #2b1d00; }
.banner.down { background: var(--major); }
.banner h1 { font-size: 22px; letter-spacing: -.02em; margin: 0; line-height: 1.3; }
.banner p { margin: 2px 0 0; font-size: 14px; opacity: .9; }
.banner p.stale { font-weight: 600; opacity: 1; }
.banner .dot { flex: none; width: 14px; height: 14px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 5px color-mix(in srgb, currentColor 30%, transparent); }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow); }
.comp { padding: 18px 0; border-top: 1px solid var(--line); }
.comp:first-of-type { border-top: 0; padding-top: 0; }
.comp:last-child { padding-bottom: 0; }
.comp-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 10px; }
.comp-head b { display: block; font-size: 15px; }
.comp-head small { color: var(--muted); font-size: 13px; }
.pill { flex: none; font-size: 13px; font-weight: 600; border-radius: 999px; padding: 2px 10px; cursor: default; }
.pill.up { color: var(--up); background: color-mix(in srgb, var(--up) 12%, transparent); }
.pill.degraded { color: #a06b00; background: color-mix(in srgb, var(--minor) 18%, transparent); }
.pill.down { color: var(--major); background: color-mix(in srgb, var(--major) 12%, transparent); }
@media (prefers-color-scheme: dark) { .pill.degraded { color: var(--minor); } }

.bars { display: flex; gap: 2px; height: 34px; }
.bars i { flex: 1; border-radius: 2px; background: var(--up); min-width: 0; transition: opacity .1s; }
.bars i:hover { opacity: .7; }
.bars i.minor { background: var(--minor); }
.bars i.major { background: var(--major); }
.bars i.nd { background: var(--nd); }
.bars-legend { display: flex; justify-content: space-between; color: var(--muted); font-size: 12px; margin-top: 6px; }
@media (max-width: 640px) {
  .bars i:nth-child(-n+60) { display: none; }  /* last 30 days on phones */
  .bars-legend span:first-child { visibility: hidden; }
  .bars-legend span:first-child::before { content: "30 days ago"; visibility: visible; }
}

.incident { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 24px; margin-bottom: 14px; }
.incident.live { border-color: var(--minor); border-left-width: 4px; margin-bottom: 24px; }
.incident h3 { margin: 0 0 4px; font-size: 16px; }
.incident .affects { margin: 0 0 8px; color: var(--muted); font-size: 13px; }
.incident ul { list-style: none; margin: 0; padding: 0; }
.incident li { padding: 8px 0 0; font-size: 14px; }
.incident li .when { color: var(--muted); font-size: 13px; margin-left: 6px; }
.incident li p { margin: 2px 0 0; }

.past { margin-top: 36px; }
.past .none { color: var(--muted); margin: 0; }
.foot-note { margin-top: 32px; color: var(--muted); font-size: 14px; }
.foot-note a, footer a { color: var(--brand-ink); }

/* undo landing-page section and footer spacing */
.status section { padding: 0; border-top: 0; }
.status .card { padding: 24px; }
.status .banner { padding: 22px 24px; }
footer { padding: 22px 0; }
footer .legal-line { margin-top: 0; border-top: 0; }
.nav .btn { white-space: nowrap; }
@media (max-width: 560px) { .status { padding-top: 24px; } .nav { gap: 12px; } }