.nsc-speedbars {
	--nsc-sb-label-w: 150px;
	--nsc-sb-value-w: 90px;
	--nsc-sb-bar-h: 54px;
	--nsc-sb-bar-radius: 999px;
	--nsc-sb-bar-basic: #3CCBE9;
	--nsc-sb-bar-top: #3CCBE9;
	--nsc-sb-bar-bottom: #1A6CE7;
	width: 100%;
}

.nsc-speedbars__row {
	display: flex;
	align-items: center;
	margin-bottom: 24px;
}

.nsc-speedbars__row:last-child {
	margin-bottom: 0;
}

.nsc-speedbars__label {
	flex: 0 0 var(--nsc-sb-label-w);
	width: var(--nsc-sb-label-w);
	padding-right: 16px;
	box-sizing: border-box;
}

.nsc-speedbars__track {
	display: flex;
	align-items: center;
	flex: 1 1 auto;
	min-width: 0;
}

.nsc-speedbars__bar-area {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
}

/*
 * Flush at the left, rounded only on the right (border-radius's left
 * values are 0) — every bar starts from the same left edge and grows
 * rightward, matching the reference design, rather than a pill rounded
 * on both ends.
 */
.nsc-speedbars__bar {
	height: var(--nsc-sb-bar-h);
	border-radius: 0 var(--nsc-sb-bar-radius) var(--nsc-sb-bar-radius) 0;
	background-color: var(--nsc-sb-bar-basic);
	/* Starts at 0 (set inline by PHP) and grows to its data-target-width
	   once nanocelle-speed-comparison-bars.js flags the widget as in view —
	   the transition lives here so it's the one thing JS never has to set. */
	transition: width 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}

.nsc-speedbars__bar--featured {
	background: linear-gradient(180deg, var(--nsc-sb-bar-top) 0%, var(--nsc-sb-bar-bottom) 100%);
}

/*
 * A fixed-width reserved column, present on every row whether or not that
 * row actually shows a value label — so the bar-area (and therefore every
 * bar's 0-100% scale) lines up across rows regardless of which one row
 * happens to display "Nx".
 */
.nsc-speedbars__value-gutter {
	flex: 0 0 var(--nsc-sb-value-w);
	width: var(--nsc-sb-value-w);
	padding-left: 16px;
	box-sizing: border-box;
}

.nsc-speedbars__value {
	white-space: nowrap;
	opacity: 0;
	transition: opacity 0.6s ease;
}

.nsc-speedbars--in-view .nsc-speedbars__value {
	opacity: 1;
}

.nsc-speedbars__caption {
	margin-top: 20px;
}

.nsc-speedbars__caption-bold {
	margin-right: 4px;
}

/*
 * A side-by-side label eats into the bar's available width on a narrow
 * phone screen — stack the label above its own bar instead, full width,
 * so the bar itself gets the whole row's width to work with. No shared
 * axis/gridline scale to keep aligned here (unlike the Pipeline Timeline
 * widget), so this is just a straightforward flex-direction switch.
 */
@media (max-width: 767px) {
	.nsc-speedbars__row {
		flex-direction: column;
		align-items: stretch;
	}

	.nsc-speedbars__label {
		width: 100%;
		flex: 0 0 auto;
		padding-right: 0;
		padding-bottom: 8px;
	}

	.nsc-speedbars__track {
		width: 100%;
	}

	/*
	 * A strict proportional width (e.g. 4% for the slowest baseline row)
	 * renders as a barely-visible sliver once the bar-area itself is only
	 * a phone's width — this floor only actually affects whichever bars
	 * are naturally smaller than it (a bar already wider than 56px, like
	 * the featured one, ignores it entirely), so it's a general fix, not
	 * something hardcoded to "the bottom two" rows specifically.
	 */
	.nsc-speedbars__bar {
		min-width: 56px;
	}
}