@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Cascadia+Code:ital,wght@0,200..700;1,200..700&family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Roboto+Serif:ital,opsz,wght@0,8..144,900;1,8..144,900&family=Roboto+Slab:wght@100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Roboto+Serif:ital,opsz,wght@0,8..144,100..900;1,8..144,900&family=Roboto+Slab:wght@100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

:root {
	color-scheme: light dark;
	--color-dark-mode-bgnd: #222;
	--color-dark-mode-text: #e0e0e0;

	--width-border: var(--rem-2xs);
	--width-max-content: 64ch;

	/* Fonts */
	--font-family-body: "Roboto", system-ui, sans-serif;
	--font-family-heading: "Roboto Serif", serif;
	--font-family-heading-condensed: "Roboto Slab", serif;
	--font-family-mono: "Cascadia Code", monospace;
	--size-h1: 2rem;

	/* Sizing */
	--em-3xs: calc(var(--em-md) / 12);
	--em-2xs: calc(var(--em-md) / 8);
	--em-xs: calc(var(--em-md) / 4);
	--em-sm: calc(var(--em-md) / 2);
	--em-md: 1em;
	--em-lg: calc(var(--em-md) * 1.5);
	--em-xl: calc(var(--em-md) * 2);
	--em-2xl: calc(var(--em-md) * 4);
	--em-3xl: calc(var(--em-md) * 6);

	--rem-3xs: calc(var(--rem-md) / 12);
	--rem-2xs: calc(var(--rem-md) / 8);
	--rem-xs: calc(var(--rem-md) / 4);
	--rem-sm: calc(var(--rem-md) / 2);
	--rem-md: 1rem;
	--rem-lg: calc(var(--rem-md) * 1.5);
	--rem-xl: calc(var(--rem-md) * 2);
	--rem-2xl: calc(var(--rem-md) * 4);
	--rem-3xl: calc(var(--rem-md) * 6);
}

/* CSS reset fixes. */
*,
*::after,
*::before {
	box-sizing: border-box;
}
* {
	margin: 0;
	padding: 0;
}
:where(
	button,
	input,
	optgroup,
	option,
	select,
	textarea
) {
	font: inherit;
}
:where(
	img,
	picture,
	svg,
	video
) {
	block-size: auto; /* Maintains aspect ratio relative to width */
	display: block;
	max-inline-size: 100%; /* Can scale downward without exceeding intrinsic width */
}
/* End CSS reset fixes. */

/* Links. Order of selectors is important. */
:where(a) {
	&:link {
		color: var(--color-link, #00e);
	}
	&:visited {
		color: var(--color-link-visited, #551a8b);
	}
	&:focus {
		outline: var(--width-border) solid var(--color-link, #00e);
	}
	&:hover {
		color: var(--color-link-hover, currentColor);
	}
	&:active {
		color: var(--color-link-active, Red);
	}
}
/* End links. */

/* HTML elements. */
:where(body) {
	font-family: var(--font-family-body);
	min-block-size: 100vh;
}
:where(button) {
	--_box-shadow: var(--_size-shadow) var(--_size-shadow) var(--_size-shadow) Gray;
	--_color-background: var(--color-background, White);
	--_color-border: var(--color-border, Black);
	--_color-text: var(--color-text, Black);
	--_size-padding: var(--size-padding, var(--em-xs));
	--_size-shadow: var(--rem-2xs);
	--_width-border: var(--em-3xs);
	--_width-button: var(--width-button, 6em);

	background-color: var(--_color-background);
	border: calc(var(--_width-border) * 2) solid var(--_color-border);
	box-shadow: var(--_box-shadow);
	color: var(--_color-text);
	cursor: pointer;
	inline-size: var(--_width-button);
	padding: var(--_size-padding);

	&:active:not([disabled]) {
		box-shadow: none;
	}
	&[disabled] {
		box-shadow: none;
		cursor: default;
	}

	&.discrete {
		border-style: double;
		box-shadow: none;
	
		&:active:not([disabled]) {
			box-shadow: inset var(--_box-shadow);
		}
	}
}
:where(
	code,
	kbd
) {
	font-family: var(--font-family-mono);
}
:where(code) {
	font-weight: 600;
}
:where(
	details,
	fieldset,
	figure,
	h1,
	h2,
	h3,
	section
) {
	margin-block: var(--rem-md);
}
:where(details) {
	--padding: var(--em-sm);

	background-color: White;

	& > summary {
		cursor: pointer;
	}

	&[open] > :not(summary) {
		border: var(--width-border) solid Black;
	}
	& > * {
		padding: var(--padding);
	}
}
:where(fieldset) {
	border: var(--width-border) solid Black;
	max-inline-size: var(--width-max-content);
	padding: var(--em-md);

	/* Fix for non-collapsing margins. */
	& :last-child {
		margin-block-end: 0;
	}
}
:where(
	figcaption,
	p
) {
	margin-block: var(--rem-sm);
	max-inline-size: var(--width-max-content);
	overflow-wrap: anywhere;
	text-wrap: pretty;
}
:where(figure) {
	& :first-child {
		margin-block-start: 0;
	}
}
:where(
	form,
	section
) {
	/* Fix for non-collapsing margins. */
	& > :first-child {
		margin-block-start: 0;
	}
	/* Fix for non-collapsing margins. */
	& > :last-child {
		margin-block-end: 0;
	}
}
:where(form) {
	border: var(--width-border) solid Black;
	inline-size: fit-content;
	padding: var(--em-md);
}
:where(
	h1,
	h2,
	h3,
	legend,
	title
) {
	font-family: var(--font-family-heading);
}
:where(
	h1,
	h2,
	h3
) {
	font-optical-sizing: auto;
	font-style: normal;
	font-variation-settings: "grad" 0, "wdth" 150;
	font-weight: 600;
	text-wrap: balance;
}
:where(h1) {
	font-size: var(--size-h1);
}
:where(h2) {
	font-size: calc(var(--size-h1) * 0.75);
}
:where(
	h3,
	legend,
	title
) {
	font-size: calc(var(--size-h1) * 0.5);
	font-weight: 600;
	font-variation-settings: "wdth" 75;
}
:where(html) {
	block-size: 100%;
}
:where(img) {
	background-repeat: no-repeat;
	background-size: cover;
}
:where(input) {
	&[type="checkbox"],
	&[type="radio"] {
		& + label {
			margin-inline-start: var(--em-xs);
		}
	}
}
:where(kbd) {
	background-color: #eee;
	border: var(--width-border) solid #ccc;
	border-radius: 0.25em;
	padding: calc(var(--rem-xs) / 2) var(--rem-xs);
}
:where(legend) {
	padding-inline: var(--em-xs);
}
/* Fix for non-collapsing margins. */
legend + * {
	margin-block-start: 0;
}
:where(
	footer,
	header,
	main
) {
	padding: var(--rem-md);
}
:where(main) {
	flex-grow: 1;

	& > :first-child {
		margin-block-start: 0;
	}
	& > :last-child {
		margin-block-end: 0;
	}
}
:where(select) {
	cursor: pointer;
	min-inline-size: 0;
}
:where(table) {
	border: var(--width-border) solid currentColor;
	border-collapse: collapse;
	overflow-x: auto;

	& :where(tbody, tfoot) td {
		vertical-align: top;
	}
	& :where(
		tbody td,
		tfoot td,
		thead th
	) {
		--_color-background: var(--color-background, inherit);
		--_color-text: var(--color-text, currentColor);

		background-color: var(--_color-background);
		border: var(--width-border) solid currentColor;
		color: var(--_color-text);
		padding: var(--em-2xs) var(--em-sm);
	}
	& :where(
		tfoot,
		thead
	) {
		--color-background: #eee;

		font-weight: bold;
	}
	& tbody td {
		--color-background: White;
	}
	& tfoot {
		--color-text: #666;
	}
	& thead {
		font-family: var(--font-family-heading-condensed);
		text-align: left;
		text-wrap: pretty;

		& th {
			vertical-align: bottom;
		}
	}
}
:where(textarea) {
	box-sizing: content-box;
	field-sizing: content;
	max-block-size: 20lh;
	min-block-size: 5lh;
}
:where(ul) {
	list-style-type: square;
	max-inline-size: var(--width-max-content);
}
:where(ul ul) {
	list-style-type: square;
	margin-inline-start: calc(var(--em-md) + var(--em-xs));
}
/* End HTML elements. */

:where(.container-buttons) {
	display: flex;
	flex-wrap: wrap;
	gap: var(--rem-sm);
	margin-block: var(--rem-md);
}
:where(.container-form-fields) {
	display: grid;
	gap: var(--rem-xs) var(--rem-sm);
	grid-template-columns: auto 1fr;
	margin-block: var(--rem-md);
}
:where(.title) {
	font-family: var(--font-family-heading);
	font-weight: bold;
	margin-block: var(--rem-md) var(--rem-sm);
}

/*----------------------------------------------------------------------------
* Generic classes.
*/
.text-center {
	text-align: center;
}
.text-justify {
	text-align: justify;
}
.text-left {
	text-align: start;
}
.text-right {
	text-align: end;
}
.text-wrap-anywhere {
	word-break: break-all;
}

/*----------------------------------------------------------------------------
* Flex container.
*/
:where(
	container-flex,
	continer-grid
) {
	margin-block: var(--rem-md);

	/* Fix for non-collapsing margins. */
	& > * {
		margin-block: 0;
	}
}
:where(container-flex) {
	display: flex;
	flex-wrap: wrap;
}
:where(container-grid) {
	--_qty-cols: var(--qty-cols, auto-fit);

	display: grid;
	grid-template-columns: repeat(var(--_qty-cols), minmax(min-content, 1fr));
}

.flex-col {
	flex-direction: column;
}
.flex-min-width {
	min-inline-size: min-content;
}
.no-flex-wrap {
	flex-wrap: nowrap;
}
.overflow-x {
	overflow-x: auto;
}

.align-items-center {
	align-items: center;
}
.align-items-end {
	align-items: end;
}
.align-items-start {
	align-items: start;
}

.gap-xs {
	gap: var(--em-xs);
}
.gap-sm {
	gap: var(--em-sm);
}
.gap-md {
	gap: var(--em-md);
}
.gap-lg {
	gap: var(--em-lg);
}
.gap-xl {
	gap: var(--em-xl);
}
.gap-col-xs {
	column-gap: var(--em-xs);
}
.gap-col-sm {
	column-gap: var(--em-sm);
}
.gap-col-md {
	column-gap: var(--em-md);
}
.gap-col-lg {
	column-gap: var(--em-lg);
}
.gap-col-xl {
	column-gap: var(--em-xl);
}
.gap-row-xs {
	row-gap: var(--em-xs);
}
.gap-row-sm {
	row-gap: var(--em-sm);
}
.gap-row-md {
	row-gap: var(--em-md);
}
.gap-row-lg {
	row-gap: var(--em-lg);
}
.gap-row-xl {
	row-gap: var(--em-xl);
}
.no-gap {
	gap: unset;
}
.no-gap-col {
	column-gap: unset;
}
.no-gap-row {
	row-gap: unset;
}

.margin {
	margin: var(--rem-md);
}
.no-margin {
	margin: 0;
}
.no-margin-block {
	margin-block: 0;
}
.no-padding {
	padding: 0;
}
.no-padding-block {
	padding-block: 0;
}
.no-padding-inline {
	padding-inline: 0;
}
.padding {
	padding: var(--rem-md);
}
.padding-block {
	padding-block: var(--rem-md);
}
.padding-inline {
	padding-inline: var(--rem-md);
}

.tooltip {
	&:is(:focus-visible, :hover) .tooltip-text {
		visibility: visible;
	}
	&:focus-visible {
		outline: var(--width-border) solid Blue;
		z-index: 99;
	}
	& .tooltip-text {
		background-color: White;
		border: var(--width-border) solid Black;
		border-radius: var(--width-border);
		bottom: calc(100% + 0.25em);
		inline-size: max-content;
		left: 50%;
		max-inline-size: 16ch;
		padding-inline: var(--em-xs);
		position: absolute;
		right: var(--right, auto);
		text-align: center;
		transform: translate(-50%);
		visibility: hidden;
		z-index: 1;
	}
}

@container (max-inline-size: 16ch) {
	.container-form-fields {
		grid-template-columns: 1fr;

		& label::after {
			content: ':';
		}
	}
}
@media (prefers-color-scheme: dark) {
	details,
	form,
	summary {
		background-color: var(--color-dark-mode-bgnd);
		color: var(--color-dark-mode-text);
	}
}

/*============================================================================
* Accessibility.
*/

/* Screen reader only */
.sr-only {
	block-size: 1px;
	border: 0;
	clip-path: inset(0%);
	inline-size: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
}