Timeline

.pds-timeline {
	--timeline-gap: var(--pds-spacing-s);
	--timeline-rail-color: var(--pds-color-border-separator);

	display: flex;
	flex-direction: column;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* The gap is padding on each entry (not a flex gap) so the rail can run
   through it without a break. */
.pds-timeline__entry {
	list-style: none;
	padding-block-end: var(--timeline-gap);
	position: relative;
}

.pds-timeline__entry:last-child {
	padding-block-end: 0;
}

/* Rail: a line from the bottom of one item's icon to the top of the next
   item's icon. Sizes are in em, so they follow the item's text size: the icon
   is 1em high and centered on the first line. A dividing line or a Chain of
   Thought in between has no `--joined` class, so the rail stops there. */
.pds-timeline--rail .pds-timeline__entry--joined::after {
	background-color: var(--timeline-rail-color);
	bottom: calc((1em - 1lh) / 2 + var(--pds-spacing-5xs));
	content: '';
	inset-inline-start: calc(0.5em - var(--pds-border-width-default) / 2);
	position: absolute;
	top: calc(1lh / 2 + 0.5em + var(--pds-spacing-5xs));
	width: var(--pds-border-width-default);
}