Milestone

/* Story furniture only: the amount summary is a placeholder for the screen's
   own body content, not part of the component. */
.milestone-example__summary {
	display: flex;
	flex-direction: column;
	gap: var(--pds-spacing-xs);
	margin: 0;
}

.milestone-example__summary-row {
	display: flex;
	gap: var(--pds-spacing-m);
	justify-content: space-between;
}

.milestone-example__summary-row dd,
.milestone-example__summary-row dt {
	margin: 0;
}

.milestone-example__summary-row dt {
	font-weight: inherit;
}

.milestone-example__summary-row--total {
	border-block-start: var(--pds-border-width-default) solid
		var(--pds-color-border-separator);
	margin-block-start: var(--pds-spacing-xs);
	padding-block-start: var(--pds-spacing-m);
}

.milestone-example__variants {
	display: flex;
	flex-direction: column;
	gap: var(--pds-spacing-2xl);
}

.milestone-example__label {
	color: var(--pds-color-foreground-default-secondary);
	margin: 0;
}

/* Room for the dots, which sit on the line left of the content. */
.milestone-example__canvas {
	max-width: calc(14 * var(--pds-spacing-4xl));
	padding: var(--pds-spacing-l);
	padding-inline-start: var(--pds-spacing-2xl);
}

/* The slot placeholder keeps the height of a small block of content. */
.milestone-example__slot {
	min-block-size: var(--pds-spacing-7xl);
}