/* Column List.

   Prefix: sxcl. Taken already: sxbf, sxbk, sxbo, sxcl, sxfd, sxh, sxhg, sxht,
   sxmap, sxmx, sxorb, sxp, sxpb, sxrad, sxs. Check that list before adding one.

   Two ways to fill the columns, and they are genuinely different components:

     down    CSS multi-column. The first column fills before the second starts,
             which is how a printed list reads and what the two-column lists on
             these pages are imitating by hand.
     across  Grid. Item two sits beside item one.

   Multi-column is the right tool for "down" and grid cannot do it without
   knowing the row count in advance, so both are here rather than one forced to
   do the other's job. */

.sxcl {
	--sxcl-cols: 2;
	--sxcl-col-gap: 48px;
	--sxcl-row-gap: 14px;
	--sxcl-indent: 12px;
	--sxcl-marker: var(--sxs-brand-600, #0B6E4F);
	--sxcl-marker-size: 14px;
	--sxcl-ink: var(--sxs-ink-700, #3A4A42);

	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--sxcl-ink);
}

/* The line that leads into the list. Held to a readable measure, because the
   containers on these pages run to 1200px and a sentence set across all of it
   is hard to track back to the next line. */
.sxcl__intro {
	max-width: 68ch;
	margin: 0 0 18px;
	font-size: 16px;
	line-height: 1.7;
	color: var(--sxs-ink-700, #3A4A42);
}

.sxcl.sxcl--down {
	column-count: var(--sxcl-cols);
	column-gap: var(--sxcl-col-gap);
}

.sxcl.sxcl--across {
	display: grid;
	grid-template-columns: repeat(var(--sxcl-cols), minmax(0, 1fr));
	column-gap: var(--sxcl-col-gap);
	row-gap: var(--sxcl-row-gap);
}

.sxcl .sxcl__item {
	display: flex;
	align-items: baseline;
	gap: var(--sxcl-indent);
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 15px;
	line-height: 1.6;
	/* A column break through the middle of an item is the one thing
	   multi-column gets wrong by default. */
	break-inside: avoid;
}

.sxcl.sxcl--down .sxcl__item {
	margin-bottom: var(--sxcl-row-gap);
}

.sxcl .sxcl__marker {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1em;
	color: var(--sxcl-marker);
	font-size: var(--sxcl-marker-size);
	line-height: 1;
	font-variant-numeric: tabular-nums;
	/* Baseline alignment is what keeps a marker level with the first line of a
	   wrapping item; a centred flex row would drift as the text grows. */
	align-self: baseline;
}

/* The dot is drawn, so its size and colour are properties rather than whatever
   the browser's ::marker happens to allow. */
.sxcl.sxcl--dot .sxcl__marker::before {
	content: "";
	display: block;
	width: 0.42em;
	height: 0.42em;
	border-radius: 50%;
	background: currentColor;
}

.sxcl.sxcl--number .sxcl__marker {
	font-weight: 600;
}

.sxcl .sxcl__marker svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
	display: block;
}

.sxcl .sxcl__text {
	min-width: 0;
}

.sxcl .sxcl__text--link {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color 200ms cubic-bezier(0.4, 0, 0.2, 1), color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.sxcl .sxcl__text--link:hover {
	color: var(--sxs-brand-600, #0B6E4F);
	border-bottom-color: currentColor;
}

.sxcl .sxcl__text--link:focus-visible {
	outline: 2px solid var(--sxs-brand-600, #0B6E4F);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.sxcl .sxcl__text--link {
		transition: none;
	}
}