* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-weight: 400;
}

:root {
	--spacer: 1rem;
	--columns: 4;
	--gap: var(--spacer);


	--color-green-1: oklch(0.75 0.2 160);
	--color-green-2: oklch(0.65 0.2 157);
	--color-green-3: oklch(0.55 0.2 155);
	--color-green-4: oklch(0.45 0.2 165);
	--color-green-5: oklch(0.35 0.2 182);

}

@supports (line-height: 1lh) {
	:root {
		--spacer: 1lh;
	}
}

html {
	font: 100%/1.4 system-ui, sans-serif;
	background: #ddd;
	hyphens: auto;
}

.container {
	width: min(100%, 60rem);
	min-height: 70vh;
	background: whitesmoke;
	box-shadow: 0 0.5rem 0.5rem hsl(0 0% 0% / 0.2);
	border-radius: 0.5rem;
	margin: 2rem auto 6rem;
	padding: 1rem;

	display: grid;
	grid-template-columns: repeat(var(--columns), 1fr);
	grid-template-rows: 8vh 1fr 8vh;
	gap: var(--gap);
}

header {
	grid-column-start: 1;
	grid-column-end: 5;
	background: transparent;

	display: flex;
	justify-content: space-between;
}

main {
	grid-column-start: 1;
	grid-column-end: 5;

	display: grid;
	grid-template-columns: subgrid;
}

main section > .entries {
	outline: 0px solid red;
	display: flex;
	flex-direction: column;
	gap: calc(var(--spacer) * 0.25);

	/*
	display: grid;
	grid-template-columns: repeat(var(--columns), 1fr);
	gap: var(--gap);
	*/
}

main .entries > li {
	outline: 0px solid green;
	list-style: none;

	& + li {
		/* border-top: 1px solid currentColor; */
		/* margin-block-start: 0.25rem;
		margin-block-start: 0.125lh; */
	}
}

main .entries details {
	--color-entry: oklch(0.85 0.2 54);

	padding: 0.25rem 0.5rem;
	background-color: color-mix(in srgb, var(--color-entry) 80%, white);
	background: linear-gradient(in oklch to bottom, #ccc, #aaa);
	background: #ddd;
	border-radius: 0.5em;
	corner-shape: superellipse(1.2);
	transition: background-color 0.25s;

	/*
	box-shadow: 0 1px 2px rgb(0 0 0 / 0.45),
				0 4px 10px rgb(0 0 0 / 0.2);
	box-shadow: inset 0 1px 1px oklch(1 0 0 / 0.25),
				inset 0 -1px 1px oklch(0 0 0 / 0.15),
				0 1px 2px rgb(0 0 0 / 0.75),
				0 4px 10px rgb(0 0 0 / 0.4);
	*/

	&:hover,
	&[open] {
		background-color: color-mix(in srgb, var(--color-entry) 100%, white);
	}

	&[open] {
		/* padding-block-end: calc(var(--spacer) * 0.5); */
	}

	&[open] .entry-expanded {
		max-height: 1800px;
	}

	summary {
		list-style: none;
		cursor: pointer;
		color: #222;

		h3 {
			font-size: 1rem;
			/* margin-block-end: calc(var(--spacer) * 0.25); */
			/* opacity: 0.25;
			transition: opacity 0.25s; */
		}

		&:hover h3 {
			/* text-decoration: underline; */
			/* opacity: 1; */
		}
	}
}

main .entries li:is(:hover, :focus) details,
main .entries details[open],
main .entries li.highlight details {
	background: linear-gradient(in oklch to top, var(--color-entry), oklch(from var(--color-entry) calc(l + 0.05) c calc(h + 15)));
}

main .entries .entry-expanded {
	margin-block: calc(var(--spacer) * 0.5);

	display: flex;
	flex-direction: column-reverse;
	gap: calc(var(--gap) * 0.5);

	max-height: 0;
	overflow: hidden;
	transition: max-height 1400ms ease-out;

	a {
		color: currentColor;
	}
}

main .entries .entry-expanded .description {
	font-size: 0.8rem;
}

main .entries .entry-expanded .geo {
	font-size: 0.8rem;
}

main .entries .tags,
header .tag-cloud {
	list-style: none;
	font-size: 0.8rem;

	display: flex;
	flex-wrap: wrap;
	gap: 0.5ch;

	a {
		--basecolor: #ddd;
		color: currentColor;
		text-decoration: none;
		background: var(--basecolor);
		padding: 0.2em 0.65em;
		border-radius: 0.7em;
		white-space: nowrap;
		transition: background-color 0.2s ease;
	}

	a:is(:hover, :focus) {
		opacity: 1;
		background: color-mix(in srgb, var(--basecolor) 80%, #fff);
	}

	a.selected { --basecolor: #999; }

	a.resto { --basecolor: orange; }
	a.bar { --basecolor: #007aff; color: #fff; }
}

main section.places {
	grid-column-start: span 2;
	columns: 2;
	column-gap: var(--gap);
}

main section.map {
	grid-column-start: 3;
	grid-column-end: 5;
	grid-row-start: 1;
}

main #map {
	width: 100%;
	height: max(8rem, 100%);
	border-radius: 0.5em;
	corner-shape: superellipse(1.2);
	box-shadow: 0 1px 2px rgb(0 0 0 / 0.45),
				0 4px 10px rgb(0 0 0 / 0.2);
}

main #map .leaflet-control-attribution {
	opacity: 0.01;
}

main #map .map-marker,
main #map .map-marker-hover {
	--color-entry: oklch(0.85 0.2 54);
	width: 1rem;
	height: 1rem;
	background-color: var(--color-entry);
	background: linear-gradient(in oklch to top, var(--color-entry), oklch(from var(--color-entry) calc(l + 0.05) c calc(h + 15)));
	border-radius: 1rem;
	corner-shape: superellipse(1.2);
	/* box-shadow: inset 0 1px 3px rgb(255 255 255 / 0.95), inset 0 -1px 5px rgb(0 0 0 / 0.65); */
}

main #map .map-marker-hover {
	background: #007aff;
	border: 0px solid black;
}

footer {
	grid-column-start: 1;
	grid-column-end: 5;
	background: transparent;
	color: #ccc;
}