@layer reset, page, utility;

@layer page {
	html {
		--ctx-bg: hsl(225, 73%, 80%);
		--ctx-bg-alt: hsl(259, 20%, 95%);
		--ctx-color: hsl(263, 45%, 13%);
		--accent: hsl(270, 50%, 40%);
		--highlight: hsl(325, 100%, 25%);
		--corner: 4px;

		font-family: monospace;
		font-size-adjust: 0.5;
		font-size: 1rem;

		color-scheme: light dark;
		accent-color: var(--accent);
		color: var(--ctx-color);
		background-color: var(--ctx-bg);

		@media (prefers-color-scheme: dark) {
			--ctx-bg: hsl(263, 45%, 13%);
			--ctx-bg-alt: hsl(311, 72%, 20%);
			--ctx-color: hsl(225, 15%, 95%);
			--accent: hsl(33, 100%, 88%);
			--highlight: hsl(325, 100%, 50%);
		}
	}

	body {
		--content-max-size: ;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-content: center;
		gap: 1em;
		padding-block-start: 1em;

		background-image: linear-gradient(to top, var(--ctx-bg), var(--ctx-bg-alt));

		& > :not(footer) {
			max-inline-size: min(56rem, 100% - 2em);
			margin-inline: auto;
		}
	}

	h1 {
		font-size: 3rem;
		text-align: center;

		& > .icon {
			vertical-align: text-top;
		}
	}

	h1,
	p {
		text-wrap: balance;
	}
	:any-link {
		color: var(--highlight);

		&:is(:hover, :focus) {
			text-decoration: none;
		}
	}

	form {
		--bg: color-mix(in oklch, var(--ctx-bg), var(--ctx-bg-alt));
		--bg-plusplus: color-mix(in oklch, var(--ctx-bg-alt), oklch(from var(--ctx-color) calc(1 - l) none none) 100%);
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 2em;
		inline-size: 100%;
		padding: 2em;

		border-radius: calc(2em + var(--corner));
		background: var(--bg);
		background: linear-gradient(oklch(from var(--bg-plusplus) l c h / 0.25), oklch(from var(--bg-plusplus) l c h / 1));
		/* prettier-ignore */
		box-shadow:
			inset 0 1px 0 rgba(255, 228, 194, 0.25),
			/* inset 0 0.25em 2em rgba(86, 14, 73, 0.5), */
			0 1.5px 3px oklch(from var(--accent) 0.1 c h / 0.765625),
			0 4.5px 9px oklch(from var(--accent) 0.1 c h / 0.390625),
			0 7.5px 15px oklch(from var(--accent) 0.1 c h / 0.140625),
			0 10.5px 21px oklch(from var(--accent) 0.1 c h / 0.015625);
	}

	fieldset {
		border: 1px solid var(--accent);
		border-radius: var(--corner);

		&:disabled {
			& > legend::before {
				content: '❌ ';
				line-height: 1;
			}

			& :is(label, .label-like):not(.sublabel) {
				text-decoration: line-through;
				text-decoration-thickness: 2px;
			}
		}
	}

	:disabled {
		&,
		& * {
			cursor: not-allowed;
		}

		&:not(fieldset),
		& > :not(legend) {
			filter: grayscale();
		}

		&:not(fieldset:disabled *) {
			opacity: 0.7;
		}
	}

	legend {
		padding-inline: 1ch;
	}

	.fieldset-inner {
		display: flex;
		flex-direction: column;
		gap: 1em;
	}

	.flex-group {
		display: flex;
		align-items: baseline;
		flex-wrap: wrap;
		gap: 1ch;

		&:has(> input[type='range'], button) {
			align-items: center;
		}

		& > * {
			max-inline-size: 100%;
		}

		& > .flex-group-stretch {
			flex: 1 1 0;

			max-inline-size: calc(var(--maxlength, initial) * 2ch + 1ch);
		}
		& > .flex-group-fixed {
			flex: 0 0 auto;
		}
		& > .flex-group-end {
			margin-inline-start: auto;
		}
	}

	:is(label, .label-like):not(.sublabel) {
		font-weight: bold;
	}

	input:not([type='checkbox']),
	select {
		min-inline-size: 6ch;
	}

	/* iOS Safari fix */
	select:not(:disabled) {
		accent-color: currentColor;
	}

	input,
	select,
	button:where([type]) {
		padding: 0.25em;

		color: #000;
		background: #fff;
		border: 1px solid currentColor;
		border-radius: var(--corner);
	}
	:focus-visible {
		outline: 2px solid var(--accent);
		outline-offset: 2px;
	}
	input:is([type='number'], [inputmode='numeric']) {
		text-align: end;
		font-variant-numeric: tabular-nums;
	}

	.output-area {
		display: flex;
		flex-direction: column;
		gap: 1ch;
	}

	output {
		box-sizing: content-box; /* For the min-height to be simple to express */
		display: block;
		min-block-size: 3lh;
		padding: 0.5em;

		text-align: left;
		font-family: monospace;
		font-size: 1.25em;
		user-select: all;
		border-radius: var(--corner);
		background: var(--ctx-bg-alt);
	}

	.icon {
		display: inline-block;
		block-size: 1em;
		inline-size: auto;
	}

	button {
		display: inline-flex;
		gap: 0.5ch;
		align-items: center;
		padding: 0.5ch 1ch;

		line-height: calc(1em + 1ch);
	}

	.center {
		text-align: center;
	}

	p:has(#info:not(:empty)) {
		padding: 0.5ch;

		border-radius: var(--corner);
		background: oklch(from var(--ctx-bg-alt) l 50% 0deg);
	}

	#copywrap {
		display: inline-grid;
		place-content: center;
		justify-content: center;

		color: #000000;

		& > * {
			grid-area: 1 / 1 / -1 / -1;
			text-align: center;
		}

		& > [role='alert'] {
			display: flex;
			justify-content: center;
			align-items: center;
			inline-size: 0;
			block-size: 0;
			min-inline-size: 100%;
			min-block-size: 100%;
		}

		&:not([data-is-alert='true']) [data-show-when='alert'],
		&:is([data-is-alert='true']) [data-show-when='idle'] {
			visibility: hidden;
			pointer-events: none;
		}
	}

	header,
	footer {
		margin-block-start: auto;
	}

	footer {
		padding: 0.5em 1em;
		color: var(--ctx-bg-alt);
		background: var(--ctx-color);

		& :any-link {
			color: var(--ctx-bg);
		}
	}
}

@layer reset {
	*,
	::before,
	::after {
		margin: 0;
		box-sizing: border-box;
	}

	html {
		block-size: 100%;
	}

	body {
		min-block-size: 100%;
	}

	input,
	select,
	option,
	button {
		font: inherit;
	}
}

@layer utility {
	.visually-hidden {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: 0;
		padding: 0;
		overflow: hidden;

		white-space: nowrap;
		border: 0;

		clip: rect(0 0 0 0);
	}

	[hidden]:not(#\#) {
		display: none !important;
	}
}