@import "/lib/css/base-bones.css" layer(reset);
@import "/lib/css/colors/colors-radix-gen.css";
@import "/lib/css/fonts/family-iosevka-etoile.css";

:root {
	--back: light-dark(var(--sand-01), black);
	--soft: light-dark(white, var(--sand-01));
	--edge-subtle: var(--sand-06);
	--edge: var(--sand-08);
	--mute: var(--sand-11);
	--text: var(--sand-12);

	--accent-bg: var(--tomato-03);
	--accent-hover: var(--tomato-04);
	--accent-selected: var(--tomato-05);
	--accent-edge: var(--tomato-07);
	--accent: var(--tomato-09);
	--accent-text: var(--tomato-11);
}

@layer layout {
	body {
		font-family: var(--family-iosevka-etoile);
		text-align: center;
		line-height: normal;
		color: var(--text);
		background-color: var(--back);
		accent-color: var(--accent);
	}

	#monster-table {
		position: sticky;
		z-index: 20;
		width: fit-content;
		margin-inline: auto;
		margin-block: 1em 2em;
		top: 1rem;
		background-color: var(--soft);
		box-shadow: 0 4px 8px -2px #0002;

		th,
		td {
			padding-inline: 0.5em;
			padding-block: 0.3em;
			border-color: var(--accent-edge);
		}
		td {
			position: relative;
			text-align: center;
		}
	}

	footer {
		max-width: 65ch;
		margin-inline: auto;
		margin-block: 3em;
		text-align: center;
		text-wrap: balance;

		a {
			color: inherit;

			&:hover,
			&:focus {
				color: var(--accent);
			}
		}
	}
}

@layer global {
	:target {
		background-color: var(--accent-hover);
	}

	nav {
		display: flex;
		gap: 1ch;
		margin-block: 1em;

		@media (max-width: 479px) {
			flex-direction: column;

			button {
				width: 100%;
			}
		}
	}
	.btn,
	button {
		padding-inline: 1em;
		padding-block: 0.3em;
		background-color: var(--soft);
		border: 1px solid var(--edge);
		border-radius: 0.3em;

		&:hover,
		&:focus {
			color: var(--soft);
			background-color: var(--text);
			border-color: var(--text);
		}
	}

	.citation-link {
		position: absolute;
		top: 100%;
		right: 1em;
		z-index: 10;
		padding-inline: 0.2em;
		padding-block: 0.1em;
		font-size: 10pt;
		white-space: nowrap;
		color: var(--accent-text);
		text-decoration-color: var(--accent-edge);
		background-color: var(--accent-bg);
		border: 1px solid var(--accent-edge);
		box-shadow: 0 2px 4px -1px #0002;

		&:hover,
		&:focus {
			color: var(--accent-bg);
			text-decoration-color: var(--accent-bg);
			background-color: var(--accent-text);
			border-color: var(--accent-text);
		}

		td & {
			left: -1px;
			right: auto;
		}
	}

	details {
		position: relative;
		display: block;
		max-width: 35em;
		margin-inline: auto;
		margin-block: 1em;
		border: 1px solid var(--edge);
		background-color: var(--soft);
		border-radius: 0.3em;

		&:hover,
		&:focus {
			border-color: var(--text);
			summary {
				color: var(--soft);
				background-color: var(--text);
			}
		}
	}
	summary {
		padding-block: 0.3em;
	}
	.details__content {
		padding: 0.5em;

		b,
		i {
			color: var(--accent-text);
		}

		.checkbox-list {
			list-style-type: none;

			li {
				text-indent: -1.5em;
			}

			[type="checkbox"] {
				margin-inline-end: 1ch;
			}
		}
	}
	[open] {
		border-color: var(--text);
		box-shadow: 0 2px 4px -1px #0002;

		summary {
			color: var(--soft);
			background-color: var(--text);
		}
	}

	nav,
	ul {
		width: fit-content;
		margin-inline: auto;
	}
	ul {
		text-align: start;
	}
	li {
		margin-block: 0.3em;

		&::marker {
			color: var(--mute);
		}
	}

	fieldset {
		position: relative;
		display: block;
		max-width: 35em;
		margin-inline: auto;
		margin-block: 1em;
		text-align: start;
		background-color: var(--soft);
		border: 1px solid var(--edge-subtle);
		border-radius: 0.3em;

		legend {
			padding-inline: 0.5em;
			padding-block: 0.3em;
			font-weight: 700;
			background-color: var(--accent-bg);
			border: 1px solid var(--accent-edge);
		}

		label,
		.label {
			display: flex;
			align-items: center;
			gap: 1ch;
			width: fit-content;
			margin-block: 0.5em;
		}
		.label__text {
			font-weight: 700;
		}
	}

	[type="number"] {
		padding-inline: 0.5em;
		padding-block: 0.3em;
		background-color: var(--soft);
		border: 1px solid var(--accent-edge);
		border-radius: 0.2em;
	}
}

@layer components {
	.btn-group {
		display: flex;
		gap: 1px;
		width: fit-content;
		background-color: var(--accent-edge);
		border: 1px solid var(--accent-edge);
		border-radius: 0.3em;
		overflow: hidden;

		label {
			margin-block: 0;
		}
	}

	.radio-btn {
		padding-inline: 0.7em;
		padding-block: 0.3em;
		background-color: var(--soft);

		&:hover,
		&:focus {
			background-color: var(--accent-bg);
		}

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

		[type="radio"] {
			/* visually-hidden */
			position: absolute;
			width: 1px;
			height: 1px;
			white-space: nowrap;
			overflow: hidden;
			clip-path: rect(0 0 0 0);
		}
	}

	.mute {
		color: var(--mute);
	}
}