/* OnSight — the public status page.
   Its own stylesheet rather than app.css: this page must load and render when
   the product itself is having a bad day, so it carries nothing it does not
   need and depends on no part of the application bundle. */

:root {
  --ink:#13294B; --ink2:#37475f; --mute:#6b7a8d; --hair:#e3e8ee;
  --paper:#f6f8fa; --bg:#fff;
  --ok:#1d8a5b; --ok-bg:#e8f6ef;
  --warn:#a06a00; --warn-bg:#fdf3e2;
  --bad:#c1373c; --bad-bg:#fdecec;
  --r:10px;
}
* { box-sizing:border-box; }
html,body { margin:0; padding:0; }
body {
  background:var(--bg); color:var(--ink);
  font:15px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
}
.wrap { max-width:840px; margin:0 auto; padding:34px 20px 70px; }
.loading { padding:60px 20px; text-align:center; color:var(--mute); }

.brand { display:flex; align-items:center; gap:12px; margin-bottom:26px; }
/* height fixed, width from the file's own ratio — the lockup is 318×100 and
   must never be squeezed to fit. */
.brand__mark { height:30px; width:auto; display:block; flex:none; }
/* Set apart from the lockup rather than run into it: this word is not part of
   the mark, and a divider says so without adding another typeface. */
.brand__tag {
  color:var(--mute); font-size:14px; font-weight:500; letter-spacing:.01em;
  padding-left:12px; border-left:1px solid var(--hair); line-height:1.1;
}

/* The banner. One sentence, and its colour is the answer. */
.banner {
  border-radius:var(--r); padding:20px 22px; margin-bottom:12px;
  display:flex; align-items:center; gap:14px;
}
.banner--ok       { background:var(--ok-bg);   border:1px solid rgba(29,138,91,.22); }
.banner--degraded { background:var(--warn-bg); border:1px solid rgba(160,106,0,.24); }
.banner--down     { background:var(--bad-bg);  border:1px solid rgba(193,55,60,.24); }
.banner__icon { width:32px; height:32px; border-radius:50%; flex:none;
                display:flex; align-items:center; justify-content:center;
                color:#fff; font-size:17px; font-weight:700; }
.banner--ok .banner__icon       { background:var(--ok); }
.banner--degraded .banner__icon { background:var(--warn); }
.banner--down .banner__icon     { background:var(--bad); }
.banner__main b { display:block; font-size:18px; letter-spacing:-.01em; }
.banner__main span { color:var(--ink2); font-size:13.5px; }

.checked { color:var(--mute); font-size:12.5px; margin:0 0 30px 2px; }

/* The fortnight strip. */
.hist { border:1px solid var(--hair); border-radius:var(--r); padding:16px 18px; margin-bottom:30px; }
.hist__head { display:flex; align-items:baseline; justify-content:space-between;
              gap:12px; margin-bottom:12px; }
.hist__head b { font-size:13.5px; }
.hist__head span { color:var(--mute); font-size:12px; }
.hist__bars { display:flex; gap:3px; align-items:flex-end; }
.hist__bar { flex:1; height:34px; border-radius:3px; background:var(--ok); min-width:6px; }
.hist__bar--degraded { background:var(--warn); }
.hist__bar--down     { background:var(--bad); }
.hist__foot { display:flex; justify-content:space-between; color:var(--mute);
              font-size:11.5px; margin-top:8px; }

.group { margin-bottom:26px; }
.group__name { font-size:12px; text-transform:uppercase; letter-spacing:.07em;
               color:var(--mute); font-weight:600; margin:0 0 10px 2px; }
.rows { border:1px solid var(--hair); border-radius:var(--r); overflow:hidden; }
.row { display:flex; align-items:center; gap:14px; padding:14px 18px;
       border-bottom:1px solid var(--hair); }
.row:last-child { border-bottom:0; }
.row__main { flex:1; min-width:0; }
.row__main b { display:block; font-weight:600; font-size:14.5px; }
.row__main span { color:var(--mute); font-size:12.5px; }
.row__note { color:var(--warn); font-size:12.5px; margin-top:3px; }
.state { display:flex; align-items:center; gap:7px; flex:none;
         font-size:12.5px; font-weight:600; white-space:nowrap; }
.state__dot { width:9px; height:9px; border-radius:50%; flex:none; }
.state--ok       { color:var(--ok); }
.state--ok .state__dot { background:var(--ok); }
.state--degraded { color:var(--warn); }
.state--degraded .state__dot { background:var(--warn); }
.state--down     { color:var(--bad); }
.state--down .state__dot { background:var(--bad); }

.foot { margin-top:40px; padding-top:20px; border-top:1px solid var(--hair);
        color:var(--mute); font-size:12.5px; }
.foot a { color:var(--ink2); }

.err { border:1px solid rgba(193,55,60,.24); background:var(--bad-bg);
       border-radius:var(--r); padding:18px 20px; color:var(--ink2); }

@media (max-width:560px) {
  .wrap { padding:24px 15px 50px; }
  .row { flex-wrap:wrap; gap:8px 14px; }
  .state { order:2; }
}