@memberjunction/ng-dashboards 6.2.0-edge.4 → 6.2.0-edge.6

package/dist/PredictiveStudio/components/ps-predictions-grid.component.js

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, inject, } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Input, Output, inject, } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { BaseAngularComponent } from '@memberjunction/ng-base-types';
@@ -6,14 +6,14 @@ import { NavigationService } from '@memberjunction/ng-shared';
 import { MJButtonDirective, MJViewToggleComponent, MjSlidePanelComponent, } from '@memberjunction/ng-ui-components';
 import { SharedGenericModule } from '@memberjunction/ng-shared-generic';
 import { CompositeKey, LogError, RunView } from '@memberjunction/core';
-import { NormalizeUUID, UUIDsEqual } from '@memberjunction/global';
+import { EscapeSQLString, NormalizeUUID, UUIDsEqual } from '@memberjunction/global';
 import { UserInfoEngine } from '@memberjunction/core-entities';
 import { AgGridModule } from 'ag-grid-angular';
 import { AllCommunityModule, ModuleRegistry, themeAlpine, } from 'ag-grid-community';
-import { ParseAtRiskRows, ResolveRenewalPolarity, } from '../at-risk.view-models';
-import { resolveOutcomeConfig, resolveScoreBand, resolveOutcomeStyle, formatPredictionScore, } from '@memberjunction/predictive-studio-core';
+import { AtRiskRules, ProblemTypes, resolveOutcomeConfig, ResolveScoreBand, resolveOutcomeStyle, formatPredictionScore, } from '@memberjunction/predictive-studio-core';
 import { PredictiveStudioScoreHistoryService, } from '../predictive-studio-score-history.service';
 import { PredictiveStudioEngine } from '../engine/predictive-studio.engine';
+import { PSRowDriversComponent } from './ps-row-drivers.component';
 import * as i0 from "@angular/core";
 import * as i1 from "@memberjunction/ng-shared-generic";
 import * as i2 from "ag-grid-angular";
@@ -104,7 +104,16 @@ function PSPredictionsGridComponent_Conditional_25_Conditional_0_Conditional_7_T
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate2("Filtered by ", ctx_r1.selectedTier !== "all" ? ctx_r1.selectedTier + " risk" : "", "", ctx_r1.searchText ? " query \"" + ctx_r1.searchText + "\"" : "");
+    i0.ɵɵtextInterpolate2("Filtered by ", ctx_r1.SelectedTierLabel, "", ctx_r1.searchText ? " query \"" + ctx_r1.searchText + "\"" : "");
+} }
+function PSPredictionsGridComponent_Conditional_25_Conditional_0_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 36);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1("Showing the first ", ctx_r1.MaxRunDetailRowsLabel, " predictions");
 } }
 function PSPredictionsGridComponent_Conditional_25_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     const _r7 = i0.ɵɵgetCurrentView();
@@ -119,8 +128,9 @@ function PSPredictionsGridComponent_Conditional_25_Conditional_0_Template(rf, ct
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd();
     i0.ɵɵconditionalCreate(7, PSPredictionsGridComponent_Conditional_25_Conditional_0_Conditional_7_Template, 2, 2, "span", 35);
-    i0.ɵɵelementStart(8, "span", 35);
-    i0.ɵɵtext(9, "Click any row to inspect details & score history");
+    i0.ɵɵconditionalCreate(8, PSPredictionsGridComponent_Conditional_25_Conditional_0_Conditional_8_Template, 2, 1, "span", 36);
+    i0.ɵɵelementStart(9, "span", 35);
+    i0.ɵɵtext(10, "Click any row to inspect details & score history");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -131,6 +141,8 @@ function PSPredictionsGridComponent_Conditional_25_Conditional_0_Template(rf, ct
     i0.ɵɵtextInterpolate1(" of ", ctx_r1.allRows.length, " predictions");
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r1.selectedTier !== "all" || ctx_r1.searchText ? 7 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.DetailRowsCapped ? 8 : -1);
 } }
 function PSPredictionsGridComponent_Conditional_25_Conditional_1_For_12_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "i");
@@ -142,17 +154,17 @@ function PSPredictionsGridComponent_Conditional_25_Conditional_1_For_12_Conditio
 } }
 function PSPredictionsGridComponent_Conditional_25_Conditional_1_For_12_Template(rf, ctx) { if (rf & 1) {
     const _r8 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 54);
+    i0.ɵɵelementStart(0, "div", 55);
     i0.ɵɵlistener("click", function PSPredictionsGridComponent_Conditional_25_Conditional_1_For_12_Template_div_click_0_listener() { const b_r9 = i0.ɵɵrestoreView(_r8).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.setTierAndGrid(b_r9.key)); });
-    i0.ɵɵelementStart(1, "span", 38);
-    i0.ɵɵconditionalCreate(2, PSPredictionsGridComponent_Conditional_25_Conditional_1_For_12_Conditional_2_Template, 1, 5, "i", 55);
+    i0.ɵɵelementStart(1, "span", 39);
+    i0.ɵɵconditionalCreate(2, PSPredictionsGridComponent_Conditional_25_Conditional_1_For_12_Conditional_2_Template, 1, 5, "i", 56);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "span", 40);
+    i0.ɵɵelementStart(4, "span", 41);
     i0.ɵɵtext(5);
     i0.ɵɵpipe(6, "number");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "span", 41);
+    i0.ɵɵelementStart(7, "span", 42);
     i0.ɵɵtext(8);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -172,7 +184,7 @@ function PSPredictionsGridComponent_Conditional_25_Conditional_1_For_12_Template
 } }
 function PSPredictionsGridComponent_Conditional_25_Conditional_1_Conditional_24_Template(rf, ctx) { if (rf & 1) {
     const _r10 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 56);
+    i0.ɵɵelementStart(0, "button", 57);
     i0.ɵɵlistener("click", function PSPredictionsGridComponent_Conditional_25_Conditional_1_Conditional_24_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.clearDecileFilter()); });
     i0.ɵɵelement(1, "i", 22);
     i0.ɵɵtext(2, " Clear Decile Filter ");
@@ -180,35 +192,35 @@ function PSPredictionsGridComponent_Conditional_25_Conditional_1_Conditional_24_
 } }
 function PSPredictionsGridComponent_Conditional_25_Conditional_1_For_28_Template(rf, ctx) { if (rf & 1) {
     const _r11 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 57);
+    i0.ɵɵelementStart(0, "div", 58);
     i0.ɵɵlistener("click", function PSPredictionsGridComponent_Conditional_25_Conditional_1_For_28_Template_div_click_0_listener() { const b_r12 = i0.ɵɵrestoreView(_r11).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.selectDecile(b_r12.idx)); });
-    i0.ɵɵelementStart(1, "span", 58);
+    i0.ɵɵelementStart(1, "span", 59);
     i0.ɵɵtext(2);
     i0.ɵɵpipe(3, "number");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 59);
-    i0.ɵɵelement(5, "div", 60);
+    i0.ɵɵelementStart(4, "div", 60);
+    i0.ɵɵelement(5, "div", 61);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "div", 61)(7, "span", 62);
+    i0.ɵɵelementStart(6, "div", 62)(7, "span", 63);
     i0.ɵɵtext(8);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "span", 63);
+    i0.ɵɵelementStart(9, "span", 64);
     i0.ɵɵtext(10);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(11, "div", 64)(12, "div", 65);
+    i0.ɵɵelementStart(11, "div", 65)(12, "div", 66);
     i0.ɵɵtext(13);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(14, "div", 66)(15, "span", 67);
+    i0.ɵɵelementStart(14, "div", 67)(15, "span", 68);
     i0.ɵɵtext(16);
     i0.ɵɵpipe(17, "number");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(18, "span", 68);
+    i0.ɵɵelementStart(18, "span", 69);
     i0.ɵɵtext(19);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(20, "div", 69);
+    i0.ɵɵelementStart(20, "div", 70);
     i0.ɵɵtext(21);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(22, "div", 70);
+    i0.ɵɵelementStart(22, "div", 71);
     i0.ɵɵtext(23);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
@@ -239,15 +251,15 @@ function PSPredictionsGridComponent_Conditional_25_Conditional_1_For_28_Template
     i0.ɵɵtextInterpolate(ctx_r1.selectedDecileIndex === b_r12.idx ? "Click to clear filter" : "Click to filter grid");
 } }
 function PSPredictionsGridComponent_Conditional_25_Conditional_1_Conditional_29_For_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "div", 76);
+    i0.ɵɵelement(0, "div", 77);
 } if (rf & 2) {
     const c_r13 = ctx.$implicit;
     i0.ɵɵstyleProp("width", c_r13.pct, "%")("background", c_r13.color);
     i0.ɵɵproperty("title", c_r13.name + ": " + c_r13.count + " (" + c_r13.pct + "%)");
 } }
 function PSPredictionsGridComponent_Conditional_25_Conditional_1_Conditional_29_For_10_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 75);
-    i0.ɵɵelement(1, "span", 77);
+    i0.ɵɵelementStart(0, "div", 76);
+    i0.ɵɵelement(1, "span", 78);
     i0.ɵɵelementStart(2, "strong");
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
@@ -264,15 +276,15 @@ function PSPredictionsGridComponent_Conditional_25_Conditional_1_Conditional_29_
     i0.ɵɵtextInterpolate2("", c_r14.count, " (", c_r14.pct, "%)");
 } }
 function PSPredictionsGridComponent_Conditional_25_Conditional_1_Conditional_29_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 43)(1, "div", 44)(2, "span");
-    i0.ɵɵelement(3, "i", 71);
+    i0.ɵɵelementStart(0, "div", 44)(1, "div", 45)(2, "span");
+    i0.ɵɵelement(3, "i", 72);
     i0.ɵɵtext(4, " Predicted Outcome Classes");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(5, "div", 72);
-    i0.ɵɵrepeaterCreate(6, PSPredictionsGridComponent_Conditional_25_Conditional_1_Conditional_29_For_7_Template, 1, 5, "div", 73, _forTrack2);
+    i0.ɵɵelementStart(5, "div", 73);
+    i0.ɵɵrepeaterCreate(6, PSPredictionsGridComponent_Conditional_25_Conditional_1_Conditional_29_For_7_Template, 1, 5, "div", 74, _forTrack2);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(8, "div", 74);
-    i0.ɵɵrepeaterCreate(9, PSPredictionsGridComponent_Conditional_25_Conditional_1_Conditional_29_For_10_Template, 6, 5, "div", 75, _forTrack2);
+    i0.ɵɵelementStart(8, "div", 75);
+    i0.ɵɵrepeaterCreate(9, PSPredictionsGridComponent_Conditional_25_Conditional_1_Conditional_29_For_10_Template, 6, 5, "div", 76, _forTrack2);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
@@ -282,7 +294,7 @@ function PSPredictionsGridComponent_Conditional_25_Conditional_1_Conditional_29_
     i0.ɵɵrepeater(ctx_r1.classBreakdown);
 } }
 function PSPredictionsGridComponent_Conditional_25_Conditional_1_Conditional_30_Conditional_9_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 84);
+    i0.ɵɵelementStart(0, "span", 85);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -293,17 +305,17 @@ function PSPredictionsGridComponent_Conditional_25_Conditional_1_Conditional_30_
 } }
 function PSPredictionsGridComponent_Conditional_25_Conditional_1_Conditional_30_Template(rf, ctx) { if (rf & 1) {
     const _r15 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 53)(1, "div", 44)(2, "div", 45);
-    i0.ɵɵelement(3, "i", 78);
+    i0.ɵɵelementStart(0, "div", 54)(1, "div", 45)(2, "div", 46);
+    i0.ɵɵelement(3, "i", 79);
     i0.ɵɵelementStart(4, "span");
     i0.ɵɵtext(5, " Decile Drill-Down: ");
-    i0.ɵɵelementStart(6, "strong", 79);
+    i0.ɵɵelementStart(6, "strong", 80);
     i0.ɵɵtext(7);
     i0.ɵɵelementEnd();
     i0.ɵɵtext(8);
-    i0.ɵɵconditionalCreate(9, PSPredictionsGridComponent_Conditional_25_Conditional_1_Conditional_30_Conditional_9_Template, 2, 3, "span", 80);
+    i0.ɵɵconditionalCreate(9, PSPredictionsGridComponent_Conditional_25_Conditional_1_Conditional_30_Conditional_9_Template, 2, 3, "span", 81);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(10, "div", 47)(11, "span", 48);
+    i0.ɵɵelementStart(10, "div", 48)(11, "span", 49);
     i0.ɵɵtext(12, " Showing ");
     i0.ɵɵelementStart(13, "strong");
     i0.ɵɵtext(14);
@@ -312,15 +324,15 @@ function PSPredictionsGridComponent_Conditional_25_Conditional_1_Conditional_30_
     i0.ɵɵtext(16);
     i0.ɵɵpipe(17, "number");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(18, "button", 56);
+    i0.ɵɵelementStart(18, "button", 57);
     i0.ɵɵlistener("click", function PSPredictionsGridComponent_Conditional_25_Conditional_1_Conditional_30_Template_button_click_18_listener() { i0.ɵɵrestoreView(_r15); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.clearDecileFilter()); });
     i0.ɵɵelement(19, "i", 22);
     i0.ɵɵtext(20, " Show All Deciles ");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(21, "div", 81)(22, "ag-grid-angular", 82);
+    i0.ɵɵelementStart(21, "div", 82)(22, "ag-grid-angular", 83);
     i0.ɵɵlistener("gridReady", function PSPredictionsGridComponent_Conditional_25_Conditional_1_Conditional_30_Template_ag_grid_angular_gridReady_22_listener($event) { i0.ɵɵrestoreView(_r15); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onChartGridReady($event)); })("rowClicked", function PSPredictionsGridComponent_Conditional_25_Conditional_1_Conditional_30_Template_ag_grid_angular_rowClicked_22_listener($event) { i0.ɵɵrestoreView(_r15); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onRowClicked($event)); })("cellClicked", function PSPredictionsGridComponent_Conditional_25_Conditional_1_Conditional_30_Template_ag_grid_angular_cellClicked_22_listener($event) { i0.ɵɵrestoreView(_r15); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onCellClicked($event)); });
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(23, "div", 83)(24, "span", 35);
+    i0.ɵɵelementStart(23, "div", 84)(24, "span", 35);
     i0.ɵɵtext(25, "Click any row to inspect explainability drivers and score history in the slide-in drawer");
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
@@ -339,36 +351,36 @@ function PSPredictionsGridComponent_Conditional_25_Conditional_1_Conditional_30_
     i0.ɵɵproperty("theme", ctx_r1.Theme)("columnDefs", ctx_r1.columnDefs)("defaultColDef", ctx_r1.defaultColDef)("gridOptions", ctx_r1.chartGridOptions)("rowData", ctx_r1.filteredRows);
 } }
 function PSPredictionsGridComponent_Conditional_25_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 32)(1, "div", 36)(2, "div", 37)(3, "span", 38);
-    i0.ɵɵelement(4, "i", 39);
+    i0.ɵɵelementStart(0, "div", 32)(1, "div", 37)(2, "div", 38)(3, "span", 39);
+    i0.ɵɵelement(4, "i", 40);
     i0.ɵɵtext(5, " Scored Cohort");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "span", 40);
+    i0.ɵɵelementStart(6, "span", 41);
     i0.ɵɵtext(7);
     i0.ɵɵpipe(8, "number");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "span", 41);
+    i0.ɵɵelementStart(9, "span", 42);
     i0.ɵɵtext(10, "Total records");
     i0.ɵɵelementEnd()();
-    i0.ɵɵrepeaterCreate(11, PSPredictionsGridComponent_Conditional_25_Conditional_1_For_12_Template, 9, 12, "div", 42, _forTrack0);
+    i0.ɵɵrepeaterCreate(11, PSPredictionsGridComponent_Conditional_25_Conditional_1_For_12_Template, 9, 12, "div", 43, _forTrack0);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(13, "div", 43)(14, "div", 44)(15, "div", 45);
-    i0.ɵɵelement(16, "i", 46);
+    i0.ɵɵelementStart(13, "div", 44)(14, "div", 45)(15, "div", 46);
+    i0.ɵɵelement(16, "i", 47);
     i0.ɵɵelementStart(17, "span");
     i0.ɵɵtext(18);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(19, "div", 47)(20, "span", 48);
+    i0.ɵɵelementStart(19, "div", 48)(20, "span", 49);
     i0.ɵɵtext(21, "Cohort Mean: ");
     i0.ɵɵelementStart(22, "strong");
     i0.ɵɵtext(23);
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(24, PSPredictionsGridComponent_Conditional_25_Conditional_1_Conditional_24_Template, 3, 0, "button", 49);
+    i0.ɵɵconditionalCreate(24, PSPredictionsGridComponent_Conditional_25_Conditional_1_Conditional_24_Template, 3, 0, "button", 50);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(25, "div", 50)(26, "div", 51);
-    i0.ɵɵrepeaterCreate(27, PSPredictionsGridComponent_Conditional_25_Conditional_1_For_28_Template, 24, 24, "div", 52, _forTrack1);
+    i0.ɵɵelementStart(25, "div", 51)(26, "div", 52);
+    i0.ɵɵrepeaterCreate(27, PSPredictionsGridComponent_Conditional_25_Conditional_1_For_28_Template, 24, 24, "div", 53, _forTrack1);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵconditionalCreate(29, PSPredictionsGridComponent_Conditional_25_Conditional_1_Conditional_29_Template, 11, 0, "div", 43);
-    i0.ɵɵconditionalCreate(30, PSPredictionsGridComponent_Conditional_25_Conditional_1_Conditional_30_Template, 26, 14, "div", 53);
+    i0.ɵɵconditionalCreate(29, PSPredictionsGridComponent_Conditional_25_Conditional_1_Conditional_29_Template, 11, 0, "div", 44);
+    i0.ɵɵconditionalCreate(30, PSPredictionsGridComponent_Conditional_25_Conditional_1_Conditional_30_Template, 26, 14, "div", 54);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -390,7 +402,7 @@ function PSPredictionsGridComponent_Conditional_25_Conditional_1_Template(rf, ct
     i0.ɵɵconditional(ctx_r1.selectedDecileIndex !== null ? 30 : -1);
 } }
 function PSPredictionsGridComponent_Conditional_25_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, PSPredictionsGridComponent_Conditional_25_Conditional_0_Template, 10, 8);
+    i0.ɵɵconditionalCreate(0, PSPredictionsGridComponent_Conditional_25_Conditional_0_Template, 11, 9);
     i0.ɵɵconditionalCreate(1, PSPredictionsGridComponent_Conditional_25_Conditional_1_Template, 31, 8, "div", 32);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -400,9 +412,9 @@ function PSPredictionsGridComponent_Conditional_25_Template(rf, ctx) { if (rf &
 } }
 function PSPredictionsGridComponent_Conditional_26_Conditional_15_Template(rf, ctx) { if (rf & 1) {
     const _r17 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 110);
+    i0.ɵɵelementStart(0, "button", 111);
     i0.ɵɵlistener("click", function PSPredictionsGridComponent_Conditional_26_Conditional_15_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r17); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.openSubjectRecord()); });
-    i0.ɵɵelement(1, "i", 111);
+    i0.ɵɵelement(1, "i", 112);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -417,10 +429,10 @@ function PSPredictionsGridComponent_Conditional_26_Conditional_24_Template(rf, c
     i0.ɵɵclassMap(i0.ɵɵinterpolate1("fa-solid ", ctx_r1.selectedRow.icon));
 } }
 function PSPredictionsGridComponent_Conditional_26_Conditional_26_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 98)(1, "strong");
+    i0.ɵɵelementStart(0, "div", 99)(1, "strong");
     i0.ɵɵtext(2, "Predicted Outcome:");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 112);
+    i0.ɵɵelementStart(3, "span", 113);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -430,141 +442,107 @@ function PSPredictionsGridComponent_Conditional_26_Conditional_26_Template(rf, c
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", ctx_r1.selectedRow.class, " ");
 } }
-function PSPredictionsGridComponent_Conditional_26_Conditional_39_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 48);
-    i0.ɵɵtext(1, "No individual driver breakdown was recorded for this row.");
-    i0.ɵɵelementEnd();
-} }
-function PSPredictionsGridComponent_Conditional_26_Conditional_40_For_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 113)(1, "div", 114);
-    i0.ɵɵelement(2, "i", 115);
-    i0.ɵɵtext(3);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "span", 112);
-    i0.ɵɵtext(5);
-    i0.ɵɵelementEnd()();
-} if (rf & 2) {
-    const d_r18 = ctx.$implicit;
-    i0.ɵɵadvance(2);
-    i0.ɵɵstyleProp("color", d_r18.up ? "var(--mj-status-error)" : "var(--mj-status-success)");
-    i0.ɵɵclassProp("fa-arrow-up", d_r18.up)("fa-arrow-down", !d_r18.up);
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", d_r18.label, " ");
-    i0.ɵɵadvance();
-    i0.ɵɵclassMap(d_r18.up ? "red" : "green");
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", d_r18.up ? "Increases Risk" : "Lowers Risk", " ");
+function PSPredictionsGridComponent_Conditional_26_Conditional_47_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "mj-loading", 110);
 } }
-function PSPredictionsGridComponent_Conditional_26_Conditional_40_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 105);
-    i0.ɵɵrepeaterCreate(1, PSPredictionsGridComponent_Conditional_26_Conditional_40_For_2_Template, 6, 10, "div", 113, _forTrack1);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵadvance();
-    i0.ɵɵrepeater(ctx_r1.selectedRow.drivers);
-} }
-function PSPredictionsGridComponent_Conditional_26_Conditional_48_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "mj-loading", 109);
-} }
-function PSPredictionsGridComponent_Conditional_26_Conditional_49_For_13_Template(rf, ctx) { if (rf & 1) {
+function PSPredictionsGridComponent_Conditional_26_Conditional_48_For_13_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(0, "circle", 126)(1, "title");
+    i0.ɵɵelementStart(0, "circle", 124)(1, "title");
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(3, "text", 127);
+    i0.ɵɵelementStart(3, "text", 125);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const p_r19 = ctx.$implicit;
-    i0.ɵɵattribute("cx", p_r19.x)("cy", p_r19.y)("fill", p_r19.color);
+    const p_r18 = ctx.$implicit;
+    i0.ɵɵattribute("cx", p_r18.x)("cy", p_r18.y)("fill", p_r18.color);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate3("", p_r19.dateStr, ": ", p_r19.scoreFormatted, " (", p_r19.class || "No class", ")");
+    i0.ɵɵtextInterpolate3("", p_r18.dateStr, ": ", p_r18.scoreFormatted, " (", p_r18.class || "No class", ")");
     i0.ɵɵadvance();
-    i0.ɵɵattribute("cx", p_r19.x)("cy", p_r19.y - 9);
+    i0.ɵɵattribute("cx", p_r18.x)("cy", p_r18.y - 9);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", p_r19.scoreFormatted, " ");
+    i0.ɵɵtextInterpolate1(" ", p_r18.scoreFormatted, " ");
 } }
-function PSPredictionsGridComponent_Conditional_26_Conditional_49_For_29_Conditional_11_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 129);
+function PSPredictionsGridComponent_Conditional_26_Conditional_48_For_29_Conditional_11_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 127);
     i0.ɵɵtext(1, "Baseline");
     i0.ɵɵelementEnd();
 } }
-function PSPredictionsGridComponent_Conditional_26_Conditional_49_For_29_Conditional_12_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 130);
-    i0.ɵɵelement(1, "i", 132);
+function PSPredictionsGridComponent_Conditional_26_Conditional_48_For_29_Conditional_12_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 128);
+    i0.ɵɵelement(1, "i", 130);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const pt_r20 = i0.ɵɵnextContext().$implicit;
+    const pt_r19 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1(" +", (pt_r20.Delta * 100).toFixed(1), "%");
+    i0.ɵɵtextInterpolate1(" +", (pt_r19.Delta * 100).toFixed(1), "%");
 } }
-function PSPredictionsGridComponent_Conditional_26_Conditional_49_For_29_Conditional_13_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 131);
-    i0.ɵɵelement(1, "i", 133);
+function PSPredictionsGridComponent_Conditional_26_Conditional_48_For_29_Conditional_13_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 129);
+    i0.ɵɵelement(1, "i", 131);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const pt_r20 = i0.ɵɵnextContext().$implicit;
+    const pt_r19 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1(" ", (pt_r20.Delta * 100).toFixed(1), "%");
+    i0.ɵɵtextInterpolate1(" ", (pt_r19.Delta * 100).toFixed(1), "%");
 } }
-function PSPredictionsGridComponent_Conditional_26_Conditional_49_For_29_Conditional_14_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 129);
+function PSPredictionsGridComponent_Conditional_26_Conditional_48_For_29_Conditional_14_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 127);
     i0.ɵɵtext(1, "0%");
     i0.ɵɵelementEnd();
 } }
-function PSPredictionsGridComponent_Conditional_26_Conditional_49_For_29_Template(rf, ctx) { if (rf & 1) {
+function PSPredictionsGridComponent_Conditional_26_Conditional_48_For_29_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "tr")(1, "td");
     i0.ɵɵtext(2);
     i0.ɵɵpipe(3, "date");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "td")(5, "span", 112);
+    i0.ɵɵelementStart(4, "td")(5, "span", 113);
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(7, "td")(8, "strong", 128);
+    i0.ɵɵelementStart(7, "td")(8, "strong", 126);
     i0.ɵɵtext(9);
     i0.ɵɵelementEnd()();
     i0.ɵɵelementStart(10, "td");
-    i0.ɵɵconditionalCreate(11, PSPredictionsGridComponent_Conditional_26_Conditional_49_For_29_Conditional_11_Template, 2, 0, "span", 129)(12, PSPredictionsGridComponent_Conditional_26_Conditional_49_For_29_Conditional_12_Template, 3, 1, "span", 130)(13, PSPredictionsGridComponent_Conditional_26_Conditional_49_For_29_Conditional_13_Template, 3, 1, "span", 131)(14, PSPredictionsGridComponent_Conditional_26_Conditional_49_For_29_Conditional_14_Template, 2, 0, "span", 129);
+    i0.ɵɵconditionalCreate(11, PSPredictionsGridComponent_Conditional_26_Conditional_48_For_29_Conditional_11_Template, 2, 0, "span", 127)(12, PSPredictionsGridComponent_Conditional_26_Conditional_48_For_29_Conditional_12_Template, 3, 1, "span", 128)(13, PSPredictionsGridComponent_Conditional_26_Conditional_48_For_29_Conditional_13_Template, 3, 1, "span", 129)(14, PSPredictionsGridComponent_Conditional_26_Conditional_48_For_29_Conditional_14_Template, 2, 0, "span", 127);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(15, "td");
     i0.ɵɵtext(16);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const pt_r20 = ctx.$implicit;
+    const pt_r19 = ctx.$implicit;
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(3, 7, pt_r20.RunDate, "short"));
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(3, 7, pt_r19.RunDate, "short"));
     i0.ɵɵadvance(3);
-    i0.ɵɵclassMap(pt_r20.status === "Succeeded" ? "green" : "gray");
+    i0.ɵɵclassMap(pt_r19.status === "Succeeded" ? "green" : "gray");
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(pt_r20.status);
+    i0.ɵɵtextInterpolate(pt_r19.status);
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(pt_r20.ScoreFormatted);
+    i0.ɵɵtextInterpolate(pt_r19.ScoreFormatted);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(pt_r20.Delta == null ? 11 : pt_r20.Delta > 0.005 ? 12 : pt_r20.Delta < -0.005 ? 13 : 14);
+    i0.ɵɵconditional(pt_r19.Delta == null ? 11 : pt_r19.Delta > 0.005 ? 12 : pt_r19.Delta < -0.005 ? 13 : 14);
     i0.ɵɵadvance(5);
-    i0.ɵɵtextInterpolate(pt_r20.class || "\u2014");
+    i0.ɵɵtextInterpolate(pt_r19.class || "\u2014");
 } }
-function PSPredictionsGridComponent_Conditional_26_Conditional_49_Template(rf, ctx) { if (rf & 1) {
+function PSPredictionsGridComponent_Conditional_26_Conditional_48_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(0, "svg", 116);
-    i0.ɵɵelement(1, "line", 117)(2, "line", 118)(3, "line", 119);
-    i0.ɵɵelementStart(4, "text", 120);
+    i0.ɵɵelementStart(0, "svg", 114);
+    i0.ɵɵelement(1, "line", 115)(2, "line", 116)(3, "line", 117);
+    i0.ɵɵelementStart(4, "text", 118);
     i0.ɵɵtext(5, "100%");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "text", 121);
+    i0.ɵɵelementStart(6, "text", 119);
     i0.ɵɵtext(7, "50%");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(8, "text", 122);
+    i0.ɵɵelementStart(8, "text", 120);
     i0.ɵɵtext(9, "0%");
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(10, "polygon", 123)(11, "polyline", 124);
-    i0.ɵɵrepeaterCreate(12, PSPredictionsGridComponent_Conditional_26_Conditional_49_For_13_Template, 5, 9, null, null, _forTrack3);
+    i0.ɵɵelement(10, "polygon", 121)(11, "polyline", 122);
+    i0.ɵɵrepeaterCreate(12, PSPredictionsGridComponent_Conditional_26_Conditional_48_For_13_Template, 5, 9, null, null, _forTrack3);
     i0.ɵɵelementEnd();
     i0.ɵɵnamespaceHTML();
-    i0.ɵɵelementStart(14, "table", 125)(15, "thead")(16, "tr")(17, "th");
+    i0.ɵɵelementStart(14, "table", 123)(15, "thead")(16, "tr")(17, "th");
     i0.ɵɵtext(18, "When");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(19, "th");
@@ -580,7 +558,7 @@ function PSPredictionsGridComponent_Conditional_26_Conditional_49_Template(rf, c
     i0.ɵɵtext(26, "Class");
     i0.ɵɵelementEnd()()();
     i0.ɵɵelementStart(27, "tbody");
-    i0.ɵɵrepeaterCreate(28, PSPredictionsGridComponent_Conditional_26_Conditional_49_For_29_Template, 17, 10, "tr", null, _forTrack3);
+    i0.ɵɵrepeaterCreate(28, PSPredictionsGridComponent_Conditional_26_Conditional_48_For_29_Template, 17, 10, "tr", null, _forTrack3);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -593,8 +571,8 @@ function PSPredictionsGridComponent_Conditional_26_Conditional_49_Template(rf, c
     i0.ɵɵadvance(16);
     i0.ɵɵrepeater(ctx_r1.historyPoints);
 } }
-function PSPredictionsGridComponent_Conditional_26_Conditional_50_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 48);
+function PSPredictionsGridComponent_Conditional_26_Conditional_49_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 49);
     i0.ɵɵtext(1);
     i0.ɵɵpipe(2, "date");
     i0.ɵɵelementEnd();
@@ -603,66 +581,66 @@ function PSPredictionsGridComponent_Conditional_26_Conditional_50_Template(rf, c
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" This record has been scored once so far (", i0.ɵɵpipeBind2(2, 1, ctx_r1.historyPoints[0].RunDate, "medium"), "). As more runs occur over time, the score trendline will track changes here. ");
 } }
-function PSPredictionsGridComponent_Conditional_26_Conditional_51_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 48);
+function PSPredictionsGridComponent_Conditional_26_Conditional_50_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 49);
     i0.ɵɵtext(1, "No historical runs found for this record.");
     i0.ɵɵelementEnd();
 } }
 function PSPredictionsGridComponent_Conditional_26_Template(rf, ctx) { if (rf & 1) {
     const _r16 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-slide-panel", 85);
+    i0.ɵɵelementStart(0, "mj-slide-panel", 86);
     i0.ɵɵlistener("WidthChanged", function PSPredictionsGridComponent_Conditional_26_Template_mj_slide_panel_WidthChanged_0_listener($event) { i0.ɵɵrestoreView(_r16); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onDrawerWidthChanged($event)); })("Closed", function PSPredictionsGridComponent_Conditional_26_Template_mj_slide_panel_Closed_0_listener() { i0.ɵɵrestoreView(_r16); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.closeDetail()); });
-    i0.ɵɵelementStart(1, "div", 86)(2, "div", 87)(3, "div", 88)(4, "h3");
+    i0.ɵɵelementStart(1, "div", 87)(2, "div", 88)(3, "div", 89)(4, "h3");
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "div", 45)(7, "span", 89);
+    i0.ɵɵelementStart(6, "div", 46)(7, "span", 90);
     i0.ɵɵtext(8);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "span", 90);
+    i0.ɵɵelementStart(9, "span", 91);
     i0.ɵɵtext(10);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(11, "div", 91)(12, "button", 92);
+    i0.ɵɵelementStart(11, "div", 92)(12, "button", 93);
     i0.ɵɵlistener("click", function PSPredictionsGridComponent_Conditional_26_Template_button_click_12_listener() { i0.ɵɵrestoreView(_r16); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.drillThrough(ctx_r1.selectedRow)); });
-    i0.ɵɵelement(13, "i", 93);
+    i0.ɵɵelement(13, "i", 94);
     i0.ɵɵtext(14);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(15, PSPredictionsGridComponent_Conditional_26_Conditional_15_Template, 3, 2, "button", 94);
+    i0.ɵɵconditionalCreate(15, PSPredictionsGridComponent_Conditional_26_Conditional_15_Template, 3, 2, "button", 95);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(16, "div", 95)(17, "div", 96);
+    i0.ɵɵelementStart(16, "div", 96)(17, "div", 97);
     i0.ɵɵtext(18);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(19, "div", 97)(20, "div", 98)(21, "strong");
+    i0.ɵɵelementStart(19, "div", 98)(20, "div", 99)(21, "strong");
     i0.ɵɵtext(22);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(23, "span", 84);
-    i0.ɵɵconditionalCreate(24, PSPredictionsGridComponent_Conditional_26_Conditional_24_Template, 1, 3, "i", 99);
+    i0.ɵɵelementStart(23, "span", 85);
+    i0.ɵɵconditionalCreate(24, PSPredictionsGridComponent_Conditional_26_Conditional_24_Template, 1, 3, "i", 100);
     i0.ɵɵtext(25);
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(26, PSPredictionsGridComponent_Conditional_26_Conditional_26_Template, 5, 3, "div", 98);
-    i0.ɵɵelementStart(27, "div", 98)(28, "strong");
+    i0.ɵɵconditionalCreate(26, PSPredictionsGridComponent_Conditional_26_Conditional_26_Template, 5, 3, "div", 99);
+    i0.ɵɵelementStart(27, "div", 99)(28, "strong");
     i0.ɵɵtext(29);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(30, "span", 100);
+    i0.ɵɵelementStart(30, "span", 101);
     i0.ɵɵtext(31);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(32, "div", 101);
+    i0.ɵɵelementStart(32, "div", 102);
     i0.ɵɵtext(33);
     i0.ɵɵpipe(34, "date");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(35, "div", 102)(36, "div", 103);
-    i0.ɵɵelement(37, "i", 104);
-    i0.ɵɵtext(38, " Key Decision Drivers (Explainability) ");
+    i0.ɵɵelementStart(35, "div", 103)(36, "div", 104);
+    i0.ɵɵelement(37, "i", 105);
+    i0.ɵɵtext(38, " Factors behind this score (associations, not causes) ");
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(39, PSPredictionsGridComponent_Conditional_26_Conditional_39_Template, 2, 0, "div", 48)(40, PSPredictionsGridComponent_Conditional_26_Conditional_40_Template, 3, 0, "div", 105);
+    i0.ɵɵelement(39, "ps-row-drivers", 106);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(41, "div", 106)(42, "div", 107)(43, "span");
-    i0.ɵɵelement(44, "i", 108);
-    i0.ɵɵtext(45, " Historical Score Trendline");
+    i0.ɵɵelementStart(40, "div", 107)(41, "div", 108)(42, "span");
+    i0.ɵɵelement(43, "i", 109);
+    i0.ɵɵtext(44, " Historical Score Trendline");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(46, "span", 48);
-    i0.ɵɵtext(47);
+    i0.ɵɵelementStart(45, "span", 49);
+    i0.ɵɵtext(46);
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(48, PSPredictionsGridComponent_Conditional_26_Conditional_48_Template, 1, 0, "mj-loading", 109)(49, PSPredictionsGridComponent_Conditional_26_Conditional_49_Template, 30, 2)(50, PSPredictionsGridComponent_Conditional_26_Conditional_50_Template, 3, 4, "div", 48)(51, PSPredictionsGridComponent_Conditional_26_Conditional_51_Template, 2, 0, "div", 48);
+    i0.ɵɵconditionalCreate(47, PSPredictionsGridComponent_Conditional_26_Conditional_47_Template, 1, 0, "mj-loading", 110)(48, PSPredictionsGridComponent_Conditional_26_Conditional_48_Template, 30, 2)(49, PSPredictionsGridComponent_Conditional_26_Conditional_49_Template, 3, 4, "div", 49)(50, PSPredictionsGridComponent_Conditional_26_Conditional_50_Template, 2, 0, "div", 49);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -698,11 +676,11 @@ function PSPredictionsGridComponent_Conditional_26_Template(rf, ctx) { if (rf &
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1(" Scored: ", ctx_r1.selectedRow.scoredAtDate ? i0.ɵɵpipeBind2(34, 23, ctx_r1.selectedRow.scoredAtDate, "medium") : "\u2014", " ");
     i0.ɵɵadvance(6);
-    i0.ɵɵconditional(!ctx_r1.selectedRow.drivers || ctx_r1.selectedRow.drivers.length === 0 ? 39 : 40);
-    i0.ɵɵadvance(8);
+    i0.ɵɵproperty("Drivers", ctx_r1.selectedRow.drivers);
+    i0.ɵɵadvance(7);
     i0.ɵɵtextInterpolate2("", ctx_r1.historyPoints.length, " run", ctx_r1.historyPoints.length === 1 ? "" : "s", " recorded");
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.historyLoading ? 48 : ctx_r1.historyPoints.length > 1 ? 49 : ctx_r1.historyPoints.length === 1 ? 50 : 51);
+    i0.ɵɵconditional(ctx_r1.historyLoading ? 47 : ctx_r1.historyPoints.length > 1 ? 48 : ctx_r1.historyPoints.length === 1 ? 49 : 50);
 } }
 ModuleRegistry.registerModules([AllCommunityModule]);
 /**
@@ -750,12 +728,25 @@ export class PSPredictionsGridComponent extends BaseAngularComponent {
     get readOnly() {
         return this.ReadOnly;
     }
+    /**
+     * Emitted after the grid parses a run, with the run's at-risk rows. A host that needs the rows (counts, export, a list)
+     * takes them from here rather than reading the run a second time. Also emitted, empty, when the model has no run.
+     */
+    RowsLoaded = new EventEmitter();
+    /** Emitted with the error message when the run's predictions fail to load. */
+    RowsLoadFailed = new EventEmitter();
     cdr = inject(ChangeDetectorRef);
     navigationService = inject(NavigationService);
     scoreHistoryService = inject(PredictiveStudioScoreHistoryService);
     Math = Math;
+    /** The run-detail cap, formatted for the footer notice. */
+    MaxRunDetailRowsLabel = PredictiveStudioEngine.MaxRunDetailRowsLabel;
+    /** The tier of a regression row whose value falls in none of the outcome bands. */
+    static unbandedTier = { Key: 'unbanded', Label: 'No band', BadgeColor: 'gray' };
     isLoading = false;
     loadError = null;
+    /** True when the run has more predictions than {@link PredictiveStudioEngine.MaxRunDetailRows}; only the first are shown. */
+    DetailRowsCapped = false;
     AllRows = [];
     /** @deprecated Use {@link AllRows}. */
     get allRows() {
@@ -994,6 +985,7 @@ export class PSPredictionsGridComponent extends BaseAngularComponent {
     set defaultColDef(value) {
         this.DefaultColDef = value;
     }
+    /** True when the model's score is the probability of the good outcome, so risk is `1 - score` (e.g. a renewal model). */
     IsRenewalModel = false;
     /** @deprecated Use {@link IsRenewalModel}. */
     get isRenewalModel() {
@@ -1012,10 +1004,12 @@ export class PSPredictionsGridComponent extends BaseAngularComponent {
     set selectedDecileIndex(value) {
         this.SelectedDecileIndex = value;
     }
+    /**
+     * True for a regression model. Risk bands are classification rules, so a regression model's tiers, row band, status and
+     * badge come from its outcome bands on the raw value, and the risk column is hidden.
+     */
     get IsRegression() {
-        return ((this.ProblemType ?? '').toLowerCase() === 'regression' ||
-            this.OutcomeConfig?.Format === 'currency' ||
-            this.OutcomeConfig?.Format === 'number');
+        return ProblemTypes.IsRegression(this.ProblemType);
     }
     /** @deprecated Use {@link IsRegression}. */
     get isRegression() {
@@ -1087,22 +1081,30 @@ export class PSPredictionsGridComponent extends BaseAngularComponent {
                 },
             },
             {
-                field: 'riskPct',
+                field: 'status',
                 headerName: statusLabel,
                 width: 155,
+                // The tier order: by risk for classification (the tiers are risk bands), by value for regression.
+                comparator: (_a, _b, nodeA, nodeB) => this.IsRegression
+                    ? (nodeA.data?.score ?? 0) - (nodeB.data?.score ?? 0)
+                    : (nodeA.data?.riskPct ?? 0) - (nodeB.data?.riskPct ?? 0),
                 cellRenderer: (params) => {
                     if (!params.data)
                         return '';
                     const badgeColor = params.data.badgeColor || 'gray';
                     const icon = params.data.icon ? `<i class="fa-solid ${this.escapeHtml(params.data.icon)}"></i> ` : '';
                     const label = this.escapeHtml(params.data.status || params.data.band);
-                    if (this.IsRegression) {
-                        return `<span class="ps-badge ${badgeColor}" title="${scoreLabel}: ${this.escapeHtml(params.data.scoreFormatted)}">${icon}${label}</span>`;
-                    }
-                    const pct = Math.round(params.data.score * 100);
-                    return `<span class="ps-badge ${badgeColor}" title="${pct}% ${scoreLabel}">${icon}${label} (${pct}%)</span>`;
+                    return `<span class="ps-badge ${badgeColor}" title="${this.escapeHtml(scoreLabel)}: ${this.escapeHtml(params.data.scoreFormatted)}">${icon}${label}</span>`;
                 },
             },
+            {
+                field: 'riskPct',
+                headerName: 'Risk',
+                width: 95,
+                // Risk is a classification measure (1 - score for a good-outcome model); a regression value has none.
+                hide: this.IsRegression,
+                cellRenderer: (params) => params.data ? `<span class="ps-mono" data-testid="ps-risk-cell">${params.data.riskPct}%</span>` : '',
+            },
             {
                 field: 'class',
                 headerName: 'Predicted Outcome',
@@ -1128,11 +1130,13 @@ export class PSPredictionsGridComponent extends BaseAngularComponent {
                         return '<span class="ps-muted">—</span>';
                     }
                     const chips = params.data.drivers.slice(0, 2).map((d) => {
-                        const cls = d.up ? 'up' : 'down';
-                        const icon = d.up ? 'fa-arrow-up' : 'fa-arrow-down';
-                        const label = this.escapeHtml(d.label);
-                        return `<span class="ps-why-chip ${cls}" title="${label}"><i class="fa-solid ${icon}"></i> ${label}</span>`;
-                    }).join('');
+                        const cls = d.Up ? 'up' : 'down';
+                        const icon = d.Up ? 'fa-arrow-up' : 'fa-arrow-down';
+                        const label = this.escapeHtml(d.Label);
+                        // The arrow is the direction of RISK, not of the score column, so the tooltip says so.
+                        const title = `${label}: ${d.Up ? 'raises' : 'lowers'} risk`;
+                        return `<span class="ps-why-chip ${cls}" title="${title}"><i class="fa-solid ${icon}"></i> ${label}</span>`;
+                    }).join(' ');
                     return `<div class="pg-drivers-cell">${chips}</div>`;
                 },
             },
@@ -1206,125 +1210,122 @@ export class PSPredictionsGridComponent extends BaseAngularComponent {
         return this.Reload();
     }
     async loadPredictions() {
+        this.resetRunState();
         if (!this.modelId && !this.RunId) {
-            this.AllRows = [];
             this.applyFilter();
             return;
         }
         this.isLoading = true;
-        this.loadError = null;
         this.cdr.markForCheck();
         try {
             const provider = this.ProviderToUse;
             const user = provider.CurrentUser ?? undefined;
-            // 1. Resolve effective run ID and model entity
-            let effectiveRunId = this.RunId;
-            let model = null;
-            if (this.modelId) {
-                const modelsRes = await RunView.FromMetadataProvider(provider).RunView({
-                    EntityName: 'MJ: ML Models',
-                    ExtraFilter: `ID = '${this.modelId.replace(/'/g, "''")}'`,
-                    MaxRows: 1,
-                    ResultType: 'entity_object',
-                }, user);
-                model = modelsRes.Success && modelsRes.Results ? modelsRes.Results[0] : null;
-            }
-            if (!effectiveRunId && this.modelId) {
-                // Query latest process run for this model using engine
-                try {
-                    const engine = PredictiveStudioEngine.Instance;
-                    const runs = await engine.LoadRecentRunsForModel(this.modelId, provider, user, { maxRows: 1 });
-                    if (runs && runs.length > 0) {
-                        effectiveRunId = runs[0].ID;
-                    }
-                }
-                catch {
-                    // Fallback if engine is not yet primed
-                }
-            }
+            const model = await this.loadModel();
+            const effectiveRunId = this.RunId ?? (await this.resolveLatestRunId());
             if (!effectiveRunId) {
-                this.AllRows = [];
                 this.applyFilter();
-                this.isLoading = false;
-                this.cdr.markForCheck();
+                this.RowsLoaded.emit({ Rows: [], Capped: false });
                 return;
             }
-            // 2. Resolve target entity
             await this.resolveTargetEntity(model);
-            // 3. Load full process run details (removing 50/200 cap)
-            const detailsRes = await RunView.FromMetadataProvider(provider).RunView({
-                EntityName: 'MJ: Process Run Details',
-                ExtraFilter: `ProcessRunID = '${effectiveRunId.replace(/'/g, "''")}'`,
-                OrderBy: '__mj_CreatedAt ASC',
-                MaxRows: 10000,
-                ResultType: 'entity_object',
-            }, user);
-            if (!detailsRes.Success || !detailsRes.Results) {
-                this.AllRows = [];
-                this.applyFilter();
-                this.isLoading = false;
-                this.cdr.markForCheck();
-                return;
-            }
-            // 4. Resolve OutcomeConfig and determine polarity
-            if (model?.ProblemType) {
-                this.ProblemType = model.ProblemType.toLowerCase();
-            }
-            this.OutcomeConfig = resolveOutcomeConfig(model ?? undefined);
-            this.IsRenewalModel = this.OutcomeConfig.Polarity === 'positive' && !this.IsRegression;
-            this.SetupColumnDefs();
-            const polarity = ResolveRenewalPolarity(detailsRes.Results.map((d) => d.ResultPayload), model?.TargetVariable);
-            // When the model outputs P(Renewed) (scoreIsLapseRisk = false), adverse risk is inverted (1 - score).
-            // When the model outputs P(Lapse) (scoreIsLapseRisk = true), adverse risk is ALREADY score (invertedRisk = false).
-            const shouldInvertRisk = polarity.IsRenewalModel ? !polarity.ScoreIsLapseRisk : false;
-            const parsedAtRisk = ParseAtRiskRows(detailsRes.Results.map((d) => ({ recordId: d.RecordID, ResultPayload: d.ResultPayload })), { InvertedRisk: shouldInvertRisk, OutcomeConfig: this.OutcomeConfig });
-            // Map details into indexed lookup for scoredAt timestamp
+            // The run's process run details by keyset paging, read-only and only the columns the grid uses; throws on failure.
+            const read = await PredictiveStudioEngine.Instance.LoadRunDetails(effectiveRunId, provider, user);
+            this.applyModelOptions(model);
+            const parsedAtRisk = AtRiskRules.ParseAtRiskRows(read.Rows.map((d) => ({ RecordID: d.RecordID, ResultPayload: d.ResultPayload })), { InvertedRisk: this.IsRenewalModel });
             const detailByRecord = new Map();
-            for (const d of detailsRes.Results) {
+            for (const d of read.Rows) {
                 detailByRecord.set(NormalizeUUID(d.RecordID), d);
             }
-            this.AllRows = parsedAtRisk.map((r) => {
-                const detail = detailByRecord.get(NormalizeUUID(r.recordId));
-                const dt = detail?.CompletedAt ?? detail?.__mj_CreatedAt ?? null;
-                // For renewal models, the primary displayed score is Renewal Probability (0–1).
-                // If the raw score was lapse risk, renewal probability is 1 - r.score.
-                // Otherwise, raw score is already renewal probability.
-                const displayScore = polarity.IsRenewalModel
-                    ? (polarity.ScoreIsLapseRisk ? Math.max(0, Math.min(1, 1 - r.score)) : r.score)
-                    : r.score;
-                const resolved = this.OutcomeConfig
-                    ? resolveScoreBand(displayScore, this.OutcomeConfig)
-                    : null;
-                const formatted = formatPredictionScore(displayScore, this.OutcomeConfig, this.ProblemType);
-                return {
-                    recordId: r.recordId,
-                    recordName: r.label ?? r.recordId,
-                    score: displayScore,
-                    scoreFormatted: formatted,
-                    riskPct: r.riskPct,
-                    band: resolved?.Key ?? r.band,
-                    badgeColor: resolved?.BadgeColor ?? r.badgeColor,
-                    icon: resolved?.Icon ?? r.icon,
-                    class: r.class,
-                    drivers: r.drivers ?? [],
-                    status: resolved?.Label ?? r.status ?? detail?.Status ?? 'Succeeded',
-                    scoredAtDate: dt instanceof Date ? dt : dt ? new Date(dt) : null,
-                };
-            });
+            this.AllRows = parsedAtRisk.map((r) => this.toGridRow(r, detailByRecord.get(NormalizeUUID(r.RecordID))));
+            this.DetailRowsCapped = read.Capped;
             this.computeVisibleBands();
             this.applyFilter();
-            // 5. Schedule lazy lookup of record names for visible rows
+            this.RowsLoaded.emit({ Rows: parsedAtRisk, Capped: read.Capped });
+            // Lazy lookup of record names for visible rows
             this.ScheduleVisibleRowsLookup(0);
         }
         catch (err) {
             this.loadError = err instanceof Error ? err.message : String(err);
             LogError(`PSPredictionsGridComponent.loadPredictions: ${this.loadError}`);
+            this.RowsLoadFailed.emit(this.loadError);
         }
         finally {
             this.isLoading = false;
             this.cdr.markForCheck();
         }
     }
+    /** Clears everything derived from the previous run, so a model or run switch never shows the old run's rows or notices. */
+    resetRunState() {
+        this.AllRows = [];
+        this.FilteredRows = [];
+        this.VisibleBands = [];
+        this.DetailRowsCapped = false;
+        this.loadError = null;
+        this.SelectedTier = 'all';
+        this.SelectedDecileIndex = null;
+    }
+    /** The grid's model, or null when no model id is bound. */
+    async loadModel() {
+        if (!this.modelId)
+            return null;
+        const provider = this.ProviderToUse;
+        const modelsRes = await RunView.FromMetadataProvider(provider).RunView({
+            EntityName: 'MJ: ML Models',
+            ExtraFilter: `ID = '${EscapeSQLString(this.modelId)}'`,
+            MaxRows: 1,
+            ResultType: 'entity_object',
+        }, provider.CurrentUser ?? undefined);
+        return modelsRes.Success && modelsRes.Results ? modelsRes.Results[0] ?? null : null;
+    }
+    /** The model's latest run when no run id is bound, or null when it has none. */
+    async resolveLatestRunId() {
+        if (!this.modelId)
+            return null;
+        const provider = this.ProviderToUse;
+        const runs = await PredictiveStudioEngine.Instance.LoadRecentRunsForModel(this.modelId, provider, provider.CurrentUser ?? undefined, { maxRows: 1 });
+        return runs[0]?.ID ?? null;
+    }
+    /** The model's problem type, outcome config and polarity: one rule (`BuildAtRiskOptions`), shared with the resource and the gate probe. */
+    applyModelOptions(model) {
+        if (model?.ProblemType) {
+            this.ProblemType = model.ProblemType.toLowerCase();
+        }
+        const atRiskOptions = AtRiskRules.BuildAtRiskOptions(model ?? undefined);
+        this.OutcomeConfig = atRiskOptions.OutcomeConfig;
+        // A positive-polarity score is P(good outcome): risk is 1 - score, while the displayed score stays the model's own.
+        this.IsRenewalModel = atRiskOptions.InvertedRisk === true;
+        this.SetupColumnDefs();
+    }
+    /** One displayed row: the model's own score, its risk, and its tier (risk band, or outcome band for regression). */
+    toGridRow(r, detail) {
+        const dt = detail?.CompletedAt ?? detail?.__mj_CreatedAt ?? null;
+        const tier = this.tierFor(r);
+        return {
+            recordId: r.RecordID,
+            recordName: r.Label || r.RecordID,
+            score: r.Score,
+            scoreFormatted: formatPredictionScore(r.Score, this.OutcomeConfig, this.ProblemType),
+            riskPct: r.RiskPct,
+            band: tier.Key,
+            badgeColor: tier.BadgeColor,
+            icon: tier.Icon,
+            class: r.Class,
+            drivers: r.Drivers || [],
+            status: tier.Label,
+            scoredAtDate: dt instanceof Date ? dt : dt ? new Date(dt) : null,
+        };
+    }
+    /**
+     * A row's tier. Classification: the risk band Core put on the row, so "High" is the riskiest records whatever the
+     * polarity. Regression: the outcome band of the raw value (risk bands do not apply to a value such as an LTV).
+     */
+    tierFor(r) {
+        if (!this.IsRegression) {
+            return { Key: r.Band, Label: r.Status, BadgeColor: r.BadgeColor, Icon: r.Icon };
+        }
+        const band = ResolveScoreBand(r.Score, this.OutcomeConfig);
+        return band ? { Key: band.Key, Label: band.Label, BadgeColor: band.BadgeColor, Icon: band.Icon } : PSPredictionsGridComponent.unbandedTier;
+    }
     async resolveTargetEntity(model) {
         const provider = this.ProviderToUse;
         if (this.entityName) {
@@ -1338,7 +1339,7 @@ export class PSPredictionsGridComponent extends BaseAngularComponent {
         if (model?.PipelineID) {
             const pRes = await RunView.FromMetadataProvider(provider).RunView({
                 EntityName: 'MJ: ML Training Pipelines',
-                ExtraFilter: `ID = '${model.PipelineID.replace(/'/g, "''")}'`,
+                ExtraFilter: `ID = '${EscapeSQLString(model.PipelineID)}'`,
                 MaxRows: 1,
                 ResultType: 'simple',
                 Fields: ['TargetEntityID'],
@@ -1595,47 +1596,42 @@ export class PSPredictionsGridComponent extends BaseAngularComponent {
     getBadgeColorVar(color) {
         return this.GetBadgeColorVar(color);
     }
+    /**
+     * The tier chips and KPI cards, each with its tier's average model score. Classification: one per risk band (the
+     * at-risk list's tiers). Regression: one per configured outcome band, plus any tier a row landed in outside them.
+     */
     computeVisibleBands() {
-        const total = this.AllRows.length;
-        const bands = this.OutcomeConfig.Bands ?? [];
-        this.VisibleBands = bands.map((b) => {
-            const matching = this.AllRows.filter((r) => r.band === b.Key);
-            const count = matching.length;
-            const pct = total > 0 ? Math.round((count / total) * 100) : 0;
-            const rawAvg = count > 0 ? matching.reduce((sum, r) => sum + r.score, 0) / count : 0;
-            const avgScore = Math.round(rawAvg * 100);
-            const avgScoreFormatted = formatPredictionScore(rawAvg, this.OutcomeConfig, this.ProblemType);
-            return {
-                key: b.Key,
-                label: b.Label,
-                count,
-                pct,
-                avgScore,
-                avgScoreFormatted,
-                badgeColor: b.BadgeColor,
-                icon: b.Icon,
-                description: b.Description,
-            };
-        });
-        const knownKeys = new Set(bands.map((b) => b.Key));
-        const extraKeys = new Set(this.AllRows.map((r) => r.band).filter((k) => !knownKeys.has(k)));
-        for (const k of extraKeys) {
-            const matching = this.AllRows.filter((r) => r.band === k);
-            const count = matching.length;
-            const pct = total > 0 ? Math.round((count / total) * 100) : 0;
-            const rawAvg = count > 0 ? matching.reduce((sum, r) => sum + r.score, 0) / count : 0;
-            const avgScore = Math.round(rawAvg * 100);
-            const avgScoreFormatted = formatPredictionScore(rawAvg, this.OutcomeConfig, this.ProblemType);
-            this.VisibleBands.push({
-                key: k,
-                label: k.charAt(0).toUpperCase() + k.slice(1),
-                count,
-                pct,
-                avgScore,
-                avgScoreFormatted,
-                badgeColor: 'gray',
-            });
+        const tiers = this.IsRegression ? this.regressionTiers() : AtRiskRules.RiskBands.map((b) => ({ Key: b.Key, Label: b.Label, BadgeColor: b.BadgeColor, Icon: b.Icon }));
+        this.VisibleBands = tiers.map((t) => this.summarizeTier(t));
+    }
+    /** The configured outcome bands, then each other tier the rows carry (e.g. values outside every band), in row order. */
+    regressionTiers() {
+        const tiers = (this.OutcomeConfig.Bands ?? []).map((b) => ({ Key: b.Key, Label: b.Label, BadgeColor: b.BadgeColor, Icon: b.Icon }));
+        const known = new Set(tiers.map((t) => t.Key));
+        for (const r of this.AllRows) {
+            if (!known.has(r.band)) {
+                known.add(r.band);
+                tiers.push({ Key: r.band, Label: r.status, BadgeColor: r.badgeColor || 'gray', Icon: r.icon });
+            }
         }
+        return tiers;
+    }
+    /** A tier's chip / KPI card: its row count, share and average model score. */
+    summarizeTier(t) {
+        const total = this.AllRows.length;
+        const matching = this.AllRows.filter((r) => r.band === t.Key);
+        const count = matching.length;
+        const rawAvg = count > 0 ? matching.reduce((sum, r) => sum + r.score, 0) / count : 0;
+        return {
+            key: t.Key,
+            label: t.Label,
+            count,
+            pct: total > 0 ? Math.round((count / total) * 100) : 0,
+            avgScore: Math.round(rawAvg * 100),
+            avgScoreFormatted: formatPredictionScore(rawAvg, this.OutcomeConfig, this.ProblemType),
+            badgeColor: t.BadgeColor,
+            icon: t.Icon,
+        };
     }
     OnViewToggle(key) {
         this.ActiveView = key === 'chart' ? 'chart' : 'grid';
@@ -1682,6 +1678,12 @@ export class PSPredictionsGridComponent extends BaseAngularComponent {
     clearDecileFilter() {
         return this.ClearDecileFilter();
     }
+    /** The selected tier's label for the footer ("High risk", or an outcome band's label), empty when all tiers show. */
+    get SelectedTierLabel() {
+        if (this.SelectedTier === 'all')
+            return '';
+        return this.VisibleBands.find((b) => b.key === this.SelectedTier)?.label ?? this.SelectedTier;
+    }
     get SelectedDecileLabel() {
         if (this.SelectedDecileIndex === null)
             return '';
@@ -1706,7 +1708,7 @@ export class PSPredictionsGridComponent extends BaseAngularComponent {
             rows = rows.filter((r) => r.recordName.toLowerCase().includes(q) ||
                 r.recordId.toLowerCase().includes(q) ||
                 (r.class && r.class.toLowerCase().includes(q)) ||
-                r.drivers.some((d) => d.label.toLowerCase().includes(q)));
+                r.drivers.some((d) => d.Label.toLowerCase().includes(q)));
         }
         this.FilteredRows = rows;
         this.cdr.markForCheck();
@@ -1823,7 +1825,7 @@ export class PSPredictionsGridComponent extends BaseAngularComponent {
                 return;
             const recRes = await RunView.FromMetadataProvider(provider).RunView({
                 EntityName: entity.Name,
-                ExtraFilter: `${entity.FirstPrimaryKey.Name} = '${recordId.replace(/'/g, "''")}'`, // first-pk-ok: Single-key entity lookup by recordId
+                ExtraFilter: `${entity.FirstPrimaryKey.Name} = '${EscapeSQLString(recordId)}'`, // first-pk-ok: Single-key entity lookup by recordId
                 MaxRows: 1,
                 ResultType: 'simple',
                 Fields: [matchedField],
@@ -1864,6 +1866,7 @@ export class PSPredictionsGridComponent extends BaseAngularComponent {
                 modelId: this.modelId,
                 OutcomeConfig: this.OutcomeConfig,
                 ProblemType: this.ProblemType,
+                InvertedRisk: this.IsRenewalModel,
             });
         }
         finally {
@@ -2019,7 +2022,7 @@ export class PSPredictionsGridComponent extends BaseAngularComponent {
             // Power scale height so smaller decile bins (e.g. 2, 21, 35) are visible alongside 5,390
             const height = count === 0 ? 0 : Math.round(14 + Math.pow(count / maxCount, 0.45) * 116);
             const centerScore = (binMin + binMax) / 2;
-            const band = resolveScoreBand(centerScore, this.OutcomeConfig);
+            const band = ResolveScoreBand(centerScore, this.OutcomeConfig);
             const color = band ? this.GetBadgeColorVar(band.BadgeColor) : 'var(--mj-brand-primary)';
             let label;
             let shortLabel;
@@ -2113,7 +2116,7 @@ export class PSPredictionsGridComponent extends BaseAngularComponent {
                 ? Math.max(0, Math.min(1, (pt.score - minScore) / range))
                 : Math.max(0, Math.min(1, pt.score));
             const y = Math.round(yBottom - clampedScore * ySpan);
-            const band = resolveScoreBand(pt.score, this.OutcomeConfig);
+            const band = ResolveScoreBand(pt.score, this.OutcomeConfig);
             const color = band ? this.GetBadgeColorVar(band.BadgeColor) : 'var(--mj-brand-primary)';
             return {
                 runId: pt.runId,
@@ -2155,10 +2158,11 @@ export class PSPredictionsGridComponent extends BaseAngularComponent {
             return;
         const scoreHeader = this.OutcomeConfig.ScoreLabel || 'Prediction Score';
         const statusHeader = this.OutcomeConfig.StatusLabel || 'Risk Level';
-        const headers = ['Record ID', 'Record Name', scoreHeader, statusHeader, 'Predicted Class', 'Top Drivers', 'Scored At'];
-        const lines = [headers.join(',')];
+        const headers = ['Record ID', 'Record Name', scoreHeader, statusHeader, 'Predicted Class', 'Top Drivers (+ raises risk, − lowers risk)', 'Scored At'];
+        // Quoted: the drivers header carries a comma.
+        const lines = [headers.map((h) => `"${h.replace(/"/g, '""')}"`).join(',')];
         for (const r of this.FilteredRows) {
-            const driversStr = r.drivers.map((d) => `${d.up ? '+' : '-'}${d.label}`).join('; ');
+            const driversStr = r.drivers.map((d) => `${d.Up ? '+' : '−'}${d.Label}`).join('; ');
             const statusStr = `${r.status || r.band} (${r.scoreFormatted})`;
             const rowData = [
                 `"${r.recordId.replace(/"/g, '""')}"`,
@@ -2192,7 +2196,7 @@ export class PSPredictionsGridComponent extends BaseAngularComponent {
             .replace(/'/g, '&#039;');
     }
     static ɵfac = /*@__PURE__*/ (() => { let ɵPSPredictionsGridComponent_BaseFactory; return function PSPredictionsGridComponent_Factory(__ngFactoryType__) { return (ɵPSPredictionsGridComponent_BaseFactory || (ɵPSPredictionsGridComponent_BaseFactory = i0.ɵɵgetInheritedFactory(PSPredictionsGridComponent)))(__ngFactoryType__ || PSPredictionsGridComponent); }; })();
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PSPredictionsGridComponent, selectors: [["ps-predictions-grid"]], inputs: { modelId: "modelId", RunId: "RunId", runId: "runId", entityName: "entityName", ProblemType: "ProblemType", problemType: "problemType", title: "title", height: "height", ReadOnly: "ReadOnly", readOnly: "readOnly" }, features: [i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], decls: 27, vars: 15, consts: [[1, "ps-pred-grid-host"], [1, "pg-toolbar"], [1, "pg-toolbar-left"], [1, "pg-search-box"], [1, "fa-solid", "fa-magnifying-glass"], ["type", "text", "placeholder", "Filter records, outcome, factors...", 1, "pg-search-input", 3, "input", "value"], ["type", "button", "title", "Clear filter", 1, "pg-search-clear"], [1, "pg-tier-filters"], ["type", "button", 1, "pg-tier-btn", 3, "click"], [1, "pg-count-pill"], ["type", "button", 1, "pg-tier-btn", 3, "active"], [1, "pg-decile-pill"], [1, "pg-toolbar-right"], [3, "KeyChange", "Options", "ActiveKey"], ["mjButton", "", "variant", "secondary", "size", "sm", 3, "click", "disabled"], [1, "fa-solid", "fa-file-export"], [1, "pg-view-container"], ["text", "Loading predictions...", "size", "medium"], ["role", "alert", 1, "ps-load-error"], [1, "ps-empty", 2, "padding", "32px"], ["Mode", "slide", "Title", "Record Prediction & Score History", 3, "Resizable", "WidthPx"], ["type", "button", "title", "Clear filter", 1, "pg-search-clear", 3, "click"], [1, "fa-solid", "fa-xmark"], [1, "fa-solid", "fa-filter"], ["type", "button", "title", "Clear decile filter", 3, "click"], [1, "fa-solid", "fa-triangle-exclamation"], [1, "ps-load-error-text"], [1, "ps-load-error-detail"], ["mjButton", "", "variant", "secondary", "size", "sm", 3, "click"], [1, "fa-solid", "fa-rotate-right"], [1, "ps-empty-ico"], [1, "fa-solid", "fa-chart-line"], [1, "pg-chart-container"], [1, "pg-grid", 3, "gridReady", "rowClicked", "cellClicked", "theme", "columnDefs", "defaultColDef", "gridOptions", "rowData"], [1, "pg-footer"], [1, "ps-muted"], [1, "pg-chart-cards"], [1, "pg-chart-card", "total"], [1, "pg-chart-card-lbl"], [1, "fa-solid", "fa-users", "ps-muted"], [1, "pg-chart-card-val"], [1, "pg-chart-card-sub"], [1, "pg-chart-card", 3, "class"], [1, "pg-chart-section"], [1, "pg-chart-section-title"], [2, "display", "flex", "align-items", "center", "gap", "8px"], [1, "fa-solid", "fa-chart-simple", "ps-muted"], [1, "pg-chart-meta"], [1, "ps-small", "ps-muted"], ["type", "button", 1, "pg-clear-decile-btn"], [1, "pg-histogram"], [1, "pg-h-columns"], [1, "pg-h-col", 3, "active", "empty"], ["id", "pg-drilldown-anchor", 1, "pg-chart-section", "pg-chart-drilldown-section"], [1, "pg-chart-card", 3, "click"], [3, "class", "color"], ["type", "button", 1, "pg-clear-decile-btn", 3, "click"], [1, "pg-h-col", 3, "click"], [1, "pg-h-count", 3, "title"], [1, "pg-h-bar-track"], [1, "pg-h-bar"], [1, "pg-h-footer"], [1, "pg-h-range"], [1, "pg-h-pct"], [1, "pg-h-tooltip"], [1, "pg-h-tt-head"], [1, "pg-h-tt-row"], [1, "pg-h-tt-val"], [1, "pg-h-tt-pct"], [1, "pg-h-tt-badge"], [1, "pg-h-tt-hint"], [1, "fa-solid", "fa-layer-group", "ps-muted"], [2, "display", "flex", "height", "24px", "border-radius", "var(--mj-radius-full)", "overflow", "hidden", "background", "var(--mj-bg-surface-sunken)", "margin-bottom", "8px"], [3, "width", "background", "title"], [2, "display", "flex", "gap", "16px", "flex-wrap", "wrap"], [2, "display", "flex", "align-items", "center", "gap", "6px", "font-size", "var(--mj-text-xs)"], [3, "title"], [2, "width", "10px", "height", "10px", "border-radius", "2px", "display", "inline-block"], [1, "fa-solid", "fa-table-list", "ps-muted"], [2, "color", "var(--mj-brand-primary)"], [1, "ps-badge", 2, "margin-left", "6px", 3, "color"], [1, "pg-chart-grid-host"], [1, "pg-grid", "pg-chart-ag-grid", 3, "gridReady", "rowClicked", "cellClicked", "theme", "columnDefs", "defaultColDef", "gridOptions", "rowData"], [1, "pg-drilldown-footer"], [1, "ps-badge", 2, "margin-left", "6px"], ["Mode", "slide", "Title", "Record Prediction & Score History", 3, "WidthChanged", "Closed", "Resizable", "WidthPx"], [1, "pg-detail-body"], [1, "pg-detail-record-head"], [1, "pg-detail-record-info"], [1, "ps-badge", "blue"], [1, "ps-mono", "ps-small", "ps-muted"], [1, "pg-detail-record-actions", 2, "display", "flex", "gap", "8px", "align-items", "center", "flex-wrap", "wrap"], ["mjButton", "", "variant", "primary", "size", "sm", "title", "Open record in Explorer", 3, "click"], [1, "fa-solid", "fa-arrow-up-right-from-square"], ["mjButton", "", "variant", "secondary", "size", "sm", "title", "Open subject record (e.g. Person, Account) in Explorer"], [1, "pg-detail-pred-card"], [1, "pg-detail-score-circle"], [1, "pg-detail-meta"], [1, "pg-detail-meta-line"], [3, "class"], [2, "font-weight", "700", "color", "var(--mj-text-primary)"], [1, "pg-detail-meta-sub"], [1, "pg-detail-drivers-wrap"], [1, "ps-section-title"], [1, "fa-solid", "fa-lightbulb", 2, "color", "var(--mj-status-warning)"], [1, "pg-detail-drivers-list"], [1, "pg-trendline-wrap"], [1, "ps-section-title", 2, "display", "flex", "align-items", "center", "justify-content", "space-between"], [1, "fa-solid", "fa-clock-rotate-left", "ps-muted"], ["text", "Loading score history...", "size", "small"], ["mjButton", "", "variant", "secondary", "size", "sm", "title", "Open subject record (e.g. Person, Account) in Explorer", 3, "click"], [1, "fa-solid", "fa-user"], [1, "ps-badge"], [1, "pg-detail-driver-item"], [1, "pg-detail-driver-label"], [1, "fa-solid"], ["viewBox", "0 0 540 160", "preserveAspectRatio", "none", 1, "pg-trendline-svg"], ["x1", "40", "y1", "20", "x2", "520", "y2", "20", "stroke", "var(--mj-border-subtle)", "stroke-dasharray", "3,3"], ["x1", "40", "y1", "75", "x2", "520", "y2", "75", "stroke", "var(--mj-border-subtle)", "stroke-dasharray", "3,3"], ["x1", "40", "y1", "130", "x2", "520", "y2", "130", "stroke", "var(--mj-border-default)"], ["x", "32", "y", "24", "font-size", "10", "text-anchor", "end", "fill", "var(--mj-text-muted)"], ["x", "32", "y", "79", "font-size", "10", "text-anchor", "end", "fill", "var(--mj-text-muted)"], ["x", "32", "y", "134", "font-size", "10", "text-anchor", "end", "fill", "var(--mj-text-muted)"], ["fill", "color-mix(in srgb, var(--mj-brand-primary) 12%, transparent)"], ["fill", "none", "stroke", "var(--mj-brand-primary)", "stroke-width", "2.5"], [1, "pg-history-table"], ["r", "5", "stroke", "var(--mj-bg-surface)", "stroke-width", "2"], ["font-size", "10", "font-weight", "700", "text-anchor", "middle", "fill", "var(--mj-text-primary)"], [1, "ps-mono"], [1, "pg-delta-pill", "neutral"], [1, "pg-delta-pill", "up"], [1, "pg-delta-pill", "down"], [1, "fa-solid", "fa-arrow-up"], [1, "fa-solid", "fa-arrow-down"]], template: function PSPredictionsGridComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PSPredictionsGridComponent, selectors: [["ps-predictions-grid"]], inputs: { modelId: "modelId", RunId: "RunId", runId: "runId", entityName: "entityName", ProblemType: "ProblemType", problemType: "problemType", title: "title", height: "height", ReadOnly: "ReadOnly", readOnly: "readOnly" }, outputs: { RowsLoaded: "RowsLoaded", RowsLoadFailed: "RowsLoadFailed" }, features: [i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], decls: 27, vars: 15, consts: [[1, "ps-pred-grid-host"], [1, "pg-toolbar"], [1, "pg-toolbar-left"], [1, "pg-search-box"], [1, "fa-solid", "fa-magnifying-glass"], ["type", "text", "placeholder", "Filter records, outcome, factors...", 1, "pg-search-input", 3, "input", "value"], ["type", "button", "title", "Clear filter", 1, "pg-search-clear"], [1, "pg-tier-filters"], ["type", "button", 1, "pg-tier-btn", 3, "click"], [1, "pg-count-pill"], ["type", "button", 1, "pg-tier-btn", 3, "active"], [1, "pg-decile-pill"], [1, "pg-toolbar-right"], [3, "KeyChange", "Options", "ActiveKey"], ["mjButton", "", "variant", "secondary", "size", "sm", 3, "click", "disabled"], [1, "fa-solid", "fa-file-export"], [1, "pg-view-container"], ["text", "Loading predictions...", "size", "medium"], ["role", "alert", 1, "ps-load-error"], [1, "ps-empty", 2, "padding", "32px"], ["Mode", "slide", "Title", "Record Prediction & Score History", 3, "Resizable", "WidthPx"], ["type", "button", "title", "Clear filter", 1, "pg-search-clear", 3, "click"], [1, "fa-solid", "fa-xmark"], [1, "fa-solid", "fa-filter"], ["type", "button", "title", "Clear decile filter", 3, "click"], [1, "fa-solid", "fa-triangle-exclamation"], [1, "ps-load-error-text"], [1, "ps-load-error-detail"], ["mjButton", "", "variant", "secondary", "size", "sm", 3, "click"], [1, "fa-solid", "fa-rotate-right"], [1, "ps-empty-ico"], [1, "fa-solid", "fa-chart-line"], [1, "pg-chart-container"], [1, "pg-grid", 3, "gridReady", "rowClicked", "cellClicked", "theme", "columnDefs", "defaultColDef", "gridOptions", "rowData"], [1, "pg-footer"], [1, "ps-muted"], ["data-testid", "ps-predictions-capped", 1, "ps-muted"], [1, "pg-chart-cards"], [1, "pg-chart-card", "total"], [1, "pg-chart-card-lbl"], [1, "fa-solid", "fa-users", "ps-muted"], [1, "pg-chart-card-val"], [1, "pg-chart-card-sub"], [1, "pg-chart-card", 3, "class"], [1, "pg-chart-section"], [1, "pg-chart-section-title"], [2, "display", "flex", "align-items", "center", "gap", "8px"], [1, "fa-solid", "fa-chart-simple", "ps-muted"], [1, "pg-chart-meta"], [1, "ps-small", "ps-muted"], ["type", "button", 1, "pg-clear-decile-btn"], [1, "pg-histogram"], [1, "pg-h-columns"], [1, "pg-h-col", 3, "active", "empty"], ["id", "pg-drilldown-anchor", 1, "pg-chart-section", "pg-chart-drilldown-section"], [1, "pg-chart-card", 3, "click"], [3, "class", "color"], ["type", "button", 1, "pg-clear-decile-btn", 3, "click"], [1, "pg-h-col", 3, "click"], [1, "pg-h-count", 3, "title"], [1, "pg-h-bar-track"], [1, "pg-h-bar"], [1, "pg-h-footer"], [1, "pg-h-range"], [1, "pg-h-pct"], [1, "pg-h-tooltip"], [1, "pg-h-tt-head"], [1, "pg-h-tt-row"], [1, "pg-h-tt-val"], [1, "pg-h-tt-pct"], [1, "pg-h-tt-badge"], [1, "pg-h-tt-hint"], [1, "fa-solid", "fa-layer-group", "ps-muted"], [2, "display", "flex", "height", "24px", "border-radius", "var(--mj-radius-full)", "overflow", "hidden", "background", "var(--mj-bg-surface-sunken)", "margin-bottom", "8px"], [3, "width", "background", "title"], [2, "display", "flex", "gap", "16px", "flex-wrap", "wrap"], [2, "display", "flex", "align-items", "center", "gap", "6px", "font-size", "var(--mj-text-xs)"], [3, "title"], [2, "width", "10px", "height", "10px", "border-radius", "2px", "display", "inline-block"], [1, "fa-solid", "fa-table-list", "ps-muted"], [2, "color", "var(--mj-brand-primary)"], [1, "ps-badge", 2, "margin-left", "6px", 3, "color"], [1, "pg-chart-grid-host"], [1, "pg-grid", "pg-chart-ag-grid", 3, "gridReady", "rowClicked", "cellClicked", "theme", "columnDefs", "defaultColDef", "gridOptions", "rowData"], [1, "pg-drilldown-footer"], [1, "ps-badge", 2, "margin-left", "6px"], ["Mode", "slide", "Title", "Record Prediction & Score History", 3, "WidthChanged", "Closed", "Resizable", "WidthPx"], [1, "pg-detail-body"], [1, "pg-detail-record-head"], [1, "pg-detail-record-info"], [1, "ps-badge", "blue"], [1, "ps-mono", "ps-small", "ps-muted"], [1, "pg-detail-record-actions", 2, "display", "flex", "gap", "8px", "align-items", "center", "flex-wrap", "wrap"], ["mjButton", "", "variant", "primary", "size", "sm", "title", "Open record in Explorer", 3, "click"], [1, "fa-solid", "fa-arrow-up-right-from-square"], ["mjButton", "", "variant", "secondary", "size", "sm", "title", "Open subject record (e.g. Person, Account) in Explorer"], [1, "pg-detail-pred-card"], [1, "pg-detail-score-circle"], [1, "pg-detail-meta"], [1, "pg-detail-meta-line"], [3, "class"], [2, "font-weight", "700", "color", "var(--mj-text-primary)"], [1, "pg-detail-meta-sub"], [1, "pg-detail-drivers-wrap"], [1, "ps-section-title"], [1, "fa-solid", "fa-lightbulb", 2, "color", "var(--mj-status-warning)"], [3, "Drivers"], [1, "pg-trendline-wrap"], [1, "ps-section-title", 2, "display", "flex", "align-items", "center", "justify-content", "space-between"], [1, "fa-solid", "fa-clock-rotate-left", "ps-muted"], ["text", "Loading score history...", "size", "small"], ["mjButton", "", "variant", "secondary", "size", "sm", "title", "Open subject record (e.g. Person, Account) in Explorer", 3, "click"], [1, "fa-solid", "fa-user"], [1, "ps-badge"], ["viewBox", "0 0 540 160", "preserveAspectRatio", "none", 1, "pg-trendline-svg"], ["x1", "40", "y1", "20", "x2", "520", "y2", "20", "stroke", "var(--mj-border-subtle)", "stroke-dasharray", "3,3"], ["x1", "40", "y1", "75", "x2", "520", "y2", "75", "stroke", "var(--mj-border-subtle)", "stroke-dasharray", "3,3"], ["x1", "40", "y1", "130", "x2", "520", "y2", "130", "stroke", "var(--mj-border-default)"], ["x", "32", "y", "24", "font-size", "10", "text-anchor", "end", "fill", "var(--mj-text-muted)"], ["x", "32", "y", "79", "font-size", "10", "text-anchor", "end", "fill", "var(--mj-text-muted)"], ["x", "32", "y", "134", "font-size", "10", "text-anchor", "end", "fill", "var(--mj-text-muted)"], ["fill", "color-mix(in srgb, var(--mj-brand-primary) 12%, transparent)"], ["fill", "none", "stroke", "var(--mj-brand-primary)", "stroke-width", "2.5"], [1, "pg-history-table"], ["r", "5", "stroke", "var(--mj-bg-surface)", "stroke-width", "2"], ["font-size", "10", "font-weight", "700", "text-anchor", "middle", "fill", "var(--mj-text-primary)"], [1, "ps-mono"], [1, "pg-delta-pill", "neutral"], [1, "pg-delta-pill", "up"], [1, "pg-delta-pill", "down"], [1, "fa-solid", "fa-arrow-up"], [1, "fa-solid", "fa-arrow-down"]], template: function PSPredictionsGridComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2)(3, "div", 3);
             i0.ɵɵelement(4, "i", 4);
             i0.ɵɵelementStart(5, "input", 5);
@@ -2221,7 +2225,7 @@ export class PSPredictionsGridComponent extends BaseAngularComponent {
             i0.ɵɵelementStart(21, "div", 16);
             i0.ɵɵconditionalCreate(22, PSPredictionsGridComponent_Conditional_22_Template, 1, 0, "mj-loading", 17)(23, PSPredictionsGridComponent_Conditional_23_Template, 10, 1, "div", 18)(24, PSPredictionsGridComponent_Conditional_24_Template, 7, 0, "div", 19)(25, PSPredictionsGridComponent_Conditional_25_Template, 2, 2);
             i0.ɵɵelementEnd();
-            i0.ɵɵconditionalCreate(26, PSPredictionsGridComponent_Conditional_26_Template, 52, 26, "mj-slide-panel", 20);
+            i0.ɵɵconditionalCreate(26, PSPredictionsGridComponent_Conditional_26_Template, 51, 26, "mj-slide-panel", 20);
             i0.ɵɵelementEnd();
         } if (rf & 2) {
             i0.ɵɵstyleProp("height", ctx.height);
@@ -2250,7 +2254,7 @@ export class PSPredictionsGridComponent extends BaseAngularComponent {
             SharedGenericModule, i1.LoadingComponent, MJButtonDirective,
             MJViewToggleComponent,
             MjSlidePanelComponent,
-            AgGridModule, i2.AgGridAngular, i3.DecimalPipe, i3.DatePipe], styles: ["\n\n\n\n\n\n\n\n\n\n\n\n\n.ps-panel[_ngcontent-%COMP%] {\n  --ps-node-source: #6b7280;\n  --ps-node-feature: #2050c8;\n  --ps-node-embedding: #7b3ff0;\n  --ps-node-target: #1f9d57;\n  --ps-node-algorithm: #d98213;\n  \n  --ps-gauge-cost: var(--ps-node-algorithm);\n  --ps-gauge-iterations: var(--ps-node-feature);\n}\n\n.ps-panel[_ngcontent-%COMP%] {\n  display: block;\n  height: 100%;\n}\n\n\n.ps-row[_ngcontent-%COMP%] { display: flex; gap: 16px; }\n.ps-col[_ngcontent-%COMP%] { display: flex; flex-direction: column; gap: 16px; }\n.ps-wrap[_ngcontent-%COMP%] { flex-wrap: wrap; }\n.ps-spacer[_ngcontent-%COMP%] { flex: 1; }\n.ps-muted[_ngcontent-%COMP%] { color: var(--mj-text-muted); }\n.ps-small[_ngcontent-%COMP%] { font-size: 12.5px; }\n.ps-mono[_ngcontent-%COMP%] { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: 12.5px; }\n.ps-section-title[_ngcontent-%COMP%] {\n  font-size: 12px; text-transform: uppercase; letter-spacing: .06em;\n  color: var(--mj-text-muted); margin: 4px 0 2px; font-weight: 700;\n}\n\n\n.ps-card[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  overflow: hidden;\n}\n.ps-card-head[_ngcontent-%COMP%] {\n  display: flex; align-items: center; gap: 10px;\n  padding: 14px 16px; border-bottom: 1px solid var(--mj-border-subtle);\n}\n.ps-card-head[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] { font-size: 14.5px; margin: 0; font-weight: 650; color: var(--mj-text-primary); }\n.ps-card-body[_ngcontent-%COMP%] { padding: 16px; }\n\n\n.ps-kpi[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface); border: 1px solid var(--mj-border-default);\n  border-radius: 8px; padding: 16px 18px;\n}\n.ps-kpi[_ngcontent-%COMP%]   .label[_ngcontent-%COMP%] { font-size: 12px; color: var(--mj-text-muted); font-weight: 600; }\n.ps-kpi[_ngcontent-%COMP%]   .val[_ngcontent-%COMP%] { font-size: 26px; font-weight: 720; letter-spacing: -.02em; margin-top: 2px; color: var(--mj-text-primary); }\n\n\n.ps-badge[_ngcontent-%COMP%] {\n  display: inline-flex; align-items: center; gap: 5px;\n  padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 650; line-height: 1.7;\n}\n.ps-badge.gray[_ngcontent-%COMP%] { background: var(--mj-bg-surface-sunken); color: var(--mj-text-secondary); }\n.ps-badge.blue[_ngcontent-%COMP%] { background: var(--mj-status-info-bg); color: var(--mj-status-info-text); }\n.ps-badge.green[_ngcontent-%COMP%] { background: var(--mj-status-success-bg); color: var(--mj-status-success-text); }\n.ps-badge.amber[_ngcontent-%COMP%] { background: var(--mj-status-warning-bg); color: var(--mj-status-warning-text); }\n.ps-badge.red[_ngcontent-%COMP%] { background: var(--mj-status-error-bg); color: var(--mj-status-error-text); }\n.ps-dot[_ngcontent-%COMP%] { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }\n\n\n.ps-lvl[_ngcontent-%COMP%] {\n  display: inline-flex; align-items: center; justify-content: center;\n  min-width: 92px; padding: 4px 10px; border-radius: 7px;\n  font-weight: 650; font-size: 11.5px; color: var(--mj-text-inverse);\n}\n.ps-lvl-Primary[_ngcontent-%COMP%] { background: var(--mj-status-success); }\n.ps-lvl-Strong[_ngcontent-%COMP%] { background: var(--mj-status-info); }\n.ps-lvl-Viable[_ngcontent-%COMP%] { background: var(--mj-status-warning); }\n.ps-lvl-Weak[_ngcontent-%COMP%] { background: var(--mj-text-disabled); }\n.ps-lvl-NotRecommended[_ngcontent-%COMP%] { background: var(--mj-bg-surface-sunken); color: var(--mj-text-muted); }\n\n\n.ps-tag[_ngcontent-%COMP%] {\n  display: inline-block; padding: 2px 8px; border-radius: 6px;\n  background: var(--mj-bg-surface-sunken); color: var(--mj-text-secondary);\n  font-size: 11.5px; font-weight: 600;\n}\n.ps-tag.muted[_ngcontent-%COMP%] { opacity: .6; }\n.ps-divider[_ngcontent-%COMP%] { height: 1px; background: var(--mj-border-subtle); margin: 8px 0; }\n\n\n.ps-table[_ngcontent-%COMP%] { width: 100%; border-collapse: collapse; font-size: 13px; }\n.ps-table[_ngcontent-%COMP%]   th[_ngcontent-%COMP%] {\n  text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em;\n  color: var(--mj-text-muted); font-weight: 700; padding: 9px 12px;\n  border-bottom: 1px solid var(--mj-border-default);\n}\n.ps-table[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] { padding: 11px 12px; border-bottom: 1px solid var(--mj-border-subtle); color: var(--mj-text-primary); }\n.ps-table[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:hover   td[_ngcontent-%COMP%] { background: var(--mj-bg-surface-hover); }\n.ps-table[_ngcontent-%COMP%]   .num[_ngcontent-%COMP%] { text-align: right; font-variant-numeric: tabular-nums; }\n\n.ps-rank[_ngcontent-%COMP%] {\n  width: 22px; height: 22px; border-radius: 6px; background: var(--mj-bg-surface-sunken);\n  display: inline-grid; place-items: center; font-weight: 700; font-size: 11.5px; color: var(--mj-text-secondary);\n}\n.ps-rank.gold[_ngcontent-%COMP%] { background: var(--mj-status-warning-bg); color: var(--mj-status-warning-text); }\n\n\n.ps-bar[_ngcontent-%COMP%] { height: 8px; border-radius: 999px; background: var(--mj-bg-surface-sunken); overflow: hidden; }\n.ps-bar[_ngcontent-%COMP%]    > span[_ngcontent-%COMP%] { display: block; height: 100%; border-radius: 999px; background: var(--mj-brand-primary); }\n.ps-bar.warn[_ngcontent-%COMP%]    > span[_ngcontent-%COMP%] { background: var(--mj-status-warning); }\n.ps-bar.run[_ngcontent-%COMP%]    > span[_ngcontent-%COMP%] { background: var(--mj-brand-primary); }\n\n.ps-fbar[_ngcontent-%COMP%] { display: grid; grid-template-columns: minmax(150px, 1.3fr) 2fr 56px; align-items: center; gap: 14px; padding: 8px 0; }\n.ps-fbar[_ngcontent-%COMP%]    + .ps-fbar[_ngcontent-%COMP%] { border-top: 1px solid var(--mj-border-subtle); }\n.ps-fbar[_ngcontent-%COMP%]   .track[_ngcontent-%COMP%] { height: 10px; border-radius: var(--mj-radius-full); background: var(--mj-bg-surface-sunken); overflow: hidden; }\n.ps-fbar[_ngcontent-%COMP%]   .track[_ngcontent-%COMP%]    > span[_ngcontent-%COMP%] { display: block; height: 100%; border-radius: var(--mj-radius-full); background: var(--mj-brand-primary); }\n.ps-fbar[_ngcontent-%COMP%]   .track[_ngcontent-%COMP%]    > span.warn[_ngcontent-%COMP%] { background: var(--mj-status-warning); }\n.ps-fbar[_ngcontent-%COMP%]   .name[_ngcontent-%COMP%] { color: var(--mj-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.ps-fbar[_ngcontent-%COMP%]    > .ps-mono[_ngcontent-%COMP%] { text-align: right; color: var(--mj-text-secondary); font-variant-numeric: tabular-nums; }\n\n\n.ps-gauge[_ngcontent-%COMP%] {\n  position: relative; width: 64px; height: 64px; border-radius: 50%; flex: 0 0 auto;\n  background: conic-gradient(var(--ps-gauge-color, var(--mj-brand-primary)) calc(var(--ps-p, 40) * 1%), var(--mj-bg-surface-sunken) 0);\n  display: grid; place-items: center;\n}\n.ps-gauge[_ngcontent-%COMP%]::after { content: ''; position: absolute; inset: 9px; background: var(--mj-bg-surface); border-radius: 50%; }\n.ps-gauge[_ngcontent-%COMP%]   .g-val[_ngcontent-%COMP%] { position: relative; font-weight: 720; font-size: 14px; color: var(--mj-text-primary); }\n\n\n.ps-callout[_ngcontent-%COMP%] { display: flex; gap: 11px; padding: 12px 14px; border-radius: 10px; border: 1px solid; }\n.ps-callout.warn[_ngcontent-%COMP%] { background: var(--mj-status-warning-bg); border-color: var(--mj-status-warning-border); color: var(--mj-status-warning-text); }\n.ps-callout.info[_ngcontent-%COMP%] { background: var(--mj-status-info-bg); border-color: var(--mj-status-info-border); color: var(--mj-status-info-text); }\n.ps-callout.success[_ngcontent-%COMP%] { background: var(--mj-status-success-bg); border-color: var(--mj-status-success-border); color: var(--mj-status-success-text); }\n.ps-callout[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { font-size: 16px; margin-top: 1px; }\n\n\n.ps-stepper[_ngcontent-%COMP%] { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }\n.ps-step[_ngcontent-%COMP%] { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--mj-text-muted); }\n.ps-step[_ngcontent-%COMP%]   .pip[_ngcontent-%COMP%] {\n  width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--mj-border-strong);\n  display: grid; place-items: center; font-size: 11px;\n}\n.ps-step.done[_ngcontent-%COMP%] { color: var(--mj-status-success-text); }\n.ps-step.done[_ngcontent-%COMP%]   .pip[_ngcontent-%COMP%] { background: var(--mj-status-success); border-color: var(--mj-status-success); color: var(--mj-text-inverse); }\n.ps-step.curr[_ngcontent-%COMP%] { color: var(--mj-brand-primary); }\n.ps-step.curr[_ngcontent-%COMP%]   .pip[_ngcontent-%COMP%] { border-color: var(--mj-brand-primary); color: var(--mj-brand-primary); }\n.ps-step[_ngcontent-%COMP%]   .ln[_ngcontent-%COMP%] { width: 26px; height: 2px; background: var(--mj-border-strong); }\n\n\n.ps-flow[_ngcontent-%COMP%] {\n  position: relative;\n  background:\n    linear-gradient(var(--mj-border-subtle) 1px, transparent 1px) 0 0 / 22px 22px,\n    linear-gradient(90deg, var(--mj-border-subtle) 1px, transparent 1px) 0 0 / 22px 22px,\n    var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default); border-radius: 10px;\n  min-height: 620px; overflow: hidden;\n}\n.ps-node[_ngcontent-%COMP%] {\n  position: absolute; width: 190px; background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-strong); border-left-width: 3px; border-radius: 8px;\n  cursor: pointer;\n}\n.ps-node[_ngcontent-%COMP%]   .nh[_ngcontent-%COMP%] {\n  display: flex; align-items: center; gap: 8px; padding: 9px 11px;\n  border-bottom: 1px solid var(--mj-border-subtle); font-weight: 650; font-size: 12.5px; color: var(--mj-text-primary);\n}\n.ps-node[_ngcontent-%COMP%]   .nh[_ngcontent-%COMP%]   i.tile[_ngcontent-%COMP%] {\n  width: 24px; height: 24px; border-radius: 6px; display: grid; place-items: center;\n  color: var(--mj-text-inverse); font-size: 12px; flex: 0 0 auto;\n}\n.ps-node[_ngcontent-%COMP%]   .nh[_ngcontent-%COMP%]   .ps-tag[_ngcontent-%COMP%] { margin-left: auto; }\n.ps-node[_ngcontent-%COMP%]   .nb[_ngcontent-%COMP%] { padding: 9px 11px; font-size: 12px; color: var(--mj-text-secondary); }\n.ps-node[_ngcontent-%COMP%]   .nb-row[_ngcontent-%COMP%] { display: flex; justify-content: space-between; gap: 8px; padding: 2px 0; }\n.ps-node[_ngcontent-%COMP%]   .nb-row[_ngcontent-%COMP%]   .k[_ngcontent-%COMP%] { color: var(--mj-text-muted); }\n.ps-node.src[_ngcontent-%COMP%] { border-left-color: var(--ps-node-source); }\n.ps-node.src[_ngcontent-%COMP%]   .nh[_ngcontent-%COMP%]   i.tile[_ngcontent-%COMP%] { background: var(--ps-node-source); }\n.ps-node.feat[_ngcontent-%COMP%] { border-left-color: var(--ps-node-feature); }\n.ps-node.feat[_ngcontent-%COMP%]   .nh[_ngcontent-%COMP%]   i.tile[_ngcontent-%COMP%] { background: var(--ps-node-feature); }\n.ps-node.emb[_ngcontent-%COMP%] { border-left-color: var(--ps-node-embedding); }\n.ps-node.emb[_ngcontent-%COMP%]   .nh[_ngcontent-%COMP%]   i.tile[_ngcontent-%COMP%] { background: var(--ps-node-embedding); }\n.ps-node.target[_ngcontent-%COMP%] { border-left-color: var(--ps-node-target); }\n.ps-node.target[_ngcontent-%COMP%]   .nh[_ngcontent-%COMP%]   i.tile[_ngcontent-%COMP%] { background: var(--ps-node-target); }\n.ps-node.algo[_ngcontent-%COMP%] { border-left-color: var(--ps-node-algorithm); }\n.ps-node.algo[_ngcontent-%COMP%]   .nh[_ngcontent-%COMP%]   i.tile[_ngcontent-%COMP%] { background: var(--ps-node-algorithm); }\n.ps-node.output[_ngcontent-%COMP%] { border-left-color: var(--mj-status-success); }\n.ps-node.output[_ngcontent-%COMP%]   .nh[_ngcontent-%COMP%]   i.tile[_ngcontent-%COMP%] { background: var(--mj-status-success); }\n.ps-node.selected[_ngcontent-%COMP%] {\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 18%, transparent);\n}\n.ps-node[_ngcontent-%COMP%]   .port[_ngcontent-%COMP%] {\n  position: absolute; width: 11px; height: 11px; border-radius: 50%;\n  background: var(--mj-bg-surface); border: 2px solid var(--mj-brand-primary);\n  top: 50%; transform: translateY(-50%);\n}\n.ps-node[_ngcontent-%COMP%]   .port.in[_ngcontent-%COMP%] { left: -6px; }\n.ps-node[_ngcontent-%COMP%]   .port.out[_ngcontent-%COMP%] { right: -6px; }\nsvg.ps-edges[_ngcontent-%COMP%] { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }\nsvg.ps-edges[_ngcontent-%COMP%]   path[_ngcontent-%COMP%] { stroke: color-mix(in srgb, var(--mj-brand-primary) 45%, transparent); stroke-width: 2; fill: none; }\n\n\n.ps-pchip[_ngcontent-%COMP%] {\n  display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 8px;\n  border: 1px dashed var(--mj-border-strong); background: var(--mj-bg-surface);\n  font-size: 12.5px; font-weight: 600; color: var(--mj-text-secondary); cursor: grab;\n}\n.ps-pchip[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { font-size: 12px; color: var(--mj-text-inverse); width: 20px; height: 20px; border-radius: 5px; display: grid; place-items: center; }\n.ps-pchip.s[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { background: var(--ps-node-source); }\n.ps-pchip.f[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { background: var(--ps-node-feature); }\n.ps-pchip.e[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { background: var(--ps-node-embedding); }\n.ps-pchip.t[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { background: var(--ps-node-target); }\n.ps-pchip.a[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { background: var(--ps-node-algorithm); }\n\n\n.ps-seg[_ngcontent-%COMP%] { display: inline-flex; border: 1px solid var(--mj-border-default); border-radius: 8px; overflow: hidden; }\n.ps-seg[_ngcontent-%COMP%]   button[_ngcontent-%COMP%] {\n  border: none; background: var(--mj-bg-surface); color: var(--mj-text-secondary);\n  padding: 6px 12px; font-size: 12.5px; font-weight: 600; cursor: pointer;\n  border-right: 1px solid var(--mj-border-default);\n}\n.ps-seg[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]:last-child { border-right: none; }\n.ps-seg[_ngcontent-%COMP%]   button.on[_ngcontent-%COMP%] { background: var(--mj-brand-primary); color: var(--mj-text-inverse); }\n\n\n.ps-field[_ngcontent-%COMP%] { margin-bottom: 14px; }\n.ps-field[_ngcontent-%COMP%]    > label[_ngcontent-%COMP%] {\n  display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .04em;\n  color: var(--mj-text-muted); font-weight: 700; margin-bottom: 6px;\n}\n.ps-input[_ngcontent-%COMP%] {\n  width: 100%; padding: 8px 10px; border: 1px solid var(--mj-border-default);\n  border-radius: 6px; font-size: 13px; background: var(--mj-bg-surface); color: var(--mj-text-primary);\n  box-sizing: border-box;\n}\n.ps-input[_ngcontent-%COMP%]:focus { outline: none; border-color: var(--mj-brand-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 12%, transparent); }\n\n\n.ps-loading[_ngcontent-%COMP%] { display: flex; align-items: center; justify-content: center; padding: 60px 0; }\n\n\n.ps-empty[_ngcontent-%COMP%] {\n  display: flex; flex-direction: column; align-items: center; justify-content: center;\n  text-align: center; gap: 10px; padding: 56px 24px; color: var(--mj-text-muted);\n}\n.ps-empty[_ngcontent-%COMP%]   .ps-empty-ico[_ngcontent-%COMP%] {\n  width: 60px; height: 60px; border-radius: 16px; display: grid; place-items: center;\n  background: var(--mj-bg-surface-sunken); color: var(--mj-text-disabled); font-size: 24px;\n}\n.ps-empty[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] { margin: 4px 0 0; font-size: 16px; font-weight: 650; color: var(--mj-text-secondary); }\n.ps-empty[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] { margin: 0; max-width: 420px; font-size: 13px; line-height: 1.5; }\n\n\n.ps-modal-backdrop[_ngcontent-%COMP%] {\n  position: fixed; inset: 0; z-index: 1000;\n  background: var(--mj-bg-overlay);\n  display: flex; align-items: center; justify-content: center; padding: 24px;\n}\n.ps-modal[_ngcontent-%COMP%] {\n  width: 100%; max-width: 480px; background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default); border-radius: 14px;\n  box-shadow: var(--mj-shadow-lg, var(--mj-shadow-sm)); overflow: hidden;\n}\n.ps-modal-head[_ngcontent-%COMP%] {\n  display: flex; align-items: center; gap: 12px; padding: 18px 20px;\n  border-bottom: 1px solid var(--mj-border-subtle);\n}\n.ps-modal-head[_ngcontent-%COMP%]   .ico[_ngcontent-%COMP%] {\n  width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center;\n  font-size: 16px; flex: 0 0 auto;\n  background: var(--mj-status-info-bg); color: var(--mj-status-info-text);\n}\n.ps-modal-head.warn[_ngcontent-%COMP%]   .ico[_ngcontent-%COMP%] { background: var(--mj-status-warning-bg); color: var(--mj-status-warning-text); }\n.ps-modal-head.danger[_ngcontent-%COMP%]   .ico[_ngcontent-%COMP%] { background: var(--mj-status-error-bg); color: var(--mj-status-error-text); }\n.ps-modal-head[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] { margin: 0; font-size: 15.5px; font-weight: 650; color: var(--mj-text-primary); }\n.ps-modal-body[_ngcontent-%COMP%] { padding: 18px 20px; font-size: 13.5px; line-height: 1.55; color: var(--mj-text-secondary); }\n.ps-modal-body[_ngcontent-%COMP%]   .ps-field[_ngcontent-%COMP%] { margin-top: 14px; margin-bottom: 0; }\n.ps-modal-foot[_ngcontent-%COMP%] {\n  display: flex; align-items: center; gap: 10px; padding: 14px 20px;\n  border-top: 1px solid var(--mj-border-subtle); background: var(--mj-bg-surface-card);\n}\n.ps-modal-foot[_ngcontent-%COMP%]   .ps-spacer[_ngcontent-%COMP%] { flex: 1; }", "\n\n\n\n\n.ps-pred-grid-host[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  min-height: 0;\n  box-sizing: border-box;\n}\n\n\n.pg-toolbar[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n  padding: 8px 12px;\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md);\n  margin-bottom: 12px;\n  flex-wrap: wrap;\n}\n\n.pg-toolbar-left[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex: 1;\n  min-width: 240px;\n}\n\n.pg-search-box[_ngcontent-%COMP%] {\n  position: relative;\n  display: flex;\n  align-items: center;\n  max-width: 260px;\n  width: 100%;\n}\n\n.pg-search-box[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  position: absolute;\n  left: 10px;\n  color: var(--mj-text-muted);\n  font-size: 12px;\n  pointer-events: none;\n}\n\n.pg-search-input[_ngcontent-%COMP%] {\n  width: 100%;\n  padding: 6px 10px 6px 30px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-sm);\n  background: var(--mj-bg-surface);\n  font-size: var(--mj-text-xs);\n  color: var(--mj-text-primary);\n  outline: none;\n  transition: border-color .15s;\n}\n\n.pg-search-input[_ngcontent-%COMP%]:focus {\n  border-color: var(--mj-brand-primary);\n}\n\n.pg-search-clear[_ngcontent-%COMP%] {\n  position: absolute;\n  right: 8px;\n  background: transparent;\n  border: none;\n  cursor: pointer;\n  padding: 2px 4px;\n  color: var(--mj-text-muted);\n  font-size: 11px;\n}\n\n.pg-search-clear[_ngcontent-%COMP%]:hover {\n  color: var(--mj-text-primary);\n}\n\n.pg-decile-pill[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 2px 8px;\n  border-radius: var(--mj-radius-full);\n  background: color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n  border: 1px solid var(--mj-brand-primary);\n  font-size: var(--mj-text-xs);\n  font-weight: 600;\n  color: var(--mj-brand-primary);\n}\n\n.pg-decile-pill[_ngcontent-%COMP%]   button[_ngcontent-%COMP%] {\n  background: transparent;\n  border: none;\n  cursor: pointer;\n  padding: 0;\n  color: var(--mj-brand-primary);\n  font-size: 10px;\n}\n\n.pg-tier-filters[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  flex-wrap: wrap;\n}\n\n.pg-tier-btn[_ngcontent-%COMP%] {\n  cursor: pointer;\n  border: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n  border-radius: var(--mj-radius-full);\n  padding: 3px 10px;\n  font-size: var(--mj-text-xs);\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n  transition: all .15s;\n  display: inline-flex;\n  align-items: center;\n  gap: 5px;\n}\n\n.pg-tier-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-primary);\n}\n\n.pg-tier-btn.active[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  border-color: var(--mj-brand-primary);\n}\n\n.pg-tier-btn.tier-high.active[_ngcontent-%COMP%] {\n  background: var(--mj-status-error);\n  border-color: var(--mj-status-error);\n}\n\n.pg-tier-btn.tier-medium.active[_ngcontent-%COMP%] {\n  background: var(--mj-status-warning);\n  border-color: var(--mj-status-warning);\n}\n\n.pg-tier-btn.tier-low.active[_ngcontent-%COMP%] {\n  background: var(--mj-status-success);\n  border-color: var(--mj-status-success);\n}\n\n.pg-count-pill[_ngcontent-%COMP%] {\n  font-size: 10px;\n  opacity: .85;\n}\n\n.pg-toolbar-right[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n\n\n.pg-view-container[_ngcontent-%COMP%] {\n  flex: 1;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n}\n\n.pg-grid[_ngcontent-%COMP%] {\n  width: 100%;\n  flex: 1;\n  min-height: 380px;\n}\n\n\n.pg-record-cell[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  gap: 2px;\n  height: 100%;\n  min-width: 0;\n  line-height: 1.2;\n}\n\n.pg-record-title-row[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  min-width: 0;\n}\n\n.pg-record-link[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  max-width: 100%;\n  text-decoration: none;\n  cursor: pointer;\n  min-width: 0;\n}\n\n.pg-record-name[_ngcontent-%COMP%] {\n  font-weight: 600;\n  font-size: var(--mj-text-sm);\n  color: var(--mj-text-link);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.pg-record-link[_ngcontent-%COMP%]:hover   .pg-record-name[_ngcontent-%COMP%] {\n  text-decoration: underline;\n}\n\n.pg-record-open-icon[_ngcontent-%COMP%] {\n  font-size: 10px;\n  color: var(--mj-text-muted);\n  flex-shrink: 0;\n  transition: transform .15s, color .15s;\n}\n\n.pg-record-link[_ngcontent-%COMP%]:hover   .pg-record-open-icon[_ngcontent-%COMP%] {\n  transform: translateY(-1px) translateX(1px);\n  color: var(--mj-text-primary);\n}\n\n.pg-record-id[_ngcontent-%COMP%] {\n  font-size: 11px;\n  color: var(--mj-text-muted);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.pg-score-cell[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  height: 100%;\n  min-width: 0;\n}\n\n.pg-score-bar[_ngcontent-%COMP%] {\n  flex: 1;\n  height: 8px;\n  border-radius: var(--mj-radius-full);\n  background: var(--mj-bg-surface-sunken);\n  overflow: hidden;\n}\n\n.pg-score-fill[_ngcontent-%COMP%] {\n  display: block;\n  height: 100%;\n  border-radius: var(--mj-radius-full);\n}\n\n.pg-score-fill.risk-high[_ngcontent-%COMP%], \n.pg-score-fill.badge-red[_ngcontent-%COMP%] { background: var(--mj-status-error); }\n.pg-score-fill.risk-medium[_ngcontent-%COMP%], \n.pg-score-fill.badge-amber[_ngcontent-%COMP%] { background: var(--mj-status-warning); }\n.pg-score-fill.risk-low[_ngcontent-%COMP%], \n.pg-score-fill.badge-green[_ngcontent-%COMP%] { background: var(--mj-status-success); }\n.pg-score-fill.badge-blue[_ngcontent-%COMP%] { background: var(--mj-brand-primary); }\n.pg-score-fill.badge-gray[_ngcontent-%COMP%] { background: var(--mj-text-muted); }\n\n.pg-score-val[_ngcontent-%COMP%] {\n  font-weight: 700;\n  font-size: var(--mj-text-xs);\n  font-variant-numeric: tabular-nums;\n  min-width: 44px;\n  text-align: right;\n}\n\n.pg-score-val.risk-high[_ngcontent-%COMP%], \n.pg-score-val.badge-red[_ngcontent-%COMP%] { color: var(--mj-status-error-text, var(--mj-status-error)); }\n.pg-score-val.risk-medium[_ngcontent-%COMP%], \n.pg-score-val.badge-amber[_ngcontent-%COMP%] { color: var(--mj-status-warning-text, var(--mj-status-warning)); }\n.pg-score-val.risk-low[_ngcontent-%COMP%], \n.pg-score-val.badge-green[_ngcontent-%COMP%] { color: var(--mj-status-success-text, var(--mj-status-success)); }\n.pg-score-val.badge-blue[_ngcontent-%COMP%] { color: var(--mj-brand-primary); }\n.pg-score-val.badge-gray[_ngcontent-%COMP%] { color: var(--mj-text-muted); }\n\n.pg-drivers-cell[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  height: 100%;\n  overflow: hidden;\n  flex-wrap: nowrap;\n}\n\n.pg-action-btn[_ngcontent-%COMP%] {\n  background: transparent;\n  border: none;\n  cursor: pointer;\n  padding: 6px 8px;\n  border-radius: 6px;\n  color: var(--mj-text-muted);\n  font-size: 12px;\n  transition: all .15s;\n}\n\n.pg-action-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-brand-primary);\n}\n\n\n.pg-footer[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 8px 12px;\n  background: var(--mj-bg-surface-card);\n  border-top: 1px solid var(--mj-border-subtle);\n  font-size: var(--mj-text-xs);\n  color: var(--mj-text-muted);\n}\n\n\n.pg-chart-container[_ngcontent-%COMP%] {\n  flex: 1;\n  min-height: 0;\n  overflow-y: auto;\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  padding: 4px 0 12px;\n}\n\n.pg-chart-cards[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));\n  gap: 12px;\n}\n\n.pg-chart-card[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md);\n  padding: 14px 16px;\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  cursor: pointer;\n  transition: all .15s;\n}\n\n.pg-chart-card[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n}\n\n.pg-chart-card.total[_ngcontent-%COMP%] { border-left: 4px solid var(--mj-brand-primary); }\n.pg-chart-card.tier-high[_ngcontent-%COMP%] { border-left: 4px solid var(--mj-status-error); }\n.pg-chart-card.tier-medium[_ngcontent-%COMP%] { border-left: 4px solid var(--mj-status-warning); }\n.pg-chart-card.tier-low[_ngcontent-%COMP%] { border-left: 4px solid var(--mj-status-success); }\n\n.pg-chart-card-val[_ngcontent-%COMP%] {\n  font-size: var(--mj-text-xl);\n  font-weight: 700;\n  color: var(--mj-text-primary);\n}\n\n.pg-chart-card-lbl[_ngcontent-%COMP%] {\n  font-size: var(--mj-text-xs);\n  color: var(--mj-text-secondary);\n  font-weight: 600;\n}\n\n.pg-chart-card-sub[_ngcontent-%COMP%] {\n  font-size: 11px;\n  color: var(--mj-text-muted);\n}\n\n.pg-chart-section[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md);\n  padding: 18px 20px;\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n\n.pg-chart-section-title[_ngcontent-%COMP%] {\n  font-size: var(--mj-text-sm);\n  font-weight: 650;\n  color: var(--mj-text-primary);\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  flex-wrap: wrap;\n  gap: 8px;\n}\n\n.pg-chart-meta[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n\n.pg-clear-decile-btn[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-sunken);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-full);\n  padding: 2px 10px;\n  font-size: 11px;\n  font-weight: 600;\n  cursor: pointer;\n  color: var(--mj-text-secondary);\n  transition: all .15s;\n}\n\n.pg-clear-decile-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-primary);\n  border-color: var(--mj-border-subtle);\n}\n\n\n.pg-histogram[_ngcontent-%COMP%] {\n  position: relative;\n  width: 100%;\n  padding-top: 8px;\n  padding-bottom: 28px;\n}\n\n.pg-h-columns[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: flex-end;\n  justify-content: space-between;\n  gap: 8px;\n  height: 200px;\n  padding: 0 4px;\n  border-bottom: 2px solid var(--mj-border-default);\n}\n\n.pg-h-col[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: flex-end;\n  height: 100%;\n  cursor: pointer;\n  position: relative;\n  transition: transform .15s;\n  user-select: none;\n}\n\n.pg-h-col[_ngcontent-%COMP%]:hover {\n  transform: translateY(-2px);\n}\n\n.pg-h-count[_ngcontent-%COMP%] {\n  font-size: 11px;\n  font-weight: 700;\n  color: var(--mj-text-primary);\n  margin-bottom: 6px;\n  white-space: nowrap;\n  font-variant-numeric: tabular-nums;\n}\n\n.pg-h-bar-track[_ngcontent-%COMP%] {\n  width: 100%;\n  max-width: 52px;\n  display: flex;\n  align-items: flex-end;\n  justify-content: center;\n}\n\n.pg-h-bar[_ngcontent-%COMP%] {\n  width: 100%;\n  border-radius: 4px 4px 0 0;\n  transition: height .3s cubic-bezier(0.4, 0, 0.2, 1), opacity .15s, box-shadow .15s;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);\n}\n\n.pg-h-col[_ngcontent-%COMP%]:hover   .pg-h-bar[_ngcontent-%COMP%] {\n  filter: brightness(1.1);\n  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);\n}\n\n.pg-h-col.active[_ngcontent-%COMP%]   .pg-h-bar[_ngcontent-%COMP%] {\n  outline: 3px solid var(--mj-brand-primary);\n  outline-offset: 1px;\n}\n\n.pg-h-footer[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  margin-top: 8px;\n  position: absolute;\n  top: 100%;\n  left: 0;\n  right: 0;\n}\n\n.pg-h-range[_ngcontent-%COMP%] {\n  font-size: 10px;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n}\n\n.pg-h-pct[_ngcontent-%COMP%] {\n  font-size: 10px;\n  color: var(--mj-text-muted);\n}\n\n\n.pg-h-tooltip[_ngcontent-%COMP%] {\n  position: absolute;\n  bottom: calc(100% + 4px);\n  left: 50%;\n  transform: translateX(-50%);\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);\n  border-radius: var(--mj-radius-md);\n  padding: 8px 12px;\n  white-space: nowrap;\n  pointer-events: none;\n  opacity: 0;\n  visibility: hidden;\n  transition: opacity .15s, visibility .15s;\n  z-index: 50;\n}\n\n.pg-h-col[_ngcontent-%COMP%]:hover   .pg-h-tooltip[_ngcontent-%COMP%] {\n  opacity: 1;\n  visibility: visible;\n}\n\n.pg-h-tt-head[_ngcontent-%COMP%] {\n  font-size: 11px;\n  font-weight: 700;\n  color: var(--mj-text-primary);\n  margin-bottom: 2px;\n}\n\n.pg-h-tt-row[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 6px;\n  align-items: center;\n  font-size: 11px;\n}\n\n.pg-h-tt-val[_ngcontent-%COMP%] {\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.pg-h-tt-pct[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n}\n\n.pg-h-tt-badge[_ngcontent-%COMP%] {\n  font-size: 10px;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  margin-top: 3px;\n}\n\n.pg-h-tt-hint[_ngcontent-%COMP%] {\n  font-size: 9px;\n  color: var(--mj-text-muted);\n  font-style: italic;\n  margin-top: 4px;\n}\n\n\n.pg-detail-body[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n  padding: 18px 20px 32px;\n}\n\n.pg-detail-record-head[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 14px;\n  padding-bottom: 14px;\n  border-bottom: 1px solid var(--mj-border-subtle);\n}\n\n.pg-detail-record-info[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0 0 4px;\n  font-size: var(--mj-text-lg);\n  font-weight: 700;\n  color: var(--mj-text-primary);\n}\n\n.pg-detail-pred-card[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 20px;\n  padding: 16px 18px;\n  border-radius: var(--mj-radius-md);\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n}\n\n.pg-detail-score-circle[_ngcontent-%COMP%] {\n  width: 72px;\n  height: 72px;\n  border-radius: 50%;\n  display: grid;\n  place-items: center;\n  font-size: 19px;\n  font-weight: 800;\n  color: var(--mj-text-inverse);\n  flex-shrink: 0;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, .12);\n}\n\n.pg-detail-score-circle.risk-high[_ngcontent-%COMP%], \n.pg-detail-score-circle.badge-red[_ngcontent-%COMP%] { background: var(--mj-status-error); }\n.pg-detail-score-circle.risk-medium[_ngcontent-%COMP%], \n.pg-detail-score-circle.badge-amber[_ngcontent-%COMP%] { background: var(--mj-status-warning); }\n.pg-detail-score-circle.risk-low[_ngcontent-%COMP%], \n.pg-detail-score-circle.badge-green[_ngcontent-%COMP%] { background: var(--mj-status-success); }\n.pg-detail-score-circle.badge-blue[_ngcontent-%COMP%] { background: var(--mj-brand-primary); }\n.pg-detail-score-circle.badge-gray[_ngcontent-%COMP%] { background: var(--mj-text-muted); }\n\n.pg-detail-meta[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  flex: 1;\n}\n\n.pg-detail-meta-line[_ngcontent-%COMP%] {\n  font-size: var(--mj-text-sm);\n  color: var(--mj-text-primary);\n}\n\n.pg-detail-meta-sub[_ngcontent-%COMP%] {\n  font-size: var(--mj-text-xs);\n  color: var(--mj-text-muted);\n}\n\n.pg-detail-drivers-wrap[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n\n.pg-detail-drivers-list[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.pg-detail-driver-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 8px 12px;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-subtle);\n  border-radius: var(--mj-radius-sm);\n}\n\n.pg-detail-driver-label[_ngcontent-%COMP%] {\n  font-size: var(--mj-text-xs);\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n\n.pg-trendline-wrap[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  padding: 16px;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md);\n}\n\n.pg-trendline-svg[_ngcontent-%COMP%] {\n  width: 100%;\n  height: 180px;\n  overflow: visible;\n}\n\n.pg-history-table[_ngcontent-%COMP%] {\n  width: 100%;\n  border-collapse: collapse;\n  font-size: var(--mj-text-xs);\n  margin-top: 6px;\n}\n\n.pg-history-table[_ngcontent-%COMP%]   th[_ngcontent-%COMP%] {\n  text-align: left;\n  padding: 6px 8px;\n  border-bottom: 1px solid var(--mj-border-default);\n  color: var(--mj-text-muted);\n  font-weight: 600;\n  font-size: 11px;\n  text-transform: uppercase;\n  letter-spacing: .03em;\n}\n\n.pg-history-table[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {\n  padding: 7px 8px;\n  border-bottom: 1px solid var(--mj-border-subtle);\n  color: var(--mj-text-secondary);\n}\n\n.pg-history-table[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:last-child   td[_ngcontent-%COMP%] {\n  border-bottom: none;\n}\n\n.pg-delta-pill[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 3px;\n  font-weight: 700;\n  font-size: 11px;\n  padding: 1px 6px;\n  border-radius: var(--mj-radius-full);\n}\n\n.pg-delta-pill.up[_ngcontent-%COMP%] { background: var(--mj-status-error-bg); color: var(--mj-status-error-text); }\n.pg-delta-pill.down[_ngcontent-%COMP%] { background: var(--mj-status-success-bg); color: var(--mj-status-success-text); }\n.pg-delta-pill.neutral[_ngcontent-%COMP%] { background: var(--mj-bg-surface-sunken); color: var(--mj-text-muted); }\n\n\n.pg-chart-drilldown-section[_ngcontent-%COMP%] {\n  padding: 16px 18px;\n  gap: 12px;\n}\n\n.pg-chart-grid-host[_ngcontent-%COMP%] {\n  width: 100%;\n  height: 440px;\n  min-height: 320px;\n  border-radius: var(--mj-radius-sm);\n  overflow: hidden;\n  border: 1px solid var(--mj-border-default);\n}\n\n.pg-chart-ag-grid[_ngcontent-%COMP%] {\n  width: 100%;\n  height: 100%;\n}\n\n.pg-drilldown-footer[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: flex-end;\n  font-size: var(--mj-text-xs);\n  color: var(--mj-text-muted);\n  padding-top: 2px;\n}"], changeDetection: 0 });
+            AgGridModule, i2.AgGridAngular, PSRowDriversComponent, i3.DecimalPipe, i3.DatePipe], styles: ["\n\n\n\n\n\n\n\n\n\n\n\n\n.ps-panel[_ngcontent-%COMP%] {\n  --ps-node-source: #6b7280;\n  --ps-node-feature: #2050c8;\n  --ps-node-embedding: #7b3ff0;\n  --ps-node-target: #1f9d57;\n  --ps-node-algorithm: #d98213;\n  \n  --ps-gauge-cost: var(--ps-node-algorithm);\n  --ps-gauge-iterations: var(--ps-node-feature);\n}\n\n.ps-panel[_ngcontent-%COMP%] {\n  display: block;\n  height: 100%;\n}\n\n\n.ps-row[_ngcontent-%COMP%] { display: flex; gap: 16px; }\n.ps-col[_ngcontent-%COMP%] { display: flex; flex-direction: column; gap: 16px; }\n.ps-wrap[_ngcontent-%COMP%] { flex-wrap: wrap; }\n.ps-spacer[_ngcontent-%COMP%] { flex: 1; }\n.ps-muted[_ngcontent-%COMP%] { color: var(--mj-text-muted); }\n.ps-small[_ngcontent-%COMP%] { font-size: 12.5px; }\n.ps-mono[_ngcontent-%COMP%] { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: 12.5px; }\n.ps-section-title[_ngcontent-%COMP%] {\n  font-size: 12px; text-transform: uppercase; letter-spacing: .06em;\n  color: var(--mj-text-muted); margin: 4px 0 2px; font-weight: 700;\n}\n\n\n.ps-card[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  overflow: hidden;\n}\n.ps-card-head[_ngcontent-%COMP%] {\n  display: flex; align-items: center; gap: 10px;\n  padding: 14px 16px; border-bottom: 1px solid var(--mj-border-subtle);\n}\n.ps-card-head[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] { font-size: 14.5px; margin: 0; font-weight: 650; color: var(--mj-text-primary); }\n.ps-card-body[_ngcontent-%COMP%] { padding: 16px; }\n\n\n.ps-kpi[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface); border: 1px solid var(--mj-border-default);\n  border-radius: 8px; padding: 16px 18px;\n}\n.ps-kpi[_ngcontent-%COMP%]   .label[_ngcontent-%COMP%] { font-size: 12px; color: var(--mj-text-muted); font-weight: 600; }\n.ps-kpi[_ngcontent-%COMP%]   .val[_ngcontent-%COMP%] { font-size: 26px; font-weight: 720; letter-spacing: -.02em; margin-top: 2px; color: var(--mj-text-primary); }\n\n\n.ps-badge[_ngcontent-%COMP%] {\n  display: inline-flex; align-items: center; gap: 5px;\n  padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 650; line-height: 1.7;\n}\n.ps-badge.gray[_ngcontent-%COMP%] { background: var(--mj-bg-surface-sunken); color: var(--mj-text-secondary); }\n.ps-badge.blue[_ngcontent-%COMP%] { background: var(--mj-status-info-bg); color: var(--mj-status-info-text); }\n.ps-badge.green[_ngcontent-%COMP%] { background: var(--mj-status-success-bg); color: var(--mj-status-success-text); }\n.ps-badge.amber[_ngcontent-%COMP%] { background: var(--mj-status-warning-bg); color: var(--mj-status-warning-text); }\n.ps-badge.red[_ngcontent-%COMP%] { background: var(--mj-status-error-bg); color: var(--mj-status-error-text); }\n.ps-dot[_ngcontent-%COMP%] { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }\n\n\n.ps-lvl[_ngcontent-%COMP%] {\n  display: inline-flex; align-items: center; justify-content: center;\n  min-width: 92px; padding: 4px 10px; border-radius: 7px;\n  font-weight: 650; font-size: 11.5px; color: var(--mj-text-inverse);\n}\n.ps-lvl-Primary[_ngcontent-%COMP%] { background: var(--mj-status-success); }\n.ps-lvl-Strong[_ngcontent-%COMP%] { background: var(--mj-status-info); }\n.ps-lvl-Viable[_ngcontent-%COMP%] { background: var(--mj-status-warning); }\n.ps-lvl-Weak[_ngcontent-%COMP%] { background: var(--mj-text-disabled); }\n.ps-lvl-NotRecommended[_ngcontent-%COMP%] { background: var(--mj-bg-surface-sunken); color: var(--mj-text-muted); }\n\n\n.ps-tag[_ngcontent-%COMP%] {\n  display: inline-block; padding: 2px 8px; border-radius: 6px;\n  background: var(--mj-bg-surface-sunken); color: var(--mj-text-secondary);\n  font-size: 11.5px; font-weight: 600;\n}\n.ps-tag.muted[_ngcontent-%COMP%] { opacity: .6; }\n.ps-divider[_ngcontent-%COMP%] { height: 1px; background: var(--mj-border-subtle); margin: 8px 0; }\n\n\n.ps-table[_ngcontent-%COMP%] { width: 100%; border-collapse: collapse; font-size: 13px; }\n.ps-table[_ngcontent-%COMP%]   th[_ngcontent-%COMP%] {\n  text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em;\n  color: var(--mj-text-muted); font-weight: 700; padding: 9px 12px;\n  border-bottom: 1px solid var(--mj-border-default);\n}\n.ps-table[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] { padding: 11px 12px; border-bottom: 1px solid var(--mj-border-subtle); color: var(--mj-text-primary); }\n.ps-table[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:hover   td[_ngcontent-%COMP%] { background: var(--mj-bg-surface-hover); }\n.ps-table[_ngcontent-%COMP%]   .num[_ngcontent-%COMP%] { text-align: right; font-variant-numeric: tabular-nums; }\n\n.ps-rank[_ngcontent-%COMP%] {\n  width: 22px; height: 22px; border-radius: 6px; background: var(--mj-bg-surface-sunken);\n  display: inline-grid; place-items: center; font-weight: 700; font-size: 11.5px; color: var(--mj-text-secondary);\n}\n.ps-rank.gold[_ngcontent-%COMP%] { background: var(--mj-status-warning-bg); color: var(--mj-status-warning-text); }\n\n\n.ps-bar[_ngcontent-%COMP%] { height: 8px; border-radius: 999px; background: var(--mj-bg-surface-sunken); overflow: hidden; }\n.ps-bar[_ngcontent-%COMP%]    > span[_ngcontent-%COMP%] { display: block; height: 100%; border-radius: 999px; background: var(--mj-brand-primary); }\n.ps-bar.warn[_ngcontent-%COMP%]    > span[_ngcontent-%COMP%] { background: var(--mj-status-warning); }\n.ps-bar.run[_ngcontent-%COMP%]    > span[_ngcontent-%COMP%] { background: var(--mj-brand-primary); }\n\n.ps-fbar[_ngcontent-%COMP%] { display: grid; grid-template-columns: minmax(150px, 1.3fr) 2fr 56px; align-items: center; gap: 14px; padding: 8px 0; }\n.ps-fbar[_ngcontent-%COMP%]    + .ps-fbar[_ngcontent-%COMP%] { border-top: 1px solid var(--mj-border-subtle); }\n.ps-fbar[_ngcontent-%COMP%]   .track[_ngcontent-%COMP%] { height: 10px; border-radius: var(--mj-radius-full); background: var(--mj-bg-surface-sunken); overflow: hidden; }\n.ps-fbar[_ngcontent-%COMP%]   .track[_ngcontent-%COMP%]    > span[_ngcontent-%COMP%] { display: block; height: 100%; border-radius: var(--mj-radius-full); background: var(--mj-brand-primary); }\n.ps-fbar[_ngcontent-%COMP%]   .track[_ngcontent-%COMP%]    > span.warn[_ngcontent-%COMP%] { background: var(--mj-status-warning); }\n.ps-fbar[_ngcontent-%COMP%]   .name[_ngcontent-%COMP%] { color: var(--mj-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.ps-fbar[_ngcontent-%COMP%]    > .ps-mono[_ngcontent-%COMP%] { text-align: right; color: var(--mj-text-secondary); font-variant-numeric: tabular-nums; }\n\n\n.ps-gauge[_ngcontent-%COMP%] {\n  position: relative; width: 64px; height: 64px; border-radius: 50%; flex: 0 0 auto;\n  background: conic-gradient(var(--ps-gauge-color, var(--mj-brand-primary)) calc(var(--ps-p, 40) * 1%), var(--mj-bg-surface-sunken) 0);\n  display: grid; place-items: center;\n}\n.ps-gauge[_ngcontent-%COMP%]::after { content: ''; position: absolute; inset: 9px; background: var(--mj-bg-surface); border-radius: 50%; }\n.ps-gauge[_ngcontent-%COMP%]   .g-val[_ngcontent-%COMP%] { position: relative; font-weight: 720; font-size: 14px; color: var(--mj-text-primary); }\n\n\n.ps-callout[_ngcontent-%COMP%] { display: flex; gap: 11px; padding: 12px 14px; border-radius: 10px; border: 1px solid; }\n.ps-callout.warn[_ngcontent-%COMP%] { background: var(--mj-status-warning-bg); border-color: var(--mj-status-warning-border); color: var(--mj-status-warning-text); }\n.ps-callout.info[_ngcontent-%COMP%] { background: var(--mj-status-info-bg); border-color: var(--mj-status-info-border); color: var(--mj-status-info-text); }\n.ps-callout.success[_ngcontent-%COMP%] { background: var(--mj-status-success-bg); border-color: var(--mj-status-success-border); color: var(--mj-status-success-text); }\n.ps-callout[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { font-size: 16px; margin-top: 1px; }\n\n\n.ps-stepper[_ngcontent-%COMP%] { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }\n.ps-step[_ngcontent-%COMP%] { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--mj-text-muted); }\n.ps-step[_ngcontent-%COMP%]   .pip[_ngcontent-%COMP%] {\n  width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--mj-border-strong);\n  display: grid; place-items: center; font-size: 11px;\n}\n.ps-step.done[_ngcontent-%COMP%] { color: var(--mj-status-success-text); }\n.ps-step.done[_ngcontent-%COMP%]   .pip[_ngcontent-%COMP%] { background: var(--mj-status-success); border-color: var(--mj-status-success); color: var(--mj-text-inverse); }\n.ps-step.curr[_ngcontent-%COMP%] { color: var(--mj-brand-primary); }\n.ps-step.curr[_ngcontent-%COMP%]   .pip[_ngcontent-%COMP%] { border-color: var(--mj-brand-primary); color: var(--mj-brand-primary); }\n.ps-step[_ngcontent-%COMP%]   .ln[_ngcontent-%COMP%] { width: 26px; height: 2px; background: var(--mj-border-strong); }\n\n\n.ps-flow[_ngcontent-%COMP%] {\n  position: relative;\n  background:\n    linear-gradient(var(--mj-border-subtle) 1px, transparent 1px) 0 0 / 22px 22px,\n    linear-gradient(90deg, var(--mj-border-subtle) 1px, transparent 1px) 0 0 / 22px 22px,\n    var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default); border-radius: 10px;\n  min-height: 620px; overflow: hidden;\n}\n.ps-node[_ngcontent-%COMP%] {\n  position: absolute; width: 190px; background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-strong); border-left-width: 3px; border-radius: 8px;\n  cursor: pointer;\n}\n.ps-node[_ngcontent-%COMP%]   .nh[_ngcontent-%COMP%] {\n  display: flex; align-items: center; gap: 8px; padding: 9px 11px;\n  border-bottom: 1px solid var(--mj-border-subtle); font-weight: 650; font-size: 12.5px; color: var(--mj-text-primary);\n}\n.ps-node[_ngcontent-%COMP%]   .nh[_ngcontent-%COMP%]   i.tile[_ngcontent-%COMP%] {\n  width: 24px; height: 24px; border-radius: 6px; display: grid; place-items: center;\n  color: var(--mj-text-inverse); font-size: 12px; flex: 0 0 auto;\n}\n.ps-node[_ngcontent-%COMP%]   .nh[_ngcontent-%COMP%]   .ps-tag[_ngcontent-%COMP%] { margin-left: auto; }\n.ps-node[_ngcontent-%COMP%]   .nb[_ngcontent-%COMP%] { padding: 9px 11px; font-size: 12px; color: var(--mj-text-secondary); }\n.ps-node[_ngcontent-%COMP%]   .nb-row[_ngcontent-%COMP%] { display: flex; justify-content: space-between; gap: 8px; padding: 2px 0; }\n.ps-node[_ngcontent-%COMP%]   .nb-row[_ngcontent-%COMP%]   .k[_ngcontent-%COMP%] { color: var(--mj-text-muted); }\n.ps-node.src[_ngcontent-%COMP%] { border-left-color: var(--ps-node-source); }\n.ps-node.src[_ngcontent-%COMP%]   .nh[_ngcontent-%COMP%]   i.tile[_ngcontent-%COMP%] { background: var(--ps-node-source); }\n.ps-node.feat[_ngcontent-%COMP%] { border-left-color: var(--ps-node-feature); }\n.ps-node.feat[_ngcontent-%COMP%]   .nh[_ngcontent-%COMP%]   i.tile[_ngcontent-%COMP%] { background: var(--ps-node-feature); }\n.ps-node.emb[_ngcontent-%COMP%] { border-left-color: var(--ps-node-embedding); }\n.ps-node.emb[_ngcontent-%COMP%]   .nh[_ngcontent-%COMP%]   i.tile[_ngcontent-%COMP%] { background: var(--ps-node-embedding); }\n.ps-node.target[_ngcontent-%COMP%] { border-left-color: var(--ps-node-target); }\n.ps-node.target[_ngcontent-%COMP%]   .nh[_ngcontent-%COMP%]   i.tile[_ngcontent-%COMP%] { background: var(--ps-node-target); }\n.ps-node.algo[_ngcontent-%COMP%] { border-left-color: var(--ps-node-algorithm); }\n.ps-node.algo[_ngcontent-%COMP%]   .nh[_ngcontent-%COMP%]   i.tile[_ngcontent-%COMP%] { background: var(--ps-node-algorithm); }\n.ps-node.output[_ngcontent-%COMP%] { border-left-color: var(--mj-status-success); }\n.ps-node.output[_ngcontent-%COMP%]   .nh[_ngcontent-%COMP%]   i.tile[_ngcontent-%COMP%] { background: var(--mj-status-success); }\n.ps-node.selected[_ngcontent-%COMP%] {\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 18%, transparent);\n}\n.ps-node[_ngcontent-%COMP%]   .port[_ngcontent-%COMP%] {\n  position: absolute; width: 11px; height: 11px; border-radius: 50%;\n  background: var(--mj-bg-surface); border: 2px solid var(--mj-brand-primary);\n  top: 50%; transform: translateY(-50%);\n}\n.ps-node[_ngcontent-%COMP%]   .port.in[_ngcontent-%COMP%] { left: -6px; }\n.ps-node[_ngcontent-%COMP%]   .port.out[_ngcontent-%COMP%] { right: -6px; }\nsvg.ps-edges[_ngcontent-%COMP%] { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }\nsvg.ps-edges[_ngcontent-%COMP%]   path[_ngcontent-%COMP%] { stroke: color-mix(in srgb, var(--mj-brand-primary) 45%, transparent); stroke-width: 2; fill: none; }\n\n\n.ps-pchip[_ngcontent-%COMP%] {\n  display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 8px;\n  border: 1px dashed var(--mj-border-strong); background: var(--mj-bg-surface);\n  font-size: 12.5px; font-weight: 600; color: var(--mj-text-secondary); cursor: grab;\n}\n.ps-pchip[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { font-size: 12px; color: var(--mj-text-inverse); width: 20px; height: 20px; border-radius: 5px; display: grid; place-items: center; }\n.ps-pchip.s[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { background: var(--ps-node-source); }\n.ps-pchip.f[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { background: var(--ps-node-feature); }\n.ps-pchip.e[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { background: var(--ps-node-embedding); }\n.ps-pchip.t[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { background: var(--ps-node-target); }\n.ps-pchip.a[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { background: var(--ps-node-algorithm); }\n\n\n.ps-seg[_ngcontent-%COMP%] { display: inline-flex; border: 1px solid var(--mj-border-default); border-radius: 8px; overflow: hidden; }\n.ps-seg[_ngcontent-%COMP%]   button[_ngcontent-%COMP%] {\n  border: none; background: var(--mj-bg-surface); color: var(--mj-text-secondary);\n  padding: 6px 12px; font-size: 12.5px; font-weight: 600; cursor: pointer;\n  border-right: 1px solid var(--mj-border-default);\n}\n.ps-seg[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]:last-child { border-right: none; }\n.ps-seg[_ngcontent-%COMP%]   button.on[_ngcontent-%COMP%] { background: var(--mj-brand-primary); color: var(--mj-text-inverse); }\n\n\n.ps-field[_ngcontent-%COMP%] { margin-bottom: 14px; }\n.ps-field[_ngcontent-%COMP%]    > label[_ngcontent-%COMP%] {\n  display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .04em;\n  color: var(--mj-text-muted); font-weight: 700; margin-bottom: 6px;\n}\n.ps-input[_ngcontent-%COMP%] {\n  width: 100%; padding: 8px 10px; border: 1px solid var(--mj-border-default);\n  border-radius: 6px; font-size: 13px; background: var(--mj-bg-surface); color: var(--mj-text-primary);\n  box-sizing: border-box;\n}\n.ps-input[_ngcontent-%COMP%]:focus { outline: none; border-color: var(--mj-brand-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 12%, transparent); }\n\n\n.ps-loading[_ngcontent-%COMP%] { display: flex; align-items: center; justify-content: center; padding: 60px 0; }\n\n\n.ps-empty[_ngcontent-%COMP%] {\n  display: flex; flex-direction: column; align-items: center; justify-content: center;\n  text-align: center; gap: 10px; padding: 56px 24px; color: var(--mj-text-muted);\n}\n.ps-empty[_ngcontent-%COMP%]   .ps-empty-ico[_ngcontent-%COMP%] {\n  width: 60px; height: 60px; border-radius: 16px; display: grid; place-items: center;\n  background: var(--mj-bg-surface-sunken); color: var(--mj-text-disabled); font-size: 24px;\n}\n.ps-empty[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] { margin: 4px 0 0; font-size: 16px; font-weight: 650; color: var(--mj-text-secondary); }\n.ps-empty[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] { margin: 0; max-width: 420px; font-size: 13px; line-height: 1.5; }\n\n\n.ps-modal-backdrop[_ngcontent-%COMP%] {\n  position: fixed; inset: 0; z-index: 1000;\n  background: var(--mj-bg-overlay);\n  display: flex; align-items: center; justify-content: center; padding: 24px;\n}\n.ps-modal[_ngcontent-%COMP%] {\n  width: 100%; max-width: 480px; background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default); border-radius: 14px;\n  box-shadow: var(--mj-shadow-lg, var(--mj-shadow-sm)); overflow: hidden;\n}\n.ps-modal-head[_ngcontent-%COMP%] {\n  display: flex; align-items: center; gap: 12px; padding: 18px 20px;\n  border-bottom: 1px solid var(--mj-border-subtle);\n}\n.ps-modal-head[_ngcontent-%COMP%]   .ico[_ngcontent-%COMP%] {\n  width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center;\n  font-size: 16px; flex: 0 0 auto;\n  background: var(--mj-status-info-bg); color: var(--mj-status-info-text);\n}\n.ps-modal-head.warn[_ngcontent-%COMP%]   .ico[_ngcontent-%COMP%] { background: var(--mj-status-warning-bg); color: var(--mj-status-warning-text); }\n.ps-modal-head.danger[_ngcontent-%COMP%]   .ico[_ngcontent-%COMP%] { background: var(--mj-status-error-bg); color: var(--mj-status-error-text); }\n.ps-modal-head[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] { margin: 0; font-size: 15.5px; font-weight: 650; color: var(--mj-text-primary); }\n.ps-modal-body[_ngcontent-%COMP%] { padding: 18px 20px; font-size: 13.5px; line-height: 1.55; color: var(--mj-text-secondary); }\n.ps-modal-body[_ngcontent-%COMP%]   .ps-field[_ngcontent-%COMP%] { margin-top: 14px; margin-bottom: 0; }\n.ps-modal-foot[_ngcontent-%COMP%] {\n  display: flex; align-items: center; gap: 10px; padding: 14px 20px;\n  border-top: 1px solid var(--mj-border-subtle); background: var(--mj-bg-surface-card);\n}\n.ps-modal-foot[_ngcontent-%COMP%]   .ps-spacer[_ngcontent-%COMP%] { flex: 1; }", "\n\n\n\n\n.ps-pred-grid-host[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  min-height: 0;\n  box-sizing: border-box;\n}\n\n\n.pg-toolbar[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n  padding: 8px 12px;\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md);\n  margin-bottom: 12px;\n  flex-wrap: wrap;\n}\n\n.pg-toolbar-left[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex: 1;\n  min-width: 240px;\n}\n\n.pg-search-box[_ngcontent-%COMP%] {\n  position: relative;\n  display: flex;\n  align-items: center;\n  max-width: 260px;\n  width: 100%;\n}\n\n.pg-search-box[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  position: absolute;\n  left: 10px;\n  color: var(--mj-text-muted);\n  font-size: 12px;\n  pointer-events: none;\n}\n\n.pg-search-input[_ngcontent-%COMP%] {\n  width: 100%;\n  padding: 6px 10px 6px 30px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-sm);\n  background: var(--mj-bg-surface);\n  font-size: var(--mj-text-xs);\n  color: var(--mj-text-primary);\n  outline: none;\n  transition: border-color .15s;\n}\n\n.pg-search-input[_ngcontent-%COMP%]:focus {\n  border-color: var(--mj-brand-primary);\n}\n\n.pg-search-clear[_ngcontent-%COMP%] {\n  position: absolute;\n  right: 8px;\n  background: transparent;\n  border: none;\n  cursor: pointer;\n  padding: 2px 4px;\n  color: var(--mj-text-muted);\n  font-size: 11px;\n}\n\n.pg-search-clear[_ngcontent-%COMP%]:hover {\n  color: var(--mj-text-primary);\n}\n\n.pg-decile-pill[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 2px 8px;\n  border-radius: var(--mj-radius-full);\n  background: color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n  border: 1px solid var(--mj-brand-primary);\n  font-size: var(--mj-text-xs);\n  font-weight: 600;\n  color: var(--mj-brand-primary);\n}\n\n.pg-decile-pill[_ngcontent-%COMP%]   button[_ngcontent-%COMP%] {\n  background: transparent;\n  border: none;\n  cursor: pointer;\n  padding: 0;\n  color: var(--mj-brand-primary);\n  font-size: 10px;\n}\n\n.pg-tier-filters[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  flex-wrap: wrap;\n}\n\n.pg-tier-btn[_ngcontent-%COMP%] {\n  cursor: pointer;\n  border: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n  border-radius: var(--mj-radius-full);\n  padding: 3px 10px;\n  font-size: var(--mj-text-xs);\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n  transition: all .15s;\n  display: inline-flex;\n  align-items: center;\n  gap: 5px;\n}\n\n.pg-tier-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-primary);\n}\n\n.pg-tier-btn.active[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  border-color: var(--mj-brand-primary);\n}\n\n.pg-tier-btn.tier-high.active[_ngcontent-%COMP%] {\n  background: var(--mj-status-error);\n  border-color: var(--mj-status-error);\n}\n\n.pg-tier-btn.tier-medium.active[_ngcontent-%COMP%] {\n  background: var(--mj-status-warning);\n  border-color: var(--mj-status-warning);\n}\n\n.pg-tier-btn.tier-low.active[_ngcontent-%COMP%] {\n  background: var(--mj-status-success);\n  border-color: var(--mj-status-success);\n}\n\n.pg-count-pill[_ngcontent-%COMP%] {\n  font-size: 10px;\n  opacity: .85;\n}\n\n.pg-toolbar-right[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n\n\n.pg-view-container[_ngcontent-%COMP%] {\n  flex: 1;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n}\n\n.pg-grid[_ngcontent-%COMP%] {\n  width: 100%;\n  flex: 1;\n  min-height: 380px;\n}\n\n\n.pg-record-cell[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  gap: 2px;\n  height: 100%;\n  min-width: 0;\n  line-height: 1.2;\n}\n\n.pg-record-title-row[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  min-width: 0;\n}\n\n.pg-record-link[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  max-width: 100%;\n  text-decoration: none;\n  cursor: pointer;\n  min-width: 0;\n}\n\n.pg-record-name[_ngcontent-%COMP%] {\n  font-weight: 600;\n  font-size: var(--mj-text-sm);\n  color: var(--mj-text-link);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.pg-record-link[_ngcontent-%COMP%]:hover   .pg-record-name[_ngcontent-%COMP%] {\n  text-decoration: underline;\n}\n\n.pg-record-open-icon[_ngcontent-%COMP%] {\n  font-size: 10px;\n  color: var(--mj-text-muted);\n  flex-shrink: 0;\n  transition: transform .15s, color .15s;\n}\n\n.pg-record-link[_ngcontent-%COMP%]:hover   .pg-record-open-icon[_ngcontent-%COMP%] {\n  transform: translateY(-1px) translateX(1px);\n  color: var(--mj-text-primary);\n}\n\n.pg-record-id[_ngcontent-%COMP%] {\n  font-size: 11px;\n  color: var(--mj-text-muted);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.pg-score-cell[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  height: 100%;\n  min-width: 0;\n}\n\n.pg-score-bar[_ngcontent-%COMP%] {\n  flex: 1;\n  height: 8px;\n  border-radius: var(--mj-radius-full);\n  background: var(--mj-bg-surface-sunken);\n  overflow: hidden;\n}\n\n.pg-score-fill[_ngcontent-%COMP%] {\n  display: block;\n  height: 100%;\n  border-radius: var(--mj-radius-full);\n}\n\n.pg-score-fill.risk-high[_ngcontent-%COMP%], \n.pg-score-fill.badge-red[_ngcontent-%COMP%] { background: var(--mj-status-error); }\n.pg-score-fill.risk-medium[_ngcontent-%COMP%], \n.pg-score-fill.badge-amber[_ngcontent-%COMP%] { background: var(--mj-status-warning); }\n.pg-score-fill.risk-low[_ngcontent-%COMP%], \n.pg-score-fill.badge-green[_ngcontent-%COMP%] { background: var(--mj-status-success); }\n.pg-score-fill.badge-blue[_ngcontent-%COMP%] { background: var(--mj-brand-primary); }\n.pg-score-fill.badge-gray[_ngcontent-%COMP%] { background: var(--mj-text-muted); }\n\n.pg-score-val[_ngcontent-%COMP%] {\n  font-weight: 700;\n  font-size: var(--mj-text-xs);\n  font-variant-numeric: tabular-nums;\n  min-width: 44px;\n  text-align: right;\n}\n\n.pg-score-val.risk-high[_ngcontent-%COMP%], \n.pg-score-val.badge-red[_ngcontent-%COMP%] { color: var(--mj-status-error-text, var(--mj-status-error)); }\n.pg-score-val.risk-medium[_ngcontent-%COMP%], \n.pg-score-val.badge-amber[_ngcontent-%COMP%] { color: var(--mj-status-warning-text, var(--mj-status-warning)); }\n.pg-score-val.risk-low[_ngcontent-%COMP%], \n.pg-score-val.badge-green[_ngcontent-%COMP%] { color: var(--mj-status-success-text, var(--mj-status-success)); }\n.pg-score-val.badge-blue[_ngcontent-%COMP%] { color: var(--mj-brand-primary); }\n.pg-score-val.badge-gray[_ngcontent-%COMP%] { color: var(--mj-text-muted); }\n\n.pg-drivers-cell[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  height: 100%;\n  overflow: hidden;\n  flex-wrap: nowrap;\n}\n\n.pg-action-btn[_ngcontent-%COMP%] {\n  background: transparent;\n  border: none;\n  cursor: pointer;\n  padding: 6px 8px;\n  border-radius: 6px;\n  color: var(--mj-text-muted);\n  font-size: 12px;\n  transition: all .15s;\n}\n\n.pg-action-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-brand-primary);\n}\n\n\n.pg-footer[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 8px 12px;\n  background: var(--mj-bg-surface-card);\n  border-top: 1px solid var(--mj-border-subtle);\n  font-size: var(--mj-text-xs);\n  color: var(--mj-text-muted);\n}\n\n\n.pg-chart-container[_ngcontent-%COMP%] {\n  flex: 1;\n  min-height: 0;\n  overflow-y: auto;\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  padding: 4px 0 12px;\n}\n\n.pg-chart-cards[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));\n  gap: 12px;\n}\n\n.pg-chart-card[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md);\n  padding: 14px 16px;\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  cursor: pointer;\n  transition: all .15s;\n}\n\n.pg-chart-card[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n}\n\n.pg-chart-card.total[_ngcontent-%COMP%] { border-left: 4px solid var(--mj-brand-primary); }\n.pg-chart-card.tier-high[_ngcontent-%COMP%] { border-left: 4px solid var(--mj-status-error); }\n.pg-chart-card.tier-medium[_ngcontent-%COMP%] { border-left: 4px solid var(--mj-status-warning); }\n.pg-chart-card.tier-low[_ngcontent-%COMP%] { border-left: 4px solid var(--mj-status-success); }\n\n.pg-chart-card-val[_ngcontent-%COMP%] {\n  font-size: var(--mj-text-xl);\n  font-weight: 700;\n  color: var(--mj-text-primary);\n}\n\n.pg-chart-card-lbl[_ngcontent-%COMP%] {\n  font-size: var(--mj-text-xs);\n  color: var(--mj-text-secondary);\n  font-weight: 600;\n}\n\n.pg-chart-card-sub[_ngcontent-%COMP%] {\n  font-size: 11px;\n  color: var(--mj-text-muted);\n}\n\n.pg-chart-section[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md);\n  padding: 18px 20px;\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n\n.pg-chart-section-title[_ngcontent-%COMP%] {\n  font-size: var(--mj-text-sm);\n  font-weight: 650;\n  color: var(--mj-text-primary);\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  flex-wrap: wrap;\n  gap: 8px;\n}\n\n.pg-chart-meta[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n\n.pg-clear-decile-btn[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-sunken);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-full);\n  padding: 2px 10px;\n  font-size: 11px;\n  font-weight: 600;\n  cursor: pointer;\n  color: var(--mj-text-secondary);\n  transition: all .15s;\n}\n\n.pg-clear-decile-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-primary);\n  border-color: var(--mj-border-subtle);\n}\n\n\n.pg-histogram[_ngcontent-%COMP%] {\n  position: relative;\n  width: 100%;\n  padding-top: 8px;\n  padding-bottom: 28px;\n}\n\n.pg-h-columns[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: flex-end;\n  justify-content: space-between;\n  gap: 8px;\n  height: 200px;\n  padding: 0 4px;\n  border-bottom: 2px solid var(--mj-border-default);\n}\n\n.pg-h-col[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: flex-end;\n  height: 100%;\n  cursor: pointer;\n  position: relative;\n  transition: transform .15s;\n  user-select: none;\n}\n\n.pg-h-col[_ngcontent-%COMP%]:hover {\n  transform: translateY(-2px);\n}\n\n.pg-h-count[_ngcontent-%COMP%] {\n  font-size: 11px;\n  font-weight: 700;\n  color: var(--mj-text-primary);\n  margin-bottom: 6px;\n  white-space: nowrap;\n  font-variant-numeric: tabular-nums;\n}\n\n.pg-h-bar-track[_ngcontent-%COMP%] {\n  width: 100%;\n  max-width: 52px;\n  display: flex;\n  align-items: flex-end;\n  justify-content: center;\n}\n\n.pg-h-bar[_ngcontent-%COMP%] {\n  width: 100%;\n  border-radius: 4px 4px 0 0;\n  transition: height .3s cubic-bezier(0.4, 0, 0.2, 1), opacity .15s, box-shadow .15s;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);\n}\n\n.pg-h-col[_ngcontent-%COMP%]:hover   .pg-h-bar[_ngcontent-%COMP%] {\n  filter: brightness(1.1);\n  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);\n}\n\n.pg-h-col.active[_ngcontent-%COMP%]   .pg-h-bar[_ngcontent-%COMP%] {\n  outline: 3px solid var(--mj-brand-primary);\n  outline-offset: 1px;\n}\n\n.pg-h-footer[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  margin-top: 8px;\n  position: absolute;\n  top: 100%;\n  left: 0;\n  right: 0;\n}\n\n.pg-h-range[_ngcontent-%COMP%] {\n  font-size: 10px;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n}\n\n.pg-h-pct[_ngcontent-%COMP%] {\n  font-size: 10px;\n  color: var(--mj-text-muted);\n}\n\n\n.pg-h-tooltip[_ngcontent-%COMP%] {\n  position: absolute;\n  bottom: calc(100% + 4px);\n  left: 50%;\n  transform: translateX(-50%);\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);\n  border-radius: var(--mj-radius-md);\n  padding: 8px 12px;\n  white-space: nowrap;\n  pointer-events: none;\n  opacity: 0;\n  visibility: hidden;\n  transition: opacity .15s, visibility .15s;\n  z-index: 50;\n}\n\n.pg-h-col[_ngcontent-%COMP%]:hover   .pg-h-tooltip[_ngcontent-%COMP%] {\n  opacity: 1;\n  visibility: visible;\n}\n\n.pg-h-tt-head[_ngcontent-%COMP%] {\n  font-size: 11px;\n  font-weight: 700;\n  color: var(--mj-text-primary);\n  margin-bottom: 2px;\n}\n\n.pg-h-tt-row[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 6px;\n  align-items: center;\n  font-size: 11px;\n}\n\n.pg-h-tt-val[_ngcontent-%COMP%] {\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.pg-h-tt-pct[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n}\n\n.pg-h-tt-badge[_ngcontent-%COMP%] {\n  font-size: 10px;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  margin-top: 3px;\n}\n\n.pg-h-tt-hint[_ngcontent-%COMP%] {\n  font-size: 9px;\n  color: var(--mj-text-muted);\n  font-style: italic;\n  margin-top: 4px;\n}\n\n\n.pg-detail-body[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n  padding: 18px 20px 32px;\n}\n\n.pg-detail-record-head[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 14px;\n  padding-bottom: 14px;\n  border-bottom: 1px solid var(--mj-border-subtle);\n}\n\n.pg-detail-record-info[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0 0 4px;\n  font-size: var(--mj-text-lg);\n  font-weight: 700;\n  color: var(--mj-text-primary);\n}\n\n.pg-detail-pred-card[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 20px;\n  padding: 16px 18px;\n  border-radius: var(--mj-radius-md);\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n}\n\n.pg-detail-score-circle[_ngcontent-%COMP%] {\n  width: 72px;\n  height: 72px;\n  border-radius: 50%;\n  display: grid;\n  place-items: center;\n  font-size: 19px;\n  font-weight: 800;\n  color: var(--mj-text-inverse);\n  flex-shrink: 0;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, .12);\n}\n\n.pg-detail-score-circle.risk-high[_ngcontent-%COMP%], \n.pg-detail-score-circle.badge-red[_ngcontent-%COMP%] { background: var(--mj-status-error); }\n.pg-detail-score-circle.risk-medium[_ngcontent-%COMP%], \n.pg-detail-score-circle.badge-amber[_ngcontent-%COMP%] { background: var(--mj-status-warning); }\n.pg-detail-score-circle.risk-low[_ngcontent-%COMP%], \n.pg-detail-score-circle.badge-green[_ngcontent-%COMP%] { background: var(--mj-status-success); }\n.pg-detail-score-circle.badge-blue[_ngcontent-%COMP%] { background: var(--mj-brand-primary); }\n.pg-detail-score-circle.badge-gray[_ngcontent-%COMP%] { background: var(--mj-text-muted); }\n\n.pg-detail-meta[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  flex: 1;\n}\n\n.pg-detail-meta-line[_ngcontent-%COMP%] {\n  font-size: var(--mj-text-sm);\n  color: var(--mj-text-primary);\n}\n\n.pg-detail-meta-sub[_ngcontent-%COMP%] {\n  font-size: var(--mj-text-xs);\n  color: var(--mj-text-muted);\n}\n\n.pg-detail-drivers-wrap[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n\n\n.pg-trendline-wrap[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  padding: 16px;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md);\n}\n\n.pg-trendline-svg[_ngcontent-%COMP%] {\n  width: 100%;\n  height: 180px;\n  overflow: visible;\n}\n\n.pg-history-table[_ngcontent-%COMP%] {\n  width: 100%;\n  border-collapse: collapse;\n  font-size: var(--mj-text-xs);\n  margin-top: 6px;\n}\n\n.pg-history-table[_ngcontent-%COMP%]   th[_ngcontent-%COMP%] {\n  text-align: left;\n  padding: 6px 8px;\n  border-bottom: 1px solid var(--mj-border-default);\n  color: var(--mj-text-muted);\n  font-weight: 600;\n  font-size: 11px;\n  text-transform: uppercase;\n  letter-spacing: .03em;\n}\n\n.pg-history-table[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {\n  padding: 7px 8px;\n  border-bottom: 1px solid var(--mj-border-subtle);\n  color: var(--mj-text-secondary);\n}\n\n.pg-history-table[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:last-child   td[_ngcontent-%COMP%] {\n  border-bottom: none;\n}\n\n.pg-delta-pill[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 3px;\n  font-weight: 700;\n  font-size: 11px;\n  padding: 1px 6px;\n  border-radius: var(--mj-radius-full);\n}\n\n.pg-delta-pill.up[_ngcontent-%COMP%] { background: var(--mj-status-error-bg); color: var(--mj-status-error-text); }\n.pg-delta-pill.down[_ngcontent-%COMP%] { background: var(--mj-status-success-bg); color: var(--mj-status-success-text); }\n.pg-delta-pill.neutral[_ngcontent-%COMP%] { background: var(--mj-bg-surface-sunken); color: var(--mj-text-muted); }\n\n\n.pg-chart-drilldown-section[_ngcontent-%COMP%] {\n  padding: 16px 18px;\n  gap: 12px;\n}\n\n.pg-chart-grid-host[_ngcontent-%COMP%] {\n  width: 100%;\n  height: 440px;\n  min-height: 320px;\n  border-radius: var(--mj-radius-sm);\n  overflow: hidden;\n  border: 1px solid var(--mj-border-default);\n}\n\n.pg-chart-ag-grid[_ngcontent-%COMP%] {\n  width: 100%;\n  height: 100%;\n}\n\n.pg-drilldown-footer[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: flex-end;\n  font-size: var(--mj-text-xs);\n  color: var(--mj-text-muted);\n  padding-top: 2px;\n}"], changeDetection: 0 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PSPredictionsGridComponent, [{
         type: Component,
@@ -2262,7 +2266,8 @@ export class PSPredictionsGridComponent extends BaseAngularComponent {
                     MJViewToggleComponent,
                     MjSlidePanelComponent,
                     AgGridModule,
-                ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ps-pred-grid-host\" [style.height]=\"height\">\n  <!-- \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 TOOLBAR \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <div class=\"pg-toolbar\">\n    <div class=\"pg-toolbar-left\">\n      <div class=\"pg-search-box\">\n        <i class=\"fa-solid fa-magnifying-glass\"></i>\n        <input\n          type=\"text\"\n          class=\"pg-search-input\"\n          placeholder=\"Filter records, outcome, factors...\"\n          [value]=\"searchText\"\n          (input)=\"onSearchInput($event)\" />\n        @if (searchText) {\n          <button type=\"button\" class=\"pg-search-clear\" (click)=\"clearSearch()\" title=\"Clear filter\">\n            <i class=\"fa-solid fa-xmark\"></i>\n          </button>\n        }\n      </div>\n\n      <div class=\"pg-tier-filters\">\n        <button\n          type=\"button\"\n          class=\"pg-tier-btn\"\n          [class.active]=\"selectedTier === 'all'\"\n          (click)=\"setTier('all')\">\n          All <span class=\"pg-count-pill\">({{ allRows.length | number }})</span>\n        </button>\n        @for (b of visibleBands; track b.key) {\n          <button\n            type=\"button\"\n            class=\"pg-tier-btn\"\n            [class.active]=\"selectedTier === b.key\"\n            (click)=\"setTier(b.key)\">\n            {{ b.label }} <span class=\"pg-count-pill\">({{ b.count | number }})</span>\n          </button>\n        }\n\n        @if (selectedDecileIndex !== null) {\n          <div class=\"pg-decile-pill\">\n            <i class=\"fa-solid fa-filter\"></i>\n            <span>Decile {{ selectedDecileLabel }}</span>\n            <button type=\"button\" (click)=\"clearDecileFilter()\" title=\"Clear decile filter\"><i class=\"fa-solid fa-xmark\"></i></button>\n          </div>\n        }\n      </div>\n    </div>\n\n    <div class=\"pg-toolbar-right\">\n      <mj-view-toggle\n        [Options]=\"viewOptions\"\n        [ActiveKey]=\"activeView\"\n        (KeyChange)=\"onViewToggle($event)\">\n      </mj-view-toggle>\n\n      <button\n        mjButton\n        variant=\"secondary\"\n        size=\"sm\"\n        [disabled]=\"allRows.length === 0\"\n        (click)=\"exportCSV()\">\n        <i class=\"fa-solid fa-file-export\"></i> Export\n      </button>\n    </div>\n  </div>\n\n  <!-- \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 MAIN VIEW CONTAINER \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <div class=\"pg-view-container\">\n    @if (isLoading) {\n      <mj-loading text=\"Loading predictions...\" size=\"medium\"></mj-loading>\n    } @else if (loadError) {\n      <div class=\"ps-load-error\" role=\"alert\">\n        <i class=\"fa-solid fa-triangle-exclamation\"></i>\n        <div class=\"ps-load-error-text\">\n          <strong>Couldn't load predictions</strong>\n          <span class=\"ps-load-error-detail\">{{ loadError }}</span>\n        </div>\n        <button mjButton variant=\"secondary\" size=\"sm\" (click)=\"reload()\"><i class=\"fa-solid fa-rotate-right\"></i> Try again</button>\n      </div>\n    } @else if (allRows.length === 0) {\n      <div class=\"ps-empty\" style=\"padding: 32px\">\n        <span class=\"ps-empty-ico\"><i class=\"fa-solid fa-chart-line\"></i></span>\n        <h3>No predictions available</h3>\n        <p>Run this model from Models in Production or wait for the scheduled job to produce predictions.</p>\n      </div>\n    } @else {\n      <!-- GRID VIEW -->\n      @if (activeView === 'grid') {\n        <ag-grid-angular\n          class=\"pg-grid\"\n          [theme]=\"Theme\"\n          [columnDefs]=\"columnDefs\"\n          [defaultColDef]=\"defaultColDef\"\n          [gridOptions]=\"GridOptions\"\n          [rowData]=\"filteredRows\"\n          (gridReady)=\"onGridReady($event)\"\n          (rowClicked)=\"onRowClicked($event)\"\n          (cellClicked)=\"onCellClicked($event)\">\n        </ag-grid-angular>\n\n        <div class=\"pg-footer\">\n          <span>Showing <strong>{{ filteredRows.length }}</strong> of {{ allRows.length }} predictions</span>\n          @if (selectedTier !== 'all' || searchText) {\n            <span class=\"ps-muted\">Filtered by {{ selectedTier !== 'all' ? selectedTier + ' risk' : '' }}{{ searchText ? ' query \"' + searchText + '\"' : '' }}</span>\n          }\n          <span class=\"ps-muted\">Click any row to inspect details & score history</span>\n        </div>\n      }\n\n      <!-- CHART VIEW -->\n      @if (activeView === 'chart') {\n        <div class=\"pg-chart-container\">\n          <!-- KPI Summary Cards -->\n          <div class=\"pg-chart-cards\">\n            <div class=\"pg-chart-card total\">\n              <span class=\"pg-chart-card-lbl\"><i class=\"fa-solid fa-users ps-muted\"></i> Scored Cohort</span>\n              <span class=\"pg-chart-card-val\">{{ allRows.length | number }}</span>\n              <span class=\"pg-chart-card-sub\">Total records</span>\n            </div>\n            @for (b of visibleBands; track b.key) {\n              <div class=\"pg-chart-card\" [class]=\"'tier-' + b.key\" (click)=\"setTierAndGrid(b.key)\">\n                <span class=\"pg-chart-card-lbl\">\n                  @if (b.icon) {\n                    <i class=\"fa-solid {{ b.icon }}\" [style.color]=\"getBadgeColorVar(b.badgeColor)\"></i>\n                  }\n                  {{ b.label }}\n                </span>\n                <span class=\"pg-chart-card-val\" [style.color]=\"getBadgeColorVar(b.badgeColor)\">\n                  {{ b.count | number }}\n                </span>\n                <span class=\"pg-chart-card-sub\">{{ b.pct }}% of cohort (avg {{ b.avgScoreFormatted }} {{ outcomeConfig.ScoreLabel }})</span>\n              </div>\n            }\n          </div>\n\n          <!-- Score Distribution Histogram -->\n          <div class=\"pg-chart-section\">\n            <div class=\"pg-chart-section-title\">\n              <div style=\"display:flex;align-items:center;gap:8px\">\n                <i class=\"fa-solid fa-chart-simple ps-muted\"></i>\n                <span>{{ outcomeConfig.ScoreLabel }} Distribution (10 Bins)</span>\n              </div>\n              <div class=\"pg-chart-meta\">\n                <span class=\"ps-small ps-muted\">Cohort Mean: <strong>{{ meanScoreFormatted }}</strong></span>\n                @if (selectedDecileIndex !== null) {\n                  <button type=\"button\" class=\"pg-clear-decile-btn\" (click)=\"clearDecileFilter()\">\n                    <i class=\"fa-solid fa-xmark\"></i> Clear Decile Filter\n                  </button>\n                }\n              </div>\n            </div>\n\n            <!-- Modern Interactive Flex Histogram -->\n            <div class=\"pg-histogram\">\n              <div class=\"pg-h-columns\">\n                @for (b of histogramBins; track b.label) {\n                  <div\n                    class=\"pg-h-col\"\n                    [class.active]=\"selectedDecileIndex === b.idx\"\n                    [class.empty]=\"b.count === 0\"\n                    (click)=\"selectDecile(b.idx)\">\n\n                    <!-- Count label above bar -->\n                    <span class=\"pg-h-count\" [title]=\"b.count + ' records'\">\n                      {{ b.count > 0 ? (b.count | number) : '0' }}\n                    </span>\n\n                    <!-- Bar track & fill -->\n                    <div class=\"pg-h-bar-track\">\n                      <div\n                        class=\"pg-h-bar\"\n                        [style.height.px]=\"b.height\"\n                        [style.background]=\"b.color\">\n                      </div>\n                    </div>\n\n                    <!-- Footer labels -->\n                    <div class=\"pg-h-footer\">\n                      <span class=\"pg-h-range\">{{ b.shortLabel }}</span>\n                      <span class=\"pg-h-pct\">{{ b.pctFormatted }}</span>\n                    </div>\n\n                    <!-- Tooltip card -->\n                    <div class=\"pg-h-tooltip\">\n                      <div class=\"pg-h-tt-head\">{{ b.label }} {{ outcomeConfig.ScoreLabel }}</div>\n                      <div class=\"pg-h-tt-row\">\n                        <span class=\"pg-h-tt-val\">{{ b.count | number }} records</span>\n                        <span class=\"pg-h-tt-pct\">({{ b.pctFormatted }} of cohort)</span>\n                      </div>\n                      <div class=\"pg-h-tt-badge\" [style.color]=\"b.color\">{{ b.riskLabel }}</div>\n                      <div class=\"pg-h-tt-hint\">{{ selectedDecileIndex === b.idx ? 'Click to clear filter' : 'Click to filter grid' }}</div>\n                    </div>\n                  </div>\n                }\n              </div>\n            </div>\n          </div>\n\n          <!-- Predicted Class Breakdown (for Classification) -->\n          @if (classBreakdown.length > 0) {\n            <div class=\"pg-chart-section\">\n              <div class=\"pg-chart-section-title\">\n                <span><i class=\"fa-solid fa-layer-group ps-muted\"></i> Predicted Outcome Classes</span>\n              </div>\n              <div style=\"display:flex;height:24px;border-radius:var(--mj-radius-full);overflow:hidden;background:var(--mj-bg-surface-sunken);margin-bottom:8px\">\n                @for (c of classBreakdown; track c.name) {\n                  <div\n                    [style.width.%]=\"c.pct\"\n                    [style.background]=\"c.color\"\n                    [title]=\"c.name + ': ' + c.count + ' (' + c.pct + '%)'\">\n                  </div>\n                }\n              </div>\n              <div style=\"display:flex;gap:16px;flex-wrap:wrap\">\n                @for (c of classBreakdown; track c.name) {\n                  <div style=\"display:flex;align-items:center;gap:6px;font-size:var(--mj-text-xs)\">\n                    <span [style.background]=\"c.color\" style=\"width:10px;height:10px;border-radius:2px;display:inline-block\"></span>\n                    <strong>{{ c.name }}</strong>\n                    <span class=\"ps-muted\">{{ c.count }} ({{ c.pct }}%)</span>\n                  </div>\n                }\n              </div>\n            </div>\n          }\n\n          <!-- Segment Drilldown Grid Section \u2014 Only shown when a decile segment is selected -->\n          @if (selectedDecileIndex !== null) {\n            <div id=\"pg-drilldown-anchor\" class=\"pg-chart-section pg-chart-drilldown-section\">\n              <div class=\"pg-chart-section-title\">\n                <div style=\"display:flex;align-items:center;gap:8px\">\n                  <i class=\"fa-solid fa-table-list ps-muted\"></i>\n                  <span>\n                    Decile Drill-Down:\n                    <strong style=\"color:var(--mj-brand-primary)\">{{ selectedDecileLabel }}</strong>\n                    {{ outcomeConfig.ScoreLabel }}\n                    @if (histogramBins[selectedDecileIndex]) {\n                      <span class=\"ps-badge\" [style.color]=\"histogramBins[selectedDecileIndex].color\" style=\"margin-left:6px\">\n                        {{ histogramBins[selectedDecileIndex].riskLabel }}\n                      </span>\n                    }\n                  </span>\n                </div>\n                <div class=\"pg-chart-meta\">\n                  <span class=\"ps-small ps-muted\">\n                    Showing <strong>{{ filteredRows.length | number }}</strong> of {{ allRows.length | number }} records\n                  </span>\n                  <button type=\"button\" class=\"pg-clear-decile-btn\" (click)=\"clearDecileFilter()\">\n                    <i class=\"fa-solid fa-xmark\"></i> Show All Deciles\n                  </button>\n                </div>\n              </div>\n\n              <!-- Drill-Down AG Grid -->\n              <div class=\"pg-chart-grid-host\">\n                <ag-grid-angular\n                  class=\"pg-grid pg-chart-ag-grid\"\n                  [theme]=\"Theme\"\n                  [columnDefs]=\"columnDefs\"\n                  [defaultColDef]=\"defaultColDef\"\n                  [gridOptions]=\"chartGridOptions\"\n                  [rowData]=\"filteredRows\"\n                  (gridReady)=\"onChartGridReady($event)\"\n                  (rowClicked)=\"onRowClicked($event)\"\n                  (cellClicked)=\"onCellClicked($event)\">\n                </ag-grid-angular>\n              </div>\n\n              <div class=\"pg-drilldown-footer\">\n                <span class=\"ps-muted\">Click any row to inspect explainability drivers and score history in the slide-in drawer</span>\n              </div>\n            </div>\n          }\n        </div>\n      }\n    }\n  </div>\n\n  <!-- \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 SLIDE-IN DETAIL PANEL \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  @if (detailOpen && selectedRow) {\n    <mj-slide-panel\n      Mode=\"slide\"\n      Title=\"Record Prediction & Score History\"\n      [Resizable]=\"true\"\n      [WidthPx]=\"drawerWidthPx\"\n      (WidthChanged)=\"onDrawerWidthChanged($event)\"\n      (Closed)=\"closeDetail()\">\n\n      <div class=\"pg-detail-body\">\n        <!-- Record header -->\n        <div class=\"pg-detail-record-head\">\n          <div class=\"pg-detail-record-info\">\n            <h3>{{ selectedRow.recordName || selectedRow.recordId }}</h3>\n            <div style=\"display:flex;align-items:center;gap:8px\">\n              <span class=\"ps-badge blue\">{{ entityDisplayName || 'Entity Record' }}</span>\n              <span class=\"ps-mono ps-small ps-muted\">{{ selectedRow.recordId }}</span>\n            </div>\n          </div>\n          <div class=\"pg-detail-record-actions\" style=\"display:flex;gap:8px;align-items:center;flex-wrap:wrap\">\n            <button\n              mjButton\n              variant=\"primary\"\n              size=\"sm\"\n              (click)=\"drillThrough(selectedRow)\"\n              title=\"Open record in Explorer\">\n              <i class=\"fa-solid fa-arrow-up-right-from-square\"></i> Open {{ entityDisplayName || 'Record' }}\n            </button>\n            @if (subjectEntityName && subjectRecordId) {\n              <button\n                mjButton\n                variant=\"secondary\"\n                size=\"sm\"\n                (click)=\"openSubjectRecord()\"\n                title=\"Open subject record (e.g. Person, Account) in Explorer\">\n                <i class=\"fa-solid fa-user\"></i> Open {{ subjectEntityName.replace('MJ_BizApps_Common: ', '').replace('MJ_BizApps_', '') }} ({{ subjectRecordName || 'Profile' }})\n              </button>\n            }\n          </div>\n        </div>\n\n        <!-- Prediction Summary Card -->\n        <div class=\"pg-detail-pred-card\">\n          <div class=\"pg-detail-score-circle\" [class]=\"'badge-' + (selectedRow.badgeColor || 'gray')\">\n            {{ selectedRow.scoreFormatted }}\n          </div>\n          <div class=\"pg-detail-meta\">\n            <div class=\"pg-detail-meta-line\">\n              <strong>{{ outcomeConfig.StatusLabel }}:</strong>\n              <span class=\"ps-badge\" [class]=\"selectedRow.badgeColor || 'gray'\" style=\"margin-left:6px\">\n                @if (selectedRow.icon) {\n                  <i class=\"fa-solid {{ selectedRow.icon }}\"></i>\n                }\n                {{ selectedRow.status || selectedRow.band }}\n              </span>\n            </div>\n            @if (selectedRow.class) {\n              <div class=\"pg-detail-meta-line\">\n                <strong>Predicted Outcome:</strong>\n                <span class=\"ps-badge\" [class]=\"getOutcomeBadgeClass(selectedRow.class)\">\n                  {{ selectedRow.class }}\n                </span>\n              </div>\n            }\n            <div class=\"pg-detail-meta-line\">\n              <strong>{{ outcomeConfig.ScoreLabel }}:</strong>\n              <span style=\"font-weight:700;color:var(--mj-text-primary)\">{{ selectedRow.scoreFormatted }}</span>\n            </div>\n            <div class=\"pg-detail-meta-sub\">\n              Scored: {{ selectedRow.scoredAtDate ? (selectedRow.scoredAtDate | date:'medium') : '\u2014' }}\n            </div>\n          </div>\n        </div>\n\n        <!-- Explainability: Local Feature Drivers -->\n        <div class=\"pg-detail-drivers-wrap\">\n          <div class=\"ps-section-title\">\n            <i class=\"fa-solid fa-lightbulb\" style=\"color:var(--mj-status-warning)\"></i> Key Decision Drivers (Explainability)\n          </div>\n          @if (!selectedRow.drivers || selectedRow.drivers.length === 0) {\n            <div class=\"ps-small ps-muted\">No individual driver breakdown was recorded for this row.</div>\n          } @else {\n            <div class=\"pg-detail-drivers-list\">\n              @for (d of selectedRow.drivers; track d.label) {\n                <div class=\"pg-detail-driver-item\">\n                  <div class=\"pg-detail-driver-label\">\n                    <i class=\"fa-solid\" [class.fa-arrow-up]=\"d.up\" [class.fa-arrow-down]=\"!d.up\" [style.color]=\"d.up ? 'var(--mj-status-error)' : 'var(--mj-status-success)'\"></i>\n                    {{ d.label }}\n                  </div>\n                  <span class=\"ps-badge\" [class]=\"d.up ? 'red' : 'green'\">\n                    {{ d.up ? 'Increases Risk' : 'Lowers Risk' }}\n                  </span>\n                </div>\n              }\n            </div>\n          }\n        </div>\n\n        <!-- Historical Trendline across Runs -->\n        <div class=\"pg-trendline-wrap\">\n          <div class=\"ps-section-title\" style=\"display:flex;align-items:center;justify-content:space-between\">\n            <span><i class=\"fa-solid fa-clock-rotate-left ps-muted\"></i> Historical Score Trendline</span>\n            <span class=\"ps-small ps-muted\">{{ historyPoints.length }} run{{ historyPoints.length === 1 ? '' : 's' }} recorded</span>\n          </div>\n\n          @if (historyLoading) {\n            <mj-loading text=\"Loading score history...\" size=\"small\"></mj-loading>\n          } @else if (historyPoints.length > 1) {\n            <!-- Interactive SVG Trendline -->\n            <svg class=\"pg-trendline-svg\" viewBox=\"0 0 540 160\" preserveAspectRatio=\"none\">\n              <!-- Background grid lines -->\n              <line x1=\"40\" y1=\"20\" x2=\"520\" y2=\"20\" stroke=\"var(--mj-border-subtle)\" stroke-dasharray=\"3,3\" />\n              <line x1=\"40\" y1=\"75\" x2=\"520\" y2=\"75\" stroke=\"var(--mj-border-subtle)\" stroke-dasharray=\"3,3\" />\n              <line x1=\"40\" y1=\"130\" x2=\"520\" y2=\"130\" stroke=\"var(--mj-border-default)\" />\n\n              <!-- Y-axis labels -->\n              <text x=\"32\" y=\"24\" font-size=\"10\" text-anchor=\"end\" fill=\"var(--mj-text-muted)\">100%</text>\n              <text x=\"32\" y=\"79\" font-size=\"10\" text-anchor=\"end\" fill=\"var(--mj-text-muted)\">50%</text>\n              <text x=\"32\" y=\"134\" font-size=\"10\" text-anchor=\"end\" fill=\"var(--mj-text-muted)\">0%</text>\n\n              <!-- Filled area under curve -->\n              <polygon [attr.points]=\"trendlineAreaPoints\" fill=\"color-mix(in srgb, var(--mj-brand-primary) 12%, transparent)\" />\n\n              <!-- Trend line path -->\n              <polyline [attr.points]=\"trendlineLinePoints\" fill=\"none\" stroke=\"var(--mj-brand-primary)\" stroke-width=\"2.5\" />\n\n              <!-- Data points -->\n              @for (p of trendlinePlotPoints; track p.runId) {\n                <circle\n                  [attr.cx]=\"p.x\"\n                  [attr.cy]=\"p.y\"\n                  r=\"5\"\n                  [attr.fill]=\"p.color\"\n                  stroke=\"var(--mj-bg-surface)\"\n                  stroke-width=\"2\">\n                  <title>{{ p.dateStr }}: {{ p.scoreFormatted }} ({{ p.class || 'No class' }})</title>\n                </circle>\n                <text\n                  [attr.cx]=\"p.x\"\n                  [attr.cy]=\"p.y - 9\"\n                  font-size=\"10\"\n                  font-weight=\"700\"\n                  text-anchor=\"middle\"\n                  fill=\"var(--mj-text-primary)\">\n                  {{ p.scoreFormatted }}\n                </text>\n              }\n            </svg>\n\n            <!-- Runs Table -->\n            <table class=\"pg-history-table\">\n              <thead>\n                <tr>\n                  <th>When</th>\n                  <th>Status</th>\n                  <th>Score</th>\n                  <th>Change</th>\n                  <th>Class</th>\n                </tr>\n              </thead>\n              <tbody>\n                @for (pt of historyPoints; track pt.runId) {\n                  <tr>\n                    <td>{{ pt.RunDate | date:'short' }}</td>\n                    <td><span class=\"ps-badge\" [class]=\"pt.status === 'Succeeded' ? 'green' : 'gray'\">{{ pt.status }}</span></td>\n                    <td><strong class=\"ps-mono\">{{ pt.ScoreFormatted }}</strong></td>\n                    <td>\n                      @if (pt.Delta == null) {\n                        <span class=\"pg-delta-pill neutral\">Baseline</span>\n                      } @else if (pt.Delta > 0.005) {\n                        <span class=\"pg-delta-pill up\"><i class=\"fa-solid fa-arrow-up\"></i> +{{ (pt.Delta * 100).toFixed(1) }}%</span>\n                      } @else if (pt.Delta < -0.005) {\n                        <span class=\"pg-delta-pill down\"><i class=\"fa-solid fa-arrow-down\"></i> {{ (pt.Delta * 100).toFixed(1) }}%</span>\n                      } @else {\n                        <span class=\"pg-delta-pill neutral\">0%</span>\n                      }\n                    </td>\n                    <td>{{ pt.class || '\u2014' }}</td>\n                  </tr>\n                }\n              </tbody>\n            </table>\n          } @else if (historyPoints.length === 1) {\n            <div class=\"ps-small ps-muted\">\n              This record has been scored once so far ({{ historyPoints[0].RunDate | date:'medium' }}). As more runs occur over time, the score trendline will track changes here.\n            </div>\n          } @else {\n            <div class=\"ps-small ps-muted\">No historical runs found for this record.</div>\n          }\n        </div>\n      </div>\n    </mj-slide-panel>\n  }\n</div>\n", styles: ["/* ============================================================================\n   Predictive Studio \u2014 shared panel styles (design-token compliant)\n   Maps the mockup design system onto MemberJunction semantic --mj-* tokens.\n   Loaded by every PS panel component (styleUrls) under ViewEncapsulation.None,\n   so the class names are global within the PS dashboard subtree.\n   No hardcoded colors except the intentional categorical node/algorithm palette\n   (declared once as --ps-* custom props below) which must stay distinct across\n   light/dark to remain readable as diagram accents.\n   ============================================================================ */\n\n/* Categorical accents for DAG node types + algorithm chips. These are\n   data-visualization colors that must remain distinct regardless of theme\n   (allowed exception #3 in the design-token rules). */\n.ps-panel {\n  --ps-node-source: #6b7280;\n  --ps-node-feature: #2050c8;\n  --ps-node-embedding: #7b3ff0;\n  --ps-node-target: #1f9d57;\n  --ps-node-algorithm: #d98213;\n  /* budget-gauge categorical accents (reuse the node palette so light/dark stay distinct) */\n  --ps-gauge-cost: var(--ps-node-algorithm);\n  --ps-gauge-iterations: var(--ps-node-feature);\n}\n\n.ps-panel {\n  display: block;\n  height: 100%;\n}\n\n/* ---- generic layout helpers ---- */\n.ps-row { display: flex; gap: 16px; }\n.ps-col { display: flex; flex-direction: column; gap: 16px; }\n.ps-wrap { flex-wrap: wrap; }\n.ps-spacer { flex: 1; }\n.ps-muted { color: var(--mj-text-muted); }\n.ps-small { font-size: 12.5px; }\n.ps-mono { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: 12.5px; }\n.ps-section-title {\n  font-size: 12px; text-transform: uppercase; letter-spacing: .06em;\n  color: var(--mj-text-muted); margin: 4px 0 2px; font-weight: 700;\n}\n\n/* ---- cards ---- */\n.ps-card {\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  overflow: hidden;\n}\n.ps-card-head {\n  display: flex; align-items: center; gap: 10px;\n  padding: 14px 16px; border-bottom: 1px solid var(--mj-border-subtle);\n}\n.ps-card-head h3 { font-size: 14.5px; margin: 0; font-weight: 650; color: var(--mj-text-primary); }\n.ps-card-body { padding: 16px; }\n\n/* ---- KPI tiles ---- */\n.ps-kpi {\n  background: var(--mj-bg-surface); border: 1px solid var(--mj-border-default);\n  border-radius: 8px; padding: 16px 18px;\n}\n.ps-kpi .label { font-size: 12px; color: var(--mj-text-muted); font-weight: 600; }\n.ps-kpi .val { font-size: 26px; font-weight: 720; letter-spacing: -.02em; margin-top: 2px; color: var(--mj-text-primary); }\n\n/* ---- badges ---- */\n.ps-badge {\n  display: inline-flex; align-items: center; gap: 5px;\n  padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 650; line-height: 1.7;\n}\n.ps-badge.gray { background: var(--mj-bg-surface-sunken); color: var(--mj-text-secondary); }\n.ps-badge.blue { background: var(--mj-status-info-bg); color: var(--mj-status-info-text); }\n.ps-badge.green { background: var(--mj-status-success-bg); color: var(--mj-status-success-text); }\n.ps-badge.amber { background: var(--mj-status-warning-bg); color: var(--mj-status-warning-text); }\n.ps-badge.red { background: var(--mj-status-error-bg); color: var(--mj-status-error-text); }\n.ps-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }\n\n/* recommendation-level chips (the ranking matrix payoff) */\n.ps-lvl {\n  display: inline-flex; align-items: center; justify-content: center;\n  min-width: 92px; padding: 4px 10px; border-radius: 7px;\n  font-weight: 650; font-size: 11.5px; color: var(--mj-text-inverse);\n}\n.ps-lvl-Primary { background: var(--mj-status-success); }\n.ps-lvl-Strong { background: var(--mj-status-info); }\n.ps-lvl-Viable { background: var(--mj-status-warning); }\n.ps-lvl-Weak { background: var(--mj-text-disabled); }\n.ps-lvl-NotRecommended { background: var(--mj-bg-surface-sunken); color: var(--mj-text-muted); }\n\n/* ---- tags ---- */\n.ps-tag {\n  display: inline-block; padding: 2px 8px; border-radius: 6px;\n  background: var(--mj-bg-surface-sunken); color: var(--mj-text-secondary);\n  font-size: 11.5px; font-weight: 600;\n}\n.ps-tag.muted { opacity: .6; }\n.ps-divider { height: 1px; background: var(--mj-border-subtle); margin: 8px 0; }\n\n/* ---- tables ---- */\n.ps-table { width: 100%; border-collapse: collapse; font-size: 13px; }\n.ps-table th {\n  text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em;\n  color: var(--mj-text-muted); font-weight: 700; padding: 9px 12px;\n  border-bottom: 1px solid var(--mj-border-default);\n}\n.ps-table td { padding: 11px 12px; border-bottom: 1px solid var(--mj-border-subtle); color: var(--mj-text-primary); }\n.ps-table tr:hover td { background: var(--mj-bg-surface-hover); }\n.ps-table .num { text-align: right; font-variant-numeric: tabular-nums; }\n\n.ps-rank {\n  width: 22px; height: 22px; border-radius: 6px; background: var(--mj-bg-surface-sunken);\n  display: inline-grid; place-items: center; font-weight: 700; font-size: 11.5px; color: var(--mj-text-secondary);\n}\n.ps-rank.gold { background: var(--mj-status-warning-bg); color: var(--mj-status-warning-text); }\n\n/* ---- progress bars ---- */\n.ps-bar { height: 8px; border-radius: 999px; background: var(--mj-bg-surface-sunken); overflow: hidden; }\n.ps-bar > span { display: block; height: 100%; border-radius: 999px; background: var(--mj-brand-primary); }\n.ps-bar.warn > span { background: var(--mj-status-warning); }\n.ps-bar.run > span { background: var(--mj-brand-primary); }\n\n.ps-fbar { display: grid; grid-template-columns: minmax(150px, 1.3fr) 2fr 56px; align-items: center; gap: 14px; padding: 8px 0; }\n.ps-fbar + .ps-fbar { border-top: 1px solid var(--mj-border-subtle); }\n.ps-fbar .track { height: 10px; border-radius: var(--mj-radius-full); background: var(--mj-bg-surface-sunken); overflow: hidden; }\n.ps-fbar .track > span { display: block; height: 100%; border-radius: var(--mj-radius-full); background: var(--mj-brand-primary); }\n.ps-fbar .track > span.warn { background: var(--mj-status-warning); }\n.ps-fbar .name { color: var(--mj-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.ps-fbar > .ps-mono { text-align: right; color: var(--mj-text-secondary); font-variant-numeric: tabular-nums; }\n\n/* gauge */\n.ps-gauge {\n  position: relative; width: 64px; height: 64px; border-radius: 50%; flex: 0 0 auto;\n  background: conic-gradient(var(--ps-gauge-color, var(--mj-brand-primary)) calc(var(--ps-p, 40) * 1%), var(--mj-bg-surface-sunken) 0);\n  display: grid; place-items: center;\n}\n.ps-gauge::after { content: ''; position: absolute; inset: 9px; background: var(--mj-bg-surface); border-radius: 50%; }\n.ps-gauge .g-val { position: relative; font-weight: 720; font-size: 14px; color: var(--mj-text-primary); }\n\n/* warning / info callouts */\n.ps-callout { display: flex; gap: 11px; padding: 12px 14px; border-radius: 10px; border: 1px solid; }\n.ps-callout.warn { background: var(--mj-status-warning-bg); border-color: var(--mj-status-warning-border); color: var(--mj-status-warning-text); }\n.ps-callout.info { background: var(--mj-status-info-bg); border-color: var(--mj-status-info-border); color: var(--mj-status-info-text); }\n.ps-callout.success { background: var(--mj-status-success-bg); border-color: var(--mj-status-success-border); color: var(--mj-status-success-text); }\n.ps-callout i { font-size: 16px; margin-top: 1px; }\n\n/* lifecycle stepper */\n.ps-stepper { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }\n.ps-step { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--mj-text-muted); }\n.ps-step .pip {\n  width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--mj-border-strong);\n  display: grid; place-items: center; font-size: 11px;\n}\n.ps-step.done { color: var(--mj-status-success-text); }\n.ps-step.done .pip { background: var(--mj-status-success); border-color: var(--mj-status-success); color: var(--mj-text-inverse); }\n.ps-step.curr { color: var(--mj-brand-primary); }\n.ps-step.curr .pip { border-color: var(--mj-brand-primary); color: var(--mj-brand-primary); }\n.ps-step .ln { width: 26px; height: 2px; background: var(--mj-border-strong); }\n\n/* ---- DAG flow canvas ---- */\n.ps-flow {\n  position: relative;\n  background:\n    linear-gradient(var(--mj-border-subtle) 1px, transparent 1px) 0 0 / 22px 22px,\n    linear-gradient(90deg, var(--mj-border-subtle) 1px, transparent 1px) 0 0 / 22px 22px,\n    var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default); border-radius: 10px;\n  min-height: 620px; overflow: hidden;\n}\n.ps-node {\n  position: absolute; width: 190px; background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-strong); border-left-width: 3px; border-radius: 8px;\n  cursor: pointer;\n}\n.ps-node .nh {\n  display: flex; align-items: center; gap: 8px; padding: 9px 11px;\n  border-bottom: 1px solid var(--mj-border-subtle); font-weight: 650; font-size: 12.5px; color: var(--mj-text-primary);\n}\n.ps-node .nh i.tile {\n  width: 24px; height: 24px; border-radius: 6px; display: grid; place-items: center;\n  color: var(--mj-text-inverse); font-size: 12px; flex: 0 0 auto;\n}\n.ps-node .nh .ps-tag { margin-left: auto; }\n.ps-node .nb { padding: 9px 11px; font-size: 12px; color: var(--mj-text-secondary); }\n.ps-node .nb-row { display: flex; justify-content: space-between; gap: 8px; padding: 2px 0; }\n.ps-node .nb-row .k { color: var(--mj-text-muted); }\n.ps-node.src { border-left-color: var(--ps-node-source); }\n.ps-node.src .nh i.tile { background: var(--ps-node-source); }\n.ps-node.feat { border-left-color: var(--ps-node-feature); }\n.ps-node.feat .nh i.tile { background: var(--ps-node-feature); }\n.ps-node.emb { border-left-color: var(--ps-node-embedding); }\n.ps-node.emb .nh i.tile { background: var(--ps-node-embedding); }\n.ps-node.target { border-left-color: var(--ps-node-target); }\n.ps-node.target .nh i.tile { background: var(--ps-node-target); }\n.ps-node.algo { border-left-color: var(--ps-node-algorithm); }\n.ps-node.algo .nh i.tile { background: var(--ps-node-algorithm); }\n.ps-node.output { border-left-color: var(--mj-status-success); }\n.ps-node.output .nh i.tile { background: var(--mj-status-success); }\n.ps-node.selected {\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 18%, transparent);\n}\n.ps-node .port {\n  position: absolute; width: 11px; height: 11px; border-radius: 50%;\n  background: var(--mj-bg-surface); border: 2px solid var(--mj-brand-primary);\n  top: 50%; transform: translateY(-50%);\n}\n.ps-node .port.in { left: -6px; }\n.ps-node .port.out { right: -6px; }\nsvg.ps-edges { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }\nsvg.ps-edges path { stroke: color-mix(in srgb, var(--mj-brand-primary) 45%, transparent); stroke-width: 2; fill: none; }\n\n/* palette chips */\n.ps-pchip {\n  display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 8px;\n  border: 1px dashed var(--mj-border-strong); background: var(--mj-bg-surface);\n  font-size: 12.5px; font-weight: 600; color: var(--mj-text-secondary); cursor: grab;\n}\n.ps-pchip i { font-size: 12px; color: var(--mj-text-inverse); width: 20px; height: 20px; border-radius: 5px; display: grid; place-items: center; }\n.ps-pchip.s i { background: var(--ps-node-source); }\n.ps-pchip.f i { background: var(--ps-node-feature); }\n.ps-pchip.e i { background: var(--ps-node-embedding); }\n.ps-pchip.t i { background: var(--ps-node-target); }\n.ps-pchip.a i { background: var(--ps-node-algorithm); }\n\n/* segmented control */\n.ps-seg { display: inline-flex; border: 1px solid var(--mj-border-default); border-radius: 8px; overflow: hidden; }\n.ps-seg button {\n  border: none; background: var(--mj-bg-surface); color: var(--mj-text-secondary);\n  padding: 6px 12px; font-size: 12.5px; font-weight: 600; cursor: pointer;\n  border-right: 1px solid var(--mj-border-default);\n}\n.ps-seg button:last-child { border-right: none; }\n.ps-seg button.on { background: var(--mj-brand-primary); color: var(--mj-text-inverse); }\n\n/* field control */\n.ps-field { margin-bottom: 14px; }\n.ps-field > label {\n  display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .04em;\n  color: var(--mj-text-muted); font-weight: 700; margin-bottom: 6px;\n}\n.ps-input {\n  width: 100%; padding: 8px 10px; border: 1px solid var(--mj-border-default);\n  border-radius: 6px; font-size: 13px; background: var(--mj-bg-surface); color: var(--mj-text-primary);\n  box-sizing: border-box;\n}\n.ps-input:focus { outline: none; border-color: var(--mj-brand-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 12%, transparent); }\n\n/* loading container */\n.ps-loading { display: flex; align-items: center; justify-content: center; padding: 60px 0; }\n\n/* ---- empty / prompt states ---- */\n.ps-empty {\n  display: flex; flex-direction: column; align-items: center; justify-content: center;\n  text-align: center; gap: 10px; padding: 56px 24px; color: var(--mj-text-muted);\n}\n.ps-empty .ps-empty-ico {\n  width: 60px; height: 60px; border-radius: 16px; display: grid; place-items: center;\n  background: var(--mj-bg-surface-sunken); color: var(--mj-text-disabled); font-size: 24px;\n}\n.ps-empty h3 { margin: 4px 0 0; font-size: 16px; font-weight: 650; color: var(--mj-text-secondary); }\n.ps-empty p { margin: 0; max-width: 420px; font-size: 13px; line-height: 1.5; }\n\n/* ---- confirm modal ---- */\n.ps-modal-backdrop {\n  position: fixed; inset: 0; z-index: 1000;\n  background: var(--mj-bg-overlay);\n  display: flex; align-items: center; justify-content: center; padding: 24px;\n}\n.ps-modal {\n  width: 100%; max-width: 480px; background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default); border-radius: 14px;\n  box-shadow: var(--mj-shadow-lg, var(--mj-shadow-sm)); overflow: hidden;\n}\n.ps-modal-head {\n  display: flex; align-items: center; gap: 12px; padding: 18px 20px;\n  border-bottom: 1px solid var(--mj-border-subtle);\n}\n.ps-modal-head .ico {\n  width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center;\n  font-size: 16px; flex: 0 0 auto;\n  background: var(--mj-status-info-bg); color: var(--mj-status-info-text);\n}\n.ps-modal-head.warn .ico { background: var(--mj-status-warning-bg); color: var(--mj-status-warning-text); }\n.ps-modal-head.danger .ico { background: var(--mj-status-error-bg); color: var(--mj-status-error-text); }\n.ps-modal-head h3 { margin: 0; font-size: 15.5px; font-weight: 650; color: var(--mj-text-primary); }\n.ps-modal-body { padding: 18px 20px; font-size: 13.5px; line-height: 1.55; color: var(--mj-text-secondary); }\n.ps-modal-body .ps-field { margin-top: 14px; margin-bottom: 0; }\n.ps-modal-foot {\n  display: flex; align-items: center; gap: 10px; padding: 14px 20px;\n  border-top: 1px solid var(--mj-border-subtle); background: var(--mj-bg-surface-card);\n}\n.ps-modal-foot .ps-spacer { flex: 1; }\n", "/* ============================================================================\n   Predictive Studio \u2014 Unified Predictions Grid & Detail Panel styles\n   Design-token compliant (all --mj-* semantic tokens).\n   ============================================================================ */\n\n.ps-pred-grid-host {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  min-height: 0;\n  box-sizing: border-box;\n}\n\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 TOOLBAR \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pg-toolbar {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n  padding: 8px 12px;\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md);\n  margin-bottom: 12px;\n  flex-wrap: wrap;\n}\n\n.pg-toolbar-left {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex: 1;\n  min-width: 240px;\n}\n\n.pg-search-box {\n  position: relative;\n  display: flex;\n  align-items: center;\n  max-width: 260px;\n  width: 100%;\n}\n\n.pg-search-box i {\n  position: absolute;\n  left: 10px;\n  color: var(--mj-text-muted);\n  font-size: 12px;\n  pointer-events: none;\n}\n\n.pg-search-input {\n  width: 100%;\n  padding: 6px 10px 6px 30px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-sm);\n  background: var(--mj-bg-surface);\n  font-size: var(--mj-text-xs);\n  color: var(--mj-text-primary);\n  outline: none;\n  transition: border-color .15s;\n}\n\n.pg-search-input:focus {\n  border-color: var(--mj-brand-primary);\n}\n\n.pg-search-clear {\n  position: absolute;\n  right: 8px;\n  background: transparent;\n  border: none;\n  cursor: pointer;\n  padding: 2px 4px;\n  color: var(--mj-text-muted);\n  font-size: 11px;\n}\n\n.pg-search-clear:hover {\n  color: var(--mj-text-primary);\n}\n\n.pg-decile-pill {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 2px 8px;\n  border-radius: var(--mj-radius-full);\n  background: color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n  border: 1px solid var(--mj-brand-primary);\n  font-size: var(--mj-text-xs);\n  font-weight: 600;\n  color: var(--mj-brand-primary);\n}\n\n.pg-decile-pill button {\n  background: transparent;\n  border: none;\n  cursor: pointer;\n  padding: 0;\n  color: var(--mj-brand-primary);\n  font-size: 10px;\n}\n\n.pg-tier-filters {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  flex-wrap: wrap;\n}\n\n.pg-tier-btn {\n  cursor: pointer;\n  border: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n  border-radius: var(--mj-radius-full);\n  padding: 3px 10px;\n  font-size: var(--mj-text-xs);\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n  transition: all .15s;\n  display: inline-flex;\n  align-items: center;\n  gap: 5px;\n}\n\n.pg-tier-btn:hover {\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-primary);\n}\n\n.pg-tier-btn.active {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  border-color: var(--mj-brand-primary);\n}\n\n.pg-tier-btn.tier-high.active {\n  background: var(--mj-status-error);\n  border-color: var(--mj-status-error);\n}\n\n.pg-tier-btn.tier-medium.active {\n  background: var(--mj-status-warning);\n  border-color: var(--mj-status-warning);\n}\n\n.pg-tier-btn.tier-low.active {\n  background: var(--mj-status-success);\n  border-color: var(--mj-status-success);\n}\n\n.pg-count-pill {\n  font-size: 10px;\n  opacity: .85;\n}\n\n.pg-toolbar-right {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 GRID CONTAINER \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pg-view-container {\n  flex: 1;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n}\n\n.pg-grid {\n  width: 100%;\n  flex: 1;\n  min-height: 380px;\n}\n\n/* AG Grid cell styling overrides */\n.pg-record-cell {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  gap: 2px;\n  height: 100%;\n  min-width: 0;\n  line-height: 1.2;\n}\n\n.pg-record-title-row {\n  display: flex;\n  align-items: center;\n  min-width: 0;\n}\n\n.pg-record-link {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  max-width: 100%;\n  text-decoration: none;\n  cursor: pointer;\n  min-width: 0;\n}\n\n.pg-record-name {\n  font-weight: 600;\n  font-size: var(--mj-text-sm);\n  color: var(--mj-text-link);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.pg-record-link:hover .pg-record-name {\n  text-decoration: underline;\n}\n\n.pg-record-open-icon {\n  font-size: 10px;\n  color: var(--mj-text-muted);\n  flex-shrink: 0;\n  transition: transform .15s, color .15s;\n}\n\n.pg-record-link:hover .pg-record-open-icon {\n  transform: translateY(-1px) translateX(1px);\n  color: var(--mj-text-primary);\n}\n\n.pg-record-id {\n  font-size: 11px;\n  color: var(--mj-text-muted);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.pg-score-cell {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  height: 100%;\n  min-width: 0;\n}\n\n.pg-score-bar {\n  flex: 1;\n  height: 8px;\n  border-radius: var(--mj-radius-full);\n  background: var(--mj-bg-surface-sunken);\n  overflow: hidden;\n}\n\n.pg-score-fill {\n  display: block;\n  height: 100%;\n  border-radius: var(--mj-radius-full);\n}\n\n.pg-score-fill.risk-high,\n.pg-score-fill.badge-red { background: var(--mj-status-error); }\n.pg-score-fill.risk-medium,\n.pg-score-fill.badge-amber { background: var(--mj-status-warning); }\n.pg-score-fill.risk-low,\n.pg-score-fill.badge-green { background: var(--mj-status-success); }\n.pg-score-fill.badge-blue { background: var(--mj-brand-primary); }\n.pg-score-fill.badge-gray { background: var(--mj-text-muted); }\n\n.pg-score-val {\n  font-weight: 700;\n  font-size: var(--mj-text-xs);\n  font-variant-numeric: tabular-nums;\n  min-width: 44px;\n  text-align: right;\n}\n\n.pg-score-val.risk-high,\n.pg-score-val.badge-red { color: var(--mj-status-error-text, var(--mj-status-error)); }\n.pg-score-val.risk-medium,\n.pg-score-val.badge-amber { color: var(--mj-status-warning-text, var(--mj-status-warning)); }\n.pg-score-val.risk-low,\n.pg-score-val.badge-green { color: var(--mj-status-success-text, var(--mj-status-success)); }\n.pg-score-val.badge-blue { color: var(--mj-brand-primary); }\n.pg-score-val.badge-gray { color: var(--mj-text-muted); }\n\n.pg-drivers-cell {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  height: 100%;\n  overflow: hidden;\n  flex-wrap: nowrap;\n}\n\n.pg-action-btn {\n  background: transparent;\n  border: none;\n  cursor: pointer;\n  padding: 6px 8px;\n  border-radius: 6px;\n  color: var(--mj-text-muted);\n  font-size: 12px;\n  transition: all .15s;\n}\n\n.pg-action-btn:hover {\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-brand-primary);\n}\n\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 FOOTER \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pg-footer {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 8px 12px;\n  background: var(--mj-bg-surface-card);\n  border-top: 1px solid var(--mj-border-subtle);\n  font-size: var(--mj-text-xs);\n  color: var(--mj-text-muted);\n}\n\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 CHART VIEW \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pg-chart-container {\n  flex: 1;\n  min-height: 0;\n  overflow-y: auto;\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  padding: 4px 0 12px;\n}\n\n.pg-chart-cards {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));\n  gap: 12px;\n}\n\n.pg-chart-card {\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md);\n  padding: 14px 16px;\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  cursor: pointer;\n  transition: all .15s;\n}\n\n.pg-chart-card:hover {\n  background: var(--mj-bg-surface-hover);\n}\n\n.pg-chart-card.total { border-left: 4px solid var(--mj-brand-primary); }\n.pg-chart-card.tier-high { border-left: 4px solid var(--mj-status-error); }\n.pg-chart-card.tier-medium { border-left: 4px solid var(--mj-status-warning); }\n.pg-chart-card.tier-low { border-left: 4px solid var(--mj-status-success); }\n\n.pg-chart-card-val {\n  font-size: var(--mj-text-xl);\n  font-weight: 700;\n  color: var(--mj-text-primary);\n}\n\n.pg-chart-card-lbl {\n  font-size: var(--mj-text-xs);\n  color: var(--mj-text-secondary);\n  font-weight: 600;\n}\n\n.pg-chart-card-sub {\n  font-size: 11px;\n  color: var(--mj-text-muted);\n}\n\n.pg-chart-section {\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md);\n  padding: 18px 20px;\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n\n.pg-chart-section-title {\n  font-size: var(--mj-text-sm);\n  font-weight: 650;\n  color: var(--mj-text-primary);\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  flex-wrap: wrap;\n  gap: 8px;\n}\n\n.pg-chart-meta {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n\n.pg-clear-decile-btn {\n  background: var(--mj-bg-surface-sunken);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-full);\n  padding: 2px 10px;\n  font-size: 11px;\n  font-weight: 600;\n  cursor: pointer;\n  color: var(--mj-text-secondary);\n  transition: all .15s;\n}\n\n.pg-clear-decile-btn:hover {\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-primary);\n  border-color: var(--mj-border-subtle);\n}\n\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 MODERN HISTOGRAM \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pg-histogram {\n  position: relative;\n  width: 100%;\n  padding-top: 8px;\n  padding-bottom: 28px;\n}\n\n.pg-h-columns {\n  display: flex;\n  align-items: flex-end;\n  justify-content: space-between;\n  gap: 8px;\n  height: 200px;\n  padding: 0 4px;\n  border-bottom: 2px solid var(--mj-border-default);\n}\n\n.pg-h-col {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: flex-end;\n  height: 100%;\n  cursor: pointer;\n  position: relative;\n  transition: transform .15s;\n  user-select: none;\n}\n\n.pg-h-col:hover {\n  transform: translateY(-2px);\n}\n\n.pg-h-count {\n  font-size: 11px;\n  font-weight: 700;\n  color: var(--mj-text-primary);\n  margin-bottom: 6px;\n  white-space: nowrap;\n  font-variant-numeric: tabular-nums;\n}\n\n.pg-h-bar-track {\n  width: 100%;\n  max-width: 52px;\n  display: flex;\n  align-items: flex-end;\n  justify-content: center;\n}\n\n.pg-h-bar {\n  width: 100%;\n  border-radius: 4px 4px 0 0;\n  transition: height .3s cubic-bezier(0.4, 0, 0.2, 1), opacity .15s, box-shadow .15s;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);\n}\n\n.pg-h-col:hover .pg-h-bar {\n  filter: brightness(1.1);\n  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);\n}\n\n.pg-h-col.active .pg-h-bar {\n  outline: 3px solid var(--mj-brand-primary);\n  outline-offset: 1px;\n}\n\n.pg-h-footer {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  margin-top: 8px;\n  position: absolute;\n  top: 100%;\n  left: 0;\n  right: 0;\n}\n\n.pg-h-range {\n  font-size: 10px;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n}\n\n.pg-h-pct {\n  font-size: 10px;\n  color: var(--mj-text-muted);\n}\n\n/* Tooltip card */\n.pg-h-tooltip {\n  position: absolute;\n  bottom: calc(100% + 4px);\n  left: 50%;\n  transform: translateX(-50%);\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);\n  border-radius: var(--mj-radius-md);\n  padding: 8px 12px;\n  white-space: nowrap;\n  pointer-events: none;\n  opacity: 0;\n  visibility: hidden;\n  transition: opacity .15s, visibility .15s;\n  z-index: 50;\n}\n\n.pg-h-col:hover .pg-h-tooltip {\n  opacity: 1;\n  visibility: visible;\n}\n\n.pg-h-tt-head {\n  font-size: 11px;\n  font-weight: 700;\n  color: var(--mj-text-primary);\n  margin-bottom: 2px;\n}\n\n.pg-h-tt-row {\n  display: flex;\n  gap: 6px;\n  align-items: center;\n  font-size: 11px;\n}\n\n.pg-h-tt-val {\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.pg-h-tt-pct {\n  color: var(--mj-text-muted);\n}\n\n.pg-h-tt-badge {\n  font-size: 10px;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  margin-top: 3px;\n}\n\n.pg-h-tt-hint {\n  font-size: 9px;\n  color: var(--mj-text-muted);\n  font-style: italic;\n  margin-top: 4px;\n}\n\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 SLIDE PANEL DETAIL \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pg-detail-body {\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n  padding: 18px 20px 32px;\n}\n\n.pg-detail-record-head {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 14px;\n  padding-bottom: 14px;\n  border-bottom: 1px solid var(--mj-border-subtle);\n}\n\n.pg-detail-record-info h3 {\n  margin: 0 0 4px;\n  font-size: var(--mj-text-lg);\n  font-weight: 700;\n  color: var(--mj-text-primary);\n}\n\n.pg-detail-pred-card {\n  display: flex;\n  align-items: center;\n  gap: 20px;\n  padding: 16px 18px;\n  border-radius: var(--mj-radius-md);\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n}\n\n.pg-detail-score-circle {\n  width: 72px;\n  height: 72px;\n  border-radius: 50%;\n  display: grid;\n  place-items: center;\n  font-size: 19px;\n  font-weight: 800;\n  color: var(--mj-text-inverse);\n  flex-shrink: 0;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, .12);\n}\n\n.pg-detail-score-circle.risk-high,\n.pg-detail-score-circle.badge-red { background: var(--mj-status-error); }\n.pg-detail-score-circle.risk-medium,\n.pg-detail-score-circle.badge-amber { background: var(--mj-status-warning); }\n.pg-detail-score-circle.risk-low,\n.pg-detail-score-circle.badge-green { background: var(--mj-status-success); }\n.pg-detail-score-circle.badge-blue { background: var(--mj-brand-primary); }\n.pg-detail-score-circle.badge-gray { background: var(--mj-text-muted); }\n\n.pg-detail-meta {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  flex: 1;\n}\n\n.pg-detail-meta-line {\n  font-size: var(--mj-text-sm);\n  color: var(--mj-text-primary);\n}\n\n.pg-detail-meta-sub {\n  font-size: var(--mj-text-xs);\n  color: var(--mj-text-muted);\n}\n\n.pg-detail-drivers-wrap {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n\n.pg-detail-drivers-list {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.pg-detail-driver-item {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 8px 12px;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-subtle);\n  border-radius: var(--mj-radius-sm);\n}\n\n.pg-detail-driver-label {\n  font-size: var(--mj-text-xs);\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 TRENDLINE CHART & TABLE \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pg-trendline-wrap {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  padding: 16px;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md);\n}\n\n.pg-trendline-svg {\n  width: 100%;\n  height: 180px;\n  overflow: visible;\n}\n\n.pg-history-table {\n  width: 100%;\n  border-collapse: collapse;\n  font-size: var(--mj-text-xs);\n  margin-top: 6px;\n}\n\n.pg-history-table th {\n  text-align: left;\n  padding: 6px 8px;\n  border-bottom: 1px solid var(--mj-border-default);\n  color: var(--mj-text-muted);\n  font-weight: 600;\n  font-size: 11px;\n  text-transform: uppercase;\n  letter-spacing: .03em;\n}\n\n.pg-history-table td {\n  padding: 7px 8px;\n  border-bottom: 1px solid var(--mj-border-subtle);\n  color: var(--mj-text-secondary);\n}\n\n.pg-history-table tr:last-child td {\n  border-bottom: none;\n}\n\n.pg-delta-pill {\n  display: inline-flex;\n  align-items: center;\n  gap: 3px;\n  font-weight: 700;\n  font-size: 11px;\n  padding: 1px 6px;\n  border-radius: var(--mj-radius-full);\n}\n\n.pg-delta-pill.up { background: var(--mj-status-error-bg); color: var(--mj-status-error-text); }\n.pg-delta-pill.down { background: var(--mj-status-success-bg); color: var(--mj-status-success-text); }\n.pg-delta-pill.neutral { background: var(--mj-bg-surface-sunken); color: var(--mj-text-muted); }\n\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 CHART DRILLDOWN GRID \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pg-chart-drilldown-section {\n  padding: 16px 18px;\n  gap: 12px;\n}\n\n.pg-chart-grid-host {\n  width: 100%;\n  height: 440px;\n  min-height: 320px;\n  border-radius: var(--mj-radius-sm);\n  overflow: hidden;\n  border: 1px solid var(--mj-border-default);\n}\n\n.pg-chart-ag-grid {\n  width: 100%;\n  height: 100%;\n}\n\n.pg-drilldown-footer {\n  display: flex;\n  justify-content: flex-end;\n  font-size: var(--mj-text-xs);\n  color: var(--mj-text-muted);\n  padding-top: 2px;\n}\n"] }]
+                    PSRowDriversComponent,
+                ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ps-pred-grid-host\" [style.height]=\"height\">\n  <!-- \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 TOOLBAR \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <div class=\"pg-toolbar\">\n    <div class=\"pg-toolbar-left\">\n      <div class=\"pg-search-box\">\n        <i class=\"fa-solid fa-magnifying-glass\"></i>\n        <input\n          type=\"text\"\n          class=\"pg-search-input\"\n          placeholder=\"Filter records, outcome, factors...\"\n          [value]=\"searchText\"\n          (input)=\"onSearchInput($event)\" />\n        @if (searchText) {\n          <button type=\"button\" class=\"pg-search-clear\" (click)=\"clearSearch()\" title=\"Clear filter\">\n            <i class=\"fa-solid fa-xmark\"></i>\n          </button>\n        }\n      </div>\n\n      <div class=\"pg-tier-filters\">\n        <button\n          type=\"button\"\n          class=\"pg-tier-btn\"\n          [class.active]=\"selectedTier === 'all'\"\n          (click)=\"setTier('all')\">\n          All <span class=\"pg-count-pill\">({{ allRows.length | number }})</span>\n        </button>\n        @for (b of visibleBands; track b.key) {\n          <button\n            type=\"button\"\n            class=\"pg-tier-btn\"\n            [class.active]=\"selectedTier === b.key\"\n            (click)=\"setTier(b.key)\">\n            {{ b.label }} <span class=\"pg-count-pill\">({{ b.count | number }})</span>\n          </button>\n        }\n\n        @if (selectedDecileIndex !== null) {\n          <div class=\"pg-decile-pill\">\n            <i class=\"fa-solid fa-filter\"></i>\n            <span>Decile {{ selectedDecileLabel }}</span>\n            <button type=\"button\" (click)=\"clearDecileFilter()\" title=\"Clear decile filter\"><i class=\"fa-solid fa-xmark\"></i></button>\n          </div>\n        }\n      </div>\n    </div>\n\n    <div class=\"pg-toolbar-right\">\n      <mj-view-toggle\n        [Options]=\"viewOptions\"\n        [ActiveKey]=\"activeView\"\n        (KeyChange)=\"onViewToggle($event)\">\n      </mj-view-toggle>\n\n      <button\n        mjButton\n        variant=\"secondary\"\n        size=\"sm\"\n        [disabled]=\"allRows.length === 0\"\n        (click)=\"exportCSV()\">\n        <i class=\"fa-solid fa-file-export\"></i> Export\n      </button>\n    </div>\n  </div>\n\n  <!-- \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 MAIN VIEW CONTAINER \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <div class=\"pg-view-container\">\n    @if (isLoading) {\n      <mj-loading text=\"Loading predictions...\" size=\"medium\"></mj-loading>\n    } @else if (loadError) {\n      <div class=\"ps-load-error\" role=\"alert\">\n        <i class=\"fa-solid fa-triangle-exclamation\"></i>\n        <div class=\"ps-load-error-text\">\n          <strong>Couldn't load predictions</strong>\n          <span class=\"ps-load-error-detail\">{{ loadError }}</span>\n        </div>\n        <button mjButton variant=\"secondary\" size=\"sm\" (click)=\"reload()\"><i class=\"fa-solid fa-rotate-right\"></i> Try again</button>\n      </div>\n    } @else if (allRows.length === 0) {\n      <div class=\"ps-empty\" style=\"padding: 32px\">\n        <span class=\"ps-empty-ico\"><i class=\"fa-solid fa-chart-line\"></i></span>\n        <h3>No predictions available</h3>\n        <p>Run this model from Models in Production or wait for the scheduled job to produce predictions.</p>\n      </div>\n    } @else {\n      <!-- GRID VIEW -->\n      @if (activeView === 'grid') {\n        <ag-grid-angular\n          class=\"pg-grid\"\n          [theme]=\"Theme\"\n          [columnDefs]=\"columnDefs\"\n          [defaultColDef]=\"defaultColDef\"\n          [gridOptions]=\"GridOptions\"\n          [rowData]=\"filteredRows\"\n          (gridReady)=\"onGridReady($event)\"\n          (rowClicked)=\"onRowClicked($event)\"\n          (cellClicked)=\"onCellClicked($event)\">\n        </ag-grid-angular>\n\n        <div class=\"pg-footer\">\n          <span>Showing <strong>{{ filteredRows.length }}</strong> of {{ allRows.length }} predictions</span>\n          @if (selectedTier !== 'all' || searchText) {\n            <span class=\"ps-muted\">Filtered by {{ SelectedTierLabel }}{{ searchText ? ' query \"' + searchText + '\"' : '' }}</span>\n          }\n          @if (DetailRowsCapped) {\n            <span class=\"ps-muted\" data-testid=\"ps-predictions-capped\">Showing the first {{ MaxRunDetailRowsLabel }} predictions</span>\n          }\n          <span class=\"ps-muted\">Click any row to inspect details & score history</span>\n        </div>\n      }\n\n      <!-- CHART VIEW -->\n      @if (activeView === 'chart') {\n        <div class=\"pg-chart-container\">\n          <!-- KPI Summary Cards -->\n          <div class=\"pg-chart-cards\">\n            <div class=\"pg-chart-card total\">\n              <span class=\"pg-chart-card-lbl\"><i class=\"fa-solid fa-users ps-muted\"></i> Scored Cohort</span>\n              <span class=\"pg-chart-card-val\">{{ allRows.length | number }}</span>\n              <span class=\"pg-chart-card-sub\">Total records</span>\n            </div>\n            @for (b of visibleBands; track b.key) {\n              <div class=\"pg-chart-card\" [class]=\"'tier-' + b.key\" (click)=\"setTierAndGrid(b.key)\">\n                <span class=\"pg-chart-card-lbl\">\n                  @if (b.icon) {\n                    <i class=\"fa-solid {{ b.icon }}\" [style.color]=\"getBadgeColorVar(b.badgeColor)\"></i>\n                  }\n                  {{ b.label }}\n                </span>\n                <span class=\"pg-chart-card-val\" [style.color]=\"getBadgeColorVar(b.badgeColor)\">\n                  {{ b.count | number }}\n                </span>\n                <span class=\"pg-chart-card-sub\">{{ b.pct }}% of cohort (avg {{ b.avgScoreFormatted }} {{ outcomeConfig.ScoreLabel }})</span>\n              </div>\n            }\n          </div>\n\n          <!-- Score Distribution Histogram -->\n          <div class=\"pg-chart-section\">\n            <div class=\"pg-chart-section-title\">\n              <div style=\"display:flex;align-items:center;gap:8px\">\n                <i class=\"fa-solid fa-chart-simple ps-muted\"></i>\n                <span>{{ outcomeConfig.ScoreLabel }} Distribution (10 Bins)</span>\n              </div>\n              <div class=\"pg-chart-meta\">\n                <span class=\"ps-small ps-muted\">Cohort Mean: <strong>{{ meanScoreFormatted }}</strong></span>\n                @if (selectedDecileIndex !== null) {\n                  <button type=\"button\" class=\"pg-clear-decile-btn\" (click)=\"clearDecileFilter()\">\n                    <i class=\"fa-solid fa-xmark\"></i> Clear Decile Filter\n                  </button>\n                }\n              </div>\n            </div>\n\n            <!-- Modern Interactive Flex Histogram -->\n            <div class=\"pg-histogram\">\n              <div class=\"pg-h-columns\">\n                @for (b of histogramBins; track b.label) {\n                  <div\n                    class=\"pg-h-col\"\n                    [class.active]=\"selectedDecileIndex === b.idx\"\n                    [class.empty]=\"b.count === 0\"\n                    (click)=\"selectDecile(b.idx)\">\n\n                    <!-- Count label above bar -->\n                    <span class=\"pg-h-count\" [title]=\"b.count + ' records'\">\n                      {{ b.count > 0 ? (b.count | number) : '0' }}\n                    </span>\n\n                    <!-- Bar track & fill -->\n                    <div class=\"pg-h-bar-track\">\n                      <div\n                        class=\"pg-h-bar\"\n                        [style.height.px]=\"b.height\"\n                        [style.background]=\"b.color\">\n                      </div>\n                    </div>\n\n                    <!-- Footer labels -->\n                    <div class=\"pg-h-footer\">\n                      <span class=\"pg-h-range\">{{ b.shortLabel }}</span>\n                      <span class=\"pg-h-pct\">{{ b.pctFormatted }}</span>\n                    </div>\n\n                    <!-- Tooltip card -->\n                    <div class=\"pg-h-tooltip\">\n                      <div class=\"pg-h-tt-head\">{{ b.label }} {{ outcomeConfig.ScoreLabel }}</div>\n                      <div class=\"pg-h-tt-row\">\n                        <span class=\"pg-h-tt-val\">{{ b.count | number }} records</span>\n                        <span class=\"pg-h-tt-pct\">({{ b.pctFormatted }} of cohort)</span>\n                      </div>\n                      <div class=\"pg-h-tt-badge\" [style.color]=\"b.color\">{{ b.riskLabel }}</div>\n                      <div class=\"pg-h-tt-hint\">{{ selectedDecileIndex === b.idx ? 'Click to clear filter' : 'Click to filter grid' }}</div>\n                    </div>\n                  </div>\n                }\n              </div>\n            </div>\n          </div>\n\n          <!-- Predicted Class Breakdown (for Classification) -->\n          @if (classBreakdown.length > 0) {\n            <div class=\"pg-chart-section\">\n              <div class=\"pg-chart-section-title\">\n                <span><i class=\"fa-solid fa-layer-group ps-muted\"></i> Predicted Outcome Classes</span>\n              </div>\n              <div style=\"display:flex;height:24px;border-radius:var(--mj-radius-full);overflow:hidden;background:var(--mj-bg-surface-sunken);margin-bottom:8px\">\n                @for (c of classBreakdown; track c.name) {\n                  <div\n                    [style.width.%]=\"c.pct\"\n                    [style.background]=\"c.color\"\n                    [title]=\"c.name + ': ' + c.count + ' (' + c.pct + '%)'\">\n                  </div>\n                }\n              </div>\n              <div style=\"display:flex;gap:16px;flex-wrap:wrap\">\n                @for (c of classBreakdown; track c.name) {\n                  <div style=\"display:flex;align-items:center;gap:6px;font-size:var(--mj-text-xs)\">\n                    <span [style.background]=\"c.color\" style=\"width:10px;height:10px;border-radius:2px;display:inline-block\"></span>\n                    <strong>{{ c.name }}</strong>\n                    <span class=\"ps-muted\">{{ c.count }} ({{ c.pct }}%)</span>\n                  </div>\n                }\n              </div>\n            </div>\n          }\n\n          <!-- Segment Drilldown Grid Section \u2014 Only shown when a decile segment is selected -->\n          @if (selectedDecileIndex !== null) {\n            <div id=\"pg-drilldown-anchor\" class=\"pg-chart-section pg-chart-drilldown-section\">\n              <div class=\"pg-chart-section-title\">\n                <div style=\"display:flex;align-items:center;gap:8px\">\n                  <i class=\"fa-solid fa-table-list ps-muted\"></i>\n                  <span>\n                    Decile Drill-Down:\n                    <strong style=\"color:var(--mj-brand-primary)\">{{ selectedDecileLabel }}</strong>\n                    {{ outcomeConfig.ScoreLabel }}\n                    @if (histogramBins[selectedDecileIndex]) {\n                      <span class=\"ps-badge\" [style.color]=\"histogramBins[selectedDecileIndex].color\" style=\"margin-left:6px\">\n                        {{ histogramBins[selectedDecileIndex].riskLabel }}\n                      </span>\n                    }\n                  </span>\n                </div>\n                <div class=\"pg-chart-meta\">\n                  <span class=\"ps-small ps-muted\">\n                    Showing <strong>{{ filteredRows.length | number }}</strong> of {{ allRows.length | number }} records\n                  </span>\n                  <button type=\"button\" class=\"pg-clear-decile-btn\" (click)=\"clearDecileFilter()\">\n                    <i class=\"fa-solid fa-xmark\"></i> Show All Deciles\n                  </button>\n                </div>\n              </div>\n\n              <!-- Drill-Down AG Grid -->\n              <div class=\"pg-chart-grid-host\">\n                <ag-grid-angular\n                  class=\"pg-grid pg-chart-ag-grid\"\n                  [theme]=\"Theme\"\n                  [columnDefs]=\"columnDefs\"\n                  [defaultColDef]=\"defaultColDef\"\n                  [gridOptions]=\"chartGridOptions\"\n                  [rowData]=\"filteredRows\"\n                  (gridReady)=\"onChartGridReady($event)\"\n                  (rowClicked)=\"onRowClicked($event)\"\n                  (cellClicked)=\"onCellClicked($event)\">\n                </ag-grid-angular>\n              </div>\n\n              <div class=\"pg-drilldown-footer\">\n                <span class=\"ps-muted\">Click any row to inspect explainability drivers and score history in the slide-in drawer</span>\n              </div>\n            </div>\n          }\n        </div>\n      }\n    }\n  </div>\n\n  <!-- \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 SLIDE-IN DETAIL PANEL \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  @if (detailOpen && selectedRow) {\n    <mj-slide-panel\n      Mode=\"slide\"\n      Title=\"Record Prediction & Score History\"\n      [Resizable]=\"true\"\n      [WidthPx]=\"drawerWidthPx\"\n      (WidthChanged)=\"onDrawerWidthChanged($event)\"\n      (Closed)=\"closeDetail()\">\n\n      <div class=\"pg-detail-body\">\n        <!-- Record header -->\n        <div class=\"pg-detail-record-head\">\n          <div class=\"pg-detail-record-info\">\n            <h3>{{ selectedRow.recordName || selectedRow.recordId }}</h3>\n            <div style=\"display:flex;align-items:center;gap:8px\">\n              <span class=\"ps-badge blue\">{{ entityDisplayName || 'Entity Record' }}</span>\n              <span class=\"ps-mono ps-small ps-muted\">{{ selectedRow.recordId }}</span>\n            </div>\n          </div>\n          <div class=\"pg-detail-record-actions\" style=\"display:flex;gap:8px;align-items:center;flex-wrap:wrap\">\n            <button\n              mjButton\n              variant=\"primary\"\n              size=\"sm\"\n              (click)=\"drillThrough(selectedRow)\"\n              title=\"Open record in Explorer\">\n              <i class=\"fa-solid fa-arrow-up-right-from-square\"></i> Open {{ entityDisplayName || 'Record' }}\n            </button>\n            @if (subjectEntityName && subjectRecordId) {\n              <button\n                mjButton\n                variant=\"secondary\"\n                size=\"sm\"\n                (click)=\"openSubjectRecord()\"\n                title=\"Open subject record (e.g. Person, Account) in Explorer\">\n                <i class=\"fa-solid fa-user\"></i> Open {{ subjectEntityName.replace('MJ_BizApps_Common: ', '').replace('MJ_BizApps_', '') }} ({{ subjectRecordName || 'Profile' }})\n              </button>\n            }\n          </div>\n        </div>\n\n        <!-- Prediction Summary Card -->\n        <div class=\"pg-detail-pred-card\">\n          <div class=\"pg-detail-score-circle\" [class]=\"'badge-' + (selectedRow.badgeColor || 'gray')\">\n            {{ selectedRow.scoreFormatted }}\n          </div>\n          <div class=\"pg-detail-meta\">\n            <div class=\"pg-detail-meta-line\">\n              <strong>{{ outcomeConfig.StatusLabel }}:</strong>\n              <span class=\"ps-badge\" [class]=\"selectedRow.badgeColor || 'gray'\" style=\"margin-left:6px\">\n                @if (selectedRow.icon) {\n                  <i class=\"fa-solid {{ selectedRow.icon }}\"></i>\n                }\n                {{ selectedRow.status || selectedRow.band }}\n              </span>\n            </div>\n            @if (selectedRow.class) {\n              <div class=\"pg-detail-meta-line\">\n                <strong>Predicted Outcome:</strong>\n                <span class=\"ps-badge\" [class]=\"getOutcomeBadgeClass(selectedRow.class)\">\n                  {{ selectedRow.class }}\n                </span>\n              </div>\n            }\n            <div class=\"pg-detail-meta-line\">\n              <strong>{{ outcomeConfig.ScoreLabel }}:</strong>\n              <span style=\"font-weight:700;color:var(--mj-text-primary)\">{{ selectedRow.scoreFormatted }}</span>\n            </div>\n            <div class=\"pg-detail-meta-sub\">\n              Scored: {{ selectedRow.scoredAtDate ? (selectedRow.scoredAtDate | date:'medium') : '\u2014' }}\n            </div>\n          </div>\n        </div>\n\n        <!-- Explainability: Local Feature Drivers -->\n        <div class=\"pg-detail-drivers-wrap\">\n          <div class=\"ps-section-title\">\n            <i class=\"fa-solid fa-lightbulb\" style=\"color:var(--mj-status-warning)\"></i> Factors behind this score (associations, not causes)\n          </div>\n          <ps-row-drivers [Drivers]=\"selectedRow.drivers\"></ps-row-drivers>\n        </div>\n\n        <!-- Historical Trendline across Runs -->\n        <div class=\"pg-trendline-wrap\">\n          <div class=\"ps-section-title\" style=\"display:flex;align-items:center;justify-content:space-between\">\n            <span><i class=\"fa-solid fa-clock-rotate-left ps-muted\"></i> Historical Score Trendline</span>\n            <span class=\"ps-small ps-muted\">{{ historyPoints.length }} run{{ historyPoints.length === 1 ? '' : 's' }} recorded</span>\n          </div>\n\n          @if (historyLoading) {\n            <mj-loading text=\"Loading score history...\" size=\"small\"></mj-loading>\n          } @else if (historyPoints.length > 1) {\n            <!-- Interactive SVG Trendline -->\n            <svg class=\"pg-trendline-svg\" viewBox=\"0 0 540 160\" preserveAspectRatio=\"none\">\n              <!-- Background grid lines -->\n              <line x1=\"40\" y1=\"20\" x2=\"520\" y2=\"20\" stroke=\"var(--mj-border-subtle)\" stroke-dasharray=\"3,3\" />\n              <line x1=\"40\" y1=\"75\" x2=\"520\" y2=\"75\" stroke=\"var(--mj-border-subtle)\" stroke-dasharray=\"3,3\" />\n              <line x1=\"40\" y1=\"130\" x2=\"520\" y2=\"130\" stroke=\"var(--mj-border-default)\" />\n\n              <!-- Y-axis labels -->\n              <text x=\"32\" y=\"24\" font-size=\"10\" text-anchor=\"end\" fill=\"var(--mj-text-muted)\">100%</text>\n              <text x=\"32\" y=\"79\" font-size=\"10\" text-anchor=\"end\" fill=\"var(--mj-text-muted)\">50%</text>\n              <text x=\"32\" y=\"134\" font-size=\"10\" text-anchor=\"end\" fill=\"var(--mj-text-muted)\">0%</text>\n\n              <!-- Filled area under curve -->\n              <polygon [attr.points]=\"trendlineAreaPoints\" fill=\"color-mix(in srgb, var(--mj-brand-primary) 12%, transparent)\" />\n\n              <!-- Trend line path -->\n              <polyline [attr.points]=\"trendlineLinePoints\" fill=\"none\" stroke=\"var(--mj-brand-primary)\" stroke-width=\"2.5\" />\n\n              <!-- Data points -->\n              @for (p of trendlinePlotPoints; track p.runId) {\n                <circle\n                  [attr.cx]=\"p.x\"\n                  [attr.cy]=\"p.y\"\n                  r=\"5\"\n                  [attr.fill]=\"p.color\"\n                  stroke=\"var(--mj-bg-surface)\"\n                  stroke-width=\"2\">\n                  <title>{{ p.dateStr }}: {{ p.scoreFormatted }} ({{ p.class || 'No class' }})</title>\n                </circle>\n                <text\n                  [attr.cx]=\"p.x\"\n                  [attr.cy]=\"p.y - 9\"\n                  font-size=\"10\"\n                  font-weight=\"700\"\n                  text-anchor=\"middle\"\n                  fill=\"var(--mj-text-primary)\">\n                  {{ p.scoreFormatted }}\n                </text>\n              }\n            </svg>\n\n            <!-- Runs Table -->\n            <table class=\"pg-history-table\">\n              <thead>\n                <tr>\n                  <th>When</th>\n                  <th>Status</th>\n                  <th>Score</th>\n                  <th>Change</th>\n                  <th>Class</th>\n                </tr>\n              </thead>\n              <tbody>\n                @for (pt of historyPoints; track pt.runId) {\n                  <tr>\n                    <td>{{ pt.RunDate | date:'short' }}</td>\n                    <td><span class=\"ps-badge\" [class]=\"pt.status === 'Succeeded' ? 'green' : 'gray'\">{{ pt.status }}</span></td>\n                    <td><strong class=\"ps-mono\">{{ pt.ScoreFormatted }}</strong></td>\n                    <td>\n                      @if (pt.Delta == null) {\n                        <span class=\"pg-delta-pill neutral\">Baseline</span>\n                      } @else if (pt.Delta > 0.005) {\n                        <span class=\"pg-delta-pill up\"><i class=\"fa-solid fa-arrow-up\"></i> +{{ (pt.Delta * 100).toFixed(1) }}%</span>\n                      } @else if (pt.Delta < -0.005) {\n                        <span class=\"pg-delta-pill down\"><i class=\"fa-solid fa-arrow-down\"></i> {{ (pt.Delta * 100).toFixed(1) }}%</span>\n                      } @else {\n                        <span class=\"pg-delta-pill neutral\">0%</span>\n                      }\n                    </td>\n                    <td>{{ pt.class || '\u2014' }}</td>\n                  </tr>\n                }\n              </tbody>\n            </table>\n          } @else if (historyPoints.length === 1) {\n            <div class=\"ps-small ps-muted\">\n              This record has been scored once so far ({{ historyPoints[0].RunDate | date:'medium' }}). As more runs occur over time, the score trendline will track changes here.\n            </div>\n          } @else {\n            <div class=\"ps-small ps-muted\">No historical runs found for this record.</div>\n          }\n        </div>\n      </div>\n    </mj-slide-panel>\n  }\n</div>\n", styles: ["/* ============================================================================\n   Predictive Studio \u2014 shared panel styles (design-token compliant)\n   Maps the mockup design system onto MemberJunction semantic --mj-* tokens.\n   Loaded by every PS panel component (styleUrls) under ViewEncapsulation.None,\n   so the class names are global within the PS dashboard subtree.\n   No hardcoded colors except the intentional categorical node/algorithm palette\n   (declared once as --ps-* custom props below) which must stay distinct across\n   light/dark to remain readable as diagram accents.\n   ============================================================================ */\n\n/* Categorical accents for DAG node types + algorithm chips. These are\n   data-visualization colors that must remain distinct regardless of theme\n   (allowed exception #3 in the design-token rules). */\n.ps-panel {\n  --ps-node-source: #6b7280;\n  --ps-node-feature: #2050c8;\n  --ps-node-embedding: #7b3ff0;\n  --ps-node-target: #1f9d57;\n  --ps-node-algorithm: #d98213;\n  /* budget-gauge categorical accents (reuse the node palette so light/dark stay distinct) */\n  --ps-gauge-cost: var(--ps-node-algorithm);\n  --ps-gauge-iterations: var(--ps-node-feature);\n}\n\n.ps-panel {\n  display: block;\n  height: 100%;\n}\n\n/* ---- generic layout helpers ---- */\n.ps-row { display: flex; gap: 16px; }\n.ps-col { display: flex; flex-direction: column; gap: 16px; }\n.ps-wrap { flex-wrap: wrap; }\n.ps-spacer { flex: 1; }\n.ps-muted { color: var(--mj-text-muted); }\n.ps-small { font-size: 12.5px; }\n.ps-mono { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: 12.5px; }\n.ps-section-title {\n  font-size: 12px; text-transform: uppercase; letter-spacing: .06em;\n  color: var(--mj-text-muted); margin: 4px 0 2px; font-weight: 700;\n}\n\n/* ---- cards ---- */\n.ps-card {\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  overflow: hidden;\n}\n.ps-card-head {\n  display: flex; align-items: center; gap: 10px;\n  padding: 14px 16px; border-bottom: 1px solid var(--mj-border-subtle);\n}\n.ps-card-head h3 { font-size: 14.5px; margin: 0; font-weight: 650; color: var(--mj-text-primary); }\n.ps-card-body { padding: 16px; }\n\n/* ---- KPI tiles ---- */\n.ps-kpi {\n  background: var(--mj-bg-surface); border: 1px solid var(--mj-border-default);\n  border-radius: 8px; padding: 16px 18px;\n}\n.ps-kpi .label { font-size: 12px; color: var(--mj-text-muted); font-weight: 600; }\n.ps-kpi .val { font-size: 26px; font-weight: 720; letter-spacing: -.02em; margin-top: 2px; color: var(--mj-text-primary); }\n\n/* ---- badges ---- */\n.ps-badge {\n  display: inline-flex; align-items: center; gap: 5px;\n  padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 650; line-height: 1.7;\n}\n.ps-badge.gray { background: var(--mj-bg-surface-sunken); color: var(--mj-text-secondary); }\n.ps-badge.blue { background: var(--mj-status-info-bg); color: var(--mj-status-info-text); }\n.ps-badge.green { background: var(--mj-status-success-bg); color: var(--mj-status-success-text); }\n.ps-badge.amber { background: var(--mj-status-warning-bg); color: var(--mj-status-warning-text); }\n.ps-badge.red { background: var(--mj-status-error-bg); color: var(--mj-status-error-text); }\n.ps-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }\n\n/* recommendation-level chips (the ranking matrix payoff) */\n.ps-lvl {\n  display: inline-flex; align-items: center; justify-content: center;\n  min-width: 92px; padding: 4px 10px; border-radius: 7px;\n  font-weight: 650; font-size: 11.5px; color: var(--mj-text-inverse);\n}\n.ps-lvl-Primary { background: var(--mj-status-success); }\n.ps-lvl-Strong { background: var(--mj-status-info); }\n.ps-lvl-Viable { background: var(--mj-status-warning); }\n.ps-lvl-Weak { background: var(--mj-text-disabled); }\n.ps-lvl-NotRecommended { background: var(--mj-bg-surface-sunken); color: var(--mj-text-muted); }\n\n/* ---- tags ---- */\n.ps-tag {\n  display: inline-block; padding: 2px 8px; border-radius: 6px;\n  background: var(--mj-bg-surface-sunken); color: var(--mj-text-secondary);\n  font-size: 11.5px; font-weight: 600;\n}\n.ps-tag.muted { opacity: .6; }\n.ps-divider { height: 1px; background: var(--mj-border-subtle); margin: 8px 0; }\n\n/* ---- tables ---- */\n.ps-table { width: 100%; border-collapse: collapse; font-size: 13px; }\n.ps-table th {\n  text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em;\n  color: var(--mj-text-muted); font-weight: 700; padding: 9px 12px;\n  border-bottom: 1px solid var(--mj-border-default);\n}\n.ps-table td { padding: 11px 12px; border-bottom: 1px solid var(--mj-border-subtle); color: var(--mj-text-primary); }\n.ps-table tr:hover td { background: var(--mj-bg-surface-hover); }\n.ps-table .num { text-align: right; font-variant-numeric: tabular-nums; }\n\n.ps-rank {\n  width: 22px; height: 22px; border-radius: 6px; background: var(--mj-bg-surface-sunken);\n  display: inline-grid; place-items: center; font-weight: 700; font-size: 11.5px; color: var(--mj-text-secondary);\n}\n.ps-rank.gold { background: var(--mj-status-warning-bg); color: var(--mj-status-warning-text); }\n\n/* ---- progress bars ---- */\n.ps-bar { height: 8px; border-radius: 999px; background: var(--mj-bg-surface-sunken); overflow: hidden; }\n.ps-bar > span { display: block; height: 100%; border-radius: 999px; background: var(--mj-brand-primary); }\n.ps-bar.warn > span { background: var(--mj-status-warning); }\n.ps-bar.run > span { background: var(--mj-brand-primary); }\n\n.ps-fbar { display: grid; grid-template-columns: minmax(150px, 1.3fr) 2fr 56px; align-items: center; gap: 14px; padding: 8px 0; }\n.ps-fbar + .ps-fbar { border-top: 1px solid var(--mj-border-subtle); }\n.ps-fbar .track { height: 10px; border-radius: var(--mj-radius-full); background: var(--mj-bg-surface-sunken); overflow: hidden; }\n.ps-fbar .track > span { display: block; height: 100%; border-radius: var(--mj-radius-full); background: var(--mj-brand-primary); }\n.ps-fbar .track > span.warn { background: var(--mj-status-warning); }\n.ps-fbar .name { color: var(--mj-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.ps-fbar > .ps-mono { text-align: right; color: var(--mj-text-secondary); font-variant-numeric: tabular-nums; }\n\n/* gauge */\n.ps-gauge {\n  position: relative; width: 64px; height: 64px; border-radius: 50%; flex: 0 0 auto;\n  background: conic-gradient(var(--ps-gauge-color, var(--mj-brand-primary)) calc(var(--ps-p, 40) * 1%), var(--mj-bg-surface-sunken) 0);\n  display: grid; place-items: center;\n}\n.ps-gauge::after { content: ''; position: absolute; inset: 9px; background: var(--mj-bg-surface); border-radius: 50%; }\n.ps-gauge .g-val { position: relative; font-weight: 720; font-size: 14px; color: var(--mj-text-primary); }\n\n/* warning / info callouts */\n.ps-callout { display: flex; gap: 11px; padding: 12px 14px; border-radius: 10px; border: 1px solid; }\n.ps-callout.warn { background: var(--mj-status-warning-bg); border-color: var(--mj-status-warning-border); color: var(--mj-status-warning-text); }\n.ps-callout.info { background: var(--mj-status-info-bg); border-color: var(--mj-status-info-border); color: var(--mj-status-info-text); }\n.ps-callout.success { background: var(--mj-status-success-bg); border-color: var(--mj-status-success-border); color: var(--mj-status-success-text); }\n.ps-callout i { font-size: 16px; margin-top: 1px; }\n\n/* lifecycle stepper */\n.ps-stepper { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }\n.ps-step { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--mj-text-muted); }\n.ps-step .pip {\n  width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--mj-border-strong);\n  display: grid; place-items: center; font-size: 11px;\n}\n.ps-step.done { color: var(--mj-status-success-text); }\n.ps-step.done .pip { background: var(--mj-status-success); border-color: var(--mj-status-success); color: var(--mj-text-inverse); }\n.ps-step.curr { color: var(--mj-brand-primary); }\n.ps-step.curr .pip { border-color: var(--mj-brand-primary); color: var(--mj-brand-primary); }\n.ps-step .ln { width: 26px; height: 2px; background: var(--mj-border-strong); }\n\n/* ---- DAG flow canvas ---- */\n.ps-flow {\n  position: relative;\n  background:\n    linear-gradient(var(--mj-border-subtle) 1px, transparent 1px) 0 0 / 22px 22px,\n    linear-gradient(90deg, var(--mj-border-subtle) 1px, transparent 1px) 0 0 / 22px 22px,\n    var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default); border-radius: 10px;\n  min-height: 620px; overflow: hidden;\n}\n.ps-node {\n  position: absolute; width: 190px; background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-strong); border-left-width: 3px; border-radius: 8px;\n  cursor: pointer;\n}\n.ps-node .nh {\n  display: flex; align-items: center; gap: 8px; padding: 9px 11px;\n  border-bottom: 1px solid var(--mj-border-subtle); font-weight: 650; font-size: 12.5px; color: var(--mj-text-primary);\n}\n.ps-node .nh i.tile {\n  width: 24px; height: 24px; border-radius: 6px; display: grid; place-items: center;\n  color: var(--mj-text-inverse); font-size: 12px; flex: 0 0 auto;\n}\n.ps-node .nh .ps-tag { margin-left: auto; }\n.ps-node .nb { padding: 9px 11px; font-size: 12px; color: var(--mj-text-secondary); }\n.ps-node .nb-row { display: flex; justify-content: space-between; gap: 8px; padding: 2px 0; }\n.ps-node .nb-row .k { color: var(--mj-text-muted); }\n.ps-node.src { border-left-color: var(--ps-node-source); }\n.ps-node.src .nh i.tile { background: var(--ps-node-source); }\n.ps-node.feat { border-left-color: var(--ps-node-feature); }\n.ps-node.feat .nh i.tile { background: var(--ps-node-feature); }\n.ps-node.emb { border-left-color: var(--ps-node-embedding); }\n.ps-node.emb .nh i.tile { background: var(--ps-node-embedding); }\n.ps-node.target { border-left-color: var(--ps-node-target); }\n.ps-node.target .nh i.tile { background: var(--ps-node-target); }\n.ps-node.algo { border-left-color: var(--ps-node-algorithm); }\n.ps-node.algo .nh i.tile { background: var(--ps-node-algorithm); }\n.ps-node.output { border-left-color: var(--mj-status-success); }\n.ps-node.output .nh i.tile { background: var(--mj-status-success); }\n.ps-node.selected {\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 18%, transparent);\n}\n.ps-node .port {\n  position: absolute; width: 11px; height: 11px; border-radius: 50%;\n  background: var(--mj-bg-surface); border: 2px solid var(--mj-brand-primary);\n  top: 50%; transform: translateY(-50%);\n}\n.ps-node .port.in { left: -6px; }\n.ps-node .port.out { right: -6px; }\nsvg.ps-edges { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }\nsvg.ps-edges path { stroke: color-mix(in srgb, var(--mj-brand-primary) 45%, transparent); stroke-width: 2; fill: none; }\n\n/* palette chips */\n.ps-pchip {\n  display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 8px;\n  border: 1px dashed var(--mj-border-strong); background: var(--mj-bg-surface);\n  font-size: 12.5px; font-weight: 600; color: var(--mj-text-secondary); cursor: grab;\n}\n.ps-pchip i { font-size: 12px; color: var(--mj-text-inverse); width: 20px; height: 20px; border-radius: 5px; display: grid; place-items: center; }\n.ps-pchip.s i { background: var(--ps-node-source); }\n.ps-pchip.f i { background: var(--ps-node-feature); }\n.ps-pchip.e i { background: var(--ps-node-embedding); }\n.ps-pchip.t i { background: var(--ps-node-target); }\n.ps-pchip.a i { background: var(--ps-node-algorithm); }\n\n/* segmented control */\n.ps-seg { display: inline-flex; border: 1px solid var(--mj-border-default); border-radius: 8px; overflow: hidden; }\n.ps-seg button {\n  border: none; background: var(--mj-bg-surface); color: var(--mj-text-secondary);\n  padding: 6px 12px; font-size: 12.5px; font-weight: 600; cursor: pointer;\n  border-right: 1px solid var(--mj-border-default);\n}\n.ps-seg button:last-child { border-right: none; }\n.ps-seg button.on { background: var(--mj-brand-primary); color: var(--mj-text-inverse); }\n\n/* field control */\n.ps-field { margin-bottom: 14px; }\n.ps-field > label {\n  display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .04em;\n  color: var(--mj-text-muted); font-weight: 700; margin-bottom: 6px;\n}\n.ps-input {\n  width: 100%; padding: 8px 10px; border: 1px solid var(--mj-border-default);\n  border-radius: 6px; font-size: 13px; background: var(--mj-bg-surface); color: var(--mj-text-primary);\n  box-sizing: border-box;\n}\n.ps-input:focus { outline: none; border-color: var(--mj-brand-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 12%, transparent); }\n\n/* loading container */\n.ps-loading { display: flex; align-items: center; justify-content: center; padding: 60px 0; }\n\n/* ---- empty / prompt states ---- */\n.ps-empty {\n  display: flex; flex-direction: column; align-items: center; justify-content: center;\n  text-align: center; gap: 10px; padding: 56px 24px; color: var(--mj-text-muted);\n}\n.ps-empty .ps-empty-ico {\n  width: 60px; height: 60px; border-radius: 16px; display: grid; place-items: center;\n  background: var(--mj-bg-surface-sunken); color: var(--mj-text-disabled); font-size: 24px;\n}\n.ps-empty h3 { margin: 4px 0 0; font-size: 16px; font-weight: 650; color: var(--mj-text-secondary); }\n.ps-empty p { margin: 0; max-width: 420px; font-size: 13px; line-height: 1.5; }\n\n/* ---- confirm modal ---- */\n.ps-modal-backdrop {\n  position: fixed; inset: 0; z-index: 1000;\n  background: var(--mj-bg-overlay);\n  display: flex; align-items: center; justify-content: center; padding: 24px;\n}\n.ps-modal {\n  width: 100%; max-width: 480px; background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default); border-radius: 14px;\n  box-shadow: var(--mj-shadow-lg, var(--mj-shadow-sm)); overflow: hidden;\n}\n.ps-modal-head {\n  display: flex; align-items: center; gap: 12px; padding: 18px 20px;\n  border-bottom: 1px solid var(--mj-border-subtle);\n}\n.ps-modal-head .ico {\n  width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center;\n  font-size: 16px; flex: 0 0 auto;\n  background: var(--mj-status-info-bg); color: var(--mj-status-info-text);\n}\n.ps-modal-head.warn .ico { background: var(--mj-status-warning-bg); color: var(--mj-status-warning-text); }\n.ps-modal-head.danger .ico { background: var(--mj-status-error-bg); color: var(--mj-status-error-text); }\n.ps-modal-head h3 { margin: 0; font-size: 15.5px; font-weight: 650; color: var(--mj-text-primary); }\n.ps-modal-body { padding: 18px 20px; font-size: 13.5px; line-height: 1.55; color: var(--mj-text-secondary); }\n.ps-modal-body .ps-field { margin-top: 14px; margin-bottom: 0; }\n.ps-modal-foot {\n  display: flex; align-items: center; gap: 10px; padding: 14px 20px;\n  border-top: 1px solid var(--mj-border-subtle); background: var(--mj-bg-surface-card);\n}\n.ps-modal-foot .ps-spacer { flex: 1; }\n", "/* ============================================================================\n   Predictive Studio \u2014 Unified Predictions Grid & Detail Panel styles\n   Design-token compliant (all --mj-* semantic tokens).\n   ============================================================================ */\n\n.ps-pred-grid-host {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  min-height: 0;\n  box-sizing: border-box;\n}\n\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 TOOLBAR \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pg-toolbar {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n  padding: 8px 12px;\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md);\n  margin-bottom: 12px;\n  flex-wrap: wrap;\n}\n\n.pg-toolbar-left {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex: 1;\n  min-width: 240px;\n}\n\n.pg-search-box {\n  position: relative;\n  display: flex;\n  align-items: center;\n  max-width: 260px;\n  width: 100%;\n}\n\n.pg-search-box i {\n  position: absolute;\n  left: 10px;\n  color: var(--mj-text-muted);\n  font-size: 12px;\n  pointer-events: none;\n}\n\n.pg-search-input {\n  width: 100%;\n  padding: 6px 10px 6px 30px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-sm);\n  background: var(--mj-bg-surface);\n  font-size: var(--mj-text-xs);\n  color: var(--mj-text-primary);\n  outline: none;\n  transition: border-color .15s;\n}\n\n.pg-search-input:focus {\n  border-color: var(--mj-brand-primary);\n}\n\n.pg-search-clear {\n  position: absolute;\n  right: 8px;\n  background: transparent;\n  border: none;\n  cursor: pointer;\n  padding: 2px 4px;\n  color: var(--mj-text-muted);\n  font-size: 11px;\n}\n\n.pg-search-clear:hover {\n  color: var(--mj-text-primary);\n}\n\n.pg-decile-pill {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 2px 8px;\n  border-radius: var(--mj-radius-full);\n  background: color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n  border: 1px solid var(--mj-brand-primary);\n  font-size: var(--mj-text-xs);\n  font-weight: 600;\n  color: var(--mj-brand-primary);\n}\n\n.pg-decile-pill button {\n  background: transparent;\n  border: none;\n  cursor: pointer;\n  padding: 0;\n  color: var(--mj-brand-primary);\n  font-size: 10px;\n}\n\n.pg-tier-filters {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  flex-wrap: wrap;\n}\n\n.pg-tier-btn {\n  cursor: pointer;\n  border: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n  border-radius: var(--mj-radius-full);\n  padding: 3px 10px;\n  font-size: var(--mj-text-xs);\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n  transition: all .15s;\n  display: inline-flex;\n  align-items: center;\n  gap: 5px;\n}\n\n.pg-tier-btn:hover {\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-primary);\n}\n\n.pg-tier-btn.active {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  border-color: var(--mj-brand-primary);\n}\n\n.pg-tier-btn.tier-high.active {\n  background: var(--mj-status-error);\n  border-color: var(--mj-status-error);\n}\n\n.pg-tier-btn.tier-medium.active {\n  background: var(--mj-status-warning);\n  border-color: var(--mj-status-warning);\n}\n\n.pg-tier-btn.tier-low.active {\n  background: var(--mj-status-success);\n  border-color: var(--mj-status-success);\n}\n\n.pg-count-pill {\n  font-size: 10px;\n  opacity: .85;\n}\n\n.pg-toolbar-right {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 GRID CONTAINER \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pg-view-container {\n  flex: 1;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n}\n\n.pg-grid {\n  width: 100%;\n  flex: 1;\n  min-height: 380px;\n}\n\n/* AG Grid cell styling overrides */\n.pg-record-cell {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  gap: 2px;\n  height: 100%;\n  min-width: 0;\n  line-height: 1.2;\n}\n\n.pg-record-title-row {\n  display: flex;\n  align-items: center;\n  min-width: 0;\n}\n\n.pg-record-link {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  max-width: 100%;\n  text-decoration: none;\n  cursor: pointer;\n  min-width: 0;\n}\n\n.pg-record-name {\n  font-weight: 600;\n  font-size: var(--mj-text-sm);\n  color: var(--mj-text-link);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.pg-record-link:hover .pg-record-name {\n  text-decoration: underline;\n}\n\n.pg-record-open-icon {\n  font-size: 10px;\n  color: var(--mj-text-muted);\n  flex-shrink: 0;\n  transition: transform .15s, color .15s;\n}\n\n.pg-record-link:hover .pg-record-open-icon {\n  transform: translateY(-1px) translateX(1px);\n  color: var(--mj-text-primary);\n}\n\n.pg-record-id {\n  font-size: 11px;\n  color: var(--mj-text-muted);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.pg-score-cell {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  height: 100%;\n  min-width: 0;\n}\n\n.pg-score-bar {\n  flex: 1;\n  height: 8px;\n  border-radius: var(--mj-radius-full);\n  background: var(--mj-bg-surface-sunken);\n  overflow: hidden;\n}\n\n.pg-score-fill {\n  display: block;\n  height: 100%;\n  border-radius: var(--mj-radius-full);\n}\n\n.pg-score-fill.risk-high,\n.pg-score-fill.badge-red { background: var(--mj-status-error); }\n.pg-score-fill.risk-medium,\n.pg-score-fill.badge-amber { background: var(--mj-status-warning); }\n.pg-score-fill.risk-low,\n.pg-score-fill.badge-green { background: var(--mj-status-success); }\n.pg-score-fill.badge-blue { background: var(--mj-brand-primary); }\n.pg-score-fill.badge-gray { background: var(--mj-text-muted); }\n\n.pg-score-val {\n  font-weight: 700;\n  font-size: var(--mj-text-xs);\n  font-variant-numeric: tabular-nums;\n  min-width: 44px;\n  text-align: right;\n}\n\n.pg-score-val.risk-high,\n.pg-score-val.badge-red { color: var(--mj-status-error-text, var(--mj-status-error)); }\n.pg-score-val.risk-medium,\n.pg-score-val.badge-amber { color: var(--mj-status-warning-text, var(--mj-status-warning)); }\n.pg-score-val.risk-low,\n.pg-score-val.badge-green { color: var(--mj-status-success-text, var(--mj-status-success)); }\n.pg-score-val.badge-blue { color: var(--mj-brand-primary); }\n.pg-score-val.badge-gray { color: var(--mj-text-muted); }\n\n.pg-drivers-cell {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  height: 100%;\n  overflow: hidden;\n  flex-wrap: nowrap;\n}\n\n.pg-action-btn {\n  background: transparent;\n  border: none;\n  cursor: pointer;\n  padding: 6px 8px;\n  border-radius: 6px;\n  color: var(--mj-text-muted);\n  font-size: 12px;\n  transition: all .15s;\n}\n\n.pg-action-btn:hover {\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-brand-primary);\n}\n\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 FOOTER \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pg-footer {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 8px 12px;\n  background: var(--mj-bg-surface-card);\n  border-top: 1px solid var(--mj-border-subtle);\n  font-size: var(--mj-text-xs);\n  color: var(--mj-text-muted);\n}\n\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 CHART VIEW \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pg-chart-container {\n  flex: 1;\n  min-height: 0;\n  overflow-y: auto;\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  padding: 4px 0 12px;\n}\n\n.pg-chart-cards {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));\n  gap: 12px;\n}\n\n.pg-chart-card {\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md);\n  padding: 14px 16px;\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  cursor: pointer;\n  transition: all .15s;\n}\n\n.pg-chart-card:hover {\n  background: var(--mj-bg-surface-hover);\n}\n\n.pg-chart-card.total { border-left: 4px solid var(--mj-brand-primary); }\n.pg-chart-card.tier-high { border-left: 4px solid var(--mj-status-error); }\n.pg-chart-card.tier-medium { border-left: 4px solid var(--mj-status-warning); }\n.pg-chart-card.tier-low { border-left: 4px solid var(--mj-status-success); }\n\n.pg-chart-card-val {\n  font-size: var(--mj-text-xl);\n  font-weight: 700;\n  color: var(--mj-text-primary);\n}\n\n.pg-chart-card-lbl {\n  font-size: var(--mj-text-xs);\n  color: var(--mj-text-secondary);\n  font-weight: 600;\n}\n\n.pg-chart-card-sub {\n  font-size: 11px;\n  color: var(--mj-text-muted);\n}\n\n.pg-chart-section {\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md);\n  padding: 18px 20px;\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n\n.pg-chart-section-title {\n  font-size: var(--mj-text-sm);\n  font-weight: 650;\n  color: var(--mj-text-primary);\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  flex-wrap: wrap;\n  gap: 8px;\n}\n\n.pg-chart-meta {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n\n.pg-clear-decile-btn {\n  background: var(--mj-bg-surface-sunken);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-full);\n  padding: 2px 10px;\n  font-size: 11px;\n  font-weight: 600;\n  cursor: pointer;\n  color: var(--mj-text-secondary);\n  transition: all .15s;\n}\n\n.pg-clear-decile-btn:hover {\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-primary);\n  border-color: var(--mj-border-subtle);\n}\n\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 MODERN HISTOGRAM \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pg-histogram {\n  position: relative;\n  width: 100%;\n  padding-top: 8px;\n  padding-bottom: 28px;\n}\n\n.pg-h-columns {\n  display: flex;\n  align-items: flex-end;\n  justify-content: space-between;\n  gap: 8px;\n  height: 200px;\n  padding: 0 4px;\n  border-bottom: 2px solid var(--mj-border-default);\n}\n\n.pg-h-col {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: flex-end;\n  height: 100%;\n  cursor: pointer;\n  position: relative;\n  transition: transform .15s;\n  user-select: none;\n}\n\n.pg-h-col:hover {\n  transform: translateY(-2px);\n}\n\n.pg-h-count {\n  font-size: 11px;\n  font-weight: 700;\n  color: var(--mj-text-primary);\n  margin-bottom: 6px;\n  white-space: nowrap;\n  font-variant-numeric: tabular-nums;\n}\n\n.pg-h-bar-track {\n  width: 100%;\n  max-width: 52px;\n  display: flex;\n  align-items: flex-end;\n  justify-content: center;\n}\n\n.pg-h-bar {\n  width: 100%;\n  border-radius: 4px 4px 0 0;\n  transition: height .3s cubic-bezier(0.4, 0, 0.2, 1), opacity .15s, box-shadow .15s;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);\n}\n\n.pg-h-col:hover .pg-h-bar {\n  filter: brightness(1.1);\n  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);\n}\n\n.pg-h-col.active .pg-h-bar {\n  outline: 3px solid var(--mj-brand-primary);\n  outline-offset: 1px;\n}\n\n.pg-h-footer {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  margin-top: 8px;\n  position: absolute;\n  top: 100%;\n  left: 0;\n  right: 0;\n}\n\n.pg-h-range {\n  font-size: 10px;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n}\n\n.pg-h-pct {\n  font-size: 10px;\n  color: var(--mj-text-muted);\n}\n\n/* Tooltip card */\n.pg-h-tooltip {\n  position: absolute;\n  bottom: calc(100% + 4px);\n  left: 50%;\n  transform: translateX(-50%);\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);\n  border-radius: var(--mj-radius-md);\n  padding: 8px 12px;\n  white-space: nowrap;\n  pointer-events: none;\n  opacity: 0;\n  visibility: hidden;\n  transition: opacity .15s, visibility .15s;\n  z-index: 50;\n}\n\n.pg-h-col:hover .pg-h-tooltip {\n  opacity: 1;\n  visibility: visible;\n}\n\n.pg-h-tt-head {\n  font-size: 11px;\n  font-weight: 700;\n  color: var(--mj-text-primary);\n  margin-bottom: 2px;\n}\n\n.pg-h-tt-row {\n  display: flex;\n  gap: 6px;\n  align-items: center;\n  font-size: 11px;\n}\n\n.pg-h-tt-val {\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.pg-h-tt-pct {\n  color: var(--mj-text-muted);\n}\n\n.pg-h-tt-badge {\n  font-size: 10px;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  margin-top: 3px;\n}\n\n.pg-h-tt-hint {\n  font-size: 9px;\n  color: var(--mj-text-muted);\n  font-style: italic;\n  margin-top: 4px;\n}\n\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 SLIDE PANEL DETAIL \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pg-detail-body {\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n  padding: 18px 20px 32px;\n}\n\n.pg-detail-record-head {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 14px;\n  padding-bottom: 14px;\n  border-bottom: 1px solid var(--mj-border-subtle);\n}\n\n.pg-detail-record-info h3 {\n  margin: 0 0 4px;\n  font-size: var(--mj-text-lg);\n  font-weight: 700;\n  color: var(--mj-text-primary);\n}\n\n.pg-detail-pred-card {\n  display: flex;\n  align-items: center;\n  gap: 20px;\n  padding: 16px 18px;\n  border-radius: var(--mj-radius-md);\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n}\n\n.pg-detail-score-circle {\n  width: 72px;\n  height: 72px;\n  border-radius: 50%;\n  display: grid;\n  place-items: center;\n  font-size: 19px;\n  font-weight: 800;\n  color: var(--mj-text-inverse);\n  flex-shrink: 0;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, .12);\n}\n\n.pg-detail-score-circle.risk-high,\n.pg-detail-score-circle.badge-red { background: var(--mj-status-error); }\n.pg-detail-score-circle.risk-medium,\n.pg-detail-score-circle.badge-amber { background: var(--mj-status-warning); }\n.pg-detail-score-circle.risk-low,\n.pg-detail-score-circle.badge-green { background: var(--mj-status-success); }\n.pg-detail-score-circle.badge-blue { background: var(--mj-brand-primary); }\n.pg-detail-score-circle.badge-gray { background: var(--mj-text-muted); }\n\n.pg-detail-meta {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  flex: 1;\n}\n\n.pg-detail-meta-line {\n  font-size: var(--mj-text-sm);\n  color: var(--mj-text-primary);\n}\n\n.pg-detail-meta-sub {\n  font-size: var(--mj-text-xs);\n  color: var(--mj-text-muted);\n}\n\n.pg-detail-drivers-wrap {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 TRENDLINE CHART & TABLE \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pg-trendline-wrap {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  padding: 16px;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md);\n}\n\n.pg-trendline-svg {\n  width: 100%;\n  height: 180px;\n  overflow: visible;\n}\n\n.pg-history-table {\n  width: 100%;\n  border-collapse: collapse;\n  font-size: var(--mj-text-xs);\n  margin-top: 6px;\n}\n\n.pg-history-table th {\n  text-align: left;\n  padding: 6px 8px;\n  border-bottom: 1px solid var(--mj-border-default);\n  color: var(--mj-text-muted);\n  font-weight: 600;\n  font-size: 11px;\n  text-transform: uppercase;\n  letter-spacing: .03em;\n}\n\n.pg-history-table td {\n  padding: 7px 8px;\n  border-bottom: 1px solid var(--mj-border-subtle);\n  color: var(--mj-text-secondary);\n}\n\n.pg-history-table tr:last-child td {\n  border-bottom: none;\n}\n\n.pg-delta-pill {\n  display: inline-flex;\n  align-items: center;\n  gap: 3px;\n  font-weight: 700;\n  font-size: 11px;\n  padding: 1px 6px;\n  border-radius: var(--mj-radius-full);\n}\n\n.pg-delta-pill.up { background: var(--mj-status-error-bg); color: var(--mj-status-error-text); }\n.pg-delta-pill.down { background: var(--mj-status-success-bg); color: var(--mj-status-success-text); }\n.pg-delta-pill.neutral { background: var(--mj-bg-surface-sunken); color: var(--mj-text-muted); }\n\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 CHART DRILLDOWN GRID \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pg-chart-drilldown-section {\n  padding: 16px 18px;\n  gap: 12px;\n}\n\n.pg-chart-grid-host {\n  width: 100%;\n  height: 440px;\n  min-height: 320px;\n  border-radius: var(--mj-radius-sm);\n  overflow: hidden;\n  border: 1px solid var(--mj-border-default);\n}\n\n.pg-chart-ag-grid {\n  width: 100%;\n  height: 100%;\n}\n\n.pg-drilldown-footer {\n  display: flex;\n  justify-content: flex-end;\n  font-size: var(--mj-text-xs);\n  color: var(--mj-text-muted);\n  padding-top: 2px;\n}\n"] }]
     }], null, { modelId: [{
             type: Input
         }], RunId: [{
@@ -2283,6 +2288,10 @@ export class PSPredictionsGridComponent extends BaseAngularComponent {
             type: Input
         }], readOnly: [{
             type: Input
+        }], RowsLoaded: [{
+            type: Output
+        }], RowsLoadFailed: [{
+            type: Output
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PSPredictionsGridComponent, { className: "PSPredictionsGridComponent", filePath: "src/PredictiveStudio/components/ps-predictions-grid.component.ts", lineNumber: 151 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PSPredictionsGridComponent, { className: "PSPredictionsGridComponent", filePath: "src/PredictiveStudio/components/ps-predictions-grid.component.ts", lineNumber: 168 }); })();
 //# sourceMappingURL=ps-predictions-grid.component.js.map