@mj-biz-apps/contracts-ng 0.2.0 → 0.3.0

package/dist/lib/form-panels/contract.panels.js

@@ -14,7 +14,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
  *
  *  1. **The panels were not `<mj-collapsible-panel>`s.** They were hand-rolled `<div class="card">`s, so
  *     they had none of MJ's panel chrome — hence text with no card behind it, cards touching each other,
- *     and content overflowing. The one panel that looked right (Documents) was the one panel built on
+ *     and content overflowing. The panels that looked right were the ones built on
  *     the real component.
  *  2a. **`contributionKey` MUST EQUAL the panel's own `SectionKey`, and must DIFFER from
  *      `replacesSectionKey`.** This is the rule that took longest to find, because breaking it fails
@@ -42,75 +42,196 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { ChangeDetectorRef, Component, ViewEncapsulation, inject } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
+import { CompositeKey } from '@memberjunction/core';
+import { UserInfoEngine } from '@memberjunction/core-entities';
 import { RegisterClassEx } from '@memberjunction/global';
 import { BaseFormPanel, BaseFormsModule } from '@memberjunction/ng-base-forms';
 import { HierarchyTreeComponent } from '@memberjunction/ng-hierarchy-tree';
-import { NavigationService } from '@memberjunction/ng-shared';
-import { MJC_ENTITIES } from '../data/entity-names';
+import { MJC_ENTITIES, MJC_FOREIGN_ENTITIES } from '../data/entity-names';
 import * as i0 from "@angular/core";
-import * as i1 from "@angular/common";
-import * as i2 from "@angular/forms";
-import * as i3 from "@memberjunction/ng-base-forms";
-function MJCContractHeroPanel_Conditional_10_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵdomElementStart(0, "span", 8);
+import * as i1 from "@memberjunction/ng-base-forms";
+import * as i2 from "@angular/common";
+import * as i3 from "@angular/forms";
+function MJCContractHeroPanel_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "span", 4);
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("title", ctx_r0.State);
+    i0.ɵɵattribute("data-tone", ctx_r0.StatusTone);
+} }
+function MJCContractHeroPanel_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 8);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r0.Record.ContractNumber);
+} }
+function MJCContractHeroPanel_Conditional_16_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 12);
     i0.ɵɵtext(1);
-    i0.ɵɵdomElementEnd();
+    i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(ctx_r0.TypeName);
 } }
-function MJCContractHeroPanel_Conditional_11_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵdomElementStart(0, "span", 9);
-    i0.ɵɵdomElement(1, "i", 19);
+function MJCContractHeroPanel_Conditional_17_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 13);
+    i0.ɵɵelement(1, "i", 16);
     i0.ɵɵtext(2, " Agreement modified ");
-    i0.ɵɵdomElementEnd();
+    i0.ɵɵelementEnd();
 } }
-function MJCContractHeroPanel_Conditional_12_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵdomElementStart(0, "span", 10);
-    i0.ɵɵdomElement(1, "i", 20);
+function MJCContractHeroPanel_Conditional_18_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 14);
+    i0.ɵɵelement(1, "i", 17);
     i0.ɵɵtext(2, " Awaiting document ");
-    i0.ɵɵdomElementEnd();
+    i0.ɵɵelementEnd();
 } }
-function MJCContractHeroPanel_Conditional_24_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵdomElementStart(0, "span");
-    i0.ɵɵtext(1, "Contact: ");
-    i0.ɵɵdomElementStart(2, "strong");
-    i0.ɵɵtext(3);
-    i0.ɵɵdomElementEnd()();
+function MJCContractHeroPanel_Conditional_21_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    const _r2 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 26);
+    i0.ɵɵlistener("click", function MJCContractHeroPanel_Conditional_21_Conditional_9_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.OpenCustomer($event)); });
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(ctx_r0.ContactName);
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r0.CustomerName);
 } }
-function MJCContractHeroPanel_Conditional_32_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵdomElementStart(0, "span", 17);
-    i0.ɵɵtext(1, "not signed yet");
-    i0.ɵɵdomElementEnd();
+function MJCContractHeroPanel_Conditional_21_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 21);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r0.CustomerName || "\u2014");
 } }
-function MJCContractHeroPanel_Conditional_45_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵdomElementStart(0, "span", 17);
+function MJCContractHeroPanel_Conditional_21_Conditional_14_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 26);
+    i0.ɵɵlistener("click", function MJCContractHeroPanel_Conditional_21_Conditional_14_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.OpenContact($event)); });
     i0.ɵɵtext(1);
-    i0.ɵɵdomElementEnd();
+    i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext();
+    const ctx_r0 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(ctx_r0.EndsInText);
+    i0.ɵɵtextInterpolate(ctx_r0.ContactName);
 } }
-function MJCContractHeroPanel_Conditional_51_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵdomElementStart(0, "span", 17);
-    i0.ɵɵtext(1, "no standard terms referenced");
-    i0.ɵɵdomElementEnd();
+function MJCContractHeroPanel_Conditional_21_Conditional_15_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 21);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r0.ContactName || "\u2014");
+} }
+function MJCContractHeroPanel_Conditional_21_Conditional_44_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 23)(1, "span", 20);
+    i0.ɵɵtext(2, "Term");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "span", 27);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate(ctx_r0.EndsInText);
 } }
-function MJCContractHeroPanel_Conditional_57_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵdomElementStart(0, "span", 17);
-    i0.ɵɵtext(1, "entered directly");
-    i0.ɵɵdomElementEnd();
+function MJCContractHeroPanel_Conditional_21_Conditional_45_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 24)(1, "div", 28);
+    i0.ɵɵelement(2, "mj-form-field", 29);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("Record", ctx_r0.Record)("ShowLabel", true)("EditMode", ctx_r0.EditMode)("FormContext", ctx_r0.FormContext);
 } }
-function MJCContractHeroPanel_Conditional_58_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵdomElementStart(0, "div", 18);
+function MJCContractHeroPanel_Conditional_21_Conditional_46_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 25);
     i0.ɵɵtext(1, " The contract number is minted on first save, from a counter taken under a lock \u2014 so it cannot collide with another contract created at the same moment. ");
-    i0.ɵɵdomElementEnd();
+    i0.ɵɵelementEnd();
+} }
+function MJCContractHeroPanel_Conditional_21_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 18)(1, "div", 19)(2, "span", 20);
+    i0.ɵɵtext(3, "Company");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "span", 21);
+    i0.ɵɵtext(5);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(6, "div", 19)(7, "span", 20);
+    i0.ɵɵtext(8, "Customer");
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(9, MJCContractHeroPanel_Conditional_21_Conditional_9_Template, 2, 1, "button", 22)(10, MJCContractHeroPanel_Conditional_21_Conditional_10_Template, 2, 1, "span", 21);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(11, "div", 19)(12, "span", 20);
+    i0.ɵɵtext(13, "Contact");
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(14, MJCContractHeroPanel_Conditional_21_Conditional_14_Template, 2, 1, "button", 22)(15, MJCContractHeroPanel_Conditional_21_Conditional_15_Template, 2, 1, "span", 21);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(16, "div", 19)(17, "span", 20);
+    i0.ɵɵtext(18, "Executed");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(19, "span", 21);
+    i0.ɵɵtext(20);
+    i0.ɵɵpipe(21, "date");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(22, "div", 19)(23, "span", 20);
+    i0.ɵɵtext(24, "Effective");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(25, "span", 21);
+    i0.ɵɵtext(26);
+    i0.ɵɵpipe(27, "date");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(28, "div", 19)(29, "span", 20);
+    i0.ɵɵtext(30, "Term ends");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(31, "span", 21);
+    i0.ɵɵtext(32);
+    i0.ɵɵpipe(33, "date");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(34, "div", 19)(35, "span", 20);
+    i0.ɵɵtext(36, "Agreement");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(37, "span", 21);
+    i0.ɵɵtext(38);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(39, "div", 19)(40, "span", 20);
+    i0.ɵɵtext(41, "Created from");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(42, "span", 21);
+    i0.ɵɵtext(43);
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵconditionalCreate(44, MJCContractHeroPanel_Conditional_21_Conditional_44_Template, 5, 1, "div", 23);
+    i0.ɵɵconditionalCreate(45, MJCContractHeroPanel_Conditional_21_Conditional_45_Template, 3, 4, "div", 24);
+    i0.ɵɵconditionalCreate(46, MJCContractHeroPanel_Conditional_21_Conditional_46_Template, 2, 0, "div", 25);
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate(ctx_r0.CompanyName || "\u2014");
+    i0.ɵɵadvance(4);
+    i0.ɵɵconditional(ctx_r0.Record.CustomerOrganizationID && ctx_r0.CustomerName ? 9 : 10);
+    i0.ɵɵadvance(5);
+    i0.ɵɵconditional(ctx_r0.Record.PrimaryContactPersonID && ctx_r0.ContactName ? 14 : 15);
+    i0.ɵɵadvance(6);
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(21, 11, ctx_r0.Record.ExecutedDate, "d MMM y") || "\u2014");
+    i0.ɵɵadvance(6);
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(27, 14, ctx_r0.Record.EffectiveDate, "d MMM y") || "\u2014");
+    i0.ɵɵadvance(6);
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(33, 17, ctx_r0.Record.EndDate, "d MMM y") || "\u2014");
+    i0.ɵɵadvance(6);
+    i0.ɵɵtextInterpolate(ctx_r0.TemplateName || "\u2014");
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate(ctx_r0.CreatingEntityName || "Entered directly");
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r0.DaysToEnd !== null ? 44 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r0.EditMode ? 45 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(!ctx_r0.Record.ContractNumber ? 46 : -1);
 } }
 function MJCContractRenewalPanel_Conditional_8_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
@@ -162,7 +283,7 @@ function MJCContractRenewalPanel_Conditional_15_Template(rf, ctx) { if (rf & 1)
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(ctx_r1.Record.RenewalNoticeDays ? ctx_r1.Record.RenewalNoticeDays + " days" : "\u2014");
 } }
-function MJCContractRenewalPanel_Conditional_16_Template(rf, ctx) { if (rf & 1) {
+function MJCContractRenewalPanel_Conditional_18_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 7);
     i0.ɵɵtext(1);
     i0.ɵɵpipe(2, "date");
@@ -172,16 +293,16 @@ function MJCContractRenewalPanel_Conditional_16_Template(rf, ctx) { if (rf & 1)
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1("deadline: ", i0.ɵɵpipeBind2(2, 1, ctx_r1.NoticeDeadline, "d MMM y"));
 } }
-function MJCContractRenewalPanel_Conditional_20_Template(rf, ctx) { if (rf & 1) {
+function MJCContractRenewalPanel_Conditional_22_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "input", 16);
-    i0.ɵɵlistener("ngModelChange", function MJCContractRenewalPanel_Conditional_20_Template_input_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.Set("CancellationWindowDays", $event)); });
+    i0.ɵɵlistener("ngModelChange", function MJCContractRenewalPanel_Conditional_22_Template_input_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.Set("CancellationWindowDays", $event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵproperty("ngModel", ctx_r1.Record.CancellationWindowDays);
 } }
-function MJCContractRenewalPanel_Conditional_21_Template(rf, ctx) { if (rf & 1) {
+function MJCContractRenewalPanel_Conditional_23_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 6);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
@@ -190,21 +311,21 @@ function MJCContractRenewalPanel_Conditional_21_Template(rf, ctx) { if (rf & 1)
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(ctx_r1.Record.CancellationWindowDays ? ctx_r1.Record.CancellationWindowDays + " days" : "\u2014");
 } }
-function MJCContractRenewalPanel_Conditional_22_Template(rf, ctx) { if (rf & 1) {
+function MJCContractRenewalPanel_Conditional_26_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 7);
     i0.ɵɵtext(1, "the window is open now");
     i0.ɵɵelementEnd();
 } }
-function MJCContractRenewalPanel_Conditional_26_Template(rf, ctx) { if (rf & 1) {
+function MJCContractRenewalPanel_Conditional_30_Template(rf, ctx) { if (rf & 1) {
     const _r5 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "input", 17);
-    i0.ɵɵlistener("ngModelChange", function MJCContractRenewalPanel_Conditional_26_Template_input_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.Set("AnnualIncreasePercent", $event)); });
+    i0.ɵɵlistener("ngModelChange", function MJCContractRenewalPanel_Conditional_30_Template_input_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.Set("AnnualIncreasePercent", $event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵproperty("ngModel", ctx_r1.Record.AnnualIncreasePercent);
 } }
-function MJCContractRenewalPanel_Conditional_27_Template(rf, ctx) { if (rf & 1) {
+function MJCContractRenewalPanel_Conditional_31_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 6);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
@@ -213,7 +334,7 @@ function MJCContractRenewalPanel_Conditional_27_Template(rf, ctx) { if (rf & 1)
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(ctx_r1.Record.AnnualIncreasePercent !== null ? ctx_r1.Record.AnnualIncreasePercent + "%" : "\u2014");
 } }
-function MJCContractRenewalPanel_Conditional_30_Template(rf, ctx) { if (rf & 1) {
+function MJCContractRenewalPanel_Conditional_34_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 12);
     i0.ɵɵtext(1, " No renewal terms recorded. If the agreement states any, recording them is what puts this contract on the renewals watchlist. ");
     i0.ɵɵelementEnd();
@@ -331,6 +452,7 @@ function MJCContractLineagePanel_Conditional_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(1, " A standalone agreement \u2014 nothing above it, no change orders, and nothing has replaced it. ");
     i0.ɵɵelementEnd();
 } }
+const COLLAPSE_SETTING = 'mj.identityHeader.collapsed.contract';
 /** Chip variant per lifecycle state — colour carries meaning, so each state gets a considered one. */
 function chipClassFor(state) {
     switch (state) {
@@ -346,6 +468,22 @@ function chipClassFor(state) {
  * 1 · Hero — persistent identity, above the rail
  * ──────────────────────────────────────────────────────────────────────────── */
 let MJCContractHeroPanel = class MJCContractHeroPanel extends BaseFormPanel {
+    Collapsed = false;
+    ngOnInit() {
+        const raw = UserInfoEngine.Instance.GetSetting(COLLAPSE_SETTING);
+        if (raw) {
+            try {
+                this.Collapsed = JSON.parse(raw) === true;
+            }
+            catch {
+                this.Collapsed = false;
+            }
+        }
+    }
+    ToggleCollapsed() {
+        this.Collapsed = !this.Collapsed;
+        UserInfoEngine.Instance.SetSettingDebounced(COLLAPSE_SETTING, JSON.stringify(this.Collapsed));
+    }
     /**
      * The human name for this agreement: its description, falling back to the number.
      *
@@ -384,6 +522,14 @@ let MJCContractHeroPanel = class MJCContractHeroPanel extends BaseFormPanel {
     get CreatingEntityName() { return this.Record?.CreatingEntity ?? ''; }
     get IsAwaitingDocument() { return this.Record?.IsAwaitingDocument === true; }
     get DaysToEnd() { return this.Record?.DaysToEnd ?? null; }
+    get StatusTone() {
+        switch (this.State) {
+            case 'Active':
+            case 'Executed': return 'success';
+            case 'Terminated': return 'warning';
+            default: return 'muted';
+        }
+    }
     /** "in 16 months" reads better than "in 487 days" past a couple of months — the mockup's phrasing. */
     get EndsInText() {
         const d = this.DaysToEnd;
@@ -398,121 +544,76 @@ let MJCContractHeroPanel = class MJCContractHeroPanel extends BaseFormPanel {
         const months = Math.round(d / 30);
         return `in ${months} month${months === 1 ? '' : 's'}`;
     }
+    OpenCustomer(event) {
+        this.open(event, MJC_FOREIGN_ENTITIES.Organization, this.Record?.CustomerOrganizationID);
+    }
+    OpenContact(event) {
+        this.open(event, MJC_FOREIGN_ENTITIES.Person, this.Record?.PrimaryContactPersonID);
+    }
+    open(event, entity, id) {
+        if (!id)
+            return;
+        event.preventDefault();
+        this.FormComponent.OnFormNavigate({
+            Kind: 'record',
+            EntityName: entity,
+            PrimaryKey: CompositeKey.FromID(id),
+            OpenInNewTab: event.ctrlKey || event.metaKey,
+        });
+    }
     static ɵfac = /*@__PURE__*/ (() => { let ɵMJCContractHeroPanel_BaseFactory; return function MJCContractHeroPanel_Factory(__ngFactoryType__) { return (ɵMJCContractHeroPanel_BaseFactory || (ɵMJCContractHeroPanel_BaseFactory = i0.ɵɵgetInheritedFactory(MJCContractHeroPanel)))(__ngFactoryType__ || MJCContractHeroPanel); }; })();
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MJCContractHeroPanel, selectors: [["mjc-contract-hero-panel"]], features: [i0.ɵɵInheritDefinitionFeature], decls: 59, vars: 30, consts: [[1, "mjc-hero"], [1, "mjc-hero__identity"], [1, "mjc-hero__avatar"], ["aria-hidden", "true", 1, "fa-solid", "fa-file-signature"], [1, "mjc-hero__copy"], [1, "mjc-hero__title-row"], [1, "mjc-hero__title"], [1, "mjc-chip"], [1, "mjc-chip", "mjc-chip--info"], ["title", "This contract deviates from the standard agreement \u2014 read the paper", 1, "mjc-chip", "mjc-chip--warn"], ["title", "This contract type expects an executed document and none is attached", 1, "mjc-chip", "mjc-chip--warn"], [1, "mjc-hero__meta"], [1, "mjc-mono"], [1, "mjc-hero__stats"], [1, "mjc-stat"], [1, "mjc-stat__label"], [1, "mjc-stat__value"], [1, "mjc-stat__sub"], [1, "mjc-flag"], ["aria-hidden", "true", 1, "fa-solid", "fa-triangle-exclamation"], ["aria-hidden", "true", 1, "fa-solid", "fa-file-circle-question"]], template: function MJCContractHeroPanel_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵdomElementStart(0, "div", 0)(1, "div", 1)(2, "div", 2);
-            i0.ɵɵdomElement(3, "i", 3);
-            i0.ɵɵdomElementEnd();
-            i0.ɵɵdomElementStart(4, "div", 4)(5, "div", 5)(6, "h1", 6);
-            i0.ɵɵtext(7);
-            i0.ɵɵdomElementEnd();
-            i0.ɵɵdomElementStart(8, "span", 7);
-            i0.ɵɵtext(9);
-            i0.ɵɵdomElementEnd();
-            i0.ɵɵconditionalCreate(10, MJCContractHeroPanel_Conditional_10_Template, 2, 1, "span", 8);
-            i0.ɵɵconditionalCreate(11, MJCContractHeroPanel_Conditional_11_Template, 3, 0, "span", 9);
-            i0.ɵɵconditionalCreate(12, MJCContractHeroPanel_Conditional_12_Template, 3, 0, "span", 10);
-            i0.ɵɵdomElementEnd();
-            i0.ɵɵdomElementStart(13, "div", 11)(14, "span", 12);
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MJCContractHeroPanel, selectors: [["mjc-contract-hero-panel"]], features: [i0.ɵɵInheritDefinitionFeature], decls: 22, vars: 16, consts: [[1, "mjc-hero"], [1, "mjc-hero__identity"], ["aria-hidden", "true", 1, "mjc-hero__avatar"], [1, "fa-solid", "fa-file-signature"], [1, "mjc-hero__presence", 3, "title"], [1, "mjc-hero__copy"], [1, "mjc-hero__title-row"], [1, "mjc-hero__title"], [1, "mjc-hero__aka"], [1, "mjc-hero__badges"], [1, "mjc-hero__entity-chip"], [1, "mjc-chip"], [1, "mjc-chip", "mjc-chip--info"], ["title", "This contract deviates from the standard agreement \u2014 read the paper", 1, "mjc-chip", "mjc-chip--warn"], ["title", "This contract type expects an executed document and none is attached", 1, "mjc-chip", "mjc-chip--warn"], ["type", "button", 1, "mjc-hero__toggle", 3, "click", "title"], ["aria-hidden", "true", 1, "fa-solid", "fa-triangle-exclamation"], ["aria-hidden", "true", 1, "fa-solid", "fa-file-circle-question"], [1, "mjc-hero__summary"], [1, "mjc-hero__stat"], [1, "mjc-hero__stat-label"], [1, "mjc-hero__stat-val"], ["type", "button", 1, "mjc-hero__stat-val", "is-link"], [1, "mjc-hero__next"], [1, "mjc-hero__edit"], [1, "mjc-flag"], ["type", "button", 1, "mjc-hero__stat-val", "is-link", 3, "click"], [1, "mjc-hero__next-val"], [1, "mjc-hero__field"], ["FieldName", "Description", "Type", "textarea", 3, "Record", "ShowLabel", "EditMode", "FormContext"]], template: function MJCContractHeroPanel_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2);
+            i0.ɵɵelement(3, "i", 3);
+            i0.ɵɵconditionalCreate(4, MJCContractHeroPanel_Conditional_4_Template, 1, 2, "span", 4);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(5, "div", 5)(6, "div", 6)(7, "h1", 7);
+            i0.ɵɵtext(8);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵconditionalCreate(9, MJCContractHeroPanel_Conditional_9_Template, 2, 1, "div", 8);
+            i0.ɵɵelementStart(10, "div", 9)(11, "span", 10);
+            i0.ɵɵelement(12, "i", 3);
+            i0.ɵɵtext(13, " Contract");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(14, "span", 11);
             i0.ɵɵtext(15);
-            i0.ɵɵdomElementEnd();
-            i0.ɵɵdomElementStart(16, "span");
-            i0.ɵɵtext(17, "Customer: ");
-            i0.ɵɵdomElementStart(18, "strong");
-            i0.ɵɵtext(19);
-            i0.ɵɵdomElementEnd()();
-            i0.ɵɵdomElementStart(20, "span");
-            i0.ɵɵtext(21, "Selling: ");
-            i0.ɵɵdomElementStart(22, "strong");
-            i0.ɵɵtext(23);
-            i0.ɵɵdomElementEnd()();
-            i0.ɵɵconditionalCreate(24, MJCContractHeroPanel_Conditional_24_Template, 4, 1, "span");
-            i0.ɵɵdomElementEnd()()();
-            i0.ɵɵdomElementStart(25, "div", 13)(26, "div", 14)(27, "span", 15);
-            i0.ɵɵtext(28, "Executed");
-            i0.ɵɵdomElementEnd();
-            i0.ɵɵdomElementStart(29, "span", 16);
-            i0.ɵɵtext(30);
-            i0.ɵɵpipe(31, "date");
-            i0.ɵɵdomElementEnd();
-            i0.ɵɵconditionalCreate(32, MJCContractHeroPanel_Conditional_32_Template, 2, 0, "span", 17);
-            i0.ɵɵdomElementEnd();
-            i0.ɵɵdomElementStart(33, "div", 14)(34, "span", 15);
-            i0.ɵɵtext(35, "Effective");
-            i0.ɵɵdomElementEnd();
-            i0.ɵɵdomElementStart(36, "span", 16);
-            i0.ɵɵtext(37);
-            i0.ɵɵpipe(38, "date");
-            i0.ɵɵdomElementEnd()();
-            i0.ɵɵdomElementStart(39, "div", 14)(40, "span", 15);
-            i0.ɵɵtext(41, "Term ends");
-            i0.ɵɵdomElementEnd();
-            i0.ɵɵdomElementStart(42, "span", 16);
-            i0.ɵɵtext(43);
-            i0.ɵɵpipe(44, "date");
-            i0.ɵɵdomElementEnd();
-            i0.ɵɵconditionalCreate(45, MJCContractHeroPanel_Conditional_45_Template, 2, 1, "span", 17);
-            i0.ɵɵdomElementEnd();
-            i0.ɵɵdomElementStart(46, "div", 14)(47, "span", 15);
-            i0.ɵɵtext(48, "Agreement");
-            i0.ɵɵdomElementEnd();
-            i0.ɵɵdomElementStart(49, "span", 16);
-            i0.ɵɵtext(50);
-            i0.ɵɵdomElementEnd();
-            i0.ɵɵconditionalCreate(51, MJCContractHeroPanel_Conditional_51_Template, 2, 0, "span", 17);
-            i0.ɵɵdomElementEnd();
-            i0.ɵɵdomElementStart(52, "div", 14)(53, "span", 15);
-            i0.ɵɵtext(54, "Created by");
-            i0.ɵɵdomElementEnd();
-            i0.ɵɵdomElementStart(55, "span", 16);
-            i0.ɵɵtext(56);
-            i0.ɵɵdomElementEnd();
-            i0.ɵɵconditionalCreate(57, MJCContractHeroPanel_Conditional_57_Template, 2, 0, "span", 17);
-            i0.ɵɵdomElementEnd()();
-            i0.ɵɵconditionalCreate(58, MJCContractHeroPanel_Conditional_58_Template, 2, 0, "div", 18);
-            i0.ɵɵdomElementEnd();
+            i0.ɵɵelementEnd();
+            i0.ɵɵconditionalCreate(16, MJCContractHeroPanel_Conditional_16_Template, 2, 1, "span", 12);
+            i0.ɵɵconditionalCreate(17, MJCContractHeroPanel_Conditional_17_Template, 3, 0, "span", 13);
+            i0.ɵɵconditionalCreate(18, MJCContractHeroPanel_Conditional_18_Template, 3, 0, "span", 14);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(19, "button", 15);
+            i0.ɵɵlistener("click", function MJCContractHeroPanel_Template_button_click_19_listener() { return ctx.ToggleCollapsed(); });
+            i0.ɵɵelement(20, "i");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵconditionalCreate(21, MJCContractHeroPanel_Conditional_21_Template, 47, 20);
+            i0.ɵɵelementEnd();
         } if (rf & 2) {
-            i0.ɵɵadvance(7);
+            i0.ɵɵclassProp("mjc-hero--collapsed", ctx.Collapsed);
+            i0.ɵɵadvance(4);
+            i0.ɵɵconditional(!ctx.EditMode ? 4 : -1);
+            i0.ɵɵadvance(4);
             i0.ɵɵtextInterpolate(ctx.Title);
             i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.Record.ContractNumber && !ctx.Collapsed ? 9 : -1);
+            i0.ɵɵadvance(5);
             i0.ɵɵclassMap("mjc-chip " + ctx.StateChipClass);
             i0.ɵɵadvance();
             i0.ɵɵtextInterpolate(ctx.State);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.TypeName ? 10 : -1);
+            i0.ɵɵconditional(ctx.TypeName ? 16 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.Record.HasModifications ? 11 : -1);
+            i0.ɵɵconditional(ctx.Record.HasModifications ? 17 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.IsAwaitingDocument ? 12 : -1);
-            i0.ɵɵadvance(3);
-            i0.ɵɵtextInterpolate(ctx.Record.ContractNumber || "Unnumbered");
-            i0.ɵɵadvance(4);
-            i0.ɵɵtextInterpolate(ctx.CustomerName || "\u2014");
-            i0.ɵɵadvance(4);
-            i0.ɵɵtextInterpolate(ctx.CompanyName || "\u2014");
+            i0.ɵɵconditional(ctx.IsAwaitingDocument ? 18 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.ContactName ? 24 : -1);
-            i0.ɵɵadvance(6);
-            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(31, 21, ctx.Record.ExecutedDate, "d MMM y") || "\u2014");
-            i0.ɵɵadvance(2);
-            i0.ɵɵconditional(!ctx.Record.ExecutedDate ? 32 : -1);
-            i0.ɵɵadvance(5);
-            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(38, 24, ctx.Record.EffectiveDate, "d MMM y") || "\u2014");
-            i0.ɵɵadvance(6);
-            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(44, 27, ctx.Record.EndDate, "d MMM y") || "\u2014");
-            i0.ɵɵadvance(2);
-            i0.ɵɵconditional(ctx.DaysToEnd !== null ? 45 : -1);
-            i0.ɵɵadvance(5);
-            i0.ɵɵtextInterpolate(ctx.TemplateName || "\u2014");
+            i0.ɵɵproperty("title", ctx.Collapsed ? "Expand header" : "Collapse header");
+            i0.ɵɵattribute("aria-label", ctx.Collapsed ? "Expand header" : "Collapse header");
             i0.ɵɵadvance();
-            i0.ɵɵconditional(!ctx.TemplateName ? 51 : -1);
-            i0.ɵɵadvance(5);
-            i0.ɵɵtextInterpolate(ctx.CreatingEntityName || "\u2014");
+            i0.ɵɵclassMap(ctx.Collapsed ? "fa-solid fa-chevron-down" : "fa-solid fa-chevron-up");
             i0.ɵɵadvance();
-            i0.ɵɵconditional(!ctx.CreatingEntityName ? 57 : -1);
-            i0.ɵɵadvance();
-            i0.ɵɵconditional(!ctx.Record.ContractNumber ? 58 : -1);
-        } }, dependencies: [CommonModule, BaseFormsModule, i1.DatePipe], encapsulation: 2 });
+            i0.ɵɵconditional(!ctx.Collapsed ? 21 : -1);
+        } }, dependencies: [CommonModule, BaseFormsModule, i1.MjFormFieldComponent, i2.DatePipe], styles: ["/**\n * contracts-kit.css \u2014 ported from design-docs/ui-design/mockups-v2/tokens.css.\n *\n * \u26A0 SEMANTIC TOKENS ONLY. MJ's design-token rule is explicit: *\"NEVER use primitive tokens\n * (`--mj-color-neutral-*`, `--mj-color-brand-*`) in component CSS. Primitives don't adapt to dark\n * mode.\"* An earlier version of this file used twelve of them, because the mockup did \u2014 and in a\n * standalone mockup page that is harmless, since there is no dark mode to adapt to. Ported into a real\n * component stylesheet it means every tinted surface, chip and clause box keeps its LIGHT colour when\n * the app is themed dark. That is the theming break, and it is invisible until someone switches theme.\n *\n * The mapping applied: neutral-50 \u2192 bg-surface-sunken, neutral-100 \u2192 border-subtle, neutral-300 \u2192\n * border-strong, success/error/warning-50 \u2192 status-*-bg, success/error-700 \u2192 status-*-text, brand-50 \u2192\n * status-info-bg, brand-100 \u2192 status-info-border, brand-700/900 \u2192 status-info-text. `#fff` on a brand\n * fill \u2192 `--mj-brand-on-primary`.\n *\n * THE MOCKUPS ARE THE SPEC, and this file exists to keep them so. An earlier version of this kit was\n * written from MEMORY of them, and it was wrong in a way that is invisible in source and obvious on\n * screen: it used token names that do not exist. `--mj-font-size-sm`, `--mj-text-tertiary`,\n * `--mj-color-warning-text`, `--mj-color-success-border` and four others are not MJ tokens (the real\n * names are `--mj-text-sm`, `--mj-status-warning-text`, `--mj-status-success`, \u2026). Every one of those\n * resolved to NOTHING \u2014 so font sizes fell back to browser defaults and the state chips rendered with\n * no colour at all. That is most of what \"looks bad\" was.\n *\n * So: class names and rules below are the mockup's, verbatim where possible, and **every token used\n * here has been checked to exist in MJ's `_tokens.scss`.** If you add a rule, check the token first \u2014\n * a missing custom property fails silently, which is the worst failure mode CSS has.\n *\n * SHIPPED VIA THE SECTION SHELL (`styleUrls` + `ViewEncapsulation.None`). `ngc` only compiles what a\n * component references, so a stylesheet nothing references is built into dist and never loaded.\n * `None` is required, not lazy: these classes are used by DESCENDANT components.\n *\n * Prefix note: the mockup used bare class names (`.panel`, `.chip`) because it was a standalone page.\n * Here everything is `mjc-` prefixed \u2014 bare `.panel` inside a real Explorer would collide with MJ's own\n * chrome, and `ViewEncapsulation.None` means these rules are global.\n */\n\n/* \u2500\u2500 Page frame \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.mjc-page {\n  display: flex;\n  flex-direction: column;\n  gap: var(--mj-space-4);\n  padding: var(--mj-space-5);\n}\n\n/* A grid page needs a DEFINITE height: mj-explorer-entity-data-grid is height:100% outside a related\n   panel, and 100% of an auto-height parent is zero \u2014 the grid renders no rows while its toolbar still\n   reports the count. MJ's own source documents that symptom. `min-height: 0` on the fill slot is\n   mandatory: a flex child defaults to min-height:auto and refuses to shrink, so without it the grid\n   pushes the page taller instead of scrolling inside itself. */\n.mjc-page--grid { height: 100%; min-height: 0; }\n.mjc-grid-fill { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }\n\n/* Intro prose. Constrained measure \u2014 text stops being readable much past this \u2014 and it is a real\n   block with real spacing, not a bare text node floating between cards. */\n.mjc-page__intro {\n  color: var(--mj-text-secondary);\n  font-size: var(--mj-text-sm);\n  line-height: 1.55;\n  margin: 0;\n  max-width: 78ch;\n}\n\n/* \u2500\u2500 Panel body helpers \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   Our panels are real `<mj-collapsible-panel>`s, so MJ paints the frame, the header and the spacing.\n   These classes style only what goes INSIDE one. */\n\n.mjc-body { padding: var(--mj-space-4); }\n.mjc-body--flush { padding: 0; }            /* a table fills the panel edge to edge */\n.mjc-body > * + * { margin-top: var(--mj-space-3); }   /* nothing ever touches its neighbour */\n\n.mjc-note {\n  margin: 0;\n  color: var(--mj-text-muted);\n  font-size: var(--mj-text-xs);\n  line-height: 1.55;\n}\n\n/* A note under a flush table needs its own padding and a rule above it, or it reads as a table row. */\n.mjc-note--footer {\n  padding: var(--mj-space-3) var(--mj-space-4);\n  border-top: 1px solid var(--mj-border-subtle);\n}\n\n/* \u2500\u2500 Hero (mockup 1) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.mjc-hero {\n  display: flex;\n  flex-direction: column;\n  gap: var(--mj-space-4);\n  padding: var(--mj-space-4) var(--mj-space-5);\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-lg);\n  box-shadow: var(--mj-shadow-sm);\n}\n\n.mjc-hero__identity { display: flex; align-items: center; gap: var(--mj-space-4); min-width: 0; }\n\n.mjc-hero__avatar {\n  flex: none;\n  width: 52px; height: 52px;\n  border-radius: var(--mj-radius-md);\n  display: flex; align-items: center; justify-content: center;\n  background: color-mix(in srgb, var(--mj-brand-primary) 18%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n  font-size: var(--mj-text-xl, 1.375rem);\n}\n\n.mjc-hero__copy { min-width: 0; flex: 1; }\n\n.mjc-hero__title-row {\n  display: flex; align-items: center; flex-wrap: wrap;\n  gap: var(--mj-space-2) var(--mj-space-3);\n}\n\n.mjc-hero__title {\n  margin: 0;\n  font-size: var(--mj-text-lg);\n  font-weight: 700;\n  line-height: 1.25;\n  /* Long contract descriptions must not push the chips off the card. */\n  overflow-wrap: anywhere;\n}\n\n.mjc-hero__meta {\n  display: flex; flex-wrap: wrap;\n  gap: var(--mj-space-3);\n  color: var(--mj-text-secondary);\n  font-size: var(--mj-text-sm);\n  margin-top: var(--mj-space-2);\n}\n\n/* auto-fit so five stats sit in a row on a wide screen and reflow on a laptop, rather than\n   overflowing the card \u2014 which is what a fixed five-column grid did. */\n.mjc-hero__stats {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));\n  gap: var(--mj-space-3);\n}\n\n.mjc-stat {\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md);\n  padding: var(--mj-space-3);\n  min-width: 0;\n}\n.mjc-stat__label {\n  display: block; font-size: var(--mj-text-xs);\n  text-transform: uppercase; letter-spacing: .04em;\n  color: var(--mj-text-muted);\n}\n.mjc-stat__value {\n  display: block; font-size: var(--mj-text-base); font-weight: 700; margin-top: 2px;\n  overflow-wrap: anywhere;\n}\n.mjc-stat__sub { display: block; font-size: var(--mj-text-xs); color: var(--mj-text-muted); }\n\n/* \u2500\u2500 Chips \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.mjc-chip {\n  display: inline-flex; align-items: center; gap: 4px;\n  font-size: var(--mj-text-xs); font-weight: 600;\n  padding: 2px 9px; border-radius: 999px;\n  border: 1px solid transparent; white-space: nowrap;\n}\n.mjc-chip--ok    { background: var(--mj-status-success-bg); color: var(--mj-status-success-text); border-color: var(--mj-status-success); }\n.mjc-chip--warn  { background: var(--mj-status-warning-bg); color: var(--mj-status-warning-text); border-color: var(--mj-status-warning); }\n.mjc-chip--error { background: var(--mj-status-error-bg);   color: var(--mj-status-error-text);   border-color: var(--mj-status-error); }\n.mjc-chip--info  { background: var(--mj-status-info-bg);   color: var(--mj-status-info-text);   border-color: var(--mj-status-info-border); }\n.mjc-chip--muted { background: var(--mj-border-subtle); color: var(--mj-text-secondary);   border-color: var(--mj-border-default); }\n\n/* \u2500\u2500 Buttons \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.mjc-btn {\n  display: inline-flex; align-items: center; gap: 6px;\n  font-size: var(--mj-text-sm); font-weight: 600;\n  padding: 6px 12px;\n  border-radius: var(--mj-radius-sm);\n  border: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-primary);\n  cursor: pointer;\n}\n.mjc-btn:disabled { opacity: .5; cursor: default; }\n.mjc-btn--primary { background: var(--mj-brand-primary); border-color: var(--mj-brand-primary); color: var(--mj-brand-on-primary); }\n.mjc-btn--flat    { background: transparent; border-color: transparent; color: var(--mj-brand-primary); }\n.mjc-btn--sm      { padding: 3px 9px; font-size: var(--mj-text-xs); }\n.mjc-btn--danger  { color: var(--mj-status-error-text); border-color: transparent; background: transparent; }\n\n/* \u2500\u2500 Field grid \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.mjc-fields {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));\n  gap: var(--mj-space-3) var(--mj-space-4);\n}\n.mjc-field > label {\n  display: block; font-size: var(--mj-text-xs); color: var(--mj-text-muted);\n  text-transform: uppercase; letter-spacing: .04em; margin-bottom: 3px;\n}\n.mjc-field .mjc-val {\n  padding: 6px 9px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-sm);\n  background: var(--mj-bg-surface);\n  min-height: 31px;\n  overflow-wrap: anywhere;\n}\n.mjc-field .mjc-val--ro { background: var(--mj-bg-surface-sunken); color: var(--mj-text-secondary); }\n.mjc-hint { color: var(--mj-text-muted); font-size: var(--mj-text-xs); margin-top: 3px; }\n\n/* \u2500\u2500 Tables \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   The mockup renders modifications, documents and lineage as TABLES, not stacked cards. With three\n   or more rows a table is scannable and a stack is a wall. */\n\ntable.mjc-grid { width: 100%; border-collapse: collapse; }\ntable.mjc-grid th {\n  text-align: left; font-size: var(--mj-text-xs);\n  text-transform: uppercase; letter-spacing: .04em;\n  color: var(--mj-text-muted); font-weight: 700;\n  padding: var(--mj-space-2) var(--mj-space-3);\n  border-bottom: 1.5px solid var(--mj-border-default);\n}\ntable.mjc-grid td {\n  padding: var(--mj-space-3);\n  border-bottom: 1px solid var(--mj-border-subtle);\n  vertical-align: top;\n}\ntable.mjc-grid tr:last-child td { border-bottom: 0; }\ntable.mjc-grid tbody tr:hover td { background: var(--mj-bg-surface-sunken); }\n.mjc-row--click { cursor: pointer; }\n\n.mjc-muted { color: var(--mj-text-muted); }\n.mjc-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--mj-text-xs); }\n\n/* \u2500\u2500 The clause pair (mockups 1 and 2) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   The standard clause and what this contract says instead, read side by side. This is the app's\n   central idea rendered, so it gets real styling rather than two paragraphs. */\n\n.mjc-pair {\n  display: grid; grid-template-columns: 1fr; gap: var(--mj-space-3);\n  margin-top: var(--mj-space-2);\n}\n/* Side by side only when there is room \u2014 two 40ch columns on a laptop is worse than one readable one. */\n@media (min-width: 1100px) { .mjc-pair { grid-template-columns: 1fr 1fr; } }\n\n.mjc-pair__tag {\n  display: block; font-size: var(--mj-text-xs); font-weight: 700;\n  text-transform: uppercase; letter-spacing: .04em;\n  color: var(--mj-text-muted); margin-bottom: 3px;\n}\n.mjc-pair__tag--mod { color: var(--mj-status-warning-text); }\n\n.mjc-clause {\n  font-size: var(--mj-text-xs);\n  color: var(--mj-text-secondary);\n  background: var(--mj-bg-surface-sunken);\n  border-left: 2px solid var(--mj-border-strong);\n  padding: var(--mj-space-2) var(--mj-space-3);\n  border-radius: 0 var(--mj-radius-sm) var(--mj-radius-sm) 0;\n  margin: 0;\n  /* Clause text carries its own line breaks, and 9.1 is a single 1,100-character sentence in caps \u2014\n     both must wrap inside the box rather than escaping it. */\n  white-space: pre-wrap;\n  overflow-wrap: anywhere;\n}\n.mjc-clause--mod {\n  border-left-color: var(--mj-status-warning);\n  background: var(--mj-status-warning-bg);\n  color: var(--mj-text-primary);\n}\n\n.mjc-toggle {\n  font-size: var(--mj-text-xs); color: var(--mj-brand-primary);\n  font-weight: 600; margin-top: 4px; background: none; border: 0; padding: 0; cursor: pointer;\n}\n\n/* \u2500\u2500 Callout \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.mjc-flag {\n  background: var(--mj-status-warning-bg);\n  border-left: 3px solid var(--mj-status-warning);\n  padding: var(--mj-space-2) var(--mj-space-3);\n  font-size: var(--mj-text-xs);\n  color: var(--mj-status-warning-text);\n  border-radius: 0 var(--mj-radius-sm) var(--mj-radius-sm) 0;\n  line-height: 1.55;\n}\n\n/* \u2500\u2500 Invalid input \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n/* A required field the user has emptied. Border + ring only \u2014 no background change, because these\n   are prose textareas and tinting the reading surface makes the text itself harder to read, which\n   is the opposite of helpful when the point is \"write something here\". Tokens only, per the\n   design-token gate. */\n.mjc-invalid {\n  border-color: var(--mj-status-error) !important;\n  box-shadow: 0 0 0 2px var(--mj-status-error-bg);\n  outline: none;\n}\n\n/* \u2500\u2500 Filter pills (watchlist) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.mjc-pills { display: flex; flex-wrap: wrap; gap: var(--mj-space-2); align-items: center; }\n\n.mjc-pill {\n  appearance: none; cursor: pointer;\n  border: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-secondary);\n  border-radius: 999px;\n  padding: 3px var(--mj-space-3);\n  font-size: var(--mj-text-sm);\n  line-height: 1.6;\n  display: inline-flex; align-items: center; gap: var(--mj-space-2);\n}\n.mjc-pill:hover { border-color: var(--mj-brand-primary); color: var(--mj-text-primary); }\n.mjc-pill:disabled { opacity: .5; cursor: default; }\n.mjc-pill--active {\n  background: var(--mj-status-info-bg);\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-status-info-text);\n  font-weight: 700;\n}\n.mjc-pill__count { font-variant-numeric: tabular-nums; opacity: .85; font-size: var(--mj-text-xs); }\n\n/* \u2500\u2500 Dashboard command center \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.mjc-kpis {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));\n  gap: var(--mj-space-3);\n}\n.mjc-kpi {\n  appearance: none;\n  font: inherit;\n  text-align: left;\n  color: inherit;\n  cursor: pointer;\n  padding: var(--mj-space-3) var(--mj-space-4);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md);\n  background: var(--mj-bg-surface);\n}\n.mjc-kpi:hover { border-color: var(--mj-brand-primary); }\n.mjc-kpi:disabled { opacity: .6; cursor: default; }\n.mjc-kpi--alert .mjc-kpi__v { color: var(--mj-status-error-text); }\n.mjc-kpi__l {\n  font-size: var(--mj-text-xs);\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: .04em;\n  color: var(--mj-text-muted);\n}\n.mjc-kpi__v {\n  font-size: var(--mj-text-xl, 1.35rem);\n  font-weight: 700;\n  margin: 4px 0 2px;\n  font-variant-numeric: tabular-nums;\n}\n.mjc-kpi__f {\n  font-size: var(--mj-text-xs);\n  color: var(--mj-text-secondary);\n  line-height: 1.35;\n}\n\n.mjc-dash-split {\n  display: grid;\n  grid-template-columns: 1.15fr .85fr;\n  gap: var(--mj-space-3);\n}\n@media (max-width: 900px) { .mjc-dash-split { grid-template-columns: 1fr; } }\n\n.mjc-dash-card {\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md);\n  overflow: hidden;\n}\n.mjc-dash-card__h {\n  display: flex;\n  justify-content: space-between;\n  gap: var(--mj-space-2);\n  align-items: baseline;\n  padding: var(--mj-space-3) var(--mj-space-4);\n  border-bottom: 1px solid var(--mj-border-subtle);\n  font-weight: 700;\n}\n.mjc-dash-card__h span {\n  font-weight: 500;\n  font-size: var(--mj-text-xs);\n  color: var(--mj-text-muted);\n}\n\n.mjc-barlist { display: flex; flex-direction: column; gap: var(--mj-space-2); padding: var(--mj-space-3) var(--mj-space-4); }\n.mjc-barrow {\n  display: grid;\n  grid-template-columns: 7.5rem 1fr auto;\n  gap: var(--mj-space-2);\n  align-items: center;\n  font-size: var(--mj-text-sm);\n}\n.mjc-track {\n  height: 8px;\n  background: var(--mj-bg-surface-sunken);\n  border-radius: 99px;\n  overflow: hidden;\n}\n.mjc-fill {\n  height: 100%;\n  background: var(--mj-brand-primary);\n  border-radius: 99px;\n}\n.mjc-num { font-variant-numeric: tabular-nums; font-weight: 700; }\n\n.mjc-funnel {\n  display: flex;\n  gap: var(--mj-space-2);\n  align-items: flex-end;\n  height: 10rem;\n  padding: var(--mj-space-3) var(--mj-space-4);\n}\n.mjc-funnel__col {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 6px;\n}\n.mjc-funnel__bar {\n  width: 100%;\n  min-height: 8px;\n  border-radius: 8px 8px 2px 2px;\n  background: var(--mj-brand-primary);\n}\n.mjc-funnel__n { font-weight: 700; }\n.mjc-funnel__lab {\n  font-size: var(--mj-text-xs);\n  color: var(--mj-text-muted);\n  text-align: center;\n}\n\n.mjc-buckets {\n  display: grid;\n  grid-template-columns: repeat(4, 1fr);\n  gap: var(--mj-space-2);\n  padding: var(--mj-space-3) var(--mj-space-4);\n}\n@media (max-width: 700px) { .mjc-buckets { grid-template-columns: 1fr 1fr; } }\n.mjc-bucket {\n  background: var(--mj-bg-page);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md);\n  padding: var(--mj-space-3);\n}\n\n.mjc-viewer-host {\n  min-height: 420px;\n  height: 480px;\n  display: flex;\n  flex-direction: column;\n}\n.mjc-viewer-host mj-entity-viewer {\n  display: flex;\n  flex-direction: column;\n  flex: 1 1 auto;\n  min-height: 350px;\n  width: 100%;\n}\n\n/* \u2500\u2500 Empty state \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   A sentence in a bordered box, never a bare line of text in whitespace. */\n\n.mjc-empty {\n  display: flex; align-items: center; gap: var(--mj-space-2); justify-content: center;\n  padding: var(--mj-space-6);\n  color: var(--mj-text-muted);\n  font-size: var(--mj-text-sm);\n  background: var(--mj-bg-surface-sunken);\n  border: 1px dashed var(--mj-border-strong);\n  border-radius: var(--mj-radius-md);\n  text-align: center;\n}\n", "\n        .mjc-hero {\n            display: flex; flex-direction: column; gap: var(--mj-space-4);\n            padding: 20px 24px; margin-bottom: var(--mj-space-4);\n            background: var(--mj-bg-surface-card);\n            border: 1px solid var(--mj-border-default);\n            border-radius: var(--mj-radius-xl, 16px);\n            box-shadow: var(--mj-shadow-md, 0 4px 16px rgba(0, 0, 0, .08));\n            position: relative; overflow: hidden;\n        }\n        .mjc-hero::before {\n            content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3.5px;\n            background: linear-gradient(90deg, #38bdf8 0%, #6366f1 50%, #10b981 100%);\n        }\n        .mjc-hero__identity { display: flex; align-items: center; gap: var(--mj-space-4); min-width: 0; }\n        .mjc-hero__avatar {\n            flex: none; width: 60px; height: 60px; border-radius: var(--mj-radius-lg, 14px);\n            position: relative; display: flex; align-items: center; justify-content: center;\n            background: linear-gradient(135deg, color-mix(in srgb, var(--mj-brand-primary) 30%, var(--mj-bg-surface)) 0%, color-mix(in srgb, var(--mj-brand-accent, #6366f1) 25%, var(--mj-bg-surface)) 100%);\n            color: var(--mj-brand-primary); font-size: 1.35rem;\n            box-shadow: 0 4px 14px color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n            border: 2px solid color-mix(in srgb, var(--mj-brand-primary) 35%, transparent);\n        }\n        .mjc-hero__presence {\n            position: absolute; bottom: -2px; right: -2px; width: 13px; height: 13px;\n            border-radius: 50%; border: 2.5px solid var(--mj-bg-surface-card);\n            background: var(--mj-text-muted, #94a3b8);\n        }\n        .mjc-hero__presence[data-tone='success'] { background: var(--mj-status-success, #10b981); }\n        .mjc-hero__presence[data-tone='warning'] { background: var(--mj-status-warning, #f59e0b); }\n        .mjc-hero__copy { min-width: 0; flex: 1; }\n        .mjc-hero__title {\n            margin: 0; font-size: var(--mj-text-lg, 18px); font-weight: 800;\n            letter-spacing: -.02em; line-height: 1.25; color: var(--mj-text-primary);\n            overflow-wrap: anywhere;\n        }\n        .mjc-hero__aka { margin-top: 2px; font-size: var(--mj-text-xs); color: var(--mj-text-muted); }\n        .mjc-hero__badges {\n            display: flex; align-items: center; flex-wrap: wrap;\n            gap: var(--mj-space-2); margin-top: var(--mj-space-2);\n        }\n        .mjc-hero__entity-chip {\n            display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px;\n            border-radius: var(--mj-radius-sm);\n            background: var(--mj-status-info-bg); color: var(--mj-brand-primary);\n            font-size: var(--mj-text-xs); font-weight: 650;\n        }\n        .mjc-hero__toggle {\n            display: inline-flex; align-items: center; justify-content: center;\n            flex: none; width: 32px; height: 32px; margin-left: auto; padding: 0;\n            border: 1px solid var(--mj-border-default); border-radius: var(--mj-radius-md, 8px);\n            background: var(--mj-bg-surface-sunken, rgba(255,255,255,.04));\n            color: var(--mj-text-secondary); cursor: pointer; font-size: 12px;\n        }\n        .mjc-hero__toggle:hover {\n            background: var(--mj-bg-surface-hover, rgba(255,255,255,.08));\n            color: var(--mj-text-primary); border-color: var(--mj-brand-primary);\n        }\n        .mjc-hero__summary {\n            display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));\n            gap: var(--mj-space-3); padding-top: var(--mj-space-4);\n            border-top: 1px solid var(--mj-border-default);\n        }\n        .mjc-hero__stat { display: flex; flex-direction: column; gap: 3px; min-width: 0; }\n        .mjc-hero__stat-label {\n            font-size: var(--mj-text-xs); font-weight: 700; letter-spacing: .04em;\n            text-transform: uppercase; color: var(--mj-text-muted);\n        }\n        .mjc-hero__stat-val {\n            font-size: 15px; font-weight: 650; color: var(--mj-text-primary);\n            overflow: hidden; text-overflow: ellipsis; white-space: nowrap;\n        }\n        button.mjc-hero__stat-val, .mjc-hero__stat-val.is-link {\n            border: 0; padding: 0; background: transparent; color: var(--mj-text-link);\n            cursor: pointer; font: inherit; font-weight: 650; text-align: left;\n        }\n        button.mjc-hero__stat-val:hover { text-decoration: underline; }\n        .mjc-hero__next {\n            display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 14px;\n            padding: var(--mj-space-3) var(--mj-space-4);\n            background: var(--mj-bg-page); border: 1px solid var(--mj-border-default);\n            border-radius: var(--mj-radius-md);\n        }\n        .mjc-hero__next-val { font-weight: 700; font-size: 15px; }\n        .mjc-hero__edit {\n            display: flex; flex-direction: column; gap: var(--mj-space-3);\n            padding-top: var(--mj-space-3); border-top: 1px solid var(--mj-border-subtle, var(--mj-border-default));\n        }\n        .mjc-hero__field { min-width: 0; }\n        .mjc-hero__field .mj-forms-field {\n            display: flex; flex-direction: column; align-items: stretch; gap: 4px; padding: 0;\n        }\n        .mjc-hero__field .mj-forms-field-label {\n            font-size: var(--mj-text-xs); font-weight: 700; letter-spacing: .06em;\n            text-transform: uppercase; color: var(--mj-text-muted);\n        }\n        .mjc-hero--collapsed { padding: 12px 20px; gap: 0; margin-bottom: var(--mj-space-3); }\n        .mjc-hero--collapsed .mjc-hero__avatar { width: 42px; height: 42px; border-radius: var(--mj-radius-md, 10px); font-size: 1.05rem; }\n        .mjc-hero--collapsed .mjc-hero__title { font-size: 1.15rem; }\n        @media (max-width: 720px) {\n            .mjc-hero__identity { align-items: flex-start; }\n            .mjc-hero__summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }\n        }\n    "], encapsulation: 2 });
 };
 MJCContractHeroPanel = __decorate([
     RegisterClassEx(BaseFormPanel, {
@@ -529,18 +630,24 @@ MJCContractHeroPanel = __decorate([
 export { MJCContractHeroPanel };
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MJCContractHeroPanel, [{
         type: Component,
-        args: [{
-                selector: 'mjc-contract-hero-panel',
-                standalone: true,
-                encapsulation: ViewEncapsulation.None,
-                imports: [CommonModule, BaseFormsModule],
-                template: `
-        <div class="mjc-hero">
+        args: [{ selector: 'mjc-contract-hero-panel', standalone: true, encapsulation: ViewEncapsulation.None, imports: [CommonModule, BaseFormsModule], template: `
+        <div class="mjc-hero" [class.mjc-hero--collapsed]="Collapsed">
             <div class="mjc-hero__identity">
-                <div class="mjc-hero__avatar"><i class="fa-solid fa-file-signature" aria-hidden="true"></i></div>
+                <div class="mjc-hero__avatar" aria-hidden="true">
+                    <i class="fa-solid fa-file-signature"></i>
+                    @if (!EditMode) {
+                        <span class="mjc-hero__presence" [attr.data-tone]="StatusTone" [title]="State"></span>
+                    }
+                </div>
                 <div class="mjc-hero__copy">
                     <div class="mjc-hero__title-row">
                         <h1 class="mjc-hero__title">{{ Title }}</h1>
+                    </div>
+                    @if (Record.ContractNumber && !Collapsed) {
+                        <div class="mjc-hero__aka">{{ Record.ContractNumber }}</div>
+                    }
+                    <div class="mjc-hero__badges">
+                        <span class="mjc-hero__entity-chip"><i class="fa-solid fa-file-signature"></i> Contract</span>
                         <span class="mjc-chip" [class]="'mjc-chip ' + StateChipClass">{{ State }}</span>
                         @if (TypeName) { <span class="mjc-chip mjc-chip--info">{{ TypeName }}</span> }
                         @if (Record.HasModifications) {
@@ -556,53 +663,90 @@ export { MJCContractHeroPanel };
                             </span>
                         }
                     </div>
-                    <div class="mjc-hero__meta">
-                        <span class="mjc-mono">{{ Record.ContractNumber || 'Unnumbered' }}</span>
-                        <span>Customer: <strong>{{ CustomerName || '—' }}</strong></span>
-                        <span>Selling: <strong>{{ CompanyName || '—' }}</strong></span>
-                        @if (ContactName) { <span>Contact: <strong>{{ ContactName }}</strong></span> }
-                    </div>
                 </div>
+                <button type="button" class="mjc-hero__toggle"
+                    [title]="Collapsed ? 'Expand header' : 'Collapse header'"
+                    [attr.aria-label]="Collapsed ? 'Expand header' : 'Collapse header'"
+                    (click)="ToggleCollapsed()">
+                    <i [class]="Collapsed ? 'fa-solid fa-chevron-down' : 'fa-solid fa-chevron-up'"></i>
+                </button>
             </div>
-
-            <div class="mjc-hero__stats">
-                <div class="mjc-stat">
-                    <span class="mjc-stat__label">Executed</span>
-                    <span class="mjc-stat__value">{{ (Record.ExecutedDate | date: 'd MMM y') || '—' }}</span>
-                    @if (!Record.ExecutedDate) { <span class="mjc-stat__sub">not signed yet</span> }
-                </div>
-                <div class="mjc-stat">
-                    <span class="mjc-stat__label">Effective</span>
-                    <span class="mjc-stat__value">{{ (Record.EffectiveDate | date: 'd MMM y') || '—' }}</span>
-                </div>
-                <div class="mjc-stat">
-                    <span class="mjc-stat__label">Term ends</span>
-                    <span class="mjc-stat__value">{{ (Record.EndDate | date: 'd MMM y') || '—' }}</span>
-                    @if (DaysToEnd !== null) { <span class="mjc-stat__sub">{{ EndsInText }}</span> }
-                </div>
-                <div class="mjc-stat">
-                    <span class="mjc-stat__label">Agreement</span>
-                    <span class="mjc-stat__value">{{ TemplateName || '—' }}</span>
-                    @if (!TemplateName) { <span class="mjc-stat__sub">no standard terms referenced</span> }
-                </div>
-                <div class="mjc-stat">
-                    <span class="mjc-stat__label">Created by</span>
-                    <span class="mjc-stat__value">{{ CreatingEntityName || '—' }}</span>
-                    @if (!CreatingEntityName) { <span class="mjc-stat__sub">entered directly</span> }
-                </div>
-            </div>
-
-            @if (!Record.ContractNumber) {
-                <div class="mjc-flag">
-                    The contract number is minted on first save, from a counter taken under a lock — so it
-                    cannot collide with another contract created at the same moment.
+            @if (!Collapsed) {
+                <div class="mjc-hero__summary">
+                    <!--
+                        OUR SIDE FIRST, AND IT IS NOT CALLED "SELLING" (#28 item 8).
+                        
+                        CompanyID is which of OUR entities holds the agreement. Someone scanning contracts
+                        orients by that before they look at who it is with, so it leads the summary rather
+                        than sitting third. "Selling" was also the wrong word: the company holds the
+                        contract whether or not anything is being sold.
+                    -->
+                    <div class="mjc-hero__stat">
+                        <span class="mjc-hero__stat-label">Company</span>
+                        <span class="mjc-hero__stat-val">{{ CompanyName || '—' }}</span>
+                    </div>
+                    <div class="mjc-hero__stat">
+                        <span class="mjc-hero__stat-label">Customer</span>
+                        @if (Record.CustomerOrganizationID && CustomerName) {
+                            <button type="button" class="mjc-hero__stat-val is-link" (click)="OpenCustomer($event)">{{ CustomerName }}</button>
+                        } @else {
+                            <span class="mjc-hero__stat-val">{{ CustomerName || '—' }}</span>
+                        }
+                    </div>
+                    <div class="mjc-hero__stat">
+                        <span class="mjc-hero__stat-label">Contact</span>
+                        @if (Record.PrimaryContactPersonID && ContactName) {
+                            <button type="button" class="mjc-hero__stat-val is-link" (click)="OpenContact($event)">{{ ContactName }}</button>
+                        } @else {
+                            <span class="mjc-hero__stat-val">{{ ContactName || '—' }}</span>
+                        }
+                    </div>
+                    <div class="mjc-hero__stat">
+                        <span class="mjc-hero__stat-label">Executed</span>
+                        <span class="mjc-hero__stat-val">{{ (Record.ExecutedDate | date: 'd MMM y') || '—' }}</span>
+                    </div>
+                    <div class="mjc-hero__stat">
+                        <span class="mjc-hero__stat-label">Effective</span>
+                        <span class="mjc-hero__stat-val">{{ (Record.EffectiveDate | date: 'd MMM y') || '—' }}</span>
+                    </div>
+                    <div class="mjc-hero__stat">
+                        <span class="mjc-hero__stat-label">Term ends</span>
+                        <span class="mjc-hero__stat-val">{{ (Record.EndDate | date: 'd MMM y') || '—' }}</span>
+                    </div>
+                    <div class="mjc-hero__stat">
+                        <span class="mjc-hero__stat-label">Agreement</span>
+                        <span class="mjc-hero__stat-val">{{ TemplateName || '—' }}</span>
+                    </div>
+                    <div class="mjc-hero__stat">
+                        <span class="mjc-hero__stat-label">Created from</span>
+                        <span class="mjc-hero__stat-val">{{ CreatingEntityName || 'Entered directly' }}</span>
+                    </div>
                 </div>
+                @if (DaysToEnd !== null) {
+                    <div class="mjc-hero__next">
+                        <span class="mjc-hero__stat-label">Term</span>
+                        <span class="mjc-hero__next-val">{{ EndsInText }}</span>
+                    </div>
+                }
+                @if (EditMode) {
+                    <div class="mjc-hero__edit">
+                        <div class="mjc-hero__field">
+                            <mj-form-field [Record]="Record" [ShowLabel]="true" FieldName="Description"
+                                Type="textarea" [EditMode]="EditMode" [FormContext]="FormContext"></mj-form-field>
+                        </div>
+                    </div>
+                }
+                @if (!Record.ContractNumber) {
+                    <div class="mjc-flag">
+                        The contract number is minted on first save, from a counter taken under a lock — so it
+                        cannot collide with another contract created at the same moment.
+                    </div>
+                }
             }
         </div>
-    `,
-            }]
+    `, styles: ["/**\n * contracts-kit.css \u2014 ported from design-docs/ui-design/mockups-v2/tokens.css.\n *\n * \u26A0 SEMANTIC TOKENS ONLY. MJ's design-token rule is explicit: *\"NEVER use primitive tokens\n * (`--mj-color-neutral-*`, `--mj-color-brand-*`) in component CSS. Primitives don't adapt to dark\n * mode.\"* An earlier version of this file used twelve of them, because the mockup did \u2014 and in a\n * standalone mockup page that is harmless, since there is no dark mode to adapt to. Ported into a real\n * component stylesheet it means every tinted surface, chip and clause box keeps its LIGHT colour when\n * the app is themed dark. That is the theming break, and it is invisible until someone switches theme.\n *\n * The mapping applied: neutral-50 \u2192 bg-surface-sunken, neutral-100 \u2192 border-subtle, neutral-300 \u2192\n * border-strong, success/error/warning-50 \u2192 status-*-bg, success/error-700 \u2192 status-*-text, brand-50 \u2192\n * status-info-bg, brand-100 \u2192 status-info-border, brand-700/900 \u2192 status-info-text. `#fff` on a brand\n * fill \u2192 `--mj-brand-on-primary`.\n *\n * THE MOCKUPS ARE THE SPEC, and this file exists to keep them so. An earlier version of this kit was\n * written from MEMORY of them, and it was wrong in a way that is invisible in source and obvious on\n * screen: it used token names that do not exist. `--mj-font-size-sm`, `--mj-text-tertiary`,\n * `--mj-color-warning-text`, `--mj-color-success-border` and four others are not MJ tokens (the real\n * names are `--mj-text-sm`, `--mj-status-warning-text`, `--mj-status-success`, \u2026). Every one of those\n * resolved to NOTHING \u2014 so font sizes fell back to browser defaults and the state chips rendered with\n * no colour at all. That is most of what \"looks bad\" was.\n *\n * So: class names and rules below are the mockup's, verbatim where possible, and **every token used\n * here has been checked to exist in MJ's `_tokens.scss`.** If you add a rule, check the token first \u2014\n * a missing custom property fails silently, which is the worst failure mode CSS has.\n *\n * SHIPPED VIA THE SECTION SHELL (`styleUrls` + `ViewEncapsulation.None`). `ngc` only compiles what a\n * component references, so a stylesheet nothing references is built into dist and never loaded.\n * `None` is required, not lazy: these classes are used by DESCENDANT components.\n *\n * Prefix note: the mockup used bare class names (`.panel`, `.chip`) because it was a standalone page.\n * Here everything is `mjc-` prefixed \u2014 bare `.panel` inside a real Explorer would collide with MJ's own\n * chrome, and `ViewEncapsulation.None` means these rules are global.\n */\n\n/* \u2500\u2500 Page frame \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.mjc-page {\n  display: flex;\n  flex-direction: column;\n  gap: var(--mj-space-4);\n  padding: var(--mj-space-5);\n}\n\n/* A grid page needs a DEFINITE height: mj-explorer-entity-data-grid is height:100% outside a related\n   panel, and 100% of an auto-height parent is zero \u2014 the grid renders no rows while its toolbar still\n   reports the count. MJ's own source documents that symptom. `min-height: 0` on the fill slot is\n   mandatory: a flex child defaults to min-height:auto and refuses to shrink, so without it the grid\n   pushes the page taller instead of scrolling inside itself. */\n.mjc-page--grid { height: 100%; min-height: 0; }\n.mjc-grid-fill { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }\n\n/* Intro prose. Constrained measure \u2014 text stops being readable much past this \u2014 and it is a real\n   block with real spacing, not a bare text node floating between cards. */\n.mjc-page__intro {\n  color: var(--mj-text-secondary);\n  font-size: var(--mj-text-sm);\n  line-height: 1.55;\n  margin: 0;\n  max-width: 78ch;\n}\n\n/* \u2500\u2500 Panel body helpers \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   Our panels are real `<mj-collapsible-panel>`s, so MJ paints the frame, the header and the spacing.\n   These classes style only what goes INSIDE one. */\n\n.mjc-body { padding: var(--mj-space-4); }\n.mjc-body--flush { padding: 0; }            /* a table fills the panel edge to edge */\n.mjc-body > * + * { margin-top: var(--mj-space-3); }   /* nothing ever touches its neighbour */\n\n.mjc-note {\n  margin: 0;\n  color: var(--mj-text-muted);\n  font-size: var(--mj-text-xs);\n  line-height: 1.55;\n}\n\n/* A note under a flush table needs its own padding and a rule above it, or it reads as a table row. */\n.mjc-note--footer {\n  padding: var(--mj-space-3) var(--mj-space-4);\n  border-top: 1px solid var(--mj-border-subtle);\n}\n\n/* \u2500\u2500 Hero (mockup 1) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.mjc-hero {\n  display: flex;\n  flex-direction: column;\n  gap: var(--mj-space-4);\n  padding: var(--mj-space-4) var(--mj-space-5);\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-lg);\n  box-shadow: var(--mj-shadow-sm);\n}\n\n.mjc-hero__identity { display: flex; align-items: center; gap: var(--mj-space-4); min-width: 0; }\n\n.mjc-hero__avatar {\n  flex: none;\n  width: 52px; height: 52px;\n  border-radius: var(--mj-radius-md);\n  display: flex; align-items: center; justify-content: center;\n  background: color-mix(in srgb, var(--mj-brand-primary) 18%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n  font-size: var(--mj-text-xl, 1.375rem);\n}\n\n.mjc-hero__copy { min-width: 0; flex: 1; }\n\n.mjc-hero__title-row {\n  display: flex; align-items: center; flex-wrap: wrap;\n  gap: var(--mj-space-2) var(--mj-space-3);\n}\n\n.mjc-hero__title {\n  margin: 0;\n  font-size: var(--mj-text-lg);\n  font-weight: 700;\n  line-height: 1.25;\n  /* Long contract descriptions must not push the chips off the card. */\n  overflow-wrap: anywhere;\n}\n\n.mjc-hero__meta {\n  display: flex; flex-wrap: wrap;\n  gap: var(--mj-space-3);\n  color: var(--mj-text-secondary);\n  font-size: var(--mj-text-sm);\n  margin-top: var(--mj-space-2);\n}\n\n/* auto-fit so five stats sit in a row on a wide screen and reflow on a laptop, rather than\n   overflowing the card \u2014 which is what a fixed five-column grid did. */\n.mjc-hero__stats {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));\n  gap: var(--mj-space-3);\n}\n\n.mjc-stat {\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md);\n  padding: var(--mj-space-3);\n  min-width: 0;\n}\n.mjc-stat__label {\n  display: block; font-size: var(--mj-text-xs);\n  text-transform: uppercase; letter-spacing: .04em;\n  color: var(--mj-text-muted);\n}\n.mjc-stat__value {\n  display: block; font-size: var(--mj-text-base); font-weight: 700; margin-top: 2px;\n  overflow-wrap: anywhere;\n}\n.mjc-stat__sub { display: block; font-size: var(--mj-text-xs); color: var(--mj-text-muted); }\n\n/* \u2500\u2500 Chips \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.mjc-chip {\n  display: inline-flex; align-items: center; gap: 4px;\n  font-size: var(--mj-text-xs); font-weight: 600;\n  padding: 2px 9px; border-radius: 999px;\n  border: 1px solid transparent; white-space: nowrap;\n}\n.mjc-chip--ok    { background: var(--mj-status-success-bg); color: var(--mj-status-success-text); border-color: var(--mj-status-success); }\n.mjc-chip--warn  { background: var(--mj-status-warning-bg); color: var(--mj-status-warning-text); border-color: var(--mj-status-warning); }\n.mjc-chip--error { background: var(--mj-status-error-bg);   color: var(--mj-status-error-text);   border-color: var(--mj-status-error); }\n.mjc-chip--info  { background: var(--mj-status-info-bg);   color: var(--mj-status-info-text);   border-color: var(--mj-status-info-border); }\n.mjc-chip--muted { background: var(--mj-border-subtle); color: var(--mj-text-secondary);   border-color: var(--mj-border-default); }\n\n/* \u2500\u2500 Buttons \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.mjc-btn {\n  display: inline-flex; align-items: center; gap: 6px;\n  font-size: var(--mj-text-sm); font-weight: 600;\n  padding: 6px 12px;\n  border-radius: var(--mj-radius-sm);\n  border: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-primary);\n  cursor: pointer;\n}\n.mjc-btn:disabled { opacity: .5; cursor: default; }\n.mjc-btn--primary { background: var(--mj-brand-primary); border-color: var(--mj-brand-primary); color: var(--mj-brand-on-primary); }\n.mjc-btn--flat    { background: transparent; border-color: transparent; color: var(--mj-brand-primary); }\n.mjc-btn--sm      { padding: 3px 9px; font-size: var(--mj-text-xs); }\n.mjc-btn--danger  { color: var(--mj-status-error-text); border-color: transparent; background: transparent; }\n\n/* \u2500\u2500 Field grid \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.mjc-fields {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));\n  gap: var(--mj-space-3) var(--mj-space-4);\n}\n.mjc-field > label {\n  display: block; font-size: var(--mj-text-xs); color: var(--mj-text-muted);\n  text-transform: uppercase; letter-spacing: .04em; margin-bottom: 3px;\n}\n.mjc-field .mjc-val {\n  padding: 6px 9px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-sm);\n  background: var(--mj-bg-surface);\n  min-height: 31px;\n  overflow-wrap: anywhere;\n}\n.mjc-field .mjc-val--ro { background: var(--mj-bg-surface-sunken); color: var(--mj-text-secondary); }\n.mjc-hint { color: var(--mj-text-muted); font-size: var(--mj-text-xs); margin-top: 3px; }\n\n/* \u2500\u2500 Tables \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   The mockup renders modifications, documents and lineage as TABLES, not stacked cards. With three\n   or more rows a table is scannable and a stack is a wall. */\n\ntable.mjc-grid { width: 100%; border-collapse: collapse; }\ntable.mjc-grid th {\n  text-align: left; font-size: var(--mj-text-xs);\n  text-transform: uppercase; letter-spacing: .04em;\n  color: var(--mj-text-muted); font-weight: 700;\n  padding: var(--mj-space-2) var(--mj-space-3);\n  border-bottom: 1.5px solid var(--mj-border-default);\n}\ntable.mjc-grid td {\n  padding: var(--mj-space-3);\n  border-bottom: 1px solid var(--mj-border-subtle);\n  vertical-align: top;\n}\ntable.mjc-grid tr:last-child td { border-bottom: 0; }\ntable.mjc-grid tbody tr:hover td { background: var(--mj-bg-surface-sunken); }\n.mjc-row--click { cursor: pointer; }\n\n.mjc-muted { color: var(--mj-text-muted); }\n.mjc-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--mj-text-xs); }\n\n/* \u2500\u2500 The clause pair (mockups 1 and 2) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   The standard clause and what this contract says instead, read side by side. This is the app's\n   central idea rendered, so it gets real styling rather than two paragraphs. */\n\n.mjc-pair {\n  display: grid; grid-template-columns: 1fr; gap: var(--mj-space-3);\n  margin-top: var(--mj-space-2);\n}\n/* Side by side only when there is room \u2014 two 40ch columns on a laptop is worse than one readable one. */\n@media (min-width: 1100px) { .mjc-pair { grid-template-columns: 1fr 1fr; } }\n\n.mjc-pair__tag {\n  display: block; font-size: var(--mj-text-xs); font-weight: 700;\n  text-transform: uppercase; letter-spacing: .04em;\n  color: var(--mj-text-muted); margin-bottom: 3px;\n}\n.mjc-pair__tag--mod { color: var(--mj-status-warning-text); }\n\n.mjc-clause {\n  font-size: var(--mj-text-xs);\n  color: var(--mj-text-secondary);\n  background: var(--mj-bg-surface-sunken);\n  border-left: 2px solid var(--mj-border-strong);\n  padding: var(--mj-space-2) var(--mj-space-3);\n  border-radius: 0 var(--mj-radius-sm) var(--mj-radius-sm) 0;\n  margin: 0;\n  /* Clause text carries its own line breaks, and 9.1 is a single 1,100-character sentence in caps \u2014\n     both must wrap inside the box rather than escaping it. */\n  white-space: pre-wrap;\n  overflow-wrap: anywhere;\n}\n.mjc-clause--mod {\n  border-left-color: var(--mj-status-warning);\n  background: var(--mj-status-warning-bg);\n  color: var(--mj-text-primary);\n}\n\n.mjc-toggle {\n  font-size: var(--mj-text-xs); color: var(--mj-brand-primary);\n  font-weight: 600; margin-top: 4px; background: none; border: 0; padding: 0; cursor: pointer;\n}\n\n/* \u2500\u2500 Callout \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.mjc-flag {\n  background: var(--mj-status-warning-bg);\n  border-left: 3px solid var(--mj-status-warning);\n  padding: var(--mj-space-2) var(--mj-space-3);\n  font-size: var(--mj-text-xs);\n  color: var(--mj-status-warning-text);\n  border-radius: 0 var(--mj-radius-sm) var(--mj-radius-sm) 0;\n  line-height: 1.55;\n}\n\n/* \u2500\u2500 Invalid input \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n/* A required field the user has emptied. Border + ring only \u2014 no background change, because these\n   are prose textareas and tinting the reading surface makes the text itself harder to read, which\n   is the opposite of helpful when the point is \"write something here\". Tokens only, per the\n   design-token gate. */\n.mjc-invalid {\n  border-color: var(--mj-status-error) !important;\n  box-shadow: 0 0 0 2px var(--mj-status-error-bg);\n  outline: none;\n}\n\n/* \u2500\u2500 Filter pills (watchlist) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.mjc-pills { display: flex; flex-wrap: wrap; gap: var(--mj-space-2); align-items: center; }\n\n.mjc-pill {\n  appearance: none; cursor: pointer;\n  border: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-secondary);\n  border-radius: 999px;\n  padding: 3px var(--mj-space-3);\n  font-size: var(--mj-text-sm);\n  line-height: 1.6;\n  display: inline-flex; align-items: center; gap: var(--mj-space-2);\n}\n.mjc-pill:hover { border-color: var(--mj-brand-primary); color: var(--mj-text-primary); }\n.mjc-pill:disabled { opacity: .5; cursor: default; }\n.mjc-pill--active {\n  background: var(--mj-status-info-bg);\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-status-info-text);\n  font-weight: 700;\n}\n.mjc-pill__count { font-variant-numeric: tabular-nums; opacity: .85; font-size: var(--mj-text-xs); }\n\n/* \u2500\u2500 Dashboard command center \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.mjc-kpis {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));\n  gap: var(--mj-space-3);\n}\n.mjc-kpi {\n  appearance: none;\n  font: inherit;\n  text-align: left;\n  color: inherit;\n  cursor: pointer;\n  padding: var(--mj-space-3) var(--mj-space-4);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md);\n  background: var(--mj-bg-surface);\n}\n.mjc-kpi:hover { border-color: var(--mj-brand-primary); }\n.mjc-kpi:disabled { opacity: .6; cursor: default; }\n.mjc-kpi--alert .mjc-kpi__v { color: var(--mj-status-error-text); }\n.mjc-kpi__l {\n  font-size: var(--mj-text-xs);\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: .04em;\n  color: var(--mj-text-muted);\n}\n.mjc-kpi__v {\n  font-size: var(--mj-text-xl, 1.35rem);\n  font-weight: 700;\n  margin: 4px 0 2px;\n  font-variant-numeric: tabular-nums;\n}\n.mjc-kpi__f {\n  font-size: var(--mj-text-xs);\n  color: var(--mj-text-secondary);\n  line-height: 1.35;\n}\n\n.mjc-dash-split {\n  display: grid;\n  grid-template-columns: 1.15fr .85fr;\n  gap: var(--mj-space-3);\n}\n@media (max-width: 900px) { .mjc-dash-split { grid-template-columns: 1fr; } }\n\n.mjc-dash-card {\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md);\n  overflow: hidden;\n}\n.mjc-dash-card__h {\n  display: flex;\n  justify-content: space-between;\n  gap: var(--mj-space-2);\n  align-items: baseline;\n  padding: var(--mj-space-3) var(--mj-space-4);\n  border-bottom: 1px solid var(--mj-border-subtle);\n  font-weight: 700;\n}\n.mjc-dash-card__h span {\n  font-weight: 500;\n  font-size: var(--mj-text-xs);\n  color: var(--mj-text-muted);\n}\n\n.mjc-barlist { display: flex; flex-direction: column; gap: var(--mj-space-2); padding: var(--mj-space-3) var(--mj-space-4); }\n.mjc-barrow {\n  display: grid;\n  grid-template-columns: 7.5rem 1fr auto;\n  gap: var(--mj-space-2);\n  align-items: center;\n  font-size: var(--mj-text-sm);\n}\n.mjc-track {\n  height: 8px;\n  background: var(--mj-bg-surface-sunken);\n  border-radius: 99px;\n  overflow: hidden;\n}\n.mjc-fill {\n  height: 100%;\n  background: var(--mj-brand-primary);\n  border-radius: 99px;\n}\n.mjc-num { font-variant-numeric: tabular-nums; font-weight: 700; }\n\n.mjc-funnel {\n  display: flex;\n  gap: var(--mj-space-2);\n  align-items: flex-end;\n  height: 10rem;\n  padding: var(--mj-space-3) var(--mj-space-4);\n}\n.mjc-funnel__col {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 6px;\n}\n.mjc-funnel__bar {\n  width: 100%;\n  min-height: 8px;\n  border-radius: 8px 8px 2px 2px;\n  background: var(--mj-brand-primary);\n}\n.mjc-funnel__n { font-weight: 700; }\n.mjc-funnel__lab {\n  font-size: var(--mj-text-xs);\n  color: var(--mj-text-muted);\n  text-align: center;\n}\n\n.mjc-buckets {\n  display: grid;\n  grid-template-columns: repeat(4, 1fr);\n  gap: var(--mj-space-2);\n  padding: var(--mj-space-3) var(--mj-space-4);\n}\n@media (max-width: 700px) { .mjc-buckets { grid-template-columns: 1fr 1fr; } }\n.mjc-bucket {\n  background: var(--mj-bg-page);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md);\n  padding: var(--mj-space-3);\n}\n\n.mjc-viewer-host {\n  min-height: 420px;\n  height: 480px;\n  display: flex;\n  flex-direction: column;\n}\n.mjc-viewer-host mj-entity-viewer {\n  display: flex;\n  flex-direction: column;\n  flex: 1 1 auto;\n  min-height: 350px;\n  width: 100%;\n}\n\n/* \u2500\u2500 Empty state \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   A sentence in a bordered box, never a bare line of text in whitespace. */\n\n.mjc-empty {\n  display: flex; align-items: center; gap: var(--mj-space-2); justify-content: center;\n  padding: var(--mj-space-6);\n  color: var(--mj-text-muted);\n  font-size: var(--mj-text-sm);\n  background: var(--mj-bg-surface-sunken);\n  border: 1px dashed var(--mj-border-strong);\n  border-radius: var(--mj-radius-md);\n  text-align: center;\n}\n", "\n        .mjc-hero {\n            display: flex; flex-direction: column; gap: var(--mj-space-4);\n            padding: 20px 24px; margin-bottom: var(--mj-space-4);\n            background: var(--mj-bg-surface-card);\n            border: 1px solid var(--mj-border-default);\n            border-radius: var(--mj-radius-xl, 16px);\n            box-shadow: var(--mj-shadow-md, 0 4px 16px rgba(0, 0, 0, .08));\n            position: relative; overflow: hidden;\n        }\n        .mjc-hero::before {\n            content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3.5px;\n            background: linear-gradient(90deg, #38bdf8 0%, #6366f1 50%, #10b981 100%);\n        }\n        .mjc-hero__identity { display: flex; align-items: center; gap: var(--mj-space-4); min-width: 0; }\n        .mjc-hero__avatar {\n            flex: none; width: 60px; height: 60px; border-radius: var(--mj-radius-lg, 14px);\n            position: relative; display: flex; align-items: center; justify-content: center;\n            background: linear-gradient(135deg, color-mix(in srgb, var(--mj-brand-primary) 30%, var(--mj-bg-surface)) 0%, color-mix(in srgb, var(--mj-brand-accent, #6366f1) 25%, var(--mj-bg-surface)) 100%);\n            color: var(--mj-brand-primary); font-size: 1.35rem;\n            box-shadow: 0 4px 14px color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n            border: 2px solid color-mix(in srgb, var(--mj-brand-primary) 35%, transparent);\n        }\n        .mjc-hero__presence {\n            position: absolute; bottom: -2px; right: -2px; width: 13px; height: 13px;\n            border-radius: 50%; border: 2.5px solid var(--mj-bg-surface-card);\n            background: var(--mj-text-muted, #94a3b8);\n        }\n        .mjc-hero__presence[data-tone='success'] { background: var(--mj-status-success, #10b981); }\n        .mjc-hero__presence[data-tone='warning'] { background: var(--mj-status-warning, #f59e0b); }\n        .mjc-hero__copy { min-width: 0; flex: 1; }\n        .mjc-hero__title {\n            margin: 0; font-size: var(--mj-text-lg, 18px); font-weight: 800;\n            letter-spacing: -.02em; line-height: 1.25; color: var(--mj-text-primary);\n            overflow-wrap: anywhere;\n        }\n        .mjc-hero__aka { margin-top: 2px; font-size: var(--mj-text-xs); color: var(--mj-text-muted); }\n        .mjc-hero__badges {\n            display: flex; align-items: center; flex-wrap: wrap;\n            gap: var(--mj-space-2); margin-top: var(--mj-space-2);\n        }\n        .mjc-hero__entity-chip {\n            display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px;\n            border-radius: var(--mj-radius-sm);\n            background: var(--mj-status-info-bg); color: var(--mj-brand-primary);\n            font-size: var(--mj-text-xs); font-weight: 650;\n        }\n        .mjc-hero__toggle {\n            display: inline-flex; align-items: center; justify-content: center;\n            flex: none; width: 32px; height: 32px; margin-left: auto; padding: 0;\n            border: 1px solid var(--mj-border-default); border-radius: var(--mj-radius-md, 8px);\n            background: var(--mj-bg-surface-sunken, rgba(255,255,255,.04));\n            color: var(--mj-text-secondary); cursor: pointer; font-size: 12px;\n        }\n        .mjc-hero__toggle:hover {\n            background: var(--mj-bg-surface-hover, rgba(255,255,255,.08));\n            color: var(--mj-text-primary); border-color: var(--mj-brand-primary);\n        }\n        .mjc-hero__summary {\n            display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));\n            gap: var(--mj-space-3); padding-top: var(--mj-space-4);\n            border-top: 1px solid var(--mj-border-default);\n        }\n        .mjc-hero__stat { display: flex; flex-direction: column; gap: 3px; min-width: 0; }\n        .mjc-hero__stat-label {\n            font-size: var(--mj-text-xs); font-weight: 700; letter-spacing: .04em;\n            text-transform: uppercase; color: var(--mj-text-muted);\n        }\n        .mjc-hero__stat-val {\n            font-size: 15px; font-weight: 650; color: var(--mj-text-primary);\n            overflow: hidden; text-overflow: ellipsis; white-space: nowrap;\n        }\n        button.mjc-hero__stat-val, .mjc-hero__stat-val.is-link {\n            border: 0; padding: 0; background: transparent; color: var(--mj-text-link);\n            cursor: pointer; font: inherit; font-weight: 650; text-align: left;\n        }\n        button.mjc-hero__stat-val:hover { text-decoration: underline; }\n        .mjc-hero__next {\n            display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 14px;\n            padding: var(--mj-space-3) var(--mj-space-4);\n            background: var(--mj-bg-page); border: 1px solid var(--mj-border-default);\n            border-radius: var(--mj-radius-md);\n        }\n        .mjc-hero__next-val { font-weight: 700; font-size: 15px; }\n        .mjc-hero__edit {\n            display: flex; flex-direction: column; gap: var(--mj-space-3);\n            padding-top: var(--mj-space-3); border-top: 1px solid var(--mj-border-subtle, var(--mj-border-default));\n        }\n        .mjc-hero__field { min-width: 0; }\n        .mjc-hero__field .mj-forms-field {\n            display: flex; flex-direction: column; align-items: stretch; gap: 4px; padding: 0;\n        }\n        .mjc-hero__field .mj-forms-field-label {\n            font-size: var(--mj-text-xs); font-weight: 700; letter-spacing: .06em;\n            text-transform: uppercase; color: var(--mj-text-muted);\n        }\n        .mjc-hero--collapsed { padding: 12px 20px; gap: 0; margin-bottom: var(--mj-space-3); }\n        .mjc-hero--collapsed .mjc-hero__avatar { width: 42px; height: 42px; border-radius: var(--mj-radius-md, 10px); font-size: 1.05rem; }\n        .mjc-hero--collapsed .mjc-hero__title { font-size: 1.15rem; }\n        @media (max-width: 720px) {\n            .mjc-hero__identity { align-items: flex-start; }\n            .mjc-hero__summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }\n        }\n    "] }]
     }], null, null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MJCContractHeroPanel, { className: "MJCContractHeroPanel", filePath: "lib/form-panels/contract.panels.ts", lineNumber: 144 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MJCContractHeroPanel, { className: "MJCContractHeroPanel", filePath: "lib/form-panels/contract.panels.ts", lineNumber: 301 }); })();
 /* ────────────────────────────────────────────────────────────────────────────
  * 2 · Renewal terms — a real rail section
  * ──────────────────────────────────────────────────────────────────────────── */
@@ -619,7 +763,7 @@ let MJCContractRenewalPanel = class MJCContractRenewalPanel extends BaseFormPane
     get NoticeDeadline() { return this.Record?.RenewalNoticeDeadline ?? null; }
     get InCancellationWindow() { return this.Record?.IsInCancellationWindow === true; }
     static ɵfac = /*@__PURE__*/ (() => { let ɵMJCContractRenewalPanel_BaseFactory; return function MJCContractRenewalPanel_Factory(__ngFactoryType__) { return (ɵMJCContractRenewalPanel_BaseFactory || (ɵMJCContractRenewalPanel_BaseFactory = i0.ɵɵgetInheritedFactory(MJCContractRenewalPanel)))(__ngFactoryType__ || MJCContractRenewalPanel); }; })();
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MJCContractRenewalPanel, selectors: [["mjc-contract-renewal-panel"]], features: [i0.ɵɵInheritDefinitionFeature], decls: 31, vars: 10, consts: [["SectionKey", "renewal", "SectionName", "Renewal terms", "Icon", "fa-solid fa-calendar-days", 3, "Form", "FormContext"], [1, "mjc-body"], [1, "mjc-chip", "mjc-chip--muted"], [1, "mjc-fields"], [1, "mjc-field"], ["aria-label", "Does this agreement auto-renew?", 3, "ngModel"], [1, "mjc-val"], [1, "mjc-hint"], ["type", "number", "min", "0", "aria-label", "Renewal notice days", 2, "width", "100%", 3, "ngModel"], ["type", "number", "min", "0", "aria-label", "Cancellation window days", 2, "width", "100%", 3, "ngModel"], ["type", "number", "min", "0", "step", "0.01", "aria-label", "Annual increase percent", 2, "width", "100%", 3, "ngModel"], [1, "mjc-note"], [1, "mjc-empty"], ["aria-label", "Does this agreement auto-renew?", 3, "ngModelChange", "ngModel"], [3, "ngValue"], ["type", "number", "min", "0", "aria-label", "Renewal notice days", 2, "width", "100%", 3, "ngModelChange", "ngModel"], ["type", "number", "min", "0", "aria-label", "Cancellation window days", 2, "width", "100%", 3, "ngModelChange", "ngModel"], ["type", "number", "min", "0", "step", "0.01", "aria-label", "Annual increase percent", 2, "width", "100%", 3, "ngModelChange", "ngModel"]], template: function MJCContractRenewalPanel_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MJCContractRenewalPanel, selectors: [["mjc-contract-renewal-panel"]], features: [i0.ɵɵInheritDefinitionFeature], decls: 35, vars: 10, consts: [["SectionKey", "renewal", "SectionName", "Renewal terms", "Icon", "fa-solid fa-calendar-days", 3, "Form", "FormContext"], [1, "mjc-body"], [1, "mjc-chip", "mjc-chip--muted"], [1, "mjc-fields"], [1, "mjc-field"], ["aria-label", "Does this agreement auto-renew?", 3, "ngModel"], [1, "mjc-val"], [1, "mjc-hint"], ["type", "number", "min", "0", "aria-label", "Renewal notice days", 2, "width", "100%", 3, "ngModel"], ["type", "number", "min", "0", "aria-label", "Cancellation window days", 2, "width", "100%", 3, "ngModel"], ["type", "number", "min", "0", "step", "0.01", "aria-label", "Annual increase percent", 2, "width", "100%", 3, "ngModel"], [1, "mjc-note"], [1, "mjc-empty"], ["aria-label", "Does this agreement auto-renew?", 3, "ngModelChange", "ngModel"], [3, "ngValue"], ["type", "number", "min", "0", "aria-label", "Renewal notice days", 2, "width", "100%", 3, "ngModelChange", "ngModel"], ["type", "number", "min", "0", "aria-label", "Cancellation window days", 2, "width", "100%", 3, "ngModelChange", "ngModel"], ["type", "number", "min", "0", "step", "0.01", "aria-label", "Annual increase percent", 2, "width", "100%", 3, "ngModelChange", "ngModel"]], template: function MJCContractRenewalPanel_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "mj-collapsible-panel", 0)(1, "div", 1)(2, "span", 2);
             i0.ɵɵtext(3, "as stated in the agreement");
             i0.ɵɵelementEnd();
@@ -630,26 +774,32 @@ let MJCContractRenewalPanel = class MJCContractRenewalPanel extends BaseFormPane
             i0.ɵɵconditionalCreate(10, MJCContractRenewalPanel_Conditional_10_Template, 2, 0, "div", 7);
             i0.ɵɵelementEnd();
             i0.ɵɵelementStart(11, "div", 4)(12, "label");
-            i0.ɵɵtext(13, "Renewal notice we owe (days)");
+            i0.ɵɵtext(13, "Renewal notice (days)");
             i0.ɵɵelementEnd();
             i0.ɵɵconditionalCreate(14, MJCContractRenewalPanel_Conditional_14_Template, 1, 1, "input", 8)(15, MJCContractRenewalPanel_Conditional_15_Template, 2, 1, "div", 6);
-            i0.ɵɵconditionalCreate(16, MJCContractRenewalPanel_Conditional_16_Template, 3, 4, "div", 7);
+            i0.ɵɵelementStart(16, "div", 7);
+            i0.ɵɵtext(17, " Written notice we must give the customer before a renewal price change. ");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(17, "div", 4)(18, "label");
-            i0.ɵɵtext(19, "Notice to cancel (days)");
+            i0.ɵɵconditionalCreate(18, MJCContractRenewalPanel_Conditional_18_Template, 3, 4, "div", 7);
             i0.ɵɵelementEnd();
-            i0.ɵɵconditionalCreate(20, MJCContractRenewalPanel_Conditional_20_Template, 1, 1, "input", 9)(21, MJCContractRenewalPanel_Conditional_21_Template, 2, 1, "div", 6);
-            i0.ɵɵconditionalCreate(22, MJCContractRenewalPanel_Conditional_22_Template, 2, 0, "div", 7);
+            i0.ɵɵelementStart(19, "div", 4)(20, "label");
+            i0.ɵɵtext(21, "Notice to cancel (days)");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(23, "div", 4)(24, "label");
-            i0.ɵɵtext(25, "Annual increase (%)");
+            i0.ɵɵconditionalCreate(22, MJCContractRenewalPanel_Conditional_22_Template, 1, 1, "input", 9)(23, MJCContractRenewalPanel_Conditional_23_Template, 2, 1, "div", 6);
+            i0.ɵɵelementStart(24, "div", 7);
+            i0.ɵɵtext(25, "Notice the customer must give us to cancel.");
             i0.ɵɵelementEnd();
-            i0.ɵɵconditionalCreate(26, MJCContractRenewalPanel_Conditional_26_Template, 1, 1, "input", 10)(27, MJCContractRenewalPanel_Conditional_27_Template, 2, 1, "div", 6);
+            i0.ɵɵconditionalCreate(26, MJCContractRenewalPanel_Conditional_26_Template, 2, 0, "div", 7);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(27, "div", 4)(28, "label");
+            i0.ɵɵtext(29, "Annual increase (%)");
+            i0.ɵɵelementEnd();
+            i0.ɵɵconditionalCreate(30, MJCContractRenewalPanel_Conditional_30_Template, 1, 1, "input", 10)(31, MJCContractRenewalPanel_Conditional_31_Template, 2, 1, "div", 6);
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(28, "p", 11);
-            i0.ɵɵtext(29, " These record what the signed paper says. The subscription in orders holds the operational setting and may legitimately differ \u2014 a mismatch is a finding, not a bug. ");
+            i0.ɵɵelementStart(32, "p", 11);
+            i0.ɵɵtext(33, " These record what the signed paper says. The subscription in orders holds the operational setting and may legitimately differ \u2014 a mismatch is a finding, not a bug. ");
             i0.ɵɵelementEnd();
-            i0.ɵɵconditionalCreate(30, MJCContractRenewalPanel_Conditional_30_Template, 2, 0, "div", 12);
+            i0.ɵɵconditionalCreate(34, MJCContractRenewalPanel_Conditional_34_Template, 2, 0, "div", 12);
             i0.ɵɵelementEnd()();
         } if (rf & 2) {
             i0.ɵɵproperty("Form", ctx.FormComponent)("FormContext", ctx.FormContext);
@@ -659,17 +809,17 @@ let MJCContractRenewalPanel = class MJCContractRenewalPanel extends BaseFormPane
             i0.ɵɵconditional(!ctx.Record.AutoRenew ? 10 : -1);
             i0.ɵɵadvance(4);
             i0.ɵɵconditional(ctx.EditMode ? 14 : 15);
-            i0.ɵɵadvance(2);
-            i0.ɵɵconditional(ctx.NoticeDeadline ? 16 : -1);
             i0.ɵɵadvance(4);
-            i0.ɵɵconditional(ctx.EditMode ? 20 : 21);
-            i0.ɵɵadvance(2);
-            i0.ɵɵconditional(ctx.InCancellationWindow ? 22 : -1);
+            i0.ɵɵconditional(ctx.NoticeDeadline ? 18 : -1);
             i0.ɵɵadvance(4);
-            i0.ɵɵconditional(ctx.EditMode ? 26 : 27);
+            i0.ɵɵconditional(ctx.EditMode ? 22 : 23);
             i0.ɵɵadvance(4);
-            i0.ɵɵconditional(!ctx.Record.RenewalNoticeDays && !ctx.Record.CancellationWindowDays && ctx.Record.AnnualIncreasePercent === null ? 30 : -1);
-        } }, dependencies: [CommonModule, FormsModule, i2.NgSelectOption, i2.ɵNgSelectMultipleOption, i2.DefaultValueAccessor, i2.NumberValueAccessor, i2.SelectControlValueAccessor, i2.NgControlStatus, i2.MinValidator, i2.NgModel, BaseFormsModule, i3.MjCollapsiblePanelComponent, i1.DatePipe], encapsulation: 2 });
+            i0.ɵɵconditional(ctx.InCancellationWindow ? 26 : -1);
+            i0.ɵɵadvance(4);
+            i0.ɵɵconditional(ctx.EditMode ? 30 : 31);
+            i0.ɵɵadvance(4);
+            i0.ɵɵconditional(!ctx.Record.RenewalNoticeDays && !ctx.Record.CancellationWindowDays && ctx.Record.AnnualIncreasePercent === null ? 34 : -1);
+        } }, dependencies: [CommonModule, FormsModule, i3.NgSelectOption, i3.ɵNgSelectMultipleOption, i3.DefaultValueAccessor, i3.NumberValueAccessor, i3.SelectControlValueAccessor, i3.NgControlStatus, i3.MinValidator, i3.NgModel, BaseFormsModule, i1.MjCollapsiblePanelComponent, i2.DatePipe], encapsulation: 2 });
 };
 MJCContractRenewalPanel = __decorate([
     RegisterClassEx(BaseFormPanel, {
@@ -744,13 +894,22 @@ export { MJCContractRenewalPanel };
                         }
                     </div>
                     <div class="mjc-field">
-                        <label>Renewal notice we owe (days)</label>
+                        <label>Renewal notice (days)</label>
                         @if (EditMode) {
                             <input type="number" min="0" style="width:100%" [ngModel]="Record.RenewalNoticeDays"
                                    (ngModelChange)="Set('RenewalNoticeDays', $event)" aria-label="Renewal notice days" />
                         } @else {
                             <div class="mjc-val">{{ Record.RenewalNoticeDays ? Record.RenewalNoticeDays + ' days' : '—' }}</div>
                         }
+                        <!--
+                            WHICH DIRECTION THE NOTICE RUNS IS THE WHOLE POINT (#28 item 6). This field
+                            and CancellationWindowDays below are both "a number of days of notice",
+                            and the old labels left the reader to work out whose notice each one was.
+                            One is what we owe them; the other is what they owe us.
+                        -->
+                        <div class="mjc-hint">
+                            Written notice we must give the customer before a renewal price change.
+                        </div>
                         @if (NoticeDeadline) {
                             <div class="mjc-hint">deadline: {{ NoticeDeadline | date: 'd MMM y' }}</div>
                         }
@@ -763,6 +922,7 @@ export { MJCContractRenewalPanel };
                         } @else {
                             <div class="mjc-val">{{ Record.CancellationWindowDays ? Record.CancellationWindowDays + ' days' : '—' }}</div>
                         }
+                        <div class="mjc-hint">Notice the customer must give us to cancel.</div>
                         @if (InCancellationWindow) { <div class="mjc-hint">the window is open now</div> }
                     </div>
                     <div class="mjc-field">
@@ -792,7 +952,7 @@ export { MJCContractRenewalPanel };
     `,
             }]
     }], null, null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MJCContractRenewalPanel, { className: "MJCContractRenewalPanel", filePath: "lib/form-panels/contract.panels.ts", lineNumber: 318 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MJCContractRenewalPanel, { className: "MJCContractRenewalPanel", filePath: "lib/form-panels/contract.panels.ts", lineNumber: 525 }); })();
 /* ────────────────────────────────────────────────────────────────────────────
  * 2b · Dates — its own rail section, replacing the generated `datesAndTerms`
  * ──────────────────────────────────────────────────────────────────────────── */
@@ -875,7 +1035,7 @@ let MJCContractDatesPanel = class MJCContractDatesPanel extends BaseFormPanel {
             i0.ɵɵconditional(ctx.Record.DaysToEnd !== null ? 20 : -1);
             i0.ɵɵadvance(4);
             i0.ɵɵconditional(ctx.EditMode ? 24 : 25);
-        } }, dependencies: [CommonModule, FormsModule, i2.DefaultValueAccessor, i2.NgControlStatus, i2.NgModel, BaseFormsModule, i3.MjCollapsiblePanelComponent, i1.DatePipe], encapsulation: 2 });
+        } }, dependencies: [CommonModule, FormsModule, i3.DefaultValueAccessor, i3.NgControlStatus, i3.NgModel, BaseFormsModule, i1.MjCollapsiblePanelComponent, i2.DatePipe], encapsulation: 2 });
 };
 MJCContractDatesPanel = __decorate([
     RegisterClassEx(BaseFormPanel, {
@@ -976,13 +1136,12 @@ export { MJCContractDatesPanel };
     `,
             }]
     }], null, null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MJCContractDatesPanel, { className: "MJCContractDatesPanel", filePath: "lib/form-panels/contract.panels.ts", lineNumber: 442 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MJCContractDatesPanel, { className: "MJCContractDatesPanel", filePath: "lib/form-panels/contract.panels.ts", lineNumber: 649 }); })();
 /* ────────────────────────────────────────────────────────────────────────────
  * 4 · Lineage — change orders and supersession, read-only
  * ──────────────────────────────────────────────────────────────────────────── */
 let MJCContractLineagePanel = class MJCContractLineagePanel extends BaseFormPanel {
     cdr = inject(ChangeDetectorRef);
-    navigation = inject(NavigationService);
     /**
      * The whole tree, declared rather than fetched.
      *
@@ -1022,7 +1181,7 @@ let MJCContractLineagePanel = class MJCContractLineagePanel extends BaseFormPane
         const key = e?.Node?.PrimaryKey;
         if (!key)
             return;
-        this.navigation.OpenEntityRecord(MJC_ENTITIES.Contract, key);
+        this.FormComponent.OnFormNavigate({ Kind: 'record', EntityName: MJC_ENTITIES.Contract, PrimaryKey: key });
     }
     get ParentName() { return this.Record?.ParentContract ?? ''; }
     get Count() {
@@ -1071,7 +1230,7 @@ let MJCContractLineagePanel = class MJCContractLineagePanel extends BaseFormPane
         return ScopedRunView(this.FormComponent?.ProviderToUse);
     }
     static ɵfac = /*@__PURE__*/ (() => { let ɵMJCContractLineagePanel_BaseFactory; return function MJCContractLineagePanel_Factory(__ngFactoryType__) { return (ɵMJCContractLineagePanel_BaseFactory || (ɵMJCContractLineagePanel_BaseFactory = i0.ɵɵgetInheritedFactory(MJCContractLineagePanel)))(__ngFactoryType__ || MJCContractLineagePanel); }; })();
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MJCContractLineagePanel, selectors: [["mjc-contract-lineage-panel"]], features: [i0.ɵɵInheritDefinitionFeature], decls: 5, vars: 9, consts: [["SectionKey", "contractLineage", "SectionName", "Lineage", "Icon", "fa-solid fa-sitemap", "Variant", "related-entity", 3, "BadgeCount", "Form", "FormContext"], [1, "mjc-body"], [3, "NodeDoubleClick", "Config", "ActiveRecordID"], [1, "mjc-empty"], [1, "mjc-note"]], template: function MJCContractLineagePanel_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MJCContractLineagePanel, selectors: [["mjc-contract-lineage-panel"]], features: [i0.ɵɵInheritDefinitionFeature], decls: 5, vars: 9, consts: [["SectionKey", "lineage", "SectionName", "Lineage", "Icon", "fa-solid fa-sitemap", "Variant", "related-entity", 3, "BadgeCount", "Form", "FormContext"], [1, "mjc-body"], [3, "NodeDoubleClick", "Config", "ActiveRecordID"], [1, "mjc-empty"], [1, "mjc-note"]], template: function MJCContractLineagePanel_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "mj-collapsible-panel", 0)(1, "div", 1);
             i0.ɵɵconditionalCreate(2, MJCContractLineagePanel_Conditional_2_Template, 2, 1, "div", 1);
             i0.ɵɵelementStart(3, "mj-hierarchy-tree", 2);
@@ -1089,7 +1248,7 @@ let MJCContractLineagePanel = class MJCContractLineagePanel extends BaseFormPane
             i0.ɵɵproperty("Config", ctx.TreeConfig)("ActiveRecordID", (ctx.Record == null ? null : ctx.Record.ID) ?? undefined);
             i0.ɵɵadvance();
             i0.ɵɵconditional(!ctx.ParentName && !ctx.HasChildren ? 4 : -1);
-        } }, dependencies: [CommonModule, FormsModule, BaseFormsModule, i3.MjCollapsiblePanelComponent, HierarchyTreeComponent], styles: ["\n        /* A PINNED FLOOR, not a percentage. height:100% cannot work here: it resolves against\n           .mj-forms-panel-content, which the variant sets to height:auto, and 100% of auto collapses\n           straight back to auto - measured blank. AG Grid escapes this because the grid supplies its\n           own intrinsic height; a plain div does not. A px min-height resolves regardless of what the\n           parent computes to, and stays under the variant's own 800px cap. */\n        /* DIRECT child only. As a descendant selector this also matched the nested .mjc-body wrapper\n           inside the panel, so the floor applied twice and left a tall empty block above the tree. */\n        mjc-contract-lineage-panel > .mjc-body {\n            min-height: 440px;\n            overflow-y: auto;\n        }\n        mjc-contract-lineage-panel mj-hierarchy-tree { display: block; min-height: 380px; }\n    "], encapsulation: 2 });
+        } }, dependencies: [CommonModule, FormsModule, BaseFormsModule, i1.MjCollapsiblePanelComponent, HierarchyTreeComponent], styles: ["\n        /* A PINNED FLOOR, not a percentage. height:100% cannot work here: it resolves against\n           .mj-forms-panel-content, which the variant sets to height:auto, and 100% of auto collapses\n           straight back to auto - measured blank. AG Grid escapes this because the grid supplies its\n           own intrinsic height; a plain div does not. A px min-height resolves regardless of what the\n           parent computes to, and stays under the variant's own 800px cap. */\n        /* DIRECT child only. As a descendant selector this also matched the nested .mjc-body wrapper\n           inside the panel, so the floor applied twice and left a tall empty block above the tree. */\n        mjc-contract-lineage-panel > .mjc-body {\n            min-height: 440px;\n            overflow-y: auto;\n        }\n        mjc-contract-lineage-panel mj-hierarchy-tree { display: block; min-height: 380px; }\n    "], encapsulation: 2 });
 };
 MJCContractLineagePanel = __decorate([
     RegisterClassEx(BaseFormPanel, {
@@ -1126,7 +1285,7 @@ export { MJCContractLineagePanel };
         type: Component,
         args: [{ selector: 'mjc-contract-lineage-panel', standalone: true, encapsulation: ViewEncapsulation.None, imports: [CommonModule, FormsModule, BaseFormsModule, HierarchyTreeComponent], template: `
         <mj-collapsible-panel
-            SectionKey="contractLineage"
+            SectionKey="lineage"
             SectionName="Lineage"
             Icon="fa-solid fa-sitemap"
             Variant="related-entity"
@@ -1163,5 +1322,5 @@ export { MJCContractLineagePanel };
         </mj-collapsible-panel>
     `, styles: ["\n        /* A PINNED FLOOR, not a percentage. height:100% cannot work here: it resolves against\n           .mj-forms-panel-content, which the variant sets to height:auto, and 100% of auto collapses\n           straight back to auto - measured blank. AG Grid escapes this because the grid supplies its\n           own intrinsic height; a plain div does not. A px min-height resolves regardless of what the\n           parent computes to, and stays under the variant's own 800px cap. */\n        /* DIRECT child only. As a descendant selector this also matched the nested .mjc-body wrapper\n           inside the panel, so the floor applied twice and left a tall empty block above the tree. */\n        mjc-contract-lineage-panel > .mjc-body {\n            min-height: 440px;\n            overflow-y: auto;\n        }\n        mjc-contract-lineage-panel mj-hierarchy-tree { display: block; min-height: 380px; }\n    "] }]
     }], null, null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MJCContractLineagePanel, { className: "MJCContractLineagePanel", filePath: "lib/form-panels/contract.panels.ts", lineNumber: 572 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MJCContractLineagePanel, { className: "MJCContractLineagePanel", filePath: "lib/form-panels/contract.panels.ts", lineNumber: 779 }); })();
 //# sourceMappingURL=contract.panels.js.map