@layer theme {
	/* a DELTA on top of the bar's unguarded base (20-shell.css), every width — no @media floor,
	 * fitChrome measures instead — docs/css.md "Toplayout: measured, not media-queried". */
	:root[data-layout="top"] .fs-sidebar {
		/* min-height not height: a long hostname wraps the capped brand onto a second line (20-shell.css) */
		min-height: var(--fs-bar-h);
		gap: var(--fs-space-3);
	}
	/* the stacked bar (.fs-bar-stack, set by fitChrome in fs-chrome.js, not a media query) IS the
	 * base bar, so the delta below skips it instead of restating the base values */
	:root[data-layout="top"] .fs-sidebar:not(.fs-bar-stack) {
		/* nowrap or flexbox wraps the BAR itself instead of the menu's own pills — the signal fitChrome measures */
		flex-wrap: nowrap;
		/* aligns the bar to .fs-content so the brand/menu line up with the headings below */
		padding: 0 max(20px, calc((100% - var(--fs-content-max)) / 2 + var(--fs-content-pad)));
	}

	/* flex:1 opens the gap pushing the right cluster to the column's edge */
	:root[data-layout="top"] .fs-sidebar:not(.fs-bar-stack) ul.nav {
		order: 2; flex: 1 1 auto; margin-inline-start: var(--fs-space-2);
	}
	:root[data-layout="top"] .fs-sidebar:not(.fs-bar-stack) #indicators,
	:root[data-layout="top"] .fs-sidebar:not(.fs-bar-stack) .fs-themerow,
	:root[data-layout="top"] .fs-sidebar:not(.fs-bar-stack) .fs-logout { order: 3; margin-inline-start: 0; }

	/* dropdown anchor/bridge/clamp live unguarded in 20-shell.css, not here (issue #19) */

	/* placement only: the strip's own show/hide (empty, single) lives in 20-shell.css */
	:root[data-layout="top"] .fs-modemenu { order: 4; flex: 1 1 100%; gap: var(--fs-space-1); }

	:root[data-layout="top"] .fs-content { padding-top: var(--fs-space-6); }
}