@layer reset, defaults, user, utilities;

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

@layer reset {

*,
::before,
::after {
	box-sizing: border-box;
}
fieldset {
	margin: unset;
	padding: unset;
	border: unset;
}
legend {
	display: block;
	padding-inline: 0;
}
button, select {
	font-family: inherit;
	font-size: 1em;
	color: inherit;
	background-color: unset;
	border: unset;
}
dialog {
	max-block-size: unset;
	max-inline-size: unset;
	padding: 0;
	color: unset;
	background-color: unset;
	border: unset;
	& > :first-child,
	& > :first-child > :first-child {
		margin-block-start: 0;
	}
	& > :last-child,
	& > :last-child > :last-child {
		margin-block-end: 0;
	}
}
body:has(dialog[open]) {
	block-size: 100vb;
	overflow: hidden;
}

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



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

@layer utilities {

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

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



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

@layer defaults {

/* ---------
	BASE
--------- */

:root {
	--main-header-block-padding: 0.5rem;
	--main-header-line-height: 1lh;
	--main-header-block-size: calc(var(--main-header-line-height) + 2 * var(--main-header-block-padding));
	--preview-inline-size: 50%;

	--theme-colour: dodgerblue;
	--fore-colour: #181818;
	--back-colour: white;
	--accent-colour: var(--theme-colour);
	--detail-colour: color-mix(in srgb, var(--accent-colour), black 20%);
	--highlight-colour: color-mix(in srgb, var(--accent-colour) 15%, white);
	--lightbox-background-colour: color-mix(in srgb, var(--fore-colour), var(--back-colour) 15%);
	--lightbox-media-border-colour: color(from var(--lightbox-background-colour) calc(1 - r) calc(1 - g) calc(1 - b));

	--line-width: 0.1rem;
	--fore-line: var(--line-width) solid var(--fore-colour);
	--detail-line: var(--line-width) solid var(--detail-colour);

	font-size: 100%;
	font-family: system-ui, sans-serif;
	accent-color: var(--accent-colour);
	scrollbar-color: var(--accent-colour) var(--highlight-colour);
}
body {
	margin: 0;
	color: var(--fore-colour);
	background-color: var(--back-colour);
}

/* ------------
	GENERIC
------------ */

::selection {
	color: var(--back-colour);
	background-color: var(--fore-colour);
}
a {
	color: var(--detail-colour);
}
main cite {
	font-style: normal;
}
legend {
	font-size: 1.15rem;
	font-weight: bold;
}
label.pill {
	padding-inline: 0.2rem;
	border-radius: 0.2rem;
	border: var(--detail-line);
	border-color: transparent;
	box-decoration-break: clone;
	&:hover {
		border-color: var(--detail-colour);
	}
}
input:is([type="checkbox"], [type="radio"]) {
	block-size: 1em;
	aspect-ratio: 1;
}
.input-list {
	list-style-type: "";
	display: grid;
	gap: var(--line-width);
	margin-block: 0;
	padding-inline-start: 0;
	& .input-list {
		padding-inline-start: 1lh;
	}
}
select {
	inline-size: 10rem;
	display: block;
	border: var(--detail-line);
	&:hover, &:focus-visible {
		background-color: var(--highlight-colour);
	}
}
button {
	display: grid;
	place-content: center;
	padding-block: 0.5rem;
	padding-inline: 1rem;
	color: var(--detail-colour);
	border: var(--detail-line);
	background-color: var(--back-colour);
	&:hover {
		background-color: var(--highlight-colour);
	}
	&:active {
		color: var(--back-colour);
		background-color: var(--accent-colour);
	}
}
details + details {
	margin-block-start: 1rem;
}
summary {
	list-style-type: "";
	display: inline-block;
	margin-block: 0.5rem;
	color: var(--detail-colour);
	&::-webkit-details-marker {
		display: none;
	}
	&::before {
		content: "\2192"; /* right arrow */
		inline-size: 1em;
		display: inline-block;
		text-align: center;
	}
}
details[open] > summary::before {
	content: "\2193"; /* down arrow */
}

/* -----------
	HEADER
----------- */

#main-header {
	block-size: var(--main-header-block-size);
	display: flex;
	justify-content: space-between;
	padding-inline-start: 1rem;
	color: var(--back-colour);
	background-color: var(--accent-colour);
	border-block-end: var(--detail-line);
	& > * {
		padding-block: var(--main-header-block-padding);
		line-height: var(--main-header-line-height);
	}
	& > button {
		block-size: 100%;
		border: unset;
		border-inline-start: var(--detail-line);
		&:active {
			border-color: var(--back-colour);
		}
	}
}
h1 {
	margin-block: 0;
	font-size: 1rem;
}

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

#controls {
	--controls-padding: 0.5rem;
	padding: 1rem;
	& > :first-child > :first-child,
	& > :first-child > :first-child > :first-child {
		margin-block-start: 0;
	}
	& > :last-child > :last-child,
	& > :last-child > :last-child > :last-child {
		margin-block-end: 0;
	}
	& > :not(:first-child) {
		border-block-start: var(--detail-line);
	}
	& h2 {
		margin-block-start: 1rem;
		margin-block-end: 0;
		& + * {
			margin-block-start: 0.5rem;
		}
	}
	& fieldset {
		margin-block: 1rem;
	}
}
.control {
	margin-block: 1rem;
}
#settings legend {
	margin-block-end: 1rem;
}
.tag-on-preview {
	color: var(--back-colour);
	background-color: var(--accent-colour);
}

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

#items {
	flex-grow: 999;
	padding: 3rem;
	background-image: repeating-linear-gradient(
		-45deg,
		var(--highlight-colour) 0 0.5rem,
		transparent 0.5rem 1rem
	);
	border-block-start: var(--detail-line);
}
#items-list {
	list-style-type: "";
	max-block-size: calc(100vb - 6rem);
	margin-block: 0;
	padding: 0.2rem;
	padding-inline-start: 0;
	background-color: var(--back-colour);
	outline-width: var(--line-width);
	outline-style: solid;
	outline-color: var(--detail-colour);
	overflow: auto;
	& > li {
		display: grid;
		grid-template-columns: max-content auto;
	}
	& > :nth-child(even of :not([hidden])) > label {
		background-color: var(--highlight-colour);
	}
	& input[type="radio"] {
		appearance: none;
		inline-size: 0;
		margin-inline-start: 0;
		&:focus-visible {
			outline: unset;
		}
	}
	& label {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	& :checked + label {
		color: var(--back-colour);
		background-color: var(--accent-colour) !important;
	}
}
#items-list:has([data-status]) {
	& label::before {
		inline-size: 1rem;
		display: inline-block;
		margin-inline-end: 0.1rem;
		text-align: center;
		font-weight: bold;
		color: var(--accent-colour);
	}
	& :checked + label::before {
		color: var(--back-colour);
	}
}
[data-status="0"]::before {
	content: "" / "not started";
}
[data-status="1"]::before {
	content: "\2022" / "in-progress";
}
[data-status="2"]::before {
	content: "\2713" / "finished";
}
[data-status="3"]::before {
	content: "\00d7" / "dropped";
}
.status-demo {
	font-weight: bold;
	color: var(--detail-colour);
}

/* ------------
	PREVIEW
------------ */

#preview {
	display: grid;
	grid-template-rows: auto max-content;
	margin: 0;
	border-block-start: var(--detail-line);
	& > figcaption {
		padding: 1rem;
	}
	& dl {
		display: grid;
		gap: 1rem;
		margin-block: 0;
	}
	& dt {
		margin-block-end: 0.2rem;
		text-transform: uppercase;
		font-size: 0.8rem;
		font-weight: bold;
	}
	& dd {
		margin-inline-start: 0.5rem;
	}
}
#lightbox {
	--lightbox-padding: 1rem;
	max-block-size: calc(100vb - var(--main-header-block-size));
	display: grid;
	place-content: center;
	padding: var(--lightbox-padding);
	background-color: var(--lightbox-background-colour);
	& > * {
		max-block-size: calc(100vb - var(--main-header-block-size) - 2 * var(--lightbox-padding));
		max-inline-size: 100%;
		display: block;
		border-width: var(--line-width);
		border-style: solid;
		border-color: var(--lightbox-media-border-colour);
	}
}
#preview > figcaption {
	border-block-start: var(--detail-line);
}

/* -------------------
	DIALOGS + INFO
------------------- */

dialog {
	block-size: 100vb;
	inline-size: 100vi;
	padding-block: 1rem;
	padding-inline: 5%;
	line-height: 1.5;
	background-color: var(--back-colour);
	& > article {
		max-inline-size: 36rem;
		margin-inline: auto;
		& > :first-child,
		& > :first-child > :first-child {
			margin-block-start: 0;
		}
		& > :last-child,
		& > :last-child > :last-child {
			margin-block-end: 0;
		}
		& > footer {
			margin-block-start: 1rem;
			padding-block-start: 1rem;
			border-block-start: var(--detail-line);
		}
	}
	& dl {
		display: grid;
		gap: 0.5rem;
	}
	& dt {
		font-weight: bold;
	}
	& dd {
		margin-inline-start: 1lh;
	}
}

/* -----------------
	RESPONSIVITY
----------------- */

body {
	container-name: body;
	container-type: inline-size
}
@container body (min-inline-size: 50rem) {
	dialog {
		padding-block: 5rem;
	}
	main {
		--main-block-size: calc(100vb - var(--main-header-block-size));
		block-size: var(--main-block-size);
		display: flex;
		& > * {
			overflow: auto;
		}
	}
	#controls {
		inline-size: 15rem;
		flex-shrink: 0;
		padding-block: 0.5rem;
		padding-inline-start: 0.5rem;
		padding-inline-end: 1.5rem;
		border-inline-end: var(--detail-line);
	}
	#items {
		padding: unset;
		border-block-start: unset;
	}
	#items-list {
		max-block-size: unset;
	}
	#preview {
		inline-size: var(--preview-inline-size);
		flex-shrink: 0;
		border-block-start: unset;
		border-inline-start: var(--detail-line);
	}
}

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



/* ====================================
	USER
==================================== */

@layer user {

:root:has(#preview-full-media-toggle:checked) {
	& #lightbox {
		max-block-size: unset;
		max-inline-size: unset;
	}
	& #lightbox > * {
		max-height: unset;
		width: 100%;
		max-width: unset;
	}
}
@media (prefers-color-scheme: dark) {
	:root {
		--fore-colour: white;
		--back-colour: #181818;
		--accent-colour: color-mix(in srgb, var(--theme-colour), white 35%);
		--detail-colour: color-mix(in srgb, var(--accent-colour), white 20%);
		--highlight-colour: color-mix(in srgb, var(--accent-colour) 40%, black);
		--lightbox-background-colour: black;
	}
}

/* ====================== END USER */ }