/* Status page. Loaded after /shared/tokens.css, /shared/base.css and /shared/site.css.
   Editorial layout in the live site's language: grid lines, eyebrow with the + mark,
   a big headline, a stat band, tag chips and ruled rows. No dashboard chrome. */

.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
.plain-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.muted {
  max-width: 68ch;
  color: var(--text--on-dark-tertiary);
  font-size: 0.9375rem;
  line-height: 1.5;
}
.pre-line {
  white-space: pre-line;
}

/* Hero ---------------------------------------------------------------------- */
.status-hero {
  --pinch-x: 78%;
  --pinch-y: 50%;
  --fan-scale: 1.1;
  /* Where the copy column ends: the container's left edge plus 43rem. The fan fades out before it. */
  --copy-end: calc(max(0px, 50% - 45rem) + 43rem);
  position: relative;
  overflow: hidden;
}
/* The same line-fan as the holding page, pinched at mid-height on the right (Sam, 25 Sep) so both
   halves show: rising to the top right, falling to the bottom left. The copy sits on the left of
   this hero, so the falling half is faded out over 12rem before the copy column rather than
   running behind the words. The scale steps keep the fan's box wider than the viewport (1008 x
   scale must exceed pinch-x x viewport width), so on the tablet and phone layouts, where the pinch
   drops to the bottom corner with no fade, the shallow lines reach the left edge instead of
   stopping at the box. Static art. */
.status-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(44rem 22rem at var(--pinch-x) var(--pinch-y), color-mix(in srgb, var(--brand--exa-orange) 10%, transparent), transparent 62%);
  pointer-events: none;
}
.status-hero_bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to right, transparent var(--copy-end), #000 calc(var(--copy-end) + 12rem));
  mask-image: linear-gradient(to right, transparent var(--copy-end), #000 calc(var(--copy-end) + 12rem));
}
.status-hero_fan {
  position: absolute;
  left: var(--pinch-x);
  top: var(--pinch-y);
  width: 1433px;
  height: 2016px;
  max-width: none;
  /* The 32 strokes cross at x = 714.893 in the SVG, 1.607px left of the box centre, so the
     graphic is nudged by that much before rotating; the crossing then lands on the pinch. */
  transform: translate(-50%, -50%) rotate(-90deg) scale(var(--fan-scale)) translate(1.607px, 0);
}
@media (min-width: 1440px) {
  .status-hero {
    --fan-scale: 1.35;
  }
}
@media (min-width: 1800px) {
  .status-hero {
    --pinch-x: 74%;
    --fan-scale: 1.75;
  }
}
@media (min-width: 2300px) {
  .status-hero {
    --fan-scale: 2.25;
  }
}
.status-hero_content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  row-gap: 1.25rem;
  max-width: 46rem;
  padding: 6rem 2rem 5rem;
}
.status-hero_content .eyebrow {
  margin-bottom: 0.5rem;
}
.status-hero_context {
  margin-top: 0.75rem;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--text--on-dark-tertiary);
}
.state-echo {
  white-space: pre-line;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text--on-dark-primary);
  font-variant-numeric: tabular-nums;
}

/* The + mark doubles as the checking indicator: orange in every state, pulses only
   while a fetch is in flight, at most three cycles (3.6 s). */
.plus {
  color: var(--brand--exa-orange);
}
/* Only in the accessibility tree while a check is running. */
.checking-text {
  display: none;
}
html[data-checking] .checking-text {
  display: inline;
}
html[data-checking] .plus svg {
  animation: plus-pulse 1.2s ease-in-out 3;
}
@keyframes plus-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}
@media (prefers-reduced-motion: reduce) {
  html[data-checking] .plus svg {
    animation: none;
  }
  html[data-checking] .checking-text {
    position: static;
    width: auto;
    height: auto;
    margin: 0 0 0 0.5rem;
    overflow: visible;
    clip: auto;
    clip-path: none;
    white-space: normal;
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 500;
    text-transform: none;
    color: var(--text--on-dark-tertiary);
  }
}

.fixture-tag {
  margin-top: 0.5rem;
  padding: 0.375rem 0.625rem;
  border: var(--border-width) solid var(--brand--exa-orange);
  color: var(--brand--exa-orange);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Live state ---------------------------------------------------------------- */
.live {
  --pill-ground: var(--surface--dark-primary);
  display: flex;
  flex-direction: column;
  row-gap: 1.25rem;
}
.live:focus-visible {
  outline: 2px solid var(--interactive--focus-ring);
  outline-offset: 6px;
}
.state {
  display: flex;
  align-items: center;
  column-gap: 1.25rem;
  flex-wrap: wrap;
}
.state__icon {
  flex: none;
  width: clamp(2.5rem, 3.6vw, 3.5rem);
  height: clamp(2.5rem, 3.6vw, 3.5rem);
  color: var(--text--on-dark-tertiary);
}
.state__label {
  margin: 0;
  overflow-wrap: break-word;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(2.5rem, 4.6vw, 4.5rem);
  line-height: 0.96;
  letter-spacing: -0.01em;
  color: var(--text--on-dark-tertiary);
}
.state[data-state="clear"] .state__icon {
  color: var(--status--success);
}
.state[data-state="clear"] .state__label,
.state[data-state="outage"] .state__label {
  color: var(--text--on-dark-primary);
}
.state[data-state="degraded"] .state__icon,
.state[data-state="degraded"] .state__label {
  color: var(--status--warning);
}
.state[data-state="outage"] .state__icon {
  color: var(--status--error);
}
.state[data-state="maintenance"] .state__icon,
.state[data-state="maintenance"] .state__label {
  color: var(--status--info-on-dark);
}
.state[data-stale="true"] .state__icon,
.state[data-stale="true"] .state__label {
  color: var(--text--on-dark-tertiary);
}
.stale-chip {
  display: none;
  padding: 0.25rem 0.5rem;
  border: var(--border-width) solid var(--status--warning);
  color: var(--status--warning);
  font-size: 0.75rem;
}
.state[data-stale="true"] .stale-chip {
  display: inline-flex;
}
.summary {
  max-width: 36rem;
  font-size: 1.125rem;
  line-height: 1.5;
  color: var(--text--on-dark-secondary);
}
.refresh-note {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--status--warning);
}

/* Figures band (the live site's stat rows split by grid columns) -------- */
.figures-band {
  border-top: var(--border-width) solid var(--border--on-dark);
  border-bottom: var(--border-width) solid var(--border--on-dark);
}
.figures {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 0 2rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.figure {
  display: flex;
  flex-direction: column;
  row-gap: 0.5rem;
  padding: 2rem 2rem 2rem 0;
}
.figure + .figure {
  padding-left: 2rem;
  border-left: var(--border-width) solid var(--border--on-dark);
}
.figure dt {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text--on-dark-tertiary);
}
.figure dd {
  margin: 0;
}
.figure__value {
  overflow-wrap: anywhere;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.375rem;
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
  color: var(--text--on-dark-primary);
}
.figure__ago {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.9375rem;
  color: var(--text--on-dark-tertiary);
}
.figure__caption {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--text--on-dark-tertiary);
}
#probe-label[data-verdict="fallback-active"] {
  color: var(--text--on-dark-primary);
}
#probe-label[data-verdict="error"],
#probe-label[data-verdict="not-responding"],
#probe-label[data-verdict="cached-origin-failing"] {
  color: var(--status--warning);
}

.section_inner {
  position: relative;
  z-index: 1;
  padding: 0 2rem;
}

/* Banners --------------------------------------------------------------- */
.banner {
  padding: 1.5rem 0;
  border-bottom: var(--border-width) solid var(--border--on-dark);
  font-size: 1rem;
  line-height: 1.5;
}
.banner--stale {
  color: var(--status--warning);
}
.banner--maintenance {
  color: var(--text--on-dark-secondary);
}
.banner__title {
  margin-bottom: 0.75rem;
  color: var(--status--info-on-dark);
}
.maintenance + .maintenance {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: var(--border-width) solid var(--border--on-dark);
}
.maintenance a {
  color: var(--text--on-dark-primary);
}
.maintenance__window {
  margin-top: 0.25rem;
  font-variant-numeric: tabular-nums;
}

/* Sections ------------------------------------------------------------- */
.section {
  padding: 3.5rem 0 4rem;
}
.section + .section {
  border-top: var(--border-width) solid var(--border--on-dark);
}
.section_lede {
  margin: -0.75rem 0 1.5rem;
  max-width: 68ch;
}
.section--secondary .heading-style-h3 {
  font-size: clamp(1.5rem, 2vw, 1.75rem);
  color: var(--text--on-dark-secondary);
}
.section--secondary .component__name {
  font-weight: 400;
  color: var(--text--on-dark-secondary);
}
.section--secondary .details summary {
  font-weight: 400;
}
.heading-style-h3 {
  overflow-wrap: anywhere;
  margin-bottom: 1.5rem;
  font-size: clamp(1.75rem, 2.6vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.incident {
  padding: 1.75rem 0;
  border-top: var(--border-width) solid var(--border--on-dark);
}
.incident__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.75rem 1rem;
  margin-bottom: 0.75rem;
}
.incident__title {
  font-size: 1.375rem;
  line-height: 1.2;
  margin: 0;
  flex: 1 1 24rem;
}
.incident__title a {
  color: var(--text--on-dark-primary);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25rem;
}
.incident__title a:hover {
  text-decoration-color: var(--brand--exa-orange);
}
.chip {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-heading);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--text--link-on-dark);
}
.chip[data-impact="major"],
.chip[data-impact="critical"],
.incident[data-impact="major"] .chip:not([data-impact]),
.incident[data-impact="critical"] .chip:not([data-impact]) {
  color: var(--status--warning);
}
.incident__body {
  max-width: 68ch;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--text--on-dark-secondary);
}
.incident__meta {
  max-width: 68ch;
  margin-top: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--text--on-dark-tertiary);
  font-variant-numeric: tabular-nums;
}
.incident__meta + .incident__meta {
  margin-top: 0.125rem;
}
.incident__note {
  margin-top: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--text--on-dark-tertiary);
}

/* Components ------------------------------------------------------------ */
.components {
  list-style: none;
  margin: 0;
  padding: 0;
}
.component {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  padding: 1.125rem 0;
  border-top: var(--border-width) solid var(--border--on-dark);
}
.component__name {
  font-weight: 500;
  font-size: 1.125rem;
  line-height: 1.4;
}
.component__status {
  display: inline-flex;
  align-items: center;
  column-gap: 0.625rem;
  font-weight: 500;
  font-size: 0.9375rem;
  color: var(--text--on-dark-secondary);
}
.component__status::before {
  content: "";
  width: 0.625rem;
  height: 0.625rem;
  background: var(--text--on-dark-tertiary);
}
.component__status[data-status="operational"]::before {
  background: var(--status--success);
}
.component__status[data-status="degraded_performance"]::before,
.component__status[data-status="partial_outage"]::before {
  background: var(--status--warning);
}
.component__status[data-status="major_outage"]::before {
  background: var(--status--error);
}
.component__status[data-status="under_maintenance"]::before {
  background: var(--status--info-on-dark);
}
.component__note {
  flex-basis: 100%;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--text--on-dark-tertiary);
}
.components--muted .component__name,
.components--muted .component__status {
  color: var(--text--on-dark-tertiary);
}

.details {
  border-top: var(--border-width) solid var(--border--on-dark);
}
.details:last-of-type {
  border-bottom: var(--border-width) solid var(--border--on-dark);
}
.details summary {
  display: flex;
  align-items: center;
  column-gap: 0.75rem;
  padding: 1.125rem 0;
  font-weight: 500;
  font-size: 1.125rem;
  line-height: 1.4;
  cursor: pointer;
  list-style: none;
}
.details summary::-webkit-details-marker {
  display: none;
}
.details summary::before {
  content: "+";
  flex: none;
  width: 1rem;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--brand--exa-orange);
  text-align: center;
}
.details[open] summary::before {
  content: "–";
}
.details > .muted {
  padding-bottom: 1rem;
}
.details .components {
  padding-bottom: 1rem;
}
#app-notes-wrap {
  margin-top: 1.5rem;
}
.indicator {
  margin-top: 1.5rem;
}

.noscript {
  padding-top: 2rem;
  padding-bottom: 2rem;
  color: var(--status--warning);
}

/* Breakpoints ----------------------------------------------------------- */
@media (max-width: 991px) {
  .status-hero {
    --pinch-x: 88%;
    --pinch-y: 96%;
    --fan-scale: 0.9;
  }
  .status-hero_bg {
    -webkit-mask-image: none;
    mask-image: none;
  }
  .status-hero_content {
    padding: 4rem 1.5rem 3.5rem;
  }
  .figures,
  .section_inner {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  .figures {
    grid-template-columns: 1fr;
  }
  .figure {
    padding: 1.5rem 0;
  }
  .figure + .figure {
    padding-left: 0;
    border-left: 0;
    border-top: var(--border-width) solid var(--border--on-dark);
  }
  .footer_layout--3 {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 767px) {
  .status-hero {
    --pinch-x: 84%;
    --fan-scale: 0.8;
  }
  .status-hero_content {
    padding: 2.5rem 1rem 2.5rem;
    row-gap: 1rem;
  }
  .state {
    flex-wrap: nowrap;
    align-items: flex-start;
    column-gap: 0.875rem;
  }
  .state__icon {
    width: 2.25rem;
    height: 2.25rem;
    margin-top: 0.125rem;
  }
  .state__label {
    flex: 1 1 0;
    min-width: 0;
    font-size: 2.25rem;
    line-height: 1;
  }
  .stale-chip {
    align-self: flex-start;
  }
  .figures,
  .section_inner {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .section {
    padding: 2.5rem 0;
  }
  .footer_layout--3 {
    grid-template-columns: 1fr;
  }
}