/* ==========================================================================
   Tokens
   ========================================================================== */

:root
{
	/* Greens, light to dark. */
	--color-control: #b5e372;
	--color-control-hover: #95c352;
	--color-page: #8fc83b;
	--color-control-active: #75a332;
	--color-accent: #4a7f19;
	--color-strong: #2f5710;

	--color-surface: white;
	--color-text: #1b1f17;
	--color-text-muted: #555;
	--color-border: #dde7cf;
	--color-option: #6fb5084f;
	--color-disabled: #e7e7e7;
	--color-danger: #c62828;
	--color-caption: #465f2eaf;
	--color-scrim: rgb(0 0 0 / .5);
	--color-focus: var(--color-strong);

	--font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	--space-1: .25rem;
	--space-2: .5rem;
	--space-3: 1rem;
	--space-4: 1.5rem;
	--space-5: 2rem;

	--radius-sm: .25rem;
	--radius-md: .375rem;
	--radius-lg: .5rem;

	--shadow: 0 4px 16px rgb(0 0 0 / .2);

	--page-width: 980px;
	--gutter: var(--space-3);
	--divider: 1rem;
	--search-border-width: 3px;
}

@media (min-width: 768px)
{
	:root
	{
		--gutter: var(--space-5);
	}
}

/* ==========================================================================
   Base
   ========================================================================== */

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

html
{
	font-size: 14px;
	background: var(--color-page);
	padding-inline: var(--space-3);
}

@media (min-width: 768px)
{
	html
	{
		font-size: 16px;
	}
}

body
{
	display: flex;
	flex-direction: column;
	max-width: var(--page-width);
	min-height: 100vh;
	margin: 0 auto;
	background: var(--color-surface);
	color: var(--color-text);
	font-family: var(--font-sans);
	line-height: 1.5;
}

img
{
	max-width: 100%;
}

a
{
	color: var(--color-strong);
	text-underline-offset: .15em;
}

h1, h2, h3, h4
{
	line-height: 1.25;
	text-wrap: balance;
}

:focus-visible
{
	outline: 3px solid var(--color-focus);
	outline-offset: 2px;
}

.sr-only
{
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ==========================================================================
   Components
   ========================================================================== */

/* Buttons. Links and buttons share one look; the current/selected item gets a darker border. */
.button, .tab
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: .4em .9em;
	border: 2px solid var(--color-control);
	border-radius: var(--radius-sm);
	background: var(--color-control);
	color: var(--color-text);
	font: inherit;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
}

	:is(.button, .tab):hover:not(:disabled, [aria-current], [aria-selected="true"])
	{
		border-color: var(--color-control-hover);
	}

	:is(.button, .tab):is([aria-current], [aria-selected="true"])
	{
		border-color: var(--color-control-active);
	}

	span.button
	{
		cursor: default;
	}

	.button:disabled
	{
		border-color: var(--color-disabled);
		background: var(--color-disabled);
		color: var(--color-text-muted);
		cursor: default;
	}

.divider
{
	flex: none;
	height: var(--divider);
	background: var(--color-page);
}

/* ==========================================================================
   Layout: header, main, footer
   ========================================================================== */

.site-header
{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	padding: var(--space-3);
}

	.site-header .logo
	{
		height: 4rem;
		width: auto;
	}

@media (min-width: 768px)
{
	.site-header .logo
	{
		height: 5.5rem;
	}
}

	.site-header nav
	{
		display: flex;
		gap: var(--space-3);
		font-size: 1.2rem;
	}

/* On narrow screens the navigation gets its own row below the logos. */
@media (max-width: 767px)
{
	.site-header nav
	{
		order: 1;
		width: 100%;
		justify-content: center;
	}

		.site-header nav .button
		{
			flex: 1;
		}
}

main
{
	flex: 1;
	display: flex;
	flex-direction: column;
	padding: var(--space-3) var(--gutter);
}

	/* Full-bleed elements span the gutters. */
	main > :is(.divider, .banner)
	{
		margin-inline: calc(-1 * var(--gutter));
	}

	main h1
	{
		margin-block: var(--space-3);
		font-size: 2rem;
	}

.site-footer
{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-3) var(--gutter);
	font-size: .9rem;
}

/* ==========================================================================
   Text pages (home, Impressum)
   ========================================================================== */

.prose :is(h1, h2, h3)
{
	max-width: 30em;
	margin-inline: auto;
	text-align: center;
}

.prose h2
{
	margin-block: var(--space-5) var(--space-2);
	font-size: 1.5rem;
}

.prose h3
{
	margin-block: var(--space-4) var(--space-2);
	font-size: 1.15rem;
}

/* A lead directly under the title reads as its subtitle. */
.prose h1:has(+ .lead)
{
	margin-bottom: var(--space-2);
}

.prose .lead
{
	max-width: 32em;
	margin-inline: auto;
	margin-top: 0;
	margin-bottom: var(--space-4);
	text-align: center;
	font-size: 1.15rem;
	font-weight: 600;
	text-wrap: balance;
}

.sponsors
{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-evenly;
	gap: var(--space-3);
	padding-block: var(--space-4);
}

	.sponsors img
	{
		height: 5rem;
		width: auto;
	}

@media (min-width: 768px)
{
	.sponsors img
	{
		height: 7rem;
	}
}

/* Photo strip on the home page. Each photo grows by its pixel width, so all share one height. */
.banner
{
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	margin-bottom: var(--space-3);
}

	.banner a
	{
		position: relative;
		flex: 0 0 auto;
		scroll-snap-align: start;
		color: white;
		text-decoration: none;
	}

	.banner img
	{
		display: block;
		width: auto;
		height: 12rem;
		max-width: none;
	}

	.banner .caption
	{
		position: absolute;
		inset: auto 0 0 0;
		display: flex;
		flex-direction: column;
		padding: .3em .5em;
		background: var(--color-caption);
		font-size: .8rem;
		font-weight: 600;
		line-height: 1.2;
	}

		.banner .caption small
		{
			font-size: .8em;
			font-weight: normal;
		}

	.banner a:hover img
	{
		filter: brightness(1.1);
	}

	.banner a:focus-visible
	{
		outline-offset: -3px;
	}

@media (min-width: 768px)
{
	.banner
	{
		overflow-x: visible;
	}

		.banner a
		{
			flex-shrink: 1;
			flex-basis: 0;
			min-width: 0;
		}

		.banner img
		{
			width: 100%;
			height: auto;
		}
}

/* ==========================================================================
   Species list
   ========================================================================== */

.list h1
{
	text-align: center;
}

.search
{
	display: flex;
	justify-content: center;
	margin-block: var(--space-3) var(--space-5);
	font-size: 1.3rem;
}

	.search > *
	{
		border: 0 solid var(--color-accent);
		border-block-width: var(--search-border-width);
	}

	.search:focus-within > *
	{
		border-color: var(--color-focus);
	}

	.search input
	{
		flex: 0 1 14em;
		min-width: 0;
		padding: .2em .4em;
		border-left-width: var(--search-border-width);
		border-radius: var(--radius-md) 0 0 var(--radius-md);
		font: inherit;
	}

		.search input:focus
		{
			outline: none;
		}

	.search a, .search button
	{
		display: flex;
		align-items: center;
		padding: 0 .5em;
	}

	.search a
	{
		color: var(--color-danger);
		stroke-width: 3px;
	}

		.search a:hover
		{
			background: var(--color-danger);
			color: white;
			stroke-width: 5px;
		}

	.search button
	{
		border-right-width: var(--search-border-width);
		border-radius: 0 var(--radius-md) var(--radius-md) 0;
		background: var(--color-accent);
		color: white;
		stroke-width: 4px;
		cursor: pointer;
	}

		.search button:hover
		{
			background: var(--color-strong);
		}

	.search :is(a, button):focus-visible
	{
		outline-offset: -3px;
	}

.species-table
{
	width: 100%;
	border-collapse: collapse;
	margin-bottom: var(--space-4);
}

	.species-table th
	{
		padding: var(--space-2) var(--space-3);
		border-bottom: 2px solid var(--color-control-active);
		text-align: left;
	}

	.species-table td
	{
		width: 50%;
		padding: 0;
		border-bottom: 1px solid var(--color-border);
	}

		.species-table td a
		{
			display: block;
			padding: .75rem var(--space-3);
			color: inherit;
			text-decoration: none;
		}

	.species-table tbody tr:hover
	{
		background: var(--color-control);
	}

.list-empty
{
	text-align: center;
	font-style: italic;
	color: var(--color-text-muted);
}

.pager
{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: var(--space-3);
}

	.pager > div
	{
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--space-1);
	}

	.pager .button
	{
		min-width: 2.2em;
		padding: .3em .5em;
	}

/* ==========================================================================
   Species page
   ========================================================================== */

.art .name h1
{
	margin-bottom: 0;
}

.art .subtitle
{
	margin-top: var(--space-1);
	font-size: 1.15rem;
}

.art .image
{
	display: flex;
	justify-content: center;
}

	.art .image img
	{
		max-height: 630px;
		object-fit: contain;
	}

	/* The placeholder shouldn't take as much room as a real photo (80% of its 433px width). */
	.art .image img.missing
	{
		width: 346px;
	}

.art .classification
{
	color: var(--color-text-muted);
}

/* Information texts can span several paragraphs, separated by line breaks. */
.art .information
{
	white-space: pre-line;
}

.details
{
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: var(--space-2) var(--space-4);
	margin-block: var(--space-4) 0;
}

	.details dt
	{
		font-weight: 600;
	}

	.details dd
	{
		margin: 0;
	}

	.details ul
	{
		margin: 0;
		padding-left: 1.2em;
	}

@media (max-width: 767px)
{
	.details
	{
		grid-template-columns: 1fr;
		row-gap: 0;
	}

		.details dd + dt
		{
			margin-top: var(--space-2);
		}
}

@media (min-width: 2000px)
{
	.art .top
	{
		display: grid;
		grid-template-columns: 50% 50%;
		grid-template-rows: auto 1fr;
		grid-template-areas:
			"name media"
			"data media";
	}

		.art .top > .name
		{
			grid-area: name;
		}

		.art .top > .image
		{
			grid-area: media;
			margin-block: var(--space-3);
		}

		.art .top > .data
		{
			grid-area: data;
		}
}

/* ==========================================================================
   Relations (Scripts/relations). Without JavaScript the plain nested lists are shown.
   ========================================================================== */

.tabs
{
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin-top: var(--space-3);
}

	.tab[aria-selected="true"]
	{
		background: var(--color-page);
		font-weight: 600;
	}

.relations-description
{
	margin: .8em 0 0 0;
}

.relations-header
{
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr) 44px;
	align-items: center;
	gap: .5em;
	margin-top: .8em;
}

.relations-back, .relations-pager button
{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 2px solid var(--color-control);
	border-radius: 50%;
	background: var(--color-control);
	color: var(--color-text);
	font: inherit;
	font-size: 1.6em;
	line-height: 1;
	cursor: pointer;
}

	.relations-back:hover, .relations-pager button:hover:not(:disabled)
	{
		border-color: var(--color-control-active);
	}

	.relations-back.unavailable, .relations-pager.unavailable, .relations-crumbs.unavailable
	{
		visibility: hidden;
	}

.relations-heading
{
	min-width: 0;
	text-align: center;
}

.relations-crumbs ol
{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0 .4em;
	min-height: 1.5em;
	margin: 0;
	padding: 0;
	list-style: none;
}

	.relations-crumbs li + li::before
	{
		content: "›";
		content: "›" / "";
		margin-right: .4em;
	}

	.relations-crumbs button
	{
		padding: .1em .3em;
		border: 0;
		border-radius: var(--radius-sm);
		background: none;
		font: inherit;
		color: var(--color-text);
		text-decoration: underline 2px var(--color-control-active);
		text-underline-offset: .2em;
		cursor: pointer;
	}

		.relations-crumbs button:hover
		{
			background: var(--color-control);
		}

.relations-title
{
	margin: 0;
	font-size: 2em;
	font-weight: normal;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

	.relations-title:focus:not(:focus-visible)
	{
		outline: none;
	}

.relations-count
{
	font-size: .45em;
	color: var(--color-text-muted);
}

.relations-stage
{
	position: relative;
	margin: .5em auto 0 auto;
	/* Zoom transitions scale elements beyond the stage. */
	overflow: clip;
	overflow-clip-margin: 8px;
}

	.relations-stage ul
	{
		margin: 0;
		padding: 0;
		list-style: none;
	}

.relations-ghosts, .relations-decoration
{
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.relations-decoration
{
	width: 100%;
	height: 100%;
}

.relations-sector-background
{
	fill: var(--color-page);
	fill-opacity: .22;
}

.relations-sector-label
{
	fill: var(--color-strong);
	font-size: 14px;
	font-weight: 600;
	pointer-events: auto;
}

.relations-node
{
	position: absolute;
	top: 0;
	left: 0;
	border: 2px solid var(--color-text);
	border-radius: 50%;
	background: var(--color-surface);
	list-style: none;
}

	.relations-node:hover
	{
		background: var(--color-control);
	}

	.relations-node > a
	{
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
		padding: 14%;
		border-radius: 50%;
		color: var(--color-text);
		text-align: center;
		text-decoration: none;
		font-size: clamp(11px, calc(var(--node-size) * .085), 15px);
		line-height: 1.2;
		hyphens: auto;
		overflow-wrap: break-word;
	}

		.relations-node > a:focus-visible
		{
			outline-offset: 3px;
		}

		.relations-node > a > span
		{
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 4;
			line-clamp: 4;
			max-width: 100%;
			overflow: hidden;
		}

.relations-bubble
{
	position: absolute;
	top: 0;
	left: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--color-page);
	color: var(--color-text);
	font: inherit;
	cursor: pointer;
	transition: scale .2s ease, background-color .2s ease;
}

	.relations-bubble:hover
	{
		z-index: 1;
		background: var(--color-control-active);
		scale: 1.06;
	}

	.relations-bubble:focus-visible
	{
		outline-offset: 3px;
	}

.relations-bubble-dots
{
	position: absolute;
	inset: 6%;
	width: 88%;
	height: 88%;
	fill: var(--color-strong);
	fill-opacity: .55;
}

.relations-bubble-label
{
	position: relative;
	display: inline-flex;
	flex-direction: column;
	max-width: 76%;
	padding: .3em .6em;
	border-radius: .6em;
	background: rgb(255 255 255 / .9);
	font-size: clamp(11px, calc(var(--bubble-radius) * .16), 16px);
	line-height: 1.2;
}

.relations-bubble-title
{
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
	font-weight: 600;
	overflow-wrap: break-word;
	hyphens: auto;
}

.relations-bubble-count
{
	font-size: .85em;
}

.relations-pager
{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1em;
	margin: .5em 0 1em 0;
}

	.relations-pager button:disabled
	{
		opacity: .4;
		cursor: default;
	}

@media (prefers-reduced-motion: reduce)
{
	.relations-bubble
	{
		transition: none;
	}
}

/* ==========================================================================
   Questionnaire (Scripts/questionnaire.ts)
   ========================================================================== */

.questions
{
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background: var(--color-scrim);
}

	/* Title bar and form are two stacked cards. */
	.questions > div, .questions > form
	{
		width: 90%;
		max-width: 600px;
		padding: 1.2rem;
		border: 4px solid var(--color-accent);
		border-radius: var(--radius-lg);
		background: var(--color-surface);
	}

	.questions > div
	{
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: var(--space-2);
	}

		.questions > div > h2
		{
			margin: 0;
			padding-left: var(--space-2);
			font-size: 1.4rem;
			color: var(--color-accent);
		}

		.questions .close
		{
			position: relative;
			width: 32px;
			height: 32px;
			padding: 0;
			border: none;
			border-radius: 50%;
			background: var(--color-control);
			cursor: pointer;
			transition: background .2s ease;
		}

			.questions .close:hover
			{
				background: var(--color-control-hover);
			}

			.questions .close::before, .questions .close::after
			{
				content: "";
				position: absolute;
				top: 50%;
				left: 50%;
				width: 20px;
				height: 2px;
				background: var(--color-text);
			}

			.questions .close::before
			{
				transform: translate(-50%, -50%) rotate(45deg);
			}

			.questions .close::after
			{
				transform: translate(-50%, -50%) rotate(-45deg);
			}

	.questions > form
	{
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		box-shadow: var(--shadow);
	}

		.questions > form > div:not(.controls)
		{
			display: none;
			flex-direction: column;
		}

		.questions > form > div.active
		{
			display: flex;
		}

		.questions > form > div > h3
		{
			margin: 0 0 var(--space-2) var(--space-2);
			font-size: 1.1rem;
			color: var(--color-accent);
		}

		.questions > form > div > ul
		{
			margin: 0;
			padding-left: 0;
			list-style: none;
		}

			.questions > form > div > ul:not(:last-child)
			{
				margin-bottom: .8rem;
			}

			.questions > form > div > ul > li:not(:last-child)
			{
				margin-bottom: .3rem;
			}

			.questions > form > div > ul > li > span
			{
				margin-left: 1.5rem;
			}

			.questions label
			{
				display: flex;
				align-items: center;
				padding: .6rem .8rem;
				border-radius: var(--radius-lg);
				background: var(--color-option);
			}

			.questions :is(input[type="checkbox"], input[type="radio"])
			{
				position: relative;
				flex: none;
				width: 20px;
				height: 20px;
				margin: 0 6px 0 0;
				border: 3px solid var(--color-accent);
				border-radius: var(--radius-md);
				appearance: none;
				cursor: pointer;
			}

			.questions input[type="radio"]
			{
				border-radius: 50%;
			}

				.questions input[type="checkbox"]:checked
				{
					background-color: var(--color-accent);
				}

				.questions input[type="checkbox"]:checked::after
				{
					content: "";
					position: absolute;
					top: 0;
					left: 4px;
					width: 6px;
					height: 11px;
					border: solid white;
					border-width: 0 3px 3px 0;
					transform: rotate(35deg);
				}

				.questions input[type="radio"]:checked::after
				{
					content: "";
					position: absolute;
					inset: 3px;
					border-radius: 50%;
					background: var(--color-accent);
				}

			.questions textarea
			{
				width: 100%;
				padding: .4rem;
				font: inherit;
				resize: none;
			}

		.questions > form > .controls
		{
			display: flex;
			justify-content: end;
			gap: var(--space-2);
			margin-top: var(--space-4);
		}

			.questions > form > .controls > .button
			{
				min-width: 6.5em;
			}

.questions-button
{
	position: fixed;
	right: 1.5rem;
	bottom: 1.5rem;
	z-index: 9998;
	/* Shown by questionnaire.ts. */
	display: none;
	justify-content: center;
	align-items: center;
	width: 60px;
	height: 60px;
	border: none;
	border-radius: 50%;
	background: var(--color-control);
	color: var(--color-text);
	box-shadow: var(--shadow);
	cursor: pointer;
}

	.questions-button:hover
	{
		background: var(--color-control-hover);
	}

.attention-pulse
{
	animation: pulse 1.2s ease-out 3;
}

@keyframes pulse
{
	0%
	{
		transform: scale(1);
	}

	40%
	{
		transform: scale(1.25);
	}

	100%
	{
		transform: scale(1);
	}
}

@media (prefers-reduced-motion: reduce)
{
	.attention-pulse
	{
		animation: none;
	}
}