@import url("defaults.css");

:root {
	--color-magenta: hsl(340 90% 50%);
	--color-pink: hsl(340 90% 80%);
	--color-aqua: oklch(65% 0.15 210);

	--color-accent: var(--color-magenta);
	--color-accent-95: color-mix(in oklch, var(--color-accent) 0%, oklch(95% none none));
	--color-accent-98: color-mix(in oklch, color-mix(in oklch, var(--color-accent) 0%, oklch(98% none none)) 30%, oklch(none 0% none));

	--color-accent-2: var(--color-aqua);

	--color-neutral: hsl(210 10% 50%);
	--color-neutral-95: color-mix(in oklch, var(--color-neutral) 0%, oklch(95% none none));
	--color-neutral-90: color-mix(in oklch, var(--color-neutral) 0%, oklch(90% none none));
	--color-neutral-85: color-mix(in oklch, var(--color-neutral) 0%, oklch(85% none none));
	--color-neutral-80: color-mix(in oklch, var(--color-neutral) 0%, oklch(80% none none));
	--color-neutral-60: color-mix(in oklch, var(--color-neutral) 0%, oklch(60% none none));
	--color-neutral-50: color-mix(in oklch, var(--color-neutral) 0%, oklch(50% none none));
	--color-neutral-45: color-mix(in oklch, var(--color-neutral) 0%, oklch(45% none none));
	--color-neutral-40: color-mix(in oklch, var(--color-neutral) 0%, oklch(40% none none));
	--color-neutral-30: color-mix(in oklch, var(--color-neutral) 0%, oklch(30% none none));


	--page-width: min(100rem, 100vw - 4rem);
	--page-margin: calc(50vw - var(--page-width) / 2);
	--font-body: system-ui, Helvetica Neue, Segoe UI, sans-serif;
}

body {
	display: flex;
	flex-flow: column;
	min-height: 100vh;
	margin: 0;
	font: 100%/1.6 var(--font-body);
	color: canvastext;
}



code .colored.colored * {
	color: inherit;
}

body > :not(.content),
body > .content > * {
	padding: var(--padding-block, 0rem) calc(50vw - var(--page-width) / 2);
}

body > header {
	grid-area: header;
	--padding-block: 2rem;
	background: var(--color-neutral-30);
	color-scheme: dark;
	color: canvastext;

	& > h1,
	& > p {
		margin: 0;
	}

	& > h1 {
		font-size: 300%;

		& > a {
			color: inherit;
			text-decoration: none;
		}

		& strong {
			color: var(--color-accent-95);
		}
	}
}

body > nav {
	grid-area: nav;
	display: flex;
	background: var(--color-neutral-60);
	color-scheme: dark;
	color: canvastext;
	font-weight: bold;

	& > a {
		flex: 1;
		padding: .6rem;
		background: rgb(0 0 0 / .3);
		text-decoration: none;

		&:nth-child(odd) {
			background: rgb(0 0 0 / .15);
		}

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

body > .content {
	display: flex;
	flex-flow: column;
	flex: 1;

	> header {
		display: none;
	}

	> main {
		grid-area: main;
		flex: 1;

		& h1 {
			margin-top: 1rem;
			color: var(--color-neutral);
			font-size: 300%;
			margin-bottom: 0;
		}

		& h2 {
			color: var(--color-accent);
		}
	}

	@media (width > 1000px) {
		&:has(> .sidebar) {
			flex-flow: row;
			position: relative;

			> .sidebar {
				padding-inline-end: 2rem;
				max-width: 20rem;

				~ .sidebar {
					padding-inline-start: 3rem;
				}

				.toc {
					position: sticky;
					top: 0;
				}
			}

			> main {
				padding-inline-start: 2rem;
			}
		}
	}

	@media (width <= 1000px) {
		#page-contents {
			order: -1;
		}

		#section-contents {
			order: 999;
		}
	}
}

.sidebar {
	--padding-block: 1rem;
	background: var(--color-accent-98);

	~ .sidebar {
		background: var(--color-neutral-95);
	}

	h2 {
		text-transform: uppercase;
		font-size: 90%;
		color: var(--color-accent);
	}

	.toc {
		.active.toc-link {
			font-weight: bold;
		}

		ul, ol {
			margin: 0;

			li {
				margin-block: .2rem;
			}
		}

		ul {
			list-style-type: none;
			padding-inline-start: 0;
		}

		ol {
			counter-reset: index;
			list-style-type: none;

			> li {
				counter-increment: index;

				&::marker {
					content: counters(index, '.', decimal) '. ';
					font-weight: bold;
					color: var(--color-neutral);
				}
			}
		}

		summary {
			list-style-position: outside;

			&::marker {
				color: color-mix(in oklab, currentColor, transparent 50%);
			}
		}

		details[open] > ul {
			margin-inline-start: 1em;
		}
	}
}

body > footer {
	grid-area: footer;
	--padding-block: .6rem;
	background: var(--color-neutral-95);
}