html {
	box-sizing: border-box;
	font-family: system-ui, sans-serif;
}

*,
*:before,
*:after {
	margin: 0;
	box-sizing: inherit;
}

html {
	--fg: #dadbe4;
	--bg: #262429;
	--subsurface: #212024;
	--yellow: #ffd78f;
	--orange: #ff880e;
	--red: #f70200;
	--sienna: #ac4610;
	--sienna: #ac4610;
	--pink: #f00ebc;
	--sky-blue: #3ac9ff;
	--violet: #4343f3;
	--grad-1-v: linear-gradient(to top, var(--sky-blue), var(--pink));
	--grad-1-h: linear-gradient(to right, var(--sky-blue), var(--pink));
	--grad-2-v: linear-gradient(
		to bottom,
		var(--yellow),
		var(--orange) 25%,
		var(--red) 50%,
		var(--sienna)
	);
	--grad-2-h: linear-gradient(
		to right,
		var(--yellow),
		var(--orange) 25%,
		var(--red) 50%,
		var(--sienna)
	);
	--type--100: 0.625rem;
	--type--200: 0.7rem;
	--type--300: 0.8rem;
	--type--400: 1rem;
	--type--500: 1.1875rem;
	--type--600: 1.375rem;
	--type--700: 1.75rem;
}

body {
	background-color: var(--bg);
	color: var(--fg);
	container-type: inline-size;
	min-height: 100vh;
}

[hidden] {
	display: none !important;
}

img {
	display: inline-block;
	max-width: 100%;
}

:focus-visible {
	outline: 2px solid var(--fg);
	outline-offset: 2px;
}

a {
	color: var(--sky-blue);

	&:hover {
		text-underline-offset: 0.2em;
	}
}

:where(h1, h2, h3, h4, h5, h6) {
	> :where([slot="suffix"], [slot="prefix"]) {
		font-size: 1.25rem;
		display: block;
	}

	> :where([slot="prefix"]) {
		margin-block-end: 0.5rem;
	}

	> :where([slot="suffix"]) {
		margin-block-start: 0.5rem;
	}
}

h1 {
	font-size: 2rem;
}

h2 {
	font-size: 1.5rem;
}

h3 {
	font-size: 1.125rem;
}

.wrap {
	padding: 1rem max(1rem, calc(50vw - 24rem));

	@container (width >= 720px) {
		padding: 2rem max(2rem, calc(50vw - 24rem));
	}
}

.intro {
	border-block-end: 2px solid color-mix(in oklab, var(--fg), transparent 75%);

	h1 {
		text-align: center;
	}

	> * {
		margin-inline: auto;
	}
}

#instructions {
	border-block-start: 2px solid color-mix(in oklab, var(--fg), transparent 75%);
}

.prose {
	& > *:not(:first-child) {
		margin-block-start: 1rem;
	}
	> p,
	:where(ul, ol) > li {
		max-width: 60ch;
	}
}

.icon {
	height: 1em;
	width: auto;
	vertical-align: -0.125em;
	fill: currentColor;
}

totem-forge {
	display: grid;
	gap: 1rem;
	padding: 1rem;
	max-width: calc(48rem + 4rem);
	margin-inline: auto;

	grid-template-columns: 1fr;
	grid-template-rows: auto auto auto auto auto auto auto auto auto;
	grid-template-areas:
		"controls"
		"libraryheading"
		"filter"
		"library"
		"selectedheading"
		"actions"
		"selected"
		"outputheading"
		"outputpreview"
		"output"
		"outputcontrols";

	@container (width >= 720px) {
		padding: 2rem;

		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto auto auto 50vh auto auto;
		grid-template-areas:
			"controls controls"
			"libraryheading selectedheading"
			"filter actions"
			"library selected"
			"outputheading outputheading"
			"outputpreview outputpreview"
			"output output"
			"outputcontrols outputcontrols";
	}
}

.controls {
	grid-area: controls;
	display: flex;
	flex-flow: row wrap;
	gap: 0.5rem;

	> div {
		display: flex;
		gap: 0.5rem;
	}
}

.library-heading {
	grid-area: libraryheading;
}

.toolbar {
	display: flex;
	flex-flow: row;
	gap: 0.5rem;

	@container (width < 720px) {
		flex-wrap: wrap;
	}

	> div {
		display: flex;
		gap: 0.5rem;
	}
}

.library-filter {
	grid-area: filter;

	#search {
		display: inline-block;
		width: 4rem;
		flex: 1 1 auto;
	}
}

.effects-library {
	grid-area: library;
	border: 2px solid color-mix(in oklab, currentColor, transparent 80%);

	/* group */
	> ul {
		list-style: none;
		padding: 0;

		&:not(:has(> [totem="effect-item"]:not([hidden]))) {
			display: none;
		}
		[role="presentation"] {
			font-weight: 700;
			font-size: var(--type--500);
			padding-block: 0.25rem;
			margin: 0.25rem;
			border-block-end: 1px solid
				color-mix(in oklab, currentColor, transparent 80%);
		}

		[role="option"] {
			&[aria-selected="true"] {
				opacity: 0.8;
				padding-inline-start: 1rem;
				background-color: color-mix(in oklab, var(--violet), transparent 80%);
			}
		}
	}
}

.selected-heading {
	grid-area: selectedheading;
}

.effect-actions {
	grid-area: actions;
	display: flex;
	gap: 0.25rem;
}

.effects-selected {
	grid-area: selected;
	list-style: none;
	padding: 0;
	border-style: solid;
	border-image-slice: 1;
	border-width: 2px;
	border-image-source: var(--grad-2-v);

	> .pin {
		padding: 0.25rem 0.25rem;
		cursor: grab;
		display: flex;
		align-items: center;
		gap: 6px;
		border-radius: 2px;

		&::before,
		&::after {
			display: block;
			border-block-start: 0.125rem dashed currentColor;
			content: "";
			flex: 1;
		}

		> svg {
			flex: 0 0 auto;
			fill: currentColor;
			height: 20px;
			width: auto;
			margin-block-end: 2px;
		}

		&:hover {
			/* background-image: var(--grad-1-h); */
			background-color: var(--sky-blue);
			color: var(--bg);
		}

		&:active {
			cursor: grabbing;
			background-color: color-mix(in oklab, var(--sky-blue), transparent 75%);
		}
	}

	> [aria-selected="true"] {
		outline: 1px solid currentColor;
		outline-offset: -2px;
	}
}

.effects-library,
.effects-selected {
	overflow-y: scroll;
	background-color: var(--subsurface);
	padding: 0.125rem;

	@container (width < 720px) {
		max-height: 50vh;
	}

	&:focus-visible {
		:is([totem="effect-item"], .pin).focused {
			background-color: var(--sky-blue);
			color: var(--bg);
		}
	}
}

.output-heading {
	grid-area: outputheading;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.output {
	grid-area: output;
	border-style: solid;
	border-image-slice: 1;
	border-width: 2px;
	border-image-source: var(--grad-1-h);
	background-color: var(--subsurface);
	color: inherit;
	font-family: monospace;
	padding: 0.5rem;
}

.output-controls {
	grid-area: outputcontrols;
	display: flex;
	gap: 0.25rem;

	> button {
		width: 100%;
		flex: 1;
	}
}

.output-preview {
	overflow: scroll;
	max-width: 100%;
	max-height: 25vh;
	grid-area: outputpreview;
	display: flex;
	align-items: center;
	justify-content: start;
	padding: 2rem;
	border-style: solid;
	border-image-slice: 1;
	border-width: 2px;
	border-image-source: var(--grad-1-h);
	background-color: var(--subsurface);

	> * {
		flex: 0 0 auto;
	}

	> div:not([class]) {
		display: grid;
		align-items: center;
		justify-items: center;
		> * {
			grid-area: 1 / 1;
		}
	}

	> .end {
		display: flex;
		gap: 0.25rem;
		margin-inline-start: -30px;
	}

	> button {
		width: 100%;
		flex: 1;
	}
}

[totem="effect-item"] {
	display: grid;
	grid-template-columns: auto 1fr auto;
	grid-template-rows: auto auto;
	grid-template-areas: "icon name id" "icon source source";
	gap: 0.25rem 0.5rem;
	padding: 0.25rem;
	align-items: baseline;
	cursor: pointer;

	> [slot="name"] {
		grid-area: name;
	}

	> [slot="id"] {
		grid-area: id;

		&[title] {
			text-decoration: dotted underline;
		}
	}

	> [slot="icon"] {
		grid-area: icon;
		align-self: center;
	}

	> [slot="source"] {
		grid-area: source;
		font-size: var(--type--300);
	}

	> [slot="draghandle"] {
		grid-area: draghandle;
		align-self: stretch;
		display: flex;
		cursor: grab;
		border-radius: 2px;

		&::before {
			content: "";
			flex: 1;
			background-color: currentColor;
			mask-image: url("./images/icons/drag-handle.svg");
			mask-position: center center;
			mask-repeat: no-repeat;
		}

		&:hover {
			/* background-image: var(--grad-1-v); */
			background-color: var(--sky-blue);

			&::before {
				background-color: var(--bg);
			}
		}

		&:active {
			cursor: grabbing;
		}
	}

	&[draggable="true"]:active {
		cursor: grabbing;
		background-color: color-mix(in oklab, var(--sky-blue), transparent 75%);
	}

	&[controls] {
		grid-template-columns: 1.5rem auto 1fr auto;
		grid-template-areas: "draghandle icon name id" "draghandle icon source source";
	}
}

.drop-before {
	border-block-start: 0.25rem solid currentColor;
}

.drop-after {
	border-block-end: 0.25rem solid currentColor;
}

.sr-only {
	position: absolute;
	left: -10000px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}