diff --git a/packages/block-editor/src/components/background-image-control/index.js b/packages/block-editor/src/components/background-image-control/index.js
index 19ae858521643e..8251f1afb89b66 100644
--- a/packages/block-editor/src/components/background-image-control/index.js
+++ b/packages/block-editor/src/components/background-image-control/index.js
@@ -40,7 +40,7 @@ import { getResolvedValue } from '@wordpress/global-styles-engine';
  */
 import { hasBackgroundImageValue } from '../global-styles/background-panel';
 import {
-	InheritanceResetButton,
+	InheritanceOriginButton,
 	isGlobalStylesInheritanceEnabled,
 } from '../global-styles/inheritance';
 import { setImmutably } from '../../utils/object';
@@ -232,15 +232,16 @@ function BackgroundControlsPanel( {
 						/>
 						{ onReset &&
 							( hasLocalOverride ? (
-								<InheritanceResetButton
+								<InheritanceOriginButton
 									className="block-editor-global-styles-background-panel__reset"
-									onResetToInherited={ () => {
+									stylePath="background.backgroundImage"
+									label={ __( 'Background image' ) }
+									onReset={ () => {
 										onReset();
 										// Close the dropdown if open.
 										if ( isOpen ) {
 											onToggle();
 										}
-										// Focus the toggle button.
 										focusToggleButton( containerRef );
 									} }
 								/>
diff --git a/packages/block-editor/src/components/block-inspector/index.js b/packages/block-editor/src/components/block-inspector/index.js
index d584e02bc5753d..9befc92c159504 100644
--- a/packages/block-editor/src/components/block-inspector/index.js
+++ b/packages/block-editor/src/components/block-inspector/index.js
@@ -531,7 +531,10 @@ const BlockInspectorSingleBlock = ( {
 					<InspectorControls.Slot group="list" ref={ listViewRef } />
 					<ListViewContentPopover listViewRef={ listViewRef } />
 					{ ! isSectionBlock && (
-						<StyleInspectorSlots blockName={ blockName } />
+						<StyleInspectorSlots
+							blockName={ blockName }
+							clientId={ renderedBlockClientId }
+						/>
 					) }
 				</>
 			) }
diff --git a/packages/block-editor/src/components/colors-gradients/style.scss b/packages/block-editor/src/components/colors-gradients/style.scss
index 0a1ce17eedab73..4d1fc3c7077742 100644
--- a/packages/block-editor/src/components/colors-gradients/style.scss
+++ b/packages/block-editor/src/components/colors-gradients/style.scss
@@ -129,16 +129,13 @@ $swatch-gap: 12px;
 		}
 	}
 
+	// Space for the indicator and the contrast warning is reserved
+	// unconditionally. Widening the label only when no warning is showing made
+	// it reflow every time the selected colour crossed the contrast threshold.
 	.block-editor-panel-color-gradient-settings__color-name {
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
-		max-width: calc(100% - ($button-size-next-default-40px + $grid-unit-05));
-	}
-
-	// Reserve extra space for the always-visible contrast warning icon,
-	// which sits alongside the hover-revealed reset button.
-	> button.has-contrast-warning .block-editor-panel-color-gradient-settings__color-name {
 		max-width: calc(100% - ($button-size-next-default-40px + $button-size-small + $grid-unit));
 	}
 }
@@ -176,11 +173,15 @@ $swatch-gap: 12px;
 		opacity: 1;
 	}
 
-	// While a contrast warning is in effect the warning icon occupies the
-	// far-right slot, so the reset button shifts left to sit beside it.
-	.block-editor-panel-color-gradient-settings__dropdown.has-contrast-warning + & {
-		right: $button-size-small + $grid-unit-05;
-	}
+}
+
+// While an override indicator is present it holds the far-right slot, so the
+// contrast warning sits inboard of it. Keying this off the indicator rather
+// than the warning is what keeps the indicator still: it never moves when the
+// selected colour crosses the contrast threshold, and no space is reserved
+// beside it when no warning is showing.
+.has-local-override-from-global-styles .block-editor-panel-color-gradient-settings__contrast-warning {
+	right: $button-size-small + $grid-unit-05;
 }
 
 // Icon-only "Low contrast" warning shown to the right of the color
diff --git a/packages/block-editor/src/components/global-styles/background-panel.js b/packages/block-editor/src/components/global-styles/background-panel.js
index a974f56daada6d..8752389e48e351 100644
--- a/packages/block-editor/src/components/global-styles/background-panel.js
+++ b/packages/block-editor/src/components/global-styles/background-panel.js
@@ -386,6 +386,7 @@ export default function BackgroundImagePanel( {
 			{ showBackgroundColorControl && (
 				<ColorGradientDropdownItem
 					label={ __( 'Color' ) }
+					stylePath="color.background"
 					hasValue={ () => hasBackgroundColorValue( value ) }
 					resetValue={ resetBackgroundColor }
 					isShownByDefault={ defaultControls.backgroundColor }
@@ -433,6 +434,7 @@ export default function BackgroundImagePanel( {
 			{ showBackgroundGradientControl && (
 				<ColorGradientDropdownItem
 					label={ __( 'Gradient' ) }
+					stylePath="background.backgroundGradient"
 					hasValue={ () => hasBackgroundGradientValue( value ) }
 					resetValue={ resetGradient }
 					isShownByDefault={ defaultControls.gradient }
@@ -478,6 +480,7 @@ export default function BackgroundImagePanel( {
 			{ showLegacyColorGradientControl && (
 				<ColorGradientDropdownItem
 					label={ __( 'Gradient' ) }
+					stylePath="color.gradient"
 					hasValue={ () => hasLegacyColorGradientValue( value ) }
 					resetValue={ resetLegacyColorGradient }
 					isShownByDefault={ defaultControls.gradient }
diff --git a/packages/block-editor/src/components/global-styles/border-panel.js b/packages/block-editor/src/components/global-styles/border-panel.js
index 59444cf7bc1e9f..cbb7b0b164e6e6 100644
--- a/packages/block-editor/src/components/global-styles/border-panel.js
+++ b/packages/block-editor/src/components/global-styles/border-panel.js
@@ -391,6 +391,7 @@ export default function BorderPanel( {
 		>
 			{ ( showBorderWidth || showBorderColor ) && (
 				<InheritanceToolsPanelItem
+					stylePath="border"
 					{ ...inheritanceProps(
 						isBorderPlaceholder,
 						isDefinedBorder( value?.border ) &&
@@ -440,6 +441,7 @@ export default function BorderPanel( {
 			) }
 			{ showBorderRadius && (
 				<InheritanceToolsPanelItem
+					stylePath="border.radius"
 					{ ...inheritanceProps(
 						isBorderRadiusPlaceholder,
 						hasBorderRadius() && inheritedBorderRadius !== undefined
@@ -462,6 +464,7 @@ export default function BorderPanel( {
 			) }
 			{ hasShadowControl && (
 				<InheritanceToolsPanelItem
+					stylePath="shadow"
 					{ ...inheritanceProps(
 						isShadowPlaceholder,
 						hasShadow() && inheritedShadow !== undefined
diff --git a/packages/block-editor/src/components/global-styles/color-gradient-dropdown-item.js b/packages/block-editor/src/components/global-styles/color-gradient-dropdown-item.js
index 26a84b037981f7..516eac4ef46063 100644
--- a/packages/block-editor/src/components/global-styles/color-gradient-dropdown-item.js
+++ b/packages/block-editor/src/components/global-styles/color-gradient-dropdown-item.js
@@ -28,7 +28,7 @@ import ColorGradientControl from '../colors-gradients/control';
 import { unlock } from '../../lock-unlock';
 import {
 	getInheritanceProps,
-	InheritanceResetButton,
+	InheritanceOriginButton,
 	InheritanceToolsPanelItem,
 	isGlobalStylesInheritanceEnabled,
 } from './inheritance';
@@ -203,6 +203,7 @@ function ColorGradientTab( {
 // Typography panels for consistent color-style controls.
 export default function ColorGradientDropdownItem( {
 	label,
+	stylePath,
 	hasValue,
 	resetValue,
 	isShownByDefault,
@@ -263,14 +264,15 @@ export default function ColorGradientDropdownItem( {
 							</Button>
 							{ hasValue() &&
 								( hasLocalOverride ? (
-									<InheritanceResetButton
+									<InheritanceOriginButton
 										className="block-editor-panel-color-gradient-settings__reset"
-										onResetToInherited={ () => {
+										stylePath={ stylePath }
+										label={ label }
+										onReset={ () => {
 											resetValue();
 											if ( isOpen ) {
 												onToggle();
 											}
-											colorGradientDropdownButtonRef.current?.focus();
 										} }
 									/>
 								) : (
diff --git a/packages/block-editor/src/components/global-styles/color-panel.js b/packages/block-editor/src/components/global-styles/color-panel.js
index 08b6129418c34a..4b73a065e852e5 100644
--- a/packages/block-editor/src/components/global-styles/color-panel.js
+++ b/packages/block-editor/src/components/global-styles/color-panel.js
@@ -301,6 +301,7 @@ export default function ColorPanel( {
 	const items = [
 		showLinkPanel && {
 			key: 'link',
+			stylePath: 'elements.link.color.text',
 			label: __( 'Link' ),
 			hasValue: hasLink,
 			resetValue: resetLink,
@@ -461,6 +462,7 @@ export default function ColorPanel( {
 
 		items.push( {
 			key: name,
+			stylePath: `elements.${ name }.color.text`,
 			label: elementLabel,
 			hasValue: hasElement,
 			resetValue: resetElement,
diff --git a/packages/block-editor/src/components/global-styles/dimensions-panel.js b/packages/block-editor/src/components/global-styles/dimensions-panel.js
index dc8b229a81d4a4..fe4792f7ad6a8a 100644
--- a/packages/block-editor/src/components/global-styles/dimensions-panel.js
+++ b/packages/block-editor/src/components/global-styles/dimensions-panel.js
@@ -760,6 +760,7 @@ export default function DimensionsPanel( {
 			) }
 			{ showContentSizeControl && (
 				<InheritanceToolsPanelItem
+					stylePath="layout.contentSize"
 					{ ...inheritanceProps(
 						isContentSizePlaceholder,
 						hasUserSetContentSizeValue() &&
@@ -806,6 +807,7 @@ export default function DimensionsPanel( {
 			) }
 			{ showWideSizeControl && (
 				<InheritanceToolsPanelItem
+					stylePath="layout.wideSize"
 					{ ...inheritanceProps(
 						isWideSizePlaceholder,
 						hasUserSetWideSizeValue() &&
@@ -849,6 +851,7 @@ export default function DimensionsPanel( {
 			) }
 			{ showPaddingControl && (
 				<InheritanceToolsPanelItem
+					stylePath="spacing.padding"
 					hasValue={ hasPaddingValue }
 					label={ __( 'Padding' ) }
 					hasInlineEndToggle={ hasSpacingToggle(
@@ -903,6 +906,7 @@ export default function DimensionsPanel( {
 			) }
 			{ showMarginControl && (
 				<InheritanceToolsPanelItem
+					stylePath="spacing.margin"
 					hasValue={ hasMarginValue }
 					label={ __( 'Margin' ) }
 					hasInlineEndToggle={ hasSpacingToggle(
@@ -966,6 +970,7 @@ export default function DimensionsPanel( {
 			) }
 			{ showGapControl && (
 				<InheritanceToolsPanelItem
+					stylePath="spacing.blockGap"
 					hasValue={ hasGapValue }
 					label={ __( 'Block spacing' ) }
 					hasInlineEndToggle={ isAxialGap }
@@ -1042,6 +1047,7 @@ export default function DimensionsPanel( {
 			) }
 			{ showMinHeightControl && (
 				<InheritanceToolsPanelItem
+					stylePath="dimensions.minHeight"
 					{ ...inheritanceProps(
 						isMinHeightPlaceholder,
 						hasMinHeightValue() &&
@@ -1077,6 +1083,7 @@ export default function DimensionsPanel( {
 			) }
 			{ showMinWidthControl && (
 				<InheritanceToolsPanelItem
+					stylePath="dimensions.minWidth"
 					{ ...inheritanceProps(
 						isMinWidthPlaceholder,
 						hasMinWidthValue() &&
@@ -1111,6 +1118,7 @@ export default function DimensionsPanel( {
 			) }
 			{ showHeightControl && (
 				<InheritanceToolsPanelItem
+					stylePath="dimensions.height"
 					{ ...inheritanceProps(
 						isHeightPlaceholder,
 						hasHeightValue() && inheritedHeightValue !== undefined
@@ -1138,6 +1146,7 @@ export default function DimensionsPanel( {
 			) }
 			{ showWidthControl && (
 				<InheritanceToolsPanelItem
+					stylePath="dimensions.width"
 					{ ...inheritanceProps(
 						isWidthPlaceholder,
 						hasWidthValue() && inheritedWidthValue !== undefined
diff --git a/packages/block-editor/src/components/global-styles/filters-panel.js b/packages/block-editor/src/components/global-styles/filters-panel.js
index b143245ee09c40..b6c9a3722b7e27 100644
--- a/packages/block-editor/src/components/global-styles/filters-panel.js
+++ b/packages/block-editor/src/components/global-styles/filters-panel.js
@@ -33,7 +33,7 @@ import { setImmutably } from '../../utils/object';
 import {
 	getInheritanceProps,
 	InheritanceToolsPanelItem,
-	InheritanceResetButton,
+	InheritanceOriginButton,
 	isGlobalStylesInheritanceEnabled,
 } from './inheritance';
 
@@ -162,9 +162,11 @@ const renderToggle = ( duotone, resetConfig ) =>
 				</Button>
 				{ hasLocalValue &&
 					( hasLocalOverride ? (
-						<InheritanceResetButton
+						<InheritanceOriginButton
 							className="block-editor-panel-duotone-settings__reset"
-							onResetToInherited={ handleReset }
+							stylePath="filter.duotone"
+							label={ __( 'Duotone' ) }
+							onReset={ onReset }
 						/>
 					) : (
 						<Button
diff --git a/packages/block-editor/src/components/global-styles/inheritance/index.js b/packages/block-editor/src/components/global-styles/inheritance/index.js
index e5fad47cfadead..45c00114424376 100644
--- a/packages/block-editor/src/components/global-styles/inheritance/index.js
+++ b/packages/block-editor/src/components/global-styles/inheritance/index.js
@@ -8,11 +8,20 @@ import clsx from 'clsx';
  */
 import {
 	Button,
-	Icon as WCIcon,
+	Dropdown,
+	Rect,
+	SVG,
 	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
-import { reset as resetIcon } from '@wordpress/icons';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
+import { useCallback, useMemo, useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { useBlockEditContext } from '../../block-edit/context';
+import { useCascade, useCustomCssPaths } from '../style-origins/use-cascade';
+import OriginPopover from '../style-origins/origin-popover';
 
 /**
  * Whether the inspector surfaces inherited Global Styles values.
@@ -37,12 +46,11 @@ export const isGlobalStylesInheritanceEnabled = () =>
  * so its descendant label picks up the inherited-from-Global-Styles
  * visual treatment.
  *
- * When `isInherited` is true without a local override, the descendant
- * label text receives the inherited-from-Global-Styles treatment
- * (dotted underline). No dot is shown.
+ * When `isInherited` is true without a local override, nothing is marked —
+ * inheritance is the default and needs no treatment.
  *
- * When `hasLocalOverride` is true, a small reset dot is rendered as a
- * sibling of the control exposing a "Reset to inherited value" action.
+ * When `hasLocalOverride` is true, a small dot is rendered as a sibling of
+ * the control, opening the Style origins cascade for the property.
  *
  * The two states are mutually exclusive at the source. If both are passed,
  * only the local-override class is returned.
@@ -70,9 +78,11 @@ export function getInheritanceProps(
 	hasLocalOverride,
 	baseClassName
 ) {
+	// Inheritance is the unmarked default: a control showing an inherited value
+	// gets no treatment at all. Only a local override is marked. `isInherited`
+	// is still accepted and returned so callers need not change.
 	const inheritedOnly = !! isInherited && ! hasLocalOverride;
 	const className = clsx( baseClassName, {
-		'is-inherited-from-global-styles': inheritedOnly,
 		'has-local-override-from-global-styles': !! hasLocalOverride,
 	} );
 	return {
@@ -82,56 +92,171 @@ export function getInheritanceProps(
 	};
 }
 
+// Matches the colour, duotone and background popovers so the origin popover
+// sits in the same place they do, clear of the sidebar.
+//
+// Those popovers anchor to a full-width row, so `offset: 36` measures from the
+// sidebar's inner edge. This one's toggle is a 14px dot at the row's *right*
+// edge, so the same offset would leave the popover on top of the sidebar. The
+// anchor is therefore resolved to the enclosing panel row (see `setAnchor`),
+// which puts both popovers in the same coordinate space.
+const ORIGIN_POPOVER_PROPS = {
+	placement: 'left-start',
+	offset: 36,
+	shift: true,
+	// Grow to fit rather than capping the height and scrolling: a long cascade
+	// is short enough to show whole, and a scrollbar inside it reads as broken.
+	resize: false,
+};
+
+// Row that visually owns the control the indicator belongs to.
+const PANEL_ROW_SELECTOR = '.components-tools-panel-item';
+
 /**
- * Renders the small always-visible reset button shown next to a control
- * that holds a local override of an inherited Global Styles value. Used by
- * `<InheritanceToolsPanelItem>` and the color/gradient controls.
+ * The small always-visible dot shown next to a control that overrides an
+ * inherited Global Styles value.
  *
- * At rest the button shows a blue dot signalling the local override. On
- * hover/focus the dot morphs into the `reset` (dash) icon and the button
- * exposes a "Reset to inherited value" tooltip. Activating it clears the
- * override so the control falls back to its inherited value — the same
- * action the `ToolsPanel` menu performs via `onDeselect`.
+ * Activating it opens a popover with the property's cascade and a reset
+ * labelled with the value it would restore. It is deliberately not a
+ * reset-on-click: a destructive action behind a 14px target, with no indication
+ * of what it restores, is the thing this replaces.
  *
- * @param {Object}   props
- * @param {Function} props.onResetToInherited Reset handler.
- * @param {string}   [props.className]        Optional className for the button.
+ * @param {Object}    props
+ * @param {?string}   props.stylePath   Dot-path of the style this control sets
+ *                                      (e.g. `typography.fontSize`).
+ * @param {?Function} props.onReset     Clears the local override.
+ * @param {string}    [props.label]     Human label for the property.
+ * @param {string}    [props.className]
  *
- * @return {Element} The reset button.
+ * @return {Element} The indicator and its popover.
  */
-export function InheritanceResetButton( { onResetToInherited, className } ) {
+export function InheritanceOriginButton( {
+	stylePath,
+	onReset,
+	label,
+	className,
+} ) {
+	const { name, clientId } = useBlockEditContext();
+	const [ anchor, setAnchor ] = useState( null );
+	const { entries, blockTitle, variationLabels } = useCascade(
+		name,
+		clientId,
+		stylePath
+	);
+
+	// Resolve the anchor from the rendered button so the popover lines up with
+	// the whole control row rather than the dot at its edge. Falls back to the
+	// button itself outside a `ToolsPanel` (colour, duotone, background).
+	const setAnchorFromNode = useCallback( ( node ) => {
+		setAnchor( node ? node.closest( PANEL_ROW_SELECTOR ) ?? node : null );
+	}, [] );
+
+	const popoverProps = useMemo(
+		() => ( { ...ORIGIN_POPOVER_PROPS, ...( anchor ? { anchor } : {} ) } ),
+		[ anchor ]
+	);
+
 	return (
-		// Intentionally small (14×14) circular control; exempt from the
-		// 40px default-size enforcement rule.
-		// eslint-disable-next-line @wordpress/components-no-missing-40px-size-prop
-		<Button
-			__next40pxDefaultSize={ false }
-			label={ __( 'Reset to inherited value' ) }
-			// The button has children (the dot + reset icon), so the tooltip
-			// is not shown automatically; opt in explicitly.
-			showTooltip
-			className={ clsx(
-				'has-local-override-from-global-styles__reset',
-				className
+		<Dropdown
+			popoverProps={ popoverProps }
+			// Focus the popover itself rather than the first control inside it,
+			// so opening the cascade does not put a focus ring on "Clear".
+			focusOnMount
+			renderToggle={ ( { onToggle, isOpen } ) => (
+				// Intentionally small (24×24) circular control; exempt from the
+				// 40px default-size enforcement rule.
+				// eslint-disable-next-line @wordpress/components-no-missing-40px-size-prop
+				<Button
+					ref={ setAnchorFromNode }
+					__next40pxDefaultSize={ false }
+					label={
+						label
+							? sprintf(
+									/* translators: %s: Property name, e.g. "Font size". */
+									__( 'Where does %s come from?' ),
+									label
+							  )
+							: __( 'Where does this value come from?' )
+					}
+					// The button has children (the dot), so the tooltip is not
+					// shown automatically; opt in explicitly.
+					showTooltip
+					aria-expanded={ isOpen }
+					className={ clsx(
+						'has-local-override-from-global-styles__reset',
+						className
+					) }
+					onClick={ ( event ) => {
+						// Prevent the click from reaching any wrapping
+						// `<label htmlFor>` association, which would otherwise
+						// focus/activate the inner control.
+						event.preventDefault();
+						event.stopPropagation();
+						if ( ! isOpen ) {
+							// Dismiss any popover already open — a colour
+							// picker, say. `stopPropagation` above keeps this
+							// click from reaching their outside-click
+							// detection, and in the Global Styles sidebar they
+							// do not close on their own, so two popovers end up
+							// stacked at the same edge. Dispatching on the
+							// document body looks like a click outside to all
+							// of them; ours is not open yet, so it is
+							// unaffected.
+							const ownerDocument = event.view?.document;
+							ownerDocument?.body?.dispatchEvent(
+								new ownerDocument.defaultView.MouseEvent(
+									'mousedown',
+									{ bubbles: true }
+								)
+							);
+						}
+						onToggle();
+					} }
+				>
+					{ /*
+					 * The diamond from the Global Styles override-indicator
+					 * work (PR #80649): a 6×6 rounded square rotated -45°,
+					 * centred in a 24×24 box.
+					 */ }
+					<SVG
+						width="24"
+						height="24"
+						viewBox="0 0 24 24"
+						xmlns="http://www.w3.org/2000/svg"
+						aria-hidden="true"
+						className="has-local-override-from-global-styles__diamond"
+					>
+						<Rect
+							x="6.34315"
+							y="12"
+							width="8"
+							height="8"
+							rx="1"
+							transform="rotate(-45 6.34315 12)"
+							fill="currentColor"
+						/>
+					</SVG>
+				</Button>
 			) }
-			onClick={ ( event ) => {
-				// Prevent the click from reaching any wrapping
-				// `<label htmlFor>` association, which would otherwise
-				// focus/activate the inner control.
-				event.preventDefault();
-				event.stopPropagation();
-				onResetToInherited?.();
-			} }
-		>
-			<span
-				aria-hidden="true"
-				className="has-local-override-from-global-styles__dot"
-			/>
-			<WCIcon
-				className="has-local-override-from-global-styles__reset-icon"
-				icon={ resetIcon }
-			/>
-		</Button>
+			renderContent={ ( { onClose } ) => (
+				<OriginPopover
+					clientId={ clientId }
+					stylePath={ stylePath }
+					entries={ entries }
+					label={ label ?? __( 'This value' ) }
+					blockTitle={ blockTitle }
+					variationLabels={ variationLabels }
+					onReset={
+						onReset
+							? () => {
+									onReset();
+									onClose();
+							  }
+							: undefined
+					}
+				/>
+			) }
+		/>
 	);
 }
 
@@ -140,25 +265,25 @@ export function InheritanceResetButton( { onResetToInherited, className } ) {
  * from Global Styles or locally overridden. The two states are mutually
  * exclusive.
  *
- * - Inherited: the control label receives the inherited-from-Global-Styles
- *   treatment (dotted underline) via the `is-inherited-from-global-styles`
- *   class applied through `getInheritanceProps`. No dot is shown.
- * - Local override: a reset dot is rendered as a plain sibling of the control
- *   at the item's inline-end — never nested in the label — exposing the same
- *   one-click reset the `ToolsPanel` options menu performs via `onDeselect`.
+ * - Inherited: nothing is marked. Inheritance is the unmarked default.
+ * - Local override: a dot is rendered as a plain sibling of the control at the
+ *   item's inline-end — never nested in the label — opening the Style origins
+ *   cascade for this property. Resetting stays in the `ToolsPanel` options menu
+ *   (via `onDeselect`) and in the cascade view.
  *
- * Controls that render their own reset control next to a custom toggle (color,
- * background image) pass `showLocalOverrideActionsInLabel={ false }` so the
- * item does not render a second reset dot.
+ * Controls that render their own dot next to a custom toggle (color, background
+ * image) pass `showLocalOverrideActionsInLabel={ false }` so the item does not
+ * render a second dot.
  *
  * @param {Object}                    props
  * @param {?string}                   props.className                         Item className.
- * @param {boolean}                   props.isInherited                       Value is inherited at rest. Accepted so the `getInheritanceProps` spread does not leak onto the underlying `ToolsPanelItem`; the inherited treatment is applied via `className`.
+ * @param {boolean}                   props.isInherited                       Value is inherited at rest. Accepted so the `getInheritanceProps` spread does not leak onto the underlying `ToolsPanelItem`; it produces no treatment of its own.
  * @param {boolean}                   props.hasLocalOverride                  Local override is set.
  * @param {import('react').ReactNode} props.label                             Control label.
  * @param {?Function}                 props.onDeselect                        Reset handler.
  * @param {boolean}                   [props.showLocalOverrideActionsInLabel] Render the reset dot here (default true).
- * @param {boolean}                   [props.hasInlineEndToggle]              The control renders a 24x24 toggle (linked/unlink, units switch) at its inline-end; offset the reset dot to sit just to its inline-start (default false).
+ * @param {boolean}                   [props.hasInlineEndToggle]              The control renders a 24x24 toggle (linked/unlink, units switch) at its inline-end; offset the dot to sit just to its inline-start (default false).
+ * @param {?string}                   [props.stylePath]                       Dot-path of the style this control sets (e.g. `typography.fontSize`), used to open the matching cascade.
  * @param {import('react').ReactNode} props.children                          The control.
  *
  * @return {Element} The panel item.
@@ -166,37 +291,54 @@ export function InheritanceResetButton( { onResetToInherited, className } ) {
 export function InheritanceToolsPanelItem( {
 	className,
 	// Destructured (and unused) so the `getInheritanceProps` spread does not
-	// leak `isInherited` onto the underlying `ToolsPanelItem`. The inherited
-	// treatment is applied purely via `className`
-	// (`is-inherited-from-global-styles`).
+	// leak `isInherited` onto the underlying `ToolsPanelItem`. Inheritance
+	// carries no treatment of its own.
 	isInherited,
 	hasLocalOverride,
 	label,
 	onDeselect,
 	showLocalOverrideActionsInLabel = true,
 	hasInlineEndToggle = false,
+	stylePath,
 	children,
 	...rest
 } ) {
-	const showResetAffordance =
-		hasLocalOverride && showLocalOverrideActionsInLabel;
+	// Custom CSS overrides a property without ever touching its style path, so
+	// the panel's own `hasLocalOverride` cannot see it. Treat it as an override
+	// here, or the indicator never appears and the cascade that would explain
+	// the value is unreachable.
+	const customCssPaths = useCustomCssPaths();
+	const hasCustomCssOverride =
+		!! stylePath && Object.hasOwn( customCssPaths, stylePath );
+	const isOverridden = hasLocalOverride || hasCustomCssOverride;
+	const showOriginAffordance =
+		isOverridden && showLocalOverrideActionsInLabel;
 
 	return (
 		<ToolsPanelItem
-			className={ className }
+			className={ clsx( className, {
+				// Establishes the containing block the affordance is positioned
+				// against. Normally applied by `getInheritanceProps`, which is
+				// likewise blind to custom CSS.
+				'has-local-override-from-global-styles': hasCustomCssOverride,
+			} ) }
 			label={ label }
 			onDeselect={ onDeselect }
 			{ ...rest }
 		>
 			{ children }
-			{ showResetAffordance && (
+			{ showOriginAffordance && (
 				<div
 					className={ clsx( 'global-styles-inheritance-affordance', {
 						'global-styles-inheritance-affordance--offset-toggle':
 							hasInlineEndToggle,
 					} ) }
 				>
-					<InheritanceResetButton onResetToInherited={ onDeselect } />
+					<InheritanceOriginButton
+						stylePath={ stylePath }
+						label={ label }
+						onReset={ onDeselect }
+					/>
 				</div>
 			) }
 		</ToolsPanelItem>
diff --git a/packages/block-editor/src/components/global-styles/inheritance/style.scss b/packages/block-editor/src/components/global-styles/inheritance/style.scss
index c88a070c9be640..38948b89abf152 100644
--- a/packages/block-editor/src/components/global-styles/inheritance/style.scss
+++ b/packages/block-editor/src/components/global-styles/inheritance/style.scss
@@ -1,39 +1,14 @@
 @use "@wordpress/base-styles/variables" as *;
 
-// Inherited Global Styles values — visual treatment for inspector control
-// labels.
+// Inherited Global Styles values are the unmarked default: a control showing an
+// inherited value gets no visual treatment. Only a local override is marked,
+// with a diamond indicator rendered as a sibling at the item's inline-end.
 //
-// `.is-inherited-from-global-styles` marks controls displaying inherited
-// values: the label gets a dotted underline.
-// `.has-local-override-from-global-styles` marks controls that locally override
-// inherited values: a blue reset dot is rendered as a sibling at the item's
-// inline-end. The states are mutually exclusive.
-.is-inherited-from-global-styles {
-	// `.components-base-control__label` covers most controls (ToggleGroup,
-	// selects, the visible `<span>` label some controls render). Controls
-	// built on a bare `UnitControl`/`NumberControl` (Line height, Letter
-	// spacing, Columns, and unit-based dimension inputs) instead expose their
-	// visible label as `.components-input-control__label`, so it must be
-	// targeted too or those controls silently miss the inherited treatment.
-	.components-base-control__label,
-	.components-input-control__label {
-		text-decoration-line: underline;
-		text-decoration-style: dotted;
-		text-decoration-thickness: 1px;
-		text-underline-offset: 0.2em;
-	}
-
-	// These labels sit in truncated flex containers where an underline is
-	// clipped by `overflow: hidden`; a dotted bottom border stays visible.
-	.block-editor-panel-color-gradient-settings__color-name,
-	.block-editor-global-styles-background-panel__inspector-media-replace-title,
-	.block-editor-panel-duotone-settings__label {
-		border-bottom: 1px dotted currentColor;
-	}
-}
+// The at-rest dotted-underline label treatment was removed to match the
+// "nothing at rest, something on override" direction settled in PR #80649.
 
-// Local-override reset dot — a sibling of the control positioned at the item's
-// inline-end.
+// Containing block for the absolutely-positioned affordance below. Without it
+// the indicator resolves against a far-off ancestor and lands outside its row.
 .has-local-override-from-global-styles {
 	position: relative;
 }
@@ -48,16 +23,19 @@
 	justify-content: center;
 	pointer-events: none;
 
-	// Match the label line height so the shorter (14px) reset dot centers on
-	// the 16px label rather than pinning to its top.
+	// Height of the label's line box, NOT of the indicator. The wrapper is what
+	// gets centred, so sizing it to the 24px button pushes the indicator ~4px
+	// below the label it belongs to. The 24px button overflows this box
+	// symmetrically via `align-items: center`, which is what keeps its centre
+	// on the label's.
 	height: $grid-unit-20;
 
 	// Controls that render a 24px toggle at the item's inline-end (linked/
-	// unlink, units switch): shift the dot one toggle width plus an 8px gap
-	// toward the inline-start so it sits just to the left of that toggle and
-	// the two never overlap.
+	// unlink, units switch): shift the indicator one toggle width plus an 8px
+	// gap toward the inline-start so it sits just to the left of that toggle
+	// and the two never overlap.
 	&--offset-toggle {
-		inset-inline-end: calc(24px + 8px);
+		inset-inline-end: calc(#{$button-size-small} + #{$grid-unit-10});
 	}
 
 	.has-local-override-from-global-styles__reset {
@@ -68,9 +46,9 @@
 	}
 }
 
-// Local-override reset button. At rest it shows the blue dot signalling a local
-// override; on hover/focus the dot is swapped for the `reset` (dash) icon and a
-// "Reset to inherited value" tooltip.
+// Local-override indicator. Shows a filled diamond signalling that this control
+// overrides an inherited value; activating it opens the origin popover. The
+// diamond stays visible on hover — it is the affordance, not a placeholder.
 .has-local-override-from-global-styles__reset {
 	display: inline-flex !important;
 	align-items: center;
@@ -80,10 +58,12 @@
 	margin-inline-start: 6px;
 
 	// Override the default IconButton chrome so the trigger appears as a
-	// tight inline circle that never shifts the sibling label text.
-	min-width: 14px !important;
-	width: 14px !important;
-	height: 14px !important;
+	// tight inline circle that never shifts the sibling label text. Sized to
+	// `$button-size-small` so the 24x24 diamond SVG renders at its natural
+	// size — the size it was drawn for.
+	min-width: $button-size-small !important;
+	width: $button-size-small !important;
+	height: $button-size-small !important;
 	padding: 0 !important;
 	border-radius: 50% !important;
 	background: transparent !important;
@@ -104,12 +84,10 @@
 	&:focus {
 		background: transparent !important;
 
-		.has-local-override-from-global-styles__dot {
-			display: none;
-		}
-
-		.has-local-override-from-global-styles__reset-icon {
-			display: block;
+		// Grow the diamond slightly rather than replacing it, so the target
+		// never appears to empty out under the pointer.
+		.has-local-override-from-global-styles__diamond {
+			transform: scale(1.2);
 		}
 	}
 
@@ -136,7 +114,7 @@
 
 	// Shadow control context: the blue-dot override reset reuses the shadow
 	// remove-button slot, which is absolutely positioned and hover-revealed
-	// (`opacity: 0`). The override dot must stay visible, so re-assert
+	// (`opacity: 0`). The indicator must stay visible, so re-assert
 	// placement and force `opacity: 1` (this compound selector wins on
 	// specificity).
 	&.block-editor-global-styles__shadow-editor__remove-button {
@@ -150,7 +128,7 @@
 		opacity: 1;
 	}
 
-	// Reuses the hover-revealed remove-button slot; keep the override dot
+	// Reuses the hover-revealed remove-button slot; keep the indicator
 	// placed and always visible.
 	&.block-editor-panel-duotone-settings__reset {
 		position: absolute;
@@ -164,21 +142,18 @@
 	}
 }
 
-.has-local-override-from-global-styles__dot {
+.has-local-override-from-global-styles__diamond {
 	display: block;
-	width: 8px;
-	height: 8px;
-	background-color: var(--wp-admin-theme-color, #007cba);
-	border-radius: 50%;
-}
-
-// The dash icon revealed on hover/focus, centered over the dot's slot and
-// clipped to the circular button bounds so the box size stays stable.
-.has-local-override-from-global-styles__reset-icon {
-	display: none;
-	position: absolute;
-	top: 50%;
-	left: 50%;
-	transform: translate(-50%, -50%);
+	// Drawn as a 24x24 box; render it at that size so the diamond keeps the
+	// proportions it was designed with. `fill="currentColor"` picks up the
+	// admin theme colour set here.
+	width: $button-size-small;
+	height: $button-size-small;
 	color: var(--wp-admin-theme-color, #007cba);
+	transition: transform 0.1s ease-out;
+
+	@media (prefers-reduced-motion: reduce) {
+		transition: none;
+	}
 }
+
diff --git a/packages/block-editor/src/components/global-styles/inheritance/test/index.js b/packages/block-editor/src/components/global-styles/inheritance/test/index.js
index d0a434b6d8f37e..88faa61a248a2a 100644
--- a/packages/block-editor/src/components/global-styles/inheritance/test/index.js
+++ b/packages/block-editor/src/components/global-styles/inheritance/test/index.js
@@ -14,33 +14,61 @@ import { __experimentalToolsPanel as ToolsPanel } from '@wordpress/components';
  */
 import {
 	getInheritanceProps,
-	InheritanceResetButton,
+	InheritanceOriginButton,
 	InheritanceToolsPanelItem,
 } from '../';
 
-describe( 'InheritanceResetButton', () => {
-	test( 'renders an always-visible reset button labelled for the inherited value', () => {
-		render( <InheritanceResetButton onResetToInherited={ () => {} } /> );
+describe( 'InheritanceOriginButton', () => {
+	test( 'renders an always-visible indicator', () => {
+		render( <InheritanceOriginButton stylePath="typography.fontSize" /> );
 		expect(
 			screen.getByRole( 'button', {
-				name: 'Reset to inherited value',
+				name: /where does/i,
 			} )
 		).toBeVisible();
 	} );
 
-	test( 'invokes the reset handler when activated', async () => {
-		const onResetToInherited = jest.fn();
+	// The indicator opens the cascade; it must never reset on click.
+	test( 'does not reset when activated', async () => {
+		const onReset = jest.fn();
 		render(
-			<InheritanceResetButton onResetToInherited={ onResetToInherited } />
+			<InheritanceOriginButton
+				stylePath="typography.fontSize"
+				onReset={ onReset }
+			/>
 		);
 		await click(
-			screen.getByRole( 'button', { name: 'Reset to inherited value' } )
+			screen.getByRole( 'button', {
+				name: /where does/i,
+			} )
 		);
-		expect( onResetToInherited ).toHaveBeenCalledTimes( 1 );
+		expect( onReset ).not.toHaveBeenCalled();
+	} );
+
+	test( 'opens a popover exposing the reset for the overridden value', async () => {
+		const onReset = jest.fn();
+		render(
+			<InheritanceOriginButton
+				stylePath="typography.fontSize"
+				label="Size"
+				onReset={ onReset }
+			/>
+		);
+		await click(
+			screen.getByRole( 'button', {
+				name: /where does/i,
+			} )
+		);
+		const reset = screen.getByRole( 'button', {
+			name: /^(Reset to|Clear)/,
+		} );
+		expect( reset ).toBeVisible();
+		await click( reset );
+		expect( onReset ).toHaveBeenCalledTimes( 1 );
 	} );
 
 	test( 'does not expose a menu or a push-to-Global-Styles action', () => {
-		render( <InheritanceResetButton onResetToInherited={ () => {} } /> );
+		render( <InheritanceOriginButton stylePath="typography.fontSize" /> );
 		expect( screen.queryByRole( 'menu' ) ).not.toBeInTheDocument();
 		expect(
 			screen.queryByRole( 'menuitem', { name: /Make default/ } )
@@ -56,12 +84,10 @@ describe( 'getInheritanceProps', () => {
 		} );
 	} );
 
-	test( 'returns ONLY the inherited className when isInherited is set', () => {
-		// The inherited state is conveyed purely through the className hook
-		// (`is-inherited-from-global-styles`), which the SCSS uses to apply
-		// the dotted-underline label treatment. No dot is rendered.
+	test( 'emits no className for the inherited state', () => {
+		// Inheritance is the unmarked default: no class hook, no treatment.
+		// The flag is still returned so callers need not change.
 		expect( getInheritanceProps( true, false ) ).toEqual( {
-			className: 'is-inherited-from-global-styles',
 			isInherited: true,
 			hasLocalOverride: false,
 		} );
@@ -104,7 +130,6 @@ describe( 'getInheritanceProps', () => {
 		} );
 		// Truthy non-boolean
 		expect( getInheritanceProps( 'inherited', 0 ) ).toEqual( {
-			className: 'is-inherited-from-global-styles',
 			isInherited: true,
 			hasLocalOverride: false,
 		} );
@@ -115,9 +140,9 @@ describe( 'getInheritanceProps', () => {
 		} );
 	} );
 
-	test( 'merges a base className with the inherited class hook', () => {
+	test( 'passes a base className through untouched in the inherited state', () => {
 		expect( getInheritanceProps( true, false, 'single-column' ) ).toEqual( {
-			className: 'single-column is-inherited-from-global-styles',
+			className: 'single-column',
 			isInherited: true,
 			hasLocalOverride: false,
 		} );
@@ -159,14 +184,15 @@ describe( 'InheritanceToolsPanelItem inherited state', () => {
 		);
 	}
 
-	// The SCSS treatment keys off the label class, and controls on a bare
-	// `UnitControl`/`NumberControl` expose `input-control__label` rather than
-	// the usual `base-control__label`, so guard both.
+	// Inheritance is the unmarked default, so an inherited control must carry
+	// no treatment hook at all. Both label archetypes are covered because a
+	// bare `UnitControl`/`NumberControl` exposes `input-control__label` rather
+	// than the usual `base-control__label`.
 	test.each( [
 		[ 'base-control', 'components-base-control__label' ],
 		[ 'input-control', 'components-input-control__label' ],
 	] )(
-		'nests the %s label inside the inherited-from-global-styles item',
+		'leaves the %s label unmarked in the inherited state',
 		( _name, labelClassName ) => {
 			renderInheritedItem( 'Line height', labelClassName );
 			const label = screen.getByText( 'Line height' );
@@ -174,21 +200,19 @@ describe( 'InheritanceToolsPanelItem inherited state', () => {
 			expect(
 				// eslint-disable-next-line testing-library/no-node-access
 				label.closest( '.is-inherited-from-global-styles' )
-			).not.toBeNull();
+			).toBeNull();
 		}
 	);
 
 	test( 'does not render a reset dot in the inherited state', () => {
 		renderInheritedItem( 'Line height', 'components-base-control__label' );
 		expect(
-			screen.queryByRole( 'button', {
-				name: 'Reset to inherited value',
-			} )
+			screen.queryByRole( 'button', { name: /where does/i } )
 		).not.toBeInTheDocument();
 	} );
 } );
 
-describe( 'InheritanceToolsPanelItem local-override reset dot', () => {
+describe( 'InheritanceToolsPanelItem local-override origin dot', () => {
 	function renderItem( props ) {
 		return render(
 			<ToolsPanel label="Panel" panelId="panel">
@@ -213,7 +237,7 @@ describe( 'InheritanceToolsPanelItem local-override reset dot', () => {
 			onDeselect: () => {},
 		} );
 		const resetButton = screen.getByRole( 'button', {
-			name: 'Reset to inherited value',
+			name: /where does/i,
 		} );
 		expect( resetButton ).toBeVisible();
 
@@ -234,25 +258,27 @@ describe( 'InheritanceToolsPanelItem local-override reset dot', () => {
 			onDeselect: () => {},
 		} );
 		expect(
-			screen.queryByRole( 'button', {
-				name: 'Reset to inherited value',
-			} )
+			screen.queryByRole( 'button', { name: /where does/i } )
 		).not.toBeInTheDocument();
 	} );
 
-	test( 'the reset dot invokes the deselect handler', async () => {
+	// The dot used to reset on click. It now opens the Style origins cascade
+	// instead, where the reset is shown next to the value it would restore.
+	test( 'the dot does not reset the value', async () => {
 		const onDeselect = jest.fn();
 		renderItem( { hasLocalOverride: true, onDeselect } );
 		await click(
-			screen.getByRole( 'button', { name: 'Reset to inherited value' } )
+			screen.getByRole( 'button', {
+				name: /where does/i,
+			} )
 		);
-		expect( onDeselect ).toHaveBeenCalled();
+		expect( onDeselect ).not.toHaveBeenCalled();
 	} );
 
 	test( 'does not offset the reset dot by default', () => {
 		renderItem( { hasLocalOverride: true, onDeselect: () => {} } );
 		const resetButton = screen.getByRole( 'button', {
-			name: 'Reset to inherited value',
+			name: /where does/i,
 		} );
 		const affordance =
 			// eslint-disable-next-line testing-library/no-node-access
@@ -269,7 +295,7 @@ describe( 'InheritanceToolsPanelItem local-override reset dot', () => {
 			onDeselect: () => {},
 		} );
 		const resetButton = screen.getByRole( 'button', {
-			name: 'Reset to inherited value',
+			name: /where does/i,
 		} );
 		const affordance =
 			// eslint-disable-next-line testing-library/no-node-access
diff --git a/packages/block-editor/src/components/global-styles/inherited-value-context.js b/packages/block-editor/src/components/global-styles/inherited-value-context.js
index e4f0a16c2f9e20..599acd4c892581 100644
--- a/packages/block-editor/src/components/global-styles/inherited-value-context.js
+++ b/packages/block-editor/src/components/global-styles/inherited-value-context.js
@@ -237,7 +237,7 @@ function useVariationAndElements( blockName, className ) {
  * @param {?string} blockName       Selected block name (e.g. `core/heading`).
  * @param {?string} className       Block `className` used to detect an applied variation.
  * @param {?Object} [selectedState] Selected block style state (`{ viewport, pseudo }`), or null for the default state.
- * @return {{ value: Object, sources: Object }} Merged panel-scoped payload and source map.
+ * @return {{ value: Object, sources: Object, cascade: Object }} Merged panel-scoped payload, winning-source map, and full per-path cascade.
  */
 export function useResolvedStyle( blockName, className, selectedState = null ) {
 	const { variationName, headingLevel } = useVariationAndElements(
@@ -252,7 +252,7 @@ export function useResolvedStyle( blockName, className, selectedState = null ) {
 			return NO_RESOLVED_STYLE;
 		}
 		if ( ! blockName ) {
-			return { value: {}, sources: {} };
+			return { value: {}, sources: {}, cascade: {} };
 		}
 		return resolveStyle( globalStyles, {
 			blockName,
diff --git a/packages/block-editor/src/components/global-styles/shadow-panel-components.js b/packages/block-editor/src/components/global-styles/shadow-panel-components.js
index 7fb907c3137cc1..92a9f63002f9d7 100644
--- a/packages/block-editor/src/components/global-styles/shadow-panel-components.js
+++ b/packages/block-editor/src/components/global-styles/shadow-panel-components.js
@@ -25,7 +25,7 @@ import { Tooltip } from '@wordpress/ui';
 /**
  * Internal dependencies
  */
-import { InheritanceResetButton } from './inheritance';
+import { InheritanceOriginButton } from './inheritance';
 
 /**
  * Shared reference to an empty array for cases where it is important to avoid
@@ -202,9 +202,11 @@ function renderShadowToggle( shadow, onShadowChange, resetConfig ) {
 				</Button>
 				{ hasLocalValue &&
 					( hasLocalOverride ? (
-						<InheritanceResetButton
+						<InheritanceOriginButton
 							className="block-editor-global-styles__shadow-editor__remove-button"
-							onResetToInherited={ handleReset }
+							stylePath="shadow"
+							label={ __( 'Drop shadow' ) }
+							onReset={ onReset }
 						/>
 					) : (
 						<Button
diff --git a/packages/block-editor/src/components/global-styles/style-origins/helpers.js b/packages/block-editor/src/components/global-styles/style-origins/helpers.js
new file mode 100644
index 00000000000000..1985acd59ec73c
--- /dev/null
+++ b/packages/block-editor/src/components/global-styles/style-origins/helpers.js
@@ -0,0 +1,404 @@
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+
+/**
+ * Shared helpers for presenting the Global Styles cascade. Used by the origin
+ * popover opened from a control's override indicator and by the inline origin
+ * trace shown inside color popovers, so both describe an origin the same way.
+ */
+
+// Object-valued leaves that are a single atomic definition and must not be
+// descended into when flattening. Mirrors `ATOMIC_OBJECT_KEYS` in the engine.
+const ATOMIC_OBJECT_KEYS = new Set( [ 'backgroundImage' ] );
+
+/**
+ * Flattens a style tree into `{ 'dot.path': value }`, stopping at primitives,
+ * arrays, and atomic object leaves.
+ *
+ * @param {?Object} tree   Style tree.
+ * @param {string}  prefix Accumulated dot-path prefix.
+ * @param {Object}  out    Accumulator.
+ * @return {Object} Flat map of dot-path to leaf value.
+ */
+export function flattenStyleTree( tree, prefix = '', out = {} ) {
+	if ( ! tree || typeof tree !== 'object' || Array.isArray( tree ) ) {
+		return out;
+	}
+	for ( const key of Object.keys( tree ) ) {
+		const value = tree[ key ];
+		const path = prefix ? `${ prefix }.${ key }` : key;
+		if (
+			value !== null &&
+			typeof value === 'object' &&
+			! Array.isArray( value ) &&
+			! ATOMIC_OBJECT_KEYS.has( key )
+		) {
+			flattenStyleTree( value, path, out );
+		} else if (
+			path !== 'css' &&
+			value !== undefined &&
+			value !== '' &&
+			value !== null
+		) {
+			out[ path ] = value;
+		}
+	}
+	return out;
+}
+
+/**
+ * Splits a CSS length into its number and unit, or returns `null` when the
+ * value is not a plain length (a `calc()`, a keyword, a custom property).
+ *
+ * @param {string} value CSS value.
+ * @return {?{number: number, unit: string}} Parsed length.
+ */
+function parseLength( value ) {
+	const match = String( value )
+		.trim()
+		.match( /^(-?\d*\.?\d+)([a-z%]*)$/i );
+	return match
+		? { number: parseFloat( match[ 1 ] ), unit: match[ 2 ] }
+		: null;
+}
+
+/**
+ * Splits a CSS argument list on top-level commas, leaving nested calls intact.
+ *
+ * @param {string} args Argument list, without the surrounding parentheses.
+ * @return {string[]} Arguments.
+ */
+function splitCssArguments( args ) {
+	const parts = [];
+	let depth = 0;
+	let buffer = '';
+	for ( const character of args ) {
+		if ( character === '(' ) {
+			depth += 1;
+		} else if ( character === ')' ) {
+			depth -= 1;
+		} else if ( character === ',' && depth === 0 ) {
+			parts.push( buffer.trim() );
+			buffer = '';
+			continue;
+		}
+		buffer += character;
+	}
+	parts.push( buffer.trim() );
+	return parts;
+}
+
+/**
+ * Renders a leaf value compactly enough for a single sidebar row.
+ *
+ * @param {*} value Leaf value.
+ * @return {string} Display string.
+ */
+export function formatValue( value ) {
+	if ( value === undefined || value === null || value === '' ) {
+		return '—';
+	}
+	if ( typeof value === 'string' || typeof value === 'number' ) {
+		// Preset references are long and mostly boilerplate; the slug at the
+		// end is the part that identifies the value. Both the CSS custom
+		// property form and the `var:preset|…` attribute form appear here.
+		const cssVar = String( value ).match(
+			/^var\(\s*--wp--preset--[a-z-]+--([a-z0-9-]+)\s*\)$/i
+		);
+		if ( cssVar ) {
+			return cssVar[ 1 ];
+		}
+		const presetRef = String( value ).match(
+			/^var:preset\|[a-z-]+\|([a-z0-9-]+)$/i
+		);
+		if ( presetRef ) {
+			return presetRef[ 1 ];
+		}
+
+		// Fluid typography emits `clamp( min, preferred, max )`, which runs to
+		// 50-odd characters and dominates the row. The preferred term is a
+		// viewport formula nobody reads; the useful part is the range it moves
+		// between, so show that.
+		const clamped = String( value ).match( /^clamp\((.*)\)$/is );
+		if ( clamped ) {
+			const args = splitCssArguments( clamped[ 1 ] );
+			if ( args.length === 3 ) {
+				const min = parseLength( args[ 0 ] );
+				const max = parseLength( args[ 2 ] );
+				// Both ends in the same unit is the usual case, and naming the
+				// unit twice is what pushed the row past the column. State it
+				// once, at the end, the way a range normally reads.
+				if ( min && max && min.unit === max.unit && min.unit ) {
+					return `${ min.number } – ${ max.number }${ min.unit }`;
+				}
+				return `${ args[ 0 ] } – ${ args[ 2 ] }`;
+			}
+		}
+
+		return String( value );
+	}
+	if ( Array.isArray( value ) ) {
+		return value.join( ', ' );
+	}
+	if ( typeof value === 'object' ) {
+		if ( value.url ) {
+			return value.title || value.url.split( '/' ).pop();
+		}
+		return JSON.stringify( value );
+	}
+	return String( value );
+}
+
+/**
+ * Composes the human label for a cascade layer. The engine deliberately emits
+ * structural metadata rather than a pre-built string, so the breadcrumb is
+ * assembled (and translated) here, where the block registry is available.
+ *
+ * @param {Object}  entry           Cascade entry.
+ * @param {?string} entry.layer     Layer identifier.
+ * @param {?string} entry.element   Root element name, for element layers.
+ * @param {?string} entry.variation Variation slug, for variation layers.
+ * @param {string}  blockTitle      Registered title of the selected block.
+ * @param {Object}  variationLabels Map of variation slug to registered label.
+ * @return {string} Breadcrumb label.
+ */
+export function getLayerLabel(
+	{ layer, element, variation },
+	blockTitle,
+	variationLabels
+) {
+	switch ( layer ) {
+		case 'local':
+			/*
+			 * Every layer here applies to this block; what separates them is
+			 * how far each one reaches. So the labels name scope — "Just this
+			 * block" against "All Paragraph blocks" and "Site-wide" — rather
+			 * than repeating "block" with no contrast.
+			 */
+			return __( 'Just this block' );
+		case 'localCss':
+			return __( 'Custom CSS' );
+		case 'root':
+			/*
+			 * Deliberately not "Root", which describes the data structure
+			 * rather than anything the user recognises.
+			 *
+			 * This layer is the site's top-level Styles: everything set
+			 * without picking a block. It cannot currently be split into "the
+			 * theme's defaults" versus "what you changed" — the editor merges
+			 * those before the block editor receives them — so the wording has
+			 * to stay true for both.
+			 */
+			return __( 'Site-wide' );
+		case 'element':
+			return sprintf(
+				/* translators: %s: Element name, e.g. "Button". */
+				__( '%s element' ),
+				element
+					? element.charAt( 0 ).toUpperCase() + element.slice( 1 )
+					: __( 'Unknown' )
+			);
+		case 'block':
+			return sprintf(
+				/* translators: %s: Block title, e.g. "Group". */
+				__( 'All %s blocks' ),
+				blockTitle
+			);
+		case 'blockVariation':
+			return sprintf(
+				/* translators: %s: Block style variation name, e.g. "Subtitle". */
+				__( '%s style' ),
+				variationLabels[ variation ] ?? variation
+			);
+		default:
+			return layer;
+	}
+}
+
+/**
+ * Builds the per-path cascade rows, folding the block's own local styles in as
+ * the highest layer. The engine resolves the Global Styles layers only; a local
+ * override lives in block attributes and is layered on here.
+ *
+ * @param {Object}  cascade     Per-path cascade from the engine.
+ * @param {Object}  localStyles The block's own `style` attribute.
+ * @param {?string} customCss   The block's `style.css` attribute.
+ * @return {Object} Map of dot-path to ordered cascade entries.
+ */
+export function withLocalOverrides( cascade, localStyles, customCss ) {
+	const local = flattenStyleTree( localStyles );
+	// Custom CSS is emitted after the block's own styles and usually carries
+	// `!important`, so it sits at the top of the cascade.
+	const customDeclarations = getCustomCssDeclarations( customCss );
+	const paths = new Set( [
+		...Object.keys( cascade ),
+		...Object.keys( local ),
+		...Object.keys( customDeclarations ),
+	] );
+	const result = {};
+	for ( const path of paths ) {
+		const inherited = ( cascade[ path ] ?? [] ).map( ( entry ) => ( {
+			...entry,
+		} ) );
+		if ( Object.hasOwn( local, path ) ) {
+			for ( const entry of inherited ) {
+				entry.isWinner = false;
+			}
+			inherited.push( {
+				layer: 'local',
+				value: local[ path ],
+				isWinner: true,
+			} );
+		}
+		if ( Object.hasOwn( customDeclarations, path ) ) {
+			for ( const entry of inherited ) {
+				entry.isWinner = false;
+			}
+			inherited.push( {
+				layer: 'localCss',
+				value: customDeclarations[ path ],
+				isWinner: true,
+			} );
+		}
+		if ( inherited.length > 0 ) {
+			result[ path ] = inherited;
+		}
+	}
+	return result;
+}
+
+/**
+ * Folds a block's preset attributes into its `style` tree.
+ *
+ * Preset selections are not stored under `style`: choosing a palette colour
+ * saves `textColor: 'primary'`, a preset size saves `fontSize: 'large'`, and so
+ * on. Reading `attributes.style` alone therefore misses them, and a locally set
+ * value looks inherited. This mirrors the per-hook `attributesToStyle` helpers
+ * (see `hooks/typography.js`) so origin reporting agrees with the controls.
+ *
+ * @param {?Object} attributes Block attributes.
+ * @return {Object} Style tree including preset-derived values.
+ */
+export function attributesToStyleTree( attributes ) {
+	if ( ! attributes ) {
+		return {};
+	}
+	const {
+		style,
+		fontFamily,
+		fontSize,
+		textColor,
+		backgroundColor,
+		gradient,
+	} = attributes;
+	const typography = {
+		...style?.typography,
+		...( fontFamily
+			? { fontFamily: `var:preset|font-family|${ fontFamily }` }
+			: {} ),
+		...( fontSize
+			? { fontSize: `var:preset|font-size|${ fontSize }` }
+			: {} ),
+	};
+	const color = {
+		...style?.color,
+		...( textColor ? { text: `var:preset|color|${ textColor }` } : {} ),
+		...( backgroundColor
+			? { background: `var:preset|color|${ backgroundColor }` }
+			: {} ),
+		...( gradient
+			? { gradient: `var:preset|gradient|${ gradient }` }
+			: {} ),
+	};
+	return {
+		...style,
+		...( Object.keys( typography ).length ? { typography } : {} ),
+		...( Object.keys( color ).length ? { color } : {} ),
+	};
+}
+
+// CSS properties a block's own custom CSS can declare that map onto a style
+// path the cascade already tracks. Only these can be attributed; anything else
+// in custom CSS is left to the computed-value check to flag generically.
+const STYLE_PATH_BY_CSS_PROPERTY = {
+	'font-size': 'typography.fontSize',
+	'font-weight': 'typography.fontWeight',
+	'font-style': 'typography.fontStyle',
+	'font-family': 'typography.fontFamily',
+	'line-height': 'typography.lineHeight',
+	'letter-spacing': 'typography.letterSpacing',
+	'text-transform': 'typography.textTransform',
+	'text-decoration': 'typography.textDecoration',
+	'text-align': 'typography.textAlign',
+	color: 'color.text',
+	'background-color': 'color.background',
+	'border-radius': 'border.radius',
+	'border-width': 'border.width',
+	'border-style': 'border.style',
+	'border-color': 'border.color',
+	padding: 'spacing.padding',
+	margin: 'spacing.margin',
+};
+
+/**
+ * Reads the top-level declarations out of a block's custom CSS.
+ *
+ * Block custom CSS may nest selectors (`&:hover { … }`); those target something
+ * other than the block's own resting state, so only declarations at the top
+ * level are attributed. `!important` is stripped from the reported value — it
+ * explains *why* the declaration wins, not what it sets.
+ *
+ * @param {?string} css The block's `style.css` attribute.
+ * @return {Object} Map of style dot-path to declared value.
+ */
+export function getCustomCssDeclarations( css ) {
+	const declarations = {};
+	if ( typeof css !== 'string' || ! css.trim() ) {
+		return declarations;
+	}
+
+	const add = ( chunk ) => {
+		const separator = chunk.indexOf( ':' );
+		if ( separator === -1 ) {
+			return;
+		}
+		const property = chunk.slice( 0, separator ).trim().toLowerCase();
+		const value = chunk
+			.slice( separator + 1 )
+			.replace( /!important\s*$/i, '' )
+			.trim();
+		const path = STYLE_PATH_BY_CSS_PROPERTY[ property ];
+		if ( path && value ) {
+			declarations[ path ] = value;
+		}
+	};
+
+	let depth = 0;
+	let buffer = '';
+	for ( const character of css ) {
+		if ( character === '{' ) {
+			depth += 1;
+			buffer = '';
+			continue;
+		}
+		if ( character === '}' ) {
+			depth = Math.max( 0, depth - 1 );
+			buffer = '';
+			continue;
+		}
+		if ( depth > 0 ) {
+			continue;
+		}
+		if ( character === ';' ) {
+			add( buffer );
+			buffer = '';
+			continue;
+		}
+		buffer += character;
+	}
+	add( buffer );
+
+	return declarations;
+}
diff --git a/packages/block-editor/src/components/global-styles/style-origins/origin-popover.js b/packages/block-editor/src/components/global-styles/style-origins/origin-popover.js
new file mode 100644
index 00000000000000..549152947f18e9
--- /dev/null
+++ b/packages/block-editor/src/components/global-styles/style-origins/origin-popover.js
@@ -0,0 +1,136 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	Button,
+	Notice,
+	__experimentalDropdownContentWrapper as DropdownContentWrapper,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { formatValue, getLayerLabel } from './helpers';
+import { useUnexplainedOverride } from './use-unexplained-override';
+
+/**
+ * Contents of the popover opened from a control's override indicator: the
+ * property's cascade, and the action that gives the override up.
+ *
+ * The indicator only appears on a control that overrides something, so this is
+ * always answering "what did I override, and what happens if I undo it?".
+ *
+ * @param {Object}    props
+ * @param {Object[]}  props.entries         Cascade entries, low to high precedence.
+ * @param {string}    props.label           Human label for the property.
+ * @param {string}    props.blockTitle      Registered title of the block.
+ * @param {Object}    props.variationLabels Map of variation slug to label.
+ * @param {?Function} props.onReset         Clears the local override.
+ * @param {?string}   props.clientId        Selected block client ID.
+ * @param {?string}   props.stylePath       Dot-path of the property.
+ * @return {Element} Popover contents.
+ */
+export default function OriginPopover( {
+	entries,
+	label,
+	blockTitle,
+	variationLabels,
+	onReset,
+	clientId,
+	stylePath,
+} ) {
+	const winner = entries.find( ( entry ) => entry.isWinner );
+	// Global Styles is not the only thing that can style a block; see
+	// `useUnexplainedOverride`.
+	const hasUnexplainedOverride = useUnexplainedOverride(
+		clientId,
+		stylePath,
+		winner?.value,
+		winner?.layer
+	);
+
+	return (
+		// Padding is set on the panel itself so the popover matches the colour
+		// picker's, which also opts out of the wrapper's padding.
+		<DropdownContentWrapper paddingSize="none">
+			<div className="block-editor-style-origins__popover">
+				<h3 className="block-editor-style-origins__popover-title">
+					{ label }
+				</h3>
+
+				{ entries.length > 0 && (
+					// Highest precedence first: the value in effect leads, and
+					// the layers it overrode read downwards beneath it. The
+					// `entries` array itself stays low-to-high, since that is
+					// the order the cascade is resolved in.
+					<ul className="block-editor-style-origins__cascade">
+						{ [ ...entries ].reverse().map( ( entry, index ) => (
+							<li
+								key={ `${ entry.layer }-${ index }` }
+								className={
+									entry.isWinner
+										? 'is-winner'
+										: 'is-overridden'
+								}
+							>
+								<span className="block-editor-style-origins__origin">
+									{ getLayerLabel(
+										entry,
+										blockTitle,
+										variationLabels
+									) }
+								</span>
+								<span
+									className="block-editor-style-origins__value"
+									// The shortened form is enough to compare
+									// rows at a glance; the exact value stays
+									// one hover away.
+									title={
+										typeof entry.value === 'string' ||
+										typeof entry.value === 'number'
+											? String( entry.value )
+											: undefined
+									}
+								>
+									{ formatValue( entry.value ) }
+								</span>
+							</li>
+						) ) }
+					</ul>
+				) }
+
+				{ hasUnexplainedOverride && (
+					<Notice
+						status="warning"
+						isDismissible={ false }
+						spokenMessage={ null }
+						className="block-editor-style-origins__mismatch"
+					>
+						{ __(
+							'Something outside Global Styles is changing this value — custom CSS, the theme, or a plugin.'
+						) }
+					</Notice>
+				) }
+
+				{ !! onReset && (
+					<div className="block-editor-style-origins__actions">
+						{ /*
+						 * "Clear" rather than "Reset to <value>": the cascade
+						 * above already shows the value that takes over, so
+						 * repeating it on the control made for a long label
+						 * that changed every time the value did.
+						 */ }
+						<Button
+							variant="link"
+							onClick={ onReset }
+							className="block-editor-style-origins__reset"
+						>
+							{ __( 'Clear' ) }
+						</Button>
+					</div>
+				) }
+			</div>
+		</DropdownContentWrapper>
+	);
+}
diff --git a/packages/block-editor/src/components/global-styles/style-origins/style.scss b/packages/block-editor/src/components/global-styles/style-origins/style.scss
new file mode 100644
index 00000000000000..a70dbe5d8c08a2
--- /dev/null
+++ b/packages/block-editor/src/components/global-styles/style-origins/style.scss
@@ -0,0 +1,125 @@
+@use "@wordpress/base-styles/variables" as *;
+@use "@wordpress/base-styles/colors" as *;
+
+// Match the colour picker popover exactly, so the two read as the same kind of
+// surface. That panel derives its width from the swatch grid:
+// ( $swatch-size * 6 ) + ( $swatch-gap * 5 ) + ( $panel-padding * 2 ).
+$origin-popover-padding: $grid-unit-20;
+$origin-popover-width: (28px * 6) + (12px * 5) + ($origin-popover-padding * 2);
+
+.block-editor-style-origins__popover {
+	box-sizing: border-box;
+	width: $origin-popover-width;
+	padding: $origin-popover-padding;
+}
+
+// The property this cascade explains, set like the sidebar's own control
+// labels (uppercase, tracked out) so it reads as the same kind of heading.
+// A plain `h3` would also bring a large browser default margin with it, which
+// shows up as stray padding above the title.
+.block-editor-style-origins__popover-title {
+	margin: 0 0 $grid-unit-15;
+	font-size: $helptext-font-size;
+	font-weight: 500;
+	line-height: 1.4;
+	text-transform: uppercase;
+	letter-spacing: 0.05em;
+	color: $gray-900;
+}
+
+// Every contributing layer, low to high precedence. Overridden layers are
+// struck through, the way a CSS inspector shows a declaration that lost.
+.block-editor-style-origins__cascade {
+	margin: 0;
+	padding: 0;
+	list-style: none;
+	border: $border-width solid $gray-300;
+	border-radius: $radius-small;
+	overflow: hidden;
+
+	li {
+		display: flex;
+		align-items: baseline;
+		justify-content: space-between;
+		gap: $grid-unit-10;
+		margin: 0;
+		padding: $grid-unit-10 $grid-unit-15;
+		font-size: $font-size-small;
+		line-height: 1.4;
+
+		+ li {
+			border-top: $border-width solid $gray-300;
+		}
+
+		&.is-overridden {
+			color: $gray-600;
+			text-decoration: line-through;
+			text-decoration-thickness: from-font;
+		}
+
+		&.is-winner {
+			background: $gray-100;
+			font-weight: 500;
+			color: $gray-900;
+		}
+	}
+}
+
+// The origin takes the room it needs and wraps on word boundaries. `min-width`
+// is required: a flex item defaults to `min-width: auto`, which lets a long
+// value squeeze the label down to one character per line.
+.block-editor-style-origins__origin {
+	flex: 1 1 auto;
+	min-width: 0;
+	overflow-wrap: break-word;
+}
+
+// Values stay on one line so no single row can tower over the others; anything
+// still too long truncates, with the full value on the element's `title`.
+// `min-width: 0` is what allows a flex item to shrink far enough to ellipsis.
+.block-editor-style-origins__value {
+	flex: 0 1 auto;
+	min-width: 0;
+	// The origin labels are short, so the value can take the larger share.
+	max-width: 65%;
+	font-family: $font-family-mono;
+	text-align: end;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+// Mirrors the colour picker's own clear action: a borderless link, aligned to
+// the trailing edge, set off from the content above it.
+.block-editor-style-origins__actions {
+	display: flex;
+	justify-content: flex-end;
+	margin-top: $grid-unit-15;
+}
+
+// Warns that the winner shown above is not what the browser actually applied.
+.block-editor-style-origins__mismatch {
+	margin: $grid-unit-15 0 0;
+	font-size: $helptext-font-size;
+}
+
+.block-editor-style-origins__reset.block-editor-style-origins__reset {
+	height: auto;
+	padding: 0;
+	font-weight: 600;
+	text-decoration: none;
+
+	// The popover takes focus on open, so this never receives it by pointer.
+	// Keyboard users still get the ring via `:focus-visible`.
+	&:focus:not(:focus-visible) {
+		box-shadow: none;
+		outline: none;
+	}
+}
+
+.block-editor-style-origins__hint {
+	margin: $grid-unit-10 0 0;
+	font-size: $helptext-font-size;
+	line-height: 1.4;
+	color: $gray-700;
+}
diff --git a/packages/block-editor/src/components/global-styles/style-origins/use-cascade.js b/packages/block-editor/src/components/global-styles/style-origins/use-cascade.js
new file mode 100644
index 00000000000000..4acf8b5c41fe28
--- /dev/null
+++ b/packages/block-editor/src/components/global-styles/style-origins/use-cascade.js
@@ -0,0 +1,129 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { useMemo } from '@wordpress/element';
+import { store as blocksStore } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../../store';
+import { useResolvedStyle } from '../inherited-value-context';
+import { useBlockEditContext } from '../../block-edit/context';
+import { isGlobalStylesInheritanceEnabled } from '../inheritance';
+import {
+	attributesToStyleTree,
+	getCustomCssDeclarations,
+	withLocalOverrides,
+} from './helpers';
+
+const EMPTY_ARRAY = [];
+const EMPTY_OBJECT = {};
+
+/**
+ * Resolves the ordered cascade for one style property on one block, together
+ * with the labels needed to describe each layer.
+ *
+ * The `useSelect` mappers return store values directly and derive everything
+ * else in `useMemo`. Building objects inside a mapper returns a fresh reference
+ * on every store change, which would re-render every control carrying an
+ * indicator.
+ *
+ * @param {?string} blockName Selected block name.
+ * @param {?string} clientId  Selected block client ID.
+ * @param {?string} path      Dot-path of the property, e.g. `color.text`.
+ * @return {{entries: Object[], blockTitle: string, variationLabels: Object}} Cascade for `path`, low to high precedence.
+ */
+export function useCascade( blockName, clientId, path ) {
+	const attributes = useSelect(
+		( select ) =>
+			clientId
+				? select( blockEditorStore ).getBlockAttributes( clientId )
+				: null,
+		[ clientId ]
+	);
+
+	const blockTitle = useSelect(
+		( select ) =>
+			blockName
+				? select( blocksStore ).getBlockType( blockName )?.title ??
+				  blockName
+				: '',
+		[ blockName ]
+	);
+
+	const blockStyles = useSelect(
+		( select ) =>
+			blockName
+				? select( blocksStore ).getBlockStyles( blockName ) ??
+				  EMPTY_ARRAY
+				: EMPTY_ARRAY,
+		[ blockName ]
+	);
+
+	const variationLabels = useMemo( () => {
+		const labels = {};
+		for ( const style of blockStyles ) {
+			labels[ style.name ] = style.label ?? style.name;
+		}
+		return labels;
+	}, [ blockStyles ] );
+
+	const localStyles = useMemo(
+		() => attributesToStyleTree( attributes ),
+		[ attributes ]
+	);
+
+	const { cascade } = useResolvedStyle(
+		blockName,
+		attributes?.className ?? ''
+	);
+
+	const entries = useMemo( () => {
+		if ( ! blockName || ! clientId || ! path ) {
+			return EMPTY_ARRAY;
+		}
+		return (
+			withLocalOverrides(
+				cascade ?? {},
+				localStyles,
+				attributes?.style?.css
+			)[ path ] ?? EMPTY_ARRAY
+		);
+	}, [ blockName, clientId, path, cascade, localStyles, attributes ] );
+
+	return { entries, blockTitle, variationLabels };
+}
+
+/**
+ * Style paths the selected block's own custom CSS declares.
+ *
+ * Panels derive `hasLocalOverride` by comparing a control's value against the
+ * inherited one, which cannot see custom CSS — it lives in `style.css`, not at
+ * a style path. Without this, a property overridden *only* by custom CSS gets
+ * no indicator, and the cascade explaining it is unreachable.
+ *
+ * @return {Object} Map of style dot-path to declared value.
+ */
+export function useCustomCssPaths() {
+	const { clientId } = useBlockEditContext();
+	const css = useSelect(
+		( select ) =>
+			clientId
+				? select( blockEditorStore ).getBlockAttributes( clientId )
+						?.style?.css
+				: undefined,
+		[ clientId ]
+	);
+	return useMemo(
+		// Gated like the rest of the treatment. This path reads block
+		// attributes rather than the resolved cascade, so it would otherwise
+		// keep marking overrides with the experiment turned off.
+		() =>
+			isGlobalStylesInheritanceEnabled()
+				? getCustomCssDeclarations( css )
+				: EMPTY_OBJECT,
+		[ css ]
+	);
+}
diff --git a/packages/block-editor/src/components/global-styles/style-origins/use-unexplained-override.js b/packages/block-editor/src/components/global-styles/style-origins/use-unexplained-override.js
new file mode 100644
index 00000000000000..b7106d0e5cd2ac
--- /dev/null
+++ b/packages/block-editor/src/components/global-styles/style-origins/use-unexplained-override.js
@@ -0,0 +1,154 @@
+/**
+ * WordPress dependencies
+ */
+import { useEffect, useState } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
+import { getTypographyFontSizeValue } from '@wordpress/global-styles-engine';
+
+/**
+ * Internal dependencies
+ */
+import { useBlockElement } from '../../block-list/use-block-props/use-block-refs';
+import { store as blockEditorStore } from '../../../store';
+
+/**
+ * Style paths whose winning value can be checked against what the browser
+ * actually computed. Restricted to properties that map cleanly onto a single
+ * CSS property; shorthands and object-valued styles (background images,
+ * gradients, shadows) are left out because a mismatch there would be noise
+ * rather than signal.
+ */
+const CSS_PROPERTY_BY_PATH = {
+	'typography.fontSize': 'fontSize',
+	'typography.fontWeight': 'fontWeight',
+	'typography.fontStyle': 'fontStyle',
+	'typography.fontFamily': 'fontFamily',
+	'typography.lineHeight': 'lineHeight',
+	'typography.letterSpacing': 'letterSpacing',
+	'typography.textTransform': 'textTransform',
+	'typography.textDecoration': 'textDecorationLine',
+	'typography.textAlign': 'textAlign',
+	'color.text': 'color',
+	'color.background': 'backgroundColor',
+	'border.radius': 'borderTopLeftRadius',
+	'border.width': 'borderTopWidth',
+	'border.style': 'borderTopStyle',
+	'border.color': 'borderTopColor',
+};
+
+/**
+ * Turns a stored preset reference into the custom property the stylesheet uses,
+ * so it can be resolved by the browser like any other value.
+ *
+ * @param {*} value Raw style value.
+ * @return {*} A value safe to assign to a CSS property.
+ */
+function toCssValue( value ) {
+	if ( typeof value !== 'string' ) {
+		return value;
+	}
+	const preset = value.match( /^var:preset\|([a-z-]+)\|(.+)$/i );
+	return preset
+		? `var(--wp--preset--${ preset[ 1 ] }--${ preset[ 2 ] })`
+		: value;
+}
+
+/**
+ * Detects a value that the browser resolved differently from what Global Styles
+ * says should win.
+ *
+ * The cascade this feature explains covers the Global Styles data model only.
+ * Custom CSS (excluded from the engine outright), theme stylesheets, plugin
+ * styles and Customizer CSS all sit outside it and can still win on the page.
+ * Without this check the popover would state a winner with full confidence
+ * while the block visibly renders as something else.
+ *
+ * The expected value is normalised by applying it to a probe element mounted in
+ * the block's own parent, so relative units, custom properties and inherited
+ * context resolve the same way they do for the block itself. Only a difference
+ * after that normalisation counts.
+ *
+ * @param {?string} clientId      Selected block client ID.
+ * @param {?string} stylePath     Dot-path of the property.
+ * @param {*}       expectedValue The value the cascade says should win.
+ * @param {?string} layer         Which layer won, so values that bypass the
+ *                                style pipeline are compared verbatim.
+ * @return {boolean} Whether something outside Global Styles is overriding it.
+ */
+export function useUnexplainedOverride(
+	clientId,
+	stylePath,
+	expectedValue,
+	layer
+) {
+	const element = useBlockElement( clientId );
+	const [ isOverridden, setIsOverridden ] = useState( false );
+
+	// Authored values are not always what gets emitted. With fluid typography
+	// on, WordPress rewrites a font size into a `clamp()` before it reaches the
+	// stylesheet, so comparing the authored value against the computed one
+	// reports a mismatch on every font size. Run the same transform first.
+	const features = useSelect(
+		( select ) =>
+			select( blockEditorStore ).getSettings().__experimentalFeatures,
+		[]
+	);
+
+	useEffect( () => {
+		const cssProperty = CSS_PROPERTY_BY_PATH[ stylePath ];
+		if (
+			! element ||
+			! cssProperty ||
+			expectedValue === undefined ||
+			expectedValue === null
+		) {
+			setIsOverridden( false );
+			return;
+		}
+
+		const ownerDocument = element.ownerDocument;
+		const view = ownerDocument?.defaultView;
+		const parent = element.parentElement;
+		if ( ! view || ! parent ) {
+			setIsOverridden( false );
+			return;
+		}
+
+		const actual = view.getComputedStyle( element )[ cssProperty ];
+
+		let emitted = expectedValue;
+		// Custom CSS is written straight into the stylesheet, so it never goes
+		// through the fluid-typography rewrite that block-supports values do.
+		// Transforming it here would compare against a value the browser was
+		// never given.
+		if ( stylePath === 'typography.fontSize' && layer !== 'localCss' ) {
+			emitted =
+				getTypographyFontSizeValue(
+					{ size: expectedValue },
+					features ?? {}
+				) ?? expectedValue;
+		}
+
+		const probe = ownerDocument.createElement( 'div' );
+		probe.setAttribute( 'aria-hidden', 'true' );
+		probe.style.position = 'absolute';
+		probe.style.visibility = 'hidden';
+		probe.style.pointerEvents = 'none';
+		// Unitless line heights and `em` lengths resolve against the element's
+		// own font size, so the probe has to start from the same one.
+		if ( cssProperty !== 'fontSize' ) {
+			probe.style.fontSize = view.getComputedStyle( element ).fontSize;
+		}
+		probe.style[ cssProperty ] = toCssValue( emitted );
+		parent.appendChild( probe );
+		const expected = view.getComputedStyle( probe )[ cssProperty ];
+		probe.remove();
+
+		// An unset probe means the value could not be parsed (a `clamp()` the
+		// browser rejected, say). Reporting a mismatch from that would be a
+		// false alarm, so stay quiet.
+		setIsOverridden( !! expected && actual !== expected );
+	}, [ element, stylePath, expectedValue, features, layer ] );
+
+	return isOverridden;
+}
diff --git a/packages/block-editor/src/components/global-styles/test/background-panel.js b/packages/block-editor/src/components/global-styles/test/background-panel.js
index 5041211a07c5b8..e06827419dc835 100644
--- a/packages/block-editor/src/components/global-styles/test/background-panel.js
+++ b/packages/block-editor/src/components/global-styles/test/background-panel.js
@@ -252,7 +252,7 @@ describe( 'BackgroundPanel — inherited Global Styles label treatment', () => {
 
 			expect(
 				screen.getAllByRole( 'button', {
-					name: /reset to inherited value/i,
+					name: /where does/i,
 				} ).length
 			).toBeGreaterThanOrEqual( 1 );
 		} );
@@ -316,7 +316,7 @@ describe( 'BackgroundPanel — inherited Global Styles label treatment', () => {
 
 			expect(
 				screen.getByRole( 'button', {
-					name: /reset to inherited value/i,
+					name: /where does/i,
 				} )
 			).toBeInTheDocument();
 		} );
diff --git a/packages/block-editor/src/components/global-styles/test/border-panel.js b/packages/block-editor/src/components/global-styles/test/border-panel.js
index aedf3633b874c4..464989cb76ac0d 100644
--- a/packages/block-editor/src/components/global-styles/test/border-panel.js
+++ b/packages/block-editor/src/components/global-styles/test/border-panel.js
@@ -126,7 +126,7 @@ describe( 'BorderPanel — inherited Global Styles label treatment', () => {
 			expect( radiusInput ).not.toHaveAttribute( 'placeholder' );
 			expect(
 				screen.getByRole( 'button', {
-					name: /reset to inherited value/i,
+					name: /where does/i,
 				} )
 			).toBeInTheDocument();
 		} );
@@ -244,7 +244,7 @@ describe( 'BorderPanel — inherited Global Styles label treatment', () => {
 			// The local override surfaces the accessible reset affordance.
 			expect(
 				screen.getAllByRole( 'button', {
-					name: /reset to inherited value/i,
+					name: /where does/i,
 				} ).length
 			).toBeGreaterThanOrEqual( 1 );
 		} );
@@ -338,7 +338,7 @@ describe( 'BorderPanel — inherited Global Styles label treatment', () => {
 
 			expect(
 				screen.getByRole( 'button', {
-					name: /reset to inherited value/i,
+					name: /where does/i,
 				} )
 			).toBeInTheDocument();
 		} );
@@ -382,12 +382,12 @@ describe( 'BorderPanel — inherited Global Styles label treatment', () => {
 			).not.toBeInTheDocument();
 			expect(
 				screen.queryByRole( 'button', {
-					name: /reset to inherited value/i,
+					name: /where does/i,
 				} )
 			).not.toBeInTheDocument();
 		} );
 
-		it( 'renders the blue-dot InheritanceResetButton for a local override', () => {
+		it( 'renders the blue-dot InheritanceOriginButton for a local override', () => {
 			const inheritedValue = { shadow: 'var:preset|shadow|soft' };
 			const value = { shadow: 'var:preset|shadow|hard' };
 
@@ -405,7 +405,7 @@ describe( 'BorderPanel — inherited Global Styles label treatment', () => {
 			// color/gradient controls), not the plain remove button.
 			expect(
 				screen.getByRole( 'button', {
-					name: /reset to inherited value/i,
+					name: /where does/i,
 				} )
 			).toBeInTheDocument();
 			expect(
@@ -433,7 +433,7 @@ describe( 'BorderPanel — inherited Global Styles label treatment', () => {
 			).toBeInTheDocument();
 			expect(
 				screen.queryByRole( 'button', {
-					name: /reset to inherited value/i,
+					name: /where does/i,
 				} )
 			).not.toBeInTheDocument();
 		} );
diff --git a/packages/block-editor/src/components/global-styles/test/color-panel.js b/packages/block-editor/src/components/global-styles/test/color-panel.js
index d385a02354004f..9f71329a924d39 100644
--- a/packages/block-editor/src/components/global-styles/test/color-panel.js
+++ b/packages/block-editor/src/components/global-styles/test/color-panel.js
@@ -287,7 +287,7 @@ describe( 'ColorPanel — inherited Global Styles label treatment', () => {
 
 			expect(
 				screen.getAllByRole( 'button', {
-					name: /reset to inherited value/i,
+					name: /where does/i,
 				} ).length
 			).toBeGreaterThanOrEqual( 1 );
 		} );
diff --git a/packages/block-editor/src/components/global-styles/test/dimensions-panel.js b/packages/block-editor/src/components/global-styles/test/dimensions-panel.js
index d43c890a5db93e..f6c62974e1babb 100644
--- a/packages/block-editor/src/components/global-styles/test/dimensions-panel.js
+++ b/packages/block-editor/src/components/global-styles/test/dimensions-panel.js
@@ -147,7 +147,7 @@ function renderPanel( props ) {
 function expectLocalOverride() {
 	expect(
 		screen.getByRole( 'button', {
-			name: /reset to inherited value/i,
+			name: /where does/i,
 		} )
 	).toBeInTheDocument();
 }
@@ -198,7 +198,9 @@ describe( 'DimensionsPanel — per-control placeholder pattern', () => {
 				includeLayoutControls: true,
 			} );
 
-			const contentInput = screen.getByLabelText( /content width/i );
+			const contentInput = screen.getByRole( 'spinbutton', {
+				name: /content width/i,
+			} );
 			// The inherited value is rendered as the control value (so the
 			// unit parses from it) and marked at-rest, with only the numeric
 			// portion echoed as the placeholder; the raw unit must not leak in.
@@ -218,7 +220,9 @@ describe( 'DimensionsPanel — per-control placeholder pattern', () => {
 				includeLayoutControls: true,
 			} );
 
-			const contentInput = screen.getByLabelText( /content width/i );
+			const contentInput = screen.getByRole( 'spinbutton', {
+				name: /content width/i,
+			} );
 			expect( contentInput ).toHaveValue( 900 );
 			expect( contentInput ).not.toHaveAttribute( 'placeholder' );
 		} );
@@ -234,11 +238,15 @@ describe( 'DimensionsPanel — per-control placeholder pattern', () => {
 			} );
 
 			// contentSize: locally-set, no placeholder.
-			const contentInput = screen.getByLabelText( /content width/i );
+			const contentInput = screen.getByRole( 'spinbutton', {
+				name: /content width/i,
+			} );
 			expect( contentInput ).toHaveValue( 900 );
 
 			// wideSize: not locally set, rendered as the at-rest control value.
-			const wideInput = screen.getByLabelText( /wide width/i );
+			const wideInput = screen.getByRole( 'spinbutton', {
+				name: /wide width/i,
+			} );
 			expect( wideInput ).toHaveValue( 1280 );
 			expect( wideInput ).toHaveAttribute( 'placeholder', '1280' );
 			expect( wideInput ).not.toHaveAttribute( 'placeholder', '1280px' );
@@ -259,7 +267,9 @@ describe( 'DimensionsPanel — per-control placeholder pattern', () => {
 				includeLayoutControls: true,
 			} );
 
-			const contentInput = screen.getByLabelText( /content width/i );
+			const contentInput = screen.getByRole( 'spinbutton', {
+				name: /content width/i,
+			} );
 			await user.type( contentInput, '800px' );
 
 			expect( onChange ).toHaveBeenCalled();
@@ -282,7 +292,9 @@ describe( 'DimensionsPanel — per-control placeholder pattern', () => {
 				settings: baseSettings,
 			} );
 
-			const gapInput = screen.getByLabelText( /block spacing/i );
+			const gapInput = screen.getByRole( 'spinbutton', {
+				name: /block spacing/i,
+			} );
 			expect( gapInput ).toHaveValue( null );
 			expect( gapInput ).toHaveAttribute( 'placeholder', '1.5rem' );
 		} );
@@ -301,7 +313,9 @@ describe( 'DimensionsPanel — per-control placeholder pattern', () => {
 				settings: baseSettings,
 			} );
 
-			const gapInput = screen.getByLabelText( /block spacing/i );
+			const gapInput = screen.getByRole( 'spinbutton', {
+				name: /block spacing/i,
+			} );
 			expect( gapInput ).not.toHaveAttribute( 'placeholder' );
 		} );
 	} );
@@ -523,7 +537,7 @@ describe( 'DimensionsPanel — per-control placeholder pattern', () => {
 			// A local override now gets the same local-override flag as
 			// every other control, so the inline reset button can attach.
 			// The button itself is portaled and covered by the
-			// InheritanceResetButton unit tests.
+			// InheritanceOriginButton unit tests.
 			expectLocalOverride();
 		} );
 
@@ -744,7 +758,9 @@ describe( 'DimensionsPanel — per-control placeholder pattern', () => {
 				settings: baseSettings,
 			} );
 
-			const gapInput = screen.getByLabelText( /block spacing/i );
+			const gapInput = screen.getByRole( 'spinbutton', {
+				name: /block spacing/i,
+			} );
 			expect( gapInput ).toHaveValue( 0 );
 			expect( gapInput ).not.toHaveAttribute( 'placeholder' );
 			expectLocalOverride();
diff --git a/packages/block-editor/src/components/global-styles/test/filters-panel.js b/packages/block-editor/src/components/global-styles/test/filters-panel.js
index 78eca15f8c705f..129a9d02c3e9aa 100644
--- a/packages/block-editor/src/components/global-styles/test/filters-panel.js
+++ b/packages/block-editor/src/components/global-styles/test/filters-panel.js
@@ -57,7 +57,7 @@ const baseSettings = {
 };
 
 describe( 'FiltersPanel — visual treatment and display-without-commit', () => {
-	it( 'renders the InheritanceResetButton for a local override', () => {
+	it( 'renders the InheritanceOriginButton for a local override', () => {
 		const inheritedValue = {
 			filter: { duotone: [ '#000000', '#ffffff' ] },
 		};
@@ -77,7 +77,7 @@ describe( 'FiltersPanel — visual treatment and display-without-commit', () =>
 
 		expect(
 			screen.getByRole( 'button', {
-				name: /reset to inherited value/i,
+				name: /where does/i,
 			} )
 		).toBeInTheDocument();
 	} );
@@ -102,7 +102,7 @@ describe( 'FiltersPanel — visual treatment and display-without-commit', () =>
 		).toBeInTheDocument();
 		expect(
 			screen.queryByRole( 'button', {
-				name: /reset to inherited value/i,
+				name: /where does/i,
 			} )
 		).not.toBeInTheDocument();
 	} );
diff --git a/packages/block-editor/src/components/global-styles/test/inherited-value-context.js b/packages/block-editor/src/components/global-styles/test/inherited-value-context.js
index 6ead8930b4f7b9..0354f753cf5e14 100644
--- a/packages/block-editor/src/components/global-styles/test/inherited-value-context.js
+++ b/packages/block-editor/src/components/global-styles/test/inherited-value-context.js
@@ -254,7 +254,7 @@ describe( 'useResolvedStyle hook', () => {
 		mockStores( { typography: { fontSize: '16px' } } );
 		render( <Probe /> );
 		expect( screen.getByTestId( 'probe' ) ).toHaveTextContent(
-			'{"value":{},"sources":{}}'
+			'{"value":{},"sources":{},"cascade":{}}'
 		);
 	} );
 
@@ -262,7 +262,7 @@ describe( 'useResolvedStyle hook', () => {
 		mockStores( null );
 		render( <Probe blockName="core/heading" /> );
 		expect( screen.getByTestId( 'probe' ) ).toHaveTextContent(
-			'{"value":{},"sources":{}}'
+			'{"value":{},"sources":{},"cascade":{}}'
 		);
 	} );
 
diff --git a/packages/block-editor/src/components/global-styles/test/typography-panel.js b/packages/block-editor/src/components/global-styles/test/typography-panel.js
index 88c4ef5c37ffae..9f9f72df16ba6a 100644
--- a/packages/block-editor/src/components/global-styles/test/typography-panel.js
+++ b/packages/block-editor/src/components/global-styles/test/typography-panel.js
@@ -149,7 +149,9 @@ describe( 'TypographyPanel — inheritedValue round-trip', () => {
 
 		renderPanel( { inheritedValue } );
 
-		const lineHeightInput = screen.getByLabelText( /line height/i );
+		const lineHeightInput = screen.getByRole( 'spinbutton', {
+			name: /line height/i,
+		} );
 		expect( lineHeightInput ).toHaveValue( 1.7 );
 	} );
 
@@ -164,7 +166,9 @@ describe( 'TypographyPanel — inheritedValue round-trip', () => {
 
 		renderPanel( { inheritedValue } );
 
-		const columnsInput = screen.getByLabelText( /columns/i );
+		const columnsInput = screen.getByRole( 'spinbutton', {
+			name: /columns/i,
+		} );
 		// No locally-set value; the rendered value is empty.
 		expect( columnsInput ).toHaveValue( null );
 		// The inherited value reaches the user via the native
@@ -185,7 +189,9 @@ describe( 'TypographyPanel — inheritedValue round-trip', () => {
 
 		renderPanel( { value, inheritedValue } );
 
-		const columnsInput = screen.getByLabelText( /columns/i );
+		const columnsInput = screen.getByRole( 'spinbutton', {
+			name: /columns/i,
+		} );
 		expect( columnsInput ).toHaveValue( 5 );
 		expect( columnsInput ).not.toHaveAttribute( 'placeholder' );
 	} );
@@ -196,7 +202,9 @@ describe( 'TypographyPanel — inheritedValue round-trip', () => {
 		// NumberControl.
 		renderPanel( { inheritedValue: {} } );
 
-		const columnsInput = screen.getByLabelText( /columns/i );
+		const columnsInput = screen.getByRole( 'spinbutton', {
+			name: /columns/i,
+		} );
 		expect( columnsInput ).toHaveValue( null );
 		expect( columnsInput ).not.toHaveAttribute( 'placeholder' );
 	} );
@@ -212,7 +220,9 @@ describe( 'TypographyPanel — inheritedValue round-trip', () => {
 
 		renderPanel( { inheritedValue, onChange } );
 
-		const columnsInput = screen.getByLabelText( /columns/i );
+		const columnsInput = screen.getByRole( 'spinbutton', {
+			name: /columns/i,
+		} );
 		await user.type( columnsInput, '2' );
 
 		// onChange must be called with the typed value at exactly the
@@ -248,10 +258,12 @@ describe( 'TypographyPanel — inheritedValue round-trip', () => {
 		} );
 
 		// See locally-set value first.
-		expect( screen.getByLabelText( /columns/i ) ).toHaveValue( 5 );
-		expect( screen.getByLabelText( /columns/i ) ).not.toHaveAttribute(
-			'placeholder'
-		);
+		expect(
+			screen.getByRole( 'spinbutton', { name: /columns/i } )
+		).toHaveValue( 5 );
+		expect(
+			screen.getByRole( 'spinbutton', { name: /columns/i } )
+		).not.toHaveAttribute( 'placeholder' );
 
 		// Reset: local value cleared.
 		rerender(
@@ -265,7 +277,9 @@ describe( 'TypographyPanel — inheritedValue round-trip', () => {
 		);
 
 		// Placeholder is back; local value is gone.
-		const columnsInput = screen.getByLabelText( /columns/i );
+		const columnsInput = screen.getByRole( 'spinbutton', {
+			name: /columns/i,
+		} );
 		expect( columnsInput ).toHaveValue( null );
 		expect( columnsInput ).toHaveAttribute( 'placeholder', '3' );
 	} );
@@ -282,7 +296,9 @@ describe( 'TypographyPanel — inheritedValue round-trip', () => {
 
 		renderPanel( { value, inheritedValue } );
 
-		const lineHeightInput = screen.getByLabelText( /line height/i );
+		const lineHeightInput = screen.getByRole( 'spinbutton', {
+			name: /line height/i,
+		} );
 		expect( lineHeightInput ).toHaveValue( 1.4 );
 	} );
 
@@ -298,7 +314,9 @@ describe( 'TypographyPanel — inheritedValue round-trip', () => {
 
 		renderPanel( { inheritedValue } );
 
-		const letterSpacingInput = screen.getByLabelText( /letter spacing/i );
+		const letterSpacingInput = screen.getByRole( 'spinbutton', {
+			name: /letter spacing/i,
+		} );
 		expect( letterSpacingInput ).toHaveValue( 0.5 );
 		// The placeholder carries only the numeric portion of the inherited
 		// value; the unit selector reflects the inherited unit separately, so
@@ -320,7 +338,9 @@ describe( 'TypographyPanel — inheritedValue round-trip', () => {
 
 		renderPanel( { value, inheritedValue } );
 
-		const letterSpacingInput = screen.getByLabelText( /letter spacing/i );
+		const letterSpacingInput = screen.getByRole( 'spinbutton', {
+			name: /letter spacing/i,
+		} );
 		expect( letterSpacingInput ).toHaveValue( 2 );
 		expect( letterSpacingInput ).not.toHaveAttribute( 'placeholder' );
 	} );
@@ -340,11 +360,15 @@ describe( 'TypographyPanel — inheritedValue round-trip', () => {
 		renderPanel( { value, inheritedValue } );
 
 		// lineHeight: locally-set, not at-rest.
-		const lineHeightInput = screen.getByLabelText( /line height/i );
+		const lineHeightInput = screen.getByRole( 'spinbutton', {
+			name: /line height/i,
+		} );
 		expect( lineHeightInput ).toHaveValue( 1.4 );
 
 		// letterSpacing: not locally set, shows the inherited value at rest.
-		const letterSpacingInput = screen.getByLabelText( /letter spacing/i );
+		const letterSpacingInput = screen.getByRole( 'spinbutton', {
+			name: /letter spacing/i,
+		} );
 		expect( letterSpacingInput ).toHaveValue( 0.5 );
 	} );
 
@@ -354,7 +378,9 @@ describe( 'TypographyPanel — inheritedValue round-trip', () => {
 		// code path: no placeholder, no local-value regression.
 		renderPanel( { value: { typography: { lineHeight: '1.9' } } } );
 
-		expect( screen.getByLabelText( /line height/i ) ).toHaveValue( 1.9 );
+		expect(
+			screen.getByRole( 'spinbutton', { name: /line height/i } )
+		).toHaveValue( 1.9 );
 	} );
 
 	it( 'renders nothing for a leaf when both `value` and `inheritedValue` omit it', () => {
@@ -362,7 +388,9 @@ describe( 'TypographyPanel — inheritedValue round-trip', () => {
 
 		// An empty NumberControl input has no `value` attribute applied;
 		// RTL returns `null` (not `0`, not the empty string) for that case.
-		expect( screen.getByLabelText( /line height/i ) ).toHaveValue( null );
+		expect(
+			screen.getByRole( 'spinbutton', { name: /line height/i } )
+		).toHaveValue( null );
 	} );
 
 	it( 'accepts a `var:preset|font-size|…` leaf in `inheritedValue` without throwing', () => {
@@ -608,7 +636,9 @@ describe( 'TypographyPanel — inheritedValue round-trip', () => {
 
 				renderPanel( { inheritedValue } );
 
-				const lineHeightInput = screen.getByLabelText( /line height/i );
+				const lineHeightInput = screen.getByRole( 'spinbutton', {
+					name: /line height/i,
+				} );
 				expect( lineHeightInput ).toHaveValue( null );
 				// The explicit-empty inherited leaf is not surfaced as an
 				// inherited placeholder; `LineHeightControl` falls back to its
@@ -644,14 +674,18 @@ describe( 'TypographyPanel — inheritedValue round-trip', () => {
 
 		renderPanel( { value, inheritedValue } );
 
-		const lineHeightInput = screen.getByLabelText( /line height/i );
+		const lineHeightInput = screen.getByRole( 'spinbutton', {
+			name: /line height/i,
+		} );
 		expect( lineHeightInput ).toHaveValue( 0 );
 		// The inherited line height ('2') must not leak in as a placeholder;
 		// `LineHeightControl`'s own default (1.5) may remain, but the value is
 		// the local zero override.
 		expect( lineHeightInput ).not.toHaveAttribute( 'placeholder', '2' );
 
-		const columnsInput = screen.getByLabelText( /columns/i );
+		const columnsInput = screen.getByRole( 'spinbutton', {
+			name: /columns/i,
+		} );
 		expect( columnsInput ).toHaveValue( 0 );
 		expect( columnsInput ).not.toHaveAttribute( 'placeholder' );
 
@@ -659,7 +693,7 @@ describe( 'TypographyPanel — inheritedValue round-trip', () => {
 		// accessible reset-to-inherited affordance.
 		expect(
 			screen.getAllByRole( 'button', {
-				name: /reset to inherited value/i,
+				name: /where does/i,
 			} )
 		).toHaveLength( 2 );
 	} );
@@ -753,8 +787,11 @@ const DUPLICATE_PALETTE_SETTINGS = {
 
 // Helper: open the text Color dropdown and return the rendered swatches.
 async function openTextColorDropdown() {
+	// Anchored to the start of the name: the override indicator's accessible
+	// name also contains the property ("Where does Color come from?"), so an
+	// unanchored /Color/ matches both buttons.
 	await click(
-		screen.getByRole( 'button', { name: /Color/, expanded: false } )
+		screen.getByRole( 'button', { name: /^Color/, expanded: false } )
 	);
 	// `findAllByRole` waits for the Popover/portal content to appear.
 	return screen.findAllByRole( 'option' );
@@ -982,7 +1019,10 @@ describe( 'TypographyPanel layout className preserved regardless of inheritance
 		);
 	} );
 
-	it( 'folds the single-column layout class together with the inherited treatment when indicators are on', () => {
+	it( 'keeps the single-column layout class and adds no inherited treatment when indicators are on', () => {
+		// Inheritance is the unmarked default, so turning indicators on must
+		// not add a treatment class to an inheriting control — only the
+		// layout class survives.
 		renderPanel( {
 			showInheritanceLabelIndicators: true,
 			value: {},
@@ -993,11 +1033,12 @@ describe( 'TypographyPanel layout className preserved regardless of inheritance
 		const letterSpacingItem = getItem( /letter spacing/i );
 
 		expect( lineHeightItem ).toHaveClass( 'single-column' );
-		expect( lineHeightItem ).toHaveClass(
+		expect( letterSpacingItem ).toHaveClass( 'single-column' );
+
+		expect( lineHeightItem ).not.toHaveClass(
 			'is-inherited-from-global-styles'
 		);
-		expect( letterSpacingItem ).toHaveClass( 'single-column' );
-		expect( letterSpacingItem ).toHaveClass(
+		expect( letterSpacingItem ).not.toHaveClass(
 			'is-inherited-from-global-styles'
 		);
 	} );
diff --git a/packages/block-editor/src/components/global-styles/typography-panel.js b/packages/block-editor/src/components/global-styles/typography-panel.js
index 184097a3e13b9e..32e7f61a7c7ee8 100644
--- a/packages/block-editor/src/components/global-styles/typography-panel.js
+++ b/packages/block-editor/src/components/global-styles/typography-panel.js
@@ -815,6 +815,7 @@ export default function TypographyPanel( {
 			{ hasTextColorEnabled && (
 				<ColorGradientDropdownItem
 					label={ __( 'Color' ) }
+					stylePath="color.text"
 					hasValue={ hasTextColorValue }
 					resetValue={ resetTextColor }
 					isShownByDefault={ defaultControls.textColor }
@@ -856,6 +857,7 @@ export default function TypographyPanel( {
 			) }
 			{ hasFontFamilyEnabled && (
 				<InheritanceToolsPanelItem
+					stylePath="typography.fontFamily"
 					{ ...inheritanceProps(
 						isFontFamilyPlaceholder,
 						hasFontFamily() && inheritedFontFamily !== undefined
@@ -875,6 +877,7 @@ export default function TypographyPanel( {
 			) }
 			{ hasFontSizeEnabled && (
 				<InheritanceToolsPanelItem
+					stylePath="typography.fontSize"
 					{ ...inheritanceProps(
 						isFontSizePlaceholder,
 						hasFontSize() && rawInheritedFontSize !== undefined
@@ -899,6 +902,7 @@ export default function TypographyPanel( {
 			) }
 			{ hasAppearanceControl && (
 				<InheritanceToolsPanelItem
+					stylePath="typography.fontWeight"
 					{ ...inheritanceProps(
 						isFontAppearancePlaceholder,
 						hasFontAppearance() &&
@@ -925,6 +929,7 @@ export default function TypographyPanel( {
 			) }
 			{ hasLineHeightEnabled && (
 				<InheritanceToolsPanelItem
+					stylePath="typography.lineHeight"
 					{ ...inheritanceProps(
 						isLineHeightPlaceholder,
 						hasLineHeight() && inheritedLineHeight !== undefined,
@@ -957,6 +962,7 @@ export default function TypographyPanel( {
 			) }
 			{ hasLetterSpacingControl && (
 				<InheritanceToolsPanelItem
+					stylePath="typography.letterSpacing"
 					{ ...inheritanceProps(
 						isLetterSpacingPlaceholder,
 						hasLetterSpacing() &&
@@ -992,6 +998,7 @@ export default function TypographyPanel( {
 			) }
 			{ hasTextIndentControl && (
 				<InheritanceToolsPanelItem
+					stylePath="typography.textIndent"
 					{ ...inheritanceProps(
 						isTextIndentPlaceholder,
 						hasTextIndent() && inheritedTextIndent !== undefined
@@ -1032,6 +1039,7 @@ export default function TypographyPanel( {
 			) }
 			{ hasTextColumnsControl && (
 				<InheritanceToolsPanelItem
+					stylePath="typography.textColumns"
 					{ ...inheritanceProps(
 						isTextColumnsPlaceholder,
 						hasTextColumns() && inheritedTextColumns !== undefined,
@@ -1061,6 +1069,7 @@ export default function TypographyPanel( {
 			) }
 			{ hasTextDecorationControl && (
 				<InheritanceToolsPanelItem
+					stylePath="typography.textDecoration"
 					{ ...inheritanceProps(
 						isTextDecorationPlaceholder,
 						hasTextDecoration() &&
@@ -1082,6 +1091,7 @@ export default function TypographyPanel( {
 			) }
 			{ hasWritingModeControl && (
 				<InheritanceToolsPanelItem
+					stylePath="typography.writingMode"
 					{ ...inheritanceProps(
 						isWritingModePlaceholder,
 						hasWritingMode() && inheritedWritingMode !== undefined,
@@ -1101,6 +1111,7 @@ export default function TypographyPanel( {
 			) }
 			{ hasTextTransformControl && (
 				<InheritanceToolsPanelItem
+					stylePath="typography.textTransform"
 					{ ...inheritanceProps(
 						isTextTransformPlaceholder,
 						hasTextTransform() &&
@@ -1122,6 +1133,7 @@ export default function TypographyPanel( {
 			) }
 			{ hasTextAlignmentControl && (
 				<InheritanceToolsPanelItem
+					stylePath="typography.textAlign"
 					{ ...inheritanceProps(
 						isTextAlignPlaceholder,
 						hasTextAlign() && inheritedTextAlign !== undefined
diff --git a/packages/block-editor/src/style.scss b/packages/block-editor/src/style.scss
index 4ed0aa9afc6701..4ab64292e7936f 100644
--- a/packages/block-editor/src/style.scss
+++ b/packages/block-editor/src/style.scss
@@ -36,6 +36,7 @@
 @use "./components/font-appearance-control/style.scss" as *;
 @use "./components/global-styles/style.scss" as *;
 @use "./components/global-styles/inheritance/style.scss" as *;
+@use "./components/global-styles/style-origins/style.scss" as *;
 @use "./components/grid/style.scss" as *;
 @use "./components/height-control/style.scss" as *;
 @use "./components/iframe/style.scss" as *;
diff --git a/packages/global-styles-engine/src/resolve-style.ts b/packages/global-styles-engine/src/resolve-style.ts
index 2fd00919e61798..2bcd90b7502068 100644
--- a/packages/global-styles-engine/src/resolve-style.ts
+++ b/packages/global-styles-engine/src/resolve-style.ts
@@ -15,11 +15,30 @@ interface SelectedState {
 
 interface SourceDescriptor {
 	layer: string;
+	// Structural metadata describing *which* root/element/block/variation the
+	// layer refers to. Deliberately not a pre-built human string: the engine is
+	// framework- and i18n-agnostic, so the UI composes the label (and looks up
+	// the block's registered title) from these fields.
+	blockName?: string | null;
+	element?: string | null;
+	variation?: string | null;
+}
+
+// One layer's contribution to a single leaf path. `cascade[ pathKey ]` holds
+// these ordered low-to-high precedence, so the last entry is the winner and the
+// preceding ones are the values it overrode.
+interface CascadeEntry extends SourceDescriptor {
+	value: unknown;
+	isWinner: boolean;
 }
 
 interface ResolvedStyle {
 	value: StyleTree;
 	sources: Record< string, SourceDescriptor >;
+	// Full per-path cascade. `sources` keeps only the winning layer; this keeps
+	// the layers it beat, which is what an origin/cascade view needs in order to
+	// explain *why* a value is what it is.
+	cascade: Record< string, CascadeEntry[] >;
 }
 
 // Query describing which slice of `globalStyles` to resolve. Kept separate from
@@ -77,6 +96,7 @@ const TREE_STRUCTURAL_KEYS = new Set( [ 'blocks', 'variations', 'css' ] );
 const EMPTY_INHERITANCE: ResolvedStyle = Object.freeze( {
 	value: {},
 	sources: {},
+	cascade: {},
 } );
 
 // Source descriptors per inheritance layer. `layer` identifies which layer
@@ -88,12 +108,15 @@ const SOURCE_DESCRIPTORS: Record< string, SourceDescriptor > = {
 	blockVariation: { layer: 'blockVariation' },
 };
 
-function createSourceDescriptor( type: string ): SourceDescriptor | null {
+function createSourceDescriptor(
+	type: string,
+	metadata?: Omit< SourceDescriptor, 'layer' >
+): SourceDescriptor | null {
 	const descriptor = SOURCE_DESCRIPTORS[ type ];
 	if ( ! descriptor ) {
 		return null;
 	}
-	return { ...descriptor };
+	return { ...descriptor, ...metadata };
 }
 
 interface Contribution {
@@ -208,6 +231,7 @@ const ATOMIC_OBJECT_KEYS = new Set( [ 'backgroundImage' ] );
  * @param sourceMetadata
  * @param sources
  * @param path
+ * @param cascade
  * @return The mutated `target`.
  */
 function deepMergeDroppingEmpties(
@@ -216,7 +240,8 @@ function deepMergeDroppingEmpties(
 	globalStyles: StyleTree,
 	sourceMetadata?: SourceDescriptor,
 	sources?: Record< string, SourceDescriptor >,
-	path: string[] = []
+	path: string[] = [],
+	cascade?: Record< string, CascadeEntry[] >
 ): StyleTree {
 	if ( ! source || typeof source !== 'object' || Array.isArray( source ) ) {
 		return target;
@@ -263,7 +288,8 @@ function deepMergeDroppingEmpties(
 				globalStyles,
 				sourceMetadata,
 				sources,
-				nextPath
+				nextPath,
+				cascade
 			);
 		} else {
 			target[ key ] =
@@ -274,8 +300,21 @@ function deepMergeDroppingEmpties(
 					? { ...sourceValue }
 					: sourceValue;
 			if ( sourceMetadata && sources ) {
-				sources[ getPathKey( nextPath ) ] =
-					getSourceForPath( sourceMetadata );
+				const pathKey = getPathKey( nextPath );
+				sources[ pathKey ] = getSourceForPath( sourceMetadata );
+				if ( cascade ) {
+					// A later layer writing the same leaf demotes whatever came
+					// before it; only the final write stays the winner.
+					const entries = ( cascade[ pathKey ] ??= [] );
+					for ( const entry of entries ) {
+						entry.isWinner = false;
+					}
+					entries.push( {
+						...getSourceForPath( sourceMetadata ),
+						value: target[ key ],
+						isWinner: true,
+					} );
+				}
 			}
 		}
 	}
@@ -352,7 +391,8 @@ function deleteAtPath( target: StyleTree, pathSegments: string[] ) {
 // not actually reach the block. See `NON_CASCADING_ROOT_PREFIXES`.
 function dropNonCascadingRootLeaves(
 	value: StyleTree,
-	sources: Record< string, SourceDescriptor >
+	sources: Record< string, SourceDescriptor >,
+	cascade?: Record< string, CascadeEntry[] >
 ) {
 	for ( const pathKey of Object.keys( sources ) ) {
 		if (
@@ -363,6 +403,30 @@ function dropNonCascadingRootLeaves(
 			delete sources[ pathKey ];
 		}
 	}
+	if ( ! cascade ) {
+		return;
+	}
+	// A root contribution at a non-cascading path never reaches the block, so it
+	// must not appear as an overridden layer either — even when some higher
+	// layer won the path and kept it out of the `sources` sweep above.
+	for ( const pathKey of Object.keys( cascade ) ) {
+		if ( ! isNonCascadingRootPath( pathKey ) ) {
+			continue;
+		}
+		const kept = cascade[ pathKey ].filter(
+			( entry ) => entry.layer !== 'root'
+		);
+		if ( kept.length === 0 ) {
+			delete cascade[ pathKey ];
+			continue;
+		}
+		// Removing the winner (root won and was dropped) promotes the highest
+		// remaining layer, keeping exactly one winner per path.
+		if ( ! kept.some( ( entry ) => entry.isWinner ) ) {
+			kept[ kept.length - 1 ].isWinner = true;
+		}
+		cascade[ pathKey ] = kept;
+	}
 }
 
 // Resolve the inherited `background.backgroundImage` against the Global Styles
@@ -433,8 +497,14 @@ function computeResolvedStyle(
 	// block's own styles. `elements` is ordered low to high precedence, so a
 	// level-specific `h2` correctly wins over the generic `heading`.
 	const elementLayers = ( elements ?? [] )
-		.map( ( elementName ) => styles.elements?.[ elementName ] ?? null )
-		.filter( ( layer ): layer is StyleTree => !! layer );
+		.map( ( elementName ) => ( {
+			element: elementName,
+			layer: styles.elements?.[ elementName ] ?? null,
+		} ) )
+		.filter(
+			( entry ): entry is { element: string; layer: StyleTree } =>
+				!! entry.layer
+		);
 	// Resolve the active block style variation's styles (with `{ ref }`
 	// values resolved) against the Global Styles tree.
 	const variation = variationName
@@ -451,22 +521,25 @@ function computeResolvedStyle(
 			pickLayerRootContribution( root ),
 			createSourceDescriptor( 'root' )
 		),
-		...elementLayers.map( ( layer ) =>
+		...elementLayers.map( ( { element, layer } ) =>
 			createContribution(
 				pickLayerRootContribution( layer ),
-				createSourceDescriptor( 'element' )
+				createSourceDescriptor( 'element', { blockName, element } )
 			)
 		),
 		block
 			? createContribution(
 					pickLayerRootContribution( block ),
-					createSourceDescriptor( 'block' )
+					createSourceDescriptor( 'block', { blockName } )
 			  )
 			: null,
 		variation
 			? createContribution(
 					pickLayerRootContribution( variation ),
-					createSourceDescriptor( 'blockVariation' )
+					createSourceDescriptor( 'blockVariation', {
+						blockName,
+						variation: variationName,
+					} )
 			  )
 			: null,
 	];
@@ -484,12 +557,15 @@ function computeResolvedStyle(
 				),
 				createSourceDescriptor( 'root' )
 			),
-			...elementLayers.map( ( layer ) =>
+			...elementLayers.map( ( { element, layer } ) =>
 				createContribution(
 					pickLayerRootContribution(
 						getStateSlice( layer, selectedState )
 					),
-					createSourceDescriptor( 'element' )
+					createSourceDescriptor( 'element', {
+						blockName,
+						element,
+					} )
 				)
 			),
 			block
@@ -497,7 +573,7 @@ function computeResolvedStyle(
 						pickLayerRootContribution(
 							getStateSlice( block, selectedState )
 						),
-						createSourceDescriptor( 'block' )
+						createSourceDescriptor( 'block', { blockName } )
 				  )
 				: null,
 			variation
@@ -505,7 +581,10 @@ function computeResolvedStyle(
 						pickLayerRootContribution(
 							getStateSlice( variation, selectedState )
 						),
-						createSourceDescriptor( 'blockVariation' )
+						createSourceDescriptor( 'blockVariation', {
+							blockName,
+							variation: variationName,
+						} )
 				  )
 				: null
 		);
@@ -520,6 +599,7 @@ function computeResolvedStyle(
 	}
 
 	const sources: Record< string, SourceDescriptor > = {};
+	const cascade: Record< string, CascadeEntry[] > = {};
 	const value = filteredContributions.reduce(
 		( mergedValue, contribution ) =>
 			deepMergeDroppingEmpties(
@@ -527,22 +607,24 @@ function computeResolvedStyle(
 				contribution.styles,
 				globalStyles as StyleTree,
 				contribution.source,
-				sources
+				sources,
+				[],
+				cascade
 			),
 		{} as StyleTree
 	);
 
 	// Root-level non-cascading values do not reach the block; drop them from
-	// value and sources together. Then resolve theme-file image pointers so
-	// consumers receive fully-resolved values.
-	dropNonCascadingRootLeaves( value, sources );
+	// value, sources, and cascade together. Then resolve theme-file image
+	// pointers so consumers receive fully-resolved values.
+	dropNonCascadingRootLeaves( value, sources, cascade );
 	resolveThemeFileBackgroundImage(
 		value,
 		globalStyles as StyleTree,
 		( globalStyles._links as Record< string, any > ) ?? null
 	);
 
-	return { value, sources };
+	return { value, sources, cascade };
 }
 
 const NO_LINKS = {};
diff --git a/packages/global-styles-engine/src/test/resolve-style.test.ts b/packages/global-styles-engine/src/test/resolve-style.test.ts
index 881f80864a0bb9..9c4c576b27a468 100644
--- a/packages/global-styles-engine/src/test/resolve-style.test.ts
+++ b/packages/global-styles-engine/src/test/resolve-style.test.ts
@@ -899,3 +899,106 @@ describe( 'resolveStyle – non-cascading root drop', () => {
 		);
 	} );
 } );
+
+describe( 'resolveStyle – per-path cascade', () => {
+	// Root and block both set fontSize; block wins. Root alone sets fontFamily.
+	const gs = {
+		styles: {
+			typography: { fontSize: '16px', fontFamily: 'Inter' },
+			blocks: {
+				'core/paragraph': {
+					typography: { fontSize: '18px' },
+				},
+			},
+		},
+	};
+
+	test( 'records every contributing layer, ordered low to high', () => {
+		const { cascade } = resolveStyle( gs, {
+			blockName: 'core/paragraph',
+		} );
+		expect(
+			cascade[ 'typography.fontSize' ].map( ( entry ) => [
+				entry.layer,
+				entry.value,
+			] )
+		).toEqual( [
+			[ 'root', '16px' ],
+			[ 'block', '18px' ],
+		] );
+	} );
+
+	test( 'marks exactly one winner, the highest-precedence layer', () => {
+		const { cascade, sources } = resolveStyle( gs, {
+			blockName: 'core/paragraph',
+		} );
+		const entries = cascade[ 'typography.fontSize' ];
+		expect( entries.filter( ( entry ) => entry.isWinner ) ).toHaveLength(
+			1
+		);
+		const winner = entries.find( ( entry ) => entry.isWinner );
+		// The cascade's winner must agree with the existing source map.
+		expect( winner.layer ).toBe( sources[ 'typography.fontSize' ].layer );
+		expect( winner.value ).toBe( '18px' );
+	} );
+
+	test( 'an uncontested leaf is a single winning entry', () => {
+		const { cascade } = resolveStyle( gs, {
+			blockName: 'core/paragraph',
+		} );
+		expect( cascade[ 'typography.fontFamily' ] ).toEqual( [
+			{ layer: 'root', value: 'Inter', isWinner: true },
+		] );
+	} );
+
+	test( 'carries structural metadata for composing an origin label', () => {
+		const withVariation = {
+			styles: {
+				blocks: {
+					'core/group': {
+						typography: { fontSize: '16px' },
+						variations: {
+							subtitle: { typography: { fontSize: '20px' } },
+						},
+					},
+				},
+			},
+		};
+		const { cascade } = resolveStyle( withVariation, {
+			blockName: 'core/group',
+			variationName: 'subtitle',
+		} );
+		const entries = cascade[ 'typography.fontSize' ];
+		expect( entries.at( -1 ) ).toMatchObject( {
+			layer: 'blockVariation',
+			blockName: 'core/group',
+			variation: 'subtitle',
+			value: '20px',
+			isWinner: true,
+		} );
+	} );
+
+	test( 'omits root layers at non-cascading paths, which never reach the block', () => {
+		const nonCascading = {
+			styles: {
+				spacing: { padding: { top: '10px' } },
+				blocks: {
+					'core/group': { spacing: { padding: { top: '30px' } } },
+				},
+			},
+		};
+		const { cascade } = resolveStyle( nonCascading, {
+			blockName: 'core/group',
+		} );
+		// Root padding paints the root element only, so it must not appear as
+		// a layer the block's own padding overrode.
+		expect( cascade[ 'spacing.padding.top' ] ).toEqual( [
+			{
+				layer: 'block',
+				blockName: 'core/group',
+				value: '30px',
+				isWinner: true,
+			},
+		] );
+	} );
+} );