/* Blueshade Status - public page.
   Layout: navy masthead with gold rule, one centred column; summary banner, one row per production service with a
   90-day uptime strip, then notices. */
:root{
  --bg:#f2f4f8; --surface:#ffffff; --fg:#13203a; --muted:#5a6680; --line:#dce2ec; --none:#e3e7ef;
  --navy:#0f2340; --navy-fg:#eef2f9; --gold:#c49a3c;
  --ok:#1d8556; --maint:#3366c4; --warn:#a86f12; --part:#c95a22; --bad:#c23535; --unk:#7a8499;
  --ok-bg:#e5f3ec; --maint-bg:#e6edfa; --warn-bg:#f8efdc; --part-bg:#fbe9df; --bad-bg:#fae3e3; --unk-bg:#eceef3;
  --display:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif;
  --body:"IBM Plex Sans","Segoe UI",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root{
  --bg:#09121f; --surface:#101c30; --fg:#e4e9f2; --muted:#93a0b7; --line:#22314b; --none:#1c2940;
  --navy:#0c1a2f; --gold:#d9b25a;
  --ok:#3ccb8b; --maint:#7aa3f2; --warn:#e2a948; --part:#ef8a52; --bad:#f06d6d; --unk:#8b96ab;
  --ok-bg:#12291f; --maint-bg:#152340; --warn-bg:#2c2312; --part-bg:#2f1b11; --bad-bg:#311517; --unk-bg:#1a2436;
  color-scheme:dark }}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--fg);font:15px/1.55 var(--body)}
.envbar{background:repeating-linear-gradient(135deg,#c49a3c,#c49a3c 12px,#b38a2f 12px,#b38a2f 24px);color:#0f2340;font:600 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;text-align:center;padding:7px 16px}
.mast{background:var(--navy);color:var(--navy-fg);border-bottom:3px solid var(--gold);padding-inline:16px}
.mast-in{max-width:880px;margin:0 auto;padding-block:22px 64px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:12px;color:inherit;text-decoration:none}
.mark{width:34px;height:34px;border-radius:7px;background:var(--gold);color:#0f2340;display:grid;place-items:center;font:700 19px/1 var(--display)}
.word{font:700 21px/1 var(--display);letter-spacing:-.01em}
.word span{color:var(--gold);font-weight:600}
.mast-meta{font:12px/1.5 var(--mono);color:#b9c4d8;text-align:right}
main{padding-inline:16px}
.col{max-width:880px;margin:-44px auto 0;display:flex;flex-direction:column;gap:28px;padding-block:0 40px}
.banner{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:22px 24px;display:flex;gap:16px;align-items:flex-start;box-shadow:0 10px 30px -18px rgba(10,20,40,.45)}
.banner .big{width:14px;height:14px;border-radius:50%;margin-top:9px;flex:none;background:var(--c);box-shadow:0 0 0 6px var(--cbg)}
.banner h1{font:700 clamp(22px,4vw,28px)/1.2 var(--display);margin:0;text-wrap:balance;letter-spacing:-.01em}
.banner p{margin:6px 0 0;color:var(--muted)}
.banner .sub{display:flex;gap:6px 18px;flex-wrap:wrap;margin-top:12px;font:12px/1.4 var(--mono);color:var(--muted)}
.sec-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.sec-h h2{font:600 13px/1 var(--body);text-transform:uppercase;letter-spacing:.09em;color:var(--muted);margin:0}
.legend{display:flex;gap:6px 14px;flex-wrap:wrap;font-size:12px;color:var(--muted)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.svc-list{background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.svc{padding:18px 22px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 16px}
.svc + .svc{border-top:1px solid var(--line)}
.svc h3{font:600 17px/1.3 var(--display);margin:0}
.svc .desc{color:var(--muted);font-size:13px;margin:0}
.svc .head-pill{grid-column:2;grid-row:1 / span 2;align-self:center}
.svc .note{grid-column:1 / -1;margin:6px 0 0;font-size:13px}
.uptime{grid-column:1 / -1;margin-top:12px}
.bars{display:flex;gap:2px;height:30px;align-items:stretch}
.bars i{flex:1;border-radius:2px;background:var(--b,var(--none));min-width:0}
.bars i:hover{opacity:.7}
.b-ok{--b:var(--ok)} .b-warn{--b:var(--warn)} .b-part{--b:var(--part)} .b-bad{--b:var(--bad)}
.uptime-l{display:flex;justify-content:space-between;gap:10px;margin-top:6px;font:11.5px/1.3 var(--mono);color:var(--muted)}
.uptime-l b{color:var(--fg);font-weight:500}
.short{display:none}
.envs{grid-column:1 / -1;display:flex;flex-direction:column;gap:14px;margin-top:12px}
.env{border-top:1px dashed var(--line);padding-top:12px}
.env-h{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.env-name{font:500 11.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.env.is-prod .env-name{color:var(--gold)}
.env .uptime{margin-top:8px}
.env .bars{height:22px}
.dot{width:9px;height:9px;border-radius:50%;background:var(--c);flex:none;display:inline-block}
.pill{display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border-radius:999px;background:var(--cbg);color:var(--c);font:600 12px/1 var(--body);white-space:nowrap}
.s-operational{--c:var(--ok);--cbg:var(--ok-bg)} .s-maintenance{--c:var(--maint);--cbg:var(--maint-bg)}
.s-degraded{--c:var(--warn);--cbg:var(--warn-bg)} .s-partial{--c:var(--part);--cbg:var(--part-bg)}
.s-major{--c:var(--bad);--cbg:var(--bad-bg)} .s-unknown{--c:var(--unk);--cbg:var(--unk-bg)}
.notices{display:flex;flex-direction:column;gap:10px}
.notice{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--c);border-radius:10px;padding:14px 18px;display:flex;flex-direction:column;gap:8px}
.notice-top{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;align-items:center}
.notice h3{margin:0;font:600 15px/1.35 var(--body)}
.upd{display:grid;grid-template-columns:110px minmax(0,1fr);gap:2px 14px;font-size:14px}
.upd b{font-weight:600}
.upd p{margin:0;white-space:pre-wrap}
.upd time{grid-column:2;font:12px/1.4 var(--mono);color:var(--muted)}
.affects{font-size:12.5px;color:var(--muted)}
.notice .when{font-size:13.5px}
.tag{font:500 11px/1 var(--mono);text-transform:uppercase;letter-spacing:.07em;padding:4px 7px;border-radius:5px;background:var(--bg);color:var(--muted);border:1px solid var(--line)}
.empty{background:var(--surface);border:1px dashed var(--line);border-radius:10px;padding:16px 18px;color:var(--muted);font-size:14px}
.err{color:var(--bad)}
footer{max-width:880px;margin:0 auto;padding:0 0 40px;color:var(--muted);font-size:12.5px;display:flex;flex-direction:column;gap:4px}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
@media (max-width:600px){
  .svc{grid-template-columns:1fr;padding:16px}
  .svc .head-pill{grid-column:1;grid-row:auto;justify-self:start;margin-top:6px}
  .mast-meta{text-align:left}
  .bars i:nth-child(-n+60){display:none}
  .long{display:none} .short{display:inline}
  .upd{grid-template-columns:1fr} .upd time{grid-column:1}
}
@media (prefers-reduced-motion:no-preference){.banner .big{animation:pulse 2.6s ease-in-out infinite}}
@keyframes pulse{50%{box-shadow:0 0 0 9px var(--cbg)}}