details.notes {
	position: absolute;
	z-index: 2;
	font-weight: 400;
	text-align: left;
	--notes-background-d: var(--notes-background, hsl(220, 10%, 95%));
	font-size: calc(.6 * var(--slide-base-font-size, .6rem));

	& div > ul {
		padding-left: 1em;
	}

	& > summary {
		padding: 0 .4em;
		box-shadow: 0 0 1px;
		border-radius: .3em;
		cursor: pointer;
		white-space: nowrap;
		font-weight: bold;
		letter-spacing: -.03em;
		display: block; /* remove marker */

		&::-webkit-details-marker {
			display: none;
		}

		&::before {
			content: "📋 ";
			filter: grayscale(100%);
			mix-blend-mode: multiply;
		}

		&:hover::before {
			filter: contrast(200%);
		}
	}

	& > div {
		position: absolute;
		width: 50vw;
		min-width: 280px;
		max-width: calc(100vw - 4em);
		max-height: calc(100vh - 6em);
		overflow: auto;
		padding: .8em 1em;
		border: 1px solid rgba(0,0,0,.3);
		border-radius: .5em;
		box-shadow: .05em .1em .4em rgba(0,0,0,.3);
		color: black;
		text-shadow: 0 .1em .1em white;

		& > * {
			margin: 0;
		}

		& > p:where(:not(:first-of-type)) {
			margin-top: .5em;
		}

		& a {
			--link-color-d: var(--link-color, 200, 50%, 40%);
			color: hsl(var(--link-color-d));
			text-decoration-color: hsla(var(--link-color-d), .5);
		}
	}

	&[open]::before {
		content: '';
		position: absolute;
		bottom: 1.6em;
		left: 40%;
		z-index: 1;
		width: 14px;
		height: 14px;
		transform: rotate(45deg);
	}

	& > div,
	&[open]::before {
		background: var(--notes-background-d);
		border: 1px solid rgba(0,0,0,.3);
	}

	& a,
	& code {
		font-weight: bold;
	}

	&.top-right,
	&.top-left {
		top: .8em;

		&[open]::before {
			bottom: auto;
			top: calc(1.6em - 2px);
			border-bottom: none;
			border-right: none;
		}

		& > div {
			top: 1.86em;
		}
	}

	&.bottom-right,
	&.bottom-left {
		bottom: 1em;

		&[open]::before {
			border-top: none;
			border-left: none;
		}

		& > div {
			bottom: 1.86em;
		}
	}

	&.top-right,
	&.bottom-right {
		right: 1.5em;

		&[open]::before {
			left: auto;
			right: 40%;
		}

		& > div {
			right: 0;
		}
	}

	&.top-left,
	&.bottom-left {
		left: 1em;

		& > div {
			left: 0;
		}
	}
}

.slide:not(.demo) details.notes:not([open]):not(:hover) > summary {
	opacity: .6;
}

.demo-controls details.notes {
	position: relative;
	left: auto;
	right: auto;
	top: auto;
	bottom: auto;
	order: 5;
	margin-left: auto;
}

/* <hr> in notes separates notes for revisits
   we want the actual lines visible, so that we know how many more times we'll see the slide
 */

.slide[data-visit="1"] details.notes hr ~ *,
.slide[data-visit="2"] details.notes hr:nth-of-type(2) ~ * {
	display: none;
}