/* The map: a plain nested list on a phone. Where the tree fits, the same lists are drawn as one. */
.map-room {
	container-type: inline-size;
}

.guide-map {
	ul {
		margin: 0;
		padding: 0 0 0 1rem;
		border-left: 1px solid var(--stroke-primary);
		list-style: none;
	}

	> ul {
		padding-left: 0;
		border-left: 0;
	}

	li {
		max-width: none;
		margin: 0;
	}

	li > a,
	li > span {
		display: inline-block;
		padding-block: 0.5rem;
	}

	a {
		color: var(--ink-primary);
	}

	[data-empty] {
		color: var(--ink-secondary);
	}
}

@container (min-width: 44rem) {
	.guide-map {
		--map-reach: 1.5rem;
		overflow-x: auto;

		ul {
			position: relative;
			display: flex;
			flex-direction: column;
			margin: 0 0 0 var(--map-reach);
			padding: 0;
			border-left: 0;

			&::before {
				content: '';
				position: absolute;
				top: 50%;
				left: calc(-1 * var(--map-reach));
				width: var(--map-reach);
				border-top: 1px solid var(--stroke-primary);
			}
		}

		> ul {
			width: max-content;
			margin-left: 0;

			&::before {
				display: none;
			}
		}

		li {
			position: relative;
			display: flex;
			align-items: center;
			padding: 0.25rem 0 0.25rem var(--map-reach);

			&::before {
				content: '';
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				border-left: 1px solid var(--stroke-primary);
			}

			&:first-child::before {
				top: 50%;
			}

			&:last-child::before {
				bottom: 50%;
			}

			&::after {
				content: '';
				position: absolute;
				top: 50%;
				left: 0;
				width: var(--map-reach);
				border-top: 1px solid var(--stroke-primary);
			}
		}

		> ul > li {
			padding-left: 0;

			&::before,
			&::after {
				display: none;
			}
		}

		li > a,
		li > span {
			flex: none;
			padding: 0.375rem 0.75rem;
			border: 1px solid var(--stroke-primary);
			border-radius: 0.375rem;
			background-color: var(--fill-auxiliary);
			white-space: nowrap;
		}

		a {
			text-decoration: none;

			&:hover {
				border-color: var(--ink-primary);
			}
		}

		[data-empty] {
			border-style: dashed;
			background-color: transparent;
		}
	}
}