/* program-progress-list — collapsible top-down list of modules + workshops
   used by /{program}/timeline. See:
   - templates/components/program-progress-list.php
   - templates/design-system/components/program-progress-list (specimen)

   Note: this list is chrome (nav-shaped), not prose. The live page renders
   inside <article class='program-student-page'> from program-student-layout,
   which makes the article-scoped typography rules in styles/typography.css
   apply (prose font, decimal counters, indent, li+li margins, max-width).
   None of those belong on this component, so we override explicitly here.
   See typography.css around line 269 for the source rules. */

.program-progress-list,
.timeline-workshops {
	list-style: none;
	padding-left: 0;
	margin-top: 0;
	max-width: none;
}

.program-progress-list li + li,
.timeline-workshops li + li {
	margin-top: 0;
}

.program-progress-list > li,
.timeline-workshops > li {
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	max-width: none;
	text-wrap: inherit;
}

/* $todo Temp structural styles — just spacing and hit targets.
   No color or decoration treatment yet. */

.program-progress-list {
	display: grid;
	gap: 1rem;
	margin-top: 1.5rem;

	summary {
		cursor: pointer;
		padding: 0.5rem 0;
	}

	.timeline-workshops {
		display: grid;
		gap: 0.25rem;
		padding-left: 1.5rem;
	}

	.timeline-workshop a {
		display: inline-block;
		padding: 0.25rem 0;
		color: var(--accent);
		text-decoration: underline;
	}
}