html {
	--bgc: light-dark(#fff, #070d11);
	--fgc: light-dark(#45617b, #fff);
	--fosblauw: #00549f;
	--fosgroen: #c9dd03;
	--zeegroen: #009784;
	--koraal: #ff8680;
	--warmrood: #ff2e00;
	--felroze: #ff5999;
	--knalgeel: #ff0;
	--zwart: #000;
	--fosgroen-licht: #83ceb9;
	--licht-groen: light-dark(#edf8f5, #021b14);
	--licht-blauw: light-dark(#7dc7e0, #0f1d21);
}
body {
	color: var(--fgc);
	background-color: var(--bgc);
	font-family: Quicksand, sans-serif;
	margin: 0;
	font-size: 1.2rem;
	min-height: 100dvh;
	display: grid;
	grid-template-rows: auto 1fr auto;
	line-height: 1.2;
}
input,
button,
textarea,
select,
.grow-wrap::after {
	font: inherit;
}
main {
	margin: 0 0.5rem;
	display: grid;
	grid-template-columns:
		1fr
		min(65ch, 100%)
		1fr;
	align-content: start;
}
main > * {
	grid-column: 2;
}
.full-bleed {
	max-width: 100%;
	grid-column: 1 / -1;
	margin-left: auto;
	margin-right: auto;
}
.scroll {
	display: block;
	overflow-x: auto;
}

h1,
h2,
h3 {
	color: var(--fosblauw);
}
h4 {
	margin: 0.6em 0;
}
button,
[role="button"] {
	color: var(--fosblauw);
	font-weight: bold;
	padding: 0.4em 0.6em;
	background-color: var(--fosgroen);
	border: none;
	border-radius: 0.4em;
	margin: 0.2em 0;
	cursor: pointer;
}
button:hover,
[role="button"]:hover {
	background-image: linear-gradient(rgb(0 0 0 / 20%) 0 0);
}
button:disabled,
[role="button"]:disabled {
	opacity: 1;
	background-image: linear-gradient(rgb(255 255 255 / 40%) 0 0);
}
button.position {
	margin: 0;
	padding: 0.2em 0.5em;
}
button.delete,
[role="button"].delete {
	background-color: var(--koraal);
}

input,
select,
textarea,
.grow-wrap::after {
	accent-color: var(--fosblauw);
	margin: 0.4rem;
}
[disabled] {
	opacity: 0.5;
	cursor: not-allowed;
}
label.required::after {
	/* biome-ignore lint/suspicious/noIrregularWhitespace: smaller space */
	content: " *";
	color: var(--felroze);
	font-weight: bold;
}
:user-invalid {
	border: 2px solid var(--warmrood);
	border-radius: 4px;
}

:target {
	scroll-margin-block: 1ex;
}

a {
	color: var(--zeegroen);
	text-underline-offset: 0.175em;
	&:hover {
		filter: brightness(0.6);
	}
}
a.button {
	color: var(--fosblauw);
}
a.title {
	color: var(--koraal);
}
li::marker {
	color: var(--koraal);
}
ol li::marker {
	font-family: monospace;
}

footer {
	margin-top: 1rem;
}
footer,
header {
	background-color: var(--fosblauw);
}
footer nav,
header nav {
	padding: 0.5rem;
	gap: 0.5rem;
	display: flex;
	flex-flow: row wrap;
	justify-content: space-around;
	margin: 0 auto;
	max-width: 40em;

	ul.small {
		width: 100%;
		list-style-type: none;
		font-size: small;
		display: flex;
		justify-content: end;
		flex-flow: row wrap;
		align-items: center;
		margin: 0.5rem;
		gap: 0.5rem;
	}
}
footer a,
header nav a {
	color: var(--fosgroen);
}
footer a:hover,
header nav a:hover {
	filter: brightness(2);
}

table {
	border-collapse: collapse;
	border: 2px solid var(--fosblauw);
}
th,
td {
	border: 1px solid var(--fosblauw);
	padding: 10px;
	text-align: center;
}
tr:nth-child(even) {
	background-color: var(--licht-groen);
}
table.schedule td:first-child {
	font-weight: bold;
}
table.schedule tbody td:not(:first-child) > * {
	background-color: var(--fosgroen);
	border-color: var(--fosgroen);
}
table.schedule tfoot td:not(:first-child) > * {
	background-color: var(--fosgroen-licht);
	border-color: var(--fosgroen-licht);
}
table.schedule td:not(:first-child) span.teacher {
	background-color: unset;
	font-weight: bold;
}
table.schedule td:not(:first-child) span.student {
	background-color: unset;
}
table.schedule thead tr th:first-child:not(:empty) {
	display: flex;
	gap: 10px;
}
table thead {
	border-bottom: 2px solid var(--fosblauw);
}
table tfoot {
	border-top: 2px solid var(--fosblauw);
}
table.schedule [draggable="true"] {
	cursor: grab;
}
table.schedule [draggable] {
	font-weight: normal;
	white-space: nowrap;
}
td .dragover,
tr.dragover {
	opacity: 0.4;
}
td.dragover,
tr.dragover {
	border: 3px solid;
}
table.schedule td [draggable].moved,
table.sortable tr.moved {
	border: 1px dashed;
	border-color: var(--fgc);
	cursor: progress;
	opacity: 0.6;
}

dl.schedule {
	margin-top: 0;
}
dl.schedule h3 {
	margin-bottom: 0;
}
dl.schedule ul {
	padding-left: 0;
}

.fail {
	color: var(--warmrood);
}
form[name="evaluations"] output {
	top: 0.5rem;
	right: 0.5rem;
	position: fixed;
	z-index: 2;
	height: 1em;
	width: 1em;
}
form[name="evaluations"] output.spinner {
	animation: rotating 2s linear infinite;
	background-image: url("../icon/arrows-rotate.svg");
}
@supports (-webkit-mask-image: url("#mask")) or (mask-image: url("#mask")) {
	form[name="evaluations"] output.spinner {
		background-image: none;
		background-color: var(--felroze);
		mask-image: url("../icon/arrows-rotate.svg");
		-webkit-mask-image: url("../icon/arrows-rotate.svg");
	}
}
@media (prefers-reduced-motion) {
	form[name="evaluations"] output.spinner {
		animation: unset;
	}
}
@keyframes rotating {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

.grow-wrap {
	display: grid;
}
.grow-wrap::after {
	/* Weird space needed to preventy jumpy behavior */
	content: attr(data-replicated-value) " ";
	/* This is how textarea text behaves */
	white-space: pre-wrap;
	visibility: hidden;
}
.grow-wrap > textarea {
	/* User resizing ruins the auto sizing */
	resize: none;
	/* Hide scrollbar */
	overflow: hidden;
}
.grow-wrap > textarea,
.grow-wrap::after {
	padding: 0.2em;
	/* Place on top of each other */
	grid-area: 1 / 1 / 2 / 2;
}

form[name="evaluations"] label {
	padding: 0.2em 0;
	display: inline-block;
}
form table td label {
	width: 100%;
	height: 100%;
	display: inline-block;

	input[type="checkbox"] {
		width: 1em;
		height: 1em;
	}

	&:hover {
		backdrop-filter: brightness(2);
		input[type="checkbox"] {
			filter: brightness(1.2);
		}
	}
}
.score {
	padding-bottom: 0.4em;
}
.score input[type="radio"] {
	position: fixed;
	opacity: 0;
	pointer-events: none;
}
.score input[type="radio"] + label {
	display: inline-block;
	padding: 0.2em;
	margin: 0.2em 0.3em;
	text-align: center;
	line-height: 1.8em;
	width: 1.8em;
	border: 1px solid var(--fosblauw);
	border-radius: 50%;
	box-shadow: 0 3px 8px -3px var(--fosblauw);
}
.score input[type="radio"]:checked + label {
	background: var(--fosblauw);
	font-weight: bold;
	color: var(--fosgroen);
	box-shadow: 0 0 1em var(--fosblauw);
}
.remark {
	width: calc(100% - 0.8rem - 4px);
	box-sizing: border-box;
}

dl.remarks,
blockquote.remarks {
	background-color: var(--licht-groen);
	overflow-x: auto;
	word-break: break-word;
}
dl.remarks:empty,
dl.remarks dd {
	margin: 0;
}
dl.remarks blockquote {
	margin: 0.4rem;
}
blockquote.remarks:not(:empty) {
	margin: 0;
	padding: 0.4rem;
}

.flash {
	padding: 1rem;
	margin: 1rem;
}
.flash-success {
	background-color: var(--fosgroen);
}
.flash-notice {
	background-color: var(--knalgeel);
}
.flash-warning {
	background-color: var(--koraal);
}
.flash-error {
	background-color: var(--warmrood);
	color: white;
}
@media (prefers-color-scheme: dark) {
	.flash-success,
	.flash-notice {
		color: var(--bgc);
	}
}

.sb {
	font-size: smaller;
	vertical-align: middle;
	padding: 0.5ex 0.5ch;
	border-radius: 0.4em;
	border: 1px solid var(--fosblauw);
	background-color: var(--fosgroen);
}

.cancel {
	position: absolute;
	bottom: 0.2em;
	right: 0.2em;
}
.cancel button,
.cancel [role="button"] {
	background-color: var(--koraal);
	margin: 0;
}

dialog:modal {
	background-color: var(--bgc);
	border: 3px solid var(--fosblauw);
	box-sizing: border-box;

	img {
		max-width: 100%;
	}
}
dialog::backdrop {
	background-image: linear-gradient(45deg, var(--felroze), var(--fosblauw), var(--zeegroen));
	opacity: 0.7;
}

.sticky-title {
	position: sticky;
	top: 0;
	background-color: var(--bgc);
}

.emoji {
	/* biome-ignore lint/a11y/useGenericFontNames: emoji */
	font-family: emoji;
}

audio-button[role="button"] {
	padding: 0;
	margin: 0;
	background-color: inherit;
	border: none;
}

.help-text {
	font-size: smaller;
	font-style: italic;
	margin: 0 0.4rem 0.4rem;

	&::before {
		content: "↳ ";
	}
}

summary > h4 {
	display: inline-block;
}

grid-scroll .scroll {
	scroll-snap-type: x mandatory;
	display: grid;
	justify-content: space-between;
	grid-auto-flow: column;
	grid-auto-columns: max-content;
	grid-template-rows: auto auto;
	overflow-x: auto;
	padding-bottom: 1em;

	.student-evaluation {
		scroll-snap-align: start;
	}
}

grid-scroll nav {
	display: flex;
	flex-flow: row;
	flex-wrap: wrap;
	justify-content: center;
	position: sticky;
	bottom: 0;
	margin: 0 -0.5rem;
	background-color: rgba(0 84 159 / 80%);

	--size: clamp(0.3em, 1.2dvw, 0.6em);
	padding-top: calc(var(--size) / 2);
	--R: calc(var(--size) * 1.28);
	mask:
		radial-gradient(var(--R) at 50% calc(1.8 * var(--size)), #000 99%, #0000 101%) calc(50% - 2 * var(--size)) 0 /
		calc(4 * var(--size)) 100%,
		radial-gradient(var(--R) at 50% calc(-0.8 * var(--size)), #0000 99%, #000 101%) 50% var(--size) /
		calc(4 * var(--size)) 100% repeat-x;

	h3 {
		font-size: clamp(0.8em, 3.6dvw, 1.2em);
		margin: 0;
		padding: clamp(0.3em, 1.2dvw, 0.6em);

		a {
			color: var(--fosgroen);
		}

		&.show {
			background-color: var(--fosgroen);
			filter: brightness(1.1);

			a {
				color: var(--fosblauw);
			}
		}

		&:hover {
			filter: brightness(2);
		}
	}
}

@media screen and (width <= 36em) {
	grid-scroll .score {
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-evenly;
		margin-right: 0.5rem;
	}
	grid-scroll .scroll .student-evaluation {
		width: calc(100dvw - 0.5rem);
	}
	grid-scroll nav h3 {
		border-radius: clamp(0.3em, 1.2dvw, 0.6em);
	}
}

@media screen and (36em < width <= 52em) {
	grid-scroll .scroll .student-evaluation {
		width: calc((100dvw - 0.5rem) / 2);
	}
}

@media screen and (width > 52em) {
	grid-scroll .scroll {
		column-gap: 1em;
	}
}

/* biome-ignore-start lint/complexity/noImportantStyles: print */
@media print {
	html {
		--fgc: #000;
	}
	header,
	footer,
	main nav,
	a.button {
		display: none !important;
	}
	h1,
	h2,
	h3,
	h4,
	a,
	button,
	[role="button"],
	label.required::after,
	li::marker {
		color: var(--fgc) !important;
		text-decoration: none;
	}
	th,
	td {
		border-width: 1pt !important;
	}
}
/* biome-ignore-end lint/complexity/noImportantStyles: print */