:root {
	--color-white: #fff;
	--color-neutral-50: oklch(0.985 0 0);
	--color-neutral-100: oklch(0.97 0 0);
	--color-neutral-200: oklch(0.922 0 0);
	--color-neutral-300: oklch(0.87 0 0);
	--color-neutral-400: oklch(0.708 0 0);
	--color-neutral-500: oklch(0.556 0 0);
	--color-neutral-600: oklch(0.439 0 0);
	--color-neutral-700: oklch(0.371 0 0);
	--color-neutral-800: oklch(0.269 0 0);
	--color-neutral-900: oklch(0.205 0 0);
	--color-neutral-950: oklch(0.145 0 0);

	--color-green: lch(from oklch(72.3% 0.219 149.579) calc(l - 10) c h);
	--color-yellow: lch(from oklch(79.5% 0.184 86.047) calc(l - 10) c h);
	--color-red: lch(from oklch(63.7% 0.237 25.331) calc(l - 10) c h);

	--color-background-primary: light-dark(
		var(--color-white),
		var(--color-neutral-900)
	);
	--color-background-secondary: light-dark(
		var(--color-neutral-200),
		var(--color-neutral-800)
	);
	--color-background-tertiary: light-dark(
		var(--color-neutral-300),
		var(--color-neutral-700)
	);
	--color-border-primary: light-dark(
		var(--color-neutral-200),
		var(--color-neutral-800)
	);

	--color-content-primary: light-dark(
		var(--color-neutral-700),
		var(--color-neutral-300)
	);
	--color-content-secondary: light-dark(
		var(--color-neutral-500),
		var(--color-neutral-400)
	);
	--color-content-tertiary: light-dark(
		var(--color-neutral-400),
		var(--color-neutral-600)
	);

	--spacing-1: 4px;
	--spacing-2: 8px;
	--spacing-3: 12px;
	--spacing-4: 16px;
	--spacing-5: 20px;
	--spacing-6: 24px;
	--spacing-7: 28px;
	--spacing-8: 32px;
	--spacing-max: calc(infinity * 1px);
}

@layer base, views, components;

@layer base {
	*,
	:after,
	:before,
	::backdrop {
		box-sizing: border-box;
		padding: 0;
		margin: 0;
		border: 0 solid;
	}

	html {
		color-scheme: light dark;
		scrollbar-gutter: stable;
		font-family: ui-sans-serif, system-ui;
		line-height: 1.5;

		@media (prefers-reduced-motion: no-preference) {
			interpolate-size: allow-keywords;
		}
	}

	body {
		background-color: var(--color-background-primary);
		color: var(--color-content-primary);
	}

	main {
		max-width: 960px;
		padding-inline: var(--spacing-5);
		margin-inline: auto;
		margin-block: var(--spacing-8);
	}

	:where(button, input, select, textarea) {
		font-family: inherit;
		font-size: inherit;
		background-color: transparent;
		border-radius: 0;
	}

	li {
		list-style: none;
	}

	a {
		color: var(--color-content-secondary);
		text-decoration: underline;
		text-decoration-color: inherit;
		text-decoration-style: dashed;
		text-underline-offset: var(--spacing-1);

		&:focus-visible {
			outline: 1px dashed var(--color-content-secondary);
			outline-offset: var(--spacing-1);
			border-radius: var(--border-radius, 1px);
		}
	}

	button {
		cursor: pointer;
	}

	details summary {
		cursor: pointer;
		list-style: none;
	}

	dl {
		display: grid;
		grid-template-columns: max-content 1fr;
		row-gap: var(--spacing-2);
		column-gap: var(--spacing-6);

		dt {
			color: var(--color-content-secondary);
		}
	}

	dialog {
		overscroll-behavior: contain;

		&::backdrop {
			transition-behavior: allow-discrete;
			transition:
				opacity 200ms ease-in,
				display 200ms ease-in;
			background-color: var(--color-background-primary);
			opacity: 0.6;
			overflow: hidden;
			overscroll-behavior: contain;

			@starting-style {
				opacity: 0;
			}
		}
	}

	table {
		--bg: var(--color-background-tertiary);
		--radius: 4px;

		border-spacing: 0;

		thead {
			background-color: var(--bg);

			th {
				text-align: left;
			}

			th:first-child {
				border-top-left-radius: var(--radius);
			}

			th:last-child {
				border-top-right-radius: var(--radius);
			}
		}

		td,
		th {
			padding: var(--spacing-1) var(--spacing-2);
		}

		tbody {
			td {
				border-right: 1px solid var(--bg);
				border-bottom: 1px solid var(--bg);
				color: var(--color-content-secondary);
			}

			tr td:first-child {
				border-left: 1px solid var(--bg);
			}

			tr:last-child td:first-child {
				border-bottom-left-radius: var(--radius);
			}

			tr:last-child td:last-child {
				border-bottom-right-radius: var(--radius);
			}
		}
	}
}

@layer components {
	.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;
	}

	.environments {
		display: flex;
		flex-direction: column;
		row-gap: var(--spacing-8);
	}

	.project-title {
		align-items: center;
		display: flex;
		font-size: 18px;
		column-gap: var(--spacing-4);

		hr {
			height: 0;
			color: inherit;
			flex: 1;
			border-top: 1px solid var(--color-content-tertiary);
		}
	}

	.projects {
		--hover: hsl(from var(--color-background-secondary) h s l / 0.4);

		container-type: inline-size;
		margin-top: var(--spacing-8);

		li {
			position: relative;

			&:has(.toggle:hover),
			&:has(.toggle:focus-visible) {
				.row {
					background-color: var(--hover);
				}
			}

			&:has(:checked) {
				.row {
					background-color: var(--hover);
					border-bottom-right-radius: 0;
					border-bottom-left-radius: 0;
				}

				.dependencies-wrap {
					block-size: auto;
					opacity: 1;
					border: 1px solid var(--hover);
					border-bottom-left-radius: var(--spacing-1);
					border-bottom-right-radius: var(--spacing-1);

					@starting-style {
						border-bottom-left-radius: 0;
						border-bottom-right-radius: 0;
					}

					> div {
						margin-block: var(--spacing-4);

						@starting-style {
							margin-block: 0;
						}
					}
				}
			}
		}

		.toggle {
			cursor: pointer;
			border-radius: var(--spacing-1);
			position: absolute;
			inset: 0;
			z-index: 1;
			margin: 0;
			opacity: 0;
			width: 100%;
			height: 100%;
			transition: background-color 150ms ease-in-out;

			&:focus-visible {
				opacity: 1;
				outline: 1px solid var(--color-background-secondary, highlight);
				outline-offset: 4px;
				outline-style: dashed;
				background-color: transparent;
				appearance: none;
			}
		}

		.row {
			border-radius: var(--spacing-1);
			display: grid;
			gap: var(--spacing-4);
			grid-template-columns: 200px 1fr;
			padding: var(--spacing-4);
			position: relative;
			transition: background-color 150ms ease-in-out;

			@container (width < 480px) {
				grid-template-columns: 1fr;
			}

			.header a {
				position: relative;
				z-index: 2;
			}

			.content {
				position: relative;
				z-index: 2;
			}
		}

		> * + * {
			margin-top: var(--spacing-4);
		}
	}

	.checks {
		--check-size: 10px;

		border-radius: 6px;
		padding: 4px;
		border: 1px solid var(--color-border-primary);
		display: grid;
		grid-template-columns: repeat(48, minmax(var(--check-size), 1fr));
		gap: var(--spacing-1);
		margin-bottom: var(--spacing-1);

		@container (width < 900px) {
			grid-template-columns: repeat(auto-fit, minmax(var(--check-size), 1fr));
		}

		@container (width < 480px) {
			--check-size: 42px;
		}

		.check {
			--color: var(--color-background-secondary);
			--bg: var(--color);

			background-color: var(--bg);
			border-radius: 2px;
			height: var(--check-size);
			transition: opacity 150ms ease-in-out;
			opacity: 1;
			width: var(--check-size);

			&[data-status="ok"] {
				--color: var(--color-green);
			}

			&[data-status="degraded"] {
				--color: var(--color-yellow);
			}

			&[data-status="error"] {
				--color: var(--color-red);
			}

			&:focus-visible {
				outline: 1px dashed var(--color-content-secondary);
				outline-offset: 2px;
				border-radius: var(--border-radius, 1px);
				--bg: lch(from var(--color) 100% c h);
			}

			&[data-status]:hover {
				opacity: 0.6;
			}

			@container (width < 480px) {
				display: none;

				&[data-status]:nth-last-child(-n + 24 of [data-status]) {
					display: block;
				}
			}
		}

		& + div {
			color: var(--color-content-secondary);
			display: flex;
			column-gap: var(--spacing-2);
			justify-content: flex-end;
			font-size: 12px;

			@container (width < 480px) {
				font-size: 16px;
				justify-content: flex-start;
			}
		}
	}

	.detail {
		background-color: light-dark(
			var(--color-neutral-100),
			var(--color-neutral-800)
		);
		padding: var(--spacing-4);
		border-radius: 16px;
		right: 20px;
		position: fixed;
		height: calc(100vh - 40px);
		font-size: 14px;
		top: 20px;
		min-width: min(600px, calc(100% - 40px));
		transition-behavior: allow-discrete;
		transition:
			opacity 200ms ease-in,
			display 200ms ease-in,
			transform 200ms ease-in;
		opacity: 1;
		overflow: hidden;
		overflow-y: scroll;
		transform: translateX(0);
		box-shadow: 0 0 10px var(--color-background-primary);
		display: flex;
		flex-direction: column;
		row-gap: var(--spacing-6);

		@starting-style {
			transform: translateX(40px);
			opacity: 0;
		}

		@media (width <= 480px) {
			left: 20px;
			transform: translateY(0);
			height: 50vh;
			top: calc(100% - 50vh - 20px);

			@starting-style {
				transform: translateY(50vh);
				opacity: 0;
			}
		}

		pre {
			background-color: var(--color-background-tertiary);
			border-radius: 4px;
			padding: var(--spacing-4);
		}

		section {
			display: flex;
			flex-direction: column;
			row-gap: var(--spacing-2);

			h2 {
				font-size: 16px;
			}

			ul {
				padding-left: var(--spacing-5);
			}

			li {
				color: var(--color-content-secondary);
				list-style: disc;
			}
		}

		.close {
			position: absolute;
			top: 16px;
			right: 16px;
			padding: 8px;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: var(--spacing-max);
			background-color: var(--color-background-tertiary);
			transition: background-color 150ms ease-in-out;

			&:hover {
				background-color: lch(
					from var(--color-background-tertiary) calc(l + 10) c h
				);
			}

			svg {
				height: 16px;
				width: 16px;
			}
		}

		.status {
			--bg: var(--color-background-tertiary);

			background-color: var(--bg);
			height: 10px;
			width: 10px;
			border-radius: var(--spacing-max);

			&[data-status="ok"] {
				--bg: var(--color-green);
			}

			&[data-status="degraded"] {
				--bg: var(--color-yellow);
			}

			&[data-status="error"] {
				--bg: var(--color-red);
			}
		}
	}

	.details {
		&::details-content {
			--duration: 300ms;
			block-size: 0;
			overflow-y: clip;
			border: 1px solid var(--color-background-tertiary);
			border-top: none;
			border-bottom-right-radius: 4px;
			border-bottom-left-radius: 4px;
			opacity: 0;
			transition:
				content-visibility var(--duration) allow-discrete,
				block-size var(--duration),
				opacity var(--duration);
		}

		&[open] {
			&::details-content {
				block-size: auto;
				opacity: 1;
			}

			summary {
				background-color: var(--color-background-tertiary);
				border-bottom-right-radius: 0;
				border-bottom-left-radius: 0;
			}
		}

		& > div {
			padding-block: var(--spacing-6);
			padding-inline: var(--spacing-4);

			& > * + * {
				margin-top: var(--spacing-6);
			}
		}

		summary {
			padding: var(--spacing-4);
			list-style: none;
			border: 1px solid var(--color-background-tertiary);
			border-radius: 4px;
			transition: background-color 150ms ease-in-out;

			&::-webkit-details-marker {
				display: none;
			}

			&:hover {
				background-color: var(--color-background-tertiary);
			}

			&:focus-visible {
				background-color: var(--color-background-tertiary);
				outline: 1px dashed var(--color-content-tertiary);
				outline-offset: var(--spacing-1);
				border-radius: var(--border-radius, 1px);
			}
		}
	}

	.dependencies-wrap {
		--duration: 300ms;

		block-size: 0;
		opacity: 0;
		overflow-y: clip;
		transition:
			content-visibility var(--duration) allow-discrete,
			block-size var(--duration),
			border-radius var(--duration) ease,
			opacity var(--duration);

		h3 {
			display: flex;
			font-size: 14px;
			padding-inline: var(--spacing-4);
			align-items: center;
			column-gap: var(--spacing-2);

			.status {
				color: var(--color-content-secondary);
				font-size: 12px;
				font-weight: 400;
			}
		}

		> div {
			transition: margin-block var(--duration) linear;
		}
	}

	.dependencies {
		display: grid;
		grid-template-columns: max-content 1fr max-content;
		column-gap: var(--spacing-4);
		row-gap: var(--spacing-1);
		padding: var(--spacing-4);
	}

	.dependency {
		align-items: center;
		font-size: 12px;
		font-weight: 500;
		display: grid;
		grid-column: 1 / -1;
		grid-template-columns: subgrid;

		&:not(:last-child) {
			border-bottom: 1px solid var(--color-background-secondary);
			padding-bottom: var(--spacing-1);
		}

		.status {
			color: var(--color-content-secondary);
			font-weight: 400;
			text-align: right;
		}

		.dependency-checks {
			display: flex;
			flex-wrap: wrap;
			justify-content: flex-end;
			gap: var(--spacing-1);

			& > div {
				--bg: var(--color-background-tertiary);

				background-color: var(--bg);
				height: 10px;
				width: 2px;

				&[data-status="ok"] {
					--bg: var(--color-green);
				}

				&[data-status="degraded"] {
					--bg: var(--color-yellow);
				}

				&[data-status="error"] {
					--bg: var(--color-red);
				}
			}
		}
	}
}