/* Ported from apps/status/assets/status.css; palette tokens are scoped to the React page. */
body { margin: 0; }
.status-site {
	min-height: 100svh;
	--bar-height: 28px;
	/* Inner spacing of every panel; rows line up on it. */
	--gutter: 36px;
	--split-ease: cubic-bezier(0.22, 1, 0.36, 1);
	/* A soft spring (about 1.5% give) for things that move; fades stay eased. */
	--spring: var(--split-ease);
	--spring-time: 620ms;
	/* How group rows move: Apple's sheet curve. */
	--glide: cubic-bezier(0.32, 0.72, 0, 1);
	--glide-time: 500ms;
}



@supports (transition-timing-function: linear(0, 1)) {
	.status-site {
		--spring: linear(0, 0.043, 0.145, 0.273, 0.408, 0.536, 0.649, 0.745, 0.823, 0.883, 0.929, 0.962, 0.985, 1.000, 1.009, 1.013, 1.015, 1.015, 1.014, 1.012, 1.010, 1.008, 1.006, 1.004, 1.003, 1.002, 1.001, 1.001, 1.000, 1.000, 1.000, 1.000, 1);
	}
}
/*
 * Relevate Status. One calm page: a banner saying how things are, then each
 * service (alone or in a group) with its history, a calendar, and the details.
 *
 * Every color is a token. The default theme follows the visitor's system
 * (paper by day, warm ink by night). A workspace brand replaces the tokens
 * with its own colors in a second block, so nothing below names a color.
 */

@font-face {
	font-family: "Geist";
	src: url("./geist.woff2") format("woff2");
	font-weight: 100 900;
	font-display: swap;
}

.status-site {
	color-scheme: light dark;
	--bg: #fafaf9;
	--panel: #ffffff;
	--panel-edge: #1c19170f;
	--line: #1c191714;
	--text: #1c1917;
	--soft: #44403c;
	--muted: #78716c;
	--faint: #a8a29e;
	--ink: #1c1917;
	--on-ink: #fafaf9;
	--link: #1c1917;
	--empty: #e7e5e4;
	--font-body: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-heading: var(--font-body);
	--heading-weight: 600;
	--radius: 20px;

	--ok: #12a06e;
	--ok-lamp: #34d399;
	--degraded: #e8961c;
	--degraded-lamp: #fbbf24;
	--outage: #e2442f;
	--outage-lamp: #f87171;
	--maintenance: #2f7be6;
	--maintenance-lamp: #60a5fa;
	--unknown: #78716c;
	--unknown-lamp: #a8a29e;
}

@media (prefers-color-scheme: dark) {
	.status-site:not(.branded) {
		--bg: #0c0a09;
		--panel: #141210;
		--panel-edge: #ffffff12;
		--line: #ffffff10;
		--text: #fafaf9;
		--soft: #d6d3d1;
		--muted: #a8a29e;
		--faint: #78716c;
		--ink: #fafaf9;
		--on-ink: #0c0a09;
		--link: #fafaf9;
		--empty: #292524;
	}
}

/* Status colors that read on a dark ground: the default at night, and any
   brand whose background is dark. */
@media (prefers-color-scheme: dark) {
	.status-site:not(.branded) {
		--ok: #3fa37f;
		--degraded: #eba63f;
		--outage: #e5533d;
		--maintenance: #2f7be6;
		--unknown: #a8a29e;
		--ok-lamp: #6ee7b7;
	}
}
.status-site.branded.dark-ground {
	--ok: #3fa37f;
	--degraded: #eba63f;
	--outage: #e5533d;
	--maintenance: #2f7be6;
	--unknown: #a8a29e;
	--ok-lamp: #6ee7b7;
	--empty: color-mix(in srgb, var(--text) 12%, transparent);
}
.status-site.branded:not(.dark-ground) {
	--empty: color-mix(in srgb, var(--text) 9%, transparent);
}

/* ---------- Base ---------- */

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

/* The document behind the page takes the page's background, so scrolling past
   the top or bottom never shows white. Brands set their own in the theme. */
html:has(.status-site) {
	background: #fafaf9;
	-webkit-text-size-adjust: 100%;
}

@media (prefers-color-scheme: dark) {
	html:has(.status-site:not(.branded)) {
		background: #0c0a09;
	}
}

.status-site {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font: 15px/1.55 var(--font-body);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	font-feature-settings: "ss01", "cv11";
}

::selection {
	background: var(--ink);
	color: var(--on-ink);
}

a {
	color: inherit;
}

:focus-visible {
	outline: 2px solid var(--ink);
	outline-offset: 3px;
	border-radius: 6px;
}

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

h1,
h2 {
	font-family: var(--font-heading);
	font-weight: var(--heading-weight);
	text-wrap: balance;
}

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

.page {
	/* 700px less a 36px gutter each side leaves a row 628px wide: 90 days of
	   7px (5px bar, 2px gap) fit exactly, so every bar is the same width. */
	width: min(100% - 32px, 700px);
	margin: 0 auto;
	padding: 28px 0 40px;
}

/* ---------- Top ---------- */

.top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 40px;
}

.identity {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	text-decoration: none;
	font-weight: 600;
	font-size: 15px;
	letter-spacing: -0.01em;
}

.identity svg {
	width: 22px;
	height: 22px;
	flex: none;
}

.identity img {
	display: block;
	height: 26px;
	width: auto;
	max-width: 180px;
	object-fit: contain;
}

.follow {
	display: inline-flex;
	align-items: center;
	height: 34px;
	padding: 0 14px;
	border-radius: 999px;
	background: var(--panel);
	box-shadow: inset 0 0 0 1px var(--panel-edge);
	color: var(--text);
	font-size: 13px;
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
	transition: background 160ms ease;
}

.follow:hover {
	background: color-mix(in srgb, var(--panel) 70%, var(--line));
}

/* ---------- Banner ---------- */

/* A real border, not an inset shadow: the tinted head would paint over one. */
.banner {
	margin-top: 36px;
	overflow: hidden;
	border: 1px solid color-mix(in srgb, var(--tone) 26%, var(--line));
	border-radius: var(--radius);
	background: var(--panel);
	corner-shape: squircle;
}

.banner-head {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 15px calc(var(--gutter) - 1px);
	background: color-mix(in srgb, var(--tone) 9%, var(--panel));
}

.banner-head h1 {
	font-size: 18px;
	line-height: 1.3;
	letter-spacing: -0.015em;
}

.banner-head .status-icon {
	width: 20px;
	height: 20px;
}

.banner-body {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 6px 24px;
	padding: 15px calc(var(--gutter) - 1px) 17px;
	border-top: 1px solid color-mix(in srgb, var(--tone) 18%, var(--line));
}

.banner-body p {
	max-width: 34rem;
	color: var(--soft);
}

.banner-body b {
	font-weight: 550;
}

.banner-body time {
	color: var(--faint);
	font-size: 13px;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* The round badge beside the banner, each service and each group. */
.status-icon {
	flex: none;
	width: 16px;
	height: 16px;
}

.status-icon circle {
	fill: var(--tone);
}


/* Near-black symbols on every coloured disc: on these greens, ambers, reds and
   blues black clears WCAG's 3:1 for graphics comfortably, where white does not. */
.status-icon path {
	fill: none;
	stroke: #141210;
	stroke-width: 1.9;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* The small square lamp on notices. */
.lamp {
	position: relative;
	display: inline-block;
	flex: none;
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: var(--tone);
}

/* ---------- Tones ---------- */

.operational {
	--tone: var(--ok);
	--tone-lamp: var(--ok-lamp);
}
.degraded {
	--tone: var(--degraded);
	--tone-lamp: var(--degraded-lamp);
}
.outage {
	--tone: var(--outage);
	--tone-lamp: var(--outage-lamp);
}
.maintenance {
	--tone: var(--maintenance);
	--tone-lamp: var(--maintenance-lamp);
}
.unknown {
	--tone: var(--unknown);
	--tone-lamp: var(--unknown-lamp);
}

/* ---------- Notices ---------- */

.notice {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	margin-top: 20px;
	padding: 14px 16px;
	border-radius: 14px;
	background: color-mix(in srgb, var(--tone) 10%, transparent);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tone) 28%, transparent);
	font-size: 14px;
}

.notice .lamp {
	margin-top: 6px;
}

.notice strong {
	font-weight: 550;
}

.notice span {
	color: var(--muted);
}

/* ---------- Sections ---------- */

.block {
	margin-top: 40px;
}

.block-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding: 0 4px 16px;
}

.block-head h2 {
	font-size: 20px;
	letter-spacing: -0.02em;
	line-height: 1.3;
}

.block-head span {
	color: var(--faint);
	font-size: 13px;
}

.panel-head {
	display: flex;
	align-items: center;
	gap: 6px 16px;
	flex-wrap: wrap;
	padding: 16px var(--gutter);
	box-shadow: 0 1px 0 var(--line);
}

.panel-head h2 {
	font-size: 16px;
	letter-spacing: -0.015em;
	line-height: 1.4;
}

.range {
	color: var(--muted);
	font-size: 13.5px;
	font-variant-numeric: tabular-nums;
}

.panel > .calm {
	padding: 20px var(--gutter);
}

.chevron {
	flex: none;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.panel {
	border-radius: var(--radius);
	background: var(--panel);
	box-shadow:
		inset 0 0 0 1px var(--panel-edge),
		0 1px 2px #0000000a;
	corner-shape: squircle;
}

/* ---------- Happening now ---------- */

/* An open incident: a tinted head like the banner, then where it stands, the
   latest word, and what it touches. */
.live {
	overflow: hidden;
	border: 1px solid color-mix(in srgb, var(--tone) 26%, var(--line));
	border-radius: var(--radius);
	background: var(--panel);
	corner-shape: squircle;
}

.live + .live {
	margin-top: 12px;
}

.live-head {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px calc(var(--gutter) - 1px);
	background: color-mix(in srgb, var(--tone) 9%, var(--panel));
	border-bottom: 1px solid color-mix(in srgb, var(--tone) 18%, var(--line));
}

.live-head h3 {
	min-width: 0;
	flex: 1;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: -0.015em;
}

.live-head h3 a,
.live-link {
	color: inherit;
	text-decoration: none;
}

.live-head h3 a:hover {
	text-decoration: underline;
	text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
	text-underline-offset: 3px;
}

.live-body {
	padding: 18px calc(var(--gutter) - 1px) 4px;
}

.live-summary {
	margin-bottom: 18px;
	color: var(--soft);
	font-size: 15px;
}

.live-latest {
	margin-top: 18px;
}

.live-meta {
	color: var(--muted);
	font-size: 13px;
	font-variant-numeric: tabular-nums;
}

.live-latest > p:not(.live-meta) {
	margin-top: 4px;
	color: var(--soft);
	font-size: 15px;
}

.live-history {
	margin-top: 14px;
}

.live-history summary {
	width: fit-content;
	color: var(--muted);
	font-size: 13px;
	cursor: pointer;
	list-style: none;
}

.live-history summary::-webkit-details-marker {
	display: none;
}

.live-history summary::after {
	content: " ›";
}

.live-history[open] summary::after {
	content: " ‹";
}

.live-history .timeline {
	margin-top: 12px;
}

.live-foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 16px;
	padding: 14px calc(var(--gutter) - 1px) 16px;
}

.chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.chips li {
	padding: 3px 10px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--text) 6%, transparent);
	color: var(--soft);
	font-size: 13px;
}

.live-link {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	color: var(--muted);
	font-size: 13.5px;
	transition: color 160ms ease;
}

.live-link:hover {
	color: var(--text);
}

/* Where the incident stands: four dots on one line, filled up to now. */
.steps {
	--dot: 10px;
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 12.5px;
	color: var(--faint);
}

.steps::before,
.steps::after {
	content: "";
	position: absolute;
	top: calc(var(--dot) / 2 - 1px);
	left: 12.5%;
	height: 2px;
	border-radius: 2px;
}

.steps::before {
	right: 12.5%;
	background: var(--line);
	background: color-mix(in srgb, var(--text) 10%, transparent);
}

.steps::after {
	width: calc(75% * var(--progress));
	background: var(--tone);
}

.steps li {
	position: relative;
	display: grid;
	justify-items: center;
	gap: 8px;
	text-align: center;
}

.steps li::before {
	content: "";
	z-index: 1;
	width: var(--dot);
	height: var(--dot);
	border-radius: 999px;
	background: var(--panel);
	box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--text) 16%, transparent);
}

.steps .done {
	color: var(--muted);
}

.steps .done::before {
	background: var(--tone);
	box-shadow: none;
}

.steps .now {
	color: var(--text);
	font-weight: 550;
}

.steps .now::before {
	background: var(--tone);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--tone) 22%, transparent);
}

/* An incident's updates, newest first, on one quiet line. */
.timeline {
	margin: 18px 0 0;
	padding: 0;
	list-style: none;
}

.timeline li {
	position: relative;
	padding: 0 0 16px 22px;
}

.timeline li:last-child {
	padding-bottom: 0;
}

.timeline li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 7px;
	width: 7px;
	height: 7px;
	border-radius: 999px;
	background: var(--faint);
}

.timeline li:first-child::before {
	background: var(--tone);
}

.timeline li:not(:last-child)::after {
	content: "";
	position: absolute;
	left: 3px;
	top: 20px;
	bottom: 4px;
	width: 1px;
	background: var(--line);
}

.timeline b {
	font-weight: 550;
	font-size: 13px;
}

.timeline time {
	display: inline;
	margin: 0 0 0 8px;
	color: var(--faint);
	font-size: 13px;
}

.timeline p {
	margin-top: 2px;
	color: var(--soft);
	font-size: 14px;
}

/* ---------- Services ---------- */

.service {
	padding: 18px var(--gutter) 20px;
}

.service + .service {
	box-shadow: 0 -1px 0 var(--line);
}

.service-head {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

.service-head h3 {
	min-width: 0;
	overflow: hidden;
	font-size: 15px;
	font-weight: 550;
	letter-spacing: -0.01em;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.service-note {
	margin-top: 2px;
	padding-left: 26px;
	color: var(--muted);
	font-size: 13.5px;
}

.percent {
	margin-left: auto;
	padding-left: 12px;
	color: var(--muted);
	font-size: 13.5px;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* A group: one row with the combined history. Its members' bars are always
   drawn, stacked exactly under it; opening slides them apart, so the row
   splits into its members. */
.group-toggle {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.count {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	color: var(--muted);
	font-size: 13.5px;
	white-space: nowrap;
	transition: color 160ms ease;
}

.group-toggle:hover .count {
	color: var(--text);
}

.count .chevron {
	transition: rotate 520ms var(--spring);
}

.group.open .count .chevron {
	rotate: 90deg;
}

.stack {
	position: relative;
	margin-top: 14px;
}

.stack .uptime {
	margin-top: 0;
}

/* The combined bar sits on top while closed. Opening, it lets go at once and
   the rows glide out from under it; closing, it returns only once they are
   tucked back in. Short fades at the ends, never long crossfades, which read
   as ghosting. */
.stack > .combined {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	z-index: 50;
	transition: opacity 90ms linear var(--glide-time);
}

.group.open .stack > .combined {
	opacity: 0;
	pointer-events: none;
	transition: opacity 90ms linear;
}

/* Days are layered by how bad they were, not by row: wherever rows overlap
   while sliding, a red day shows over amber, amber over maintenance, and all
   over green, so the stack always reads like the combined bar. Among equal
   days, upper rows stay on top (order set per row). */
.member {
	position: relative;
	display: grid;
	grid-template-rows: 0fr auto;
	transition:
		grid-template-rows var(--glide-time) var(--glide),
		margin-top var(--glide-time) var(--glide);
}

.group.open .member {
	grid-template-rows: 1fr auto;
}

/* Closed, each member's bars sit exactly on the one before. */
.member + .member {
	margin-top: calc(-1 * var(--bar-height));
}

.group.open .member + .member {
	margin-top: 18px;
}

/* Names arrive as the rows settle, and leave first. */
.member-head {
	min-height: 0;
	overflow: clip;
	opacity: 0;
	transition: opacity 90ms linear;
}

.group.open .member-head {
	opacity: 1;
	transition: opacity 220ms ease calc(var(--glide-time) * 0.55);
}

.member-head > div {
	padding: 6px 0 10px;
}

.member .service-head h3 {
	color: var(--soft);
	font-weight: 500;
}

/* Open, the members carry state and uptime: the group's own icon folds away
   as its name slides into its place, and the percentage fades. */
.group-toggle .service-head > .status-icon {
	transition:
		opacity 200ms ease,
		width 520ms var(--spring),
		margin-right 520ms var(--spring);
}

.group-toggle .percent {
	transition: opacity 200ms ease;
}

.group.open .group-toggle .service-head > .status-icon {
	width: 0;
	margin-right: -10px;
	opacity: 0;
}

.group.open .group-toggle .percent {
	opacity: 0;
}

.member .service-note {
	padding-left: 0;
}

/* Days as a row of crisp blocks, oldest first. */
/* Each day gets the same whole number of pixels: the row is sized to a
   multiple of its day count, so no bar is rounded thinner than its neighbour. */
.uptime {
	--n: var(--days);
	--gap: 2px;
	width: 100%;
	width: calc(var(--n) * round(down, (100% + var(--gap)) / var(--n), 1px) - var(--gap));
	margin-top: 14px;
}

.days {
	display: grid;
	grid-template-columns: repeat(var(--n), minmax(0, 1fr));
	gap: var(--gap);
	height: var(--bar-height);
}

.day {
	position: relative;
	display: block;
}

.day > .bar {
	display: block;
	height: 100%;
	border-radius: 2px;
	background: var(--tone);
	transition: scale 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.day.operational > .bar {
	background: var(--ok);
}

.day.unknown > .bar {
	background: var(--empty);
}

/* Dock-style magnification: the bar under the pointer grows most, its
   neighbours less, the next ones a touch. Height only, so the gaps between
   bars stay even, and from the middle, so bars grow both up and down. */
.days .day:hover > .bar {
	scale: 1 1.6;
}

.days .day:hover + .day > .bar,
.days .day:has(+ .day:hover) > .bar {
	scale: 1 1.3;
}

.days .day:hover + .day + .day > .bar,
.days .day:has(+ .day + .day:hover) > .bar {
	scale: 1 1.12;
}

/* A hovered day, and the section holding it, sit above everything after them,
   so its card stays clickable over the next rows and the next section. */
.day:hover,
.day:focus-within {
	z-index: 100;
}

.block:has(.day-card.floating.open, .date-cell:hover, .phase.active) {
	position: relative;
	z-index: 10;
}

.member .day {
	z-index: var(--order);
}

.member .day.maintenance {
	z-index: calc(var(--order) + 10);
}

.member .day.degraded {
	z-index: calc(var(--order) + 20);
}

.member .day.outage {
	z-index: calc(var(--order) + 30);
}

.member:has(.day-card.floating.open) {
	z-index: 100;
}

/* Closed groups' combined rows share one level; the hovered one goes on top,
   or the next group's bars cover its card. */
.stack > .combined:has(.day-card.floating.open) {
	z-index: 60;
}

.phases-wrap:has(.phase.active) {
	z-index: 100;
}

/* The day's card opens below its bar; a bridge keeps it open on the way down. */
.day-card {
	position: absolute;
	top: calc(100% + 10px);
	left: 50%;
	display: grid;
	gap: 8px;
	width: max-content;
	min-width: 200px;
	max-width: 300px;
	padding: 12px 14px;
	text-align: left;
	opacity: 0;
	visibility: hidden;
	translate: -50% -4px;
	transition:
		opacity 140ms ease,
		translate 180ms cubic-bezier(0.22, 1, 0.36, 1),
		visibility 0s linear 140ms;
	z-index: 5;
}

.day-card::before {
	content: "";
	position: absolute;
	right: 0;
	bottom: 100%;
	left: 0;
	height: 12px;
}

/* The bars' card: one per row, gliding to the day under the pointer. */
.uptime {
	position: relative;
}

.day-card.floating {
	top: calc(var(--bar-height) + 10px);
	z-index: 100;
	pointer-events: none;
}

.day-card.floating.open {
	opacity: 1;
	visibility: visible;
	translate: -50% 0;
	transition-delay: 0s;
}

/* Only a card with something to click catches the pointer; otherwise it lets
   the pointer through to the bars underneath, so it never gets in the way. */
.day-card.floating.open.interactive {
	pointer-events: auto;
}

.card-date {
	color: var(--muted);
	font-size: 13px;
}

.card-row {
	display: grid;
	grid-template-columns: 16px minmax(0, 1fr);
	align-items: start;
	gap: 10px;
}

.card-row .status-icon {
	margin-top: 2px;
}

/* A linked row is one target with a soft highlight, reaching to the card's
   inner edge. */
a.card-row {
	margin: 0 -8px;
	padding: 7px 8px;
	border-radius: 8px;
	color: inherit;
	text-decoration: none;
	transition: background 140ms ease;
}

/* A linked row brings its own padding for the highlight; the card gives back
   the same amount below it so the edges stay even. */
.day-card:has(> a.card-row:last-child) {
	padding-bottom: 6px;
}

a.card-row:hover,
a.card-row:focus-visible {
	background: color-mix(in srgb, var(--text) 7%, transparent);
	outline: none;
}

/* ---------- Calendar ---------- */

.pager {
	display: inline-flex;
	align-items: center;
	gap: 2px;
}

.pager button {
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	border-radius: 6px;
	background: none;
	color: var(--muted);
	cursor: pointer;
	transition:
		background 160ms ease,
		color 160ms ease;
}

.pager button:hover:not(:disabled) {
	background: color-mix(in srgb, var(--text) 6%, transparent);
	color: var(--text);
}

.pager button:disabled {
	opacity: 0.35;
	cursor: default;
}

.pager .range {
	min-width: 72px;
	text-align: center;
}

.month {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 2px 0;
	margin: 0;
	padding: 12px 16px 18px;
	list-style: none;
}

.month li {
	position: relative;
	display: grid;
	place-items: center;
	height: 42px;
	color: var(--muted);
	font-size: 13px;
	font-variant-numeric: tabular-nums;
}

.month .weekday {
	height: 32px;
	color: var(--faint);
	font-size: 12px;
	font-weight: 500;
}

/* What the rings mean, under the calendar. */
.legend {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px 18px;
	margin: 0;
	padding: 4px var(--gutter) 18px;
	list-style: none;
	color: var(--muted);
	font-size: 12.5px;
}

.legend li {
	display: inline-flex;
	align-items: center;
	gap: 7px;
}

.legend li::before {
	content: "";
	width: 10px;
	height: 10px;
	border-radius: 999px;
	box-shadow: inset 0 0 0 1.5px var(--tone);
}

.legend .operational::before {
	box-shadow: none;
	background: var(--tone);
	scale: 0.6;
}

/* Days without data (including days still to come) step well back. */
.month .empty {
	color: var(--faint);
	opacity: 0.55;
}

.date-cell > span:first-child {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 999px;
	transition: background 160ms ease;
}

.date-cell.operational {
	color: var(--text);
}

/* A day with trouble is ringed in its colour, the figure in that colour too;
   the ring hugs the figure. */
.date-cell:is(.degraded, .outage, .maintenance) > span:first-child {
	width: 28px;
	height: 28px;
	box-shadow: inset 0 0 0 1.5px var(--tone);
	/* A shade darker than the ring, so amber stays legible on white. */
	color: color-mix(in srgb, var(--tone) 78%, var(--text));
	font-weight: 600;
}

.date-cell:not(.empty):hover > span:first-child {
	background: color-mix(in srgb, var(--text) 7%, transparent);
}

.date-cell:is(.degraded, .outage, .maintenance):hover > span:first-child {
	background: color-mix(in srgb, var(--tone) 14%, transparent);
}


/* A date's card opens below it, like the day bars'. */
.date-cell > .day-card {
	top: calc(100% - 2px);
}

/* Only when the pointer rests on a date: passing over the calendar opens
   nothing. Keyboard focus opens it at once. */
.date-cell:hover > .day-card,
.date-cell:focus-within > .day-card {
	opacity: 1;
	visibility: visible;
	translate: -50% 0;
	transition-delay: 400ms;
}

.date-cell:focus-within > .day-card {
	transition-delay: 0s;
}

.date-cell:hover,
.date-cell:focus-within {
	z-index: 100;
}

/* Centred under its date; only on phones do the outer columns line up with
   the edge so the card stays on screen. */
@media (max-width: 640px) {
	.month li:nth-child(7n + 1) > .day-card {
		left: 4px;
		translate: 0 -4px;
	}
	.month li:nth-child(7n + 1):hover > .day-card {
		translate: 0 0;
	}
	.month li:nth-child(7n) > .day-card {
		left: auto;
		right: 4px;
		translate: 0 -4px;
	}
	.month li:nth-child(7n):hover > .day-card {
		translate: 0 0;
	}
}

/* ---------- Maintenance ---------- */

.plan {
	display: grid;
	grid-template-columns: 52px minmax(0, 1fr);
	gap: 18px;
	padding: 20px var(--gutter);
}

.plan + .plan {
	box-shadow: 0 -1px 0 var(--line);
}

/* A calendar leaf: month above, day below. */
.date {
	display: grid;
	place-content: center;
	height: 56px;
	border: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
	border-radius: 12px;
	color: var(--text);
	text-align: center;
	line-height: 1.1;
	overflow: hidden;
}

.date small {
	display: block;
	margin: -1px -14px 4px;
	padding: 3px 0;
	background: color-mix(in srgb, var(--maintenance) 14%, transparent);
	color: var(--maintenance);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.date b {
	display: block;
	font-size: 20px;
	font-weight: 600;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
}

.date svg {
	color: var(--maintenance);
}

.plan-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
}

.plan h3 {
	font-size: 15px;
	font-weight: 550;
}

.plan time {
	display: block;
	margin-top: 3px;
	color: var(--muted);
	font-size: 13px;
	font-variant-numeric: tabular-nums;
}

.plan p {
	margin-top: 8px;
	color: var(--soft);
	font-size: 14px;
}

/* An active window shows how far along it is. */
.plan-progress {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 12px;
}

.plan-progress > span {
	flex: 1;
	height: 6px;
	overflow: hidden;
	border-radius: 999px;
	background: color-mix(in srgb, var(--maintenance) 14%, transparent);
}

.plan-progress i {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: var(--maintenance);
}

.plan-progress small {
	color: var(--muted);
	font-size: 12.5px;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.calm {
	padding: 0 4px;
	color: var(--muted);
}

/* ---------- Follow by email ---------- */

.subscribe {
	padding-top: 72px;
}

.subscribe h2 {
	font-size: clamp(1.6rem, 4vw, 2.1rem);
	line-height: 1.1;
	letter-spacing: -0.035em;
}

.subscribe h2 span {
	color: var(--faint);
}

.subscribe form {
	display: flex;
	gap: 8px;
	max-width: 440px;
	margin-top: 24px;
}

.subscribe input {
	flex: 1;
	min-width: 0;
	height: 44px;
	padding: 0 16px;
	border: 0;
	border-radius: 12px;
	background: var(--panel);
	box-shadow: inset 0 0 0 1px var(--panel-edge);
	color: var(--text);
	font: inherit;
	transition: box-shadow 160ms ease;
}

.subscribe input::placeholder {
	color: var(--faint);
}

.subscribe input:focus {
	outline: none;
	box-shadow:
		inset 0 0 0 1px var(--panel-edge),
		0 0 0 3px color-mix(in srgb, var(--ink) 18%, transparent);
}

.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 44px;
	padding: 0 18px;
	border: 0;
	border-radius: 12px;
	background: var(--ink);
	color: var(--on-ink);
	font: 550 14px/1 var(--font-body);
	text-decoration: none;
	cursor: pointer;
	transition:
		scale 120ms ease,
		opacity 160ms ease;
}

.button:hover {
	opacity: 0.9;
}

.button:active {
	scale: 0.98;
}

.subscribe .fine {
	margin-top: 12px;
	color: var(--faint);
	font-size: 13px;
}

/* ---------- Links to incident pages ---------- */

/* ---------- Incident page ---------- */

.back {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-top: 32px;
	color: var(--muted);
	font-size: 14px;
	text-decoration: none;
	transition: color 160ms ease;
}

.back:hover {
	color: var(--text);
}

.incident-hero {
	padding: 18px 0 4px;
}

.incident-hero h1 {
	font-size: clamp(1.6rem, 4vw, 2rem);
	line-height: 1.15;
	letter-spacing: -0.03em;
}

.labels {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 14px;
}

.label {
	display: inline-flex;
	align-items: center;
	height: 26px;
	padding: 0 10px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--tone) 13%, transparent);
	color: var(--text);
	font-size: 13px;
	font-weight: 500;
}

.label::before {
	content: "";
	width: 7px;
	height: 7px;
	margin-right: 7px;
	border-radius: 999px;
	background: var(--tone);
}

.incident-hero > p:not(.labels) {
	max-width: 36rem;
	margin-top: 16px;
	color: var(--soft);
}

.facts {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 32px;
	margin: 20px 0 0;
}

.facts dt {
	color: var(--faint);
	font-size: 12.5px;
}

.facts dd {
	margin: 2px 0 0;
	color: var(--soft);
	font-size: 14px;
	font-variant-numeric: tabular-nums;
}

/* The incident window as a ruler: round times along the top, small marks where
   it began and ended, and the exact time under the pointer. */
.timeline-area {
	--inset: var(--gutter);
	position: relative;
}

.ruler {
	position: relative;
	height: 38px;
	margin: 0 var(--inset);
	color: var(--faint);
	font-size: 12px;
	font-variant-numeric: tabular-nums;
}

.ruler .tick {
	position: absolute;
	bottom: 10px;
	translate: -50% 0;
	white-space: nowrap;
}

.ruler .tick::after {
	content: "";
	position: absolute;
	top: calc(100% + 4px);
	left: 50%;
	width: 1px;
	height: 6px;
	background: color-mix(in srgb, var(--text) 14%, transparent);
}

.ruler .edge {
	position: absolute;
	bottom: 0;
	width: 2px;
	height: 6px;
	border-radius: 2px;
	translate: -50% 0;
	background: color-mix(in srgb, var(--text) 35%, transparent);
}

.ruler .cursor {
	position: absolute;
	bottom: 8px;
	z-index: 2;
	padding: 2px 8px;
	border-radius: 999px;
	translate: -50% 0;
	background: var(--ink);
	color: var(--on-ink);
	font-weight: 500;
	white-space: nowrap;
}

.cursor-line {
	position: absolute;
	top: 34px;
	bottom: 14px;
	left: calc(var(--inset) + (100% - 2 * var(--inset)) * var(--at));
	z-index: 3;
	width: 1px;
	background: color-mix(in srgb, var(--text) 45%, transparent);
	pointer-events: none;
}

.affected-row {
	padding: 16px var(--gutter) 20px;
	box-shadow: 0 -1px 0 var(--line);
}

.affected-row h3 {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 12px;
	font-size: 15px;
	font-weight: 550;
	letter-spacing: -0.01em;
}

.affected-row.open .count .chevron {
	rotate: 90deg;
}

.affected-members > div {
	padding-top: 16px;
}

.affected-members h4 {
	margin: 0 0 10px 0;
	color: var(--soft);
	font-size: 14px;
	font-weight: 500;
}

/* Phases sit side by side, each as wide as it lasted. */
.phases-wrap {
	position: relative;
}

.phases {
	display: flex;
	gap: 3px;
	height: 16px;
}

.phase {
	flex-basis: 0;
	min-width: 4px;
	border-radius: 3px;
	background: var(--tone);
	transition: scale 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.phase.operational {
	background: var(--ok);
}

.phase.unknown {
	background: var(--empty);
}

.phase.active {
	scale: 1 1.4;
}

.phase-card,
.day-card {
	border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
	border-radius: 12px;
	background: var(--panel);
	box-shadow: 0 10px 30px -8px #00000040;
	color: var(--text);
	font-size: 14px;
	line-height: 1.4;
}

.phase-card {
	position: absolute;
	top: calc(100% + 10px);
	width: max-content;
	max-width: 300px;
	padding: 10px 14px;
	translate: -50% 0;
	pointer-events: none;
	animation: card-in 160ms cubic-bezier(0.22, 1, 0.36, 1);
	z-index: 5;
}

.phase-card.start {
	translate: -12px 0;
}

.phase-card.end {
	translate: calc(-100% + 12px) 0;
}

.phase-card b {
	display: block;
	font-weight: 550;
}

@keyframes card-in {
	from {
		opacity: 0;
		margin-top: -4px;
	}
}

.updates {
	padding: 20px var(--gutter) 22px;
}

.updates .timeline {
	margin: 0;
}

/* ---------- History ---------- */

/* "View history" as a quiet button under everything else. */
.history-more {
	display: flex;
	justify-content: center;
	margin-top: 32px;
}

.history-link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	height: 38px;
	padding: 0 14px 0 16px;
	border: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
	border-radius: 999px;
	background: var(--panel);
	color: var(--text);
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	transition:
		background 160ms ease,
		border-color 160ms ease;
}

.history-link:hover {
	background: color-mix(in srgb, var(--text) 5%, var(--panel));
	border-color: color-mix(in srgb, var(--text) 22%, transparent);
}

.crumbs {
	display: flex;
	gap: 8px;
	margin-top: 32px;
	color: var(--muted);
	font-size: 14px;
}

.crumbs a {
	text-decoration: none;
	transition: color 160ms ease;
}

.crumbs a:hover {
	color: var(--text);
}

.crumbs span:last-child {
	color: var(--text);
}

.history-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 16px;
	margin-top: 20px;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--line);
}

.history-head h1 {
	font-size: 24px;
	letter-spacing: -0.025em;
}

.history-filter {
	margin-left: auto;
}

.history-filter select {
	height: 36px;
	padding: 0 34px 0 12px;
	border: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
	border-radius: 10px;
	background: var(--panel)
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23888' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5'/%3E%3C/svg%3E")
		no-repeat right 12px center;
	color: var(--text);
	font: 14px var(--font-body);
	appearance: none;
	cursor: pointer;
}

.history-month h2 {
	margin-top: 28px;
	font-size: 16px;
	letter-spacing: -0.01em;
}

/* Each day: the date on the left, its incidents on the right. */
.history-day {
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr);
	gap: 16px;
	padding: 18px 0;
	border-bottom: 1px solid var(--line);
}

.history-date {
	display: flex;
	align-items: baseline;
	gap: 6px;
	padding-top: 6px;
}

.history-date b {
	font-size: 16px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.history-date span {
	color: var(--faint);
	font-size: 13px;
}

.history-day ul {
	display: grid;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* An incident: a bar in its colour, title and time, then its latest words. */
.history-item {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 2px 16px;
	position: relative;
	padding: 6px 12px 8px 18px;
	border-radius: 10px;
	color: inherit;
	text-decoration: none;
	transition: background 140ms ease;
}

/* A straight bar in the impact's colour, inset from the rounded corners. */
.history-item::before {
	content: "";
	position: absolute;
	top: 6px;
	bottom: 6px;
	left: 0;
	width: 3px;
	border-radius: 2px;
	background: var(--tone);
}

a.history-item:hover {
	background: color-mix(in srgb, var(--text) 5%, transparent);
}

.history-title {
	font-weight: 550;
}

.history-item time {
	color: var(--faint);
	font-size: 13px;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.history-words {
	grid-column: 1 / -1;
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	color: var(--muted);
	font-size: 14px;
}

.history-empty {
	padding: 32px 0;
}

/* ---------- Footer ---------- */

/* Just the logo, centred and quiet. */
.foot {
	display: flex;
	justify-content: center;
	margin-top: 64px;
	color: var(--muted);
	font-size: 15px;
}

.foot a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	text-decoration: none;
	transition: color 160ms ease;
}

.foot a:hover {
	color: var(--text);
}

/* At night the logo steps back one shade further. */
@media (prefers-color-scheme: dark) {
	.status-site:not(.branded) .foot {
		color: var(--faint);
	}
	.status-site:not(.branded) .foot a:hover {
		color: var(--muted);
	}
}

/* The logo file as a mask, so it takes the footer's colour in every theme. */
.foot .logo {
	display: block;
	height: 22px;
	aspect-ratio: 310 / 66;
	background: currentColor;
	-webkit-mask: url("/logo-full.svg") center / contain no-repeat;
	mask: url("/logo-full.svg") center / contain no-repeat;
}

/* ---------- Single-message pages ---------- */

.message {
	display: grid;
	justify-items: center;
	align-content: center;
	min-height: calc(100dvh - 120px);
	padding: 40px 0;
	text-align: center;
}

.message .status-icon {
	width: 28px;
	height: 28px;
}

.message h1 {
	margin-top: 20px;
	font-size: clamp(1.9rem, 5vw, 2.6rem);
	line-height: 1.05;
	letter-spacing: -0.035em;
}

.message p {
	max-width: 26rem;
	margin-top: 14px;
	color: var(--muted);
	font-size: 16px;
}

.message .button {
	margin-top: 28px;
}

/* ---------- Motion ---------- */

@media (prefers-reduced-motion: no-preference) {
	.rise {
		animation: rise 700ms cubic-bezier(0.22, 1, 0.36, 1) both;
	}
	.rise-2 {
		animation-delay: 80ms;
	}
	.rise-3 {
		animation-delay: 160ms;
	}
}

@media (prefers-reduced-motion: reduce) {
	.member,
	.member-head,
	.group-toggle .service-head > .status-icon,
	.stack > .combined,
	.day > .bar,
	.day-card,
	.phase,
	.phase-card,
	.count .chevron {
		transition: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.phase-card {
		animation: none;
	}
}

@keyframes rise {
	from {
		opacity: 0;
		translate: 0 10px;
	}
}

/* ---------- Small screens ---------- */

@media (max-width: 640px) {
	.page {
		padding-top: 18px;
	}
	.banner {
		margin-top: 24px;
	}
	.status-site {
		--gutter: 18px;
	}
	.uptime {
		--n: min(var(--days), 30);
	}
	.month {
		padding: 8px 8px 14px;
	}
	.history-day {
		grid-template-columns: minmax(0, 1fr);
		gap: 6px;
	}
	.history-filter {
		margin-left: 0;
	}
	.month li {
		height: 38px;
	}
	.date-cell > span:first-child {
		width: 30px;
		height: 30px;
	}
	/* Thirty days fit a phone; older ones step aside. */
	.days .day:nth-last-child(n + 31) {
		display: none;
	}
	.wide-only {
		display: none;
	}
	.subscribe form {
		flex-direction: column;
	}
	.foot {
		margin-top: 48px;
	}
}

@media (min-width: 641px) {
	.narrow-only {
		display: none;
	}
}