/* KilgoreAI status page — palette mirrors discordstatus.com */
:root {
  --green: #3BA55C;
  --red: #ED4245;
  --yellow: #CB8615;
  --orange: #F26522;
  --blurple: #5865F2;
  --font: #2E3338;
  --font-soft: #72767D;
  --border: #E0E0E0;
  --nodata: #B3BAC5;
  --bg: #FFFFFF;
  --bar-h: 30px;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--font);
  font: 16px/1.5 "Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--blurple); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---- banner ---- */
.banner {
  color: #fff;
  font-weight: 700;
  font-size: 22px;
  text-align: center;
  padding: 26px 16px;
}
.banner-green   { background: var(--green); }
.banner-yellow  { background: var(--yellow); }
.banner-red     { background: var(--red); }
.banner-loading { background: var(--nodata); }

.wrap { max-width: 1000px; margin: 0 auto; padding: 24px 20px 40px; }

/* ---- component cards ---- */
.cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 34px;
}
@media (max-width: 640px) { .cards { grid-template-columns: 1fr; } }
.comp {
  border: 1px solid var(--border);
  border-left-width: 5px;
  border-radius: 6px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.comp .name { font-weight: 700; }
.comp .st { display: flex; align-items: center; gap: 8px; color: var(--font-soft); font-size: 14px; }
.comp .dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.comp-up       { border-left-color: var(--green); }
.comp-up .dot  { background: var(--green); }
.comp-down       { border-left-color: var(--red); }
.comp-down .dot  { background: var(--red); }
.comp-down .st   { color: var(--red); }
.comp-degraded       { border-left-color: var(--orange); }
.comp-degraded .dot  { background: var(--orange); }
.comp-degraded .st   { color: var(--orange); }
.comp-unknown       { border-left-color: var(--nodata); }
.comp-unknown .dot  { background: var(--nodata); }

/* ---- sections ---- */
.sect { margin: 34px 0; }
.sect h2 { font-size: 18px; margin: 0 0 14px; }
.sect-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.foot-note { color: var(--font-soft); font-size: 13px; margin: 12px 0 0; }

.tf { display: inline-flex; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.tf button {
  border: 0; background: #fff; color: var(--font-soft);
  padding: 6px 14px; font-size: 13px; cursor: pointer;
}
.tf button + button { border-left: 1px solid var(--border); }
.tf button.active { background: var(--blurple); color: #fff; }

/* ---- uptime bars ---- */
.upt-row { margin-bottom: 18px; }
.upt-label { display: flex; justify-content: space-between; font-size: 13px; color: var(--font-soft); margin-bottom: 6px; }
.upt-label .nm { color: var(--font); font-weight: 600; }
.bars { display: flex; gap: 2px; height: var(--bar-h); }
.bar { flex: 1 1 0; min-width: 2px; border-radius: 2px; background: var(--nodata); }
.bar:hover { outline: 1px solid var(--font-soft); }
.bar-up   { background: var(--green); }
.bar-down { background: var(--red); }

/* ---- response time chart ---- */
#rt-chart { width: 100%; height: 170px; border: 1px solid var(--border); border-radius: 6px; }

/* ---- incidents ---- */
.inc { border: 1px solid var(--border); border-radius: 6px; padding: 14px 18px; margin-bottom: 12px; }
.inc-title { font-weight: 700; margin-bottom: 8px; }
.inc-open  { border-left: 5px solid var(--orange); }
.inc-crit  { border-left: 5px solid var(--red); }
.upd { padding: 6px 0 6px 14px; border-left: 2px solid var(--border); }
.upd + .upd { margin-top: 6px; }
.upd b { display: block; font-size: 14px; }
.upd .when { color: var(--font-soft); font-size: 12px; }
.upd-resolved b { color: var(--green); }
.upd-investigating b { color: var(--orange); }
.no-inc { color: var(--green); font-weight: 600; }
.day-head { font-weight: 700; margin: 22px 0 8px; }

/* ---- footer / tooltip ---- */
.foot {
  text-align: center; color: var(--font-soft); font-size: 13px;
  padding: 18px 0 30px; border-top: 1px solid var(--border);
}
.tip {
  position: fixed; z-index: 10; pointer-events: none;
  background: var(--font); color: #fff; font-size: 12px;
  padding: 6px 10px; border-radius: 4px; white-space: nowrap;
  transform: translate(-50%, calc(-100% - 8px));
}
@media (prefers-reduced-motion: no-preference) {
  .banner, .bar, .comp { transition: background .3s ease, border-color .3s ease; }
}