: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);
}

.list-item {
	--radius: calc(var(--radius-sm) - 1px);

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

	&:nth-child(2) summary {
		border-top-right-radius: var(--radius);
	}

	&:nth-last-child(2) summary {
		border-bottom-left-radius: var(--radius);
	}

	&:last-child summary {
		border-bottom-right-radius: var(--radius);
	}
}

@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;
	}

	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 {
	.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 {
		container-type: inline-size;
		margin-top: var(--spacing-8);

		li {
			display: grid;
			gap: var(--spacing-4);
			grid-template-columns: 200px 1fr;

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

		> * + * {
			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));
		}

		.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);
			}

			&:hover {
				opacity: 0.6;
			}
		}

		& + div {
			color: var(--color-content-secondary);
			font-size: 12px;
			text-align: right;

			@container (width < 480px) {
				text-align: left;
			}
		}
	}

	.detail {
		background-color: var(--color-background-secondary);
		padding: var(--spacing-4);
		border-radius: 16px;
		right: 20px;
		position: fixed;
		height: calc(100vh - 40px);
		font-size: 14px;
		top: 20px;
		min-width: min(480px, 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);
			}
		}
	}
}