/* Public server status page
   Static stylesheet; no external fonts or trackers. */

:root {
  --bg:#14171c; --card:#1c2129; --card2:#21262f;
  --ink:#e6e9ee; --muted:#8b95a3; --line:#2a313c;
  --good:#3ecf7a; --bad:#e5604f; --accent:#f0a83c;
  --shadow:rgba(0,0,0,.45);
}
@media (prefers-color-scheme: light) {
  :root {
    --bg:#edeef0; --card:#ffffff; --card2:#f6f7f9;
    --ink:#171b21; --muted:#5b6673; --line:#d6dae0;
    --good:#0f9d58; --bad:#c93f2e; --accent:#c27a12;
    --shadow:rgba(23,32,44,.12);
  }
}

* { box-sizing:border-box; }

body {
  margin:0; color:var(--ink);
  font:16px/1.55 ui-sans-serif,system-ui,-apple-system,'Segoe UI',Inter,Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);
  min-height:100vh;
}

main { width:calc(100% - 48px); max-width:1760px; margin:0 auto; padding:56px 0 72px; }

header {
  display:flex; justify-content:space-between; gap:24px;
  align-items:flex-end; margin-bottom:6px;
}
h1 {
  font-size:clamp(2rem,5.6vw,3.6rem); line-height:1; margin:0;
  letter-spacing:-.035em; font-weight:800; color:var(--ink);
}
.tag {
  margin:.35rem 0 0; color:var(--muted);
  font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700;
}
.mission {
  margin:.6rem 0 0; color:var(--muted); font-size:.92rem; max-width:52ch;
}
.headside { display:flex; flex-direction:column; align-items:flex-end; gap:8px; }
.stamp {
  color:var(--muted); font-size:.85rem;
  font-variant-numeric:tabular-nums; white-space:nowrap;
}

#refresh {
  cursor:pointer; border:1px solid var(--line); border-radius:10px;
  background:color-mix(in srgb, var(--card) 70%, transparent);
  color:var(--muted); font:inherit; font-size:.8rem; font-weight:600;
  padding:6px 14px; transition:border-color .15s ease, color .15s ease;
}
#refresh:hover { border-color:color-mix(in srgb, var(--accent) 45%, var(--line)); color:var(--ink); }
#refresh:active { transform:translateY(1px); }
#refresh.busy { opacity:.55; pointer-events:none; }

.summary { color:var(--muted); margin:0 0 30px; font-size:1rem; }
.summary b { color:var(--ink); font-weight:700; }

/* ---- pulse hero ---- */
.pulse {
  display:flex; align-items:center; gap:26px;
  margin:6px 0 26px; padding:22px 28px;
  border:1px solid var(--line); border-radius:20px;
  background:linear-gradient(168deg, var(--card2), var(--card));
  box-shadow:0 10px 30px var(--shadow);
}
.pulse-num {
  font-size:clamp(3.4rem, 7vw, 5.2rem); font-weight:800; letter-spacing:-.05em;
  line-height:1; font-variant-numeric:tabular-nums;
  color:var(--good);
  transition:transform .25s ease;
}
.pulse-num.bump { transform:scale(1.12); }
.pulse-label { font-size:.72rem; text-transform:uppercase; letter-spacing:.14em;
               color:var(--muted); font-weight:700; }
.pulse-sub { color:var(--muted); font-size:.92rem; margin-top:4px; }
.pulse.idle { opacity:.6; }
.pulse.idle .pulse-num { color:var(--muted); }

/* ---- live ticker ---- */
.ticker {
  display:flex; align-items:center; gap:12px;
  margin:0 0 22px; padding:10px 16px;
  border:1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
  border-radius:12px;
  background:color-mix(in srgb, var(--accent) 8%, var(--card));
  overflow:hidden;
}
.ticker-label {
  flex:none; font-size:.62rem; font-weight:800; letter-spacing:.16em;
  text-transform:uppercase; color:var(--good);
  display:inline-flex; align-items:center; gap:6px;
}
.ticker-label::before {
  content:''; width:7px; height:7px; border-radius:99px; background:var(--good);
  animation:blink 1.6s ease-in-out infinite;
}
@keyframes blink { 50% { opacity:.25; } }
.ticker-items { display:flex; gap:18px; flex-wrap:wrap; font-size:.85rem; }
.tick-item { color:var(--muted); white-space:nowrap; }
.tick-item b { color:var(--ink); font-weight:600; }
.tick-item .ago { opacity:.6; font-size:.76rem; font-variant-numeric:tabular-nums; }
.tick-item.join b { color:var(--good); }
.tick-item.leave b { color:var(--bad); }

/* ---- totals tiles ---- */
.tiles {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px;
  margin:22px 0 26px;
}
.tile {
  background:linear-gradient(168deg, var(--card2), var(--card));
  border:1px solid var(--line); border-radius:14px; padding:14px 16px;
  box-shadow:0 6px 18px var(--shadow);
}
.tile .k { color:var(--muted); font-size:.68rem; text-transform:uppercase;
           letter-spacing:.11em; font-weight:700; }
.tile .v { font-size:1.85rem; font-weight:800; letter-spacing:-.03em; margin-top:4px;
           font-variant-numeric:tabular-nums; line-height:1.05; }
.tile .v small { font-size:.8rem; font-weight:600; color:var(--muted); letter-spacing:0; }
.tile.accent .v { color:color-mix(in srgb, var(--accent) 62%, var(--ink)); }
.tile.good .v { color:var(--good); }

/* ---- toolbar ---- */
.toolbar { margin:0 0 18px; display:flex; gap:10px; flex-wrap:wrap; }
#filter {
  flex:1; min-width:220px;
  border:1px solid var(--line); border-radius:12px;
  background:color-mix(in srgb, var(--card) 80%, transparent);
  color:var(--ink); font:inherit; font-size:.95rem;
  padding:10px 16px; outline:none;
  transition:border-color .15s ease;
}
#filter:focus { border-color:color-mix(in srgb, var(--accent) 55%, var(--line)); }
#filter::placeholder { color:var(--muted); }
#sort {
  border:1px solid var(--line); border-radius:12px;
  background:color-mix(in srgb, var(--card) 80%, transparent);
  color:var(--ink); font:inherit; font-size:.9rem;
  padding:10px 12px; cursor:pointer; outline:none;
}

/* ---- server cards ---- */
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:16px; }
.card {
  background:linear-gradient(168deg, var(--card2), var(--card));
  border:1px solid var(--line); border-radius:18px; padding:22px 22px 24px;
  box-shadow:0 10px 30px var(--shadow); position:relative; overflow:hidden;
  transition:border-color .18s ease, transform .18s ease;
}
.card::after {
  content:''; position:absolute; inset:0 0 auto 0; height:2px;
  background:linear-gradient(90deg, transparent, var(--bad), transparent); opacity:.5;
}
.card.online::after { background:linear-gradient(90deg, transparent, var(--good), transparent); opacity:.75; }
.card.online:hover { border-color:color-mix(in srgb, var(--accent) 45%, var(--line)); transform:translateY(-2px); }
.card.kb-focus { border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent), 0 10px 30px var(--shadow); }
.card.off { opacity:.55; }

.status {
  display:inline-flex; gap:7px; align-items:center; font-weight:700;
  text-transform:uppercase; letter-spacing:.1em; font-size:.66rem; color:var(--muted);
}
.dot { width:8px; height:8px; border-radius:99px; background:var(--bad);
       box-shadow:0 0 0 4px color-mix(in srgb, var(--bad) 18%, transparent); }
.online .status { color:var(--good); }
.online .dot { background:var(--good); box-shadow:0 0 0 4px color-mix(in srgb, var(--good) 20%, transparent); }

h2 { margin:12px 0 3px; font-size:1.3rem; letter-spacing:-.02em; font-weight:700; }
.mode { color:var(--accent); font-size:.76rem; font-weight:700;
        text-transform:uppercase; letter-spacing:.09em; margin:1px 0 4px; }

.addr-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.addr {
  color:var(--muted);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.82rem;
  word-break:break-all;
}
.addr-btn {
  cursor:pointer; border:1px solid var(--line); border-radius:7px;
  background:transparent; color:var(--muted);
  font:inherit; font-size:.68rem; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; padding:2px 8px;
  transition:color .15s ease, border-color .15s ease;
  text-decoration:none; display:inline-block; line-height:1.5;
}
.addr-btn:hover { color:var(--accent); border-color:color-mix(in srgb, var(--accent) 50%, var(--line)); }
.addr-btn.copied { color:var(--good); border-color:color-mix(in srgb, var(--good) 50%, var(--line)); }

.count { font-size:2.9rem; line-height:1; margin:18px 0 3px; letter-spacing:-.04em;
         font-weight:800; font-variant-numeric:tabular-nums;
         color:color-mix(in srgb, var(--accent) 62%, var(--ink)); }
.count small { font-size:.92rem; font-weight:600; color:var(--muted); letter-spacing:0; }
.off .count { color:var(--muted); }
.slots { margin:6px 0 2px; }
.track.slim { height:4px; }
.meta { color:var(--muted); font-size:.85rem; }

.bars { margin-top:18px; display:grid; gap:11px; }
.bar-label { display:flex; justify-content:space-between; font-size:.76rem; color:var(--muted);
             font-variant-numeric:tabular-nums; }
.track { height:6px; border-radius:99px; background:color-mix(in srgb, var(--line) 85%, transparent); overflow:hidden; }
.fill { height:100%; border-radius:99px;
        background:var(--accent); transition:width .5s ease; }
.fill.hot { background:linear-gradient(90deg, #ffb020, var(--bad)); }

.names { display:flex; flex-wrap:wrap; gap:7px; margin-top:16px; }
.spark-wrap { margin-top:14px; }
.spark-label { display:flex; justify-content:space-between; font-size:.68rem;
               color:var(--muted); text-transform:uppercase; letter-spacing:.09em;
               font-weight:700; margin-bottom:4px; font-variant-numeric:tabular-nums; }
.spark { display:block; width:100%; height:56px; }
.spark polyline { fill:none; stroke:var(--accent); stroke-width:2;
                  stroke-linejoin:round; stroke-linecap:round; opacity:.95; }
.spark polygon { fill:color-mix(in srgb, var(--accent) 14%, transparent); stroke:none; }
.spark .spark-base { stroke:color-mix(in srgb, var(--line) 85%, transparent);
                     stroke-width:1; fill:none; }
.spark circle { fill:var(--accent); opacity:0; }
.spark .pt:hover circle { opacity:1; }
.pill { border:1px solid color-mix(in srgb, var(--accent) 28%, var(--line)); border-radius:8px;
        padding:4px 10px; background:color-mix(in srgb, var(--accent) 12%, transparent);
        font-size:.82rem; font-weight:600; }
.botpill { display:inline-block; margin-left:10px; vertical-align:middle; font-size:.7rem;
           font-weight:700; letter-spacing:.04em; text-transform:uppercase;
           color:var(--muted); border:1px solid var(--line); border-radius:999px;
           padding:3px 9px; background:color-mix(in srgb, var(--line) 30%, transparent); }
.empty { color:var(--muted); font-size:.85rem; }
.empty-note { color:var(--muted); text-align:center; padding:1rem 0 0; }

/* ---- offline strip ---- */
.section-label {
  display:flex; align-items:center; gap:10px; margin:30px 0 12px;
  color:var(--muted); font-size:.68rem; text-transform:uppercase;
  letter-spacing:.13em; font-weight:700;
}
.section-label::after { content:''; flex:1; height:1px; background:var(--line); }
.offline-strip { display:flex; flex-wrap:wrap; gap:8px; }
.chip {
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid var(--line); border-radius:10px; padding:7px 12px;
  background:color-mix(in srgb, var(--card) 70%, transparent);
  color:var(--muted); font-size:.85rem;
}
.chip .dot { width:6px; height:6px; box-shadow:none; opacity:.75; }
.chip .cap { opacity:.6; font-size:.76rem; font-variant-numeric:tabular-nums; }

footer { margin-top:30px; color:var(--muted); font-size:.82rem; }
footer p { margin:.2rem 0; }
footer a { color:var(--accent); text-decoration-thickness:1px; text-underline-offset:3px; }
.noscript { text-align:center; padding:2rem; }

@media (max-width:700px) {
  header { display:block; }
  .headside { align-items:flex-start; margin-top:10px; flex-direction:row; gap:14px; align-items:center; }
  main { padding-top:34px; width:calc(100% - 24px); }
}

/* Stale data: two consecutive failed polls dims the page so old numbers
   aren't mistaken for live ones. */
body.stale main { opacity:.55; transition:opacity .4s ease; }
.stamp.failed { color:var(--bad); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition:none !important; animation:none !important; }
  .card.online:hover { transform:none; }
}