:root,
[data-theme="light"] {
  --sp-accent: #f05243;
  --sp-accent-soft: rgba(240, 82, 67, 0.2);
  --sp-page: #f6f3f2;
  --sp-surface: #ffffff;
  --sp-ink: #1b1716;
  --sp-ink-soft: rgba(33, 26, 24, 0.5);
  --sp-muted: rgba(0, 0, 0, 0.5);
  --sp-line: #d9d9d9;
  --sp-ok: #53be70;
  --sp-ok-soft: rgba(83, 190, 112, 0.16);
  --sp-warn: #f0da5e;
  --sp-partial: #e8a317;
  --sp-bad: #f05243;
  --sp-maint: #137ee2;
  --sp-maint-soft: rgba(19, 126, 226, 0.2);
  --sp-nodata: #e8e8e8;
  --sp-badge-ok-bg: rgba(83, 190, 112, 0.16);
  --sp-badge-ok-fg: #2e8a4a;
  --sp-badge-warn-bg: rgba(240, 218, 94, 0.28);
  --sp-badge-warn-fg: #8a6d00;
  --sp-badge-partial-bg: rgba(232, 163, 23, 0.2);
  --sp-badge-partial-fg: #9a6400;
  --sp-badge-bad-bg: rgba(240, 82, 67, 0.16);
  --sp-badge-bad-fg: #c23020;
  --sp-badge-maint-bg: rgba(19, 126, 226, 0.16);
  --sp-badge-maint-fg: #0d5ea8;
  --sp-badge-resolved-bg: rgba(27, 23, 22, 0.08);
  --sp-badge-resolved-fg: #5a5e65;
  --sp-font: "Onest", system-ui, sans-serif;
  --sp-header-h: 75px;
  --sp-container-max: 1360px;
  --sp-gutter: 40px;
  --sp-container: min(var(--sp-container-max), calc(100% - (var(--sp-gutter) * 2)));
}

* { box-sizing: border-box; }

html, body.public-status {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: var(--sp-page);
  color: var(--sp-ink);
  font-family: var(--sp-font);
  -webkit-font-smoothing: antialiased;
}

body.public-status {
  overflow-x: hidden;
}

body.public-status a {
  color: var(--sp-accent);
  text-decoration: none;
}

body.public-status a:hover { color: #d63c2e; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

@keyframes pulseDot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* —— Header —— */
.sp-header {
  position: sticky;
  top: 0;
  z-index: 40;
  width: 100%;
  align-self: stretch;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px max(var(--sp-gutter), calc((100% - var(--sp-container-max)) / 2));
  gap: 24px;
}

.sp-header__brand {
  display: block;
  flex: none;
  color: inherit;
}

.sp-header__brand:hover { color: inherit; opacity: 1; }

.sp-header__logo {
  display: block;
  width: 147px;
  height: 35px;
}

.sp-header__right {
  display: flex;
  align-items: center;
  gap: 48px;
}

.sp-nav {
  display: flex;
  align-items: center;
  gap: 48px;
}

body.public-status a.sp-nav__link {
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  color: #1b1716;
  white-space: nowrap;
}

body.public-status a.sp-nav__link:hover { color: var(--sp-accent); }

body.public-status a.sp-nav__link.is-active {
  font-weight: 500;
  color: #f05243;
}

.sp-lang {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 16px;
  font-weight: 400;
  color: var(--sp-ink);
  background: none;
  border: 0;
  padding: 0;
  cursor: default;
}

.sp-lang img,
.sp-lang svg {
  width: 12px;
  height: 12px;
  color: var(--sp-accent);
}

body.public-status a.sp-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 100px;
  background: rgba(240, 82, 67, 0.2);
  color: #f05243;
  font-weight: 700;
  font-size: 16px;
  line-height: 16.5px;
  padding: 12px 32px;
  white-space: nowrap;
}

body.public-status a.sp-cta:hover {
  background: rgba(240, 82, 67, 0.32);
  color: #f05243;
}

.sp-burger {
  display: none;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}

.sp-burger span {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 1px;
  background: var(--sp-ink);
}

.sp-lang--mobile { display: none; }

/* —— Shell —— */
.sp-shell {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  gap: 32px;
  padding-bottom: 64px;
}

.sp-wrap {
  width: var(--sp-container);
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.sp-footer {
  width: var(--sp-container);
  margin-top: 24px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 13px;
  color: var(--sp-muted);
}

/* —— Hero —— */
.sp-hero {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.sp-hero__top {
  display: flex;
  flex-direction: row;
  gap: 20px;
  align-items: stretch;
}

.sp-banner {
  position: relative;
  width: 440px;
  height: 251px;
  min-height: 251px;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.2);
  display: flex;
  flex-direction: column;
  padding: 32px 24px;
  justify-content: space-between;
  align-items: flex-start;
  flex: none;
  background: var(--sp-ok);
  color: #fff;
}

.sp-banner.status-operational {
  background: var(--sp-ok);
  color: #fff;
  box-shadow: none;
  border: 2px solid rgba(255, 255, 255, 0.2);
}
.sp-banner.status-degraded,
.sp-banner.status-partial_outage {
  background: var(--sp-surface);
  color: var(--sp-ink);
  box-shadow: none;
  border: 2px solid rgba(255, 255, 255, 0.2);
}
.sp-banner.status-major_outage {
  background: var(--sp-bad);
  color: #fff;
  box-shadow: none;
  border: 2px solid rgba(255, 255, 255, 0.2);
}
.sp-banner.status-under_maintenance {
  background: var(--sp-surface);
  color: var(--sp-ink);
  box-shadow: none;
  border: 2px solid rgba(255, 255, 255, 0.2);
}

.sp-banner__art {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  border-radius: 12px;
  pointer-events: none;
}

.sp-banner__copy,
.sp-banner__meta {
  position: relative;
  z-index: 1;
  flex: none;
}

.sp-banner__title {
  margin: 0;
  width: 336px;
  max-width: 100%;
  font-weight: 700;
  font-size: 32px;
  line-height: 1.2;
  white-space: normal;
  color: #fff;
}

.sp-banner.status-under_maintenance .sp-banner__title {
  width: 223px;
}

.sp-banner.status-degraded .sp-banner__title,
.sp-banner.status-partial_outage .sp-banner__title,
.sp-banner.status-under_maintenance .sp-banner__title {
  color: var(--sp-ink);
}

.sp-banner.status-degraded .sp-banner__title,
.sp-banner.status-partial_outage .sp-banner__title {
  width: 223px;
}

.sp-banner.status-major_outage .sp-banner__title {
  color: #fff;
  width: 223px;
}

.sp-banner.status-under_maintenance .sp-banner__title-lead { color: var(--sp-maint); }

.sp-banner.status-under_maintenance .sp-banner__title-rest { color: var(--sp-ink); }

.sp-banner__patience {
  margin: 8px 0 0;
  width: 197px;
  max-width: 100%;
  font-size: 16px;
  line-height: 1.4;
  font-weight: 400;
  opacity: 0.5;
  color: inherit;
}

.sp-banner.status-major_outage .sp-banner__patience { opacity: 0.8; color: #fff; }

.sp-banner.status-operational .sp-banner__patience,
.sp-banner.status-under_maintenance .sp-banner__patience { display: none; }

.sp-banner__meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  justify-content: center;
}

.sp-banner__meta-label {
  margin: 0;
  opacity: 0.6;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.3;
}

.sp-banner.status-degraded .sp-banner__meta-label,
.sp-banner.status-partial_outage .sp-banner__meta-label {
  color: var(--sp-ink);
}

.sp-banner.status-under_maintenance .sp-banner__meta-label {
  color: var(--sp-ink);
}

.sp-banner__meta-value {
  margin: 0;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.2;
}

.sp-check-wrap {
  position: absolute;
  pointer-events: none;
  overflow: hidden;
  flex-shrink: 0;
}

.sp-check-wrap--soft,
.sp-check-wrap--faint {
  width: 31.875rem;
  height: 26.75rem;
}

.sp-check-wrap--soft {
  opacity: 0.1;
  left: 2rem;
  top: -1.875rem;
}

.sp-check-wrap--faint {
  opacity: 0.2;
  left: -11.5rem;
  top: -15rem;
}

.sp-check-wrap--soft .sp-check-group,
.sp-check-wrap--faint .sp-check-group {
  position: absolute;
  left: 1.0625rem;
  top: 0.005625rem;
  width: 449.513px;
  height: auto;
  overflow: visible;
}

.sp-check-wrap--big {
  width: 20.3525rem;
  height: 17.108125rem;
  left: 10.1875rem;
  top: 3.714375rem;
  transform-origin: 0 0;
  transform: rotate(-8.908deg);
  overflow: hidden;
}

.sp-check-wrap--big .sp-check-group {
  position: absolute;
  left: 0.67875rem;
  top: 0.00375rem;
  width: 287.02px;
  height: auto;
  overflow: visible;
}

.sp-burst {
  display: none;
  position: absolute;
  overflow: visible;
}

.sp-burst__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sp-burst__tint { display: none; }

.sp-banner.status-degraded .sp-burst--warn,
.sp-banner.status-partial_outage .sp-burst--warn {
  display: block;
  left: 150px;
  top: -27px;
  width: 371px;
  height: 371px;
  overflow: hidden;
  isolation: isolate;
}

.sp-banner.status-degraded .sp-burst--warn .sp-burst__tint,
.sp-banner.status-partial_outage .sp-burst--warn .sp-burst__tint {
  display: block;
  position: absolute;
  left: 9px;
  top: 20px;
  width: 336px;
  height: 323px;
  mix-blend-mode: hard-light;
  background: var(--sp-warn);
  -webkit-mask-image: url("/public/img/status-burst.png");
  mask-image: url("/public/img/status-burst.png");
  -webkit-mask-size: 371px 371px;
  mask-size: 371px 371px;
  -webkit-mask-position: -9px -20px;
  mask-position: -9px -20px;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.sp-banner.status-major_outage .sp-burst--bad { display: block; }

.sp-banner.status-major_outage .sp-burst--blur-a,
.sp-banner.status-major_outage .sp-burst--blur-b {
  display: flex;
  align-items: center;
  justify-content: center;
}

.sp-burst--blur-a {
  left: 73.32px;
  top: 47.32px;
  width: 320.145px;
  height: 320.145px;
}

.sp-burst--blur-a .sp-burst__img {
  width: 256.42px;
  height: 256.42px;
  opacity: 0.3;
  filter: blur(4px);
  transform: rotate(-16.986deg);
}

.sp-burst--blur-b {
  left: 277px;
  top: -111px;
  width: 308.26px;
  height: 308.26px;
}

.sp-burst--blur-b .sp-burst__img {
  width: 256.42px;
  height: 256.42px;
  opacity: 0.3;
  filter: blur(4px);
  transform: rotate(-13.218deg);
}

.sp-burst--main {
  left: 150px;
  top: -27px;
  width: 371px;
  height: 371px;
}

.sp-burst--blur-c {
  left: -153px;
  top: -180px;
  width: 354px;
  height: 354px;
  opacity: 0.4;
  filter: blur(4px);
}

.sp-banner.status-operational .sp-burst,
.sp-banner.status-under_maintenance .sp-burst,
.sp-banner.status-operational .sp-maint-orb,
.sp-banner.status-degraded .sp-maint-orb,
.sp-banner.status-partial_outage .sp-maint-orb,
.sp-banner.status-major_outage .sp-maint-orb,
.sp-banner.status-operational .sp-maint-tools,
.sp-banner.status-degraded .sp-maint-tools,
.sp-banner.status-partial_outage .sp-maint-tools,
.sp-banner.status-major_outage .sp-maint-tools { display: none; }

.sp-banner.status-degraded .sp-check-wrap,
.sp-banner.status-partial_outage .sp-check-wrap,
.sp-banner.status-major_outage .sp-check-wrap,
.sp-banner.status-under_maintenance .sp-check-wrap { display: none; }

.sp-maint-orb {
  display: none;
  position: absolute;
  left: 282px;
  top: 108px;
  width: 121px;
  height: 121px;
  border-radius: 50%;
  background: var(--sp-maint);
}

.sp-maint-tools {
  display: none;
  position: absolute;
  left: 220px;
  top: 31px;
  width: 261px;
  height: 261px;
  object-fit: cover;
}

.sp-banner.status-under_maintenance .sp-maint-orb,
.sp-banner.status-under_maintenance .sp-maint-tools { display: block; }

.sp-stats {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.sp-card {
  border-radius: 16px;
  background: #ffffff;
  box-shadow: none;
  display: flex;
  flex-direction: row;
  gap: 32px;
  padding: 0 24px;
  align-items: center;
  flex: 1;
  min-height: 120px;
}

.sp-card--services {
  flex: none;
  height: 119.5px;
  min-height: 119.5px;
  align-self: stretch;
}

.sp-card__intro {
  width: 188px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: none;
}

.sp-card__title {
  margin: 0;
  font-weight: 500;
  font-size: 20px;
  line-height: 1.2;
  color: var(--sp-ink);
}

.sp-card__hint {
  display: flex;
  flex-direction: row;
  gap: 6px;
  align-items: center;
  margin: 0;
  opacity: 0.5;
  font-weight: 300;
  font-size: 14px;
  line-height: 1.2;
  color: var(--sp-ink);
}

.sp-card__hint img,
.sp-card__hint svg {
  width: 20px;
  height: 20px;
  flex: none;
}

.sp-metrics {
  display: flex;
  flex-direction: row;
  gap: 16px;
  align-items: stretch;
  flex: 1;
  min-width: 0;
}

.sp-metric {
  display: flex;
  flex-direction: row;
  gap: 16px;
  padding: 12px;
  align-items: center;
  flex: 1;
  min-width: 0;
}

.sp-metric__icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--sp-page);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  color: var(--sp-ink);
}

.sp-metric__icon img,
.sp-metric__icon svg {
  width: 20px;
  height: 20px;
  opacity: 0.4;
  color: inherit;
}

.sp-icon-svg {
  display: block;
  flex: none;
  color: inherit;
}

.sp-metric__icon--maint { background: var(--sp-maint-soft); color: var(--sp-maint); }
.sp-metric__icon--maint img,
.sp-metric__icon--maint svg { opacity: 1; }

.sp-metric__icon--issues { background: var(--sp-accent-soft); color: var(--sp-accent); }
.sp-metric__icon--issues img,
.sp-metric__icon--issues svg { opacity: 1; }

.sp-metric__icon--ok { background: var(--sp-ok-soft); color: var(--sp-ok); }
.sp-metric__icon--ok img,
.sp-metric__icon--ok svg { opacity: 1; }

.sp-metric__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.sp-metric__num {
  margin: 0;
  font-weight: 600;
  font-size: 24px;
  line-height: 1.2;
  color: var(--sp-ink);
}

.sp-metric__num--ok { color: var(--sp-ok); }

.sp-metric__label {
  margin: 0;
  opacity: 0.5;
  font-weight: 300;
  font-size: 14px;
  line-height: 1.2;
  color: var(--sp-ink);
  display: flex;
  flex-direction: row;
  gap: 6px;
  flex-wrap: wrap;
}

body.public-status .sp-metric__label a,
body.public-status .sp-metric__label a:hover {
  color: inherit;
  text-decoration: underline;
}

.sp-rule {
  width: 1px;
  background: var(--sp-page);
  flex: none;
  align-self: stretch;
}

/* —— Locations —— */
.sp-locations {
  display: flex;
  flex-direction: row;
  gap: 20px;
  align-items: flex-start;
}

.sp-filter {
  width: 210px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: none;
}

.sp-filter__title {
  margin: 0;
  font-weight: 500;
  font-size: 24px;
  line-height: 1.2;
}

.sp-filter__list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sp-filter__btn {
  height: 44px;
  overflow: hidden;
  border-radius: 12px;
  background: var(--sp-surface);
  border: 1px solid transparent;
  display: flex;
  flex-direction: row;
  gap: 10px;
  padding: 10px 16px;
  align-items: center;
  width: 100%;
  cursor: pointer;
  color: var(--sp-ink);
  text-align: left;
  font: inherit;
}

.sp-filter__btn:hover {
  box-shadow: inset 0 0 0 1px rgba(240, 82, 67, 0.35);
}

.sp-filter__btn.is-active {
  border: 1px solid var(--sp-accent);
  border-bottom-width: 2px;
  box-shadow: none;
}

.sp-filter__name {
  flex: 1;
  font-weight: 300;
  font-size: 16px;
  line-height: 24px;
  opacity: 0.4;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sp-filter__btn.is-active .sp-filter__name {
  font-weight: 600;
  opacity: 1;
}

.sp-filter__mark {
  width: 20px;
  height: 20px;
  flex: none;
}

.sp-filter__mark--on {
  display: none;
  color: #f05243;
}

.sp-filter__mark--off {
  color: #1b1716;
  opacity: 0.3;
}

.sp-filter__btn.is-active .sp-filter__mark--on { display: block; }
.sp-filter__btn.is-active .sp-filter__mark--off { display: none; }

.sp-flag {
  width: 24px;
  height: 24px;
  object-fit: cover;
  border-radius: 50%;
  overflow: hidden;
  flex: none;
  background: transparent;
}

.sp-cards {
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex: 1;
  min-width: 0;
}

.sp-loc {
  border-radius: 12px;
  background: #ffffff;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sp-loc[hidden] { display: none; }

.sp-loc__head {
  display: flex;
  flex-direction: row;
  gap: 16px;
  padding: 16px 20px;
  align-items: center;
}

.sp-loc__head .sp-flag {
  width: 36px;
  height: 36px;
  flex: none;
}

.sp-loc__head-main {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  flex: 1;
  min-width: 0;
}

.sp-loc__name {
  margin: 0;
  font-weight: 600;
  font-size: 24px;
  line-height: 1;
  color: #1b1716;
}

.sp-loc__state {
  display: flex;
  flex-direction: row;
  gap: 8px;
  justify-content: flex-end;
  align-items: center;
  margin-left: auto;
  flex: none;
}

.sp-loc__state-label {
  font-size: 12px;
  line-height: 1;
  color: #8c8f97;
}

.status-pulse {
  width: 8px;
  height: 8px;
  border-radius: 100px;
  background: var(--sp-ok);
  flex: none;
  animation: pulseDot 2.4s ease-in-out infinite;
}

.status-pulse.status-operational { background: var(--sp-ok); }
.status-pulse.status-degraded { background: var(--sp-warn); }
.status-pulse.status-partial_outage { background: var(--sp-partial); }
.status-pulse.status-major_outage { background: var(--sp-bad); }
.status-pulse.status-under_maintenance { background: var(--sp-maint); }

.status-pulse__ring,
.status-pulse__core { display: none; }

.sp-loc__divider {
  height: 1px;
  opacity: 0.4;
  background: var(--sp-line);
}

.sp-loc__row {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "label label"
    "bars bars"
    "avg today";
  gap: 10px;
  padding: 0 20px 16px;
}

.sp-loc__row-label {
  grid-area: label;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.1px;
}

.uptime-history {
  grid-area: bars;
  position: relative;
}

.uptime-bars {
  display: flex;
  flex-direction: row;
  gap: 2px;
  height: 28px;
  align-items: stretch;
  width: 100%;
}

.uptime-bar {
  flex: 1 1 0;
  min-width: 0;
  height: 28px;
  border-radius: 2px;
  background: var(--sp-ok);
  cursor: pointer;
}

.uptime-bar:focus-visible {
  outline: 2px solid var(--sp-ink);
  outline-offset: 1px;
}

.uptime-bar.bar-operational { background: var(--sp-ok); }
.uptime-bar.bar-degraded { background: var(--sp-warn); }
.uptime-bar.bar-partial_outage { background: var(--sp-partial); }
.uptime-bar.bar-under_maintenance { background: var(--sp-maint); }
.uptime-bar.bar-major_outage { background: var(--sp-bad); }
.uptime-bar.bar-nodata { background: var(--sp-nodata); }

.sp-loc__avg {
  grid-area: avg;
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 4px;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.1px;
  font-weight: 300;
  color: var(--sp-ink-soft);
}

.sp-loc__avg-sep[hidden],
.sp-loc__avg [data-online-streak][hidden] {
  display: none;
}

.sp-loc__avg [data-uptime-pct] {
  font-weight: 400;
  color: var(--sp-ink);
}

.sp-loc__today {
  grid-area: today;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.1px;
  font-weight: 400;
  color: #5a5e65;
  justify-self: end;
  align-self: center;
}

.sp-loc__axis { display: none; }

/* —— Notices / incidents —— */
.sp-panel {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.sp-panel[hidden] { display: none; }

.notices {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.section-title {
  margin: 0;
  font-size: 24px;
  font-weight: 500;
}

.notices-empty {
  border-radius: 12px;
  background: var(--sp-surface);
  padding: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.notices-empty p { margin: 0; color: var(--sp-muted); }

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sp-ok);
  flex: none;
}

.notices-stack { display: flex; flex-direction: column; gap: 12px; }

.incident {
  border-radius: 12px;
  background: var(--sp-surface);
  padding: 20px 24px;
  border-left: 3px solid var(--sp-maint);
}

.incident--severity-minor { border-left-color: var(--sp-warn); }
.incident--severity-major { border-left-color: var(--sp-partial); }
.incident--severity-critical { border-left-color: var(--sp-bad); }
.incident--status-degraded { border-left-color: var(--sp-warn); }
.incident--status-partial_outage { border-left-color: var(--sp-partial); }
.incident--status-major_outage { border-left-color: var(--sp-bad); }
.incident--maintenance { border-left-color: var(--sp-maint); }

.incident header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.incident h3 { margin: 0; font-size: 18px; font-weight: 600; }

.incident__badges { display: flex; gap: 8px; flex-wrap: wrap; }

.incident__window {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--sp-muted);
}

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

.updates time {
  display: block;
  font-size: 12px;
  color: var(--sp-muted);
}

.updates p { margin: 4px 0 0; }

.history { margin-top: 32px; }

.history-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.history-sort {
  display: flex;
  gap: 8px;
}

.history-sort__btn {
  appearance: none;
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: var(--sp-surface);
  color: var(--sp-muted);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}

.history-sort__btn:hover {
  color: var(--sp-ink);
}

.history-sort__btn.is-active {
  border-color: var(--sp-accent);
  color: var(--sp-ink);
  font-weight: 600;
}

.history-card {
  border-radius: 12px;
  background: var(--sp-surface);
  overflow: hidden;
}

.history-item {
  display: flex;
  gap: 12px;
  padding: 16px 20px;
  border-top: 1px solid color-mix(in srgb, var(--sp-line) 40%, transparent);
}

.history-item:first-child { border-top: none; }

.history-item__body { flex: 1; min-width: 0; }

.history-item__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sp-ok);
  margin-top: 8px;
  flex: none;
}

.history-item__head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.history-item__head h3 { margin: 0; font-size: 16px; }

.history-item__summary {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  margin: 6px 0 0;
  color: var(--sp-muted);
  font-size: 14px;
  line-height: 1.5;
}

.history-item.is-expanded .history-item__summary {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}

.history-item__updates {
  margin-top: 12px;
}

.history-item__more {
  appearance: none;
  margin: 8px 0 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--sp-ink);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.history-item__more:hover {
  color: var(--sp-accent);
}

.history-item__date { margin: 8px 0 0; font-size: 12px; color: var(--sp-muted); }

.status-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
  background: var(--sp-badge-ok-bg);
  color: var(--sp-badge-ok-fg);
}

.status-badge.status-operational { background: var(--sp-badge-ok-bg); color: var(--sp-badge-ok-fg); }
.status-badge.status-degraded,
.status-badge.status-monitoring,
.status-badge.status-minor { background: var(--sp-badge-warn-bg); color: var(--sp-badge-warn-fg); }
.status-badge.status-partial_outage,
.status-badge.status-scheduled,
.status-badge.status-identified,
.status-badge.status-major,
.status-badge.status-maintenance { background: var(--sp-badge-partial-bg); color: var(--sp-badge-partial-fg); }
.status-badge.status-major_outage,
.status-badge.status-investigating,
.status-badge.status-critical { background: var(--sp-badge-bad-bg); color: var(--sp-badge-bad-fg); }
.status-badge.status-under_maintenance,
.status-badge.status-in_progress { background: var(--sp-badge-maint-bg); color: var(--sp-badge-maint-fg); }
.status-badge.status-resolved,
.status-badge.status-completed { background: var(--sp-badge-ok-bg); color: var(--sp-badge-ok-fg); }

/* —— Subscribe —— */
.sp-subscribe {
  max-width: 640px;
}

.sp-subscribe h1 {
  margin: 0 0 8px;
  font-size: 32px;
  font-weight: 700;
}

.sp-subscribe__blurb { margin: 0 0 24px; color: var(--sp-muted); }

.subscribe-channels {
  display: grid;
  gap: 16px;
}

.subscribe-channel {
  background: var(--sp-surface);
  border: 1px solid var(--sp-line);
  border-radius: 16px;
  padding: 20px;
}

.subscribe-channel h2 {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 700;
}

.subscribe-channel__help,
.subscribe-consent-copy {
  margin: 0 0 16px;
  color: var(--sp-muted);
  font-size: 14px;
  line-height: 1.45;
}

.subscribe-consent-copy { margin-bottom: 0; }

.subscribe-form {
  display: grid;
  gap: 14px;
}

.subscribe-form input {
  width: 100%;
  background: var(--sp-surface);
  border: 1px solid var(--sp-line);
  color: var(--sp-ink);
  border-radius: 12px;
  padding: 14px 16px;
  font: inherit;
}

.subscribe-form input:focus {
  outline: 2px solid var(--sp-accent-soft);
  border-color: var(--sp-accent);
}

.subscribe-form input[type="checkbox"] {
  width: auto;
  flex-shrink: 0;
  margin-top: 3px;
  padding: 0;
  border-radius: 4px;
  accent-color: var(--sp-accent);
}

.subscribe-consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 14px;
  line-height: 1.45;
  color: var(--sp-ink);
}

.subscribe-form button {
  background: var(--sp-accent);
  color: #fff;
  border: 0;
  border-radius: 100px;
  padding: 12px 32px;
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
  width: fit-content;
}

.subscribe-form button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.flash {
  padding: 14px 16px;
  border-radius: 12px;
  margin: 0 0 16px;
}

.flash-success,
.flash-ok { background: var(--sp-badge-ok-bg); color: var(--sp-badge-ok-fg); }
.flash-info { background: var(--sp-accent-soft); color: var(--sp-accent); }
.flash-error { background: var(--sp-badge-bad-bg); color: var(--sp-badge-bad-fg); }

/* —— Mobile —— */
@media (max-width: 899px) {
  :root,
  [data-theme="light"] {
    --sp-header-h: 67px;
  }

  .sp-header {
    height: 67px;
    padding: 16px;
  }

  .sp-header__right { gap: 12px; }

  .sp-nav,
  .sp-lang--desktop { display: none; }

  body.public-status a.sp-cta { display: none; }

  .sp-lang--mobile {
    display: inline-flex;
    height: 29px;
    border-radius: 100px;
    background: var(--sp-accent-soft);
    color: var(--sp-accent);
    font-weight: 700;
    font-size: 13px;
    padding: 6px 12px;
  }

  .sp-burger { display: flex; }

  .sp-header.is-open .sp-nav {
    display: flex;
    position: absolute;
    top: 67px;
    left: 0;
    right: 0;
    background: var(--sp-surface);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 16px 20px;
    box-shadow: 0 12px 24px rgba(27, 23, 22, 0.08);
  }

  .sp-header.is-open .sp-nav__link {
    padding: 12px 0;
    border-bottom: 1px solid color-mix(in srgb, var(--sp-line) 50%, transparent);
  }

  body.public-status .sp-header.is-open a.sp-cta {
    display: flex;
    position: absolute;
    top: calc(67px + 180px);
    left: 16px;
    right: 16px;
    justify-content: center;
  }

  .sp-wrap,
  .sp-footer {
    width: calc(100% - 32px);
  }

  .sp-shell {
    gap: 24px;
    padding-bottom: 48px;
  }

  .sp-wrap,
  .sp-panel {
    gap: 24px;
  }

  .sp-hero {
    gap: 12px;
  }

  .sp-hero__top {
    flex-direction: column;
    gap: 16px;
  }

  .sp-banner {
    width: 100%;
    height: 180px;
    min-height: 180px;
    padding: 24px 16px;
  }

  .sp-banner.status-major_outage { background: #ef4444; }

  .sp-banner__title {
    width: 238px;
    font-size: 24px;
  }

  .sp-banner.status-under_maintenance .sp-banner__title {
    width: 223px;
  }

  .sp-banner.status-under_maintenance .sp-banner__title-rest {
    display: block;
  }

  .sp-banner.status-degraded .sp-banner__title,
  .sp-banner.status-partial_outage .sp-banner__title {
    color: #212121;
  }

  .sp-banner.status-under_maintenance .sp-banner__title-rest { color: #212121; }

  .sp-banner__patience {
    width: 197px;
    font-size: 14px;
    margin: 6px 0 0;
  }

  .sp-banner.status-degraded .sp-banner__patience,
  .sp-banner.status-partial_outage .sp-banner__patience {
    color: #212121;
  }

  .sp-banner__meta-label {
    font-size: 12px;
    font-weight: 400;
  }

  .sp-banner.status-degraded .sp-banner__meta-label,
  .sp-banner.status-partial_outage .sp-banner__meta-label,
  .sp-banner.status-under_maintenance .sp-banner__meta-label {
    color: #212121;
    opacity: 0.5;
  }

  .sp-banner.status-under_maintenance .sp-banner__meta-label { opacity: 0.6; }

  .sp-banner__meta-value {
    font-size: 14px;
  }

  .sp-banner.status-degraded .sp-banner__meta-value,
  .sp-banner.status-partial_outage .sp-banner__meta-value,
  .sp-banner.status-under_maintenance .sp-banner__meta-value {
    color: #212121;
  }

  .sp-check-wrap--soft {
    left: 75px;
    top: -29px;
    width: 300px;
    height: 250px;
    opacity: 0.1;
  }

  .sp-check-wrap--faint {
    display: none;
  }

  .sp-check-wrap--big {
    left: 8.8125rem;
    top: 0.6875rem;
    width: 14.146875rem;
    height: 11.88375rem;
    transform: rotate(-8.908deg);
  }

  .sp-check-wrap--big .sp-check-group {
    width: 199px;
  }

  .sp-banner.status-degraded .sp-burst--warn,
  .sp-banner.status-partial_outage .sp-burst--warn {
    left: auto;
    right: -65px;
    top: 50%;
    width: 271px;
    height: 271px;
    transform: translateY(calc(-50% + 23.5px));
  }

  .sp-banner.status-degraded .sp-burst--warn .sp-burst__tint,
  .sp-banner.status-partial_outage .sp-burst--warn .sp-burst__tint {
    left: 13px;
    top: 14px;
    width: 310px;
    height: 263px;
    -webkit-mask-size: 271px 271px;
    mask-size: 271px 271px;
    -webkit-mask-position: -13px -14px;
    mask-position: -13px -14px;
  }

  .sp-burst--blur-a {
    left: 73.32px;
    top: 47.32px;
    width: 320.145px;
    height: 320.145px;
  }

  .sp-burst--blur-b {
    left: 277px;
    top: -111px;
    width: 308.26px;
    height: 308.26px;
  }

  .sp-burst--main {
    left: auto;
    right: -72px;
    top: 50%;
    width: 288px;
    height: 288px;
    transform: translateY(calc(-50% + 17px));
  }

  .sp-burst--blur-c {
    left: -155px;
    top: -182px;
    width: 354px;
    height: 354px;
  }

  .sp-maint-orb {
    left: 222px;
    top: 81px;
    width: 83px;
    height: 83px;
    right: auto;
    bottom: auto;
  }

  .sp-maint-tools {
    left: 179px;
    top: 28px;
    width: 180px;
    height: 180px;
  }

  .sp-card {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    padding: 20px;
    min-height: 0;
  }

  .sp-card--services {
    height: auto;
    min-height: 0;
  }

  .sp-card__intro {
    width: auto;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .sp-metrics {
    flex-direction: column;
    gap: 20px;
  }

  .sp-metric {
    padding: 0;
    height: 32px;
    gap: 12px;
    flex: none;
  }

  .sp-metric__icon {
    width: 32px;
    height: 32px;
  }

  .sp-metric__body {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex: 1;
    gap: 6px;
  }

  .sp-metric__num {
    order: 2;
    font-size: 20px;
    flex: none;
    text-align: right;
    white-space: nowrap;
  }

  .sp-metric__label {
    order: 1;
    flex: 1;
    min-width: 0;
    white-space: nowrap;
  }

  .sp-rule { display: none; }

  .sp-locations {
    flex-direction: column;
  }

  .sp-filter {
    width: 100%;
    gap: 10px;
  }

  .sp-filter__title {
    font-size: 18px;
  }

  .sp-filter__list {
    flex-direction: row;
    overflow-x: auto;
    scrollbar-width: none;
    gap: 4px;
  }

  .sp-filter__list::-webkit-scrollbar { display: none; }

  .sp-filter__btn {
    width: auto;
    flex: none;
    height: 40px;
    padding: 8px 16px;
  }

  .sp-filter__btn:not([data-location-filter-btn="all"]) {
    padding: 8px 10px;
  }

  .sp-filter__name {
    font-size: 14px;
    flex: none;
  }

  .sp-filter__btn .sp-flag {
    width: 20px;
    height: 20px;
  }

  .sp-filter__mark {
    display: none;
  }

  .sp-filter__btn.is-active .sp-filter__mark--on {
    display: none;
  }

  .sp-cards {
    gap: 24px;
  }

  .sp-loc__head {
    padding: 16px;
    align-items: flex-end;
  }

  .sp-loc__head-main {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .sp-loc__name { font-size: 20px; font-weight: 500; }

  .sp-loc__state { margin-left: 0; }

  .sp-loc__state-label { order: 2; }

  .sp-loc__state .status-pulse { order: 1; }

  .sp-loc__head .sp-flag {
    width: 40px;
    height: 40px;
    margin-left: auto;
    order: 2;
  }

  .sp-loc__row {
    grid-template-columns: 1fr;
    grid-template-areas:
      "label"
      "avg"
      "bars"
      "axis";
    gap: 8px;
    padding: 0 16px 16px;
  }

  .sp-loc__row[data-status-row="network"] {
    padding-bottom: 16px;
  }

  .sp-loc__row-label {
    opacity: 0.8;
  }

  .sp-loc__avg {
    gap: 4px;
    height: auto;
    min-height: 13px;
  }

  .uptime-history {
    overflow: hidden;
  }

  .uptime-history::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 19px;
    height: 34px;
    background: linear-gradient(90deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
  }

  .uptime-bars {
    height: 34px;
    justify-content: flex-end;
    overflow: hidden;
  }

  .uptime-bar {
    flex: none;
    width: 29.3px;
    height: 34px;
  }

  .sp-loc__today { display: none; }

  .sp-loc__axis {
    display: flex;
    grid-area: axis;
    justify-content: space-between;
    font-size: 10px;
    font-weight: 300;
    letter-spacing: 0.1px;
    line-height: 1;
    color: var(--sp-ink-soft);
  }

  .sp-loc__axis span:first-child {
    width: 35px;
    text-align: left;
  }

  .sp-loc__axis span:nth-child(2) {
    flex: 1;
    text-align: center;
  }

  .sp-loc__axis span:last-child {
    width: 35px;
    text-align: right;
  }

  .sp-footer {
    flex-direction: column;
  }

  .history-head {
    align-items: flex-start;
  }

  .history-item__head {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (min-width: 900px) {
  .sp-header.is-open .sp-nav,
  .sp-header.is-open .sp-cta { display: flex; }
}

/* —— Uptime bar popover (Figma 9990:8075) —— */
.sp-bar-tip {
  --tip-bg: var(--sp-ok);
  --tip-fg: #ffffff;
  --tip-cta-bg: #ffffff;
  --tip-cta-fg: var(--sp-bad);
  position: fixed;
  z-index: 40;
  pointer-events: none;
}

.sp-bar-tip[hidden] { display: none; }

.sp-bar-tip[data-status="operational"] {
  --tip-bg: var(--sp-ok);
  --tip-fg: #ffffff;
}

.sp-bar-tip[data-status="degraded"],
.sp-bar-tip[data-status="partial_outage"] {
  --tip-bg: var(--sp-warn);
  --tip-fg: var(--sp-ink);
  --tip-cta-bg: var(--sp-ink);
  --tip-cta-fg: var(--sp-warn);
}

.sp-bar-tip[data-status="major_outage"] {
  --tip-bg: var(--sp-bad);
  --tip-fg: #ffffff;
  --tip-cta-bg: #ffffff;
  --tip-cta-fg: var(--sp-bad);
}

.sp-bar-tip[data-status="under_maintenance"] {
  --tip-bg: var(--sp-maint);
  --tip-fg: #ffffff;
}

.sp-bar-tip[data-status="nodata"] {
  --tip-bg: var(--sp-nodata);
  --tip-fg: var(--sp-ink);
}

.sp-bar-tip__caret {
  position: absolute;
  top: 0;
  width: 0;
  height: 0;
  border-left: 19px solid transparent;
  border-right: 19px solid transparent;
  border-bottom: 14px solid var(--tip-bg);
  transform: translateX(-50%);
  pointer-events: none;
}

.sp-bar-tip--above .sp-bar-tip__caret {
  top: auto;
  bottom: 0;
  border-bottom: 0;
  border-top: 14px solid var(--tip-bg);
}

.sp-bar-tip__card {
  pointer-events: auto;
  margin-top: 14px;
  background: var(--tip-bg);
  color: var(--tip-fg);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
}

.sp-bar-tip--above .sp-bar-tip__card {
  margin-top: 0;
  margin-bottom: 14px;
}

.sp-bar-tip--compact .sp-bar-tip__card {
  padding: 16px;
  gap: 16px;
}

.sp-bar-tip--wide .sp-bar-tip__card {
  padding: 16px 20px;
  gap: 12px;
}

.sp-bar-tip__head {
  display: flex;
  flex-direction: column;
}

.sp-bar-tip--compact .sp-bar-tip__head {
  align-items: center;
  gap: 6px;
}

.sp-bar-tip--wide .sp-bar-tip__head {
  align-items: flex-start;
  gap: 6px;
}

.sp-bar-tip__title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.sp-bar-tip--compact .sp-bar-tip__title-row {
  flex-direction: column-reverse;
  align-items: center;
  gap: 12px;
}

.sp-bar-tip__title {
  margin: 0;
  font-weight: 500;
  line-height: normal;
  color: var(--tip-fg);
}

.sp-bar-tip--compact .sp-bar-tip__title {
  font-size: 16px;
  text-align: center;
  width: 100%;
}

.sp-bar-tip--wide .sp-bar-tip__title {
  font-size: 20px;
  flex: 1 0 0;
  min-width: 0;
}

.sp-bar-tip__badge {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  border: 1px solid var(--tip-fg);
  border-radius: 224px;
  font-weight: 600;
  line-height: normal;
  color: var(--tip-fg);
  white-space: nowrap;
}

.sp-bar-tip--compact .sp-bar-tip__badge { font-size: 12px; }
.sp-bar-tip--wide .sp-bar-tip__badge { font-size: 14px; }

.sp-bar-tip__badge[hidden],
.sp-bar-tip__extra[hidden],
.sp-bar-tip__happened[hidden],
.sp-bar-tip__duration[hidden] { display: none; }

.sp-bar-tip__date {
  margin: 0;
  font-weight: 300;
  font-size: 12px;
  line-height: normal;
  letter-spacing: 0.1px;
  color: var(--tip-fg);
  opacity: 0.5;
}

.sp-bar-tip--compact .sp-bar-tip__date { text-align: center; }

.sp-bar-tip__extra {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sp-bar-tip__rule {
  height: 1px;
  background: var(--tip-fg);
  opacity: 0.1;
}

.sp-bar-tip__happened {
  display: flex;
  flex-direction: column;
  color: var(--tip-fg);
}

.sp-bar-tip--compact .sp-bar-tip__happened {
  align-items: center;
  gap: 6px;
  text-align: center;
}

.sp-bar-tip--wide .sp-bar-tip__happened {
  align-items: flex-start;
  gap: 4px;
}

.sp-bar-tip__happened-label {
  margin: 0;
  font-weight: 300;
  font-size: 12px;
  line-height: normal;
  letter-spacing: 0.1px;
  opacity: 0.5;
}

.sp-bar-tip__happened-text {
  margin: 0;
  font-weight: 300;
  line-height: 1.4;
}

.sp-bar-tip--compact .sp-bar-tip__happened-text { font-size: 14px; }
.sp-bar-tip--wide .sp-bar-tip__happened-text { font-size: 16px; }

.sp-bar-tip__duration {
  margin: 0;
  font-weight: 300;
  line-height: 1.4;
  color: var(--tip-fg);
}

.sp-bar-tip--compact .sp-bar-tip__duration {
  text-align: center;
  font-size: 14px;
}

.sp-bar-tip--wide .sp-bar-tip__duration {
  font-size: 16px;
}

body.public-status a.sp-bar-tip__cta,
body.public-status a.sp-bar-tip__cta:hover {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px 24px;
  border-radius: 224px;
  background: var(--tip-cta-bg);
  color: var(--tip-cta-fg);
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  line-height: normal;
  white-space: nowrap;
}

.sp-bar-tip--compact .sp-bar-tip__cta { width: 100%; }
.sp-bar-tip--wide .sp-bar-tip__cta {
  width: auto;
  align-self: flex-start;
  padding: 6px 24px;
}

body.public-status .sp-bar-tip--wide a.sp-bar-tip__cta {
  width: auto;
  align-self: flex-start;
  padding: 6px 24px;
}

body.public-status .sp-bar-tip--compact a.sp-bar-tip__cta {
  width: 100%;
}

.sp-bar-tip__cta img {
  width: 24px;
  height: 24px;
  display: block;
  flex: none;
}