@font-face {
  font-family: "Museo Sans Rounded";
  src: url("https://assets.ctfassets.net/zrqoyh8r449h/1i6QhGRxLixcCbBS8yhQ3n/a72ecfe6afbdb6673e694f7d226a4f25/museosansrounded-500-webfont.woff");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

/* Use device system font for most typography */
body {
  font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI",
    Helvetica, Arial, sans-serif;
}

/* Logo doesn't need to be as giant as the default */
.logo-container img {
  max-width: min(100%, 240px);
}

/* Bolder headers */
.font-largest {
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.1;
}

/* Swish branding on subscribe button and dropdown */
#show-updates-dropdown,
#subscribe-btn-email {
  font-family: "Museo Sans Rounded";
  text-transform: none !important;
  letter-spacing: normal !important;
  font-weight: 500 !important;
  font-size: 1rem !important;
  line-height: 1 !important;
  padding: 14px 18px !important;
  box-shadow: 0 0 0 transparent !important;
  text-shadow: 0 0 0 transparent !important;
  border-radius: 10px;
  transition: 0.2s ease background;
}
#show-updates-dropdown {
  background: #e8f7fd;
  color: #1050a4;
}
#show-updates-dropdown:hover {
  background: #caecfb !important;
}
#show-updates-dropdown:active {
  top: 0px !important;
}

/* Swish branding on button in subscribe dropdown */
#subscribe-btn-email {
  background: #1799e1;
  color: #ffffff;
}
#subscribe-btn-email:hover {
  background: #048fdc !important;
}

/* Add space below historical uptime text */
.components-uptime-link {
  margin-bottom: 12px;
}

/* Swish branding on 'all systems operational' banner */
.layout-content.status.status-index .page-status.status-none {
  border-radius: 6px;
  padding: 10px 14px;
}
.layout-content.status.status-index .page-status .status {
  font-family: "Museo Sans Rounded";
  top: auto;
}

/* Add rounded border to unresolved-incident title */
.layout-content.status.status-index .incident-title {
  border-radius: 6px 6px 0px 0px;
}
.layout-content.status.status-index .updates {
  border-radius: 0px 0px 6px 6px;
}

/* Fix unresolved-incident title vertical alignment */
.layout-content.status.status-index
  .unresolved-incidents
  .unresolved-incident
  .incident-title
  .actual-title.with-ellipsis {
  display: inline-flex;
  vertical-align: top;
}

/* Grey out days with no incidents */
.no-incidents {
  color: #7b8d9e;
}

/* Hide days with no incidents (present in the live CSS, was missing in repo) */
.no-incidents {
  display: none;
}

/* Fix alignment of scheduled maintenance titles */
.layout-content.status.status-index
  .scheduled-maintenances-container
  .scheduled-maintenance
  .incident-title
  a {
  vertical-align: unset;
}

/* Space below the "About This Site" section */
.layout-content.status.status-index .text-section {
  margin-bottom: 15px;
}

/*
 * "About This Site" legend.
 * Statuspage strips inline style="" attributes and converts every newline in the
 * About text into a <br>, so the legend can only be laid out from here.
 * Markup (see about_the_page.html): .text-section > div > div (row) > div (label) + div (text),
 * rows 1-5 = Red, Orange, Yellow, Blue, Green, last child = API docs line.
 * Colours match css_reds/oranges/yellows/blues/greens in the page config.
 */
.layout-content.status.status-index .text-section br {
  display: none;
}
.layout-content.status.status-index .text-section > div > div:has(> div) {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 8px;
  line-height: 1.3;
}
.layout-content.status.status-index
  .text-section
  > div
  > div
  > div:first-of-type:not(:last-of-type) {
  display: flex;
  align-items: center;
  flex: 0 0 90px;
  gap: 8px;
  font-weight: 600;
}
.layout-content.status.status-index
  .text-section
  > div
  > div
  > div:first-of-type:not(:last-of-type)::before {
  content: "";
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #7b8d9e;
}
.layout-content.status.status-index .text-section > div > div:nth-of-type(1) > div:first-of-type::before {
  background: #d02d10; /* red */
}
.layout-content.status.status-index .text-section > div > div:nth-of-type(2) > div:first-of-type::before {
  background: #f78f30; /* orange */
}
.layout-content.status.status-index .text-section > div > div:nth-of-type(3) > div:first-of-type::before {
  background: #fbbd1c; /* yellow */
}
.layout-content.status.status-index .text-section > div > div:nth-of-type(4) > div:first-of-type::before {
  background: #1a5fb8; /* blue */
}
.layout-content.status.status-index .text-section > div > div:nth-of-type(5) > div:first-of-type::before {
  background: #00a651; /* green */
}
.layout-content.status.status-index .text-section > div > div:not(:has(> div)) {
  margin-top: 16px;
}