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

:root {
	--h-size: 60ch;

	/* modular scale-ish; cf. https://www.modularscale.com/?1.5 */
	--spacing: 0.5rem;
	--spacing-sm1: calc(var(--spacing) * 0.667);
	--spacing-sm2: calc(var(--spacing) * 0.444);
	--spacing-sm3: calc(var(--spacing) * 0.296);
	--spacing-lg1: calc(var(--spacing) * 1.5);
	--spacing-lg2: calc(var(--spacing) * 2.25);
	--spacing-lg3: calc(var(--spacing) * 3.375);

	/* XXX: largely unused */
	--color-brand: #042A44;
	--color-brand-alt: #74869F;
	--color-accent: #CE132D;
	--color-bg: #FFF;
	--color-bg-alt: #E9E9E9E6;
}

/* source: https://gwfh.mranftl.com/fonts/roboto?subsets=latin */
@font-face {
	font-display: swap;
	font-family: Roboto;
	font-style: normal;
	font-weight: 400;
	src: url("../fonts/roboto-v48-latin-regular.woff2") format("woff2");
}

body {
	margin: 0;
	font-family: Roboto, system-ui, sans-serif;
	line-height: 1.5;
}

main {
	padding-inline: var(--spacing);
}

h1 {
	font-variant: small-caps;
}

h1 {
	font-size: 1rem;
}

a {
	text-underline-offset: 0.15em; /* XXX: magic value */
}
a:not(:hover, :focus) {
	text-decoration-color: color-mix(in srgb, currentColor, transparent 50%);
}
a:link,
a:visited {
	color: var(--color-brand);
}

/* tables */

table {
	--table-gutter: 2px;

	position: relative;
	width: 100%;
	border-collapse: collapse;
}

thead a:not(:hover, :active) {
	text-decoration: none;
}

tr:nth-child(even) {
	background-color: #F2F2F2; /* XXX: magic value */
}

tr:hover {
	background-color: #E9ECEF; /* XXX: magic value */
}

th {
	position: sticky;
	top: 0;
	background-color: #F8F9FA; /* XXX: magic value */
	box-shadow: 0 var(--table-gutter) var(--table-gutter) -1px #0002; /* XXX: magic values */
}

:is(th, td) {
	--cell-spacing: var(--spacing);

	padding: var(--cell-spacing);
	text-align: left;
	border: 1px solid #DEE2E6; /* XXX: magic value */
	user-select: text; /* XXX: why? */

	&:focus {
		user-select: all; /* XXX: why? */
	}
}
tbody tr:first-child td {
	padding-block-start: calc(var(--cell-spacing) + var(--table-gutter));
}

/* XXX: unused */
:is(th, td)[data-type=numeric] {
	text-align: right;
}
td[data-type=numeric] {
	font-variant-numeric: tabular-nums slashed-zero;
}

/* forms */

input,
textarea,
select,
button {
	font-family: inherit;
	font-size: inherit;
}

button:not(:disabled) {
	cursor: pointer;

	&.danger {
		color: #FFF; /* XXX: magic value */
		border-color: #E1536188; /* XXX: magic value */
		padding: var(--spacing);
		background-color: #DC3545; /* XXX: magic value */

		&:hover {
			scale: 1.01;
		}

		&:active {
			scale: 0.99;
		}
	}
}

input:not([type=checkbox], [type=radio]),
textarea,
select {
	display: block; /* XXX: hacky? */
}

input:not([type=checkbox], [type=radio], [type=search], [type=date], [type=datetime-local]),
textarea {
	width: 100%;

	&:read-only {
		background-color: #EEE; /* XXX: magic value */
	}
}

input[type=date],
input[type=datetime-local] {
	cursor: pointer;
}

textarea:not([rows]) {
	min-height: 10em;
}

form .controls { /* XXX: should be a proper component */
	display: flex;
	margin-block-start: var(--spacing-lg1); /* XXX: hacky; does not belong here */
	gap: var(--spacing-lg1);
	align-items: center;
	justify-content: space-between;
}
label ~ label:has(~ .controls) { /* XXX: hacky */
	display: block;
	margin-block-start: var(--spacing);
}

/* alerts */

.alert-danger {
	border: 1px solid #F1AEB5; /* XXX: magic value */
	border-radius: var(--spacing);
	padding: var(--spacing);
	color: #58151C; /* XXX: magic value */
	background-color: #F8D7DA; /* XXX: magic value */
}

/* panels */

.panel {
	max-width: 60ch;
	margin: 1rem auto;
}

/* search forms */

form.search { /* TODO: use `<search>` instead */
	display: flex;
	margin-block: var(--spacing); /* XXX: hacky; does not belong here */
	gap: var(--spacing);
}

.btn:has(+ form.search) { /* XXX: hacky; should be a proper component */
	float: right; /* XXX: brittle */
}

/* site navigation */

.site-nav {
	&,
	.nav-group {
		display: flex;
		gap: var(--spacing-lg1);
	}

	padding: var(--spacing) var(--spacing-lg1);
	align-items: center;
	justify-content: space-between;
	border-block-end: 1px solid var(--color-accent);
	background-color: var(--color-bg-alt);

	* {
		color: var(--color-brand);
	}

	img {
		margin-right: var(--spacing);
	}

	hr { /* XXX: hacky */
		width: 1rem; /* XXX: magic value */
		visibility: hidden;

		&:first-of-type {
			flex-grow: 1;
		}
	}

	a {
		color: var(--color-brand);
		font-variant: small-caps;
		letter-spacing: 0.025em; /* XXX: magic value */

		&:not(:hover, :active) {
			text-decoration: none;
		}

		&:hover {
			scale: 1.01;
		}

		&:active {
			scale: 0.99;
		}
	}
}