/*
 * Sticky side list (A6): one shared component for the article rail, the
 * Support options list and the Contact details column.
 *
 * An uppercase header on an ink rule, rows on hairlines, 16px text padded
 * 16 (D15). Each row has one leading slot, 22 wide, holding a number or an
 * icon, so labels align whichever it is. The active row is 600 in the brand
 * colour; an external row ends with the external glyph. On mobile it sits
 * above the content and collapses behind its header (a <details>).
 *
 *   <details class="vdt-side-list" open>
 *     <summary class="vdt-side-list__header">In this article <?= svg(…chevron-down.svg) ?></summary>
 *     <ol class="vdt-side-list__rows">
 *       <li><a class="vdt-side-list__row" aria-current="true" href="#…"><span class="vdt-side-list__slot">01</span><span class="vdt-side-list__label">…</span></a></li>
 *     </ol>
 *   </details>
 *
 * A plain <div> with the same classes works where nothing needs collapsing.
 */

@layer vdt.components {
	.vdt-side-list {
		display: block;
	}

	.vdt-side-list__header {
    /* re-align with main content */
    margin-top: calc(-1 * var(--vdt-space-12) - 1lh);
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--vdt-space-12);
		padding-bottom: var(--vdt-space-12);
		border-bottom: var(--vdt-rule-width) solid var(--vdt-rule);
		color: var(--vdt-text-heading);
		font-size: var(--vdt-size-label);
		font-weight: var(--vdt-weight-semibold);
		letter-spacing: var(--vdt-tracking-label);
		line-height: 1.3;
		text-transform: uppercase;
		list-style: none;
		cursor: default;
	}

	.vdt-side-list__header::-webkit-details-marker {
		display: none;
	}

	.vdt-side-list__header svg {
		display: none;
		width: var(--vdt-glyph-link);
		height: var(--vdt-glyph-link);
	}

	.vdt-side-list__rows {
		list-style: none;
		margin: 0;
	}

	.vdt-side-list__row {
		display: flex;
		align-items: flex-start;
		gap: var(--vdt-space-14);
		padding-block: var(--vdt-space-16);
		border-bottom: var(--vdt-rule-width) solid var(--vdt-hairline);
		color: var(--vdt-text-heading);
		font-size: var(--vdt-size-16);
		font-weight: var(--vdt-weight-medium);
		line-height: 1.35;
		text-decoration: none;
		transition: color var(--vdt-duration) var(--vdt-easing);
	}

	.vdt-side-list__row:hover {
		color: var(--vdt-link-hover);
	}

	.vdt-side-list__row[aria-current] {
		color: var(--vdt-text-brand);
		font-weight: var(--vdt-weight-semibold);
	}

	/* The leading slot: a number in 13 / 600 tabular, or a 22px icon. */
	.vdt-side-list__slot {
		flex: none;
		display: inline-flex;
		align-items: center;
		justify-content: flex-start;
		width: var(--vdt-icon);
		min-height: 1.35em;
		color: var(--vdt-icon-inactive);
		font-size: var(--vdt-size-13);
		font-weight: var(--vdt-weight-semibold);
		font-variant-numeric: tabular-nums;
		letter-spacing: var(--vdt-tracking-cite);
	}

	.vdt-side-list__row[aria-current] .vdt-side-list__slot,
	.vdt-side-list__row:hover .vdt-side-list__slot {
		color: currentColor;
	}

	.vdt-side-list__slot > svg {
		width: var(--vdt-icon);
		height: var(--vdt-icon);
	}

	.vdt-side-list__label {
		flex: 1;
	}

	/* The external glyph at the end of a row that leaves the site. */
	.vdt-side-list__row > svg:last-child {
		flex: none;
		width: var(--vdt-glyph-link);
		height: var(--vdt-glyph-link);
		margin-top: 0.2em;
		color: var(--vdt-icon-inactive);
	}

	/* ————————————————————————— Contact details variant ————————————————————————— */

	.vdt-side-list--details .vdt-side-list__rows {
		padding-top: var(--vdt-space-20);
	}

	.vdt-side-list--details .vdt-side-list__row {
		display: block;
		border: 0;
		padding-block: 0 var(--vdt-space-20);
	}

	/* ————————————————————————— Mobile ————————————————————————— */

	@media (max-width: 60rem) {
		details.vdt-side-list .vdt-side-list__header {
			cursor: pointer;
		}

		details.vdt-side-list .vdt-side-list__header svg {
			display: block;
			transition: rotate var(--vdt-duration) var(--vdt-easing);
		}

		details.vdt-side-list[open] .vdt-side-list__header svg {
			rotate: 180deg;
		}
	}

	/*
	 * Render the <details> with `open`. On desktop the summary is only a
	 * heading (no chevron, default cursor) and the list stays visible; on
	 * mobile the chevron appears and the reader can fold it away. Nothing
	 * needs JS, so a closed list on a resized window is the reader's choice.
	 */
}