@eric-emg/symphiq-components 1.2.403 → 1.2.405

package/fesm2022/symphiq-components.mjs

@@ -57432,6 +57432,13 @@ class AreaChartComponent {
         });
         // Default colors for area chart series
         const defaultColors = ['#4A90E2', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6', '#06b6d4'];
+        // Find series with most data points for X-axis categories
+        const seriesWithMostData = chartData.series?.reduce((max, s) => (s.data?.length ?? 0) > (max.data?.length ?? 0) ? s : max, chartData.series[0]);
+        const xAxisData = (seriesWithMostData?.data || []).map(d => ({
+            month: d.month,
+            value: d.value
+        }));
+        xAxis.data.setAll(xAxisData);
         chartData.series?.forEach((seriesData, index) => {
             const colorHex = defaultColors[index % defaultColors.length];
             const seriesColor = color(parseInt(colorHex.replace('#', ''), 16));
@@ -57468,9 +57475,6 @@ class AreaChartComponent {
                 value: d.value
             }));
             series.data.setAll(transformedData);
-            if (index === 0) {
-                xAxis.data.setAll(transformedData);
-            }
             series.appear(ChartConstants.ANIMATION.APPEAR_DURATION);
         });
         const legend = chartElement.children.push(Legend.new(root, {
@@ -72528,7 +72532,7 @@ function CapabilityMatrixCardComponent_Conditional_26_Template(rf, ctx) { if (rf
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵclassProp("animate-pulse", ctx_r0.isHighImportance());
+    i0.ɵɵclassProp("animate-pulse-slow", ctx_r0.isHighImportance());
     i0.ɵɵproperty("ngClass", ctx_r0.importanceBadgeClasses());
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", ctx_r0.importanceLabel(), " Importance ");
@@ -72781,7 +72785,7 @@ class CapabilityMatrixCardComponent {
         return 'bg-red-500';
     }
     static { this.ɵfac = function CapabilityMatrixCardComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || CapabilityMatrixCardComponent)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CapabilityMatrixCardComponent, selectors: [["symphiq-capability-matrix-card"]], inputs: { capability: [1, "capability"], viewMode: [1, "viewMode"], allGoals: [1, "allGoals"] }, decls: 31, vars: 30, consts: [[1, "rounded-lg", "p-4", 3, "click", "ngClass"], [1, "flex", "items-start", "justify-between", "gap-3", "mb-3"], [1, "flex-1"], [1, "font-semibold", "text-sm", "mb-1", 3, "ngClass"], [1, "text-xs", 3, "ngClass"], [1, "px-2.5", "py-1", "rounded-full", "text-xs", "font-semibold", "whitespace-nowrap", 3, "ngClass"], [1, "grid", "transition-[grid-template-rows]", "duration-300", "ease-in-out"], [1, "overflow-hidden", "min-h-0"], [1, "transition-opacity", "duration-300"], [1, "grid", "grid-cols-2", "gap-3", "mb-3"], [1, "p-3", "rounded-lg", 3, "ngClass"], [1, "text-xs", "font-medium", "mb-1", 3, "ngClass"], [1, "flex", "items-center", "gap-1.5"], [1, "w-2", "h-2", "rounded-full", 3, "ngClass"], [1, "text-xs", "font-semibold", 3, "ngClass"], [1, "flex", "flex-wrap", "gap-1.5", "mb-4"], [1, "px-2", "py-1", "rounded", "text-xs", "font-medium", 3, "ngClass", "animate-pulse"], [1, "px-2", "py-1", "rounded", "text-xs", 3, "ngClass"], [1, "space-y-2"], [1, "flex", "items-center", "gap-2", "mt-3", "cursor-pointer"], [1, "px-2", "py-1", "rounded", "text-xs", "font-medium", 3, "ngClass"], ["size", "w-3.5 h-3.5", 3, "icon", "ngClass"], [3, "relatedGoalIds", "allGoals", "viewMode"], [1, "flex", "items-center", "gap-2", "mt-3", "cursor-pointer", 3, "click"], [1, "text-sm", "font-medium", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4", "transition-transform", "duration-200", 3, "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M19 9l-7 7-7-7"]], template: function CapabilityMatrixCardComponent_Template(rf, ctx) { if (rf & 1) {
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CapabilityMatrixCardComponent, selectors: [["symphiq-capability-matrix-card"]], inputs: { capability: [1, "capability"], viewMode: [1, "viewMode"], allGoals: [1, "allGoals"] }, decls: 31, vars: 30, consts: [[1, "rounded-lg", "p-4", 3, "click", "ngClass"], [1, "flex", "items-start", "justify-between", "gap-3", "mb-3"], [1, "flex-1"], [1, "font-semibold", "text-sm", "mb-1", 3, "ngClass"], [1, "text-xs", 3, "ngClass"], [1, "px-2.5", "py-1", "rounded-full", "text-xs", "font-semibold", "whitespace-nowrap", 3, "ngClass"], [1, "grid", "transition-[grid-template-rows]", "duration-300", "ease-in-out"], [1, "overflow-hidden", "min-h-0"], [1, "transition-opacity", "duration-300"], [1, "grid", "grid-cols-2", "gap-3", "mb-3"], [1, "p-3", "rounded-lg", 3, "ngClass"], [1, "text-xs", "font-medium", "mb-1", 3, "ngClass"], [1, "flex", "items-center", "gap-1.5"], [1, "w-2", "h-2", "rounded-full", 3, "ngClass"], [1, "text-xs", "font-semibold", 3, "ngClass"], [1, "flex", "flex-wrap", "gap-1.5", "mb-4"], [1, "px-2", "py-1", "rounded", "text-xs", "font-medium", 3, "ngClass", "animate-pulse-slow"], [1, "px-2", "py-1", "rounded", "text-xs", 3, "ngClass"], [1, "space-y-2"], [1, "flex", "items-center", "gap-2", "mt-3", "cursor-pointer"], [1, "px-2", "py-1", "rounded", "text-xs", "font-medium", 3, "ngClass"], ["size", "w-3.5 h-3.5", 3, "icon", "ngClass"], [3, "relatedGoalIds", "allGoals", "viewMode"], [1, "flex", "items-center", "gap-2", "mt-3", "cursor-pointer", 3, "click"], [1, "text-sm", "font-medium", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4", "transition-transform", "duration-200", 3, "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M19 9l-7 7-7-7"]], template: function CapabilityMatrixCardComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0);
             i0.ɵɵlistener("click", function CapabilityMatrixCardComponent_Template_div_click_0_listener($event) { return ctx.onCardClick($event); });
             i0.ɵɵelementStart(1, "div", 1)(2, "div", 2)(3, "h5", 3);
@@ -72848,7 +72852,7 @@ class CapabilityMatrixCardComponent {
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngClass", ctx.stateLabelClasses());
             i0.ɵɵadvance(3);
-            i0.ɵɵclassProp("animate-pulse", ctx.isNotImplemented((tmp_11_0 = ctx.capability()) == null ? null : tmp_11_0.currentState));
+            i0.ɵɵclassProp("animate-pulse-slow", ctx.isNotImplemented((tmp_11_0 = ctx.capability()) == null ? null : tmp_11_0.currentState));
             i0.ɵɵproperty("ngClass", ctx.stateIndicatorClasses(((tmp_12_0 = ctx.capability()) == null ? null : tmp_12_0.currentState) || ctx.CapabilityStateEnum.NOT_IMPLEMENTED));
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngClass", ctx.stateValueClasses());
@@ -72883,107 +72887,107 @@ class CapabilityMatrixCardComponent {
                 standalone: true,
                 imports: [CommonModule, RelatedGoalChipsComponent, SymphiqIconComponent],
                 changeDetection: ChangeDetectionStrategy.OnPush,
-                template: `
-    <div
-      [ngClass]="cardClasses()"
-      [class.cursor-pointer]="!isExpandedMode()"
-      (click)="onCardClick($event)"
-      class="rounded-lg p-4">
-      <div class="flex items-start justify-between gap-3 mb-3">
-        <div class="flex-1">
-          <h5 [ngClass]="titleClasses()" class="font-semibold text-sm mb-1">{{ capability()?.name }}</h5>
-          @if (capability()?.industryBenchmark) {
-            <p [ngClass]="benchmarkClasses()" class="text-xs">Industry: {{ formatIndustryBenchmark(capability()!.industryBenchmark!) }}</p>
-          }
-        </div>
-        @if (capability()?.quadrant) {
-          <span [ngClass]="quadrantBadgeClasses()" class="px-2.5 py-1 rounded-full text-xs font-semibold whitespace-nowrap">
-            {{ quadrantLabel() }}
-          </span>
-        }
-      </div>
-
-      <!-- Expandable Content -->
-      <div class="grid transition-[grid-template-rows] duration-300 ease-in-out" [style.grid-template-rows]="shouldShowExpandedContent() ? '1fr' : '0fr'">
-        <div class="overflow-hidden min-h-0">
-          <div [style.opacity]="shouldShowExpandedContent() ? '1' : '0'" [style.transition-delay]="shouldShowExpandedContent() ? '150ms' : '0ms'" class="transition-opacity duration-300">
-
-      <div class="grid grid-cols-2 gap-3 mb-3">
-        <div [ngClass]="stateSectionClasses()" class="p-3 rounded-lg">
-          <p [ngClass]="stateLabelClasses()" class="text-xs font-medium mb-1">Current</p>
-          <div class="flex items-center gap-1.5">
-            <div [ngClass]="stateIndicatorClasses(capability()?.currentState || CapabilityStateEnum.NOT_IMPLEMENTED)" [class.animate-pulse]="isNotImplemented(capability()?.currentState)" class="w-2 h-2 rounded-full"></div>
-            <p [ngClass]="stateValueClasses()" class="text-xs">{{ formatState(capability()?.currentState) }}</p>
-          </div>
-        </div>
-        <div [ngClass]="stateSectionClasses()" class="p-3 rounded-lg">
-          <p [ngClass]="stateLabelClasses()" class="text-xs font-medium mb-1">Desired</p>
-          <div class="flex items-center gap-1.5">
-            <div [ngClass]="stateIndicatorClasses(capability()?.desiredState || CapabilityStateEnum.FULLY_IMPLEMENTED)" class="w-2 h-2 rounded-full"></div>
-            <p [ngClass]="stateValueClasses()" class="text-xs font-semibold">{{ formatState(capability()?.desiredState) }}</p>
-          </div>
-        </div>
-      </div>
-
-      <div class="flex flex-wrap gap-1.5 mb-4">
-        @if (capability()?.importance) {
-          <span [ngClass]="importanceBadgeClasses()" [class.animate-pulse]="isHighImportance()" class="px-2 py-1 rounded text-xs font-medium">
-            {{ importanceLabel() }} Importance
-          </span>
-        }
-        @if (capability()?.effort) {
-          <span [ngClass]="effortBadgeClasses()" class="px-2 py-1 rounded text-xs">
-            {{ effortLabel() }} Effort
-          </span>
-        }
-        @if (capability()?.impact) {
-          <span [ngClass]="impactBadgeClasses()" class="px-2 py-1 rounded text-xs">
-            {{ impactLabel() }} Impact
-          </span>
-        }
-      </div>
-
-      <!-- Related Goals (in expandable section) -->
-      @if (capability()?.relatedGoalIds && capability()!.relatedGoalIds!.length > 0) {
-        <div class="space-y-2">
-          <div class="flex items-center gap-1.5">
-            <symphiq-icon
-              [icon]="{ name: 'link', source: IconSourceEnum.HEROICONS }"
-              size="w-3.5 h-3.5"
-              [ngClass]="relatedGoalsIconClasses()"
-            />
-            <span [ngClass]="relatedGoalsTitleClasses()" class="text-xs font-semibold">Related Goals</span>
-          </div>
-          <symphiq-related-goal-chips
-            [relatedGoalIds]="capability()!.relatedGoalIds!"
-            [allGoals]="allGoals()"
-            [viewMode]="viewMode()"
-          />
-        </div>
-      }
-
-          </div>
-        </div>
-      </div>
-
-      <!-- Learn More / View Less Button (for Compact/Simplified modes) -->
-      @if (!isExpandedMode()) {
-        <div class="flex items-center gap-2 mt-3 cursor-pointer" (click)="toggleExpanded($event)">
-          <span [ngClass]="learnMoreButtonClasses()" class="text-sm font-medium">
-            {{ isExpanded() ? 'View Less' : 'Learn More' }}
-          </span>
-          <svg
-            [ngClass]="learnMoreChevronClasses()"
-            [class.rotate-180]="isExpanded()"
-            class="w-4 h-4 transition-transform duration-200"
-            fill="none"
-            stroke="currentColor"
-            viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
-          </svg>
-        </div>
-      }
-    </div>
+                template: `
+    <div
+      [ngClass]="cardClasses()"
+      [class.cursor-pointer]="!isExpandedMode()"
+      (click)="onCardClick($event)"
+      class="rounded-lg p-4">
+      <div class="flex items-start justify-between gap-3 mb-3">
+        <div class="flex-1">
+          <h5 [ngClass]="titleClasses()" class="font-semibold text-sm mb-1">{{ capability()?.name }}</h5>
+          @if (capability()?.industryBenchmark) {
+            <p [ngClass]="benchmarkClasses()" class="text-xs">Industry: {{ formatIndustryBenchmark(capability()!.industryBenchmark!) }}</p>
+          }
+        </div>
+        @if (capability()?.quadrant) {
+          <span [ngClass]="quadrantBadgeClasses()" class="px-2.5 py-1 rounded-full text-xs font-semibold whitespace-nowrap">
+            {{ quadrantLabel() }}
+          </span>
+        }
+      </div>
+
+      <!-- Expandable Content -->
+      <div class="grid transition-[grid-template-rows] duration-300 ease-in-out" [style.grid-template-rows]="shouldShowExpandedContent() ? '1fr' : '0fr'">
+        <div class="overflow-hidden min-h-0">
+          <div [style.opacity]="shouldShowExpandedContent() ? '1' : '0'" [style.transition-delay]="shouldShowExpandedContent() ? '150ms' : '0ms'" class="transition-opacity duration-300">
+
+      <div class="grid grid-cols-2 gap-3 mb-3">
+        <div [ngClass]="stateSectionClasses()" class="p-3 rounded-lg">
+          <p [ngClass]="stateLabelClasses()" class="text-xs font-medium mb-1">Current</p>
+          <div class="flex items-center gap-1.5">
+            <div [ngClass]="stateIndicatorClasses(capability()?.currentState || CapabilityStateEnum.NOT_IMPLEMENTED)" [class.animate-pulse-slow]="isNotImplemented(capability()?.currentState)" class="w-2 h-2 rounded-full"></div>
+            <p [ngClass]="stateValueClasses()" class="text-xs">{{ formatState(capability()?.currentState) }}</p>
+          </div>
+        </div>
+        <div [ngClass]="stateSectionClasses()" class="p-3 rounded-lg">
+          <p [ngClass]="stateLabelClasses()" class="text-xs font-medium mb-1">Desired</p>
+          <div class="flex items-center gap-1.5">
+            <div [ngClass]="stateIndicatorClasses(capability()?.desiredState || CapabilityStateEnum.FULLY_IMPLEMENTED)" class="w-2 h-2 rounded-full"></div>
+            <p [ngClass]="stateValueClasses()" class="text-xs font-semibold">{{ formatState(capability()?.desiredState) }}</p>
+          </div>
+        </div>
+      </div>
+
+      <div class="flex flex-wrap gap-1.5 mb-4">
+        @if (capability()?.importance) {
+          <span [ngClass]="importanceBadgeClasses()" [class.animate-pulse-slow]="isHighImportance()" class="px-2 py-1 rounded text-xs font-medium">
+            {{ importanceLabel() }} Importance
+          </span>
+        }
+        @if (capability()?.effort) {
+          <span [ngClass]="effortBadgeClasses()" class="px-2 py-1 rounded text-xs">
+            {{ effortLabel() }} Effort
+          </span>
+        }
+        @if (capability()?.impact) {
+          <span [ngClass]="impactBadgeClasses()" class="px-2 py-1 rounded text-xs">
+            {{ impactLabel() }} Impact
+          </span>
+        }
+      </div>
+
+      <!-- Related Goals (in expandable section) -->
+      @if (capability()?.relatedGoalIds && capability()!.relatedGoalIds!.length > 0) {
+        <div class="space-y-2">
+          <div class="flex items-center gap-1.5">
+            <symphiq-icon
+              [icon]="{ name: 'link', source: IconSourceEnum.HEROICONS }"
+              size="w-3.5 h-3.5"
+              [ngClass]="relatedGoalsIconClasses()"
+            />
+            <span [ngClass]="relatedGoalsTitleClasses()" class="text-xs font-semibold">Related Goals</span>
+          </div>
+          <symphiq-related-goal-chips
+            [relatedGoalIds]="capability()!.relatedGoalIds!"
+            [allGoals]="allGoals()"
+            [viewMode]="viewMode()"
+          />
+        </div>
+      }
+
+          </div>
+        </div>
+      </div>
+
+      <!-- Learn More / View Less Button (for Compact/Simplified modes) -->
+      @if (!isExpandedMode()) {
+        <div class="flex items-center gap-2 mt-3 cursor-pointer" (click)="toggleExpanded($event)">
+          <span [ngClass]="learnMoreButtonClasses()" class="text-sm font-medium">
+            {{ isExpanded() ? 'View Less' : 'Learn More' }}
+          </span>
+          <svg
+            [ngClass]="learnMoreChevronClasses()"
+            [class.rotate-180]="isExpanded()"
+            class="w-4 h-4 transition-transform duration-200"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
+          </svg>
+        </div>
+      }
+    </div>
   `
             }]
     }], () => [], { capability: [{ type: i0.Input, args: [{ isSignal: true, alias: "capability", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], allGoals: [{ type: i0.Input, args: [{ isSignal: true, alias: "allGoals", required: false }] }] }); })();
@@ -73090,7 +73094,7 @@ function CompetitiveComparisonCardComponent_Conditional_13_For_4_Template(rf, ct
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngClass", ctx_r1.competitorNameClasses());
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(position_r3.competitorId);
+    i0.ɵɵtextInterpolate(ctx_r1.getCompetitorTitle(position_r3.competitorId));
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r1.advantageBadgeClasses(position_r3.advantage));
     i0.ɵɵadvance();
@@ -73162,6 +73166,7 @@ class CompetitiveComparisonCardComponent {
         this.comparison = input(...(ngDevMode ? [undefined, { debugName: "comparison" }] : []));
         this.viewMode = input(ViewModeEnum.LIGHT, ...(ngDevMode ? [{ debugName: "viewMode" }] : []));
         this.viewModeService = inject(ViewModeService);
+        this.profileContextService = inject(ProfileContextService);
         this.expandedSignal = signal(false, ...(ngDevMode ? [{ debugName: "expandedSignal" }] : []));
         this.isDark = computed(() => this.viewMode() === ViewModeEnum.DARK, ...(ngDevMode ? [{ debugName: "isDark" }] : []));
         this.globalIsExpanded = computed(() => this.viewModeService.getViewMode() === 'expanded', ...(ngDevMode ? [{ debugName: "globalIsExpanded" }] : []));
@@ -73273,6 +73278,12 @@ class CompetitiveComparisonCardComponent {
             default: return '';
         }
     }
+    getCompetitorTitle(competitorId) {
+        if (!competitorId)
+            return '';
+        const competitors = this.profileContextService.getCompetitorsByIds([competitorId]);
+        return competitors[0]?.label || competitorId;
+    }
     advantageBadgeClasses(advantage) {
         if (this.isDark()) {
             if (advantage === AdvantageEnum.YOURS) {
@@ -73431,7 +73442,7 @@ class CompetitiveComparisonCardComponent {
           @for (position of comparison()!.competitorPositions; track position.competitorId || $index) {
             <div [ngClass]="competitorCardClasses()" class="p-3 rounded-lg">
               <div class="flex items-start justify-between gap-2 mb-2">
-                <p [ngClass]="competitorNameClasses()" class="text-sm font-medium">{{ position.competitorId }}</p>
+                <p [ngClass]="competitorNameClasses()" class="text-sm font-medium">{{ getCompetitorTitle(position.competitorId) }}</p>
                 <span [ngClass]="advantageBadgeClasses(position.advantage)" class="px-2 py-0.5 rounded-full text-xs font-semibold whitespace-nowrap">
                   {{ formatAdvantage(position.advantage) }}
                 </span>
@@ -73481,7 +73492,7 @@ class CompetitiveComparisonCardComponent {
   `
             }]
     }], () => [], { comparison: [{ type: i0.Input, args: [{ isSignal: true, alias: "comparison", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CompetitiveComparisonCardComponent, { className: "CompetitiveComparisonCardComponent", filePath: "lib/components/profile-analysis-dashboard/cards/competitive-comparison-card.component.ts", lineNumber: 125 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CompetitiveComparisonCardComponent, { className: "CompetitiveComparisonCardComponent", filePath: "lib/components/profile-analysis-dashboard/cards/competitive-comparison-card.component.ts", lineNumber: 126 }); })();
 
 const _c0$j = a0 => ({ name: "chevron-right", source: a0 });
 const _forTrack0$j = ($index, $item) => $item.id;
@@ -73523,20 +73534,22 @@ function PhaseTimelineCardComponent_Conditional_8_Template(rf, ctx) { if (rf & 1
     i0.ɵɵrepeater(ctx_r2.goalObjects());
 } }
 function PhaseTimelineCardComponent_Conditional_9_For_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "li", 19);
-    i0.ɵɵelement(1, "div", 20);
-    i0.ɵɵelementStart(2, "span", 21);
-    i0.ɵɵtext(3);
-    i0.ɵɵelementEnd()();
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 15);
+    i0.ɵɵlistener("click", function PhaseTimelineCardComponent_Conditional_9_For_7_Template_button_click_0_listener($event) { const recommendation_r5 = i0.ɵɵrestoreView(_r4).$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.openRecommendationModal(recommendation_r5, $event)); });
+    i0.ɵɵelementStart(1, "span");
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(3, "symphiq-icon", 16);
+    i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const recommendationId_r4 = ctx.$implicit;
+    const recommendation_r5 = ctx.$implicit;
     const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("ngClass", ctx_r2.recommendationBadgeClasses());
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(recommendation_r5.title);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngClass", ctx_r2.bulletClasses());
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("ngClass", ctx_r2.recommendationTextClasses());
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(recommendationId_r4);
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(3, _c0$j, ctx_r2.IconSourceEnum.HEROICONS));
 } }
 function PhaseTimelineCardComponent_Conditional_9_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 7)(1, "h6", 10);
@@ -73547,47 +73560,47 @@ function PhaseTimelineCardComponent_Conditional_9_Template(rf, ctx) { if (rf & 1
     i0.ɵɵtext(4, " Recommendations ");
     i0.ɵɵelementEnd();
     i0.ɵɵnamespaceHTML();
-    i0.ɵɵelementStart(5, "ul", 18);
-    i0.ɵɵrepeaterCreate(6, PhaseTimelineCardComponent_Conditional_9_For_7_Template, 4, 3, "li", 19, i0.ɵɵrepeaterTrackByIndex);
+    i0.ɵɵelementStart(5, "div", 13);
+    i0.ɵɵrepeaterCreate(6, PhaseTimelineCardComponent_Conditional_9_For_7_Template, 4, 5, "button", 14, _forTrack0$j);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r2.sectionLabelClasses());
     i0.ɵɵadvance(5);
-    i0.ɵɵrepeater(ctx_r2.phase().recommendationIds);
+    i0.ɵɵrepeater(ctx_r2.recommendationObjects());
 } }
 function PhaseTimelineCardComponent_Conditional_10_For_10_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "li", 19);
+    i0.ɵɵelementStart(0, "li", 23);
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(1, "svg", 27);
-    i0.ɵɵelement(2, "path", 28);
+    i0.ɵɵelementStart(1, "svg", 24);
+    i0.ɵɵelement(2, "path", 25);
     i0.ɵɵelementEnd();
     i0.ɵɵnamespaceHTML();
-    i0.ɵɵelementStart(3, "span", 21);
+    i0.ɵɵelementStart(3, "span", 26);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const outcome_r5 = ctx.$implicit;
+    const outcome_r6 = ctx.$implicit;
     const ctx_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r2.outcomeIconClasses());
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngClass", ctx_r2.outcomeTextClasses());
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(outcome_r5);
+    i0.ɵɵtextInterpolate(outcome_r6);
 } }
 function PhaseTimelineCardComponent_Conditional_10_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 22)(1, "div", 23)(2, "div")(3, "h6", 10);
+    i0.ɵɵelementStart(0, "div", 18)(1, "div", 19)(2, "div")(3, "h6", 10);
     i0.ɵɵnamespaceSVG();
     i0.ɵɵelementStart(4, "svg", 11);
-    i0.ɵɵelement(5, "path", 24);
+    i0.ɵɵelement(5, "path", 20);
     i0.ɵɵelementEnd();
     i0.ɵɵtext(6, " Expected Outcomes ");
     i0.ɵɵelementEnd();
     i0.ɵɵnamespaceHTML();
-    i0.ɵɵelementStart(7, "div", 25)(8, "ul", 26);
-    i0.ɵɵrepeaterCreate(9, PhaseTimelineCardComponent_Conditional_10_For_10_Template, 5, 3, "li", 19, i0.ɵɵrepeaterTrackByIndex);
+    i0.ɵɵelementStart(7, "div", 21)(8, "ul", 22);
+    i0.ɵɵrepeaterCreate(9, PhaseTimelineCardComponent_Conditional_10_For_10_Template, 5, 3, "li", 23, i0.ɵɵrepeaterTrackByIndex);
     i0.ɵɵelementEnd()()()()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
@@ -73600,15 +73613,15 @@ function PhaseTimelineCardComponent_Conditional_10_Template(rf, ctx) { if (rf &
     i0.ɵɵrepeater(ctx_r2.phase().outcomes);
 } }
 function PhaseTimelineCardComponent_Conditional_11_Template(rf, ctx) { if (rf & 1) {
-    const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 29);
-    i0.ɵɵlistener("click", function PhaseTimelineCardComponent_Conditional_11_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.toggleExpanded()); });
-    i0.ɵɵelementStart(1, "span", 30);
+    const _r7 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 27);
+    i0.ɵɵlistener("click", function PhaseTimelineCardComponent_Conditional_11_Template_div_click_0_listener($event) { i0.ɵɵrestoreView(_r7); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.toggleExpanded($event)); });
+    i0.ɵɵelementStart(1, "span", 28);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(3, "svg", 31);
-    i0.ɵɵelement(4, "path", 32);
+    i0.ɵɵelementStart(3, "svg", 29);
+    i0.ɵɵelement(4, "path", 30);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
@@ -73628,6 +73641,7 @@ class PhaseTimelineCardComponent {
         this.allGoals = input([], ...(ngDevMode ? [{ debugName: "allGoals" }] : []));
         this.viewModeService = inject(ViewModeService);
         this.modalService = inject(ModalService);
+        this.profileContextService = inject(ProfileContextService);
         this.expandedSignal = signal(false, ...(ngDevMode ? [{ debugName: "expandedSignal" }] : []));
         this.IconSourceEnum = IconSourceEnum;
         this.isDark = computed(() => this.viewMode() === ViewModeEnum.DARK, ...(ngDevMode ? [{ debugName: "isDark" }] : []));
@@ -73635,6 +73649,12 @@ class PhaseTimelineCardComponent {
             const goalIds = this.phase()?.goalIds || [];
             return this.allGoals().filter((goal) => goalIds.includes(goal.id || ''));
         }, ...(ngDevMode ? [{ debugName: "goalObjects" }] : []));
+        this.recommendationObjects = computed(() => {
+            const recommendationIds = this.phase()?.recommendationIds || [];
+            return recommendationIds
+                .map(id => this.profileContextService.getRecommendationById(id))
+                .filter((rec) => rec !== undefined);
+        }, ...(ngDevMode ? [{ debugName: "recommendationObjects" }] : []));
         this.globalIsExpanded = computed(() => this.viewModeService.getViewMode() === 'expanded', ...(ngDevMode ? [{ debugName: "globalIsExpanded" }] : []));
         this.formattedPhaseName = computed(() => {
             const phaseData = this.phase();
@@ -73690,6 +73710,12 @@ class PhaseTimelineCardComponent {
             }
             return 'bg-blue-50 text-blue-700 border border-blue-200 hover:bg-blue-100 hover:border-blue-300 hover:shadow-lg hover:shadow-blue-500/20';
         }, ...(ngDevMode ? [{ debugName: "goalBadgeClasses" }] : []));
+        this.recommendationBadgeClasses = computed(() => {
+            if (this.isDark()) {
+                return 'bg-purple-500/20 text-purple-400 border border-purple-500/30 hover:bg-purple-500/30 hover:border-purple-500/40 hover:shadow-lg hover:shadow-purple-500/20';
+            }
+            return 'bg-purple-50 text-purple-700 border border-purple-200 hover:bg-purple-100 hover:border-purple-300 hover:shadow-lg hover:shadow-purple-500/20';
+        }, ...(ngDevMode ? [{ debugName: "recommendationBadgeClasses" }] : []));
         this.bulletClasses = computed(() => {
             return this.isDark() ? 'bg-slate-400' : 'bg-slate-400';
         }, ...(ngDevMode ? [{ debugName: "bulletClasses" }] : []));
@@ -73732,7 +73758,10 @@ class PhaseTimelineCardComponent {
     shouldShowExpandedContent() {
         return this.globalIsExpanded() || this.expandedSignal();
     }
-    toggleExpanded() {
+    toggleExpanded(event) {
+        if (event) {
+            event.stopPropagation();
+        }
         if (!this.globalIsExpanded()) {
             this.expandedSignal.update(v => !v);
         }
@@ -73749,8 +73778,20 @@ class PhaseTimelineCardComponent {
         }
         this.modalService.openGoalDetailModal(goal, this.viewMode());
     }
+    openRecommendationModal(recommendation, event) {
+        if (event) {
+            event.stopPropagation();
+            event.preventDefault();
+        }
+        const goalContext = {
+            title: recommendation.title || 'Recommendation',
+            description: recommendation.description || '',
+            icon: 'light-bulb'
+        };
+        this.modalService.navigateToBusinessInsightDetail(recommendation, goalContext, this.viewMode());
+    }
     static { this.ɵfac = function PhaseTimelineCardComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PhaseTimelineCardComponent)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PhaseTimelineCardComponent, selectors: [["symphiq-phase-timeline-card"]], inputs: { phase: [1, "phase"], viewMode: [1, "viewMode"], isLast: [1, "isLast"], allGoals: [1, "allGoals"] }, decls: 12, vars: 12, consts: [[1, "rounded-lg", "p-5", "relative", 3, "click", "ngClass"], [1, "flex", "items-start", "gap-4", "relative"], [1, "z-10", 3, "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", "M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"], [1, "flex-1"], [1, "font-bold", "text-lg", "mb-4", 3, "ngClass"], [1, "mb-4"], [1, "grid", "transition-[grid-template-rows]", "duration-300", "ease-in-out", 3, "grid-template-rows"], [1, "flex", "items-center", "gap-2", "mt-3", "cursor-pointer"], [1, "text-sm", "font-semibold", "mb-2", "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-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"], [1, "flex", "flex-wrap", "gap-2"], ["type", "button", 1, "cursor-pointer", "flex", "items-center", "gap-2", "px-3", "py-1.5", "rounded-lg", "text-xs", "font-medium", "transition-all", "duration-200", "hover:scale-105", "hover:shadow-md", 3, "ngClass"], ["type", "button", 1, "cursor-pointer", "flex", "items-center", "gap-2", "px-3", "py-1.5", "rounded-lg", "text-xs", "font-medium", "transition-all", "duration-200", "hover:scale-105", "hover:shadow-md", 3, "click", "ngClass"], ["size", "w-3.5 h-3.5", 1, "flex-shrink-0", "opacity-60", 3, "icon"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"], [1, "space-y-2"], [1, "flex", "items-start", "gap-2"], [1, "w-1.5", "h-1.5", "rounded-full", "mt-1.5", "flex-shrink-0", 3, "ngClass"], [1, "text-sm", 3, "ngClass"], [1, "grid", "transition-[grid-template-rows]", "duration-300", "ease-in-out"], [1, "overflow-hidden"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M13 10V3L4 14h7v7l9-11h-7z"], [1, "p-3", "rounded-lg", 3, "ngClass"], [1, "space-y-1.5"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4", "flex-shrink-0", "mt-0.5", 3, "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M5 13l4 4L19 7"], [1, "flex", "items-center", "gap-2", "mt-3", "cursor-pointer", 3, "click"], [1, "text-sm", "font-medium", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4", "transition-transform", "duration-200", 3, "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M19 9l-7 7-7-7"]], template: function PhaseTimelineCardComponent_Template(rf, ctx) { if (rf & 1) {
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PhaseTimelineCardComponent, selectors: [["symphiq-phase-timeline-card"]], inputs: { phase: [1, "phase"], viewMode: [1, "viewMode"], isLast: [1, "isLast"], allGoals: [1, "allGoals"] }, decls: 12, vars: 12, consts: [[1, "rounded-lg", "p-5", "relative", 3, "click", "ngClass"], [1, "flex", "items-start", "gap-4", "relative"], [1, "z-10", 3, "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", "M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"], [1, "flex-1"], [1, "font-bold", "text-lg", "mb-4", 3, "ngClass"], [1, "mb-4"], [1, "grid", "transition-[grid-template-rows]", "duration-300", "ease-in-out", 3, "grid-template-rows"], [1, "flex", "items-center", "gap-2", "mt-3", "cursor-pointer"], [1, "text-sm", "font-semibold", "mb-2", "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-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"], [1, "flex", "flex-wrap", "gap-2"], ["type", "button", 1, "cursor-pointer", "flex", "items-center", "gap-2", "px-3", "py-1.5", "rounded-lg", "text-xs", "font-medium", "transition-all", "duration-200", "hover:scale-105", "hover:shadow-md", 3, "ngClass"], ["type", "button", 1, "cursor-pointer", "flex", "items-center", "gap-2", "px-3", "py-1.5", "rounded-lg", "text-xs", "font-medium", "transition-all", "duration-200", "hover:scale-105", "hover:shadow-md", 3, "click", "ngClass"], ["size", "w-3.5 h-3.5", 1, "flex-shrink-0", "opacity-60", 3, "icon"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"], [1, "grid", "transition-[grid-template-rows]", "duration-300", "ease-in-out"], [1, "overflow-hidden"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M13 10V3L4 14h7v7l9-11h-7z"], [1, "p-3", "rounded-lg", 3, "ngClass"], [1, "space-y-1.5"], [1, "flex", "items-start", "gap-2"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4", "flex-shrink-0", "mt-0.5", 3, "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M5 13l4 4L19 7"], [1, "text-sm", 3, "ngClass"], [1, "flex", "items-center", "gap-2", "mt-3", "cursor-pointer", 3, "click"], [1, "text-sm", "font-medium", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4", "transition-transform", "duration-200", 3, "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M19 9l-7 7-7-7"]], template: function PhaseTimelineCardComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0);
             i0.ɵɵlistener("click", function PhaseTimelineCardComponent_Template_div_click_0_listener($event) { return ctx.onCardClick($event); });
             i0.ɵɵelementStart(1, "div", 1)(2, "div", 2);
@@ -73769,7 +73810,6 @@ class PhaseTimelineCardComponent {
             i0.ɵɵelementEnd()()();
         } if (rf & 2) {
             let tmp_6_0;
-            let tmp_7_0;
             let tmp_8_0;
             let tmp_9_0;
             i0.ɵɵclassProp("mb-6", !ctx.isLast())("cursor-pointer", ctx.isCompactMode());
@@ -73783,7 +73823,7 @@ class PhaseTimelineCardComponent {
             i0.ɵɵadvance();
             i0.ɵɵconditional(((tmp_6_0 = ctx.phase()) == null ? null : tmp_6_0.goalIds) && ctx.phase().goalIds.length > 0 ? 8 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(((tmp_7_0 = ctx.phase()) == null ? null : tmp_7_0.recommendationIds) && ctx.phase().recommendationIds.length > 0 ? 9 : -1);
+            i0.ɵɵconditional(ctx.recommendationObjects().length > 0 ? 9 : -1);
             i0.ɵɵadvance();
             i0.ɵɵconditional(((tmp_8_0 = ctx.phase()) == null ? null : tmp_8_0.outcomes) && ctx.phase().outcomes.length > 0 ? 10 : -1);
             i0.ɵɵadvance();
@@ -73837,7 +73877,7 @@ class PhaseTimelineCardComponent {
             </div>
           }
 
-          @if (phase()?.recommendationIds && phase()!.recommendationIds!.length > 0) {
+          @if (recommendationObjects().length > 0) {
             <div class="mb-4">
               <h6 [ngClass]="sectionLabelClasses()" class="text-sm font-semibold mb-2 flex items-center gap-2">
                 <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -73845,14 +73885,18 @@ class PhaseTimelineCardComponent {
                 </svg>
                 Recommendations
               </h6>
-              <ul class="space-y-2">
-                @for (recommendationId of phase()!.recommendationIds; track $index) {
-                  <li class="flex items-start gap-2">
-                    <div [ngClass]="bulletClasses()" class="w-1.5 h-1.5 rounded-full mt-1.5 flex-shrink-0"></div>
-                    <span [ngClass]="recommendationTextClasses()" class="text-sm">{{ recommendationId }}</span>
-                  </li>
+              <div class="flex flex-wrap gap-2">
+                @for (recommendation of recommendationObjects(); track recommendation.id) {
+                  <button
+                    type="button"
+                    [ngClass]="recommendationBadgeClasses()"
+                    (click)="openRecommendationModal(recommendation, $event)"
+                    class="cursor-pointer flex items-center gap-2 px-3 py-1.5 rounded-lg text-xs font-medium transition-all duration-200 hover:scale-105 hover:shadow-md">
+                    <span>{{ recommendation.title }}</span>
+                    <symphiq-icon [icon]="{ name: 'chevron-right', source: IconSourceEnum.HEROICONS }" size="w-3.5 h-3.5" class="flex-shrink-0 opacity-60"></symphiq-icon>
+                  </button>
                 }
-              </ul>
+              </div>
             </div>
           }
 
@@ -73886,7 +73930,7 @@ class PhaseTimelineCardComponent {
 
           <!-- Learn More / View Less Button (for Compact mode) -->
           @if (isCompactMode() && phase()?.outcomes && phase()!.outcomes!.length > 0) {
-            <div class="flex items-center gap-2 mt-3 cursor-pointer" (click)="toggleExpanded()">
+            <div class="flex items-center gap-2 mt-3 cursor-pointer" (click)="toggleExpanded($event)">
               <span [ngClass]="learnMoreButtonClasses()" class="text-sm font-medium">
                 {{ isExpanded() ? 'View Less' : 'Learn More' }}
               </span>
@@ -73907,7 +73951,7 @@ class PhaseTimelineCardComponent {
   `
             }]
     }], () => [], { phase: [{ type: i0.Input, args: [{ isSignal: true, alias: "phase", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], isLast: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLast", required: false }] }], allGoals: [{ type: i0.Input, args: [{ isSignal: true, alias: "allGoals", required: false }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PhaseTimelineCardComponent, { className: "PhaseTimelineCardComponent", filePath: "lib/components/profile-analysis-dashboard/cards/phase-timeline-card.component.ts", lineNumber: 123 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PhaseTimelineCardComponent, { className: "PhaseTimelineCardComponent", filePath: "lib/components/profile-analysis-dashboard/cards/phase-timeline-card.component.ts", lineNumber: 128 }); })();
 
 const _c0$i = a0 => ({ name: "chevron-right", source: a0 });
 function OperationalCategoryCardComponent_Conditional_18_Template(rf, ctx) { if (rf & 1) {
@@ -74276,7 +74320,7 @@ class OperationalCategoryCardComponent {
     static { this.ɵfac = function OperationalCategoryCardComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || OperationalCategoryCardComponent)(); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: OperationalCategoryCardComponent, selectors: [["symphiq-operational-category-card"]], hostVars: 1, hostBindings: function OperationalCategoryCardComponent_HostBindings(rf, ctx) { if (rf & 2) {
             i0.ɵɵattribute("data-animate-progress", true);
-        } }, inputs: { category: [1, "category"], viewMode: [1, "viewMode"] }, outputs: { categoryClick: "categoryClick" }, decls: 25, vars: 25, consts: [[1, "rounded-xl", "p-6", "transition-all", "duration-300", "group", "hover:scale-[1.02]", "active:scale-[0.98]", 3, "click", "ngClass"], [1, "flex", "items-start", "justify-between", "mb-4"], [1, "flex-1", "min-w-0", "mr-3"], [1, "text-lg", "font-bold", "mb-2", 3, "ngClass"], [1, "inline-flex", "items-center", "px-2.5", "py-1", "rounded-full", "text-xs", "font-semibold", 3, "ngClass"], [1, "flex", "flex-col", "items-end", "gap-2"], [1, "px-4", "py-2", "rounded-lg", "text-center", "min-w-[60px]", 3, "ngClass"], [1, "text-2xl", "font-bold"], [1, "text-xs", "font-medium", "opacity-90"], [1, "text-sm", "mb-4", 3, "ngClass"], [1, "grid", "transition-[grid-template-rows]", "duration-300", "ease-in-out"], [1, "overflow-hidden", "min-h-0"], [1, "transition-opacity", "duration-300"], [1, "mb-4"], [1, "flex", "flex-wrap", "gap-2", "mb-4", "px-1", "-mx-1"], [1, "flex", "items-center", "gap-1.5", "px-3", "py-1.5", "rounded-lg", "text-xs", "font-semibold", "cursor-pointer", "hover:scale-[1.03]", "transition-transform", "group", 3, "ngClass"], [1, "flex", "items-center", "gap-1.5", "px-3", "py-1.5", "rounded-lg", "text-xs", "font-semibold", "cursor-pointer", "hover:scale-[1.03]", "transition-transform", "group", "animate-pulse", 3, "ngClass"], [1, "flex", "items-center", "justify-between", "pt-3", "border-t", 3, "ngClass"], [1, "flex", "items-center", "gap-2", "mt-3", "cursor-pointer"], [1, "flex", "items-center", "justify-between", "text-xs", "mb-1.5"], [3, "ngClass"], [1, "font-bold", 3, "ngClass"], [1, "h-2", "rounded-full", "overflow-hidden", 3, "ngClass"], [1, "h-full", "transition-all", "duration-1000", "ease-out", "rounded-full", 3, "ngClass"], [1, "flex", "items-center", "gap-1.5", "px-3", "py-1.5", "rounded-lg", "text-xs", "font-semibold", "cursor-pointer", "hover:scale-[1.03]", "transition-transform", "group", 3, "click", "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-3.5", "h-3.5"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"], ["size", "w-3.5 h-3.5", 1, "transform", "group-hover:translate-x-0.5", "transition-transform", 3, "icon"], [1, "flex", "items-center", "gap-1.5", "px-3", "py-1.5", "rounded-lg", "text-xs", "font-semibold", "cursor-pointer", "hover:scale-[1.03]", "transition-transform", "group", "animate-pulse", 3, "click", "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M13 10V3L4 14h7v7l9-11h-7z"], [1, "flex", "items-center", "justify-between", "pt-3", "border-t", 3, "click", "ngClass"], [1, "text-sm", "font-semibold", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-5", "h-5", "transform", "group-hover:translate-x-1", "transition-transform", "duration-200", 3, "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M9 5l7 7-7 7"], [1, "flex", "items-center", "gap-2", "mt-3", "cursor-pointer", 3, "click"], [1, "text-sm", "font-medium", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4", "transition-transform", "duration-200", 3, "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M19 9l-7 7-7-7"]], template: function OperationalCategoryCardComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { category: [1, "category"], viewMode: [1, "viewMode"] }, outputs: { categoryClick: "categoryClick" }, decls: 25, vars: 25, consts: [[1, "rounded-xl", "p-6", "transition-all", "duration-300", "group", "hover:scale-[1.02]", "active:scale-[0.98]", 3, "click", "ngClass"], [1, "flex", "items-start", "justify-between", "mb-4"], [1, "flex-1", "min-w-0", "mr-3"], [1, "text-lg", "font-bold", "mb-2", 3, "ngClass"], [1, "inline-flex", "items-center", "px-2.5", "py-1", "rounded-full", "text-xs", "font-semibold", 3, "ngClass"], [1, "flex", "flex-col", "items-end", "gap-2"], [1, "px-4", "py-2", "rounded-lg", "text-center", "min-w-[60px]", 3, "ngClass"], [1, "text-2xl", "font-bold"], [1, "text-xs", "font-medium", "opacity-90"], [1, "text-sm", "mb-4", 3, "ngClass"], [1, "grid", "transition-[grid-template-rows]", "duration-300", "ease-in-out"], [1, "overflow-hidden", "min-h-0"], [1, "transition-opacity", "duration-300"], [1, "mb-4"], [1, "flex", "flex-wrap", "gap-2", "mb-4", "px-1", "-mx-1"], [1, "flex", "items-center", "gap-1.5", "px-3", "py-1.5", "rounded-lg", "text-xs", "font-semibold", "cursor-pointer", "hover:scale-[1.03]", "transition-transform", "group", 3, "ngClass"], [1, "flex", "items-center", "gap-1.5", "px-3", "py-1.5", "rounded-lg", "text-xs", "font-semibold", "cursor-pointer", "hover:scale-[1.03]", "transition-transform", "group", "animate-pulse-slow", 3, "ngClass"], [1, "flex", "items-center", "justify-between", "pt-3", "border-t", 3, "ngClass"], [1, "flex", "items-center", "gap-2", "mt-3", "cursor-pointer"], [1, "flex", "items-center", "justify-between", "text-xs", "mb-1.5"], [3, "ngClass"], [1, "font-bold", 3, "ngClass"], [1, "h-2", "rounded-full", "overflow-hidden", 3, "ngClass"], [1, "h-full", "transition-all", "duration-1000", "ease-out", "rounded-full", 3, "ngClass"], [1, "flex", "items-center", "gap-1.5", "px-3", "py-1.5", "rounded-lg", "text-xs", "font-semibold", "cursor-pointer", "hover:scale-[1.03]", "transition-transform", "group", 3, "click", "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-3.5", "h-3.5"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"], ["size", "w-3.5 h-3.5", 1, "transform", "group-hover:translate-x-0.5", "transition-transform", 3, "icon"], [1, "flex", "items-center", "gap-1.5", "px-3", "py-1.5", "rounded-lg", "text-xs", "font-semibold", "cursor-pointer", "hover:scale-[1.03]", "transition-transform", "group", "animate-pulse-slow", 3, "click", "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M13 10V3L4 14h7v7l9-11h-7z"], [1, "flex", "items-center", "justify-between", "pt-3", "border-t", 3, "click", "ngClass"], [1, "text-sm", "font-semibold", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-5", "h-5", "transform", "group-hover:translate-x-1", "transition-transform", "duration-200", 3, "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M9 5l7 7-7 7"], [1, "flex", "items-center", "gap-2", "mt-3", "cursor-pointer", 3, "click"], [1, "text-sm", "font-medium", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4", "transition-transform", "duration-200", 3, "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M19 9l-7 7-7-7"]], template: function OperationalCategoryCardComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0);
             i0.ɵɵlistener("click", function OperationalCategoryCardComponent_Template_div_click_0_listener($event) { return ctx.onCardClick($event); });
             i0.ɵɵelementStart(1, "div", 1)(2, "div", 2)(3, "h3", 3);
@@ -74435,7 +74479,7 @@ class OperationalCategoryCardComponent {
           <div
             (click)="openGapsModal($event)"
             [ngClass]="gapChipClasses()"
-            class="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-semibold cursor-pointer hover:scale-[1.03] transition-transform group animate-pulse">
+            class="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-semibold cursor-pointer hover:scale-[1.03] transition-transform group animate-pulse-slow">
             <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
             </svg>
@@ -84542,120 +84586,120 @@ class GapDetailModalContentComponent {
                 standalone: true,
                 imports: [CommonModule, RelatedGoalChipsComponent],
                 changeDetection: ChangeDetectionStrategy.OnPush,
-                template: `
-    <div class="space-y-6">
-      <!-- Header -->
-      <div [ngClass]="headerClasses()" class="rounded-xl p-6 border">
-        <div class="flex items-start gap-3 mb-4">
-          <div class="flex-shrink-0">
-            <svg class="w-8 h-8 text-orange-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
-            </svg>
-          </div>
-          <div class="flex-1">
-            <div class="flex items-center gap-3 mb-2">
-              <h3 [ngClass]="titleClasses()" class="text-2xl font-bold">
-                {{ gap()?.capability }}
-              </h3>
-              @if (gap()?.severity) {
-                <span [ngClass]="severityBadgeClasses()" class="px-3 py-1 rounded-full text-xs font-bold">
-                  {{ gap()?.severity }}
-                </span>
-              }
-            </div>
-            <span class="inline-block px-3 py-1 rounded-full text-xs font-semibold bg-orange-100 text-orange-800 dark:bg-orange-900/30 dark:text-orange-300">
-              Gap
-            </span>
-          </div>
-        </div>
-      </div>
-
-      <!-- Description -->
-      @if (gap()?.description) {
-        <div [ngClass]="cardClasses()" class="rounded-xl p-5 border">
-          <h4 [ngClass]="sectionTitleClasses()" class="text-base font-bold mb-4 flex items-center gap-2 pb-3 border-b" [class]="isDark() ? 'border-slate-700' : 'border-slate-200'">
-            <svg [ngClass]="sectionIconClasses()" class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
-            </svg>
-            Description
-          </h4>
-          <p [ngClass]="descriptionClasses()" class="text-base leading-relaxed">
-            {{ gap()?.description }}
-          </p>
-        </div>
-      }
-
-      <!-- Impact on Funnel -->
-      @if (gap()?.impactOnFunnel) {
-        <div [ngClass]="cardClasses()" class="rounded-xl p-5 border">
-          <h4 [ngClass]="sectionTitleClasses()" class="text-base font-bold mb-4 flex items-center gap-2 pb-3 border-b" [class]="isDark() ? 'border-slate-700' : 'border-slate-200'">
-            <svg [ngClass]="sectionIconClasses()" class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/>
-            </svg>
-            Impact on Funnel
-          </h4>
-          <p [ngClass]="descriptionClasses()" class="text-base leading-relaxed">
-            {{ gap()?.impactOnFunnel }}
-          </p>
-        </div>
-      }
-
-      <!-- Linked Funnel Weaknesses -->
-      @if (gap()?.linkedFunnelWeaknessIds && (gap()?.linkedFunnelWeaknessIds?.length ?? 0) > 0) {
-        <div [ngClass]="cardClasses()" class="rounded-xl p-5 border">
-          <h4 [ngClass]="sectionTitleClasses()" class="text-base font-bold mb-4 pb-3 border-b" [class]="isDark() ? 'border-slate-700' : 'border-slate-200'">
-            Related Funnel Weaknesses
-          </h4>
-          <div class="flex flex-wrap gap-2">
-            @for (weaknessId of gap()?.linkedFunnelWeaknessIds; track $index) {
-              <button
-                type="button"
-                (click)="openWeaknessDetail(weaknessId); $event.stopPropagation()"
-                [ngClass]="weaknessChipClasses()"
-                class="px-3 py-1.5 rounded-lg text-sm font-medium flex items-center gap-2 transition-all duration-200 hover:scale-105 hover:shadow-lg cursor-pointer group">
-                <span>{{ getWeaknessTitle(weaknessId) }}</span>
-                <svg class="w-4 h-4 transition-transform duration-200 group-hover:translate-x-0.5" 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"/>
-                </svg>
-              </button>
-            }
-          </div>
-        </div>
-      }
-
-      <!-- Linked Goals -->
-      @if (gap()?.linkedGoalIds && (gap()?.linkedGoalIds?.length ?? 0) > 0) {
-        <div [ngClass]="cardClasses()" class="rounded-xl p-5 border">
-          <h4 [ngClass]="sectionTitleClasses()" class="text-base font-bold mb-4 pb-3 border-b" [class]="isDark() ? 'border-slate-700' : 'border-slate-200'">
-            Related Goals
-          </h4>
-          <symphiq-related-goal-chips
-            [relatedGoalIds]="gap()?.linkedGoalIds ?? []"
-            [allGoals]="allGoals()"
-            [viewMode]="viewMode()"
-          />
-        </div>
-      }
-
-      <!-- Supporting Answers -->
-      @if (gap()?.supportingAnswers && (gap()?.supportingAnswers?.length ?? 0) > 0) {
-        <div [ngClass]="cardClasses()" class="rounded-xl p-5 border">
-          <h4 [ngClass]="sectionTitleClasses()" class="text-base font-bold mb-4 pb-3 border-b" [class]="isDark() ? 'border-slate-700' : 'border-slate-200'">
-            Supporting Evidence
-          </h4>
-          <div class="space-y-2">
-            @for (answer of gap()?.supportingAnswers; track $index) {
-              <div [ngClass]="answerItemClasses()" class="px-4 py-2 rounded-lg flex items-center gap-2">
-                <svg class="w-4 h-4 flex-shrink-0 text-orange-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
-                </svg>
-                <span [ngClass]="answerTextClasses()" class="text-sm">{{ answer.answer || answer }}</span>
-              </div>
-            }
-          </div>
-        </div>
-      }
-    </div>
+                template: `
+    <div class="space-y-6">
+      <!-- Header -->
+      <div [ngClass]="headerClasses()" class="rounded-xl p-6 border">
+        <div class="flex items-start gap-3 mb-4">
+          <div class="flex-shrink-0">
+            <svg class="w-8 h-8 text-orange-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
+            </svg>
+          </div>
+          <div class="flex-1">
+            <div class="flex items-center gap-3 mb-2">
+              <h3 [ngClass]="titleClasses()" class="text-2xl font-bold">
+                {{ gap()?.capability }}
+              </h3>
+              @if (gap()?.severity) {
+                <span [ngClass]="severityBadgeClasses()" class="px-3 py-1 rounded-full text-xs font-bold">
+                  {{ gap()?.severity }}
+                </span>
+              }
+            </div>
+            <span class="inline-block px-3 py-1 rounded-full text-xs font-semibold bg-orange-100 text-orange-800 dark:bg-orange-900/30 dark:text-orange-300">
+              Gap
+            </span>
+          </div>
+        </div>
+      </div>
+
+      <!-- Description -->
+      @if (gap()?.description) {
+        <div [ngClass]="cardClasses()" class="rounded-xl p-5 border">
+          <h4 [ngClass]="sectionTitleClasses()" class="text-base font-bold mb-4 flex items-center gap-2 pb-3 border-b" [class]="isDark() ? 'border-slate-700' : 'border-slate-200'">
+            <svg [ngClass]="sectionIconClasses()" class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
+            </svg>
+            Description
+          </h4>
+          <p [ngClass]="descriptionClasses()" class="text-base leading-relaxed">
+            {{ gap()?.description }}
+          </p>
+        </div>
+      }
+
+      <!-- Impact on Funnel -->
+      @if (gap()?.impactOnFunnel) {
+        <div [ngClass]="cardClasses()" class="rounded-xl p-5 border">
+          <h4 [ngClass]="sectionTitleClasses()" class="text-base font-bold mb-4 flex items-center gap-2 pb-3 border-b" [class]="isDark() ? 'border-slate-700' : 'border-slate-200'">
+            <svg [ngClass]="sectionIconClasses()" class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/>
+            </svg>
+            Impact on Funnel
+          </h4>
+          <p [ngClass]="descriptionClasses()" class="text-base leading-relaxed">
+            {{ gap()?.impactOnFunnel }}
+          </p>
+        </div>
+      }
+
+      <!-- Linked Funnel Weaknesses -->
+      @if (gap()?.linkedFunnelWeaknessIds && (gap()?.linkedFunnelWeaknessIds?.length ?? 0) > 0) {
+        <div [ngClass]="cardClasses()" class="rounded-xl p-5 border">
+          <h4 [ngClass]="sectionTitleClasses()" class="text-base font-bold mb-4 pb-3 border-b" [class]="isDark() ? 'border-slate-700' : 'border-slate-200'">
+            Related Funnel Weaknesses
+          </h4>
+          <div class="flex flex-wrap gap-2">
+            @for (weaknessId of gap()?.linkedFunnelWeaknessIds; track $index) {
+              <button
+                type="button"
+                (click)="openWeaknessDetail(weaknessId); $event.stopPropagation()"
+                [ngClass]="weaknessChipClasses()"
+                class="px-3 py-1.5 rounded-lg text-sm font-medium flex items-center gap-2 transition-all duration-200 hover:scale-105 hover:shadow-lg cursor-pointer group">
+                <span>{{ getWeaknessTitle(weaknessId) }}</span>
+                <svg class="w-4 h-4 transition-transform duration-200 group-hover:translate-x-0.5" 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"/>
+                </svg>
+              </button>
+            }
+          </div>
+        </div>
+      }
+
+      <!-- Linked Goals -->
+      @if (gap()?.linkedGoalIds && (gap()?.linkedGoalIds?.length ?? 0) > 0) {
+        <div [ngClass]="cardClasses()" class="rounded-xl p-5 border">
+          <h4 [ngClass]="sectionTitleClasses()" class="text-base font-bold mb-4 pb-3 border-b" [class]="isDark() ? 'border-slate-700' : 'border-slate-200'">
+            Related Goals
+          </h4>
+          <symphiq-related-goal-chips
+            [relatedGoalIds]="gap()?.linkedGoalIds ?? []"
+            [allGoals]="allGoals()"
+            [viewMode]="viewMode()"
+          />
+        </div>
+      }
+
+      <!-- Supporting Answers -->
+      @if (gap()?.supportingAnswers && (gap()?.supportingAnswers?.length ?? 0) > 0) {
+        <div [ngClass]="cardClasses()" class="rounded-xl p-5 border">
+          <h4 [ngClass]="sectionTitleClasses()" class="text-base font-bold mb-4 pb-3 border-b" [class]="isDark() ? 'border-slate-700' : 'border-slate-200'">
+            Supporting Evidence
+          </h4>
+          <div class="space-y-2">
+            @for (answer of gap()?.supportingAnswers; track $index) {
+              <div [ngClass]="answerItemClasses()" class="px-4 py-2 rounded-lg flex items-center gap-2">
+                <svg class="w-4 h-4 flex-shrink-0 text-orange-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
+                </svg>
+                <span [ngClass]="answerTextClasses()" class="text-sm">{{ answer.answer || answer }}</span>
+              </div>
+            }
+          </div>
+        </div>
+      }
+    </div>
   `
             }]
     }], null, { gap: [{ type: i0.Input, args: [{ isSignal: true, alias: "gap", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], allGoals: [{ type: i0.Input, args: [{ isSignal: true, alias: "allGoals", required: false }] }], allWeaknesses: [{ type: i0.Input, args: [{ isSignal: true, alias: "allWeaknesses", required: false }] }], currentModalState: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentModalState", required: false }] }] }); })();