@layer reset, defaults, theme, extend, utilities, accessibility;



/* ====================================
	RESET
==================================== */

@layer reset {

*,
::before,
::after {
	box-sizing: border-box;
}
select, .text-input {
	display: block;
	padding: 0;
	font-family: inherit;
	font-size: 1em;
	color: inherit;
	background-color: unset;
	border: unset;
}
::marker {
	font-family: inherit;
}

/* ===================== END RESET */ }



/* ====================================
	THEME
==================================== */

@layer theme {

:root {
	--fore-colour: black;
	--back-colour: white;
	--hot-colour: blue;
	--cold-colour: purple;
}
@media (prefers-color-scheme: dark) {
	:root {
		--fore-colour: #eee;
		--back-colour: #181818;
		--hot-colour: #8df;
		--cold-colour: #aaf;
	}
}

/* ================= END THEME */ }



/* ====================================
	ACCESSIBILITY
==================================== */

@layer accessibility {

@media (prefers-reduced-motion) {
	*,
	::before,
	::after {
		transition: unset;
		animation-name: no-animation;
	}
}

/* ================= END ACCESSIBILITY */ }



/* ====================================
	UTILITIES
==================================== */

@layer utilities {

[hidden] {
	display: none;
}
.visually-hidden {
	block-size: 1px;
	inline-size: 1px;
	position: fixed;
	overflow: hidden;
	white-space: nowrap;
	clip-path: inset(50%);
}

/* ================= END UTILITIES */ }



/* ====================================
	DEFAULTS
==================================== */

@layer defaults {

:root {
	--main-column-max-inline-size: 70ch;
	--gap-size: 1.5em;
	--main-padding-block: 48px;
	--mid-back-colour: color-mix(in srgb, var(--fore-colour) 10%, var(--back-colour));
	--line-width: 0.1rem;
	--line: var(--line-width) solid var(--fore-colour);
	font-size: 100%;
	accent-color: var(--hot-colour);
}
body {
	min-block-size: 100svb;
	margin: 0;
	line-height: 1.5;
	font-size: clamp(1rem, calc(0.8rem + 1vi), 1.2rem);
	color: var(--fore-colour);
	background-color: var(--back-colour);
}

/* -----------
	LAYOUT
----------- */

#banner {
	display: flex;
	align-items: center;
	padding: 16px;
	& > nav {
		flex-grow: 1;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
}
main {
	margin-block: var(--main-padding-block);
	margin-inline: 16px;
	& > * {
		max-inline-size: var(--main-column-max-inline-size);
		margin-inline: auto;
		&:not(:first-child) {
			margin-block-start: var(--gap-size);
			margin-block-end: 0;
		}
	}
}
header {
	margin-block-end: var(--gap-size);
	padding-block-end: var(--gap-size);
	border-block-end: var(--line);
}
footer {
	margin-block-start: var(--gap-size);
	padding-block-start: var(--gap-size);
	border-block-start: var(--line);
}

/* ------------
	GENERAL
------------ */

h1 {
	margin-block: 0;
	line-height: 1.15;
	text-wrap-style: balance;
}
hr {
	max-inline-size: 50%;
	margin-block: 1em;
	margin-inline: auto;
	border: unset;
	border-block-end: var(--line);
}
svg {
	fill: var(--fore-colour);
	stroke: var(--fore-colour);
}
a {
	color: var(--hot-colour);
	text-underline-offset: 0.15em;
}
a:visited {
	color: var(--cold-colour);
}
a:active {
	color: var(--cold-colour);
}
a:visited:active {
	color: var(--hot-colour);
}

/* -------------
	CONTROLS
------------- */

#index-header {
	display: grid;
	gap: var(--gap-size);
	& p {
		margin-block: 0;
	}
}
#controls-container {
	padding-block-start: var(--gap-size);
	border-block-start: var(--line);
	& > summary {
		list-style-type: "";
		display: inline-block;
		font-weight: bold;
		cursor: default;
		user-select: none;
		&::-webkit-details-marker {
			display: none;
		}
		&::before {
			content: "+";
			inline-size: 1em;
			display: inline-block;
			text-align: center;
		}
	}
	&[open] > summary {
		margin-block-end: 1em;
		&::before {
			content: "−";
		}
	}
}
#controls {
	display: grid;
	gap: 1rem;
	align-items: center;
}
.control-group {
	display: grid;
	margin-block-end: 0.5em;
}
label {
	display: block;
	padding-block-end: 0.1em;
	font-weight: bold;
}
select, .text-input {
	padding-block: 0.25em;
	padding-inline: 0.5em;
	line-height: 1;
	border: var(--line);
	border-radius: 0;
}
:is(select, .text-input):hover {
	background-color: var(--mid-back-colour);
}

/* ----------
	ITEMS
---------- */

#items {
	display: grid;
	gap: var(--gap-size);
	padding-inline-start: 0;
	& > li {
		list-style-type: "";
	}
	& a {
		text-underline-offset: 0.3em;
	}
}
#items > li {
	display: grid;
	gap: 0.5em;
}
#review-container > header {
	display: grid;
	gap: 1em;
	& > * {
		justify-self: start;
	}
	& h1 {
		text-wrap-style: balance;
	}
}

/* ================== END DEFAULTS */ }