@font-face {
	font-family: 'Fredoka Variable';
	font-style: normal;
	font-display: swap;
	font-weight: 300 700;
	src: url('/fonts/fredoka-latin-wght-normal.woff2') format('woff2-variations');
}

@font-face {
	font-family: 'Figtree Variable';
	font-style: normal;
	font-display: swap;
	font-weight: 300 900;
	src: url('/fonts/figtree-latin-wght-normal.woff2') format('woff2-variations');
}

/* The app's dark tokens (web/src/lib/styles/global.css), plus the status colors. */
:root {
	color-scheme: dark;
	--bg-sunken: #0b0d0e;
	--bg: #101315;
	--bg-raised: #171b1e;
	--surface: #1e2327;
	--surface-hover: #262c31;
	--border: #2e363b;
	--border-strong: #3f494f;
	--text: #eef2f2;
	--text-2: #b4bfc3;
	--text-3: #8c999f;
	--accent: #2ec4b6;
	--accent-hover: #4dd4c7;
	--on-accent: #04201d;
	--focus: #7fe3d9;

	--ok: #3ecf6e;
	--on-ok: #04200d;
	--warn: #f2b84b;
	--on-warn: #2a1c00;
	--bad: #f47c76;
	--on-bad: #2a0705;
	--maint: #2ec4b6;
	--none: #343d43;

	--s-1: 4px;
	--s-2: 8px;
	--s-3: 12px;
	--s-4: 16px;
	--s-5: 24px;
	--s-6: 32px;
	--s-7: 48px;
	--s-8: 64px;
	--r-sm: 6px;
	--r-md: 10px;
	--r-lg: 16px;
	--font-display: 'Fredoka Variable', system-ui, sans-serif;
	--font-body: 'Figtree Variable', system-ui, sans-serif;
	--speed: 120ms;
}

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

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font: 400 16px/1.5 var(--font-body);
	-webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
p,
ol,
ul,
figure,
pre {
	margin: 0;
}

ol,
ul {
	padding: 0;
	list-style: none;
}

a {
	color: var(--accent);
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

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

.ic {
	flex: none;
}

.wrap {
	width: 100%;
	max-width: 880px;
	margin: 0 auto;
	padding-left: max(var(--s-5), env(safe-area-inset-left));
	padding-right: max(var(--s-5), env(safe-area-inset-right));
}

/* --- Header ---------------------------------------------------------------------------------- */

.top {
	border-bottom: 1px solid var(--border);
	background: var(--bg-sunken);
}

.top-row {
	display: flex;
	align-items: center;
	gap: var(--s-4);
	min-height: 68px;
}

.brand {
	display: inline-flex;
	align-items: center;
	gap: var(--s-3);
	color: var(--text);
	font: 600 22px/1 var(--font-display);
}

.brand:hover {
	text-decoration: none;
}

.brand b {
	font-weight: 600;
	color: var(--accent);
}

.brand .baff {
	width: 34px;
	height: 40px;
}

.top-links {
	display: flex;
	gap: var(--s-2);
	margin-left: auto;
}

.btn {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	height: 38px;
	padding: 0 var(--s-4);
	border-radius: var(--r-sm);
	font-size: 15px;
	font-weight: 700;
	white-space: nowrap;
	transition: background-color var(--speed), border-color var(--speed);
}

.btn:hover {
	text-decoration: none;
}

.btn.ghost {
	border: 1px solid var(--border-strong);
	color: var(--text);
}

.btn.ghost:hover {
	background: var(--surface);
	border-color: var(--text-3);
}

.btn.solid {
	background: var(--accent);
	color: var(--on-accent);
}

.btn.solid:hover {
	background: var(--accent-hover);
}

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

main {
	padding-top: var(--s-6);
	padding-bottom: var(--s-8);
}

.banner {
	display: flex;
	align-items: center;
	gap: var(--s-4);
	padding: var(--s-5);
	border-radius: var(--r-lg);
	background: var(--ok);
	color: var(--on-ok);
}

.banner h1 {
	font: 600 28px/1.15 var(--font-display);
}

.banner p {
	margin-top: var(--s-1);
	font-size: 15px;
	font-weight: 500;
}

.b-degraded {
	background: var(--warn);
	color: var(--on-warn);
}

.b-partial,
.b-major {
	background: var(--bad);
	color: var(--on-bad);
}

.b-maintenance {
	background: var(--maint);
	color: var(--on-accent);
}

.b-unknown {
	background: var(--surface);
	color: var(--text);
}

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

.section {
	margin-top: var(--s-7);
}

.section > h2 {
	margin-bottom: var(--s-3);
	font: 600 20px/1.2 var(--font-display);
}

.lede {
	margin: calc(var(--s-3) * -1 + var(--s-1)) 0 var(--s-4);
	color: var(--text-2);
	font-size: 15px;
}

.quiet {
	color: var(--text-3);
	font-size: 15px;
}

/* --- Components -------------------------------------------------------------------------------- */

.comps {
	border: 1px solid var(--border);
	border-radius: var(--r-lg);
	background: var(--bg-raised);
}

.comp {
	padding: var(--s-5);
}

.comp + .comp {
	border-top: 1px solid var(--border);
}

.comp-head {
	display: flex;
	align-items: flex-start;
	gap: var(--s-3);
}

.comp-icon {
	display: grid;
	place-items: center;
	flex: none;
	width: 36px;
	height: 36px;
	border-radius: var(--r-md);
	background: var(--surface);
	color: var(--text-2);
}

.comp-text {
	flex: 1;
	min-width: 0;
}

.comp h3 {
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
}

.comp-text p {
	color: var(--text-2);
	font-size: 14px;
}

.state {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex: none;
	padding-top: 2px;
	font-size: 15px;
	font-weight: 700;
	white-space: nowrap;
}

.state .ms {
	margin-left: var(--s-2);
	color: var(--text-3);
	font-weight: 500;
	font-variant-numeric: tabular-nums;
}

.s-operational .ic {
	color: var(--ok);
}

.s-degraded .ic {
	color: var(--warn);
}

.s-outage .ic {
	color: var(--bad);
}

.s-maintenance .ic {
	color: var(--maint);
}

.s-unknown {
	color: var(--text-2);
}

.bars {
	display: flex;
	gap: 2px;
	height: 34px;
	margin-top: var(--s-4);
}

.bar {
	flex: 1;
	min-width: 0;
	border-radius: 2px;
	background: var(--none);
	cursor: default;
}

.bar.up {
	background: var(--ok);
}

.bar.minor {
	background: var(--warn);
}

.bar.major {
	background: var(--bad);
}

.bar.maint {
	background: var(--maint);
}

.bar:hover,
.bar.on {
	filter: brightness(1.18);
}

.bar:focus-visible {
	outline-offset: 1px;
}

.bars-foot {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	margin-top: var(--s-2);
	color: var(--text-3);
	font-size: 13px;
	white-space: nowrap;
}

.bars-foot .line {
	flex: 1;
	height: 1px;
	background: var(--border);
}

.bars-foot .uptime {
	color: var(--text-2);
	font-weight: 600;
}

.narrow {
	display: none;
}

.legend {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-2) var(--s-5);
	margin-top: var(--s-4);
	color: var(--text-2);
	font-size: 14px;
}

.legend li {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
}

.swatch {
	width: 10px;
	height: 18px;
	border-radius: 2px;
	background: var(--none);
}

.swatch.up {
	background: var(--ok);
}

.swatch.minor {
	background: var(--warn);
}

.swatch.major {
	background: var(--bad);
}

.swatch.maint {
	background: var(--maint);
}

/* --- Tooltip ----------------------------------------------------------------------------------- */

.tip {
	position: fixed;
	z-index: 50;
	max-width: 260px;
	padding: var(--s-2) var(--s-3);
	border: 1px solid var(--border-strong);
	border-radius: var(--r-md);
	background: var(--surface);
	color: var(--text);
	font-size: 14px;
	line-height: 1.4;
	pointer-events: none;
	box-shadow: 0 8px 24px rgb(0 0 0 / 0.4);
}

.tip b {
	display: block;
	font-weight: 700;
}

.tip .tip-row {
	display: flex;
	align-items: center;
	gap: 6px;
	color: var(--text-2);
}

.tip .tip-row .swatch {
	width: 8px;
	height: 8px;
	border-radius: 50%;
}

.tip ul {
	margin-top: var(--s-1);
	color: var(--text-2);
}

/* --- Charts ------------------------------------------------------------------------------------ */

.charts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--s-4);
}

.chart {
	padding: var(--s-4) var(--s-4) var(--s-3);
	border: 1px solid var(--border);
	border-radius: var(--r-lg);
	background: var(--bg-raised);
}

.chart figcaption {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--s-2);
	margin-bottom: var(--s-3);
	font-weight: 700;
	font-size: 15px;
}

.chart figcaption span {
	color: var(--text-3);
	font-weight: 500;
	font-size: 13px;
	font-variant-numeric: tabular-nums;
}

.chart .empty {
	display: grid;
	place-items: center;
	height: 140px;
	color: var(--text-3);
	font-size: 14px;
	text-align: center;
}

.plot-wrap {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--s-2);
}

.y-axis {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 140px;
	margin: -7px 0;
	color: var(--text-3);
	font-size: 11px;
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.plot {
	position: relative;
	height: 140px;
	touch-action: pan-y;
}

.plot svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.plot .grid {
	stroke: var(--border);
	stroke-width: 1;
	stroke-dasharray: 2 4;
	vector-effect: non-scaling-stroke;
}

.plot .base {
	stroke: var(--border-strong);
	stroke-width: 1;
	vector-effect: non-scaling-stroke;
}

.plot .series {
	fill: none;
	stroke: var(--accent);
	stroke-width: 2;
	stroke-linejoin: round;
	stroke-linecap: round;
	vector-effect: non-scaling-stroke;
}

.cross {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 1px;
	background: var(--text-3);
	pointer-events: none;
}

.cross .dot {
	position: absolute;
	left: -5px;
	width: 11px;
	height: 11px;
	border: 2px solid var(--bg-raised);
	border-radius: 50%;
	background: var(--accent);
}

.readout {
	position: absolute;
	top: -6px;
	padding: 4px var(--s-2);
	border: 1px solid var(--border-strong);
	border-radius: var(--r-sm);
	background: var(--surface);
	font-size: 13px;
	white-space: nowrap;
	pointer-events: none;
}

.readout b {
	font-variant-numeric: tabular-nums;
}

.readout span {
	color: var(--text-3);
}

.x-axis {
	display: flex;
	justify-content: space-between;
	color: var(--text-3);
	font-size: 11px;
}

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

.notices {
	display: grid;
	gap: var(--s-3);
	margin-top: var(--s-4);
}

.incident {
	padding: var(--s-4) var(--s-5);
	border-radius: var(--r-lg);
	background: var(--bg-raised);
	border: 1px solid var(--border);
}

.incident h3 {
	display: flex;
	align-items: flex-start;
	gap: var(--s-2);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.35;
}

.incident h3 .ic {
	margin-top: 1px;
}

.i-outage h3 .ic {
	color: var(--bad);
}

.i-degraded h3 .ic {
	color: var(--warn);
}

.i-maintenance h3 .ic {
	color: var(--maint);
}

.incident .when,
.incident .affects {
	margin-top: 2px;
	padding-left: 26px;
	color: var(--text-3);
	font-size: 14px;
}

.updates {
	display: grid;
	gap: var(--s-3);
	margin-top: var(--s-3);
	padding-left: 26px;
}

.updates p {
	color: var(--text-2);
	font-size: 15px;
}

.updates b {
	color: var(--text);
	margin-right: var(--s-1);
}

.updates time {
	color: var(--text-3);
	font-size: 13px;
}

.past {
	display: grid;
}

.past-day {
	padding: var(--s-4) 0;
	border-top: 1px solid var(--border);
}

.past-day:first-child {
	border-top: 0;
	padding-top: 0;
}

.day-title {
	margin-bottom: var(--s-2);
	font-size: 15px;
	font-weight: 700;
	color: var(--text-2);
}

.past-day .incident + .incident {
	margin-top: var(--s-3);
}

.older {
	margin-top: var(--s-2);
}

.older summary {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	padding: var(--s-2) 0;
	color: var(--text-2);
	font-weight: 700;
	cursor: pointer;
	list-style: none;
}

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

.older[open] summary .ic {
	transform: rotate(180deg);
}

.older .incident {
	margin-top: var(--s-3);
}

/* --- Embed ------------------------------------------------------------------------------------- */

.badge-preview {
	display: flex;
	align-items: center;
	min-height: 64px;
	padding: var(--s-4) var(--s-5);
	border: 1px solid var(--border);
	border-radius: var(--r-lg) var(--r-lg) 0 0;
	background: var(--bg-sunken);
}

.badge-preview img {
	display: block;
}

.snippet {
	border: 1px solid var(--border);
	border-top: 0;
	background: var(--bg-raised);
}

.snippet:last-of-type {
	border-radius: 0 0 var(--r-lg) var(--r-lg);
	margin-bottom: var(--s-4);
}

.snippet-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--s-2) var(--s-3) 0 var(--s-5);
	color: var(--text-3);
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.copy {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 32px;
	padding: 0 var(--s-3);
	border: 0;
	border-radius: var(--r-sm);
	background: var(--surface);
	color: var(--text);
	font: 700 14px var(--font-body);
	text-transform: none;
	letter-spacing: 0;
	cursor: pointer;
	transition: background-color var(--speed);
}

.copy:hover {
	background: var(--surface-hover);
}

.copy.done .ic {
	color: var(--ok);
}

.snippet pre {
	padding: var(--s-2) var(--s-5) var(--s-4);
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	color: var(--text-2);
	font: 13.5px/1.6 ui-monospace, 'Cascadia Code', Consolas, monospace;
}

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

.foot {
	border-top: 1px solid var(--border);
	background: var(--bg-sunken);
	padding-bottom: env(safe-area-inset-bottom);
}

.foot-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-4);
	min-height: 72px;
	flex-wrap: wrap;
}

.foot-row p {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	font: 600 18px var(--font-display);
}

.foot .baff {
	width: 24px;
	height: 28px;
}

.foot nav {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-5);
	font-size: 15px;
}

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

/* --- Phones ------------------------------------------------------------------------------------ */

@media (max-width: 640px) {
	.wrap {
		padding-left: max(var(--s-4), env(safe-area-inset-left));
		padding-right: max(var(--s-4), env(safe-area-inset-right));
	}

	.top-row {
		min-height: 60px;
	}

	.brand {
		font-size: 19px;
	}

	.brand .baff {
		width: 28px;
		height: 33px;
	}

	.btn {
		height: 36px;
		padding: 0 var(--s-3);
		font-size: 14px;
	}

	.btn.solid {
		display: none;
	}

	main {
		padding-top: var(--s-5);
	}

	.banner {
		align-items: flex-start;
		padding: var(--s-4);
	}

	.banner .ic {
		width: 32px;
		height: 32px;
	}

	.banner h1 {
		font-size: 22px;
	}

	.banner p {
		font-size: 14px;
	}

	.comp {
		padding: var(--s-4);
	}

	.comp-head {
		display: grid;
		grid-template-columns: 36px minmax(0, 1fr);
		gap: 0 var(--s-3);
	}

	.state {
		grid-column: 2;
		margin-top: var(--s-1);
		padding-top: 0;
		font-size: 14px;
	}

	.bars .old {
		display: none;
	}

	.bars {
		gap: 3px;
		height: 30px;
	}

	.wide {
		display: none;
	}

	.narrow {
		display: inline;
	}

	.charts {
		grid-template-columns: minmax(0, 1fr);
	}

	.incident {
		padding: var(--s-4);
	}

	.foot-row {
		padding-top: var(--s-4);
		padding-bottom: var(--s-4);
	}
}

@media (prefers-reduced-motion: reduce) {
	* {
		transition: none !important;
	}
}