/** */
:root {
	color-scheme:           light dark;
	--mp-color-white:       #ffffff;
	--mp-color-black:       #000000;
	--mp-color-brand-05:    #190600;
	--mp-color-brand-10:    #331200;
	--mp-color-brand-20:    #662500;
	--mp-color-brand-30:    #993700;
	--mp-color-brand-40:    #cc4900;
	--mp-color-brand-50:    #ff6f1e;
	--mp-color-brand-60:    #ff8d4c;
	--mp-color-brand-70:    #ffad80;
	--mp-color-brand-80:    #ffceb3;
	--mp-color-brand-90:    #ffdcca;
	--mp-color-brand-95:    #fff5f0;
	--mp-color-brand-99:    #fffcfa;
	--mp-color-contrast-05: #050611;
	--mp-color-contrast-10: #111322;
	--mp-color-contrast-20: #222544;
	--mp-color-contrast-30: #333866;
	--mp-color-contrast-40: #444a88;
	--mp-color-contrast-50: #505daa;
	--mp-color-contrast-60: #757fbd;
	--mp-color-contrast-70: #979fce;
	--mp-color-contrast-80: #cccee5;
	--mp-color-contrast-90: #dddfee;
	--mp-color-contrast-95: #f5f5fa;
	--mp-color-contrast-99: #fcfcfd;
	--mp-color-desaturated-10: hsl(from var(--mp-color-brand-10) h 45% l);
	--mp-color-desaturated-20: hsl(from var(--mp-color-brand-20) h 45% l);
	--mp-color-desaturated-30: hsl(from var(--mp-color-brand-30) h 45% l);
	--mp-color-desaturated-40: hsl(from var(--mp-color-brand-40) h 45% l);
	--mp-color-desaturated-50: hsl(from var(--mp-color-brand-50) h 45% l);
	--mp-color-desaturated-60: hsl(from var(--mp-color-brand-60) h 45% l);
	--mp-color-desaturated-70: hsl(from var(--mp-color-brand-70) h 45% l);
	--mp-color-desaturated-80: hsl(from var(--mp-color-brand-80) h 45% l);
	--mp-color-desaturated-90: hsl(from var(--mp-color-brand-90) h 45% l);
	--mp-color-desaturated-95: hsl(from var(--mp-color-brand-95) h 45% l);
	--mp-color-desaturated-99: hsl(from var(--mp-color-brand-99) h 45% l);

	--mp-color-white-alpha:   rgb(255,255,255,40%);
	--mp-error:               #dd0000;
	--mp-background:          light-dark(var(--mp-color-brand-95), var(--mp-color-brand-05));
	--mp-background-darker:   light-dark(var(--mp-color-desaturated-90), var(--mp-color-desaturated-10));
	--mp-background-error:    color-mix(in oklab, var(--mp-background), var(--mp-error) 30%);
	--mp-text-color:          light-dark(var(--mp-color-contrast-05), var(--mp-color-contrast-90));
	--mp-text-color-high-contrast: light-dark(#000, #fff);
	--mp-text-form-color:     light-dark(var(--mp-color-contrast-05), var(--mp-color-contrast-95));
	--mp-button-text-color:   light-dark(var(--mp-color-contrast-05), var(--mp-color-contrast-90));
	--mp-button-bg-color:     light-dark(var(--mp-color-brand-60), var(--mp-color-brand-40));
	--mp-button-border-color: light-dark(var(--mp-color-contrast-80), var(--mp-color-contrast-20));
	--mp-color-hover:         light-dark(var(--mp-color-brand-70), var(--mp-color-brand-20));
	--mp-color-active:        light-dark(var(--mp-color-brand-60), var(--mp-color-brand-30));
	--mp-color-selected:      light-dark(var(--mp-color-brand-80), var(--mp-color-brand-20));
	--mp-form-invalid-color:  light-dark(#faa, #822);

	--mp-radius-s:            0.25rem;
	--mp-radius-m:            0.5rem;
	--mp-radius-l:            0.75rem;
	--mp-radius-xl:           1rem;
	--mp-radius-2xl:          1.5rem;
	--mp-radius-3xl:          2rem;

	--mp-space-s:             0.25rem;
	--mp-space-m:             0.5rem;
	--mp-space-l:             0.75rem;
	--mp-space-xl:            1rem;
	--mp-space-2xl:           1.5rem;
	--mp-space-3xl:           2rem;
}

body {
	display: flex;
	flex-flow: column nowrap;
	background: var(--mp-background);
	color: var(--mp-text-color);
	font-family: "Quicksand", system, sans-serif;
	font-size: 16px;
	margin: 0;
	padding: var(--mp-space-2xl);
	align-content: center;
	align-items: center;
	position: relative;
}

h1, h2 {
	color: var(--mp-color-brand-50);
	font-size: 2.8rem;
	font-weight: 700;
	font-family: "Signika", "Quicksand", verdana, helvetica, arial, sans-serif;
	letter-spacing: 0.03em;
	font-style: normal;
	font-optical-sizing: auto;
	font-variation-settings: "GRAD" 0;
	margin-bottom: var(--mp-space-l);
}

h2 {
	color: var(--mp-color-brand-50);
	font-size: 2rem;
	margin: 0 0 var(--mp-space-2xl);
}

h3 {
	color: var(--mp-color-brand-50);
	font-size: 1.35rem;
	font-weight: 700;
	letter-spacing: .02rem;
}

p {
	font-size: 1.2rem;
	margin: 0 0 var(--mp-space-2xl);
	padding: 0;

	&:empty {
		display: none;
	}
}

form, label {
	display: flex;
	flex-flow: column wrap;
}

label {
	margin-block: var(--mp-space-xl);
	font-weight: 700;

	&:has(input[type="checkbox"]),
	&:has(input[type="radio"]) {
		flex-direction: row;
		cursor: pointer;
		font-weight: normal;
	}

	span.required-indicator,
	span.optional-indicator {
		font-size: 0.8
		em;
		color: var(--mp-error);
	}

	span.optional-indicator {
		color: unset;
		font-weight: normal;
	}

	&.small-top-margin {
		margin-top: calc(-1 * var(--mp-space-s));
	}
}

*:user-invalid {
	background: var(--mp-form-invalid-color);
}

input[type="text"],
input[type="email"],
input[type="submit"],
input[type="button"],
button {
	margin: var(--mp-space-m) 0;
	padding: var(--mp-space-m) var(--mp-space-l);
	border-radius: var(--mp-radius-m);
	border: 1px solid var(--mp-color-contrast-70);
	color: var(--mp-text-form-color);
	font-size: 1rem;
}

input[type="submit"],
input[type="button"],
button {
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	gap: var(--mp-space-l);

	background: none;
	/*border: none;*/
	border: 1px solid var(--mp-button-border-color);
	font-size: 1.1em;
	font-weight: 700;
	color: var(--mp-button-text-color);
	cursor: pointer;

	&:hover {
		background: var(--mp-color-hover);
	}

	&:active {
		background: var(--mp-color-active);
	}

	&[type="submit"] {
		background: var(--mp-button-bg-color);
		color: var(--mp-text-color-high-contrast);
		border: 1px solid var(--mp-color-brand-30);
		flex: 2;

		&:hover {
			background: var(--mp-color-brand-40);
		}

		&:active {
			background: var(--mp-color-brand-30);
		}

		& > span.text-loading,
		& > spinner {
			display: none;
		}
	}
}

input[type="checkbox"],
input[type="radio"] {
	margin: 0 var(--mp-space-m) 0 0;
}

img.logo {
	margin: var(--mp-space-l) 0;
}

progress {
	width: 100%;
	height: 0.75rem;
	border-radius: 10px;
	overflow: hidden;
	--indicator-color: var(--mp-color-brand-60);
	background-color: var(--mp-color-desaturated-90);

	&::-webkit-progress-bar {
		background: transparent;
	}

	&[value]::-webkit-progress-value {
		background-color: var(--indicator-color);
	}

	&::-moz-progress-bar {
		background-color: var(--indicator-color);
	}

	&:not([value]) {
		&::-webkit-progress-bar {
			background-color: var(--indicator-color);
		}
	}
}

small {
	margin: var(--mp-space-l) 0;
	font-size: 0.9em;

	&:last-of-type {
		margin-bottom: var(--mp-space-3xl);
	}
}

small + p {
	margin-top: var(--mp-space-2xl);
}

.flex-row {
	display: flex;
	flex-flow: row wrap;
	gap: var(--mp-space-l);
}

.m-2xl {
	margin: var(--mp-space-2xl) 0;
	gap: var(--mp-space-2xl);
}

div#debug,
div#tests {
	/*position: relative;*/
	width: 100%;
	height: 1px;

	pre,
	div {
		position: absolute;
		top: 0;
		left: 0;
		background: var(--mp-background-darker);
		padding: var(--mp-space-l);
	}

	pre {
		font-family: monospace;
		font-size: 0.8em;
	}
}

div#tests div {
	left: unset;
	right: 0;

	h3 {
		font-size: 1em;
	}

	.test-error {
		color: var(--mp-error);
	}
}

main {
	width: 100%;
	max-width: 600px;
}

.grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--mp-space-xl);
	margin: 0 0 var(--mp-space-xl);

	label:has(input[type="radio"]) {
		margin-block: 0;
		padding: var(--mp-space-xl);
		border: 1px solid var(--mp-button-border-color);
		border-radius: var(--mp-radius-m);

		&:has(input:checked) {
			background: var(--mp-color-selected);
		}

		&:hover {
			background: var(--mp-color-hover);
		}

		&:active {
			background: var(--mp-color-active);
		}
	}
}

.callout {
	background: var(--mp-background-error);
	border-radius: var(--mp-space-m);
	border-left: var(--mp-space-s) solid var(--mp-error);
	padding: var(--mp-space-m);
	font-weight: normal;
}

.loading {
	input,
	button {
		opacity: 0.5;
		
		&[type="submit"] {
			& > span.text-normal {
				display: none;
			}

			& > span.text-loading,
			& > spinner {
				display: inherit;
			}
		}
	}
}

@media only screen and (width < 800px) {
	div#debug,
	div#tests {
		position: relative;
		height: unset;

		pre,
		div {
			position: unset;
		}
	}
}

@media only screen and (width < 600px) {
	p {
		font-size: 1.1rem;
	}

	.grid {
		grid-template-columns: repeat(1, 1fr);
		gap: 0;

		label:has(input[type="radio"]) {
			border-radius: 0;
			border-bottom: none;

			&:first-of-type {
				border-radius: var(--mp-radius-m) var(--mp-radius-m) 0 0;
			}

			&:last-of-type {
				border-radius: 0 0 var(--mp-radius-m) var(--mp-radius-m);
				border-bottom: 1px solid var(--mp-button-border-color);
			}
		}
	}
}

/* spinner based on WebAwesome implementation */

spinner {
	--size: 1.5;
	--track-width: calc(2px * var(--size));
	--track-color: var(--mp-color-brand-30);
	--indicator-color: var(--mp-color-brand-95);
	--speed: 2s;
	flex: 0 0 auto;
	display: inline-flex;
	width: calc(1em * var(--size));
	height: calc(1em * var(--size));

	svg {
		width: 100%;
		height: 100%;
		aspect-ratio: 1 / 1;
		animation: spin var(--speed) linear infinite;

		.track {
			stroke: var(--track-color);
		}

		.indicator {
			stroke: var(--indicator-color);
			stroke-dasharray: 75px, 100px;
			stroke-dashoffset: -5px;
			animation: 1.5s ease-in-out infinite dash;
			stroke-linecap: round;
		}
	}

	&.hidden {
		display: none;
	}
}

@keyframes spin {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}