/* Public status pages (crates/webv2/src/status_site.rs), loaded only on the
   status host. One column, the brand's cobalt for links, the app's status
   colours for states. Light and dark follow the reader's preference; there
   is no script and so no toggle.

   States
   up        green   operational, a day without downtime
   degraded  amber   slow or failing in part
   minor     orange  a day with under 1 % downtime
   down      red     down, a day with more
   maint     violet  maintenance
   none      grey    not monitored, no data
   Every state is also written out next to its colour. A state has a text
   colour (--up) and, where a bar needs a stronger one in dark, a fill
   (--up-fill). */

:root {
  --bg: #f4f6fb;
  --surface: #ffffff;
  --text: #0b1533;
  --muted: #4a556e;
  --hair: #dce2ec;
  --link: #1b49c8;
  --up: #1b7f3b;
  --up-fill: #1b7f3b;
  --up-soft: #e6f4ea;
  --degraded: #b26a00;
  --degraded-fill: #f2a900;
  --degraded-soft: #fdf3dc;
  --minor-fill: #f57c00;
  --down: #c62828;
  --down-fill: #c62828;
  --down-soft: #fdeaea;
  --maint: #6b4fa0;
  --maint-soft: #efeaf8;
  --none: #5b6470;
  --none-fill: #c9d0dc;
  --none-soft: #eef1f6;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0a1022;
    --surface: #111933;
    --text: #e8ecf7;
    --muted: #aeb8d2;
    --hair: #27335a;
    --link: #9db6ff;
    --up: #6fcf86;
    --up-fill: #2f9e52;
    --up-soft: #12301f;
    --degraded: #f6c453;
    --degraded-fill: #f2b31a;
    --degraded-soft: #33290f;
    --minor-fill: #ff9d3d;
    --down: #ff8a8a;
    --down-fill: #e5484d;
    --down-soft: #3a1717;
    --maint: #b79cf0;
    --maint-soft: #231b3d;
    --none: #aeb8d2;
    --none-fill: #3a4568;
    --none-soft: #161f3d;
    color-scheme: dark;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
}

a {
  color: var(--link);
}

h1,
h2,
h3,
p,
ul {
  margin: 0;
}

ul {
  padding: 0;
  list-style: none;
}

.wrap {
  width: 100%;
  max-width: 46rem;
  margin: 0 auto;
  padding: 0 1.25rem;
}

.skip {
  position: absolute;
  left: -999px;
  top: 0;
  padding: 0.5rem 0.75rem;
  background: var(--surface);
}

.skip:focus {
  left: 0;
}

.muted {
  color: var(--muted);
}

/* Title */

.head {
  padding: 3rem 0 1.5rem;
}

.head h1 {
  font-size: clamp(1.75rem, 5vw, 2.25rem);
  line-height: 1.15;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.lede {
  margin-top: 0.5rem;
  color: var(--muted);
  white-space: pre-line;
  overflow-wrap: anywhere;
}

/* States: text colour, soft background and dot */

.is-up {
  --state: var(--up);
  --state-soft: var(--up-soft);
}

.is-degraded {
  --state: var(--degraded);
  --state-soft: var(--degraded-soft);
}

.is-down {
  --state: var(--down);
  --state-soft: var(--down-soft);
}

.is-maint {
  --state: var(--maint);
  --state-soft: var(--maint-soft);
}

.is-none {
  --state: var(--none);
  --state-soft: var(--none-soft);
}

.dot {
  flex: none;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  background: var(--state);
}

/* The page's state */

.banner {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--state);
  border-radius: 14px;
  background: var(--state-soft);
}

.banner .dot {
  width: 1rem;
  height: 1rem;
}

.banner h2 {
  font-size: 1.375rem;
  line-height: 1.25;
  font-weight: 700;
}

.banner p {
  color: var(--muted);
  font-size: 0.875rem;
}

/* Sections */

.block {
  margin-top: 2.25rem;
}

.block > h2 {
  margin-bottom: 0.75rem;
  font-size: 1.125rem;
  font-weight: 700;
}

.services,
.rows {
  border: 1px solid var(--hair);
  border-radius: 14px;
  background: var(--surface);
}

.service,
.row {
  padding: 1rem 1.25rem;
}

.service + .service,
.row + .row {
  border-top: 1px solid var(--hair);
}

.service-top,
.row-main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem 0.75rem;
}

.service-top h3 {
  font-size: 1rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.state {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  color: var(--state);
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
}

/* A bar per day */

.bars {
  display: flex;
  gap: 2px;
  height: 2rem;
  margin-top: 0.625rem;
}

.bars span {
  flex: 1 1 0;
  min-width: 2px;
  border-radius: 2px;
}

.bars span:hover {
  opacity: 0.7;
}

.d-up {
  background: var(--up-fill);
}

.d-degraded {
  background: var(--degraded-fill);
}

.d-minor {
  background: var(--minor-fill);
}

.d-major {
  background: var(--down-fill);
}

.d-none {
  background: var(--none-fill);
}

.scale {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.375rem;
  color: var(--muted);
  font-size: 0.8125rem;
}

.scale .uptime {
  color: var(--text);
  font-weight: 600;
}

.w-60,
.w-30 {
  display: none;
}

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  margin-top: 0.75rem;
  color: var(--muted);
  font-size: 0.8125rem;
}

.legend li {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.legend span {
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 2px;
}

/* Incidents and maintenance */

.row-main {
  justify-content: flex-start;
}

.row-main strong {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.row-sub {
  margin-top: 0.125rem;
  color: var(--muted);
  font-size: 0.875rem;
}

.tag {
  padding: 0 0.5rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  color: var(--down);
  font-size: 0.75rem;
  font-weight: 600;
}

.tag-quiet {
  color: var(--muted);
}

/* A message instead of a page */

.notice {
  padding: 5rem 0 3rem;
}

.notice h1 {
  font-size: 1.75rem;
  font-weight: 700;
}

.notice p {
  margin-top: 0.5rem;
  color: var(--muted);
}

.foot {
  margin-top: 3rem;
  padding-top: 1.25rem;
  padding-bottom: 2.5rem;
  border-top: 1px solid var(--hair);
  color: var(--muted);
  font-size: 0.875rem;
}

/* Narrow screens show the newest 60, then 30 days, so a bar stays wide
   enough to point at. */

@media (max-width: 40rem) {
  .bars .old-60,
  .w-90 {
    display: none;
  }

  .w-60 {
    display: inline;
  }
}

@media (max-width: 26rem) {
  .bars .old-30,
  .w-60 {
    display: none;
  }

  .w-30 {
    display: inline;
  }

  .banner {
    padding: 1rem;
  }

  .service,
  .row {
    padding: 0.875rem 1rem;
  }
}