/*
 * The Selection — what the customer has answered so far.
 * `.scratch/simpulse-checkout-selection/spec.md`.
 *
 * The checkout shows one panel at a time, so an answer given on one step was
 * invisible on the next: choose two riders and step two is a calendar with
 * nothing on it saying two. The Selection is that answer, pinned, travelling
 * with the customer to the last step.
 *
 * DRAWN TWICE, SHOWN ONCE. Under each step's own label, which is the reading a
 * wide screen gets; and as a single line, which is what the checkout falls back
 * to when a column is narrower than a date. Which one is seen is decided in
 * `pages/rezervacia.css`, because the thing that decides it is the width of the
 * checkout's five columns and not this component.
 *
 * NOT IN `steps.css`. That component is shared with the gift-voucher modal
 * (`template-parts/voucher/modal.php`), which has no answers to print. So the
 * answer is a Selection element that merely sits inside a step item, and the
 * shared indicator learns nothing about a checkout it is only half used by.
 *
 * NO MONEY HERE. The running total belongs to the footer bar and to nowhere
 * else: `shownTotal()` already reads from three sources, and a second place
 * that draws a figure is a second place the two can disagree.
 */

/* ------------------------------------------- the answer under a step's label */

.sp-selection__ans {
	font-family: var(--sp-font-display);
	font-style: italic;
	font-weight: 800;
	font-size: var(--sp-fs-md);
	line-height: var(--sp-lh-tight);
	text-transform: uppercase;
	color: var(--sp-text);
	/*
	 * An answer wraps; it is never elided. `.sp-step__label` may ellipsis
	 * because a step's name is recoverable from the panel below it — what the
	 * customer chose is not.
	 */
	overflow-wrap: break-word;
}

.sp-step.is-done .sp-selection__ans {
	color: var(--sp-text-78);
}

/* --------------------------------------------------- the one-line fallback */

.sp-selection {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--sp-2);
	margin: 0;
}

.sp-selection__chip {
	font-size: var(--sp-fs-sm);
	color: var(--sp-text);
}

.sp-selection__sep {
	color: var(--sp-text-disabled);
	/* The separator carries its own spaces, so they must survive collapsing. */
	white-space: pre;
}