/* The status page's own styles, over the Cartsome brand tokens
   (cartsome-tokens.css, copied from @autotools/ui at build time by
   scripts/build-site.mjs; its variables apply inside .cartsome, which <html>
   carries). Served from the site's own origin: CSP default-src 'self'.
   The status colours are the page's own: the brand has no status scale.
   Nothing here hides overflow: long titles and updates wrap. */

:root {
  --status-operational: #2f8f52;
  --status-degraded: #c98a00;
  --status-down: #d6402a;
  --status-maintenance: #6d5bd0;
  --status-unknown: #a9a9a1;
  /* Checkout with no heartbeat for 15 minutes: not known bad, not confirmed. */
  --status-unconfirmed: #4f7fa3;
  --banner-operational: var(--cs-lime);
  --banner-degraded: #ffd66b;
  --banner-down: var(--cs-coral);
  --banner-maintenance: var(--cs-lav);
  --banner-unknown: var(--cs-ice);
  --banner-unconfirmed: #c9dcec;
  --gap: 16px;
}

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

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

body {
  margin: 0;
  background: var(--cs-paper);
  color: var(--cs-ink);
  font-family: var(--cs-font-sans), system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

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

a {
  color: inherit;
  text-underline-offset: 3px;
}

a:focus-visible {
  outline: 2px solid var(--cs-ink);
  outline-offset: 2px;
}

.wrap {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 0 var(--gap);
}

/* Header and footer */

.site-header .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 24px;
  padding-top: 20px;
  padding-bottom: 20px;
}

.brand {
  font-weight: 700;
  font-size: 1.125rem;
  text-decoration: none;
}

.nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
}

.nav a {
  color: var(--cs-muted);
}

.nav a[aria-current="page"] {
  color: var(--cs-ink);
  text-decoration: none;
  font-weight: 600;
}

main.wrap {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding-bottom: 48px;
}

.site-footer {
  border-top: 1px solid var(--cs-line);
  color: var(--cs-muted);
  font-size: 0.875rem;
}

.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  padding-top: 20px;
  padding-bottom: 32px;
}

.site-footer .links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
}

/* Banner */

.banner {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px;
  border: var(--cs-border);
  border-radius: var(--cs-radius-card);
  box-shadow: var(--cs-shadow-card);
  background: var(--banner-unknown);
}

.banner--operational { background: var(--banner-operational); }
.banner--degraded { background: var(--banner-degraded); }
.banner--down { background: var(--banner-down); }
.banner--maintenance { background: var(--banner-maintenance); }
.banner--unconfirmed { background: var(--banner-unconfirmed); }

.banner__title {
  font-size: 1.5rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.banner__stale,
.banner__note {
  display: none;
}

.checked {
  font-family: var(--cs-font-mono), ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.875rem;
}

/* Open incidents and maintenance; the incident history */

.open,
.month {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

h2 {
  font-size: 1.125rem;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.page-title {
  font-size: 1.75rem;
  line-height: 1.2;
}

.incidents {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.incident {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  background: var(--cs-cream);
  border: 1px solid var(--cs-line);
  border-left: 6px solid var(--status-degraded);
  border-radius: var(--cs-radius-input);
  min-width: 0;
}

.incident--major { border-left-color: var(--status-down); }
.incident--none { border-left-color: var(--status-unknown); }
.incident--maintenance { border-left-color: var(--status-maintenance); }

.incident__title {
  font-size: 1rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.incident__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tag {
  padding: 1px 10px;
  border: 1px solid var(--cs-line);
  border-radius: var(--cs-radius-pill);
  background: var(--cs-paper);
  font-size: 0.8125rem;
}

.incident__window,
.incident__affects,
.incident__update,
.update__head {
  color: var(--cs-muted);
  font-size: 0.875rem;
  overflow-wrap: anywhere;
}

.incident__update strong,
.update__head strong {
  color: var(--cs-ink);
}

.incident__text,
.update__text {
  overflow-wrap: anywhere;
}

.updates {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0 0 0 14px;
  border-left: 2px solid var(--cs-line);
  list-style: none;
}

.open__none,
.history__none {
  color: var(--cs-muted);
}

/* Groups, components and bars */

.group {
  display: flex;
  flex-direction: column;
  gap: 12px;
  scroll-margin-top: 16px;
}

.group__head,
.component__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 12px;
}

.components {
  margin: 0;
  padding: 0;
  list-style: none;
  border: var(--cs-border);
  border-radius: var(--cs-radius-card);
  background: var(--cs-cream);
}

.component {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
}

.component + .component {
  border-top: 1px solid var(--cs-line);
}

.component__name {
  font-size: 1rem;
  overflow-wrap: anywhere;
}

.component__help {
  color: var(--cs-muted);
  font-size: 0.875rem;
}

.status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
}

.status::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--dot, var(--status-unknown));
}

.status--operational { --dot: var(--status-operational); }
.status--degraded { --dot: var(--status-degraded); }
.status--down { --dot: var(--status-down); }
.status--maintenance { --dot: var(--status-maintenance); }
.status--unconfirmed { --dot: var(--status-unconfirmed); }

.bars {
  display: grid;
  grid-template-columns: repeat(90, minmax(0, 1fr));
  gap: 2px;
  height: 34px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bar {
  border-radius: 2px;
  background: var(--status-unknown);
}

.bar--operational { background: var(--status-operational); }
.bar--degraded { background: var(--status-degraded); }
.bar--down { background: var(--status-down); }
.bar--maintenance { background: var(--status-maintenance); }

.component__foot {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 4px 12px;
  color: var(--cs-muted);
  font-size: 0.8125rem;
}

.uptime {
  text-align: center;
  overflow-wrap: anywhere;
  color: var(--cs-ink);
  font-weight: 600;
}

/* On a phone all 90 days still show: a 1 px gap leaves each bar about
   1.8 px wide at 320 px. */
@media (max-width: 599px) {
  .bars {
    gap: 1px;
  }

  .bar {
    border-radius: 0;
  }
}

/* Stale or never run: everything that carries a status turns grey, and the
   banner says why. assets/checked.js sets data-stale on an open page once
   the last run is too old. */

[data-stale] .banner {
  background: var(--banner-unknown);
}

[data-stale] .banner__live {
  display: none;
}

[data-stale] .banner__stale,
[data-stale] .banner__note {
  display: block;
}

[data-stale] .bar,
[data-stale] .status {
  --dot: var(--status-unknown);
  background: var(--status-unknown);
}

[data-stale] .status {
  background: none;
  color: var(--cs-muted);
}

/* A resolved incident's postmortem, under its updates on /incidents */

.postmortem {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--cs-line);
  min-width: 0;
}

.postmortem__title,
.postmortem h5 {
  margin: 0;
}

.postmortem__title {
  font-size: 1rem;
  line-height: 1.35;
}

.postmortem h5 {
  font-size: 0.875rem;
  line-height: 1.35;
  color: var(--cs-muted);
}

.postmortem__impact,
.postmortem__cause,
.postmortem__fixes {
  margin: 0;
  overflow-wrap: anywhere;
}

.postmortem__impact dt {
  font-weight: 600;
}

.postmortem__impact dd {
  margin: 0 0 6px;
}

.postmortem__fixes {
  padding-left: 20px;
}