/* Route map: a plain nested list on a phone. Where the tree fits, the same
   lists are drawn as one. The map is its own container, so its lists ask how
   much room the map has, not the screen.

   It's a diagram, so it speaks the diagram tokens (styles/tokens-viz.css) and
   the house spacing tokens; the measures below are only those, put
   together. No font sizes: the labels are the site's own type. The two
   breakpoints (44rem, 60rem) are raw because @container can't read a token. */
.route-map {
	--map-edge: var(--viz-edge-stroke-width) solid var(--viz-line);
	--map-node-border: var(--viz-edge-stroke-width) solid var(--viz-line);
	--map-node-padding-block: calc(var(--space-small) * 0.75);
	--map-node-padding-inline: calc(var(--space-small) * 1.5);
	--map-reach: calc(var(--space-medium) * 1.5);
	--map-row-gap: calc(var(--space-small) / 2);
	container-type: inline-size;
	overflow-x: auto;

	ul {
		margin: 0;
		padding: 0 0 0 var(--space-medium);
		border-left: var(--map-edge);
		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: var(--space-small);
	}

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

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

	/* The view toggle only shows where columns have room (below) */
	fieldset {
		display: none;
	}
}

/* Where the tree fits, every level is a column: the top list is a grid with
   a column per depth, and each list and item below passes it down (subgrid),
   so a column is as wide as its widest label and every box at one depth
   starts at the same line. Unused depth columns collapse to nothing. */
@container (min-width: 44rem) {
	.route-map {
		ul {
			display: grid;
			grid-column: 2 / -1;
			grid-template-columns: subgrid;
			margin: 0;
			padding: 0;
			border-left: 0;
		}

		> ul {
			width: max-content;
			grid-template-columns: repeat(8, max-content);
		}

		li {
			position: relative;
			display: grid;
			grid-column: 1 / -1;
			grid-template-columns: subgrid;
			align-items: center;
			padding-block: var(--map-row-gap);

			/* The trunk: the vertical line down the left of a group of siblings */
			&::before {
				content: '';
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				border-left: var(--map-edge);
			}

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

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

			/* The branch: from the trunk, under the label, to the next column */
			&::after {
				content: '';
				grid-row: 1;
				grid-column: 1;
				border-top: var(--map-edge);
			}

			&:not(:has(> ul))::after {
				justify-self: start;
				width: var(--map-reach);
			}
		}

		> ul > li::before {
			display: none;
		}

		li > a,
		li > span {
			z-index: 1;
			grid-row: 1;
			grid-column: 1;
			justify-self: start;
			margin-left: var(--map-reach);
			padding: var(--map-node-padding-block) var(--map-node-padding-inline);
			border: var(--map-node-border);
			border-radius: var(--viz-node-radius);
			background-color: var(--viz-neutral-fill);
			white-space: nowrap;
		}

		> ul > li > a,
		> ul > li > span {
			margin-left: 0;
		}

		li > ul {
			grid-row: 1;
		}

		a {
			text-decoration: none;

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

		/* Opaque, so the branch line running under it doesn't show through */
		[data-empty] {
			border-style: dashed;
			background-color: var(--viz-label-bg);
		}
	}
}

/* Columns: the IA-sitemap view. The root on top, each first-level branch a
   column below it, and each column's pages listed down with a rail on the
   left. Same lists as the tree; only the drawing changes. */
@container (min-width: 60rem) {
	.route-map {
		fieldset {
			display: flex;
			gap: var(--space-medium);
			align-items: baseline;
			margin: 0 0 var(--space-large);
			padding: 0;
			border: 0;
		}

		legend {
			float: left;
			padding: 0;
		}
	}

	.route-map:has([value='columns']:checked) {
		/* Where a rail meets the middle of a label: the li's padding, the label's
		   padding and border, half a line. Set on the lists, not the map, since
		   the map is the container this query asks about. */
		ul {
			--map-label-middle: calc(var(--map-row-gap) + var(--map-node-padding-block) + var(--viz-edge-stroke-width) + 0.5lh);
			display: block;
			margin: 0;
			padding: 0;
		}

		> ul {
			width: auto;
		}

		li {
			display: block;
			padding: var(--map-row-gap) 0 var(--map-row-gap) var(--map-reach);

			&::before {
				top: 0;
				bottom: 0;
			}

			&:first-child::before {
				top: 0;
			}

			&:last-child::before {
				bottom: auto;
				height: var(--map-label-middle);
			}

			&::after,
			&:not(:has(> ul))::after {
				position: absolute;
				top: var(--map-label-middle);
				left: 0;
				width: var(--map-reach);
			}
		}

		li > a,
		li > span {
			display: inline-block;
			margin-left: 0;
		}

		/* The first level: a row of columns that wraps */
		> ul > li > ul {
			display: flex;
			flex-wrap: wrap;
			gap: var(--space-large) calc(var(--space-large) * 1.5);
			align-items: start;
			margin-top: var(--space-large);
		}

		> ul > li > ul > li {
			padding: 0;

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

		> ul > li > ul > li > ul {
			margin-top: var(--map-row-gap);
		}

		> ul > li {
			padding: 0;

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