main {
	display: flex;
	flex-direction: column;
	row-gap: 1.2rem;

	& > header {
		align-self: center;
		margin-block-end: 0.8rem;
	}
	& > .main { flex: 1; }
	& > footer { align-self: flex-end; }

	& h2 { font-size: 1.5rem; }
	& h3 { font-size: 1.1rem; }
	& h4 { font-size: 1rem; }

	& ul {
		display: flex;
		flex-direction: column;
		row-gap: 0.4rem;

		padding-inline-start: 2rem;
		list-style-type: square;
	}

	&.error { & h3 { font-size: 1.3rem; } }
	&.offline {
		align-items: center;
		justify-content: center;

		& h3 { font-size: 1.1rem; margin-block-end: 1.1rem; }
	}
}

.user-content {
	margin: 0.4rem;
	padding: 0.6rem;

	background-color: var(--primary-bg-color);
	border: 1px dotted var(--bright-fg-color);
}

section:is(.main, .details, .related), form:is(.main, .actions) {
	display: flex;
	flex-direction: column;
	row-gap: inherit;
}

section.main {
	align-items: center;

	& > table { width: 100%; }
	main.error > & { align-items: revert; }
}

ul.main { justify-content: center; }

form:is(.main, .actions) {
	justify-content: center;
	align-items: center;

	/* Field and form errors */
	& ul.errors {
		color: var(--accent-color);
		font-weight: bold;
		padding: 0;

		& > li {
			display: flex;
			column-gap: var(--prefix-gap);

			&::before { content: "❌"; }
		}
	}

	/* Checkboxes in normal forms */
	& > menu.fields > li > label:not([for]),
	/* Radiobuttons in fieldset forms */
	& > fieldset > * > label,
	& > fieldset > .flatten > * > label {
		display: flex;
		align-items: center;
		column-gap: var(--prefix-gap);
	}

	/* Fieldset forms */
	& > fieldset,
	& > fieldset > .flatten {
		display: flex;
		flex-direction: column;
		row-gap: 0.4em;
	}

	/* Normal forms */
	& > menu.fields {
		display: flex;
		flex-direction: column;
		row-gap: inherit;
		& > li {
			display: flex;
			flex-direction: column;
			row-gap: var(--prefix-gap);

			& > label { flex: 1; }

			/* Field errors */
			& > ul.errors { padding-block-start: 1rem; }
		}
	}

	/* Action buttons */
	& > menu.buttons {
		display: flex;
		flex-wrap: wrap;
		gap: var(--prefix-gap);
		justify-content: center;
	}
}
form.actions > menu.fields > li {
	flex-direction: revert;
	align-items: center;
	column-gap: var(--prefix-gap);
}

/* Action links */
menu.actions {
	display: flex;
	flex-direction: column;
	row-gap: 0.6rem;

	& > li {
		display: flex;
		column-gap: var(--prefix-gap);

		&::before {
			content: "> ";
			font-weight: 1000;
		}
	}
}

main form[rel=search] {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--prefix-gap);

	padding-block-start: 1.5rem;

	& > label {
		font-weight: bolder;
	}
}

section.cards {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-evenly;
	row-gap: inherit;

	flex: 1;

	& > article {
		display: flex;
		flex-direction: column;
		row-gap: 0.6rem;

		max-width: 90%;
		padding: 1rem;

		background-color: var(--primary-bg-color);
		border: 2px dotted var(--bright-fg-color);
		border-radius: 25px;

		&.empty {
			align-items: center;
			font-size: 105%;
		}

		& > footer { align-self: flex-end; }
	}
}

section.settings > article:not(.empty) {
	width: 100%;

	& > header > h3 {
		font-size: 1.2rem;
		&::before { content: "> "; }
	}
}

form.actions {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0.5rem;
}


/* Page-specific */

body:has(> main.covered) {
	background-image: var(--cover);
	background-attachment: fixed;
	background-position: center;
}