@eric-emg/symphiq-components 1.3.56 → 1.3.57

package/fesm2022/symphiq-components.mjs

@@ -295,6 +295,19 @@ class ModalService {
     openRecommendationMetricsListModal(metrics, charts, recommendationContext, directlyAffectedMetricId, indirectlyAffectedMetricIds, previousState, hierarchyContext) {
         const navigationStack = previousState ? [...(previousState.navigationStack || []), previousState] : [];
         const openedFromMainBody = !previousState;
+        let depthFromPrevState = 0;
+        let walkState = previousState;
+        while (walkState) {
+            depthFromPrevState++;
+            walkState = walkState.previousState ?? undefined;
+        }
+        console.log('[ModalService] openRecommendationMetricsListModal:', {
+            previousStateExists: !!previousState,
+            previousStateType: previousState?.type,
+            depthFromPrevState,
+            navigationStackLength: navigationStack.length,
+            openedFromMainBody
+        });
         this.modalState.next({
             type: 'metrics-list',
             data: {
@@ -44164,6 +44177,13 @@ class ProfileAnalysisModalComponent {
             if (open) {
                 this.modalReady.set(false);
                 this.logContainingBlockInfo();
+                console.log('[ProfileAnalysisModal] Modal opening - z-index info:', {
+                    modalType: this.modalType(),
+                    modalDepth: this.modalDepth(),
+                    baseZIndex: this.baseZIndex(),
+                    contentZIndex: this.contentZIndex(),
+                    previousStateType: this.previousState()?.type
+                });
                 setTimeout(() => {
                     this.moveModalToBody();
                     this.modalReady.set(true);
@@ -44485,6 +44505,19 @@ class ProfileAnalysisModalComponent {
             }
             else if (state.type === 'metrics-list' && state.data) {
                 const data = state.data;
+                let depthFromPrevState = 0;
+                let walkState = state.previousState;
+                while (walkState) {
+                    depthFromPrevState++;
+                    walkState = walkState.previousState;
+                }
+                console.log('[ProfileAnalysisModal] metrics-list state received:', {
+                    previousStateExists: !!state.previousState,
+                    previousStateType: state.previousState?.type,
+                    depthFromPrevState,
+                    navigationStackLength: state.navigationStack?.length,
+                    navigationStackTypes: state.navigationStack?.map(s => s.type)
+                });
                 this.modalData.set(data);
                 let title = 'Related Metrics';
                 if (data.recommendationContext?.title) {
@@ -83009,6 +83042,19 @@ class StrategyRecommendationsModalContentComponent {
             objectiveTitle: this.objectiveTitle(),
             strategyTitle: this.strategy()?.title
         };
+        const currentState = this.currentModalState();
+        let depthCount = 0;
+        let stateWalk = currentState;
+        while (stateWalk) {
+            depthCount++;
+            stateWalk = stateWalk.previousState ?? null;
+        }
+        console.log('[StrategyRecommendations] openRelatedMetricsModal:', {
+            currentModalStateType: currentState?.type,
+            currentModalStateExists: !!currentState,
+            previousStateDepth: depthCount,
+            navigationStackLength: currentState?.navigationStack?.length
+        });
         this.modalService.openRecommendationMetricsListModal(metrics, relevantCharts, recommendationContext, directlyAffectedMetricId, indirectlyAffectedMetricIds, this.currentModalState() ?? undefined, hierarchyContext);
     }
     hasRelatedFunnelInsights(recommendation) {
@@ -101791,9 +101837,9 @@ const _c0$b = a0 => ({ name: "calendar", source: a0 });
 const _forTrack0$b = ($index, $item) => $item.id;
 const _forTrack1$2 = ($index, $item) => $item.title;
 function UnifiedTimelineComponent_Conditional_0_For_8_Conditional_11_For_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 19);
-    i0.ɵɵelement(1, "span", 20);
-    i0.ɵɵelementStart(2, "span", 21);
+    i0.ɵɵelementStart(0, "div", 20);
+    i0.ɵɵelement(1, "span", 21);
+    i0.ɵɵelementStart(2, "span", 22);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -101806,11 +101852,11 @@ function UnifiedTimelineComponent_Conditional_0_For_8_Conditional_11_For_5_Templ
     i0.ɵɵtextInterpolate(milestone_r1.title);
 } }
 function UnifiedTimelineComponent_Conditional_0_For_8_Conditional_11_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 15)(1, "div", 17);
+    i0.ɵɵelementStart(0, "div", 15)(1, "div", 18);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 18);
-    i0.ɵɵrepeaterCreate(4, UnifiedTimelineComponent_Conditional_0_For_8_Conditional_11_For_5_Template, 4, 3, "div", 19, _forTrack1$2);
+    i0.ɵɵelementStart(3, "div", 19);
+    i0.ɵɵrepeaterCreate(4, UnifiedTimelineComponent_Conditional_0_For_8_Conditional_11_For_5_Template, 4, 3, "div", 20, _forTrack1$2);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const phase_r3 = i0.ɵɵnextContext().$implicit;
@@ -101824,14 +101870,14 @@ function UnifiedTimelineComponent_Conditional_0_For_8_Conditional_11_Template(rf
 } }
 function UnifiedTimelineComponent_Conditional_0_For_8_Conditional_12_For_5_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 24);
+    i0.ɵɵelementStart(0, "div", 25);
     i0.ɵɵlistener("click", function UnifiedTimelineComponent_Conditional_0_For_8_Conditional_12_For_5_Template_div_click_0_listener() { const goal_r5 = i0.ɵɵrestoreView(_r4).$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.onGoalChipClick(goal_r5)); });
-    i0.ɵɵelementStart(1, "span", 25);
+    i0.ɵɵelementStart(1, "span", 26);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(3, "svg", 26);
-    i0.ɵɵelement(4, "path", 27);
+    i0.ɵɵelementStart(3, "svg", 27);
+    i0.ɵɵelement(4, "path", 28);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const goal_r5 = ctx.$implicit;
@@ -101841,11 +101887,11 @@ function UnifiedTimelineComponent_Conditional_0_For_8_Conditional_12_For_5_Templ
     i0.ɵɵtextInterpolate(goal_r5.title);
 } }
 function UnifiedTimelineComponent_Conditional_0_For_8_Conditional_12_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 15)(1, "div", 17);
+    i0.ɵɵelementStart(0, "div", 15)(1, "div", 18);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 22);
-    i0.ɵɵrepeaterCreate(4, UnifiedTimelineComponent_Conditional_0_For_8_Conditional_12_For_5_Template, 5, 2, "div", 23, _forTrack0$b);
+    i0.ɵɵelementStart(3, "div", 23);
+    i0.ɵɵrepeaterCreate(4, UnifiedTimelineComponent_Conditional_0_For_8_Conditional_12_For_5_Template, 5, 2, "div", 24, _forTrack0$b);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const phase_r3 = i0.ɵɵnextContext().$implicit;
@@ -101874,6 +101920,9 @@ function UnifiedTimelineComponent_Conditional_0_For_8_Template(rf, ctx) { if (rf
     i0.ɵɵconditionalCreate(12, UnifiedTimelineComponent_Conditional_0_For_8_Conditional_12_Template, 6, 2, "div", 15);
     i0.ɵɵelementStart(13, "div", 16);
     i0.ɵɵtext(14);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(15, "div", 17);
+    i0.ɵɵtext(16);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const phase_r3 = ctx.$implicit;
@@ -101907,6 +101956,10 @@ function UnifiedTimelineComponent_Conditional_0_For_8_Template(rf, ctx) { if (rf
     i0.ɵɵproperty("ngClass", ctx_r1.phaseIndicatorClasses());
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" Phase ", ɵ$index_16_r6 + 1, " ");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r1.phaseIndicatorMobileClasses());
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" Phase ", ɵ$index_16_r6 + 1, " ");
 } }
 function UnifiedTimelineComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "section", 0);
@@ -101914,7 +101967,7 @@ function UnifiedTimelineComponent_Conditional_0_Template(rf, ctx) { if (rf & 1)
     i0.ɵɵelementStart(3, "div", 3)(4, "div", 4);
     i0.ɵɵelement(5, "div", 5);
     i0.ɵɵelementStart(6, "div", 6);
-    i0.ɵɵrepeaterCreate(7, UnifiedTimelineComponent_Conditional_0_For_8_Template, 15, 29, "div", 7, _forTrack0$b);
+    i0.ɵɵrepeaterCreate(7, UnifiedTimelineComponent_Conditional_0_For_8_Template, 17, 31, "div", 7, _forTrack0$b);
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -101962,6 +102015,9 @@ class UnifiedTimelineComponent {
         this.objectiveItemClasses = computed(() => this.isLightMode() ? 'text-slate-700' : 'text-slate-300', ...(ngDevMode ? [{ debugName: "objectiveItemClasses" }] : []));
         this.moreObjectivesClasses = computed(() => this.isLightMode() ? 'text-slate-400' : 'text-slate-500', ...(ngDevMode ? [{ debugName: "moreObjectivesClasses" }] : []));
         this.phaseIndicatorClasses = computed(() => this.isLightMode() ? 'text-blue-600' : 'text-blue-400', ...(ngDevMode ? [{ debugName: "phaseIndicatorClasses" }] : []));
+        this.phaseIndicatorMobileClasses = computed(() => this.isLightMode()
+            ? 'bg-blue-100 text-blue-700 border border-blue-200'
+            : 'bg-blue-900/50 text-blue-300 border border-blue-700/50', ...(ngDevMode ? [{ debugName: "phaseIndicatorMobileClasses" }] : []));
         this.nodeClasses = {
             light: ['bg-white border-blue-500', 'bg-white border-cyan-500', 'bg-white border-teal-500', 'bg-white border-emerald-500'],
             dark: ['bg-slate-800 border-blue-500', 'bg-slate-800 border-cyan-500', 'bg-slate-800 border-teal-500', 'bg-slate-800 border-emerald-500']
@@ -102018,7 +102074,7 @@ class UnifiedTimelineComponent {
         this.goalClick.emit(goal);
     }
     static { this.ɵfac = function UnifiedTimelineComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || UnifiedTimelineComponent)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: UnifiedTimelineComponent, selectors: [["symphiq-unified-timeline"]], inputs: { timeline: [1, "timeline"], viewMode: [1, "viewMode"], goals: [1, "goals"] }, outputs: { goalClick: "goalClick" }, decls: 1, vars: 1, consts: [["id", "section-timeline", 1, "space-y-6", "scroll-mt-24"], [3, "viewMode", "sectionIcon"], ["title", "Implementation Timeline", 3, "icon", "viewMode"], [1, "rounded-2xl", "p-8", "shadow-xl", 3, "ngClass"], [1, "relative"], [1, "absolute", "left-6", "top-0", "bottom-0", "w-0.5", 3, "ngClass"], [1, "space-y-8"], [1, "relative", "pl-16", "group"], [1, "absolute", "left-4", "w-5", "h-5", "rounded-full", "border-4", "flex", "items-center", "justify-center", "transition-all", "duration-300", "group-hover:scale-125", 3, "ngClass"], [1, "w-2", "h-2", "rounded-full", 3, "ngClass"], [1, "rounded-xl", "p-5", "transition-all", "duration-300", 3, "ngClass"], [1, "flex", "items-start", "justify-between", "gap-4", "mb-3"], [1, "text-base", "font-semibold", 3, "ngClass"], [1, "px-2", "py-1", "text-xs", "font-semibold", "rounded-full", "flex-shrink-0", 3, "ngClass"], [1, "text-sm", "mb-4", 3, "ngClass"], [1, "mt-4"], [1, "absolute", "-left-[52px]", "top-0", "text-xs", "font-bold", "transition-all", "duration-300", "origin-right", "group-hover:scale-125", "group-hover:font-extrabold", 3, "ngClass"], [1, "text-xs", "font-semibold", "uppercase", "mb-2", 3, "ngClass"], [1, "space-y-2"], [1, "flex", "items-start", "gap-2", "text-sm", 3, "ngClass"], [1, "w-2", "h-2", "rounded-full", "mt-1.5", "flex-shrink-0", 3, "ngClass"], [1, "line-clamp-1"], [1, "space-y-3"], [1, "goal-chip", "flex", "items-center", "justify-between", "gap-2", "px-3", "py-2", "rounded-lg", "cursor-pointer", 3, "ngClass"], [1, "goal-chip", "flex", "items-center", "justify-between", "gap-2", "px-3", "py-2", "rounded-lg", "cursor-pointer", 3, "click", "ngClass"], [1, "text-sm", "font-medium", "line-clamp-1"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4", "flex-shrink-0"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M9 5l7 7-7 7"]], template: function UnifiedTimelineComponent_Template(rf, ctx) { if (rf & 1) {
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: UnifiedTimelineComponent, selectors: [["symphiq-unified-timeline"]], inputs: { timeline: [1, "timeline"], viewMode: [1, "viewMode"], goals: [1, "goals"] }, outputs: { goalClick: "goalClick" }, decls: 1, vars: 1, consts: [["id", "section-timeline", 1, "space-y-6", "scroll-mt-24"], [3, "viewMode", "sectionIcon"], ["title", "Implementation Timeline", 3, "icon", "viewMode"], [1, "rounded-2xl", "p-8", "shadow-xl", 3, "ngClass"], [1, "relative"], [1, "absolute", "left-6", "top-0", "bottom-0", "w-0.5", 3, "ngClass"], [1, "space-y-12", "md:space-y-8", "mt-8", "md:mt-0"], [1, "relative", "pl-16", "group"], [1, "absolute", "left-4", "w-5", "h-5", "rounded-full", "border-4", "flex", "items-center", "justify-center", "transition-all", "duration-300", "group-hover:scale-125", 3, "ngClass"], [1, "w-2", "h-2", "rounded-full", 3, "ngClass"], [1, "rounded-xl", "p-5", "transition-all", "duration-300", 3, "ngClass"], [1, "flex", "items-start", "justify-between", "gap-4", "mb-3"], [1, "text-base", "font-semibold", 3, "ngClass"], [1, "px-2", "py-1", "text-xs", "font-semibold", "rounded-full", "flex-shrink-0", 3, "ngClass"], [1, "text-sm", "mb-4", 3, "ngClass"], [1, "mt-4"], [1, "absolute", "text-xs", "font-bold", "transition-all", "duration-300", "group-hover:scale-110", "group-hover:font-extrabold", "-left-[52px]", "top-0", "origin-right", "hidden", "md:block", 3, "ngClass"], [1, "absolute", "-top-8", "left-0", "text-xs", "font-bold", "px-2", "py-1", "rounded-full", "md:hidden", 3, "ngClass"], [1, "text-xs", "font-semibold", "uppercase", "mb-2", 3, "ngClass"], [1, "space-y-2"], [1, "flex", "items-start", "gap-2", "text-sm", 3, "ngClass"], [1, "w-2", "h-2", "rounded-full", "mt-1.5", "flex-shrink-0", 3, "ngClass"], [1, "line-clamp-1"], [1, "space-y-3"], [1, "goal-chip", "flex", "items-center", "justify-between", "gap-2", "px-3", "py-2", "rounded-lg", "cursor-pointer", 3, "ngClass"], [1, "goal-chip", "flex", "items-center", "justify-between", "gap-2", "px-3", "py-2", "rounded-lg", "cursor-pointer", 3, "click", "ngClass"], [1, "text-sm", "font-medium", "line-clamp-1"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4", "flex-shrink-0"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M9 5l7 7-7 7"]], template: function UnifiedTimelineComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵconditionalCreate(0, UnifiedTimelineComponent_Conditional_0_Template, 9, 10, "section", 0);
         } if (rf & 2) {
             i0.ɵɵconditional(ctx.phases().length > 0 ? 0 : -1);
@@ -102043,7 +102099,7 @@ class UnifiedTimelineComponent {
           <div class="relative">
             <div [ngClass]="lineClasses()" class="absolute left-6 top-0 bottom-0 w-0.5"></div>
 
-            <div class="space-y-8">
+            <div class="space-y-12 md:space-y-8 mt-8 md:mt-0">
               @for (phase of phases(); track phase.id; let idx = $index) {
                 <div class="relative pl-16 group">
                   <div
@@ -102111,7 +102167,10 @@ class UnifiedTimelineComponent {
                       </div>
                     }
 
-                    <div [ngClass]="phaseIndicatorClasses()" class="absolute -left-[52px] top-0 text-xs font-bold transition-all duration-300 origin-right group-hover:scale-125 group-hover:font-extrabold">
+                    <div [ngClass]="phaseIndicatorClasses()" class="absolute text-xs font-bold transition-all duration-300 group-hover:scale-110 group-hover:font-extrabold -left-[52px] top-0 origin-right hidden md:block">
+                      Phase {{ idx + 1 }}
+                    </div>
+                    <div [ngClass]="phaseIndicatorMobileClasses()" class="absolute -top-8 left-0 text-xs font-bold px-2 py-1 rounded-full md:hidden">
                       Phase {{ idx + 1 }}
                     </div>
                   </div>
@@ -102124,192 +102183,108 @@ class UnifiedTimelineComponent {
     }
   `, styles: ["@keyframes pulse-glow-blue{0%,to{box-shadow:0 0 5px #3b82f680,0 0 10px #3b82f64d}50%{box-shadow:0 0 15px #3b82f6cc,0 0 25px #3b82f680,0 0 35px #3b82f64d}}@keyframes pulse-glow-cyan{0%,to{box-shadow:0 0 5px #06b6d480,0 0 10px #06b6d44d}50%{box-shadow:0 0 15px #06b6d4cc,0 0 25px #06b6d480,0 0 35px #06b6d44d}}@keyframes pulse-glow-teal{0%,to{box-shadow:0 0 5px #14b8a680,0 0 10px #14b8a64d}50%{box-shadow:0 0 15px #14b8a6cc,0 0 25px #14b8a680,0 0 35px #14b8a64d}}@keyframes pulse-glow-emerald{0%,to{box-shadow:0 0 5px #10b98180,0 0 10px #10b9814d}50%{box-shadow:0 0 15px #10b981cc,0 0 25px #10b98180,0 0 35px #10b9814d}}.group:hover .animate-pulse-glow-blue{animation:pulse-glow-blue 1.5s ease-in-out infinite}.group:hover .animate-pulse-glow-cyan{animation:pulse-glow-cyan 1.5s ease-in-out infinite}.group:hover .animate-pulse-glow-teal{animation:pulse-glow-teal 1.5s ease-in-out infinite}.group:hover .animate-pulse-glow-emerald{animation:pulse-glow-emerald 1.5s ease-in-out infinite}.card-glow-blue:hover{box-shadow:0 0 20px #3b82f666,0 0 40px #3b82f633,0 10px 30px #0000004d;border-color:#3b82f6cc!important}.card-glow-cyan:hover{box-shadow:0 0 20px #06b6d466,0 0 40px #06b6d433,0 10px 30px #0000004d;border-color:#06b6d4cc!important}.card-glow-teal:hover{box-shadow:0 0 20px #14b8a666,0 0 40px #14b8a633,0 10px 30px #0000004d;border-color:#14b8a6cc!important}.card-glow-emerald:hover{box-shadow:0 0 20px #10b98166,0 0 40px #10b98133,0 10px 30px #0000004d;border-color:#10b981cc!important}.goal-chip{transition:all .3s ease}.goal-chip:hover{transform:scale(1.03) translate(4px);box-shadow:0 0 15px #8b5cf680,0 0 30px #8b5cf64d;border-color:#8b5cf6cc!important}\n"] }]
     }], null, { timeline: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeline", required: true }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], goals: [{ type: i0.Input, args: [{ isSignal: true, alias: "goals", required: false }] }], goalClick: [{ type: i0.Output, args: ["goalClick"] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(UnifiedTimelineComponent, { className: "UnifiedTimelineComponent", filePath: "lib/components/profile-analysis-unified-dashboard/cards/unified-timeline.component.ts", lineNumber: 181 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(UnifiedTimelineComponent, { className: "UnifiedTimelineComponent", filePath: "lib/components/profile-analysis-unified-dashboard/cards/unified-timeline.component.ts", lineNumber: 184 }); })();
 
 const _c0$a = a0 => ({ name: "squares-2x2", source: a0 });
 const _forTrack0$a = ($index, $item) => $item.id;
-function UnifiedPriorityMatrixComponent_Conditional_0_For_18_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 22);
-    i0.ɵɵtext(1);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const goal_r2 = i0.ɵɵnextContext().$implicit;
-    const ctx_r2 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("ngClass", ctx_r2.sourceIndicatorClasses());
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate((goal_r2.sourceAnalyses == null ? null : goal_r2.sourceAnalyses.length) ?? 0);
-} }
-function UnifiedPriorityMatrixComponent_Conditional_0_For_18_Template(rf, ctx) { if (rf & 1) {
+function UnifiedPriorityMatrixComponent_Conditional_0_For_21_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 19);
-    i0.ɵɵlistener("click", function UnifiedPriorityMatrixComponent_Conditional_0_For_18_Template_button_click_0_listener() { const goal_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onGoalClick(goal_r2)); });
-    i0.ɵɵelementStart(1, "div", 20)(2, "span", 21);
+    i0.ɵɵelementStart(0, "button", 25);
+    i0.ɵɵlistener("click", function UnifiedPriorityMatrixComponent_Conditional_0_For_21_Template_button_click_0_listener() { const goal_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onGoalClick(goal_r2)); });
+    i0.ɵɵelementStart(1, "div", 26)(2, "span", 27);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(4, UnifiedPriorityMatrixComponent_Conditional_0_For_18_Conditional_4_Template, 2, 2, "span", 22);
-    i0.ɵɵelementEnd()();
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵelementStart(4, "svg", 28);
+    i0.ɵɵelement(5, "path", 29);
+    i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const goal_r2 = ctx.$implicit;
     const ctx_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("ngClass", ctx_r2.getGoalClasses("quickWins"));
     i0.ɵɵadvance(3);
     i0.ɵɵtextInterpolate(goal_r2.title);
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(((goal_r2.sourceAnalyses == null ? null : goal_r2.sourceAnalyses.length) ?? 0) > 0 ? 4 : -1);
-} }
-function UnifiedPriorityMatrixComponent_Conditional_0_Conditional_19_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 14);
-    i0.ɵɵtext(1);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("ngClass", ctx_r2.moreGoalsClasses());
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1("+", ctx_r2.matrix().quickWins.length - 3, " more");
 } }
-function UnifiedPriorityMatrixComponent_Conditional_0_Conditional_20_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 15);
+function UnifiedPriorityMatrixComponent_Conditional_0_Conditional_22_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 18);
     i0.ɵɵtext(1, "No goals");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("ngClass", ctx_r2.emptyClasses());
 } }
-function UnifiedPriorityMatrixComponent_Conditional_0_For_30_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 22);
-    i0.ɵɵtext(1);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const goal_r5 = i0.ɵɵnextContext().$implicit;
-    const ctx_r2 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("ngClass", ctx_r2.sourceIndicatorClasses());
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate((goal_r5.sourceAnalyses == null ? null : goal_r5.sourceAnalyses.length) ?? 0);
-} }
-function UnifiedPriorityMatrixComponent_Conditional_0_For_30_Template(rf, ctx) { if (rf & 1) {
+function UnifiedPriorityMatrixComponent_Conditional_0_For_32_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 19);
-    i0.ɵɵlistener("click", function UnifiedPriorityMatrixComponent_Conditional_0_For_30_Template_button_click_0_listener() { const goal_r5 = i0.ɵɵrestoreView(_r4).$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onGoalClick(goal_r5)); });
-    i0.ɵɵelementStart(1, "div", 20)(2, "span", 21);
+    i0.ɵɵelementStart(0, "button", 25);
+    i0.ɵɵlistener("click", function UnifiedPriorityMatrixComponent_Conditional_0_For_32_Template_button_click_0_listener() { const goal_r5 = i0.ɵɵrestoreView(_r4).$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onGoalClick(goal_r5)); });
+    i0.ɵɵelementStart(1, "div", 26)(2, "span", 27);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(4, UnifiedPriorityMatrixComponent_Conditional_0_For_30_Conditional_4_Template, 2, 2, "span", 22);
-    i0.ɵɵelementEnd()();
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵelementStart(4, "svg", 28);
+    i0.ɵɵelement(5, "path", 29);
+    i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const goal_r5 = ctx.$implicit;
     const ctx_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("ngClass", ctx_r2.getGoalClasses("majorProjects"));
     i0.ɵɵadvance(3);
     i0.ɵɵtextInterpolate(goal_r5.title);
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(((goal_r5.sourceAnalyses == null ? null : goal_r5.sourceAnalyses.length) ?? 0) > 0 ? 4 : -1);
-} }
-function UnifiedPriorityMatrixComponent_Conditional_0_Conditional_31_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 14);
-    i0.ɵɵtext(1);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("ngClass", ctx_r2.moreGoalsClasses());
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1("+", ctx_r2.matrix().majorProjects.length - 3, " more");
 } }
-function UnifiedPriorityMatrixComponent_Conditional_0_Conditional_32_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 15);
+function UnifiedPriorityMatrixComponent_Conditional_0_Conditional_33_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 18);
     i0.ɵɵtext(1, "No goals");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("ngClass", ctx_r2.emptyClasses());
 } }
-function UnifiedPriorityMatrixComponent_Conditional_0_For_42_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 22);
-    i0.ɵɵtext(1);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const goal_r7 = i0.ɵɵnextContext().$implicit;
-    const ctx_r2 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("ngClass", ctx_r2.sourceIndicatorClasses());
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate((goal_r7.sourceAnalyses == null ? null : goal_r7.sourceAnalyses.length) ?? 0);
-} }
-function UnifiedPriorityMatrixComponent_Conditional_0_For_42_Template(rf, ctx) { if (rf & 1) {
+function UnifiedPriorityMatrixComponent_Conditional_0_For_43_Template(rf, ctx) { if (rf & 1) {
     const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 19);
-    i0.ɵɵlistener("click", function UnifiedPriorityMatrixComponent_Conditional_0_For_42_Template_button_click_0_listener() { const goal_r7 = i0.ɵɵrestoreView(_r6).$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onGoalClick(goal_r7)); });
-    i0.ɵɵelementStart(1, "div", 20)(2, "span", 21);
+    i0.ɵɵelementStart(0, "button", 25);
+    i0.ɵɵlistener("click", function UnifiedPriorityMatrixComponent_Conditional_0_For_43_Template_button_click_0_listener() { const goal_r7 = i0.ɵɵrestoreView(_r6).$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onGoalClick(goal_r7)); });
+    i0.ɵɵelementStart(1, "div", 26)(2, "span", 27);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(4, UnifiedPriorityMatrixComponent_Conditional_0_For_42_Conditional_4_Template, 2, 2, "span", 22);
-    i0.ɵɵelementEnd()();
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵelementStart(4, "svg", 28);
+    i0.ɵɵelement(5, "path", 29);
+    i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const goal_r7 = ctx.$implicit;
     const ctx_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("ngClass", ctx_r2.getGoalClasses("fillIns"));
     i0.ɵɵadvance(3);
     i0.ɵɵtextInterpolate(goal_r7.title);
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(((goal_r7.sourceAnalyses == null ? null : goal_r7.sourceAnalyses.length) ?? 0) > 0 ? 4 : -1);
-} }
-function UnifiedPriorityMatrixComponent_Conditional_0_Conditional_43_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 14);
-    i0.ɵɵtext(1);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("ngClass", ctx_r2.moreGoalsClasses());
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1("+", ctx_r2.matrix().fillIns.length - 3, " more");
 } }
 function UnifiedPriorityMatrixComponent_Conditional_0_Conditional_44_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 15);
+    i0.ɵɵelementStart(0, "div", 18);
     i0.ɵɵtext(1, "No goals");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("ngClass", ctx_r2.emptyClasses());
 } }
-function UnifiedPriorityMatrixComponent_Conditional_0_For_54_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 22);
-    i0.ɵɵtext(1);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const goal_r9 = i0.ɵɵnextContext().$implicit;
-    const ctx_r2 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("ngClass", ctx_r2.sourceIndicatorClasses());
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate((goal_r9.sourceAnalyses == null ? null : goal_r9.sourceAnalyses.length) ?? 0);
-} }
 function UnifiedPriorityMatrixComponent_Conditional_0_For_54_Template(rf, ctx) { if (rf & 1) {
     const _r8 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 19);
+    i0.ɵɵelementStart(0, "button", 25);
     i0.ɵɵlistener("click", function UnifiedPriorityMatrixComponent_Conditional_0_For_54_Template_button_click_0_listener() { const goal_r9 = i0.ɵɵrestoreView(_r8).$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onGoalClick(goal_r9)); });
-    i0.ɵɵelementStart(1, "div", 20)(2, "span", 21);
+    i0.ɵɵelementStart(1, "div", 26)(2, "span", 27);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(4, UnifiedPriorityMatrixComponent_Conditional_0_For_54_Conditional_4_Template, 2, 2, "span", 22);
-    i0.ɵɵelementEnd()();
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵelementStart(4, "svg", 28);
+    i0.ɵɵelement(5, "path", 29);
+    i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const goal_r9 = ctx.$implicit;
     const ctx_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("ngClass", ctx_r2.getGoalClasses("thankless"));
     i0.ɵɵadvance(3);
     i0.ɵɵtextInterpolate(goal_r9.title);
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(((goal_r9.sourceAnalyses == null ? null : goal_r9.sourceAnalyses.length) ?? 0) > 0 ? 4 : -1);
 } }
 function UnifiedPriorityMatrixComponent_Conditional_0_Conditional_55_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 14);
-    i0.ɵɵtext(1);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("ngClass", ctx_r2.moreGoalsClasses());
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1("+", ctx_r2.matrix().thankless.length - 3, " more");
-} }
-function UnifiedPriorityMatrixComponent_Conditional_0_Conditional_56_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 15);
+    i0.ɵɵelementStart(0, "div", 18);
     i0.ɵɵtext(1, "No goals");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -102320,63 +102295,63 @@ function UnifiedPriorityMatrixComponent_Conditional_0_Template(rf, ctx) { if (rf
     i0.ɵɵelementStart(0, "section", 0);
     i0.ɵɵelement(1, "symphiq-section-divider", 1)(2, "symphiq-section-header", 2);
     i0.ɵɵelementStart(3, "div", 3)(4, "div", 4)(5, "div", 5);
-    i0.ɵɵtext(6, " Impact ");
+    i0.ɵɵelement(6, "div", 6);
+    i0.ɵɵelementStart(7, "div", 7)(8, "span", 8);
+    i0.ɵɵtext(9, "Impact");
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(10, "div", 9)(11, "div", 10)(12, "div", 11)(13, "div", 12);
+    i0.ɵɵelement(14, "div", 13);
+    i0.ɵɵelementStart(15, "h4", 14);
+    i0.ɵɵtext(16, "Quick Wins");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(17, "p", 15);
+    i0.ɵɵtext(18, "High Impact / Low Effort");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "div", 6);
-    i0.ɵɵtext(8, " Effort ");
+    i0.ɵɵelementStart(19, "div", 16);
+    i0.ɵɵrepeaterCreate(20, UnifiedPriorityMatrixComponent_Conditional_0_For_21_Template, 6, 2, "button", 17, _forTrack0$a);
+    i0.ɵɵconditionalCreate(22, UnifiedPriorityMatrixComponent_Conditional_0_Conditional_22_Template, 2, 1, "div", 18);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(23, "div", 11)(24, "div", 12);
+    i0.ɵɵelement(25, "div", 19);
+    i0.ɵɵelementStart(26, "h4", 14);
+    i0.ɵɵtext(27, "Major Projects");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(28, "p", 15);
+    i0.ɵɵtext(29, "High Impact / High Effort");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "div", 7)(10, "div", 8);
-    i0.ɵɵelement(11, "div", 9);
-    i0.ɵɵelementStart(12, "h4", 10);
-    i0.ɵɵtext(13, "Quick Wins");
+    i0.ɵɵelementStart(30, "div", 16);
+    i0.ɵɵrepeaterCreate(31, UnifiedPriorityMatrixComponent_Conditional_0_For_32_Template, 6, 2, "button", 17, _forTrack0$a);
+    i0.ɵɵconditionalCreate(33, UnifiedPriorityMatrixComponent_Conditional_0_Conditional_33_Template, 2, 1, "div", 18);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(14, "p", 11);
-    i0.ɵɵtext(15, "High Impact / Low Effort");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(16, "div", 12);
-    i0.ɵɵrepeaterCreate(17, UnifiedPriorityMatrixComponent_Conditional_0_For_18_Template, 5, 3, "button", 13, _forTrack0$a);
-    i0.ɵɵconditionalCreate(19, UnifiedPriorityMatrixComponent_Conditional_0_Conditional_19_Template, 2, 2, "div", 14);
-    i0.ɵɵconditionalCreate(20, UnifiedPriorityMatrixComponent_Conditional_0_Conditional_20_Template, 2, 1, "div", 15);
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(21, "div", 7)(22, "div", 8);
-    i0.ɵɵelement(23, "div", 16);
-    i0.ɵɵelementStart(24, "h4", 10);
-    i0.ɵɵtext(25, "Major Projects");
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(26, "p", 11);
-    i0.ɵɵtext(27, "High Impact / High Effort");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(28, "div", 12);
-    i0.ɵɵrepeaterCreate(29, UnifiedPriorityMatrixComponent_Conditional_0_For_30_Template, 5, 3, "button", 13, _forTrack0$a);
-    i0.ɵɵconditionalCreate(31, UnifiedPriorityMatrixComponent_Conditional_0_Conditional_31_Template, 2, 2, "div", 14);
-    i0.ɵɵconditionalCreate(32, UnifiedPriorityMatrixComponent_Conditional_0_Conditional_32_Template, 2, 1, "div", 15);
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(33, "div", 7)(34, "div", 8);
-    i0.ɵɵelement(35, "div", 17);
-    i0.ɵɵelementStart(36, "h4", 10);
-    i0.ɵɵtext(37, "Fill-Ins");
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(38, "p", 11);
-    i0.ɵɵtext(39, "Low Impact / Low Effort");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(40, "div", 12);
-    i0.ɵɵrepeaterCreate(41, UnifiedPriorityMatrixComponent_Conditional_0_For_42_Template, 5, 3, "button", 13, _forTrack0$a);
-    i0.ɵɵconditionalCreate(43, UnifiedPriorityMatrixComponent_Conditional_0_Conditional_43_Template, 2, 2, "div", 14);
-    i0.ɵɵconditionalCreate(44, UnifiedPriorityMatrixComponent_Conditional_0_Conditional_44_Template, 2, 1, "div", 15);
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(45, "div", 7)(46, "div", 8);
-    i0.ɵɵelement(47, "div", 18);
-    i0.ɵɵelementStart(48, "h4", 10);
+    i0.ɵɵelementStart(34, "div", 11)(35, "div", 12);
+    i0.ɵɵelement(36, "div", 20);
+    i0.ɵɵelementStart(37, "h4", 14);
+    i0.ɵɵtext(38, "Fill-Ins");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(39, "p", 15);
+    i0.ɵɵtext(40, "Low Impact / Low Effort");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(41, "div", 16);
+    i0.ɵɵrepeaterCreate(42, UnifiedPriorityMatrixComponent_Conditional_0_For_43_Template, 6, 2, "button", 17, _forTrack0$a);
+    i0.ɵɵconditionalCreate(44, UnifiedPriorityMatrixComponent_Conditional_0_Conditional_44_Template, 2, 1, "div", 18);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(45, "div", 11)(46, "div", 12);
+    i0.ɵɵelement(47, "div", 21);
+    i0.ɵɵelementStart(48, "h4", 14);
     i0.ɵɵtext(49, "Time Permitting");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(50, "p", 11);
+    i0.ɵɵelementStart(50, "p", 15);
     i0.ɵɵtext(51, "Low Impact / High Effort");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(52, "div", 12);
-    i0.ɵɵrepeaterCreate(53, UnifiedPriorityMatrixComponent_Conditional_0_For_54_Template, 5, 3, "button", 13, _forTrack0$a);
-    i0.ɵɵconditionalCreate(55, UnifiedPriorityMatrixComponent_Conditional_0_Conditional_55_Template, 2, 2, "div", 14);
-    i0.ɵɵconditionalCreate(56, UnifiedPriorityMatrixComponent_Conditional_0_Conditional_56_Template, 2, 1, "div", 15);
-    i0.ɵɵelementEnd()()()()();
+    i0.ɵɵelementStart(52, "div", 16);
+    i0.ɵɵrepeaterCreate(53, UnifiedPriorityMatrixComponent_Conditional_0_For_54_Template, 6, 2, "button", 17, _forTrack0$a);
+    i0.ɵɵconditionalCreate(55, UnifiedPriorityMatrixComponent_Conditional_0_Conditional_55_Template, 2, 1, "div", 18);
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(56, "div", 22);
+    i0.ɵɵelement(57, "div", 23);
+    i0.ɵɵelementStart(58, "div", 24)(59, "span", 8);
+    i0.ɵɵtext(60, "Effort");
+    i0.ɵɵelementEnd()()()()()()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
@@ -102385,22 +102360,22 @@ function UnifiedPriorityMatrixComponent_Conditional_0_Template(rf, ctx) { if (rf
     i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(29, _c0$a, ctx_r2.IconSourceEnum.HEROICONS))("viewMode", ctx_r2.viewMode());
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r2.containerClasses());
-    i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngClass", ctx_r2.axisLabelClasses());
-    i0.ɵɵadvance(2);
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("ngClass", ctx_r2.axisLineClasses());
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r2.axisLabelBgClasses());
+    i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r2.axisLabelClasses());
-    i0.ɵɵadvance(2);
+    i0.ɵɵadvance(4);
     i0.ɵɵproperty("ngClass", ctx_r2.getQuadrantClasses("quick-wins"));
     i0.ɵɵadvance(3);
     i0.ɵɵproperty("ngClass", ctx_r2.titleClasses());
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngClass", ctx_r2.subtitleClasses());
     i0.ɵɵadvance(3);
-    i0.ɵɵrepeater(ctx_r2.matrix().quickWins.slice(0, 3));
+    i0.ɵɵrepeater(ctx_r2.matrix().quickWins);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r2.matrix().quickWins.length > 3 ? 19 : -1);
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r2.matrix().quickWins.length === 0 ? 20 : -1);
+    i0.ɵɵconditional(ctx_r2.matrix().quickWins.length === 0 ? 22 : -1);
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r2.getQuadrantClasses("major-projects"));
     i0.ɵɵadvance(3);
@@ -102408,11 +102383,9 @@ function UnifiedPriorityMatrixComponent_Conditional_0_Template(rf, ctx) { if (rf
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngClass", ctx_r2.subtitleClasses());
     i0.ɵɵadvance(3);
-    i0.ɵɵrepeater(ctx_r2.matrix().majorProjects.slice(0, 3));
+    i0.ɵɵrepeater(ctx_r2.matrix().majorProjects);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r2.matrix().majorProjects.length > 3 ? 31 : -1);
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r2.matrix().majorProjects.length === 0 ? 32 : -1);
+    i0.ɵɵconditional(ctx_r2.matrix().majorProjects.length === 0 ? 33 : -1);
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r2.getQuadrantClasses("fill-ins"));
     i0.ɵɵadvance(3);
@@ -102420,10 +102393,8 @@ function UnifiedPriorityMatrixComponent_Conditional_0_Template(rf, ctx) { if (rf
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngClass", ctx_r2.subtitleClasses());
     i0.ɵɵadvance(3);
-    i0.ɵɵrepeater(ctx_r2.matrix().fillIns.slice(0, 3));
+    i0.ɵɵrepeater(ctx_r2.matrix().fillIns);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r2.matrix().fillIns.length > 3 ? 43 : -1);
-    i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r2.matrix().fillIns.length === 0 ? 44 : -1);
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r2.getQuadrantClasses("time-permitting"));
@@ -102432,11 +102403,15 @@ function UnifiedPriorityMatrixComponent_Conditional_0_Template(rf, ctx) { if (rf
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngClass", ctx_r2.subtitleClasses());
     i0.ɵɵadvance(3);
-    i0.ɵɵrepeater(ctx_r2.matrix().thankless.slice(0, 3));
+    i0.ɵɵrepeater(ctx_r2.matrix().thankless);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r2.matrix().thankless.length === 0 ? 55 : -1);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r2.matrix().thankless.length > 3 ? 55 : -1);
+    i0.ɵɵproperty("ngClass", ctx_r2.axisLineHorizontalClasses());
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r2.axisLabelBgClasses());
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r2.matrix().thankless.length === 0 ? 56 : -1);
+    i0.ɵɵproperty("ngClass", ctx_r2.axisLabelClasses());
 } }
 class UnifiedPriorityMatrixComponent {
     constructor() {
@@ -102453,6 +102428,15 @@ class UnifiedPriorityMatrixComponent {
             ? 'bg-white border border-slate-200'
             : 'bg-slate-800/50 border border-slate-700/50', ...(ngDevMode ? [{ debugName: "containerClasses" }] : []));
         this.axisLabelClasses = computed(() => this.isLightMode() ? 'text-slate-400' : 'text-slate-500', ...(ngDevMode ? [{ debugName: "axisLabelClasses" }] : []));
+        this.axisLineClasses = computed(() => this.isLightMode()
+            ? 'bg-gradient-to-b from-blue-400 via-cyan-400 to-teal-400'
+            : 'bg-gradient-to-b from-blue-600 via-cyan-600 to-teal-600', ...(ngDevMode ? [{ debugName: "axisLineClasses" }] : []));
+        this.axisLineHorizontalClasses = computed(() => this.isLightMode()
+            ? 'bg-gradient-to-r from-blue-400 via-cyan-400 to-teal-400'
+            : 'bg-gradient-to-r from-blue-600 via-cyan-600 to-teal-600', ...(ngDevMode ? [{ debugName: "axisLineHorizontalClasses" }] : []));
+        this.axisLabelBgClasses = computed(() => this.isLightMode()
+            ? 'bg-white'
+            : 'bg-slate-800', ...(ngDevMode ? [{ debugName: "axisLabelBgClasses" }] : []));
         this.titleClasses = computed(() => this.isLightMode() ? 'text-slate-800' : 'text-white', ...(ngDevMode ? [{ debugName: "titleClasses" }] : []));
         this.subtitleClasses = computed(() => this.isLightMode() ? 'text-slate-500' : 'text-slate-400', ...(ngDevMode ? [{ debugName: "subtitleClasses" }] : []));
         this.sourceIndicatorClasses = computed(() => this.isLightMode()
@@ -102501,8 +102485,8 @@ class UnifiedPriorityMatrixComponent {
         this.goalClick.emit(goal);
     }
     static { this.ɵfac = function UnifiedPriorityMatrixComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || UnifiedPriorityMatrixComponent)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: UnifiedPriorityMatrixComponent, selectors: [["symphiq-unified-priority-matrix"]], inputs: { matrix: [1, "matrix"], viewMode: [1, "viewMode"] }, outputs: { goalClick: "goalClick" }, decls: 1, vars: 1, consts: [["id", "section-priority-matrix", 1, "space-y-6", "scroll-mt-24"], [3, "viewMode", "sectionIcon"], ["title", "Priority Matrix", 3, "icon", "viewMode"], [1, "rounded-2xl", "p-6", "shadow-xl", 3, "ngClass"], [1, "grid", "grid-cols-2", "gap-4", "relative"], [1, "absolute", "-left-2", "top-1/2", "-translate-y-1/2", "-rotate-90", "text-xs", "font-semibold", "uppercase", "tracking-wider", "whitespace-nowrap", "origin-center", 3, "ngClass"], [1, "absolute", "bottom-0", "left-1/2", "-translate-x-1/2", "translate-y-6", "text-xs", "font-semibold", "uppercase", "tracking-wider", 3, "ngClass"], [1, "rounded-xl", "p-4", "min-h-[180px]", 3, "ngClass"], [1, "flex", "items-center", "gap-2", "mb-3"], [1, "w-3", "h-3", "rounded-full", "bg-green-500"], [1, "text-sm", "font-semibold", 3, "ngClass"], [1, "text-xs", "mb-3", 3, "ngClass"], [1, "space-y-2"], ["type", "button", 1, "w-full", "text-left", "p-2", "rounded-lg", "text-sm", "transition-all", "hover:scale-[1.02]", 3, "ngClass"], [1, "text-xs", "text-center", 3, "ngClass"], [1, "text-xs", "text-center", "py-4", 3, "ngClass"], [1, "w-3", "h-3", "rounded-full", "bg-amber-500"], [1, "w-3", "h-3", "rounded-full", "bg-blue-500"], [1, "w-3", "h-3", "rounded-full", "bg-slate-400"], ["type", "button", 1, "w-full", "text-left", "p-2", "rounded-lg", "text-sm", "transition-all", "hover:scale-[1.02]", 3, "click", "ngClass"], [1, "flex", "items-center", "gap-2"], [1, "line-clamp-1", "flex-1"], [1, "text-xs", 3, "ngClass"]], template: function UnifiedPriorityMatrixComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵconditionalCreate(0, UnifiedPriorityMatrixComponent_Conditional_0_Template, 57, 31, "section", 0);
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: UnifiedPriorityMatrixComponent, selectors: [["symphiq-unified-priority-matrix"]], inputs: { matrix: [1, "matrix"], viewMode: [1, "viewMode"] }, outputs: { goalClick: "goalClick" }, decls: 1, vars: 1, consts: [["id", "section-priority-matrix", 1, "space-y-6", "scroll-mt-24"], [3, "viewMode", "sectionIcon"], ["title", "Priority Matrix", 3, "icon", "viewMode"], [1, "rounded-2xl", "p-6", "shadow-xl", 3, "ngClass"], [1, "flex", "gap-4"], [1, "flex", "flex-col", "items-center", "justify-center", "relative", "w-6"], [1, "absolute", "inset-y-0", "left-1/2", "-translate-x-1/2", "w-0.5", 3, "ngClass"], [1, "-rotate-90", "text-xs", "font-semibold", "uppercase", "tracking-wider", "whitespace-nowrap", "px-2", "py-1", "rounded-md", "z-10", 3, "ngClass"], [3, "ngClass"], [1, "flex-1", "flex", "flex-col", "gap-4"], [1, "grid", "grid-cols-2", "gap-4"], [1, "rounded-xl", "p-4", "min-h-[180px]", 3, "ngClass"], [1, "flex", "items-center", "gap-2", "mb-3"], [1, "w-3", "h-3", "rounded-full", "bg-green-500"], [1, "text-sm", "font-semibold", 3, "ngClass"], [1, "text-xs", "mb-3", 3, "ngClass"], [1, "space-y-2"], ["type", "button", 1, "w-full", "text-left", "p-2", "rounded-lg", "text-sm", "transition-all", "hover:scale-[1.02]", 3, "ngClass"], [1, "text-xs", "text-center", "py-4", 3, "ngClass"], [1, "w-3", "h-3", "rounded-full", "bg-amber-500"], [1, "w-3", "h-3", "rounded-full", "bg-blue-500"], [1, "w-3", "h-3", "rounded-full", "bg-slate-400"], [1, "flex", "items-center", "justify-center", "relative", "h-6"], [1, "absolute", "inset-x-0", "top-1/2", "-translate-y-1/2", "h-0.5", 3, "ngClass"], [1, "text-xs", "font-semibold", "uppercase", "tracking-wider", "px-2", "py-1", "rounded-md", "z-10", 3, "ngClass"], ["type", "button", 1, "w-full", "text-left", "p-2", "rounded-lg", "text-sm", "transition-all", "hover:scale-[1.02]", 3, "click", "ngClass"], [1, "flex", "items-center", "gap-2"], [1, "line-clamp-1", "flex-1"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4", "flex-shrink-0", "opacity-60"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M9 5l7 7-7 7"]], template: function UnifiedPriorityMatrixComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵconditionalCreate(0, UnifiedPriorityMatrixComponent_Conditional_0_Template, 61, 31, "section", 0);
         } if (rf & 2) {
             i0.ɵɵconditional(ctx.hasGoals() ? 0 : -1);
         } }, dependencies: [CommonModule, i1$1.NgClass, SectionDividerComponent, SectionHeaderComponent], encapsulation: 2, changeDetection: 0 }); }
@@ -102528,135 +102512,134 @@ class UnifiedPriorityMatrixComponent {
         />
 
         <div [ngClass]="containerClasses()" class="rounded-2xl p-6 shadow-xl">
-          <div class="grid grid-cols-2 gap-4 relative">
-            <div [ngClass]="axisLabelClasses()" class="absolute -left-2 top-1/2 -translate-y-1/2 -rotate-90 text-xs font-semibold uppercase tracking-wider whitespace-nowrap origin-center">
-              Impact
-            </div>
-            <div [ngClass]="axisLabelClasses()" class="absolute bottom-0 left-1/2 -translate-x-1/2 translate-y-6 text-xs font-semibold uppercase tracking-wider">
-              Effort
-            </div>
-
-            <!-- Quick Wins: High Impact / Low Effort -->
-            <div [ngClass]="getQuadrantClasses('quick-wins')" class="rounded-xl p-4 min-h-[180px]">
-              <div class="flex items-center gap-2 mb-3">
-                <div class="w-3 h-3 rounded-full bg-green-500"></div>
-                <h4 [ngClass]="titleClasses()" class="text-sm font-semibold">Quick Wins</h4>
-              </div>
-              <p [ngClass]="subtitleClasses()" class="text-xs mb-3">High Impact / Low Effort</p>
-              <div class="space-y-2">
-                @for (goal of matrix().quickWins.slice(0, 3); track goal.id) {
-                  <button
-                    type="button"
-                    [ngClass]="getGoalClasses('quickWins')"
-                    class="w-full text-left p-2 rounded-lg text-sm transition-all hover:scale-[1.02]"
-                    (click)="onGoalClick(goal)">
-                    <div class="flex items-center gap-2">
-                      <span class="line-clamp-1 flex-1">{{ goal.title }}</span>
-                      @if ((goal.sourceAnalyses?.length ?? 0) > 0) {
-                        <span [ngClass]="sourceIndicatorClasses()" class="text-xs">{{ (goal.sourceAnalyses?.length ?? 0) }}</span>
-                      }
-                    </div>
-                  </button>
-                }
-                @if (matrix().quickWins.length > 3) {
-                  <div [ngClass]="moreGoalsClasses()" class="text-xs text-center">+{{ matrix().quickWins.length - 3 }} more</div>
-                }
-                @if (matrix().quickWins.length === 0) {
-                  <div [ngClass]="emptyClasses()" class="text-xs text-center py-4">No goals</div>
-                }
+          <div class="flex gap-4">
+            <div class="flex flex-col items-center justify-center relative w-6">
+              <div [ngClass]="axisLineClasses()" class="absolute inset-y-0 left-1/2 -translate-x-1/2 w-0.5"></div>
+              <div [ngClass]="axisLabelBgClasses()" class="-rotate-90 text-xs font-semibold uppercase tracking-wider whitespace-nowrap px-2 py-1 rounded-md z-10">
+                <span [ngClass]="axisLabelClasses()">Impact</span>
               </div>
             </div>
 
-            <!-- Major Projects: High Impact / High Effort -->
-            <div [ngClass]="getQuadrantClasses('major-projects')" class="rounded-xl p-4 min-h-[180px]">
-              <div class="flex items-center gap-2 mb-3">
-                <div class="w-3 h-3 rounded-full bg-amber-500"></div>
-                <h4 [ngClass]="titleClasses()" class="text-sm font-semibold">Major Projects</h4>
-              </div>
-              <p [ngClass]="subtitleClasses()" class="text-xs mb-3">High Impact / High Effort</p>
-              <div class="space-y-2">
-                @for (goal of matrix().majorProjects.slice(0, 3); track goal.id) {
-                  <button
-                    type="button"
-                    [ngClass]="getGoalClasses('majorProjects')"
-                    class="w-full text-left p-2 rounded-lg text-sm transition-all hover:scale-[1.02]"
-                    (click)="onGoalClick(goal)">
-                    <div class="flex items-center gap-2">
-                      <span class="line-clamp-1 flex-1">{{ goal.title }}</span>
-                      @if ((goal.sourceAnalyses?.length ?? 0) > 0) {
-                        <span [ngClass]="sourceIndicatorClasses()" class="text-xs">{{ (goal.sourceAnalyses?.length ?? 0) }}</span>
-                      }
-                    </div>
-                  </button>
-                }
-                @if (matrix().majorProjects.length > 3) {
-                  <div [ngClass]="moreGoalsClasses()" class="text-xs text-center">+{{ matrix().majorProjects.length - 3 }} more</div>
-                }
-                @if (matrix().majorProjects.length === 0) {
-                  <div [ngClass]="emptyClasses()" class="text-xs text-center py-4">No goals</div>
-                }
-              </div>
-            </div>
+            <div class="flex-1 flex flex-col gap-4">
+              <div class="grid grid-cols-2 gap-4">
+                <!-- Quick Wins: High Impact / Low Effort -->
+                <div [ngClass]="getQuadrantClasses('quick-wins')" class="rounded-xl p-4 min-h-[180px]">
+                  <div class="flex items-center gap-2 mb-3">
+                    <div class="w-3 h-3 rounded-full bg-green-500"></div>
+                    <h4 [ngClass]="titleClasses()" class="text-sm font-semibold">Quick Wins</h4>
+                  </div>
+                  <p [ngClass]="subtitleClasses()" class="text-xs mb-3">High Impact / Low Effort</p>
+                  <div class="space-y-2">
+                    @for (goal of matrix().quickWins; track goal.id) {
+                      <button
+                        type="button"
+                        [ngClass]="getGoalClasses('quickWins')"
+                        class="w-full text-left p-2 rounded-lg text-sm transition-all hover:scale-[1.02]"
+                        (click)="onGoalClick(goal)">
+                        <div class="flex items-center gap-2">
+                          <span class="line-clamp-1 flex-1">{{ goal.title }}</span>
+                          <svg class="w-4 h-4 flex-shrink-0 opacity-60" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
+                          </svg>
+                        </div>
+                      </button>
+                    }
+                    @if (matrix().quickWins.length === 0) {
+                      <div [ngClass]="emptyClasses()" class="text-xs text-center py-4">No goals</div>
+                    }
+                  </div>
+                </div>
 
-            <!-- Fill-Ins: Low Impact / Low Effort -->
-            <div [ngClass]="getQuadrantClasses('fill-ins')" class="rounded-xl p-4 min-h-[180px]">
-              <div class="flex items-center gap-2 mb-3">
-                <div class="w-3 h-3 rounded-full bg-blue-500"></div>
-                <h4 [ngClass]="titleClasses()" class="text-sm font-semibold">Fill-Ins</h4>
-              </div>
-              <p [ngClass]="subtitleClasses()" class="text-xs mb-3">Low Impact / Low Effort</p>
-              <div class="space-y-2">
-                @for (goal of matrix().fillIns.slice(0, 3); track goal.id) {
-                  <button
-                    type="button"
-                    [ngClass]="getGoalClasses('fillIns')"
-                    class="w-full text-left p-2 rounded-lg text-sm transition-all hover:scale-[1.02]"
-                    (click)="onGoalClick(goal)">
-                    <div class="flex items-center gap-2">
-                      <span class="line-clamp-1 flex-1">{{ goal.title }}</span>
-                      @if ((goal.sourceAnalyses?.length ?? 0) > 0) {
-                        <span [ngClass]="sourceIndicatorClasses()" class="text-xs">{{ (goal.sourceAnalyses?.length ?? 0) }}</span>
-                      }
-                    </div>
-                  </button>
-                }
-                @if (matrix().fillIns.length > 3) {
-                  <div [ngClass]="moreGoalsClasses()" class="text-xs text-center">+{{ matrix().fillIns.length - 3 }} more</div>
-                }
-                @if (matrix().fillIns.length === 0) {
-                  <div [ngClass]="emptyClasses()" class="text-xs text-center py-4">No goals</div>
-                }
-              </div>
-            </div>
+                <!-- Major Projects: High Impact / High Effort -->
+                <div [ngClass]="getQuadrantClasses('major-projects')" class="rounded-xl p-4 min-h-[180px]">
+                  <div class="flex items-center gap-2 mb-3">
+                    <div class="w-3 h-3 rounded-full bg-amber-500"></div>
+                    <h4 [ngClass]="titleClasses()" class="text-sm font-semibold">Major Projects</h4>
+                  </div>
+                  <p [ngClass]="subtitleClasses()" class="text-xs mb-3">High Impact / High Effort</p>
+                  <div class="space-y-2">
+                    @for (goal of matrix().majorProjects; track goal.id) {
+                      <button
+                        type="button"
+                        [ngClass]="getGoalClasses('majorProjects')"
+                        class="w-full text-left p-2 rounded-lg text-sm transition-all hover:scale-[1.02]"
+                        (click)="onGoalClick(goal)">
+                        <div class="flex items-center gap-2">
+                          <span class="line-clamp-1 flex-1">{{ goal.title }}</span>
+                          <svg class="w-4 h-4 flex-shrink-0 opacity-60" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
+                          </svg>
+                        </div>
+                      </button>
+                    }
+                    @if (matrix().majorProjects.length === 0) {
+                      <div [ngClass]="emptyClasses()" class="text-xs text-center py-4">No goals</div>
+                    }
+                  </div>
+                </div>
+
+                <!-- Fill-Ins: Low Impact / Low Effort -->
+                <div [ngClass]="getQuadrantClasses('fill-ins')" class="rounded-xl p-4 min-h-[180px]">
+                  <div class="flex items-center gap-2 mb-3">
+                    <div class="w-3 h-3 rounded-full bg-blue-500"></div>
+                    <h4 [ngClass]="titleClasses()" class="text-sm font-semibold">Fill-Ins</h4>
+                  </div>
+                  <p [ngClass]="subtitleClasses()" class="text-xs mb-3">Low Impact / Low Effort</p>
+                  <div class="space-y-2">
+                    @for (goal of matrix().fillIns; track goal.id) {
+                      <button
+                        type="button"
+                        [ngClass]="getGoalClasses('fillIns')"
+                        class="w-full text-left p-2 rounded-lg text-sm transition-all hover:scale-[1.02]"
+                        (click)="onGoalClick(goal)">
+                        <div class="flex items-center gap-2">
+                          <span class="line-clamp-1 flex-1">{{ goal.title }}</span>
+                          <svg class="w-4 h-4 flex-shrink-0 opacity-60" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
+                          </svg>
+                        </div>
+                      </button>
+                    }
+                    @if (matrix().fillIns.length === 0) {
+                      <div [ngClass]="emptyClasses()" class="text-xs text-center py-4">No goals</div>
+                    }
+                  </div>
+                </div>
 
-            <!-- Time Permitting: Low Impact / High Effort -->
-            <div [ngClass]="getQuadrantClasses('time-permitting')" class="rounded-xl p-4 min-h-[180px]">
-              <div class="flex items-center gap-2 mb-3">
-                <div class="w-3 h-3 rounded-full bg-slate-400"></div>
-                <h4 [ngClass]="titleClasses()" class="text-sm font-semibold">Time Permitting</h4>
+                <!-- Time Permitting: Low Impact / High Effort -->
+                <div [ngClass]="getQuadrantClasses('time-permitting')" class="rounded-xl p-4 min-h-[180px]">
+                  <div class="flex items-center gap-2 mb-3">
+                    <div class="w-3 h-3 rounded-full bg-slate-400"></div>
+                    <h4 [ngClass]="titleClasses()" class="text-sm font-semibold">Time Permitting</h4>
+                  </div>
+                  <p [ngClass]="subtitleClasses()" class="text-xs mb-3">Low Impact / High Effort</p>
+                  <div class="space-y-2">
+                    @for (goal of matrix().thankless; track goal.id) {
+                      <button
+                        type="button"
+                        [ngClass]="getGoalClasses('thankless')"
+                        class="w-full text-left p-2 rounded-lg text-sm transition-all hover:scale-[1.02]"
+                        (click)="onGoalClick(goal)">
+                        <div class="flex items-center gap-2">
+                          <span class="line-clamp-1 flex-1">{{ goal.title }}</span>
+                          <svg class="w-4 h-4 flex-shrink-0 opacity-60" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
+                          </svg>
+                        </div>
+                      </button>
+                    }
+                    @if (matrix().thankless.length === 0) {
+                      <div [ngClass]="emptyClasses()" class="text-xs text-center py-4">No goals</div>
+                    }
+                  </div>
+                </div>
               </div>
-              <p [ngClass]="subtitleClasses()" class="text-xs mb-3">Low Impact / High Effort</p>
-              <div class="space-y-2">
-                @for (goal of matrix().thankless.slice(0, 3); track goal.id) {
-                  <button
-                    type="button"
-                    [ngClass]="getGoalClasses('thankless')"
-                    class="w-full text-left p-2 rounded-lg text-sm transition-all hover:scale-[1.02]"
-                    (click)="onGoalClick(goal)">
-                    <div class="flex items-center gap-2">
-                      <span class="line-clamp-1 flex-1">{{ goal.title }}</span>
-                      @if ((goal.sourceAnalyses?.length ?? 0) > 0) {
-                        <span [ngClass]="sourceIndicatorClasses()" class="text-xs">{{ (goal.sourceAnalyses?.length ?? 0) }}</span>
-                      }
-                    </div>
-                  </button>
-                }
-                @if (matrix().thankless.length > 3) {
-                  <div [ngClass]="moreGoalsClasses()" class="text-xs text-center">+{{ matrix().thankless.length - 3 }} more</div>
-                }
-                @if (matrix().thankless.length === 0) {
-                  <div [ngClass]="emptyClasses()" class="text-xs text-center py-4">No goals</div>
-                }
+
+              <div class="flex items-center justify-center relative h-6">
+                <div [ngClass]="axisLineHorizontalClasses()" class="absolute inset-x-0 top-1/2 -translate-y-1/2 h-0.5"></div>
+                <div [ngClass]="axisLabelBgClasses()" class="text-xs font-semibold uppercase tracking-wider px-2 py-1 rounded-md z-10">
+                  <span [ngClass]="axisLabelClasses()">Effort</span>
+                </div>
               </div>
             </div>
           </div>
@@ -102666,7 +102649,7 @@ class UnifiedPriorityMatrixComponent {
   `
             }]
     }], null, { matrix: [{ type: i0.Input, args: [{ isSignal: true, alias: "matrix", required: true }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], goalClick: [{ type: i0.Output, args: ["goalClick"] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(UnifiedPriorityMatrixComponent, { className: "UnifiedPriorityMatrixComponent", filePath: "lib/components/profile-analysis-unified-dashboard/cards/unified-priority-matrix.component.ts", lineNumber: 171 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(UnifiedPriorityMatrixComponent, { className: "UnifiedPriorityMatrixComponent", filePath: "lib/components/profile-analysis-unified-dashboard/cards/unified-priority-matrix.component.ts", lineNumber: 170 }); })();
 
 const _c0$9 = a0 => ({ name: "arrow-right-circle", source: a0 });
 const _forTrack0$9 = ($index, $item) => $item.title;
@@ -102715,6 +102698,64 @@ function UnifiedNextStepsComponent_Conditional_0_For_5_Conditional_10_Template(r
     i0.ɵɵadvance(3);
     i0.ɵɵrepeater(step_r1.strategies);
 } }
+function UnifiedNextStepsComponent_Conditional_0_For_5_Conditional_11_Template(rf, ctx) { if (rf & 1) {
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 11)(1, "div", 12);
+    i0.ɵɵtext(2, " Linked Goal ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "div", 18);
+    i0.ɵɵlistener("click", function UnifiedNextStepsComponent_Conditional_0_For_5_Conditional_11_Template_div_click_3_listener() { i0.ɵɵrestoreView(_r4); const step_r1 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onGoalChipClick(ctx_r1.getLinkedGoal(step_r1))); });
+    i0.ɵɵelementStart(4, "span", 19);
+    i0.ɵɵtext(5);
+    i0.ɵɵelementEnd();
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵelementStart(6, "svg", 20);
+    i0.ɵɵelement(7, "path", 21);
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const step_r1 = i0.ɵɵnextContext().$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("ngClass", ctx_r1.borderClasses());
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r1.strategiesLabelClasses());
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngClass", ctx_r1.goalChipClasses());
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(ctx_r1.getLinkedGoal(step_r1).title);
+} }
+function UnifiedNextStepsComponent_Conditional_0_For_5_Conditional_12_For_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 23)(1, "span", 24);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const domain_r5 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(4);
+    i0.ɵɵproperty("ngClass", ctx_r1.domainChipClasses());
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r1.tooltipClasses());
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r1.getDomainSubtitle(domain_r5));
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.getDomainTitle(domain_r5), " ");
+} }
+function UnifiedNextStepsComponent_Conditional_0_For_5_Conditional_12_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 11)(1, "div", 12);
+    i0.ɵɵtext(2, " Related Domains ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "div", 22);
+    i0.ɵɵrepeaterCreate(4, UnifiedNextStepsComponent_Conditional_0_For_5_Conditional_12_For_5_Template, 4, 4, "div", 23, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const step_r1 = i0.ɵɵnextContext().$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("ngClass", ctx_r1.borderClasses());
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r1.strategiesLabelClasses());
+    i0.ɵɵadvance(3);
+    i0.ɵɵrepeater(step_r1.relatedDomains);
+} }
 function UnifiedNextStepsComponent_Conditional_0_For_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 4)(1, "div", 5)(2, "div", 6);
     i0.ɵɵtext(3);
@@ -102727,20 +102768,22 @@ function UnifiedNextStepsComponent_Conditional_0_For_5_Template(rf, ctx) { if (r
     i0.ɵɵelementEnd()()();
     i0.ɵɵconditionalCreate(9, UnifiedNextStepsComponent_Conditional_0_For_5_Conditional_9_Template, 2, 2, "p", 10);
     i0.ɵɵconditionalCreate(10, UnifiedNextStepsComponent_Conditional_0_For_5_Conditional_10_Template, 6, 2, "div", 11);
+    i0.ɵɵconditionalCreate(11, UnifiedNextStepsComponent_Conditional_0_For_5_Conditional_11_Template, 8, 4, "div", 11);
+    i0.ɵɵconditionalCreate(12, UnifiedNextStepsComponent_Conditional_0_For_5_Conditional_12_Template, 6, 2, "div", 11);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const step_r1 = ctx.$implicit;
-    const ɵ$index_10_r4 = ctx.$index;
+    const ɵ$index_10_r6 = ctx.$index;
     const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("ngClass", ctx_r1.getCardClasses(ɵ$index_10_r4));
+    i0.ɵɵproperty("ngClass", ctx_r1.getCardClasses(ɵ$index_10_r6));
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngClass", ctx_r1.getNumberClasses(ɵ$index_10_r4));
+    i0.ɵɵproperty("ngClass", ctx_r1.getNumberClasses(ɵ$index_10_r6));
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ɵ$index_10_r4 + 1, " ");
+    i0.ɵɵtextInterpolate1(" ", ɵ$index_10_r6 + 1, " ");
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngClass", ctx_r1.getCategoryClasses(ɵ$index_10_r4));
+    i0.ɵɵproperty("ngClass", ctx_r1.getCategoryClasses(ɵ$index_10_r6));
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r1.getCategory(ɵ$index_10_r4), " ");
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.getCategory(ɵ$index_10_r6), " ");
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r1.titleClasses());
     i0.ɵɵadvance();
@@ -102749,12 +102792,16 @@ function UnifiedNextStepsComponent_Conditional_0_For_5_Template(rf, ctx) { if (r
     i0.ɵɵconditional(step_r1.description ? 9 : -1);
     i0.ɵɵadvance();
     i0.ɵɵconditional(step_r1.strategies && step_r1.strategies.length > 0 ? 10 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.getLinkedGoal(step_r1) ? 11 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(step_r1.relatedDomains && step_r1.relatedDomains.length > 0 ? 12 : -1);
 } }
 function UnifiedNextStepsComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "section", 0);
     i0.ɵɵelement(1, "symphiq-section-divider", 1)(2, "symphiq-section-header", 2);
     i0.ɵɵelementStart(3, "div", 3);
-    i0.ɵɵrepeaterCreate(4, UnifiedNextStepsComponent_Conditional_0_For_5_Template, 11, 9, "div", 4, _forTrack0$9);
+    i0.ɵɵrepeaterCreate(4, UnifiedNextStepsComponent_Conditional_0_For_5_Template, 13, 11, "div", 4, _forTrack0$9);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -102769,6 +102816,8 @@ class UnifiedNextStepsComponent {
     constructor() {
         this.steps = input.required(...(ngDevMode ? [{ debugName: "steps" }] : []));
         this.viewMode = input(ViewModeEnum.DARK, ...(ngDevMode ? [{ debugName: "viewMode" }] : []));
+        this.goals = input([], ...(ngDevMode ? [{ debugName: "goals" }] : []));
+        this.goalClick = output();
         this.IconSourceEnum = IconSourceEnum;
         this.isLightMode = computed(() => this.viewMode() === ViewModeEnum.LIGHT, ...(ngDevMode ? [{ debugName: "isLightMode" }] : []));
         this.titleClasses = computed(() => this.isLightMode() ? 'text-slate-900' : 'text-white', ...(ngDevMode ? [{ debugName: "titleClasses" }] : []));
@@ -102776,6 +102825,15 @@ class UnifiedNextStepsComponent {
         this.borderClasses = computed(() => this.isLightMode() ? 'border-slate-200' : 'border-slate-700', ...(ngDevMode ? [{ debugName: "borderClasses" }] : []));
         this.strategiesLabelClasses = computed(() => this.isLightMode() ? 'text-slate-500' : 'text-slate-400', ...(ngDevMode ? [{ debugName: "strategiesLabelClasses" }] : []));
         this.strategyItemClasses = computed(() => this.isLightMode() ? 'text-slate-700' : 'text-slate-300', ...(ngDevMode ? [{ debugName: "strategyItemClasses" }] : []));
+        this.goalChipClasses = computed(() => this.isLightMode()
+            ? 'bg-violet-50 border border-violet-200 text-violet-700 hover:bg-violet-100'
+            : 'bg-violet-900/30 border border-violet-700/50 text-violet-300', ...(ngDevMode ? [{ debugName: "goalChipClasses" }] : []));
+        this.domainChipClasses = computed(() => this.isLightMode()
+            ? 'bg-slate-100 text-slate-700 border border-slate-200 hover:bg-slate-200'
+            : 'bg-slate-700/50 text-slate-300 border border-slate-600 hover:bg-slate-700', ...(ngDevMode ? [{ debugName: "domainChipClasses" }] : []));
+        this.tooltipClasses = computed(() => this.isLightMode()
+            ? 'bg-slate-800 text-white [&::after]:border-t-slate-800 [&::after]:border-x-transparent [&::after]:border-b-transparent'
+            : 'bg-slate-200 text-slate-900 [&::after]:border-t-slate-200 [&::after]:border-x-transparent [&::after]:border-b-transparent', ...(ngDevMode ? [{ debugName: "tooltipClasses" }] : []));
     }
     getCategory(idx) {
         if (idx === 0)
@@ -102832,21 +102890,30 @@ class UnifiedNextStepsComponent {
             return 'text-slate-400';
         }
     }
+    getLinkedGoal(step) {
+        if (!step.linkedGoalId)
+            return undefined;
+        return this.goals().find(g => g.id === step.linkedGoalId);
+    }
+    onGoalChipClick(goal) {
+        this.goalClick.emit(goal);
+    }
+    getDomainTitle(domain) {
+        return FocusAreaDomainEnumUtil.title(domain);
+    }
+    getDomainSubtitle(domain) {
+        return FocusAreaDomainEnumUtil.subtitle(domain);
+    }
     static { this.ɵfac = function UnifiedNextStepsComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || UnifiedNextStepsComponent)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: UnifiedNextStepsComponent, selectors: [["symphiq-unified-next-steps"]], inputs: { steps: [1, "steps"], viewMode: [1, "viewMode"] }, decls: 1, vars: 1, consts: [["id", "section-next-steps", 1, "space-y-6", "scroll-mt-24"], [3, "viewMode", "sectionIcon"], ["title", "Next Steps", 3, "icon", "viewMode"], [1, "grid", "grid-cols-1", "md:grid-cols-2", "lg:grid-cols-3", "gap-6"], [1, "rounded-2xl", "p-6", "shadow-lg", "transition-all", "hover:shadow-xl", 3, "ngClass"], [1, "flex", "items-start", "gap-4", "mb-4"], [1, "w-10", "h-10", "rounded-full", "flex", "items-center", "justify-center", "text-lg", "font-bold", "flex-shrink-0", 3, "ngClass"], [1, "flex-1"], [1, "text-xs", "font-semibold", "uppercase", "mb-1", 3, "ngClass"], [1, "text-base", "font-semibold", "line-clamp-2", 3, "ngClass"], [1, "text-sm", "mb-4", "line-clamp-3", 3, "ngClass"], [1, "mt-4", "pt-4", "border-t", 3, "ngClass"], [1, "text-xs", "font-semibold", "uppercase", "mb-2", 3, "ngClass"], [1, "space-y-2"], [1, "flex", "items-start", "gap-2", "text-sm", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4", "mt-0.5", "flex-shrink-0"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M13 7l5 5m0 0l-5 5m5-5H6"], [1, "line-clamp-2"]], template: function UnifiedNextStepsComponent_Template(rf, ctx) { if (rf & 1) {
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: UnifiedNextStepsComponent, selectors: [["symphiq-unified-next-steps"]], inputs: { steps: [1, "steps"], viewMode: [1, "viewMode"], goals: [1, "goals"] }, outputs: { goalClick: "goalClick" }, decls: 1, vars: 1, consts: [["id", "section-next-steps", 1, "space-y-6", "scroll-mt-24"], [3, "viewMode", "sectionIcon"], ["title", "Next Steps", 3, "icon", "viewMode"], [1, "grid", "grid-cols-1", "md:grid-cols-2", "lg:grid-cols-3", "gap-6"], [1, "rounded-2xl", "p-6", "shadow-lg", "transition-all", "hover:shadow-xl", 3, "ngClass"], [1, "flex", "items-start", "gap-4", "mb-4"], [1, "w-10", "h-10", "rounded-full", "flex", "items-center", "justify-center", "text-lg", "font-bold", "flex-shrink-0", 3, "ngClass"], [1, "flex-1"], [1, "text-xs", "font-semibold", "uppercase", "mb-1", 3, "ngClass"], [1, "text-base", "font-semibold", "line-clamp-2", 3, "ngClass"], [1, "text-sm", "mb-4", "line-clamp-3", 3, "ngClass"], [1, "mt-4", "pt-4", "border-t", 3, "ngClass"], [1, "text-xs", "font-semibold", "uppercase", "mb-2", 3, "ngClass"], [1, "space-y-2"], [1, "flex", "items-start", "gap-2", "text-sm", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4", "mt-0.5", "flex-shrink-0"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M13 7l5 5m0 0l-5 5m5-5H6"], [1, "line-clamp-2"], [1, "goal-chip", "flex", "items-center", "justify-between", "gap-2", "px-3", "py-2", "rounded-lg", "cursor-pointer", 3, "click", "ngClass"], [1, "text-sm", "font-medium", "line-clamp-1"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4", "flex-shrink-0"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M9 5l7 7-7 7"], [1, "flex", "flex-wrap", "gap-2"], [1, "domain-chip", "px-2", "py-1", "rounded-md", "text-xs", "font-medium", 3, "ngClass"], [1, "tooltip", 3, "ngClass"]], template: function UnifiedNextStepsComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵconditionalCreate(0, UnifiedNextStepsComponent_Conditional_0_Template, 6, 8, "section", 0);
         } if (rf & 2) {
             i0.ɵɵconditional(ctx.steps().length > 0 ? 0 : -1);
-        } }, dependencies: [CommonModule, i1$1.NgClass, SectionDividerComponent, SectionHeaderComponent], encapsulation: 2, changeDetection: 0 }); }
+        } }, dependencies: [CommonModule, i1$1.NgClass, SectionDividerComponent, SectionHeaderComponent], styles: [".goal-chip[_ngcontent-%COMP%]{transition:all .3s ease}.goal-chip[_ngcontent-%COMP%]:hover{transform:scale(1.03) translate(4px);box-shadow:0 0 15px #8b5cf680,0 0 30px #8b5cf64d;border-color:#8b5cf6cc!important}.domain-chip[_ngcontent-%COMP%]{position:relative}.domain-chip[_ngcontent-%COMP%]   .tooltip[_ngcontent-%COMP%]{visibility:hidden;opacity:0;position:absolute;bottom:100%;left:50%;transform:translate(-50%);padding:6px 10px;border-radius:6px;font-size:12px;white-space:nowrap;z-index:50;transition:opacity .2s ease,visibility .2s ease;margin-bottom:6px}.domain-chip[_ngcontent-%COMP%]   .tooltip[_ngcontent-%COMP%]:after{content:\"\";position:absolute;top:100%;left:50%;transform:translate(-50%);border-width:5px;border-style:solid}.domain-chip[_ngcontent-%COMP%]:hover   .tooltip[_ngcontent-%COMP%]{visibility:visible;opacity:1}"], changeDetection: 0 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(UnifiedNextStepsComponent, [{
         type: Component,
-        args: [{
-                selector: 'symphiq-unified-next-steps',
-                standalone: true,
-                imports: [CommonModule, SectionDividerComponent, SectionHeaderComponent],
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                template: `
+        args: [{ selector: 'symphiq-unified-next-steps', standalone: true, imports: [CommonModule, SectionDividerComponent, SectionHeaderComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: `
     @if (steps().length > 0) {
       <section id="section-next-steps" class="space-y-6 scroll-mt-24">
         <symphiq-section-divider
@@ -102899,15 +102966,47 @@ class UnifiedNextStepsComponent {
                   </div>
                 </div>
               }
+
+              @if (getLinkedGoal(step)) {
+                <div class="mt-4 pt-4 border-t" [ngClass]="borderClasses()">
+                  <div [ngClass]="strategiesLabelClasses()" class="text-xs font-semibold uppercase mb-2">
+                    Linked Goal
+                  </div>
+                  <div
+                    [ngClass]="goalChipClasses()"
+                    class="goal-chip flex items-center justify-between gap-2 px-3 py-2 rounded-lg cursor-pointer"
+                    (click)="onGoalChipClick(getLinkedGoal(step)!)">
+                    <span class="text-sm font-medium line-clamp-1">{{ getLinkedGoal(step)!.title }}</span>
+                    <svg class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
+                    </svg>
+                  </div>
+                </div>
+              }
+
+              @if (step.relatedDomains && step.relatedDomains.length > 0) {
+                <div class="mt-4 pt-4 border-t" [ngClass]="borderClasses()">
+                  <div [ngClass]="strategiesLabelClasses()" class="text-xs font-semibold uppercase mb-2">
+                    Related Domains
+                  </div>
+                  <div class="flex flex-wrap gap-2">
+                    @for (domain of step.relatedDomains; track domain) {
+                      <div [ngClass]="domainChipClasses()" class="domain-chip px-2 py-1 rounded-md text-xs font-medium">
+                        <span [ngClass]="tooltipClasses()" class="tooltip">{{ getDomainSubtitle(domain) }}</span>
+                        {{ getDomainTitle(domain) }}
+                      </div>
+                    }
+                  </div>
+                </div>
+              }
             </div>
           }
         </div>
       </section>
     }
-  `
-            }]
-    }], null, { steps: [{ type: i0.Input, args: [{ isSignal: true, alias: "steps", required: true }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(UnifiedNextStepsComponent, { className: "UnifiedNextStepsComponent", filePath: "lib/components/profile-analysis-unified-dashboard/cards/unified-next-steps.component.ts", lineNumber: 79 }); })();
+  `, styles: [".goal-chip{transition:all .3s ease}.goal-chip:hover{transform:scale(1.03) translate(4px);box-shadow:0 0 15px #8b5cf680,0 0 30px #8b5cf64d;border-color:#8b5cf6cc!important}.domain-chip{position:relative}.domain-chip .tooltip{visibility:hidden;opacity:0;position:absolute;bottom:100%;left:50%;transform:translate(-50%);padding:6px 10px;border-radius:6px;font-size:12px;white-space:nowrap;z-index:50;transition:opacity .2s ease,visibility .2s ease;margin-bottom:6px}.domain-chip .tooltip:after{content:\"\";position:absolute;top:100%;left:50%;transform:translate(-50%);border-width:5px;border-style:solid}.domain-chip:hover .tooltip{visibility:visible;opacity:1}\n"] }]
+    }], null, { steps: [{ type: i0.Input, args: [{ isSignal: true, alias: "steps", required: true }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], goals: [{ type: i0.Input, args: [{ isSignal: true, alias: "goals", required: false }] }], goalClick: [{ type: i0.Output, args: ["goalClick"] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(UnifiedNextStepsComponent, { className: "UnifiedNextStepsComponent", filePath: "lib/components/profile-analysis-unified-dashboard/cards/unified-next-steps.component.ts", lineNumber: 155 }); })();
 
 function SynthesisConfidenceSectionComponent_Conditional_0_Conditional_10_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "p", 8);
@@ -103743,7 +103842,7 @@ function UnifiedDashboardModalComponent_Conditional_0_Conditional_25_Template(rf
     i0.ɵɵelement(0, "symphiq-strategy-recommendations-modal-content", 25);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("strategy", ctx_r1.recommendationsData().strategy)("viewMode", ctx_r1.viewMode())("allMetrics", ctx_r1.allMetricsFromStack())("allCharts", ctx_r1.allChartsFromStack())("allInsights", ctx_r1.allInsightsFromStack())("goalTitle", ctx_r1.recommendationsData().goalTitle)("objectiveTitle", ctx_r1.recommendationsData().objectiveTitle);
+    i0.ɵɵproperty("strategy", ctx_r1.recommendationsData().strategy)("viewMode", ctx_r1.viewMode())("allMetrics", ctx_r1.allMetricsFromStack())("allCharts", ctx_r1.allChartsFromStack())("allInsights", ctx_r1.allInsightsFromStack())("goalTitle", ctx_r1.recommendationsData().goalTitle)("objectiveTitle", ctx_r1.recommendationsData().objectiveTitle)("currentModalState", ctx_r1.currentModalState());
 } }
 function UnifiedDashboardModalComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
@@ -103774,7 +103873,7 @@ function UnifiedDashboardModalComponent_Conditional_0_Template(rf, ctx) { if (rf
     i0.ɵɵconditionalCreate(22, UnifiedDashboardModalComponent_Conditional_0_Conditional_22_Template, 1, 4, "symphiq-goal-objectives-modal-content", 22);
     i0.ɵɵconditionalCreate(23, UnifiedDashboardModalComponent_Conditional_0_Conditional_23_Template, 1, 3, "symphiq-unified-goal-related-metrics-modal-content", 23);
     i0.ɵɵconditionalCreate(24, UnifiedDashboardModalComponent_Conditional_0_Conditional_24_Template, 1, 2, "symphiq-objective-strategies-modal-content", 24);
-    i0.ɵɵconditionalCreate(25, UnifiedDashboardModalComponent_Conditional_0_Conditional_25_Template, 1, 7, "symphiq-strategy-recommendations-modal-content", 25);
+    i0.ɵɵconditionalCreate(25, UnifiedDashboardModalComponent_Conditional_0_Conditional_25_Template, 1, 8, "symphiq-strategy-recommendations-modal-content", 25);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     let tmp_16_0;
@@ -103974,6 +104073,13 @@ class UnifiedDashboardModalComponent {
             const open = this.isOpen();
             if (open) {
                 this.modalReady.set(false);
+                console.log('[UnifiedDashboardModal] Modal opening - z-index info:', {
+                    modalType: this.modalType(),
+                    modalDepth: this.modalDepth(),
+                    baseZIndex: this.baseZIndex(),
+                    contentZIndex: this.contentZIndex(),
+                    previousStateType: this.previousState()?.type
+                });
                 setTimeout(() => {
                     this.moveModalToBody();
                     this.modalReady.set(true);
@@ -104021,6 +104127,7 @@ class UnifiedDashboardModalComponent {
                 this.modalData.set(data);
                 this.modalTitle.set(data.goal.title || 'Unified Goal');
                 this.isOpen.set(true);
+                this.scrollContentToTop();
             }
             else if (state.type === 'unified-goal-objectives' && state.data) {
                 const data = state.data;
@@ -104028,6 +104135,7 @@ class UnifiedDashboardModalComponent {
                 this.modalData.set(data);
                 this.modalTitle.set(data.goal.title || 'Objectives');
                 this.isOpen.set(true);
+                this.scrollContentToTop();
             }
             else if (state.type === 'unified-goal-related-metrics' && state.data) {
                 const data = state.data;
@@ -104035,6 +104143,7 @@ class UnifiedDashboardModalComponent {
                 this.modalData.set(data);
                 this.modalTitle.set('Related Metrics for ' + (data.goal.title || 'Goal'));
                 this.isOpen.set(true);
+                this.scrollContentToTop();
             }
             else if (state.type === 'objective-strategies' && state.data) {
                 const data = state.data;
@@ -104042,6 +104151,7 @@ class UnifiedDashboardModalComponent {
                 this.modalData.set(data);
                 this.modalTitle.set(data.objective.title || 'Strategies');
                 this.isOpen.set(true);
+                this.scrollContentToTop();
             }
             else if (state.type === 'strategy-recommendations' && state.data) {
                 const data = state.data;
@@ -104049,6 +104159,7 @@ class UnifiedDashboardModalComponent {
                 this.modalData.set(data);
                 this.modalTitle.set(data.strategy.title || 'Recommendations');
                 this.isOpen.set(true);
+                this.scrollContentToTop();
             }
             else if (state.type === null) {
                 this.isOpen.set(false);
@@ -104179,6 +104290,13 @@ class UnifiedDashboardModalComponent {
         }
         this.modalMovedToBody = false;
     }
+    scrollContentToTop() {
+        setTimeout(() => {
+            if (this.modalContent?.nativeElement) {
+                this.modalContent.nativeElement.scrollTop = 0;
+            }
+        }, 0);
+    }
     static { this.ɵfac = function UnifiedDashboardModalComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || UnifiedDashboardModalComponent)(); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: UnifiedDashboardModalComponent, selectors: [["symphiq-unified-dashboard-modal"]], viewQuery: function UnifiedDashboardModalComponent_Query(rf, ctx) { if (rf & 1) {
             i0.ɵɵviewQuery(_c0$8, 5)(_c1$4, 5);
@@ -104186,7 +104304,7 @@ class UnifiedDashboardModalComponent {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.modalContent = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.modalWrapper = _t.first);
-        } }, inputs: { viewMode: [1, "viewMode"] }, decls: 1, vars: 1, consts: [["modalWrapper", ""], ["modalContent", ""], [1, "fixed", "inset-0", "flex", "items-center", "justify-center", "p-4", "overflow-y-auto", 3, "z-index", "visibility"], [1, "fixed", "inset-0", "flex", "items-center", "justify-center", "p-4", "overflow-y-auto"], ["aria-hidden", "true", 1, "fixed", "inset-0", "backdrop-blur-sm", 3, "click", "ngClass"], [1, "relative", "w-full", "max-w-4xl", "rounded-2xl", "text-left", "overflow-hidden", "shadow-xl", "border", "backdrop-blur-xl", 3, "click", "ngClass"], [1, "px-6", "py-5", "border-b", "backdrop-blur-sm", 3, "ngClass"], [1, "flex", "items-start", "justify-between"], [1, "flex", "items-start", "gap-3", "flex-1", "min-w-0"], ["type", "button", 1, "mt-0.5", "p-1.5", "rounded-lg", "transition-all", "hover:scale-105", "active:scale-95", "cursor-pointer", "flex-shrink-0", 3, "ngClass"], [1, "flex-1", "min-w-0"], [1, "flex", "items-center", "gap-1.5", "mb-2", "text-xs"], [1, "flex", "items-center", "gap-2", "mb-2"], [1, "text-xl", "font-bold", "leading-tight", 3, "ngClass"], [1, "flex", "items-center", "gap-2", "ml-4", "flex-shrink-0"], [3, "priority", "viewMode"], [3, "timeframe", "viewMode"], ["type", "button", 1, "transition-all", "rounded-lg", "p-1", "hover:scale-110", "active:scale-90", "cursor-pointer", "relative", "ml-4", "flex-shrink-0", 3, "click", "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-6", "h-6"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M6 18L18 6M6 6l12 12"], [1, "px-6", "py-8", "max-h-[80vh]", "overflow-y-auto", "backdrop-blur-sm", 3, "ngClass"], [3, "goal", "allMetrics", "allCharts", "loadedSourceAnalysisIds", "loadingSourceAnalysisId", "viewMode", "currentModalState"], [3, "objectives", "goalTitle", "viewMode"], [3, "goal", "contributingMetrics", "viewMode"], [3, "objective", "viewMode"], [3, "strategy", "viewMode", "allMetrics", "allCharts", "allInsights", "goalTitle", "objectiveTitle"], ["type", "button", 1, "mt-0.5", "p-1.5", "rounded-lg", "transition-all", "hover:scale-105", "active:scale-95", "cursor-pointer", "flex-shrink-0", 3, "click", "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-5", "h-5"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M15 19l-7-7 7-7"], [1, "font-medium", 3, "ngClass"], ["type", "button", 1, "hover:underline", "cursor-pointer", "transition-colors", 3, "click", "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-3", "h-3", "flex-shrink-0", 3, "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M9 5l7 7-7 7"], [1, "text-xs", "font-semibold", "uppercase", "tracking-wider", 3, "ngClass"], [3, "sourceAnalysisClick", "metricClick", "contributingMetricsClick", "showObjectives", "close", "goal", "allMetrics", "allCharts", "loadedSourceAnalysisIds", "loadingSourceAnalysisId", "viewMode", "currentModalState"], [3, "metricClick", "goal", "contributingMetrics", "viewMode"]], template: function UnifiedDashboardModalComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { viewMode: [1, "viewMode"] }, decls: 1, vars: 1, consts: [["modalWrapper", ""], ["modalContent", ""], [1, "fixed", "inset-0", "flex", "items-center", "justify-center", "p-4", "overflow-y-auto", 3, "z-index", "visibility"], [1, "fixed", "inset-0", "flex", "items-center", "justify-center", "p-4", "overflow-y-auto"], ["aria-hidden", "true", 1, "fixed", "inset-0", "backdrop-blur-sm", 3, "click", "ngClass"], [1, "relative", "w-full", "max-w-4xl", "rounded-2xl", "text-left", "overflow-hidden", "shadow-xl", "border", "backdrop-blur-xl", 3, "click", "ngClass"], [1, "px-6", "py-5", "border-b", "backdrop-blur-sm", 3, "ngClass"], [1, "flex", "items-start", "justify-between"], [1, "flex", "items-start", "gap-3", "flex-1", "min-w-0"], ["type", "button", 1, "mt-0.5", "p-1.5", "rounded-lg", "transition-all", "hover:scale-105", "active:scale-95", "cursor-pointer", "flex-shrink-0", 3, "ngClass"], [1, "flex-1", "min-w-0"], [1, "flex", "items-center", "gap-1.5", "mb-2", "text-xs"], [1, "flex", "items-center", "gap-2", "mb-2"], [1, "text-xl", "font-bold", "leading-tight", 3, "ngClass"], [1, "flex", "items-center", "gap-2", "ml-4", "flex-shrink-0"], [3, "priority", "viewMode"], [3, "timeframe", "viewMode"], ["type", "button", 1, "transition-all", "rounded-lg", "p-1", "hover:scale-110", "active:scale-90", "cursor-pointer", "relative", "ml-4", "flex-shrink-0", 3, "click", "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-6", "h-6"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M6 18L18 6M6 6l12 12"], [1, "px-6", "py-8", "max-h-[80vh]", "overflow-y-auto", "backdrop-blur-sm", 3, "ngClass"], [3, "goal", "allMetrics", "allCharts", "loadedSourceAnalysisIds", "loadingSourceAnalysisId", "viewMode", "currentModalState"], [3, "objectives", "goalTitle", "viewMode"], [3, "goal", "contributingMetrics", "viewMode"], [3, "objective", "viewMode"], [3, "strategy", "viewMode", "allMetrics", "allCharts", "allInsights", "goalTitle", "objectiveTitle", "currentModalState"], ["type", "button", 1, "mt-0.5", "p-1.5", "rounded-lg", "transition-all", "hover:scale-105", "active:scale-95", "cursor-pointer", "flex-shrink-0", 3, "click", "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-5", "h-5"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M15 19l-7-7 7-7"], [1, "font-medium", 3, "ngClass"], ["type", "button", 1, "hover:underline", "cursor-pointer", "transition-colors", 3, "click", "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-3", "h-3", "flex-shrink-0", 3, "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M9 5l7 7-7 7"], [1, "text-xs", "font-semibold", "uppercase", "tracking-wider", 3, "ngClass"], [3, "sourceAnalysisClick", "metricClick", "contributingMetricsClick", "showObjectives", "close", "goal", "allMetrics", "allCharts", "loadedSourceAnalysisIds", "loadingSourceAnalysisId", "viewMode", "currentModalState"], [3, "metricClick", "goal", "contributingMetrics", "viewMode"]], template: function UnifiedDashboardModalComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵconditionalCreate(0, UnifiedDashboardModalComponent_Conditional_0_Template, 26, 28, "div", 2);
         } if (rf & 2) {
             i0.ɵɵconditional(ctx.isOpen() ? 0 : -1);
@@ -104382,6 +104500,7 @@ class UnifiedDashboardModalComponent {
                 [allInsights]="allInsightsFromStack()"
                 [goalTitle]="recommendationsData()!.goalTitle"
                 [objectiveTitle]="recommendationsData()!.objectiveTitle"
+                [currentModalState]="currentModalState()"
               />
             }
           </div>
@@ -104397,7 +104516,7 @@ class UnifiedDashboardModalComponent {
             type: ViewChild,
             args: ['modalWrapper']
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(UnifiedDashboardModalComponent, { className: "UnifiedDashboardModalComponent", filePath: "lib/components/profile-analysis-unified-dashboard/modals/unified-dashboard-modal.component.ts", lineNumber: 216 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(UnifiedDashboardModalComponent, { className: "UnifiedDashboardModalComponent", filePath: "lib/components/profile-analysis-unified-dashboard/modals/unified-dashboard-modal.component.ts", lineNumber: 217 }); })();
 
 const _c0$7 = () => [];
 const _c1$3 = a0 => ({ name: "flag", source: a0 });