:root {
  --bg: #fbfaf7;
  --card: #ffffff;
  --ink: #1d232b;
  --muted: #5b6470;
  --line: #e3e0d8;
  --ok: #1f8a4c;
  --degraded: #b7791f;
  --outage: #c53030;
  --unknown: #a0a6ae;
  --none: #e7e5df;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #12161b;
    --card: #1a2027;
    --ink: #e7eaee;
    --muted: #9aa3ad;
    --line: #2b333c;
    --ok: #38a169;
    --degraded: #d69e2e;
    --outage: #f56565;
    --unknown: #6b7480;
    --none: #2b333c;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
a { color: inherit; text-underline-offset: 2px; }
.wrap { max-width: 52rem; margin: 0 auto; padding: 0 16px; }
.site-header { border-bottom: 1px solid var(--line); }
.site-header .wrap { display: flex; align-items: baseline; gap: .5rem; padding-top: 1rem; padding-bottom: 1rem; }
.brand { font-weight: 700; font-size: 1.15rem; text-decoration: none; }
.brand-sub { color: var(--muted); }
main { padding-top: 1.5rem; padding-bottom: 2rem; }
h2 { font-size: 1.15rem; margin: 2rem 0 .75rem; }
h3 { font-size: 1rem; margin: 0; }
.muted, .component-desc, .incident-meta, .incident-components, .bars-legend { color: var(--muted); }

.banner { border-radius: 10px; padding: 1rem 1.25rem; color: #fff; background: var(--unknown); }
.banner h2 { margin: 0; font-size: 1.25rem; }
.banner p { margin: .25rem 0 0; opacity: .95; }
.banner-operational { background: var(--ok); }
.banner-degraded { background: var(--degraded); }
.banner-outage { background: var(--outage); }

.notice { border: 1px solid var(--line); border-left: 4px solid var(--degraded); background: var(--card); padding: .75rem 1rem; border-radius: 6px; margin-top: 1rem; }

.components { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 10px; background: var(--card); }
.component { padding: 1rem 1.25rem; }
.component + .component { border-top: 1px solid var(--line); }
.component-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.component-desc { margin: .15rem 0 .6rem; font-size: .9rem; }
.pill { font-size: .85rem; font-weight: 600; white-space: nowrap; }
.pill::before { content: ""; display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; margin-right: .35rem; background: var(--unknown); }
.pill-operational { color: var(--ok); } .pill-operational::before { background: var(--ok); }
.pill-degraded { color: var(--degraded); } .pill-degraded::before { background: var(--degraded); }
.pill-outage { color: var(--outage); } .pill-outage::before { background: var(--outage); }
.pill-unknown { color: var(--muted); }

.bars { display: flex; gap: 2px; height: 2rem; }
.day { flex: 1 1 0; min-width: 0; border-radius: 2px; background: var(--none); }
.day-operational { background: var(--ok); }
.day-degraded { background: var(--degraded); }
.day-outage { background: var(--outage); }
.bars-legend { display: flex; justify-content: space-between; font-size: .8rem; margin-top: .3rem; }

.incident { border: 1px solid var(--line); border-radius: 10px; background: var(--card); padding: 1rem 1.25rem; margin-bottom: .75rem; }
.incident-open.incident-major { border-left: 4px solid var(--outage); }
.incident-open.incident-minor { border-left: 4px solid var(--degraded); }
.incident-meta { margin: .25rem 0; font-size: .85rem; }
.tag { display: inline-block; border: 1px solid var(--line); border-radius: 999px; padding: 0 .5rem; }
.incident-components { margin: .25rem 0; font-size: .9rem; }
.updates { list-style: none; padding: 0; margin: .5rem 0 0; }
.updates li { border-top: 1px dashed var(--line); padding-top: .5rem; margin-top: .5rem; }
.updates p { margin: 0; }
.update-message { white-space: pre-wrap; overflow-wrap: anywhere; }
time { color: var(--muted); font-size: .85rem; }

.site-footer { border-top: 1px solid var(--line); color: var(--muted); font-size: .9rem; padding: 1rem 0 2rem; }

@media (max-width: 480px) {
  .bars { gap: 1px; height: 1.6rem; }
  .component, .incident { padding: .85rem 1rem; }
}