* { box-sizing: border-box; }

::selection {
	background-color: black;
	color: white;
}


:focus-visible { outline: auto; }

:disabled {
	opacity: 50%;
	cursor: not-allowed;
}


/* Visually replaced or flattened */

hr { display: none; }

span { display: contents; }


/* Anchors */

a {
	cursor: pointer;

	color: var(--accent-color);
	text-decoration: none;

	&:hover { text-decoration: underline; }


	/* Emoji prefixes */

	&:is([href^=mailto], [href^=tel]) {
		display: inline flex;
		align-items: center;
		column-gap: var(--prefix-gap);
	}

	&[href^=mailto]::before { content: "📧"; }
	&[href^=tel]::before { content: "📞"; }
}


/* Clickables */

input:is([type=radio], [type=checkbox]),
button,
a {
	cursor: pointer;

	&:hover { filter: brightness(1.25); }
}

@media (prefers-reduced-motion: no-preference) {
	a { transition: filter 300ms ease; }
	input:is([type=radio], [type=checkbox]) { transition: transform 50ms linear; }
	button { transition: transform 50ms ease, filter 300ms ease; }

	:is(
		input:is([type=radio], [type=checkbox]),
		button
	):active {
		transform: translateY(0.2rem);
	}
}


/* Form elements */

input:not(:is([type=radio], [type=checkbox])),
select, textarea,
button {
	padding: var(--cell-padding);

	/* Inherit text rendering */
	text-rendering: inherit;
	letter-spacing: inherit;

	border: solid var(--cell-border-width) var(--fg-color);
	border-radius: 3px;
}

input:not(:is([type=radio], [type=checkbox])),
select, textarea {
	background-color: var(--primary-bg-color);
	color: inherit;

	&:focus {
		outline: 0;
		box-shadow: var(--field-box-shadow) var(--accent-color);
	}
}

select {
	/* workaround */
	width: 100%;
}


input:is([type=radio], [type=checkbox]) {
	width: 1.2em;
	height: 1.2em;

	accent-color: var(--accent-color);
}


textarea::placeholder,
input::placeholder {
	text-align: center;

	font-size: 0.9em;
	font-style: italic;

	opacity: 50%;
	color: currentcolor;
}

textarea {
	min-height: 10em;
	resize: block;
}

/* Isolated as not widely supported and un"is"able */
::file-selector-button {
	cursor: pointer;

	background-color: var(--accent-color);
	color: var(--primary-bg-color);
	font-weight: bolder;

	margin-inline-end: 0.6rem;

	font-size: 90%;

	text-rendering: inherit;
	letter-spacing: inherit;

	border: solid var(--cell-border-width) var(--fg-color);
	border-radius: 3px;
}

button {
	background-color: var(--accent-color);
	color: var(--primary-bg-color);
	font-weight: bolder;

	&:focus {
		outline: 0;
		box-shadow: var(--field-box-shadow) var(--fg-color);
	}
}


/* Fieldsets as a logical container */

fieldset {
	margin: 0;
	padding: 0;
	border: 0;

	& > legend {
		font-weight: bolder;
		padding-block-end: var(--prefix-gap);
	}
}


/* Tables */

table {
	border-collapse: collapse;
	text-indent: 0;

	& > caption,
	& :is(th, td) {
		padding: var(--cell-padding);
	}

	& > caption { text-align: end; }

	& tr:nth-child(even) { background-color: var(--secondary-bg-color); }

	& th {
		position: sticky;
		top: 0;

		font-weight: bolder;
		text-align: center;

		outline: var(--cell-border-width) solid currentcolor;
		background-color: var(--main-bg-color);
	}

	& td {
		border: var(--cell-border-width) dashed currentcolor;
		border-block-start: 0;

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

}


/* Headings, lists and paragraphs */

p, h1, h2, h3, h4,
ul, menu {
	margin: 0;
}

menu { padding: 0; }
menu > li { display: block; }

h1, h2, h3, h4 { font-weight: bolder; }


/* Misc markup */

em { font-style: italic; }

address {
	display: inline;

	font-style: normal;
}

code {
	overflow-wrap: anywhere;
}