/**
 * System Status page.
 *
 * Enqueued only on the page with the slug "system-status".
 *
 * Sizes come from the 1728-wide Figma frame and are used as CSS pixels at the
 * top of each clamp, the same way the partners and industries pages do it —
 * the shell is widened to 1360 so its 1280 content column matches the design.
 */

.zouma-sthero .zouma-shell,
.zouma-sthealth .zouma-shell,
.zouma-stsla .zouma-shell,
.zouma-stcur .zouma-shell {
	max-width: 1360px;
}

/* 01 · Hero -------------------------------------------------------------- */

.zouma-sthero {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	/* Full screen on any device — the same pair the homepage hero uses.
	 *
	 * min-height rather than height, so a short screen or large type pushes
	 * the section taller instead of clipping the copy. svh after vh because
	 * 100vh on a phone measures the viewport with the browser chrome
	 * retracted, which runs taller than what the visitor can actually see;
	 * vh stays first as the fallback.
	 *
	 * The section is already pulled up under the sticky header, so the
	 * header's height is counted inside this 100. */
	min-height: 100vh;
	min-height: 100svh;
	/* Pulled up under the sticky header and padded back down, the pair every
	 * dark-hero page uses. */
	margin-top: calc(-1 * var(--zouma-header-h));
	/* Uneven on purpose: the header pads the top so the copy clears it, and
	 * half of it comes back at the foot so the block lands on the design's
	 * centre line rather than the padded box's. */
	padding-top: var(--zouma-header-h);
	padding-bottom: calc(var(--zouma-header-h) / 2);
	background: var(--zouma-dark);
	color: #fff;
	overflow: hidden;
	isolation: isolate;
	text-align: center;
}

.zouma-sthero__map {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: url("../images/world-dots.svg") 74% 46% / clamp(560px, 48%, 830px) no-repeat;
	opacity: 0.42;
}

/* The light under the map, centred on the bottom edge. */
.zouma-sthero__glow {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: radial-gradient(
		ellipse 620px 200px at 50% 100%,
		rgba(14, 133, 182, 0.55) 0%,
		rgba(14, 133, 182, 0.16) 48%,
		rgba(14, 133, 182, 0) 100%
	);
}

.zouma-sthero__inner {
	position: relative;
	width: 100%;
}

.zouma-sthero .zouma-eyebrow {
	justify-content: center;
}

.zouma-sthero__title {
	margin: 16px 0 0;
	color: #fff;
	font-family: var(--zouma-font-heading);
	font-size: clamp(1.875rem, 0.95rem + calc(3.5 * var(--zouma-vw)), 3.6875rem);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.01em;
}

.zouma-sthero__text {
	max-width: 620px;
	margin: 20px auto 0;
	color: rgba(255, 255, 255, 0.72);
	font-family: var(--zouma-font-body);
	font-size: clamp(0.8125rem, 0.74rem + calc(0.28 * var(--zouma-vw)), 0.9375rem);
	line-height: 1.72;
}

/* 02 · Service health ---------------------------------------------------- */

.zouma-sthealth {
	padding-block: clamp(3rem, calc(6.8 * var(--zouma-vw)), 6.8rem);
	background: #fff;
}

.zouma-sthealth__eyebrow {
	justify-content: center;
	margin-bottom: clamp(1.5rem, calc(2.4 * var(--zouma-vw)), 2.25rem);
}

/* The rule the service marks sit on. Drawn on the list rather than on each row
 * so it runs unbroken from the first mark to the last, as in the design. */
.zouma-sthealth__list {
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
}

.zouma-sthealth__list::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 29px;
	width: 1px;
	background: #cfe3f2;
}

.zouma-stsvc {
	display: grid;
	grid-template-columns: 59px minmax(0, 1fr) auto;
	align-items: center;
	gap: 0 clamp(1.25rem, calc(3.75 * var(--zouma-vw)), 3.375rem);
	padding-block: 44px;
}

.zouma-stsvc + .zouma-stsvc .zouma-stsvc__body,
.zouma-stsvc + .zouma-stsvc .zouma-stsvc__status {
	/* The hairline sits between rows and starts at the name, not under the
	 * mark, so the vertical rule runs through clean. */
	border-top: 1px solid #e6eaee;
	margin-top: -44px;
	padding-top: 44px;
}

.zouma-stsvc__mark {
	display: grid;
	place-items: center;
	width: 59px;
	height: 59px;
	background: #fff;
	border: 1px solid #b8d9ee;
	border-radius: 50%;
	color: var(--zouma-blue);
}

.zouma-stsvc.is-watch .zouma-stsvc__mark {
	border-color: #f0c98a;
	color: #c2820f;
}

.zouma-stsvc.is-down .zouma-stsvc__mark {
	border-color: #efb4b4;
	color: #c0392b;
}

.zouma-stsvc__name {
	margin: 0;
	font-family: var(--zouma-font-heading);
	font-size: clamp(1.0625rem, 0.92rem + calc(0.5 * var(--zouma-vw)), 1.375rem);
	font-weight: 700;
	line-height: 1.3;
}

.zouma-stsvc__meta {
	margin: 6px 0 0;
	color: var(--zouma-color-muted);
	font-family: var(--zouma-font-body);
	font-size: clamp(0.75rem, 0.71rem + calc(0.2 * var(--zouma-vw)), 0.875rem);
}

.zouma-stsvc__status {
	margin: 0;
	color: #0f9d6a;
	font-family: var(--zouma-font-body);
	font-size: clamp(0.75rem, 0.71rem + calc(0.2 * var(--zouma-vw)), 0.875rem);
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
}

.zouma-stsvc.is-watch .zouma-stsvc__status {
	color: #c2820f;
}

.zouma-stsvc.is-down .zouma-stsvc__status {
	color: #c0392b;
}

/* 03 · SLA commitments --------------------------------------------------- */

.zouma-stsla {
	/* Opted out of the site-wide full-screen floor (see `main > section` in
	 * main.css) — the same pair .zouma-careers and .zouma-wwdcta use.
	 *
	 * This band is a heading, a line of copy and three tiers, about 500px of
	 * content. The viewport-height floor left roughly 220px of empty pale
	 * blue under the tiers at every desktop width. The padding-block below
	 * sets the height instead.
	 *
	 * min-height undoes the floor; display undoes the centring grid that came
	 * with it and puts the section back to block flow. */
	min-height: auto;
	display: block;
	padding-block: clamp(3rem, calc(6.4 * var(--zouma-vw)), 6.5rem);
	background: var(--zouma-blue-pale);
}

.zouma-stsla__head {
	text-align: center;
}

.zouma-stsla__head .zouma-eyebrow {
	justify-content: center;
}

.zouma-stsla__title {
	margin: 14px 0 0;
	font-family: var(--zouma-font-heading);
	font-size: clamp(1.75rem, 1.15rem + calc(2.4 * var(--zouma-vw)), 2.75rem);
	font-weight: 700;
	line-height: 1.14;
	letter-spacing: -0.01em;
}

.zouma-stsla__lede {
	max-width: 640px;
	margin: 16px auto 0;
	color: var(--zouma-color-muted);
	font-family: var(--zouma-font-body);
	font-size: clamp(0.8125rem, 0.74rem + calc(0.28 * var(--zouma-vw)), 0.9375rem);
	line-height: 1.7;
}

.zouma-stsla__tiers {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 11px;
	align-items: start;
	margin: clamp(2rem, calc(3.4 * var(--zouma-vw)), 3.25rem) 0 0;
	padding: 0;
	list-style: none;
}

.zouma-sttier {
	position: relative;
	padding: 24px;
	background: #fff;
	border: 1px solid #e6eef6;
	border-radius: 12px;
}

.zouma-sttier.is-featured {
	border-color: var(--zouma-cyan);
}

/* Straddles the top edge, so the card needs no extra padding for it. */
.zouma-sttier__badge {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: 5px 14px;
	background: var(--zouma-cyan);
	border-radius: 999px;
	color: #fff;
	font-family: var(--zouma-font-body);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
}

.zouma-sttier__name {
	margin: 0;
	font-family: var(--zouma-font-heading);
	font-size: clamp(1.25rem, 0.98rem + calc(1.1 * var(--zouma-vw)), 1.875rem);
	font-weight: 700;
	line-height: 1.3;
}

.zouma-sttier__value {
	margin: 10px 0 0;
	color: var(--zouma-blue);
	font-family: var(--zouma-font-heading);
	font-size: clamp(1.25rem, 0.98rem + calc(1.1 * var(--zouma-vw)), 1.875rem);
	font-weight: 700;
	line-height: 1.1;
}

.zouma-sttier__valuelabel {
	margin: 6px 0 0;
	color: var(--zouma-color-muted);
	font-family: var(--zouma-font-body);
	font-size: 0.8125rem;
}

.zouma-sttier__lines {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 20px 0 0;
	padding: 0;
	list-style: none;
}

.zouma-sttier__lines li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	color: var(--zouma-color-muted);
	font-family: var(--zouma-font-body);
	font-size: clamp(0.8125rem, 0.74rem + calc(0.35 * var(--zouma-vw)), 1rem);
	line-height: 1.5;
}

.zouma-sttier__lines strong {
	color: var(--zouma-color-text);
	font-weight: 600;
}

.zouma-sttier__icon {
	flex: none;
	display: grid;
	place-items: center;
	color: var(--zouma-blue);
}

/* 04 · Current status ---------------------------------------------------- */

.zouma-stcur {
	padding-block: clamp(3rem, calc(6 * var(--zouma-vw)), 5.5rem);
	background: #fff;
}

.zouma-stcur__title {
	margin: 14px 0 0;
	font-family: var(--zouma-font-heading);
	font-size: clamp(1.375rem, 1.05rem + calc(1.3 * var(--zouma-vw)), 1.875rem);
	font-weight: 700;
	line-height: 1.25;
}

.zouma-stbanner {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: 22px;
	padding: 13px 20px;
	background: #edf8f2;
	border: 1px solid #bfe5d3;
	border-radius: 8px;
}

.zouma-stbanner__mark {
	flex: none;
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	background: #17a06b;
	border-radius: 50%;
	color: #fff;
}

.zouma-stbanner__text {
	margin: 0;
	font-family: var(--zouma-font-body);
	font-size: clamp(0.8125rem, 0.76rem + calc(0.22 * var(--zouma-vw)), 1rem);
	font-weight: 600;
}

.zouma-stbanner__live {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0 0 0 auto;
	color: #0f9d6a;
	font-family: var(--zouma-font-body);
	font-size: clamp(0.75rem, 0.72rem + calc(0.18 * var(--zouma-vw)), 0.9375rem);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	white-space: nowrap;
}

.zouma-stinc__title {
	margin: clamp(1.75rem, calc(3 * var(--zouma-vw)), 2.75rem) 0 0;
	font-family: var(--zouma-font-heading);
	font-size: clamp(1.375rem, 1.05rem + calc(1.3 * var(--zouma-vw)), 1.875rem);
	font-weight: 700;
}

/* Controls --------------------------------------------------------------- */

.zouma-stinc__controls {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 20px;
}

.zouma-stinc__search {
	flex: 1 1 420px;
}

.zouma-stinc__search,
.zouma-stinc__date {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 45px;
	padding: 0 14px;
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	color: var(--zouma-color-muted);
}

.zouma-stinc__search:focus-within,
.zouma-stinc__date:focus-within {
	border-color: var(--zouma-sky);
}

.zouma-stinc__search input,
.zouma-stinc__date input {
	flex: 1;
	min-width: 0;
	border: 0;
	background: none;
	color: var(--zouma-color-text);
	font-family: var(--zouma-font-body);
	font-size: 0.875rem;
}

.zouma-stinc__search input:focus,
.zouma-stinc__date input:focus {
	outline: none;
}

.zouma-stinc__date {
	position: relative;
	flex: 0 0 auto;
}

.zouma-stinc__datelabel {
	font-family: var(--zouma-font-body);
	font-size: 0.875rem;
}

/* Laid over the whole control at zero opacity: the visible word stays the
 * design's, and status.js swaps it for the chosen date. Hiding the native
 * field any other way leaves its mm/dd/yyyy mask showing. */
.zouma-stinc__date input {
	position: absolute;
	inset: 0;
	width: 100%;
	opacity: 0;
	cursor: pointer;
}

/* Severity pills --------------------------------------------------------- */

.zouma-stinc__filters {
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
	margin-top: 18px;
}

.zouma-stpill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	justify-content: center;
	min-width: 126px;
	padding: 6px 13px;
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 6px;
	color: var(--zouma-color-text);
	font-family: var(--zouma-font-body);
	font-size: 0.8125rem;
	line-height: 1.4;
	cursor: pointer;
	transition: background var(--zouma-transition), border-color var(--zouma-transition);
}

.zouma-stpill:first-child {
	min-width: 0;
}

.zouma-stpill:hover {
	border-color: var(--zouma-sky);
}

.zouma-stpill.is-active {
	background: #e8f2fb;
	border-color: #cfe3f5;
	font-weight: 500;
}

.zouma-stpill .zouma-icon {
	color: var(--zouma-blue);
}

.zouma-stinc__count {
	margin: 18px 0 0;
	color: var(--zouma-color-muted);
	font-family: var(--zouma-font-body);
	font-size: 0.875rem;
}

.zouma-stinc__empty {
	margin: 22px 0 0;
	color: var(--zouma-color-muted);
	font-family: var(--zouma-font-body);
	font-size: 0.9375rem;
}

/* Incidents -------------------------------------------------------------- */

.zouma-stinc__list {
	display: flex;
	flex-direction: column;
	gap: 22px;
	margin: 18px 0 0;
	padding: 0;
	list-style: none;
}

.zouma-stincident {
	background: #fff;
	border: 1px solid #e6e9ee;
	border-left: 3px solid #34c08a;
	border-radius: 8px;
	overflow: hidden;
}

.zouma-stincident.is-watch {
	border-left-color: var(--zouma-cyan);
}

.zouma-stincident summary {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 15px 22px;
	cursor: pointer;
	list-style: none;
}

.zouma-stincident summary::-webkit-details-marker {
	display: none;
}

.zouma-stincident__mark {
	flex: none;
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border: 1px solid #a9dcc4;
	border-radius: 50%;
	color: #17a06b;
}

.zouma-stincident.is-watch .zouma-stincident__mark {
	border-color: var(--zouma-sky);
	color: var(--zouma-blue);
}

.zouma-stincident__head {
	flex: 1;
	min-width: 0;
}

.zouma-stincident__top {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

.zouma-stincident__name {
	font-family: var(--zouma-font-heading);
	font-size: clamp(0.875rem, 0.82rem + calc(0.22 * var(--zouma-vw)), 1rem);
	font-weight: 700;
}

.zouma-stincident__tag {
	padding: 3px 9px;
	border: 1px solid #d7dce3;
	border-radius: 999px;
	color: var(--zouma-color-muted);
	font-family: var(--zouma-font-body);
	font-size: 0.625rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
}

.zouma-stincident__tag.is-sev {
	border-color: var(--zouma-sky);
	color: var(--zouma-blue);
}

.zouma-stincident__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 24px;
	margin-top: 7px;
	color: var(--zouma-color-muted);
	font-family: var(--zouma-font-body);
	font-size: clamp(0.75rem, 0.71rem + calc(0.2 * var(--zouma-vw)), 0.875rem);
}

.zouma-stincident__chev {
	flex: none;
	display: grid;
	place-items: center;
	color: var(--zouma-color-muted);
	transition: transform var(--zouma-transition);
}

.zouma-stincident details[open] .zouma-stincident__chev,
.zouma-stincident[open] .zouma-stincident__chev {
	transform: rotate(180deg);
}

.zouma-stincident details[open] summary .zouma-stincident__chev {
	transform: rotate(180deg);
}

.zouma-stincident__body {
	padding: 0 22px 22px 70px;
}

.zouma-stincident__copy {
	margin: 0;
	color: #3f4852;
	font-family: var(--zouma-font-body);
	font-size: clamp(0.8125rem, 0.76rem + calc(0.22 * var(--zouma-vw)), 0.9375rem);
	line-height: 1.6;
}

.zouma-sttimeline {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 18px 0 0;
	padding: 2px 0 2px 16px;
	border-left: 2px solid #e2e8f0;
	list-style: none;
}

.zouma-sttimeline li {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 14px;
	font-family: var(--zouma-font-body);
	font-size: clamp(0.75rem, 0.71rem + calc(0.2 * var(--zouma-vw)), 0.875rem);
	line-height: 1.5;
}

.zouma-sttimeline__time {
	font-weight: 600;
	white-space: nowrap;
}

.zouma-sttimeline__state {
	color: var(--zouma-blue);
	font-weight: 500;
	white-space: nowrap;
}

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

/* Narrow ----------------------------------------------------------------- */

@media (max-width: 900px) {
	.zouma-stsla__tiers {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}

	.zouma-stsvc {
		grid-template-columns: 44px minmax(0, 1fr);
		gap: 0 16px;
	}

	.zouma-stsvc__mark {
		width: 44px;
		height: 44px;
	}

	.zouma-sthealth__list::before {
		left: 21px;
	}

	.zouma-stsvc__status {
		grid-column: 2;
		margin-top: 8px;
	}

	.zouma-stsvc + .zouma-stsvc .zouma-stsvc__status {
		border-top: 0;
		margin-top: 8px;
		padding-top: 0;
	}

	.zouma-stbanner {
		flex-wrap: wrap;
	}

	.zouma-stbanner__live {
		margin-left: 48px;
	}

	.zouma-stincident__body {
		padding-left: 22px;
	}
}