/* Voidborn status - the family's tokens; three meaning colours (good / warn / bad),
   the gold only on the interface. Reads on a phone in a hurry. */
:root{
  color-scheme:dark;
  --void:#0b0f14;--panel:#131920;--panel-2:#1a222c;--line:#243040;--line-2:#31404f;
  --ink:#f4f1ec;--dim:#cfc9c0;--mute:#9a938a;--faint:#6b655e;
  --ac:#e1ad66;--good:#5ee38a;--warn:#ffb347;--bad:#ff6b5c;--none:#2a3440;
  --disp:'Barlow Condensed','Arial Narrow',Arial,sans-serif;--text:'Barlow',Arial,Helvetica,sans-serif;
  --mono:ui-monospace,'Cascadia Mono',Consolas,Menlo,monospace;
  accent-color:var(--ac);
}
*{box-sizing:border-box}
body{margin:0;background:var(--void);color:var(--ink);font:400 16px/1.55 var(--text);min-height:100vh;display:flex;flex-direction:column}
a{color:var(--ac);text-decoration:none}a:hover{color:#fff}
h1,h2{margin:0}p{margin:0 0 .8em}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.mute{color:var(--mute)}.faint{color:var(--faint)}.ac{color:var(--ac)}
.d{font-family:var(--disp);font-weight:800;text-transform:uppercase;line-height:1.04}
.d1{font-size:clamp(32px,5vw,56px)}
.k{font-family:var(--disp);font-weight:600;text-transform:uppercase;letter-spacing:.2em;font-size:12px;color:var(--ac);margin-bottom:10px}
.k.mute{color:var(--mute)}
.btn{display:inline-flex;align-items:center;height:44px;padding:0 22px;border:2px solid var(--ac);color:var(--ac);font-family:var(--disp);font-weight:800;font-size:17px;letter-spacing:.06em;text-transform:uppercase}
.top{display:flex;align-items:center;justify-content:space-between;padding:14px 24px;border-bottom:1px solid var(--line)}
.brand{font-family:var(--disp);font-weight:800;font-size:24px;letter-spacing:.04em;text-transform:uppercase;color:#fff}
.brand .sub{color:var(--ac)}
.right{display:flex;gap:18px;align-items:center}
.home{font-size:13px;color:var(--mute)}
.lang{font-family:var(--disp);font-weight:600;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute)}
.main{flex:1;max-width:900px;width:100%;margin:0 auto;padding:36px 24px 60px}
.headline{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;align-items:center;padding:24px 28px;background:var(--panel);border-left:6px solid var(--good);margin-bottom:32px}
.headline.degraded{border-left-color:var(--warn)}.headline.down{border-left-color:var(--bad)}.headline.unknown{border-left-color:var(--mute)}
.headline .meta{grid-column:2;font-size:12px;color:var(--mute)}
.dot{width:14px;height:14px;background:var(--good);display:inline-block;flex:none}
.dot.degraded{background:var(--warn)}.dot.down{background:var(--bad)}.dot.unknown{background:var(--mute)}
.headline .dot{width:18px;height:18px}
.group{margin-bottom:28px}
.comp{background:var(--panel);padding:16px 20px;margin-bottom:8px}
.comp-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.name{font-weight:600}
.state{font-family:var(--disp);font-weight:600;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--good)}
.state.degraded{color:var(--warn)}.state.down{color:var(--bad)}.state.unknown{color:var(--mute)}
.stats{margin-left:auto;font-size:13px;color:var(--mute)}
.note{margin:8px 0 0;font-size:13px}
.bar{display:flex;gap:2px;margin-top:12px}
.day{flex:1;height:26px;background:var(--none)}
.day.ok{background:var(--good)}.day.warn{background:var(--warn)}.day.bad{background:var(--bad)}
.incidents{margin:0 0 32px}
.incident{background:var(--panel);padding:20px 24px;margin-bottom:10px;border-left:4px solid var(--line-2)}
.incident.investigating,.incident.identified{border-left-color:var(--bad)}
.incident.monitoring{border-left-color:var(--warn)}
.incident.resolved{border-left-color:var(--good)}
.inc-head{display:flex;justify-content:space-between;gap:12px;font-size:12px;margin-bottom:8px}
.badge{font-family:var(--disp);font-weight:600;font-size:12px;letter-spacing:.16em;text-transform:uppercase;padding:2px 8px;border:1px solid var(--line-2);color:var(--dim)}
.badge.investigating,.badge.identified{border-color:var(--bad);color:var(--bad)}
.badge.monitoring{border-color:var(--warn);color:var(--warn)}
.badge.resolved{border-color:var(--good);color:var(--good)}
.incident h2{font-family:var(--disp);font-weight:600;font-size:26px;line-height:1.05;margin-bottom:6px}
.incident .body{font-size:15px;color:var(--dim)}
.foot{border-top:1px solid var(--line);padding:18px 24px;font-size:12px;color:var(--mute)}
@media (max-width:600px){.main{padding:20px 14px 40px}.headline{padding:16px 18px}.day{height:18px}}