/* Process Slider */
[data-steps-slider] {
	--steps-pin-safe-top: 96px;
	--steps-pin-safe-bottom: 32px;
	--steps-card-min-height: 569px;
	--steps-toggle-min-height: 101px;
	--steps-reveal-min-height: 254px;
	--steps-card-height: var(--steps-card-dynamic-height, var(--steps-card-min-height));
	--steps-toggle-height: var(--steps-toggle-dynamic-height, var(--steps-toggle-min-height));
	--steps-reveal-height: var(--steps-reveal-dynamic-height, var(--steps-reveal-min-height));
	--steps-summary-height: calc(var(--steps-card-height) - var(--steps-toggle-height));
	--steps-summary-open-height: calc(var(--steps-card-height) - var(--steps-reveal-height));
	position: relative;
}

[data-steps-stage],
[data-steps-pin],
[data-steps-viewport],
[data-steps-track],
[data-steps-item],
[data-steps-card],
[data-steps-summary] {
	box-sizing: border-box;
}

[data-steps-stage] {
	position: relative;
	overflow: visible;
	width: 100%;
}

/* An empty Description prop still renders the block and its flex gap;
   drop it so the heading keeps the 60px rhythm to the rail (HWW §3). */
.process-slider .description:empty {
	display: none;
}

[data-steps-pin] {
	position: relative;
	width: 100%;
	overflow: visible;
}

[data-steps-slider] .pin-spacer:has(> [data-steps-pin]) {
	background: var(--_system-colors---dark);
	box-shadow: 0 1px 0 var(--_system-colors---dark);
}

[data-steps-viewport] {
	overflow: visible;
	width: 100%;
}

[data-steps-track] {
	flex-wrap: nowrap;
	box-sizing: border-box;
	padding-inline: 0;
	will-change: transform;
}

[data-steps-slider][data-steps-mode="static"] [data-steps-track] {
	display: flex;
}

/* Three across, but min-width is deliberately left alone: it is the knob for the
   card's minimum width and belongs to the Designer. Setting it here would win on
   specificity and silently strike out whatever is set on the class. The track
   scrolls horizontally, so a larger min-width just shows fewer, wider cards. */
[data-steps-slider][data-steps-mode="static"] [data-steps-item] {
	flex: 0 0 calc((100% - 40px) / 3);
}

[data-steps-slider]:not([data-steps-mode="static"]) [data-steps-card],
[data-steps-slider]:not([data-steps-mode="static"]) [data-steps-toggle] {
	width: 100%;
}

[data-steps-slider]:not([data-steps-mode="static"]) [data-steps-card] {
	display: flex;
	flex-direction: column;
	height: var(--steps-card-height);
}

[data-steps-slider]:not([data-steps-mode="static"]) [data-steps-summary] {
	flex: 0 0 var(--steps-summary-height);
	height: var(--steps-summary-height);
	transition: flex-basis 360ms cubic-bezier(0.16, 1, 0.3, 1),
	height 360ms cubic-bezier(0.16, 1, 0.3, 1);
}

[data-steps-slider]:not([data-steps-mode="static"]) [data-steps-card].is-open [data-steps-summary] {
	flex-basis: var(--steps-summary-open-height);
	height: var(--steps-summary-open-height);
}


[data-steps-slider]:not([data-steps-mode="static"]) [data-steps-toggle] {
	appearance: none;
	border: 0;
	cursor: pointer;
	flex: 0 0 var(--steps-toggle-height);
	font: inherit;
	height: var(--steps-toggle-height);
}

[data-steps-slider]:not([data-steps-mode="static"]) [data-steps-toggle]:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
}

[data-steps-slider]:not([data-steps-mode="static"]) [data-steps-toggle][hidden] {
	display: none !important;
}

[data-steps-slider]:not([data-steps-mode="static"]) [data-steps-reveal] {
	display: grid;
	flex: 0 0 0;
	grid-template-rows: 0fr;
	height: 0;
	opacity: 0;
	transition: flex-basis 360ms cubic-bezier(0.16, 1, 0.3, 1),
	grid-template-rows 360ms cubic-bezier(0.16, 1, 0.3, 1),
	height 360ms cubic-bezier(0.16, 1, 0.3, 1),
	opacity 220ms ease;
}

/* The reveal height is the tallest panel across all steps, so a step without an
   outcome block centers its copy instead of leaving a gap at the bottom. */
[data-steps-slider]:not([data-steps-mode="static"]) [data-steps-reveal] > * {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 0;
	overflow: hidden;
}

[data-steps-slider]:not([data-steps-mode="static"]) [data-steps-card].is-open [data-steps-reveal] {
	flex-basis: var(--steps-reveal-height);
	grid-template-rows: 1fr;
	height: var(--steps-reveal-height);
	opacity: 1;
}

/* Keep this breakpoint in sync with MOTION_BREAKPOINT_PX in process-slider.js. */
@media (min-width: 992px) and (prefers-reduced-motion: no-preference) {
	[data-steps-slider].is-steps-ready [data-steps-intro] {
		will-change: transform, opacity;
	}

	[data-steps-slider]:not([data-steps-mode="static"]).is-steps-ready [data-steps-pin] {
		min-height: var(--steps-card-height);
	}

	[data-steps-slider]:not([data-steps-mode="static"]) [data-steps-card] .steps-card-title,
	[data-steps-slider]:not([data-steps-mode="static"]) [data-steps-card] .steps-number {
		transition: font-size 360ms cubic-bezier(0.16, 1, 0.3, 1),
		line-height 360ms cubic-bezier(0.16, 1, 0.3, 1);
	}

	/* No slider ancestor: the JS measuring clone lives in document.body. */
	[data-steps-card].is-open .steps-number {
		font-size: var(--_sizes---s--80);
	}
}

@media (min-width: 992px) and (max-height: 820px) and (prefers-reduced-motion: no-preference) {
	[data-steps-slider]:not([data-steps-mode="static"]) {
		--steps-card-min-height: 580px;
		--steps-card-height: min(
			var(--steps-card-dynamic-height, 580px),
			calc(100vh - var(--steps-pin-safe-top) - var(--steps-pin-safe-bottom))
		);
		--steps-intro-stage-gap: 48px;
	}

	/* Short viewports: tighten the open card so summary and reveal fit the capped
	   height. Scoped from the card, not the slider: the JS measures a clone of the
	   card in document.body, and these rules must apply to that clone too. */
	[data-steps-card] [data-steps-summary] {
		padding-top: 24px;
		padding-bottom: 24px;
	}

	[data-steps-card] .steps-card-title {
		margin-bottom: 12px;
	}

	[data-steps-card].is-open .steps-number {
		font-size: var(--_sizes---s--60);
		line-height: 1.15;
	}

	[data-steps-card] .steps-reveal-description,
	[data-steps-card] .steps-reveal-note {
		margin-top: 24px;
		margin-bottom: 24px;
	}

	[data-steps-card] .steps-reveal-outcome {
		margin-bottom: 24px;
	}

	[data-steps-slider]:not([data-steps-mode="static"]).is-steps-ready [data-steps-stage] {
		margin-top: var(--steps-intro-stage-gap);
	}

	[data-steps-slider]:not([data-steps-mode="static"]).is-steps-ready [data-steps-pin] {
		padding-top: 0 !important;
		padding-bottom: 24px !important;
	}

	[data-steps-slider]:not([data-steps-mode="static"]).is-steps-ready [data-steps-track] {
		align-items: flex-start;
	}

	[data-steps-slider]:not([data-steps-mode="static"]).is-steps-ready [data-steps-item] {
		align-self: flex-start;
		height: var(--steps-card-height);
	}
}

@media (max-width: 991px), (prefers-reduced-motion: reduce) {
	[data-steps-pin] {
		min-height: 0;
	}

	/* Native-scroll strip: the open card grows on its own, closed cards keep their
	   natural height instead of stretching to the tallest one in the row. */
	[data-steps-track] {
		align-items: flex-start;
	}

	[data-steps-viewport] {
		overflow: visible;
	}

	[data-steps-track] {
		overflow-x: auto;
		overflow-y: hidden;
		padding-inline: 0;
		transform: none !important;
		width: 100%;
		will-change: auto;
		-webkit-overflow-scrolling: touch;
	}

	[data-steps-slider]:not([data-steps-mode="static"]) [data-steps-card],
	[data-steps-slider]:not([data-steps-mode="static"]) [data-steps-summary],
	[data-steps-slider]:not([data-steps-mode="static"]) [data-steps-card].is-open [data-steps-summary],
	[data-steps-slider]:not([data-steps-mode="static"]) [data-steps-reveal],
	[data-steps-slider]:not([data-steps-mode="static"]) [data-steps-card].is-open [data-steps-reveal],
	[data-steps-slider]:not([data-steps-mode="static"]) [data-steps-toggle] {
		flex-basis: auto;
		height: auto;
	}
}

@media (max-width: 991px) {
	[data-steps-slider][data-steps-mode="static"] [data-steps-item] {
		flex-basis: 330px;
		max-width: 100%;
	}
}

[data-steps-slider].is-steps-native-scroll [data-steps-pin] {
	min-height: 0;
}

[data-steps-slider].is-steps-native-scroll [data-steps-viewport] {
	overflow: visible;
}

[data-steps-slider].is-steps-native-scroll [data-steps-track] {
	align-items: flex-start;
	overflow-x: auto;
	overflow-y: hidden;
	padding-inline: 0;
	transform: none !important;
	width: 100%;
	will-change: auto;
	-webkit-overflow-scrolling: touch;
}

[data-steps-slider]:not([data-steps-mode="static"]).is-steps-native-scroll [data-steps-card],
[data-steps-slider]:not([data-steps-mode="static"]).is-steps-native-scroll [data-steps-summary],
[data-steps-slider]:not([data-steps-mode="static"]).is-steps-native-scroll [data-steps-card].is-open [data-steps-summary],
[data-steps-slider]:not([data-steps-mode="static"]).is-steps-native-scroll [data-steps-reveal],
[data-steps-slider]:not([data-steps-mode="static"]).is-steps-native-scroll [data-steps-card].is-open [data-steps-reveal],
[data-steps-slider]:not([data-steps-mode="static"]).is-steps-native-scroll [data-steps-toggle] {
	flex-basis: auto;
	height: auto;
}

/* End Process Slider */