@layer settings, resets, elements, layouts, components, objects, animations, overrides;

@layer settings {
	:root {
		/* Establish Global Variables */
		--mis-viewport: 320px;
		--mis-content: calc(var(--mis-viewport) - 2rem);
		--mis-text: 60ch;
		--header-height: 110px;
		--space-default: 16px;
		--layer-back: -10;
		--layer-flat: 0;
		--layer-front: 10;
		--layer-float: 100;
		--layer-modal: 1000;
		--font-family-sans: "Raleway", sans-serif;
		--font-family-serif: "Raleway", sans-serif;
		--font-family-mono: ui-monospace, monospace;
		--font-size-100: clamp(0.43rem, 0.4674rem + 0.2226vw, 0.64rem);
		--font-size-200: clamp(0.64rem, 0.5843rem + 0.2783vw, 0.8rem);
		--font-size-300: clamp(0.8rem, 0.7304rem + 0.3478vw, 1rem);
		--font-size-400: clamp(1rem, 0.913rem + 0.4348vw, 1.25rem);
		--font-size-500: clamp(1.25rem, 1.1413rem + 0.5435vw, 1.5625rem);
		--font-size-600: clamp(1.5625rem, 1.4266rem + 0.6793vw, 1.9531rem);
		--font-size-700: clamp(1.9531rem, 1.7833rem + 0.8489vw, 2.4413rem);
		--font-size-800: clamp(2.4413rem, 2.2289rem + 1.062vw, 3.0519rem);
		--font-size-900: clamp(3.0519rem, 2.7864rem + 1.3272vw, 3.815rem);
		--font-size-1000: clamp(3.815rem, 3.4835rem + 1.6576vw, 4.7681rem);
		--palette-orange: hsl(15 93% 56%);
		--palette-purple: hsl(246 39% 39%);
		--palette-red: hsl(357 91% 37%);
		--palette-white: hsl(0 0% 100%);
		--palette-grey: hsl(0 0% 75%);
		--palette-black: hsl(0 0% 0%);
		/* Variable Implementation */
		--color-bg-default: var(--palette-white);
		--color-text-default: var(--palette-black);
		--color-form-input-bg: var(--palette-white);
		--color-line-default: var(--palette-purple);
		--color-warning: var(--palette-red);
		--shadow: 0.5rem 0.5rem 1rem var(--palette-grey);
		--corner-round: 0.25em;
	}
}

@layer resets {
	@font-face {
		font-family: "Raleway";
		src: url("/styles/fonts/Raleway-VariableFont_wght.ttf") format("truetype");
	}

	@font-face {
		font-family: "Volkorn";
		src: url("/styles/fonts/Vollkorn-Italic.ttf") format("truetype");
	}

	*, *:after, *::before {
		box-sizing: border-box;
		font: inherit;
	}

	html, body, header, section, article,
	h1, h2, h3, h4, h5, h6, p,
	img, figure, picture, svg, video {
		margin: 0;
		padding: 0;
	}
}

@layer elements {
	html {
		color-scheme: light;
		block-size: 100%;
		min-inline-size: var(--mis-viewport);
		background-color: var(--color-bg-default);
		color: var(--color-text-default);
		font-family: var(--font-family-sans);
		font-size: var(--font-size-400);
		line-height: 1.5;
		-moz-text-size-adjust: none;
		-webkit-text-size-adjust: none;
		text-size-adjust: none;
		scroll-behavior: smooth;
	}

	body {
		position: relative;
		display: flex;
		flex-flow: column nowrap;
		min-block-size: 100%;
		min-block-size: 100vh;
		min-block-size: 100dvb;
		min-inline-size: var(--mis-viewport);
	}

		body:has(dialog[open]) {
			overflow: hidden;
		}

	a:not([class]) {
		color: inherit;
		text-underline-offset: 0.33em;
		text-decoration-thickness: 1px;
		transition: 0.1s ease-in-out;
	}

		a:not([class]):where(:hover, :focus-visible) {
			text-decoration-thickness: 3px;
		}

	address, p, li:not([class]) {
		inline-size: fit-content;
		max-inline-size: var(--mis-text);
		text-wrap: pretty;
	}

	dialog::backdrop {
		--tone: 202deg 71%;
		background: radial-gradient(circle at center, hsl(var(--tone) 10%), hsl(var(--tone) 50%), hsl(var(--tone) 10%));
		opacity: 0.5;
	}

	em, i {
		font-style: italic;
	}

	form {
		margin-inline: auto;
		inline-size: fit-content;
	}
		form.inlineform {
			margin-inline: 1rem;
		}

	h1, h2,
	h3, h4,
	h5, h6,
	select, textarea,
	input, label, legend {
		line-height: 1;
	}

	h1, h2,
	h3, h4,
	h5, h6,
	label, legend {
		font-family: var(--font-family-serif);
		font-weight: bold;
		text-wrap: balance;
	}

	hr {
		border-width: 1px;
		border-style: solid;
		/* --fg is set when hr is in a container with the panel class */
		border-color: var(--fg, var(--color-line-default));
	}

	img, figure, picture, svg, video {
		inline-size: 100%;
		block-size: auto;
		vertical-align: middle;
		object-fit: cover;
		font-style: italic;
	}

	div:has( > :where(input, select, textarea):user-invalid) {
		--input-color: var(--color-warning);
	}

	input, select, textarea {
		accent-color: var(--color-orange);
		background-color: var(--color-form-input-bg);
		color: var(--input-color, inherit);
		border: 1px solid currentColor;
		border-radius: var(--corner-round);
	}

		input:not(:where([type=checkbox],[type=radio],[type=submit],[type=button],[type=reset])), select, textarea {
			inline-size: 100%;
			display: block;
			padding: 0.25em 0.5em;
		}

		input:where([type=checkbox],[type=radio]) {
			scale: 2;
		}

	:where(input, select)[data-type="number"] {
		max-inline-size: 5rem;
	}

	label {
		display: block;
		color: var(--input-color, inherit);
	}

	@media screen and (width < 620px) {
		label {
			margin-block-end: 0.5em;
		}
	}

	main {
		flex-grow: 1;
	}

	mark, pre, code {
		font-family: var(--font-family-mono);
	}

	mark {
		background-color: color-mix(in hsl, var(--palette-purple), var(--palette-white));
		color: var(--palette-black);
		text-transform: uppercase;
	}

	pre, code {
		display: inline-block;
	}

	select {
		inline-size: fit-content;
	}

	strong, b {
		font-weight: bold;
	}

	sub, sup {
		line-height: 0;
		font-size: 0.75em;
	}

	table {
		inline-size: 100%;
		border-collapse: collapse;
	}

		table:not(:has(tbody > tr)) :where(thead, tbody) {
			/* hide the table body and header if the body has no rows */
			display: none;
		}

		table:not(:has(tbody > tr)) caption {
			/* make the caption red if the table body has no rows */
			color: var(--color-warning);
		}

		table caption {
			text-align: left;
		}

		table thead {
			position: sticky;
			top: 0;
		}

		table tbody tr {
			border-block-end: 1px solid;
		}

			table tbody tr:nth-child(even) {
				background-color: color-mix(in hsl, var(--palette-grey), var(--palette-white) 75%);
			}

		table td, th {
			padding: 0.25em 1em;
			text-align: left;
		}

		table td {
			vertical-align: top;
		}

		table th {
			background-color: var(--palette-purple);
			color: var(--palette-white);
			vertical-align: bottom;
		}

	textarea:not([rows]) {
		min-block-size: 15rem;
	}

	:where(ol,ul)[class] {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	::placeholder {
		color: var(--palette-neutral-dim);
	}

	@layer elements.screen-specific {
		@media screen and (width < 620px) {
			h1, h2,
			h3, h4, h5, h6 {
				text-align: center;
			}

			p, address {
				margin-inline: auto;
			}

			[id] {
				scroll-margin-block-start: var(--header-height);
			}
		}
	}
}

@layer layouts {
	.columns {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(var(--mis-content), 1fr));
		column-gap: var(--space-default);
		row-gap: calc(var(--space-default) * 2);
	}

	.form-row {
		display: grid;
		grid-template-areas: "label input utils";
		grid-template-columns: minmax(10ch, var(--mis-content)) 1fr auto;
		align-items: center;
		column-gap: var(--space-default);
		row-gap: calc(var(--space-default) / 4);
	}

		.form-row > label {
			grid-area: label;
		}

	@media screen and (width < 620px) {
		.form-row {
			grid-template-areas: "label label" "input utils";
			grid-template-columns: auto auto;
		}
	}

	.input-wrapper {
		display: flex;
		flex-flow: row;
		gap: var(--space-default);
	}

	.flow > * + * {
		margin-block-start: 1em;
	}

	.spread-data {
		display: flex;
		gap: var(--space-default);
		align-content: center;
	}

	.table-wrapper {
		position: relative;
		inline-size: 100%;
		max-block-size: 20rem;
		overflow: auto;
	}

	[data-contents="center"] > * {
		margin-inline: auto;
	}

	[data-contents="right"] > * {
		margin-inline-start: auto;
	}

	[data-squeeze] {
		inline-size: fit-content;
	}
}

@layer components {
	.button {
		--btn-face: var(--palette-purple);
		--btn-text: var(--palette-white);
		display: flex;
		align-items: center;
		justify-content: center;
		gap: var(--space-default);
		padding: 0.25em 0.5em;
		cursor: pointer;
		background-color: var(--btn-face);
		color: var(--btn-text);
		border: 1px solid currentColor;
		border-radius: var(--corner-round);
		line-height: 1;
		text-decoration: none;
		transition: 0.3s ease-in-out;
	}

		.button:where(:hover, :focus-visible) {
			background-color: var(--btn-text);
			color: var(--btn-face);
		}

		.button[data-style="secondary"] {
			--btn-face: color-mix(in hsl, var(--palette-purple), var(--palette-white) 25%);
		}

		.button[data-style="delete"] {
			--btn-face: var(--palette-red);
		}

		.button[disabled] {
			--btn-face: var(--palette-grey);
			--btn-text: var(--palette-black);
			cursor: not-allowed;
		}

	.card {
		border: 1px solid;
		border-radius: var(--corner-round);
	}

	.card-title {
		padding: calc(var(--space-default) / 2);
		border-block-end: 1px solid;
	}

	.command-list {
	}

		.command-list > * {
			padding: calc(var(--space-default)/3);
			inline-size: 100%;
		}

			.command-list > *:nth-child(even) {
				/* bg-main is set only if the command-list is nested in a panel */
				background-color: color-mix(in hsl, var(--bg-main, var(--palette-grey)), transparent 75%);
			}

	.icon {
		aspect-ratio: 1;
		line-height: 1;
		inline-size: var(--icon-size, var(--space-default));
	}

		.icon[data-size="medium"] {
			--icon-size: calc(1.5 * var(--space-default));
		}

		.icon[data-size="large"] {
			--icon-size: calc(2 * var(--space-default));
		}

	.manual-entry {
		background-color: color-mix(in oklch, var(--palette-orange), white);
	}

	.menu-item-link {
		position: relative;
		display: inline-block;
		padding: 0.25em 0.5em;
		color: var(--color-text-default);
		text-decoration-line: none;
		text-align: center;
		transition: 0.3s ease-in-out;
	}

		.menu-item-link::after {
			content: '';
			position: absolute;
			inset: auto 0 0 0.25em;
			margin-block: auto;
			block-size: 4px;
			background-color: currentColor;
			scale: 0;
			transition: 0.3s ease-in-out;
		}

		.menu-item-link:where([aria-current], :hover, :focus-visible)::after {
			scale: 1;
		}

		.menu-item-link:where(:hover, :focus-visible) {
			color: var(--palette-white);
		}


	@media screen and (width < 900px) {
		.menu-item {
			inline-size: 100%;
			border-block-end: 1px solid;
		}
	}

	.message {
		--txt-color: inherit;
		padding: 0.5em;
		color: var(--txt-color);
		border: 2px solid currentColor;
		border-radius: var(--corner-round);
		text-align: center;
	}

		.message[data-style="info"] {
			--txt-color: var(--palette-purple);
		}

		.message[data-style="alert"] {
			--txt-color: var(--palette-orange);
		}

		.message[data-style="error"] {
			--txt-color: var(--palette-red);
			font-weight: bold;
		}

	.panel {
		--bg-main: var(--color-bg-default);
		--bg-mix: var(--bg-main); /* default does not mix, so both colors are the same */
		--bg-ratio: 0%;
		--fg: var(--color-text-default);
		padding: var(--pad-block, var(--space-default)) var(--pad-inline, var(--space-default));
		color: var(--fg);
		background-color: color-mix(in hsl, var(--bg-main), var(--bg-mix) var(--bg-ratio));
	}

		.panel[data-bg-color="black"] {
			--bg-main: var(--palette-black);
			--fg: var(--palette-white);
		}

		.panel[data-bg-color="grey"] {
			--bg-main: var(--palette-grey);
		}

		.panel[data-bg-color="orange"] {
			--bg-main: var(--palette-orange);
		}

		.panel[data-bg-color="purple"] {
			--bg-main: var(--palette-purple);
			--fg: var(--palette-white);
		}

		.panel[data-bg-color="red"] {
			--bg-main: var(--palette-red);
			--fg: var(--palette-white);
		}

		.panel[data-bg-enhance="light"] {
			--bg-mix: var(--palette-white);
			--fg: var(--palette-black);
		}

		.panel[data-bg-enhance="dark"] {
			--bg-mix: var(--palette-black);
			--fg: var(--palette-white);
		}

		.panel[data-bg-ratio="25"] {
			--bg-ratio: 25%;
		}

		.panel[data-bg-ratio="50"] {
			--bg-ratio: 50%;
		}

		.panel[data-padding="medium"] {
			--pad-block: calc(var(--space-default) * 1.5);
			--pad-inline: calc(var(--space-default) * 1.5);
		}

		.panel[data-padding="large"] {
			--pad-block: calc(var(--space-default) * 3);
			--pad-inline: calc(var(--space-default) * 3);
		}

		.panel[data-padding-block="medium"] {
			--pad-block: calc(var(--space-default) * 1.5);
		}

		.panel[data-padding-block="large"] {
			--pad-block: calc(var(--space-default) * 3);
		}

		.panel[data-padding-inline="medium"] {
			--pad-inline: calc(var(--space-default) * 1.5);
		}

		.panel[data-padding-inline="large"] {
			--pad-inline: calc(var(--space-default) * 3);
		}

	.restricted-data {
		background-color: color-mix(in hsl, var(--palette-red), var(--palette-white) 20%);
		color: var(--palette-white);
	}

	.text-align-left {
		text-align: left;
	}

	.text-align-right {
		text-align: right;
	}

	.text-align-center {
		text-align: center;
	}

	.text-size-title {
		font-size: var(--font-size-800);
	}

	.text-size-subtitle {
		font-size: var(--font-size-700);
	}

	.text-size-heading {
		font-size: var(--font-size-600);
	}

	.text-size-subheading {
		font-size: var(--font-size-500);
	}

	.text-size-small {
		font-size: var(--font-size-300);
	}

	.text-size-smaller {
		font-size: var(--font-size-200);
	}

	.text-size-smallest {
		font-size: var(--font-size-100);
	}

	.toolbar {
		/* Use with .panel */
		--bg-main: var(--palette-grey);
		--bg-mix: var(--palette-white);
		--bg-ratio: 50%;
		display: flex;
		flex-flow: row wrap;
		gap: var(--space-default);
		align-items: center;
		justify-content: center;
	}
		.toolbar.left {
			align-items: flex-start;
			justify-content: flex-start;
		}
}

@layer objects {
	#btn-menu[data-mobile-open="false"] > #btn-menu-close-icon {
		display: none;
	}

	#btn-menu[data-mobile-open="true"] > #btn-menu-open-icon {
		display: none;
	}

	#site-header {
		position: sticky;
		top: 0;
		display: flex;
		flex-flow: row nowrap;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-default);
		border-block-end: 1px solid var(--color-line-default);
		z-index: var(--layer-front);
	}

	#site-nav-logo {
		aspect-ratio: 1;
		inline-size: clamp(2rem, 20%, 75px);
	}

	#site-title {
		text-align: center;
	}

	#site-nav-primary {
		display: flex;
		flex-wrap: nowrap;
		gap: var(--space-default);
		align-items: center;
		list-style: none;
		margin: 0;
		padding: 0;
		font-size: var(--font-size-300);
	}

	@media screen and (width < 900px) {
		#site-nav-primary {
			position: fixed;
			inset-block: var(--header-height) 0;
			inset-inline: 0;
			flex-direction: column;
			padding-block-start: var(--space-default);
			background-color: color-mix(in hsl, var(--palette-orange), var(--palette-white) 25%);
			border-block: 1px solid currentColor;
			font-size: var(--font-size-600);
			text-align: center;
			transform-origin: top;
			animation: var(--animation) 0.3s ease-in-out forwards;
			z-index: var(--layer-front);
		}

			#site-nav-primary[data-mobile-state="open"] {
				--animation: slide-fade-in;
			}

			#site-nav-primary[data-mobile-state="closing"] {
				--animation: slide-fade-out;
			}

			#site-nav-primary[data-mobile-state="closed"] {
				display: none;
			}
	}

	@media screen and (width > 900px) {
		#btn-menu {
			display: none;
		}

		#site-nav-primary {
			flex-direction: row;
		}
	}
}

@layer animations {
	@keyframes slide-fade-in {
		from {
			opacity: 0.33;
			scale: 0.5;
			translate: 50% 0;
		}

		to {
			opacity: 1;
			scale: 1;
			translate: 0 0;
		}
	}

	@keyframes slide-fade-out {
		from {
			opacity: 1;
			scale: 1;
			translate: 0 0;
		}

		to {
			opacity: 0.33;
			scale: 0.5;
			translate: 50% 0;
		}
	}
}

@layer overrides {
	.hidden {
		display: none;
	}

	.visually-hidden:not(:focus) {
		clip-path: inset(50%);
		height: 1px;
		overflow: hidden;
		position: absolute;
		white-space: nowrap;
		width: 1px;
	}

	@media (prefers-reduced-motion: reduce) {
		*,
		*::before,
		*::after {
			animation-duration: 0.01ms !important;
			animation-iteration-count: 1 !important;
			transition-duration: 0.01ms !important;
			scroll-behavior: auto !important;
		}

		html:focus-within {
			scroll-behavior: auto;
		}
	}
}