/*
 * Stage selector — the control strip at the top of the script-services index.
 * Two treatments from the build brief, chosen by the variant class on the root:
 *   .sd-stage--light  (2A)  white panel, red accent
 *   .sd-stage--dark   (2C)  ink panel, yellow accent
 * Every colour is a token below, so the two differ only in this block.
 */

.sd-stage--light {
	--sd-panel: #fff;
	--sd-border: #d8dcdf;
	--sd-accent: #db0039;
	--sd-reversed: #fff;
	--sd-baseline: #d8dcdf;
	--sd-dot: #c2c8cd;
	--sd-label-in: #14181d;
	--sd-label-out: #c2c8cd;
	--sd-readout: #8b949c;
	--sd-chip-border: #d8dcdf;
	--sd-divider: #eceeef;
	--sd-prompt: #db0039;
	--sd-ring: rgba(219, 0, 57, .12);
}

.sd-stage--dark {
	--sd-panel: #16202b;
	--sd-border: transparent;
	--sd-accent: #FDD34E;
	--sd-reversed: #16202b;
	--sd-baseline: #33424f;
	--sd-dot: #5c6b78;
	--sd-label-in: #fff;
	--sd-label-out: #5c6b78;
	--sd-readout: #7f8f9e;
	--sd-chip-border: #3b4a58;
	--sd-divider: #22303d;
	--sd-prompt: #FDD34E;
	--sd-ring: rgba(253, 211, 78, .16);
}

.sd-stage {
	--sd-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
	box-sizing: border-box;
	background: var(--sd-panel);
	border: 1px solid var(--sd-border);
	border-radius: 4px;
	margin: 0 0 28px;
	color: var(--sd-label-in);
}

.sd-stage *,
.sd-stage *::before,
.sd-stage *::after { box-sizing: border-box; }

.sd-stage__inner { padding: 24px 60px 20px; }

/* --- Top row: prompt + state readout ------------------------------------- */
.sd-stage__top {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin: 0 0 18px;
}

.sd-stage__prompt {
	font-family: var(--sd-mono);
	font-size: 10px;
	letter-spacing: .18em;
	font-weight: 700;
	color: var(--sd-prompt);
}

.sd-stage__readout {
	font-family: var(--sd-mono);
	font-size: 10px;
	letter-spacing: .14em;
	color: var(--sd-readout);
	text-align: right;
}

/* --- Rail ---------------------------------------------------------------- */
.sd-stage__rail {
	position: relative;
	height: 22px;
	margin: 0 8px;
	touch-action: none;
}

.sd-stage__baseline {
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	height: 1px;
	background: var(--sd-baseline);
	transform: translateY(-50%);
}

.sd-stage__band {
	position: absolute;
	top: 50%;
	height: 3px;
	background: var(--sd-accent);
	transform: translateY(-50%);
	transition: left 120ms ease, width 120ms ease;
}

.sd-stage__stop {
	position: absolute;
	top: 50%;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	border: 1px solid var(--sd-dot);
	background: var(--sd-panel);
	transform: translate(-50%, -50%);
}

.sd-stage__stop.is-in {
	border-color: var(--sd-accent);
	background: var(--sd-accent);
}

.sd-stage__handle {
	position: absolute;
	top: 50%;
	width: 16px;
	height: 16px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--sd-accent);
	box-shadow: 0 0 0 4px var(--sd-ring);
	transform: translate(-50%, -50%);
	cursor: grab;
	touch-action: none;
	z-index: 2;
}

.sd-stage__handle:active { cursor: grabbing; }

.sd-stage__handle:focus-visible {
	outline: 2px solid var(--sd-accent);
	outline-offset: 3px;
}

/* --- Stage labels -------------------------------------------------------- */
.sd-stage__labels {
	position: relative;
	height: 16px;
	margin: 8px 8px 0;
}

.sd-stage__label {
	position: absolute;
	top: 0;
	transform: translateX(-50%);
	font-family: var(--sd-mono);
	font-size: 10px;
	letter-spacing: .14em;
	white-space: nowrap;
	color: var(--sd-label-out);
	font-weight: 400;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}

.sd-stage__label.is-in {
	color: var(--sd-label-in);
	font-weight: 700;
}

/* --- Chips --------------------------------------------------------------- */
.sd-stage__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	/* The hairline that used to sit above the chips is gone; keep the air it
	   held so the row does not crowd the stage labels. */
	margin-top: 20px;
	transition: opacity 120ms ease;
}

.sd-stage__chip {
	display: flex;
	align-items: baseline;
	gap: 10px;
	padding: 7px 12px;
	border: 1px solid var(--sd-chip-border);
	border-radius: 3px;
	background: transparent;
	text-decoration: none;
	color: var(--sd-label-in);
}

.sd-stage__chip.is-rec {
	background: var(--sd-accent);
	border-color: var(--sd-accent);
	color: var(--sd-reversed);
}

.sd-stage__chip-tag {
	font-family: var(--sd-mono);
	font-size: 9px;
	letter-spacing: .16em;
	color: var(--sd-reversed);
	opacity: .7;
}

.sd-stage__chip-name {
	font-size: 14px;
	font-weight: 700;
	letter-spacing: -.01em;
	color: inherit;
}

.sd-stage__chip-price {
	font-family: var(--sd-mono);
	font-size: 10px;
	letter-spacing: .12em;
	color: var(--sd-readout);
}

.sd-stage__chip.is-rec .sd-stage__chip-price {
	color: var(--sd-reversed);
	opacity: .7;
}

.sd-stage__pointer {
	margin: 16px 0 0;
	font-size: 13px;
	color: var(--sd-readout);
}

.sd-stage__pointer a {
	color: var(--sd-prompt);
	font-weight: 600;
	text-decoration: none;
}

.sd-stage__pointer a:hover { text-decoration: underline; }

/* --- Filtered table rows ------------------------------------------------- */
.sd-services-row--item.sd-stage-hidden { display: none; }

.sd-services-row--item.sd-stage-rec {
	box-shadow: inset 3px 0 0 var(--sd-selector-accent, #db0039);
}

/* --- Responsive: below 900px only the two range-end labels ---------------- */
@media (max-width: 900px) {
	.sd-stage__inner { padding: 20px 20px 18px; }
	.sd-stage__label:not(.is-end) { display: none; }
}