@eric-emg/symphiq-components 1.3.58 → 1.3.60

package/fesm2022/symphiq-components.mjs

@@ -30168,7 +30168,7 @@ class GoalDetailModalContentComponent {
         }
     }
     static { this.ɵfac = function GoalDetailModalContentComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || GoalDetailModalContentComponent)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: GoalDetailModalContentComponent, selectors: [["symphiq-goal-detail-modal-content"]], inputs: { goal: [1, "goal"], viewMode: [1, "viewMode"], allInsights: [1, "allInsights"], allMetrics: [1, "allMetrics"], allBusinessInsights: [1, "allBusinessInsights"], allCharts: [1, "allCharts"] }, outputs: { showObjectives: "showObjectives" }, decls: 8, vars: 7, consts: [[1, "flex", "flex-col", "lg:flex-row", "gap-6"], [1, "flex-1"], [1, "text-sm", "mb-6", "leading-relaxed", 3, "ngClass"], [1, "mb-6"], [3, "buttonClick", "viewMode"], [1, "lg:w-80", "flex-shrink-0", "flex", "flex-col", "gap-6"], [3, "expectedImpact", "viewMode"], [3, "funnelInsightsClicked", "funnelMetricsClicked", "businessInsightsClicked", "relatedContent", "viewMode"], [3, "visual", "viewMode"]], template: function GoalDetailModalContentComponent_Template(rf, ctx) { if (rf & 1) {
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: GoalDetailModalContentComponent, selectors: [["symphiq-goal-detail-modal-content"]], inputs: { goal: [1, "goal"], viewMode: [1, "viewMode"], allInsights: [1, "allInsights"], allMetrics: [1, "allMetrics"], allBusinessInsights: [1, "allBusinessInsights"], allCharts: [1, "allCharts"] }, outputs: { showObjectives: "showObjectives" }, decls: 8, vars: 7, consts: [[1, "flex", "flex-col", "lg:flex-row", "gap-6"], [1, "flex-1"], [1, "text-sm", "mb-6", "leading-relaxed", "whitespace-pre-line", 3, "ngClass"], [1, "mb-6"], [3, "buttonClick", "viewMode"], [1, "lg:w-80", "flex-shrink-0", "flex", "flex-col", "gap-6"], [3, "expectedImpact", "viewMode"], [3, "funnelInsightsClicked", "funnelMetricsClicked", "businessInsightsClicked", "relatedContent", "viewMode"], [3, "visual", "viewMode"]], template: function GoalDetailModalContentComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0)(1, "div", 1);
             i0.ɵɵconditionalCreate(2, GoalDetailModalContentComponent_Conditional_2_Template, 2, 2, "p", 2);
             i0.ɵɵconditionalCreate(3, GoalDetailModalContentComponent_Conditional_3_Template, 2, 2, "div", 3);
@@ -30206,7 +30206,7 @@ class GoalDetailModalContentComponent {
       <div class="flex-1">
         <!-- Goal Description -->
         @if (goal().description) {
-          <p [ngClass]="descriptionClasses()" class="text-sm mb-6 leading-relaxed">
+          <p [ngClass]="descriptionClasses()" class="text-sm mb-6 leading-relaxed whitespace-pre-line">
             {{ goal()!.description }}
           </p>
         }
@@ -101659,6 +101659,133 @@ class ExecutiveSummaryStatsGridComponent {
     }], null, { viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], keyStrengthsClick: [{ type: i0.Output, args: ["keyStrengthsClick"] }], criticalGapsClick: [{ type: i0.Output, args: ["criticalGapsClick"] }], quickWinsClick: [{ type: i0.Output, args: ["quickWinsClick"] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ExecutiveSummaryStatsGridComponent, { className: "ExecutiveSummaryStatsGridComponent", filePath: "lib/components/shared/executive-summary-stats-grid.component.ts", lineNumber: 85 }); })();
 
+class SourceGoalsSummaryCardComponent {
+    constructor() {
+        this.viewMode = input(ViewModeEnum.LIGHT, ...(ngDevMode ? [{ debugName: "viewMode" }] : []));
+        this.shopCounts = input({ analyses: 0, goals: 0 }, ...(ngDevMode ? [{ debugName: "shopCounts" }] : []));
+        this.focusAreaCounts = input({ analyses: 0, goals: 0 }, ...(ngDevMode ? [{ debugName: "focusAreaCounts" }] : []));
+        this.metricCounts = input({ analyses: 0, goals: 0 }, ...(ngDevMode ? [{ debugName: "metricCounts" }] : []));
+        this.isLightMode = computed(() => this.viewMode() === ViewModeEnum.LIGHT, ...(ngDevMode ? [{ debugName: "isLightMode" }] : []));
+        this.totalSourceGoalsCount = computed(() => {
+            return this.shopCounts().goals + this.focusAreaCounts().goals + this.metricCounts().goals;
+        }, ...(ngDevMode ? [{ debugName: "totalSourceGoalsCount" }] : []));
+        this.totalGoalsCardClasses = computed(() => {
+            return this.isLightMode()
+                ? 'bg-gradient-to-r from-indigo-50/80 via-purple-50/40 to-transparent border border-indigo-200 text-indigo-900'
+                : 'bg-gradient-to-r from-indigo-900/30 via-purple-900/15 to-transparent border border-indigo-700/50 text-indigo-100';
+        }, ...(ngDevMode ? [{ debugName: "totalGoalsCardClasses" }] : []));
+    }
+    getSourceCountCardClasses(type) {
+        if (this.isLightMode()) {
+            switch (type) {
+                case 'SHOP': return 'bg-cyan-50 text-cyan-700 border border-cyan-200';
+                case 'FOCUS_AREA': return 'bg-amber-50 text-amber-700 border border-amber-200';
+                case 'METRIC': return 'bg-emerald-50 text-emerald-700 border border-emerald-200';
+            }
+        }
+        else {
+            switch (type) {
+                case 'SHOP': return 'bg-cyan-900/30 text-cyan-300 border border-cyan-700';
+                case 'FOCUS_AREA': return 'bg-amber-900/30 text-amber-300 border border-amber-700';
+                case 'METRIC': return 'bg-emerald-900/30 text-emerald-300 border border-emerald-700';
+            }
+        }
+    }
+    static { this.ɵfac = function SourceGoalsSummaryCardComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SourceGoalsSummaryCardComponent)(); }; }
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SourceGoalsSummaryCardComponent, selectors: [["symphiq-source-goals-summary-card"]], inputs: { viewMode: [1, "viewMode"], shopCounts: [1, "shopCounts"], focusAreaCounts: [1, "focusAreaCounts"], metricCounts: [1, "metricCounts"] }, decls: 28, vars: 17, consts: [[1, "p-6", "rounded-xl", "mb-4", "flex", "items-center", "justify-between", 3, "ngClass"], [1, "text-xs", "font-semibold", "uppercase", "mb-1", "opacity-80"], [1, "text-4xl", "font-bold"], [1, "grid", "grid-cols-1", "md:grid-cols-3", "gap-4"], [1, "p-4", "rounded-xl", 3, "ngClass"], [1, "text-xs", "font-semibold", "uppercase", "mb-2"], [1, "text-sm", "opacity-80"]], template: function SourceGoalsSummaryCardComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 0)(1, "div")(2, "div", 1);
+            i0.ɵɵtext(3, "Total Source Goals");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(4, "div", 2);
+            i0.ɵɵtext(5);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(6, "div", 3)(7, "div", 4)(8, "div", 5);
+            i0.ɵɵtext(9, "Shop");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(10, "div", 6);
+            i0.ɵɵtext(11);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(12, "div", 6);
+            i0.ɵɵtext(13);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(14, "div", 4)(15, "div", 5);
+            i0.ɵɵtext(16, "Focus Area");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(17, "div", 6);
+            i0.ɵɵtext(18);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(19, "div", 6);
+            i0.ɵɵtext(20);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(21, "div", 4)(22, "div", 5);
+            i0.ɵɵtext(23, "Metric");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(24, "div", 6);
+            i0.ɵɵtext(25);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(26, "div", 6);
+            i0.ɵɵtext(27);
+            i0.ɵɵelementEnd()()()();
+        } if (rf & 2) {
+            i0.ɵɵproperty("ngClass", ctx.totalGoalsCardClasses());
+            i0.ɵɵadvance(5);
+            i0.ɵɵtextInterpolate(ctx.totalSourceGoalsCount());
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("ngClass", ctx.getSourceCountCardClasses("SHOP"));
+            i0.ɵɵadvance(4);
+            i0.ɵɵtextInterpolate2("", ctx.shopCounts().analyses, " ", ctx.shopCounts().analyses === 1 ? "analysis" : "analyses");
+            i0.ɵɵadvance(2);
+            i0.ɵɵtextInterpolate2("", ctx.shopCounts().goals, " ", ctx.shopCounts().goals === 1 ? "goal" : "goals");
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngClass", ctx.getSourceCountCardClasses("FOCUS_AREA"));
+            i0.ɵɵadvance(4);
+            i0.ɵɵtextInterpolate2("", ctx.focusAreaCounts().analyses, " ", ctx.focusAreaCounts().analyses === 1 ? "analysis" : "analyses");
+            i0.ɵɵadvance(2);
+            i0.ɵɵtextInterpolate2("", ctx.focusAreaCounts().goals, " ", ctx.focusAreaCounts().goals === 1 ? "goal" : "goals");
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngClass", ctx.getSourceCountCardClasses("METRIC"));
+            i0.ɵɵadvance(4);
+            i0.ɵɵtextInterpolate2("", ctx.metricCounts().analyses, " ", ctx.metricCounts().analyses === 1 ? "analysis" : "analyses");
+            i0.ɵɵadvance(2);
+            i0.ɵɵtextInterpolate2("", ctx.metricCounts().goals, " ", ctx.metricCounts().goals === 1 ? "goal" : "goals");
+        } }, dependencies: [CommonModule, i1$1.NgClass], encapsulation: 2, changeDetection: 0 }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SourceGoalsSummaryCardComponent, [{
+        type: Component,
+        args: [{
+                selector: 'symphiq-source-goals-summary-card',
+                standalone: true,
+                imports: [CommonModule],
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                template: `
+    <div [ngClass]="totalGoalsCardClasses()" class="p-6 rounded-xl mb-4 flex items-center justify-between">
+      <div>
+        <div class="text-xs font-semibold uppercase mb-1 opacity-80">Total Source Goals</div>
+        <div class="text-4xl font-bold">{{ totalSourceGoalsCount() }}</div>
+      </div>
+      <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+        <div [ngClass]="getSourceCountCardClasses('SHOP')" class="p-4 rounded-xl">
+          <div class="text-xs font-semibold uppercase mb-2">Shop</div>
+          <div class="text-sm opacity-80">{{ shopCounts().analyses }} {{ shopCounts().analyses === 1 ? 'analysis' : 'analyses' }}</div>
+          <div class="text-sm opacity-80">{{ shopCounts().goals }} {{ shopCounts().goals === 1 ? 'goal' : 'goals' }}</div>
+        </div>
+        <div [ngClass]="getSourceCountCardClasses('FOCUS_AREA')" class="p-4 rounded-xl">
+          <div class="text-xs font-semibold uppercase mb-2">Focus Area</div>
+          <div class="text-sm opacity-80">{{ focusAreaCounts().analyses }} {{ focusAreaCounts().analyses === 1 ? 'analysis' : 'analyses' }}</div>
+          <div class="text-sm opacity-80">{{ focusAreaCounts().goals }} {{ focusAreaCounts().goals === 1 ? 'goal' : 'goals' }}</div>
+        </div>
+        <div [ngClass]="getSourceCountCardClasses('METRIC')" class="p-4 rounded-xl">
+          <div class="text-xs font-semibold uppercase mb-2">Metric</div>
+          <div class="text-sm opacity-80">{{ metricCounts().analyses }} {{ metricCounts().analyses === 1 ? 'analysis' : 'analyses' }}</div>
+          <div class="text-sm opacity-80">{{ metricCounts().goals }} {{ metricCounts().goals === 1 ? 'goal' : 'goals' }}</div>
+        </div>
+      </div>
+    </div>
+  `
+            }]
+    }], null, { viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], shopCounts: [{ type: i0.Input, args: [{ isSignal: true, alias: "shopCounts", required: false }] }], focusAreaCounts: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusAreaCounts", required: false }] }], metricCounts: [{ type: i0.Input, args: [{ isSignal: true, alias: "metricCounts", required: false }] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SourceGoalsSummaryCardComponent, { className: "SourceGoalsSummaryCardComponent", filePath: "lib/components/shared/source-goals-summary-card.component.ts", lineNumber: 41 }); })();
+
 function UnifiedExecutiveSummaryComponent_Conditional_0_Conditional_9_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "symphiq-grade-badge", 7);
 } if (rf & 2) {
@@ -101676,42 +101803,9 @@ function UnifiedExecutiveSummaryComponent_Conditional_0_Template(rf, ctx) { if (
     i0.ɵɵelementEnd()();
     i0.ɵɵconditionalCreate(9, UnifiedExecutiveSummaryComponent_Conditional_0_Conditional_9_Template, 1, 3, "symphiq-grade-badge", 7);
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(10, "symphiq-analysis-narrative", 8);
-    i0.ɵɵelementStart(11, "div", 9)(12, "div")(13, "div", 10);
-    i0.ɵɵtext(14, "Total Source Goals");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(15, "div", 11);
-    i0.ɵɵtext(16);
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(17, "div", 12)(18, "div", 13)(19, "div", 14);
-    i0.ɵɵtext(20, "Shop");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(21, "div", 15);
-    i0.ɵɵtext(22);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(23, "div", 15);
-    i0.ɵɵtext(24);
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(25, "div", 13)(26, "div", 14);
-    i0.ɵɵtext(27, "Focus Area");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(28, "div", 15);
-    i0.ɵɵtext(29);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(30, "div", 15);
-    i0.ɵɵtext(31);
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(32, "div", 13)(33, "div", 14);
-    i0.ɵɵtext(34, "Metric");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(35, "div", 15);
-    i0.ɵɵtext(36);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(37, "div", 15);
-    i0.ɵɵtext(38);
-    i0.ɵɵelementEnd()()()();
-    i0.ɵɵelementStart(39, "symphiq-executive-summary-stats-grid", 16);
-    i0.ɵɵlistener("keyStrengthsClick", function UnifiedExecutiveSummaryComponent_Conditional_0_Template_symphiq_executive_summary_stats_grid_keyStrengthsClick_39_listener() { i0.ɵɵrestoreView(_r1); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.keyStrengthsClick.emit()); })("criticalGapsClick", function UnifiedExecutiveSummaryComponent_Conditional_0_Template_symphiq_executive_summary_stats_grid_criticalGapsClick_39_listener() { i0.ɵɵrestoreView(_r1); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.criticalGapsClick.emit()); })("quickWinsClick", function UnifiedExecutiveSummaryComponent_Conditional_0_Template_symphiq_executive_summary_stats_grid_quickWinsClick_39_listener() { i0.ɵɵrestoreView(_r1); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.quickWinsClick.emit()); });
+    i0.ɵɵelement(10, "symphiq-analysis-narrative", 8)(11, "symphiq-source-goals-summary-card", 9);
+    i0.ɵɵelementStart(12, "symphiq-executive-summary-stats-grid", 10);
+    i0.ɵɵlistener("keyStrengthsClick", function UnifiedExecutiveSummaryComponent_Conditional_0_Template_symphiq_executive_summary_stats_grid_keyStrengthsClick_12_listener() { i0.ɵɵrestoreView(_r1); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.keyStrengthsClick.emit()); })("criticalGapsClick", function UnifiedExecutiveSummaryComponent_Conditional_0_Template_symphiq_executive_summary_stats_grid_criticalGapsClick_12_listener() { i0.ɵɵrestoreView(_r1); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.criticalGapsClick.emit()); })("quickWinsClick", function UnifiedExecutiveSummaryComponent_Conditional_0_Template_symphiq_executive_summary_stats_grid_quickWinsClick_12_listener() { i0.ɵɵrestoreView(_r1); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.quickWinsClick.emit()); });
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
     const summary_r2 = ctx;
@@ -101729,27 +101823,7 @@ function UnifiedExecutiveSummaryComponent_Conditional_0_Template(rf, ctx) { if (
     i0.ɵɵadvance();
     i0.ɵɵproperty("viewMode", ctx_r2.viewMode())("narrative", summary_r2.synthesisNarrative)("napkinVisual", summary_r2.napkinVisual);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngClass", ctx_r2.totalGoalsCardClasses());
-    i0.ɵɵadvance(5);
-    i0.ɵɵtextInterpolate(ctx_r2.totalSourceGoalsCount());
-    i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngClass", ctx_r2.getSourceCountCardClasses("SHOP"));
-    i0.ɵɵadvance(4);
-    i0.ɵɵtextInterpolate2("", ctx_r2.shopCounts().analyses, " ", ctx_r2.shopCounts().analyses === 1 ? "analysis" : "analyses");
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate2("", ctx_r2.shopCounts().goals, " ", ctx_r2.shopCounts().goals === 1 ? "goal" : "goals");
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("ngClass", ctx_r2.getSourceCountCardClasses("FOCUS_AREA"));
-    i0.ɵɵadvance(4);
-    i0.ɵɵtextInterpolate2("", ctx_r2.focusAreaCounts().analyses, " ", ctx_r2.focusAreaCounts().analyses === 1 ? "analysis" : "analyses");
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate2("", ctx_r2.focusAreaCounts().goals, " ", ctx_r2.focusAreaCounts().goals === 1 ? "goal" : "goals");
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("ngClass", ctx_r2.getSourceCountCardClasses("METRIC"));
-    i0.ɵɵadvance(4);
-    i0.ɵɵtextInterpolate2("", ctx_r2.metricCounts().analyses, " ", ctx_r2.metricCounts().analyses === 1 ? "analysis" : "analyses");
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate2("", ctx_r2.metricCounts().goals, " ", ctx_r2.metricCounts().goals === 1 ? "goal" : "goals");
+    i0.ɵɵproperty("viewMode", ctx_r2.viewMode())("shopCounts", ctx_r2.shopCounts())("focusAreaCounts", ctx_r2.focusAreaCounts())("metricCounts", ctx_r2.metricCounts());
     i0.ɵɵadvance();
     i0.ɵɵproperty("viewMode", ctx_r2.viewMode())("config", ctx_r2.statsConfig());
 } }
@@ -101772,45 +101846,22 @@ class UnifiedExecutiveSummaryComponent {
                 quickWinsCount: this.quickWinsCount()
             };
         }, ...(ngDevMode ? [{ debugName: "statsConfig" }] : []));
-        this.totalSourceGoalsCount = computed(() => {
-            return this.shopCounts().goals + this.focusAreaCounts().goals + this.metricCounts().goals;
-        }, ...(ngDevMode ? [{ debugName: "totalSourceGoalsCount" }] : []));
         this.bannerClasses = computed(() => this.isLightMode()
             ? 'bg-white border border-slate-200'
             : 'bg-slate-800/50 border border-slate-700/50', ...(ngDevMode ? [{ debugName: "bannerClasses" }] : []));
         this.sectionTitleClasses = computed(() => this.isLightMode() ? 'text-slate-900' : 'text-white', ...(ngDevMode ? [{ debugName: "sectionTitleClasses" }] : []));
         this.textClasses = computed(() => this.isLightMode() ? 'text-slate-700' : 'text-slate-300', ...(ngDevMode ? [{ debugName: "textClasses" }] : []));
-        this.totalGoalsCardClasses = computed(() => {
-            return this.isLightMode()
-                ? 'bg-gradient-to-r from-indigo-50 to-purple-50 border border-indigo-200 text-indigo-900'
-                : 'bg-gradient-to-r from-indigo-900/40 to-purple-900/40 border border-indigo-700/50 text-indigo-100';
-        }, ...(ngDevMode ? [{ debugName: "totalGoalsCardClasses" }] : []));
-    }
-    getSourceCountCardClasses(type) {
-        if (this.isLightMode()) {
-            switch (type) {
-                case 'SHOP': return 'bg-cyan-50 text-cyan-700 border border-cyan-200';
-                case 'FOCUS_AREA': return 'bg-amber-50 text-amber-700 border border-amber-200';
-                case 'METRIC': return 'bg-emerald-50 text-emerald-700 border border-emerald-200';
-            }
-        }
-        else {
-            switch (type) {
-                case 'SHOP': return 'bg-cyan-900/30 text-cyan-300 border border-cyan-700';
-                case 'FOCUS_AREA': return 'bg-amber-900/30 text-amber-300 border border-amber-700';
-                case 'METRIC': return 'bg-emerald-900/30 text-emerald-300 border border-emerald-700';
-            }
-        }
     }
     static { this.ɵfac = function UnifiedExecutiveSummaryComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || UnifiedExecutiveSummaryComponent)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: UnifiedExecutiveSummaryComponent, selectors: [["symphiq-unified-executive-summary"]], inputs: { summary: [1, "summary"], viewMode: [1, "viewMode"], shopCounts: [1, "shopCounts"], focusAreaCounts: [1, "focusAreaCounts"], metricCounts: [1, "metricCounts"], quickWinsCount: [1, "quickWinsCount"] }, outputs: { keyStrengthsClick: "keyStrengthsClick", criticalGapsClick: "criticalGapsClick", quickWinsClick: "quickWinsClick" }, decls: 1, vars: 1, consts: [["id", "section-executive-summary", 1, "space-y-6", "scroll-mt-24"], [1, "rounded-2xl", "p-8", "shadow-xl", 3, "ngClass"], [1, "flex", "flex-col", "gap-6"], [1, "flex", "items-start", "justify-between", "gap-4"], [1, "flex-1"], [1, "text-2xl", "font-bold", "mb-3", 3, "ngClass"], [1, "text-lg", "leading-relaxed", 3, "ngClass"], [3, "grade", "gradeRationale", "viewMode"], ["title", "Synthesis Overview", 3, "viewMode", "narrative", "napkinVisual"], [1, "p-6", "rounded-xl", "mb-4", "flex", "items-center", "justify-between", 3, "ngClass"], [1, "text-xs", "font-semibold", "uppercase", "mb-1", "opacity-80"], [1, "text-4xl", "font-bold"], [1, "grid", "grid-cols-1", "md:grid-cols-3", "gap-4"], [1, "p-4", "rounded-xl", 3, "ngClass"], [1, "text-xs", "font-semibold", "uppercase", "mb-2"], [1, "text-sm", "opacity-80"], [3, "keyStrengthsClick", "criticalGapsClick", "quickWinsClick", "viewMode", "config"]], template: function UnifiedExecutiveSummaryComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵconditionalCreate(0, UnifiedExecutiveSummaryComponent_Conditional_0_Template, 40, 27, "section", 0);
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: UnifiedExecutiveSummaryComponent, selectors: [["symphiq-unified-executive-summary"]], inputs: { summary: [1, "summary"], viewMode: [1, "viewMode"], shopCounts: [1, "shopCounts"], focusAreaCounts: [1, "focusAreaCounts"], metricCounts: [1, "metricCounts"], quickWinsCount: [1, "quickWinsCount"] }, outputs: { keyStrengthsClick: "keyStrengthsClick", criticalGapsClick: "criticalGapsClick", quickWinsClick: "quickWinsClick" }, decls: 1, vars: 1, consts: [["id", "section-executive-summary", 1, "space-y-6", "scroll-mt-24"], [1, "rounded-2xl", "p-8", "shadow-xl", 3, "ngClass"], [1, "flex", "flex-col", "gap-6"], [1, "flex", "items-start", "justify-between", "gap-4"], [1, "flex-1"], [1, "text-2xl", "font-bold", "mb-3", 3, "ngClass"], [1, "text-lg", "leading-relaxed", 3, "ngClass"], [3, "grade", "gradeRationale", "viewMode"], ["title", "Synthesis Overview", 3, "viewMode", "narrative", "napkinVisual"], [3, "viewMode", "shopCounts", "focusAreaCounts", "metricCounts"], [3, "keyStrengthsClick", "criticalGapsClick", "quickWinsClick", "viewMode", "config"]], template: function UnifiedExecutiveSummaryComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵconditionalCreate(0, UnifiedExecutiveSummaryComponent_Conditional_0_Template, 13, 14, "section", 0);
         } if (rf & 2) {
             let tmp_0_0;
             i0.ɵɵconditional((tmp_0_0 = ctx.summary()) ? 0 : -1, tmp_0_0);
         } }, dependencies: [CommonModule, i1$1.NgClass, GradeBadgeComponent,
             AnalysisNarrativeComponent,
-            ExecutiveSummaryStatsGridComponent], encapsulation: 2, changeDetection: 0 }); }
+            ExecutiveSummaryStatsGridComponent,
+            SourceGoalsSummaryCardComponent], encapsulation: 2, changeDetection: 0 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(UnifiedExecutiveSummaryComponent, [{
         type: Component,
@@ -101821,7 +101872,8 @@ class UnifiedExecutiveSummaryComponent {
                     CommonModule,
                     GradeBadgeComponent,
                     AnalysisNarrativeComponent,
-                    ExecutiveSummaryStatsGridComponent
+                    ExecutiveSummaryStatsGridComponent,
+                    SourceGoalsSummaryCardComponent
                 ],
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 template: `
@@ -101854,29 +101906,12 @@ class UnifiedExecutiveSummaryComponent {
               title="Synthesis Overview"
             />
 
-            <div [ngClass]="totalGoalsCardClasses()" class="p-6 rounded-xl mb-4 flex items-center justify-between">
-              <div>
-                <div class="text-xs font-semibold uppercase mb-1 opacity-80">Total Source Goals</div>
-                <div class="text-4xl font-bold">{{ totalSourceGoalsCount() }}</div>
-              </div>
-              <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
-                <div [ngClass]="getSourceCountCardClasses('SHOP')" class="p-4 rounded-xl">
-                  <div class="text-xs font-semibold uppercase mb-2">Shop</div>
-                  <div class="text-sm opacity-80">{{ shopCounts().analyses }} {{ shopCounts().analyses === 1 ? 'analysis' : 'analyses' }}</div>
-                  <div class="text-sm opacity-80">{{ shopCounts().goals }} {{ shopCounts().goals === 1 ? 'goal' : 'goals' }}</div>
-                </div>
-                <div [ngClass]="getSourceCountCardClasses('FOCUS_AREA')" class="p-4 rounded-xl">
-                  <div class="text-xs font-semibold uppercase mb-2">Focus Area</div>
-                  <div class="text-sm opacity-80">{{ focusAreaCounts().analyses }} {{ focusAreaCounts().analyses === 1 ? 'analysis' : 'analyses' }}</div>
-                  <div class="text-sm opacity-80">{{ focusAreaCounts().goals }} {{ focusAreaCounts().goals === 1 ? 'goal' : 'goals' }}</div>
-                </div>
-                <div [ngClass]="getSourceCountCardClasses('METRIC')" class="p-4 rounded-xl">
-                  <div class="text-xs font-semibold uppercase mb-2">Metric</div>
-                  <div class="text-sm opacity-80">{{ metricCounts().analyses }} {{ metricCounts().analyses === 1 ? 'analysis' : 'analyses' }}</div>
-                  <div class="text-sm opacity-80">{{ metricCounts().goals }} {{ metricCounts().goals === 1 ? 'goal' : 'goals' }}</div>
-                </div>
-              </div>
-            </div>
+            <symphiq-source-goals-summary-card
+              [viewMode]="viewMode()"
+              [shopCounts]="shopCounts()"
+              [focusAreaCounts]="focusAreaCounts()"
+              [metricCounts]="metricCounts()"
+            />
 
 
             <symphiq-executive-summary-stats-grid
@@ -101893,7 +101928,7 @@ class UnifiedExecutiveSummaryComponent {
   `
             }]
     }], null, { summary: [{ type: i0.Input, args: [{ isSignal: true, alias: "summary", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], shopCounts: [{ type: i0.Input, args: [{ isSignal: true, alias: "shopCounts", required: false }] }], focusAreaCounts: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusAreaCounts", required: false }] }], metricCounts: [{ type: i0.Input, args: [{ isSignal: true, alias: "metricCounts", required: false }] }], quickWinsCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "quickWinsCount", required: false }] }], keyStrengthsClick: [{ type: i0.Output, args: ["keyStrengthsClick"] }], criticalGapsClick: [{ type: i0.Output, args: ["criticalGapsClick"] }], quickWinsClick: [{ type: i0.Output, args: ["quickWinsClick"] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(UnifiedExecutiveSummaryComponent, { className: "UnifiedExecutiveSummaryComponent", filePath: "lib/components/profile-analysis-unified-dashboard/cards/unified-executive-summary.component.ts", lineNumber: 92 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(UnifiedExecutiveSummaryComponent, { className: "UnifiedExecutiveSummaryComponent", filePath: "lib/components/profile-analysis-unified-dashboard/cards/unified-executive-summary.component.ts", lineNumber: 74 }); })();
 
 const _c0$b = a0 => ({ name: "calendar", source: a0 });
 const _forTrack0$b = ($index, $item) => $item.id;
@@ -102786,19 +102821,13 @@ function UnifiedNextStepsComponent_Conditional_0_For_5_Conditional_11_Template(r
     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.ɵɵelementStart(0, "div", 23);
+    i0.ɵɵtext(1);
     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.ɵɵproperty("ngClass", ctx_r1.domainChipClasses())("libSymphiqTooltip", ctx_r1.getDomainSubtitle(domain_r5));
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", ctx_r1.getDomainTitle(domain_r5), " ");
 } }
@@ -102807,7 +102836,7 @@ function UnifiedNextStepsComponent_Conditional_0_For_5_Conditional_12_Template(r
     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.ɵɵrepeaterCreate(4, UnifiedNextStepsComponent_Conditional_0_For_5_Conditional_12_For_5_Template, 2, 3, "div", 23, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const step_r1 = i0.ɵɵnextContext().$implicit;
@@ -102893,9 +102922,6 @@ class UnifiedNextStepsComponent {
         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)
@@ -102967,15 +102993,15 @@ class UnifiedNextStepsComponent {
         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"], 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) {
+    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"], ["tooltipPosition", "top", 1, "px-2", "py-1", "rounded-md", "text-xs", "font-medium", 3, "ngClass", "libSymphiqTooltip"]], 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], 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 }); }
+        } }, dependencies: [CommonModule, i1$1.NgClass, SectionDividerComponent, SectionHeaderComponent, TooltipDirective], 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}"], 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, TooltipDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: `
     @if (steps().length > 0) {
       <section id="section-next-steps" class="space-y-6 scroll-mt-24">
         <symphiq-section-divider
@@ -103053,8 +103079,11 @@ class UnifiedNextStepsComponent {
                   </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>
+                      <div
+                        [ngClass]="domainChipClasses()"
+                        class="px-2 py-1 rounded-md text-xs font-medium"
+                        [libSymphiqTooltip]="getDomainSubtitle(domain)"
+                        tooltipPosition="top">
                         {{ getDomainTitle(domain) }}
                       </div>
                     }
@@ -103066,20 +103095,10 @@ class UnifiedNextStepsComponent {
         </div>
       </section>
     }
-  `, 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"] }]
+  `, 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}\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 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(UnifiedNextStepsComponent, { className: "UnifiedNextStepsComponent", filePath: "lib/components/profile-analysis-unified-dashboard/cards/unified-next-steps.component.ts", lineNumber: 128 }); })();
 
-function SynthesisConfidenceSectionComponent_Conditional_0_Conditional_10_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "p", 8);
-    i0.ɵɵtext(1);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("ngClass", ctx_r0.textClasses());
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r0.explanation(), " ");
-} }
 function SynthesisConfidenceSectionComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 0)(1, "h4", 1);
     i0.ɵɵnamespaceSVG();
@@ -103094,12 +103113,10 @@ function SynthesisConfidenceSectionComponent_Conditional_0_Template(rf, ctx) { i
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(8, "span", 7);
     i0.ɵɵtext(9);
-    i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(10, SynthesisConfidenceSectionComponent_Conditional_0_Conditional_10_Template, 2, 2, "p", 8);
-    i0.ɵɵelementEnd();
+    i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("ngClass", ctx_r0.sectionCardClasses());
+    i0.ɵɵproperty("ngClass", ctx_r0.sectionCardClasses())("libSymphiqTooltip", ctx_r0.explanation() ?? "")("tooltipPosition", "top");
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r0.sectionTitleClasses());
     i0.ɵɵadvance(5);
@@ -103111,8 +103128,6 @@ function SynthesisConfidenceSectionComponent_Conditional_0_Template(rf, ctx) { i
     i0.ɵɵproperty("ngClass", ctx_r0.textClasses());
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", ctx_r0.scorePercentage().toFixed(0), "% ");
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r0.explanation() ? 10 : -1);
 } }
 class SynthesisConfidenceSectionComponent {
     constructor() {
@@ -103128,11 +103143,11 @@ class SynthesisConfidenceSectionComponent {
         this.progressBarFillClasses = computed(() => this.isLightMode() ? 'bg-gradient-to-r from-blue-500 to-cyan-500' : 'bg-gradient-to-r from-blue-400 to-cyan-400', ...(ngDevMode ? [{ debugName: "progressBarFillClasses" }] : []));
     }
     static { this.ɵfac = function SynthesisConfidenceSectionComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SynthesisConfidenceSectionComponent)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SynthesisConfidenceSectionComponent, selectors: [["symphiq-synthesis-confidence-section"]], inputs: { score: [1, "score"], explanation: [1, "explanation"], viewMode: [1, "viewMode"] }, decls: 1, vars: 1, consts: [[1, "p-5", "rounded-xl", 3, "ngClass"], [1, "text-sm", "font-semibold", "mb-3", "flex", "items-center", "gap-2", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"], [1, "flex", "items-center", "gap-3"], [1, "flex-1", "h-2", "rounded-full", "overflow-hidden", 3, "ngClass"], [1, "h-full", "rounded-full", "transition-all", "duration-500", 3, "ngClass"], [1, "text-sm", "font-semibold", 3, "ngClass"], [1, "text-sm", "mt-3", 3, "ngClass"]], template: function SynthesisConfidenceSectionComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵconditionalCreate(0, SynthesisConfidenceSectionComponent_Conditional_0_Template, 11, 9, "div", 0);
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SynthesisConfidenceSectionComponent, selectors: [["symphiq-synthesis-confidence-section"]], inputs: { score: [1, "score"], explanation: [1, "explanation"], viewMode: [1, "viewMode"] }, decls: 1, vars: 1, consts: [[1, "p-5", "rounded-xl", 3, "ngClass", "libSymphiqTooltip", "tooltipPosition"], [1, "text-sm", "font-semibold", "mb-3", "flex", "items-center", "gap-2", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"], [1, "flex", "items-center", "gap-3"], [1, "flex-1", "h-2", "rounded-full", "overflow-hidden", 3, "ngClass"], [1, "h-full", "rounded-full", "transition-all", "duration-500", 3, "ngClass"], [1, "text-sm", "font-semibold", 3, "ngClass"]], template: function SynthesisConfidenceSectionComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵconditionalCreate(0, SynthesisConfidenceSectionComponent_Conditional_0_Template, 10, 10, "div", 0);
         } if (rf & 2) {
             i0.ɵɵconditional(ctx.score() ? 0 : -1);
-        } }, dependencies: [CommonModule, i1$1.NgClass], encapsulation: 2, changeDetection: 0 }); }
+        } }, dependencies: [CommonModule, i1$1.NgClass, TooltipDirective], encapsulation: 2, changeDetection: 0 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SynthesisConfidenceSectionComponent, [{
         type: Component,
@@ -103140,10 +103155,14 @@ class SynthesisConfidenceSectionComponent {
                 selector: 'symphiq-synthesis-confidence-section',
                 standalone: true,
                 changeDetection: ChangeDetectionStrategy.OnPush,
-                imports: [CommonModule],
+                imports: [CommonModule, TooltipDirective],
                 template: `
     @if (score()) {
-      <div [ngClass]="sectionCardClasses()" class="p-5 rounded-xl">
+      <div
+        [ngClass]="sectionCardClasses()"
+        class="p-5 rounded-xl"
+        [libSymphiqTooltip]="explanation() ?? ''"
+        [tooltipPosition]="'top'">
         <h4 [ngClass]="sectionTitleClasses()" class="text-sm font-semibold mb-3 flex items-center gap-2">
           <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/>
@@ -103162,11 +103181,6 @@ class SynthesisConfidenceSectionComponent {
             {{ scorePercentage().toFixed(0) }}%
           </span>
         </div>
-        @if (explanation()) {
-          <p [ngClass]="textClasses()" class="text-sm mt-3">
-            {{ explanation() }}
-          </p>
-        }
       </div>
     }
   `
@@ -103348,7 +103362,7 @@ class SourceAnalysisTraceabilityComponent {
         }
     }
     static { this.ɵfac = function SourceAnalysisTraceabilityComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SourceAnalysisTraceabilityComponent)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SourceAnalysisTraceabilityComponent, selectors: [["symphiq-source-analysis-traceability"]], inputs: { sourceAnalyses: [1, "sourceAnalyses"], loadedSourceAnalysisIds: [1, "loadedSourceAnalysisIds"], loadingSourceAnalysisId: [1, "loadingSourceAnalysisId"], viewMode: [1, "viewMode"], goal: [1, "goal"] }, outputs: { sourceAnalysisClick: "sourceAnalysisClick" }, decls: 1, vars: 1, consts: [[1, "p-5", "rounded-xl", "flex", "flex-col", "gap-4", 3, "ngClass"], [1, "text-sm", "font-semibold", "flex", "items-center", "gap-2", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"], [3, "score", "explanation", "viewMode"], [1, "grid", "grid-cols-1", "sm:grid-cols-2", "gap-3"], ["type", "button", 1, "p-4", "rounded-lg", "text-left", "transition-all", "hover:scale-[1.02]", "relative", 3, "ngClass"], ["type", "button", 1, "p-4", "rounded-lg", "text-left", "transition-all", "hover:scale-[1.02]", "relative", 3, "click", "ngClass"], [1, "absolute", "inset-0", "bg-black/10", "rounded-lg", "flex", "items-center", "justify-center"], [1, "absolute", "top-2", "right-2"], [1, "flex", "items-start", "gap-3"], [1, "w-8", "h-8", "rounded-lg", "flex", "items-center", "justify-center", "flex-shrink-0", 3, "ngClass"], [1, "flex-1", "min-w-0"], [1, "text-xs", "font-medium", "uppercase", "mb-0.5", 3, "ngClass"], [1, "text-sm", "font-medium", "truncate", 3, "ngClass"], [1, "text-xs", "mt-1", 3, "ngClass"], [1, "w-5", "h-5", "border-2", "border-current", "border-t-transparent", "rounded-full", "animate-spin"], ["fill", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4", "text-green-500"], ["d", "M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"]], template: function SourceAnalysisTraceabilityComponent_Template(rf, ctx) { if (rf & 1) {
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SourceAnalysisTraceabilityComponent, selectors: [["symphiq-source-analysis-traceability"]], inputs: { sourceAnalyses: [1, "sourceAnalyses"], loadedSourceAnalysisIds: [1, "loadedSourceAnalysisIds"], loadingSourceAnalysisId: [1, "loadingSourceAnalysisId"], viewMode: [1, "viewMode"], goal: [1, "goal"] }, outputs: { sourceAnalysisClick: "sourceAnalysisClick" }, decls: 1, vars: 1, consts: [[1, "p-5", "rounded-xl", "flex", "flex-col", "gap-4", 3, "ngClass"], [1, "text-sm", "font-semibold", "flex", "items-center", "gap-2", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"], [3, "score", "explanation", "viewMode"], [1, "grid", "grid-cols-1", "gap-3"], ["type", "button", 1, "p-4", "rounded-lg", "text-left", "transition-all", "hover:scale-[1.02]", "relative", 3, "ngClass"], ["type", "button", 1, "p-4", "rounded-lg", "text-left", "transition-all", "hover:scale-[1.02]", "relative", 3, "click", "ngClass"], [1, "absolute", "inset-0", "bg-black/10", "rounded-lg", "flex", "items-center", "justify-center"], [1, "absolute", "top-2", "right-2"], [1, "flex", "items-start", "gap-3"], [1, "w-8", "h-8", "rounded-lg", "flex", "items-center", "justify-center", "flex-shrink-0", 3, "ngClass"], [1, "flex-1", "min-w-0"], [1, "text-xs", "font-medium", "uppercase", "mb-0.5", 3, "ngClass"], [1, "text-sm", "font-medium", "truncate", 3, "ngClass"], [1, "text-xs", "mt-1", 3, "ngClass"], [1, "w-5", "h-5", "border-2", "border-current", "border-t-transparent", "rounded-full", "animate-spin"], ["fill", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4", "text-green-500"], ["d", "M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"]], template: function SourceAnalysisTraceabilityComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵconditionalCreate(0, SourceAnalysisTraceabilityComponent_Conditional_0_Template, 9, 6, "div", 0);
         } if (rf & 2) {
             let tmp_0_0;
@@ -103377,7 +103391,7 @@ class SourceAnalysisTraceabilityComponent {
             [explanation]="goal().synthesisConfidenceScoreExplanation"
             [viewMode]="viewMode()"
         />
-        <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
+        <div class="grid grid-cols-1 gap-3">
           @for (source of sourceAnalyses(); track source.analysisId) {
             <button
               type="button"
@@ -103460,34 +103474,34 @@ function UnifiedGoalDetailModalContentComponent_Conditional_4_Template(rf, ctx)
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", ctx_r0.goal().description, " ");
 } }
-function UnifiedGoalDetailModalContentComponent_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    const _r2 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "symphiq-related-content-button", 12);
-    i0.ɵɵlistener("buttonClicked", function UnifiedGoalDetailModalContentComponent_Conditional_7_Template_symphiq_related_content_button_buttonClicked_0_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onContributingMetricsClick()); });
+function UnifiedGoalDetailModalContentComponent_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div");
+    i0.ɵɵelement(1, "symphiq-napkin-visual-placeholder", 12);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("count", ctx_r0.contributingMetricsCount())("svgPath", ctx_r0.metricsIconPath)("viewMode", ctx_r0.viewMode());
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("visual", ctx_r0.goal().visual)("viewMode", ctx_r0.viewMode());
 } }
 function UnifiedGoalDetailModalContentComponent_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "symphiq-related-content-button", 8);
+    const _r2 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "symphiq-related-content-button", 13);
+    i0.ɵɵlistener("buttonClicked", function UnifiedGoalDetailModalContentComponent_Conditional_8_Template_symphiq_related_content_button_buttonClicked_0_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onContributingMetricsClick()); });
+    i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("count", ctx_r0.contributingFocusAreasCount())("svgPath", ctx_r0.focusAreaIconPath)("viewMode", ctx_r0.viewMode())("showChevron", false)("tooltipContent", ctx_r0.focusAreasTooltipContent());
+    i0.ɵɵproperty("count", ctx_r0.contributingMetricsCount())("svgPath", ctx_r0.metricsIconPath)("viewMode", ctx_r0.viewMode());
 } }
 function UnifiedGoalDetailModalContentComponent_Conditional_9_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div");
-    i0.ɵɵelement(1, "symphiq-napkin-visual-placeholder", 13);
-    i0.ɵɵelementEnd();
+    i0.ɵɵelement(0, "symphiq-related-content-button", 8);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("visual", ctx_r0.goal().visual)("viewMode", ctx_r0.viewMode());
+    i0.ɵɵproperty("count", ctx_r0.contributingFocusAreasCount())("svgPath", ctx_r0.focusAreaIconPath)("viewMode", ctx_r0.viewMode())("showChevron", false)("tooltipContent", ctx_r0.focusAreasTooltipContent());
 } }
-function UnifiedGoalDetailModalContentComponent_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+function UnifiedGoalDetailModalContentComponent_Conditional_11_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "symphiq-show-objectives-button", 14);
-    i0.ɵɵlistener("buttonClick", function UnifiedGoalDetailModalContentComponent_Conditional_10_Template_symphiq_show_objectives_button_buttonClick_0_listener() { i0.ɵɵrestoreView(_r3); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.showObjectives.emit()); });
+    i0.ɵɵlistener("buttonClick", function UnifiedGoalDetailModalContentComponent_Conditional_11_Template_symphiq_show_objectives_button_buttonClick_0_listener() { i0.ɵɵrestoreView(_r3); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.showObjectives.emit()); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -103549,38 +103563,38 @@ class UnifiedGoalDetailModalContentComponent {
         this.contributingMetricsClick.emit();
     }
     static { this.ɵfac = function UnifiedGoalDetailModalContentComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || UnifiedGoalDetailModalContentComponent)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: UnifiedGoalDetailModalContentComponent, selectors: [["symphiq-unified-goal-detail-modal-content"]], inputs: { goal: [1, "goal"], allMetrics: [1, "allMetrics"], allCharts: [1, "allCharts"], loadedSourceAnalysisIds: [1, "loadedSourceAnalysisIds"], loadingSourceAnalysisId: [1, "loadingSourceAnalysisId"], viewMode: [1, "viewMode"], currentModalState: [1, "currentModalState"] }, outputs: { sourceAnalysisClick: "sourceAnalysisClick", metricClick: "metricClick", contributingMetricsClick: "contributingMetricsClick", showObjectives: "showObjectives", close: "close" }, decls: 12, vars: 14, consts: [[1, "flex", "flex-col", "gap-6"], [1, "flex", "flex-col", "lg:flex-row", "gap-6"], [1, "flex-1"], [1, "mb-3"], [1, "text-base", "leading-relaxed", 3, "ngClass"], [1, "lg:w-80", "flex-shrink-0", "flex", "flex-col", "gap-4"], ["layout", "vertical", 3, "expectedImpact", "viewMode", "showTitleIcon"], ["label", "CONTRIBUTING METRIC", "labelPlural", "CONTRIBUTING METRICS", 3, "count", "svgPath", "viewMode"], ["label", "CONTRIBUTING FOCUS AREA", "labelPlural", "CONTRIBUTING FOCUS AREAS", 3, "count", "svgPath", "viewMode", "showChevron", "tooltipContent"], [3, "viewMode", "subLabel"], [3, "sourceAnalysisClick", "sourceAnalyses", "loadedSourceAnalysisIds", "loadingSourceAnalysisId", "viewMode", "goal"], [3, "category", "viewMode"], ["label", "CONTRIBUTING METRIC", "labelPlural", "CONTRIBUTING METRICS", 3, "buttonClicked", "count", "svgPath", "viewMode"], [3, "visual", "viewMode"], [3, "buttonClick", "viewMode", "subLabel"]], template: function UnifiedGoalDetailModalContentComponent_Template(rf, ctx) { if (rf & 1) {
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: UnifiedGoalDetailModalContentComponent, selectors: [["symphiq-unified-goal-detail-modal-content"]], inputs: { goal: [1, "goal"], allMetrics: [1, "allMetrics"], allCharts: [1, "allCharts"], loadedSourceAnalysisIds: [1, "loadedSourceAnalysisIds"], loadingSourceAnalysisId: [1, "loadingSourceAnalysisId"], viewMode: [1, "viewMode"], currentModalState: [1, "currentModalState"] }, outputs: { sourceAnalysisClick: "sourceAnalysisClick", metricClick: "metricClick", contributingMetricsClick: "contributingMetricsClick", showObjectives: "showObjectives", close: "close" }, decls: 12, vars: 14, consts: [[1, "flex", "flex-col", "gap-6"], [1, "flex", "flex-col", "lg:flex-row", "gap-6"], [1, "flex-1"], [1, "mb-3"], [1, "text-base", "leading-relaxed", "whitespace-pre-line", 3, "ngClass"], [1, "lg:w-100", "flex-shrink-0", "flex", "flex-col", "gap-4"], ["layout", "vertical", 3, "expectedImpact", "viewMode", "showTitleIcon"], ["label", "CONTRIBUTING METRIC", "labelPlural", "CONTRIBUTING METRICS", 3, "count", "svgPath", "viewMode"], ["label", "CONTRIBUTING FOCUS AREA", "labelPlural", "CONTRIBUTING FOCUS AREAS", 3, "count", "svgPath", "viewMode", "showChevron", "tooltipContent"], [3, "sourceAnalysisClick", "sourceAnalyses", "loadedSourceAnalysisIds", "loadingSourceAnalysisId", "viewMode", "goal"], [3, "viewMode", "subLabel"], [3, "category", "viewMode"], [3, "visual", "viewMode"], ["label", "CONTRIBUTING METRIC", "labelPlural", "CONTRIBUTING METRICS", 3, "buttonClicked", "count", "svgPath", "viewMode"], [3, "buttonClick", "viewMode", "subLabel"]], template: function UnifiedGoalDetailModalContentComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2);
             i0.ɵɵconditionalCreate(3, UnifiedGoalDetailModalContentComponent_Conditional_3_Template, 2, 2, "div", 3);
             i0.ɵɵconditionalCreate(4, UnifiedGoalDetailModalContentComponent_Conditional_4_Template, 2, 2, "p", 4);
+            i0.ɵɵconditionalCreate(5, UnifiedGoalDetailModalContentComponent_Conditional_5_Template, 2, 2, "div");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(6, "div", 5);
+            i0.ɵɵelement(7, "symphiq-expected-impact-section", 6);
+            i0.ɵɵconditionalCreate(8, UnifiedGoalDetailModalContentComponent_Conditional_8_Template, 1, 3, "symphiq-related-content-button", 7);
+            i0.ɵɵconditionalCreate(9, UnifiedGoalDetailModalContentComponent_Conditional_9_Template, 1, 5, "symphiq-related-content-button", 8);
+            i0.ɵɵelementStart(10, "symphiq-source-analysis-traceability", 9);
+            i0.ɵɵlistener("sourceAnalysisClick", function UnifiedGoalDetailModalContentComponent_Template_symphiq_source_analysis_traceability_sourceAnalysisClick_10_listener($event) { return ctx.onSourceAnalysisClick($event); });
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵconditionalCreate(11, UnifiedGoalDetailModalContentComponent_Conditional_11_Template, 1, 2, "symphiq-show-objectives-button", 10);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(5, "div", 5);
-            i0.ɵɵelement(6, "symphiq-expected-impact-section", 6);
-            i0.ɵɵconditionalCreate(7, UnifiedGoalDetailModalContentComponent_Conditional_7_Template, 1, 3, "symphiq-related-content-button", 7);
-            i0.ɵɵconditionalCreate(8, UnifiedGoalDetailModalContentComponent_Conditional_8_Template, 1, 5, "symphiq-related-content-button", 8);
-            i0.ɵɵelementEnd()();
-            i0.ɵɵconditionalCreate(9, UnifiedGoalDetailModalContentComponent_Conditional_9_Template, 2, 2, "div");
-            i0.ɵɵconditionalCreate(10, UnifiedGoalDetailModalContentComponent_Conditional_10_Template, 1, 2, "symphiq-show-objectives-button", 9);
-            i0.ɵɵelementStart(11, "symphiq-source-analysis-traceability", 10);
-            i0.ɵɵlistener("sourceAnalysisClick", function UnifiedGoalDetailModalContentComponent_Template_symphiq_source_analysis_traceability_sourceAnalysisClick_11_listener($event) { return ctx.onSourceAnalysisClick($event); });
-            i0.ɵɵelementEnd()();
         } if (rf & 2) {
             i0.ɵɵadvance(3);
             i0.ɵɵconditional(ctx.goal().thematicCategory ? 3 : -1);
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.goal().description ? 4 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.goal().visual ? 5 : -1);
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("expectedImpact", ctx.goal().expectedImpact)("viewMode", ctx.viewMode())("showTitleIcon", false);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.contributingMetricsCount() > 0 ? 7 : -1);
-            i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.contributingFocusAreasCount() > 0 ? 8 : -1);
+            i0.ɵɵconditional(ctx.contributingMetricsCount() > 0 ? 8 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.goal().visual ? 9 : -1);
-            i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.goal().objectives && ctx.goal().objectives.length > 0 ? 10 : -1);
+            i0.ɵɵconditional(ctx.contributingFocusAreasCount() > 0 ? 9 : -1);
             i0.ɵɵadvance();
             i0.ɵɵproperty("sourceAnalyses", ctx.goal().sourceAnalyses)("loadedSourceAnalysisIds", ctx.loadedSourceAnalysisIds())("loadingSourceAnalysisId", ctx.loadingSourceAnalysisId())("viewMode", ctx.viewMode())("goal", ctx.goal());
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.goal().objectives && ctx.goal().objectives.length > 0 ? 11 : -1);
         } }, dependencies: [CommonModule, i1$1.NgClass, ExpectedImpactSectionComponent, NapkinVisualPlaceholderComponent, ShowObjectivesButtonComponent, SourceAnalysisTraceabilityComponent, RelatedContentButtonComponent, ThematicCategoryBadgeComponent], encapsulation: 2, changeDetection: 0 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(UnifiedGoalDetailModalContentComponent, [{
@@ -103604,12 +103618,21 @@ class UnifiedGoalDetailModalContentComponent {
             </div>
           }
           @if (goal().description) {
-            <p [ngClass]="descriptionClasses()" class="text-base leading-relaxed">
+            <p [ngClass]="descriptionClasses()" class="text-base leading-relaxed whitespace-pre-line">
               {{ goal().description }}
             </p>
           }
+          <!-- Napkin Visual -->
+          @if (goal().visual) {
+            <div>
+              <symphiq-napkin-visual-placeholder
+                  [visual]="goal().visual"
+                  [viewMode]="viewMode()"
+              />
+            </div>
+          }
         </div>
-        <div class="lg:w-80 flex-shrink-0 flex flex-col gap-4">
+        <div class="lg:w-100 flex-shrink-0 flex flex-col gap-4">
           <symphiq-expected-impact-section
               [expectedImpact]="goal().expectedImpact"
               [viewMode]="viewMode()"
@@ -103637,19 +103660,18 @@ class UnifiedGoalDetailModalContentComponent {
                 [tooltipContent]="focusAreasTooltipContent()"
             />
           }
-        </div>
-      </div>
-
-      <!-- Napkin Visual -->
-      @if (goal().visual) {
-        <div>
-          <symphiq-napkin-visual-placeholder
-              [visual]="goal().visual"
+          <!-- Source Analysis Traceability -->
+          <symphiq-source-analysis-traceability
+              [sourceAnalyses]="goal().sourceAnalyses"
+              [loadedSourceAnalysisIds]="loadedSourceAnalysisIds()"
+              [loadingSourceAnalysisId]="loadingSourceAnalysisId()"
               [viewMode]="viewMode()"
+              [goal]="goal()"
+              (sourceAnalysisClick)="onSourceAnalysisClick($event)"
           />
         </div>
-      }
-
+      </div>
+      
       <!-- Objectives Button -->
       @if (goal().objectives && goal().objectives!.length > 0) {
         <symphiq-show-objectives-button
@@ -103658,22 +103680,12 @@ class UnifiedGoalDetailModalContentComponent {
             (buttonClick)="showObjectives.emit()"
         />
       }
-
-      <!-- Source Analysis Traceability -->
-      <symphiq-source-analysis-traceability
-          [sourceAnalyses]="goal().sourceAnalyses"
-          [loadedSourceAnalysisIds]="loadedSourceAnalysisIds()"
-          [loadingSourceAnalysisId]="loadingSourceAnalysisId()"
-          [viewMode]="viewMode()"
-          [goal]="goal()"
-          (sourceAnalysisClick)="onSourceAnalysisClick($event)"
-      />
-
+      
     </div>
   `
             }]
     }], null, { goal: [{ type: i0.Input, args: [{ isSignal: true, alias: "goal", required: true }] }], allMetrics: [{ type: i0.Input, args: [{ isSignal: true, alias: "allMetrics", required: false }] }], allCharts: [{ type: i0.Input, args: [{ isSignal: true, alias: "allCharts", required: false }] }], loadedSourceAnalysisIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadedSourceAnalysisIds", required: false }] }], loadingSourceAnalysisId: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingSourceAnalysisId", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], currentModalState: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentModalState", required: false }] }], sourceAnalysisClick: [{ type: i0.Output, args: ["sourceAnalysisClick"] }], metricClick: [{ type: i0.Output, args: ["metricClick"] }], contributingMetricsClick: [{ type: i0.Output, args: ["contributingMetricsClick"] }], showObjectives: [{ type: i0.Output, args: ["showObjectives"] }], close: [{ type: i0.Output, args: ["close"] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(UnifiedGoalDetailModalContentComponent, { className: "UnifiedGoalDetailModalContentComponent", filePath: "lib/components/profile-analysis-unified-dashboard/modals/unified-goal-detail-modal-content.component.ts", lineNumber: 100 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(UnifiedGoalDetailModalContentComponent, { className: "UnifiedGoalDetailModalContentComponent", filePath: "lib/components/profile-analysis-unified-dashboard/modals/unified-goal-detail-modal-content.component.ts", lineNumber: 98 }); })();
 
 const _forTrack0$7 = ($index, $item) => $item.metric;
 function UnifiedGoalRelatedMetricsModalContentComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
@@ -104366,7 +104378,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", "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) {
+        } }, 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-6xl", "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);
@@ -104429,7 +104441,7 @@ class UnifiedDashboardModalComponent {
         <div
           (click)="$event.stopPropagation()"
           [ngClass]="isLightMode() ? 'bg-white/90 border-slate-200/50' : 'bg-slate-800/90 border-slate-700/50'"
-          class="relative w-full max-w-4xl rounded-2xl text-left overflow-hidden shadow-xl border backdrop-blur-xl"
+          class="relative w-full max-w-6xl rounded-2xl text-left overflow-hidden shadow-xl border backdrop-blur-xl"
           [style.z-index]="contentZIndex()"
           @slideUpFade>