@mj-biz-apps/contracts-ng 0.2.0 → 0.4.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,84 +42,219 @@ 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.ɵɵdomElementEnd();
+    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.ɵɵ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.ContactName);
+} }
+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_39_Template(rf, ctx) { if (rf & 1) {
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 19)(1, "span", 20);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "button", 26);
+    i0.ɵɵlistener("click", function MJCContractHeroPanel_Conditional_21_Conditional_39_Template_button_click_3_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.OpenSource($event)); });
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(ctx_r0.SourceLabel);
+    i0.ɵɵadvance();
+    i0.ɵɵattribute("aria-label", "Open " + (ctx_r0.SourceName || "the source record"));
     i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", ctx_r0.SourceName || "Open", " ");
+} }
+function MJCContractHeroPanel_Conditional_21_Conditional_40_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_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_41_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_57_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵdomElementStart(0, "span", 17);
-    i0.ɵɵtext(1, "entered directly");
-    i0.ɵɵdomElementEnd();
+function MJCContractHeroPanel_Conditional_21_Conditional_42_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 25);
+    i0.ɵɵtext(1, "Contract number is assigned on save.");
+    i0.ɵɵelementEnd();
 } }
-function MJCContractHeroPanel_Conditional_58_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵdomElementStart(0, "div", 18);
-    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();
+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.ɵɵconditionalCreate(39, MJCContractHeroPanel_Conditional_21_Conditional_39_Template, 5, 3, "div", 19);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(40, MJCContractHeroPanel_Conditional_21_Conditional_40_Template, 5, 1, "div", 23);
+    i0.ɵɵconditionalCreate(41, MJCContractHeroPanel_Conditional_21_Conditional_41_Template, 3, 4, "div", 24);
+    i0.ɵɵconditionalCreate(42, MJCContractHeroPanel_Conditional_21_Conditional_42_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();
+    i0.ɵɵconditional(ctx_r0.HasSource ? 39 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r0.DaysToEnd !== null ? 40 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r0.EditMode ? 41 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(!ctx_r0.Record.ContractNumber ? 42 : -1);
 } }
 function MJCContractRenewalPanel_Conditional_8_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "select", 13);
+    i0.ɵɵelementStart(0, "select", 12);
     i0.ɵɵlistener("ngModelChange", function MJCContractRenewalPanel_Conditional_8_Template_select_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.Set("AutoRenew", $event)); });
-    i0.ɵɵelementStart(1, "option", 14);
+    i0.ɵɵelementStart(1, "option", 13);
     i0.ɵɵtext(2, "Yes");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "option", 14);
+    i0.ɵɵelementStart(3, "option", 13);
     i0.ɵɵtext(4, "No");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -139,31 +274,26 @@ function MJCContractRenewalPanel_Conditional_9_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(ctx_r1.Record.AutoRenew ? "Yes" : "No");
 } }
-function MJCContractRenewalPanel_Conditional_10_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 7);
-    i0.ɵɵtext(1, "someone must act for this to continue");
-    i0.ɵɵelementEnd();
-} }
-function MJCContractRenewalPanel_Conditional_14_Template(rf, ctx) { if (rf & 1) {
+function MJCContractRenewalPanel_Conditional_13_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "input", 15);
-    i0.ɵɵlistener("ngModelChange", function MJCContractRenewalPanel_Conditional_14_Template_input_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.Set("RenewalNoticeDays", $event)); });
+    i0.ɵɵelementStart(0, "input", 14);
+    i0.ɵɵlistener("ngModelChange", function MJCContractRenewalPanel_Conditional_13_Template_input_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.Set("RenewalNoticeDays", $event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵproperty("ngModel", ctx_r1.Record.RenewalNoticeDays);
 } }
-function MJCContractRenewalPanel_Conditional_15_Template(rf, ctx) { if (rf & 1) {
+function MJCContractRenewalPanel_Conditional_14_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 6);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(ctx_r1.Record.RenewalNoticeDays ? ctx_r1.Record.RenewalNoticeDays + " days" : "\u2014");
+    i0.ɵɵtextInterpolate(ctx_r1.Days(ctx_r1.Record.RenewalNoticeDays));
 } }
-function MJCContractRenewalPanel_Conditional_16_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 7);
+function MJCContractRenewalPanel_Conditional_17_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 8);
     i0.ɵɵtext(1);
     i0.ɵɵpipe(2, "date");
     i0.ɵɵelementEnd();
@@ -172,55 +302,55 @@ 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_21_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.ɵɵelementStart(0, "input", 15);
+    i0.ɵɵlistener("ngModelChange", function MJCContractRenewalPanel_Conditional_21_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_22_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 6);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(ctx_r1.Record.CancellationWindowDays ? ctx_r1.Record.CancellationWindowDays + " days" : "\u2014");
+    i0.ɵɵtextInterpolate(ctx_r1.Days(ctx_r1.Record.CancellationWindowDays));
 } }
-function MJCContractRenewalPanel_Conditional_22_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 7);
+function MJCContractRenewalPanel_Conditional_25_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 8);
     i0.ɵɵtext(1, "the window is open now");
     i0.ɵɵelementEnd();
 } }
-function MJCContractRenewalPanel_Conditional_26_Template(rf, ctx) { if (rf & 1) {
+function MJCContractRenewalPanel_Conditional_29_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.ɵɵelementStart(0, "input", 16);
+    i0.ɵɵlistener("ngModelChange", function MJCContractRenewalPanel_Conditional_29_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_30_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 6);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(ctx_r1.Record.AnnualIncreasePercent !== null ? ctx_r1.Record.AnnualIncreasePercent + "%" : "\u2014");
+    i0.ɵɵtextInterpolate(ctx_r1.Percent(ctx_r1.Record.AnnualIncreasePercent));
 } }
-function MJCContractRenewalPanel_Conditional_30_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. ");
+function MJCContractRenewalPanel_Conditional_31_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 11);
+    i0.ɵɵtext(1, "No renewal terms recorded.");
     i0.ɵɵelementEnd();
 } }
 function MJCContractDatesPanel_Conditional_6_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "input", 12);
+    i0.ɵɵelementStart(0, "input", 11);
     i0.ɵɵlistener("ngModelChange", function MJCContractDatesPanel_Conditional_6_Template_input_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.SetDate("ExecutedDate", $event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -237,16 +367,16 @@ function MJCContractDatesPanel_Conditional_7_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(2, 1, ctx_r1.Record.ExecutedDate, "d MMM y") || "\u2014");
 } }
-function MJCContractDatesPanel_Conditional_13_Template(rf, ctx) { if (rf & 1) {
+function MJCContractDatesPanel_Conditional_11_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "input", 13);
-    i0.ɵɵlistener("ngModelChange", function MJCContractDatesPanel_Conditional_13_Template_input_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.SetDate("EffectiveDate", $event)); });
+    i0.ɵɵelementStart(0, "input", 12);
+    i0.ɵɵlistener("ngModelChange", function MJCContractDatesPanel_Conditional_11_Template_input_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.SetDate("EffectiveDate", $event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵproperty("ngModel", ctx_r1.AsInput(ctx_r1.Record.EffectiveDate));
 } }
-function MJCContractDatesPanel_Conditional_14_Template(rf, ctx) { if (rf & 1) {
+function MJCContractDatesPanel_Conditional_12_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 5);
     i0.ɵɵtext(1);
     i0.ɵɵpipe(2, "date");
@@ -256,16 +386,16 @@ function MJCContractDatesPanel_Conditional_14_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(2, 1, ctx_r1.Record.EffectiveDate, "d MMM y") || "\u2014");
 } }
-function MJCContractDatesPanel_Conditional_18_Template(rf, ctx) { if (rf & 1) {
+function MJCContractDatesPanel_Conditional_16_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "input", 14);
-    i0.ɵɵlistener("ngModelChange", function MJCContractDatesPanel_Conditional_18_Template_input_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.SetDate("EndDate", $event)); });
+    i0.ɵɵelementStart(0, "input", 13);
+    i0.ɵɵlistener("ngModelChange", function MJCContractDatesPanel_Conditional_16_Template_input_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.SetDate("EndDate", $event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵproperty("ngModel", ctx_r1.AsInput(ctx_r1.Record.EndDate));
 } }
-function MJCContractDatesPanel_Conditional_19_Template(rf, ctx) { if (rf & 1) {
+function MJCContractDatesPanel_Conditional_17_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 5);
     i0.ɵɵtext(1);
     i0.ɵɵpipe(2, "date");
@@ -275,25 +405,16 @@ function MJCContractDatesPanel_Conditional_19_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(2, 1, ctx_r1.Record.EndDate, "d MMM y") || "\u2014");
 } }
-function MJCContractDatesPanel_Conditional_20_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 6);
-    i0.ɵɵtext(1);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(ctx_r1.EndsInText);
-} }
-function MJCContractDatesPanel_Conditional_24_Template(rf, ctx) { if (rf & 1) {
+function MJCContractDatesPanel_Conditional_21_Template(rf, ctx) { if (rf & 1) {
     const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "input", 15);
-    i0.ɵɵlistener("ngModelChange", function MJCContractDatesPanel_Conditional_24_Template_input_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.SetDate("TerminatedDate", $event)); });
+    i0.ɵɵelementStart(0, "input", 14);
+    i0.ɵɵlistener("ngModelChange", function MJCContractDatesPanel_Conditional_21_Template_input_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.SetDate("TerminatedDate", $event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵproperty("ngModel", ctx_r1.AsInput(ctx_r1.Record.TerminatedDate));
 } }
-function MJCContractDatesPanel_Conditional_25_Template(rf, ctx) { if (rf & 1) {
+function MJCContractDatesPanel_Conditional_22_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 5);
     i0.ɵɵtext(1);
     i0.ɵɵpipe(2, "date");
@@ -328,9 +449,10 @@ function MJCContractLineagePanel_Conditional_2_Template(rf, ctx) { if (rf & 1) {
 } }
 function MJCContractLineagePanel_Conditional_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 3);
-    i0.ɵɵtext(1, " A standalone agreement \u2014 nothing above it, no change orders, and nothing has replaced it. ");
+    i0.ɵɵtext(1, " No parent contract, change orders, or superseding contracts. ");
     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,23 @@ function chipClassFor(state) {
  * 1 · Hero — persistent identity, above the rail
  * ──────────────────────────────────────────────────────────────────────────── */
 let MJCContractHeroPanel = class MJCContractHeroPanel extends BaseFormPanel {
+    cdr = inject(ChangeDetectorRef);
+    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.
      *
@@ -381,9 +520,129 @@ let MJCContractHeroPanel = class MJCContractHeroPanel extends BaseFormPanel {
     get CompanyName() { return this.Record?.Company ?? ''; }
     get ContactName() { return this.Record?.PrimaryContactPerson ?? ''; }
     get TemplateName() { return this.Record?.ContractTemplate ?? ''; }
-    get CreatingEntityName() { return this.Record?.CreatingEntity ?? ''; }
+    /* ── Source record — the thing that created this contract (issue #28 item 1) ──────────────
+     *
+     * WHAT THE STAT USED TO CLAIM. Labelled "Created from", it rendered `CreatingEntity` — the name of
+     * an ENTITY, not a record — so a contract raised from a Close-Won deal read "Deals" and one
+     * entered by hand read "Entered directly". Neither told the reader WHICH deal, and the second
+     * spends a stat on the absence of a fact.
+     *
+     * `CreatingEntityID` / `CreatingRecordID` is a POLYMORPHIC pair, so nothing here may assume Deals.
+     * Today `bizapps-sales` is the only writer (`LiveContractsSeam`, on Close-Won) and always stores
+     * Deals, but the column does not say so: the entity is resolved from the id, the label takes that
+     * entity's own singular name, and an Order would read "Source Order" with no edit here.
+     *
+     * NAVIGATION GOES THROUGH THIS PANEL'S OWN `open()`, the helper next added for Customer and
+     * Contact. It handles ctrl/cmd-click for a new tab and routes through `OnFormNavigate` rather
+     * than `NavigationService`, and matching it matters more than the primary-key lookup an earlier
+     * version of this did — `CompositeKey.FromID` is the convention every link in this file uses.
+     */
+    /** Resolved once per record, lazily, on the first template read. */
+    sourceFor = null;
+    SourceLabel = 'Source record';
+    SourceName = '';
+    /** Set when the provenance names a record that does not exist — the stat hides rather than link. */
+    SourceMissing = false;
+    /**
+     * Whether this contract records what created it.
+     *
+     * Doubles as the load trigger — `BaseFormPanel` has no lifecycle hook and the slot host sets
+     * `Record` before view init, so the first template read is the earliest reliable moment. Keyed on
+     * the record so navigating the form to another contract reloads instead of showing the previous
+     * one's deal.
+     */
+    get HasSource() {
+        const entityID = this.Record?.CreatingEntityID;
+        const recordID = this.Record?.CreatingRecordID;
+        if (!entityID || !recordID)
+            return false;
+        const key = `${this.Record?.ID}:${entityID}:${recordID}`;
+        if (this.sourceFor !== key) {
+            this.sourceFor = key;
+            this.SourceMissing = false;
+            void this.loadSource(key);
+        }
+        return !this.SourceMissing;
+    }
+    /** The entity named by `CreatingEntityID`, or null when the id names nothing this user can see. */
+    sourceEntity() {
+        const id = this.Record?.CreatingEntityID;
+        return (id ? this.FormComponent?.ProviderToUse?.Entities?.find((e) => e.ID === id) : undefined) ?? null;
+    }
+    /**
+     * Label from the entity, name from the record.
+     *
+     * `BaseTableDisplayName` rather than `DisplayName`: the entity is plural ("Deals") and the stat
+     * labels one record, so the singular base table is the honest word — and it is what produces
+     * "Source Deal" and "Source Order" with no de-pluralising guess.
+     */
+    async loadSource(key) {
+        const entity = this.sourceEntity();
+        if (!entity)
+            return;
+        this.SourceLabel = `Source ${entity.BaseTableDisplayName}`;
+        const nameField = entity.NameField?.Name;
+        const recordID = String(this.Record?.CreatingRecordID ?? '');
+        if (!nameField || !recordID) {
+            this.cdr.detectChanges();
+            return;
+        }
+        try {
+            const { ScopedRunView } = await import('../data/provider');
+            const rv = ScopedRunView(this.FormComponent?.ProviderToUse);
+            const pkField = entity.PrimaryKeys?.[0]?.Name ?? 'ID';
+            const r = await rv.RunView({
+                EntityName: entity.Name,
+                Fields: [nameField],
+                ExtraFilter: `${pkField} = '${recordID.replace(/'/g, "''")}'`,
+                ResultType: 'simple',
+            });
+            // Guard against a slower read for a PREVIOUS record landing after the form moved on.
+            if (this.sourceFor !== key)
+                return;
+            const row = r?.Success ? r.Results?.[0] : undefined;
+            if (r?.Success && !row) {
+                // READ SUCCEEDED AND MATCHED NOTHING: the provenance names a row that is not there,
+                // so there is nothing to open and the stat hides itself. This is the case the
+                // fallback below used to swallow — CTR-000026 carries a hand-typed pair whose record
+                // id is not even a UUID, and the stat rendered an "Open" button that navigated
+                // nowhere. A link that cannot work is worse than an absent stat: it invites a click
+                // and spends the reader's trust.
+                this.SourceMissing = true;
+                this.SourceName = '';
+                return;
+            }
+            this.SourceMissing = false;
+            this.SourceName = row ? String(row[nameField] ?? '') : '';
+        }
+        catch {
+            // A THROWN read is the different case, and the fallback is still right for it: the record
+            // may well exist and simply be unreadable by this user, so the link stays and the stat
+            // says "Open". Conflating the two is what made the dead button look deliberate.
+            this.SourceMissing = false;
+            this.SourceName = '';
+        }
+        finally {
+            this.cdr.detectChanges();
+        }
+    }
+    /** Open the record that created this contract, through the same helper as the other links. */
+    OpenSource(event) {
+        const entity = this.sourceEntity();
+        if (!entity)
+            return;
+        this.open(event, entity.Name, this.Record?.CreatingRecordID);
+    }
     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 +657,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", "Standard agreement was modified", 1, "mjc-chip", "mjc-chip--warn"], ["title", "Executed agreement not 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, 43, 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.ɵɵadvance();
-            i0.ɵɵconditional(!ctx.TemplateName ? 51 : -1);
-            i0.ɵɵadvance(5);
-            i0.ɵɵtextInterpolate(ctx.CreatingEntityName || "\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.CreatingEntityName ? 57 : -1);
+            i0.ɵɵclassMap(ctx.Collapsed ? "fa-solid fa-chevron-down" : "fa-solid fa-chevron-up");
             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\n/* EDIT MODE MATCHES READ MODE. These panels render bare native controls -- `<input type=\"date\">`,\n   `<input type=\"number\">`, `<select>` -- because the generated datetime picker shows a time\n   component for a `date` column, which is the whole reason the Dates panel exists. A bare control\n   inherits none of the app's typography or chrome, so the same field visibly changed font, height\n   and border the moment you pressed Edit. This mirrors `.mjc-val` above, field for field, so\n   toggling edit does not move anything on screen.\n\n   `font: inherit` is doing real work: form controls do NOT inherit font from their ancestor by\n   default in any browser -- they fall back to a UA font -- so without it the value box and the\n   input disagree even when every other property matches.\n\n   THE WIDTH LIVES HERE, not on each control. The panels used to carry seven inline\n   `style=\"width:100%\"` attributes; they are gone, and this rule is what replaces them. */\n.mjc-field input,\n.mjc-field select {\n  width: 100%;\n  box-sizing: border-box;\n  font: inherit;\n  color: inherit;\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}\n.mjc-field input:focus-visible,\n.mjc-field select:focus-visible { outline: 2px solid var(--mj-brand-primary); outline-offset: -1px; }\n.mjc-field input:disabled,\n.mjc-field select:disabled { 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,84 +743,158 @@ 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) {
                             <span class="mjc-chip mjc-chip--warn"
-                                  title="This contract deviates from the standard agreement — read the paper">
+                                  title="Standard agreement was modified">
                                 <i class="fa-solid fa-triangle-exclamation" aria-hidden="true"></i> Agreement modified
                             </span>
                         }
                         @if (IsAwaitingDocument) {
                             <span class="mjc-chip mjc-chip--warn"
-                                  title="This contract type expects an executed document and none is attached">
+                                  title="Executed agreement not attached">
                                 <i class="fa-solid fa-file-circle-question" aria-hidden="true"></i> Awaiting document
                             </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>
+                    @if (HasSource) {
+                        <div class="mjc-hero__stat">
+                            <span class="mjc-hero__stat-label">{{ SourceLabel }}</span>
+                            <button type="button" class="mjc-hero__stat-val is-link" (click)="OpenSource($event)"
+                                    [attr.aria-label]="'Open ' + (SourceName || 'the source record')">
+                                {{ SourceName || 'Open' }}
+                            </button>
+                        </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">Contract number is assigned on save.</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\n/* EDIT MODE MATCHES READ MODE. These panels render bare native controls -- `<input type=\"date\">`,\n   `<input type=\"number\">`, `<select>` -- because the generated datetime picker shows a time\n   component for a `date` column, which is the whole reason the Dates panel exists. A bare control\n   inherits none of the app's typography or chrome, so the same field visibly changed font, height\n   and border the moment you pressed Edit. This mirrors `.mjc-val` above, field for field, so\n   toggling edit does not move anything on screen.\n\n   `font: inherit` is doing real work: form controls do NOT inherit font from their ancestor by\n   default in any browser -- they fall back to a UA font -- so without it the value box and the\n   input disagree even when every other property matches.\n\n   THE WIDTH LIVES HERE, not on each control. The panels used to carry seven inline\n   `style=\"width:100%\"` attributes; they are gone, and this rule is what replaces them. */\n.mjc-field input,\n.mjc-field select {\n  width: 100%;\n  box-sizing: border-box;\n  font: inherit;\n  color: inherit;\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}\n.mjc-field input:focus-visible,\n.mjc-field select:focus-visible { outline: 2px solid var(--mj-brand-primary); outline-offset: -1px; }\n.mjc-field input:disabled,\n.mjc-field select:disabled { 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: 303 }); })();
 /* ────────────────────────────────────────────────────────────────────────────
  * 2 · Renewal terms — a real rail section
  * ──────────────────────────────────────────────────────────────────────────── */
 let MJCContractRenewalPanel = class MJCContractRenewalPanel extends BaseFormPanel {
+    /**
+     * A day count, where ZERO IS A VALUE (issue #28 item 21).
+     *
+     * `Record.X ? … : '—'` conflates ZERO with ABSENT: a recorded `0` rendered as the same em dash as
+     * a blank, so the panel reported holding no figure about a figure that says "no notice is
+     * required" — which somebody negotiated. `== null` is the whole fix, and it is deliberately `==`
+     * rather than `===` so `undefined` is caught too.
+     */
+    Days(v) {
+        return v == null ? '—' : `${v} days`;
+    }
+    /** Same rule for the percentage: `0%` is a negotiated cap, not a missing value. */
+    Percent(v) {
+        return v == null ? '—' : `${v}%`;
+    }
+    /**
+     * Whether this agreement genuinely states no renewal terms.
+     *
+     * AUTO-RENEWS IS ONE OF THE TERMS, and leaving it out of the condition is why the empty state
+     * used to contradict the screen: `AutoRenew = Yes` with blank day counts showed "No renewal terms
+     * recorded" directly beneath a field reading Yes. Auto-renewal is the most consequential renewal
+     * term there is, so the panel is only empty when it is No AND all three numbers are absent.
+     */
+    get NoTermsRecorded() {
+        return !this.Record?.AutoRenew &&
+            this.Record?.RenewalNoticeDays == null &&
+            this.Record?.CancellationWindowDays == null &&
+            this.Record?.AnnualIncreasePercent == null;
+    }
     /**
      * Write a field through the typed entity. Named `Set` rather than bound with two-way `[(ngModel)]`
      * so the write goes through one place — a two-way binding on `Record.X` works but gives no hook for
@@ -619,7 +907,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: 32, vars: 9, 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"], ["type", "number", "min", "0", "aria-label", "Renewal notice days", 3, "ngModel"], [1, "mjc-hint"], ["type", "number", "min", "0", "aria-label", "Cancellation window days", 3, "ngModel"], ["type", "number", "min", "0", "step", "0.01", "aria-label", "Annual increase percent", 3, "ngModel"], [1, "mjc-empty"], ["aria-label", "Does this agreement auto-renew?", 3, "ngModelChange", "ngModel"], [3, "ngValue"], ["type", "number", "min", "0", "aria-label", "Renewal notice days", 3, "ngModelChange", "ngModel"], ["type", "number", "min", "0", "aria-label", "Cancellation window days", 3, "ngModelChange", "ngModel"], ["type", "number", "min", "0", "step", "0.01", "aria-label", "Annual increase percent", 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();
@@ -627,49 +915,49 @@ let MJCContractRenewalPanel = class MJCContractRenewalPanel extends BaseFormPane
             i0.ɵɵtext(7, "Auto-renews");
             i0.ɵɵelementEnd();
             i0.ɵɵconditionalCreate(8, MJCContractRenewalPanel_Conditional_8_Template, 5, 3, "select", 5)(9, MJCContractRenewalPanel_Conditional_9_Template, 2, 1, "div", 6);
-            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.ɵɵelementStart(10, "div", 4)(11, "label");
+            i0.ɵɵtext(12, "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.ɵɵconditionalCreate(13, MJCContractRenewalPanel_Conditional_13_Template, 1, 1, "input", 7)(14, MJCContractRenewalPanel_Conditional_14_Template, 2, 1, "div", 6);
+            i0.ɵɵelementStart(15, "div", 8);
+            i0.ɵɵtext(16, " 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(17, MJCContractRenewalPanel_Conditional_17_Template, 3, 4, "div", 8);
             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(18, "div", 4)(19, "label");
+            i0.ɵɵtext(20, "Notice to cancel (days)");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(23, "div", 4)(24, "label");
-            i0.ɵɵtext(25, "Annual increase (%)");
+            i0.ɵɵconditionalCreate(21, MJCContractRenewalPanel_Conditional_21_Template, 1, 1, "input", 9)(22, MJCContractRenewalPanel_Conditional_22_Template, 2, 1, "div", 6);
+            i0.ɵɵelementStart(23, "div", 8);
+            i0.ɵɵtext(24, "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.ɵɵ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.ɵɵconditionalCreate(25, MJCContractRenewalPanel_Conditional_25_Template, 2, 0, "div", 8);
             i0.ɵɵelementEnd();
-            i0.ɵɵconditionalCreate(30, MJCContractRenewalPanel_Conditional_30_Template, 2, 0, "div", 12);
+            i0.ɵɵelementStart(26, "div", 4)(27, "label");
+            i0.ɵɵtext(28, "Annual increase (%)");
+            i0.ɵɵelementEnd();
+            i0.ɵɵconditionalCreate(29, MJCContractRenewalPanel_Conditional_29_Template, 1, 1, "input", 10)(30, MJCContractRenewalPanel_Conditional_30_Template, 2, 1, "div", 6);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵconditionalCreate(31, MJCContractRenewalPanel_Conditional_31_Template, 2, 0, "div", 11);
             i0.ɵɵelementEnd()();
         } if (rf & 2) {
             i0.ɵɵproperty("Form", ctx.FormComponent)("FormContext", ctx.FormContext);
             i0.ɵɵadvance(8);
             i0.ɵɵconditional(ctx.EditMode ? 8 : 9);
-            i0.ɵɵadvance(2);
-            i0.ɵɵconditional(!ctx.Record.AutoRenew ? 10 : -1);
+            i0.ɵɵadvance(5);
+            i0.ɵɵconditional(ctx.EditMode ? 13 : 14);
             i0.ɵɵadvance(4);
-            i0.ɵɵconditional(ctx.EditMode ? 14 : 15);
-            i0.ɵɵadvance(2);
-            i0.ɵɵconditional(ctx.NoticeDeadline ? 16 : -1);
+            i0.ɵɵconditional(ctx.NoticeDeadline ? 17 : -1);
             i0.ɵɵadvance(4);
-            i0.ɵɵconditional(ctx.EditMode ? 20 : 21);
-            i0.ɵɵadvance(2);
-            i0.ɵɵconditional(ctx.InCancellationWindow ? 22 : -1);
+            i0.ɵɵconditional(ctx.EditMode ? 21 : 22);
             i0.ɵɵadvance(4);
-            i0.ɵɵconditional(ctx.EditMode ? 26 : 27);
+            i0.ɵɵconditional(ctx.InCancellationWindow ? 25 : -1);
             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.EditMode ? 29 : 30);
+            i0.ɵɵadvance(2);
+            i0.ɵɵconditional(ctx.NoTermsRecorded ? 31 : -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, {
@@ -739,18 +1027,24 @@ export { MJCContractRenewalPanel };
                         } @else {
                             <div class="mjc-val">{{ Record.AutoRenew ? 'Yes' : 'No' }}</div>
                         }
-                        @if (!Record.AutoRenew) {
-                            <div class="mjc-hint">someone must act for this to continue</div>
-                        }
                     </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"
+                            <input type="number" min="0" [ngModel]="Record.RenewalNoticeDays"
                                    (ngModelChange)="Set('RenewalNoticeDays', $event)" aria-label="Renewal notice days" />
                         } @else {
-                            <div class="mjc-val">{{ Record.RenewalNoticeDays ? Record.RenewalNoticeDays + ' days' : '—' }}</div>
+                            <div class="mjc-val">{{ Days(Record.RenewalNoticeDays) }}</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>
                         }
@@ -758,41 +1052,35 @@ export { MJCContractRenewalPanel };
                     <div class="mjc-field">
                         <label>Notice to cancel (days)</label>
                         @if (EditMode) {
-                            <input type="number" min="0" style="width:100%" [ngModel]="Record.CancellationWindowDays"
+                            <input type="number" min="0" [ngModel]="Record.CancellationWindowDays"
                                    (ngModelChange)="Set('CancellationWindowDays', $event)" aria-label="Cancellation window days" />
                         } @else {
-                            <div class="mjc-val">{{ Record.CancellationWindowDays ? Record.CancellationWindowDays + ' days' : '—' }}</div>
+                            <div class="mjc-val">{{ Days(Record.CancellationWindowDays) }}</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">
                         <label>Annual increase (%)</label>
                         @if (EditMode) {
-                            <input type="number" min="0" step="0.01" style="width:100%" [ngModel]="Record.AnnualIncreasePercent"
+                            <input type="number" min="0" step="0.01" [ngModel]="Record.AnnualIncreasePercent"
                                    (ngModelChange)="Set('AnnualIncreasePercent', $event)" aria-label="Annual increase percent" />
                         } @else {
-                            <div class="mjc-val">{{ Record.AnnualIncreasePercent !== null ? Record.AnnualIncreasePercent + '%' : '—' }}</div>
+                            <div class="mjc-val">{{ Percent(Record.AnnualIncreasePercent) }}</div>
                         }
                     </div>
                 </div>
 
-                <p class="mjc-note">
-                    These record what the signed paper says. The subscription in orders holds the operational
-                    setting and may legitimately differ — a mismatch is a finding, not a bug.
-                </p>
 
-                @if (!Record.RenewalNoticeDays && !Record.CancellationWindowDays && Record.AnnualIncreasePercent === null) {
-                    <div class="mjc-empty">
-                        No renewal terms recorded. If the agreement states any, recording them is what puts this
-                        contract on the renewals watchlist.
-                    </div>
+                @if (NoTermsRecorded) {
+                    <div class="mjc-empty">No renewal terms recorded.</div>
                 }
             </div>
         </mj-collapsible-panel>
     `,
             }]
     }], 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: 625 }); })();
 /* ────────────────────────────────────────────────────────────────────────────
  * 2b · Dates — its own rail section, replacing the generated `datesAndTerms`
  * ──────────────────────────────────────────────────────────────────────────── */
@@ -819,63 +1107,41 @@ let MJCContractDatesPanel = class MJCContractDatesPanel extends BaseFormPanel {
     SetDate(field, value) {
         this.Record[field] = value ? new Date(value + 'T00:00:00Z') : null;
     }
-    get EndsInText() {
-        const d = this.Record?.DaysToEnd ?? null;
-        if (d === null)
-            return '';
-        if (d < 0)
-            return `ended ${Math.abs(d)} days ago`;
-        if (d === 0)
-            return 'ends today';
-        return d < 60 ? `in ${d} days` : `in ${Math.round(d / 30)} months`;
-    }
     static ɵfac = /*@__PURE__*/ (() => { let ɵMJCContractDatesPanel_BaseFactory; return function MJCContractDatesPanel_Factory(__ngFactoryType__) { return (ɵMJCContractDatesPanel_BaseFactory || (ɵMJCContractDatesPanel_BaseFactory = i0.ɵɵgetInheritedFactory(MJCContractDatesPanel)))(__ngFactoryType__ || MJCContractDatesPanel); }; })();
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MJCContractDatesPanel, selectors: [["mjc-contract-dates-panel"]], features: [i0.ɵɵInheritDefinitionFeature], decls: 33, vars: 7, consts: [["SectionKey", "dates", "SectionName", "Dates", "Icon", "fa-solid fa-calendar", 3, "Form", "FormContext"], [1, "mjc-body"], [1, "mjc-fields"], [1, "mjc-field"], ["type", "date", "aria-label", "Executed date", 2, "width", "100%", 3, "ngModel"], [1, "mjc-val"], [1, "mjc-hint"], ["type", "date", "aria-label", "Effective date", 2, "width", "100%", 3, "ngModel"], ["type", "date", "aria-label", "End date", 2, "width", "100%", 3, "ngModel"], ["type", "date", "aria-label", "Terminated date", 2, "width", "100%", 3, "ngModel"], [1, "mjc-val", 3, "mjc-val--ro"], [1, "mjc-note"], ["type", "date", "aria-label", "Executed date", 2, "width", "100%", 3, "ngModelChange", "ngModel"], ["type", "date", "aria-label", "Effective date", 2, "width", "100%", 3, "ngModelChange", "ngModel"], ["type", "date", "aria-label", "End date", 2, "width", "100%", 3, "ngModelChange", "ngModel"], ["type", "date", "aria-label", "Terminated date", 2, "width", "100%", 3, "ngModelChange", "ngModel"]], template: function MJCContractDatesPanel_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MJCContractDatesPanel, selectors: [["mjc-contract-dates-panel"]], features: [i0.ɵɵInheritDefinitionFeature], decls: 25, vars: 6, consts: [["SectionKey", "dates", "SectionName", "Dates", "Icon", "fa-solid fa-calendar", 3, "Form", "FormContext"], [1, "mjc-body"], [1, "mjc-fields"], [1, "mjc-field"], ["type", "date", "aria-label", "Executed date", 3, "ngModel"], [1, "mjc-val"], ["type", "date", "aria-label", "Effective date", 3, "ngModel"], ["type", "date", "aria-label", "End date", 3, "ngModel"], ["type", "date", "aria-label", "Terminated date", 3, "ngModel"], [1, "mjc-val", 3, "mjc-val--ro"], [1, "mjc-hint"], ["type", "date", "aria-label", "Executed date", 3, "ngModelChange", "ngModel"], ["type", "date", "aria-label", "Effective date", 3, "ngModelChange", "ngModel"], ["type", "date", "aria-label", "End date", 3, "ngModelChange", "ngModel"], ["type", "date", "aria-label", "Terminated date", 3, "ngModelChange", "ngModel"]], template: function MJCContractDatesPanel_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "mj-collapsible-panel", 0)(1, "div", 1)(2, "div", 2)(3, "div", 3)(4, "label");
             i0.ɵɵtext(5, "Executed date");
             i0.ɵɵelementEnd();
             i0.ɵɵconditionalCreate(6, MJCContractDatesPanel_Conditional_6_Template, 1, 1, "input", 4)(7, MJCContractDatesPanel_Conditional_7_Template, 3, 4, "div", 5);
-            i0.ɵɵelementStart(8, "div", 6);
-            i0.ɵɵtext(9, "may precede the effective date \u2014 that is normal, not an anomaly");
-            i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(10, "div", 3)(11, "label");
-            i0.ɵɵtext(12, "Effective date");
             i0.ɵɵelementEnd();
-            i0.ɵɵconditionalCreate(13, MJCContractDatesPanel_Conditional_13_Template, 1, 1, "input", 7)(14, MJCContractDatesPanel_Conditional_14_Template, 3, 4, "div", 5);
+            i0.ɵɵelementStart(8, "div", 3)(9, "label");
+            i0.ɵɵtext(10, "Effective date");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(15, "div", 3)(16, "label");
-            i0.ɵɵtext(17, "End date");
+            i0.ɵɵconditionalCreate(11, MJCContractDatesPanel_Conditional_11_Template, 1, 1, "input", 6)(12, MJCContractDatesPanel_Conditional_12_Template, 3, 4, "div", 5);
             i0.ɵɵelementEnd();
-            i0.ɵɵconditionalCreate(18, MJCContractDatesPanel_Conditional_18_Template, 1, 1, "input", 8)(19, MJCContractDatesPanel_Conditional_19_Template, 3, 4, "div", 5);
-            i0.ɵɵconditionalCreate(20, MJCContractDatesPanel_Conditional_20_Template, 2, 1, "div", 6);
+            i0.ɵɵelementStart(13, "div", 3)(14, "label");
+            i0.ɵɵtext(15, "End date");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(21, "div", 3)(22, "label");
-            i0.ɵɵtext(23, "Terminated date");
+            i0.ɵɵconditionalCreate(16, MJCContractDatesPanel_Conditional_16_Template, 1, 1, "input", 7)(17, MJCContractDatesPanel_Conditional_17_Template, 3, 4, "div", 5);
             i0.ɵɵelementEnd();
-            i0.ɵɵconditionalCreate(24, MJCContractDatesPanel_Conditional_24_Template, 1, 1, "input", 9)(25, MJCContractDatesPanel_Conditional_25_Template, 3, 6, "div", 10);
-            i0.ɵɵelementStart(26, "div", 6);
-            i0.ɵɵtext(27, " a fact about what happened \u2014 set it and the contract reads Terminated regardless of its term ");
-            i0.ɵɵelementEnd()()();
-            i0.ɵɵelementStart(28, "p", 11);
-            i0.ɵɵtext(29, " The lifecycle is ");
-            i0.ɵɵelementStart(30, "strong");
-            i0.ɵɵtext(31, "derived");
+            i0.ɵɵelementStart(18, "div", 3)(19, "label");
+            i0.ɵɵtext(20, "Terminated date");
             i0.ɵɵelementEnd();
-            i0.ɵɵtext(32, " from these four dates and the two lineage links, not stored \u2014 so a state can never disagree with the dates it came from. ");
-            i0.ɵɵelementEnd()()();
+            i0.ɵɵconditionalCreate(21, MJCContractDatesPanel_Conditional_21_Template, 1, 1, "input", 8)(22, MJCContractDatesPanel_Conditional_22_Template, 3, 6, "div", 9);
+            i0.ɵɵelementStart(23, "div", 10);
+            i0.ɵɵtext(24, "Setting this marks the contract Terminated from this date.");
+            i0.ɵɵelementEnd()()()()();
         } if (rf & 2) {
             i0.ɵɵproperty("Form", ctx.FormComponent)("FormContext", ctx.FormContext);
             i0.ɵɵadvance(6);
             i0.ɵɵconditional(ctx.EditMode ? 6 : 7);
-            i0.ɵɵadvance(7);
-            i0.ɵɵconditional(ctx.EditMode ? 13 : 14);
             i0.ɵɵadvance(5);
-            i0.ɵɵconditional(ctx.EditMode ? 18 : 19);
-            i0.ɵɵadvance(2);
-            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 });
+            i0.ɵɵconditional(ctx.EditMode ? 11 : 12);
+            i0.ɵɵadvance(5);
+            i0.ɵɵconditional(ctx.EditMode ? 16 : 17);
+            i0.ɵɵadvance(5);
+            i0.ɵɵconditional(ctx.EditMode ? 21 : 22);
+        } }, dependencies: [CommonModule, FormsModule, i3.DefaultValueAccessor, i3.NgControlStatus, i3.NgModel, BaseFormsModule, i1.MjCollapsiblePanelComponent, i2.DatePipe], encapsulation: 2 });
 };
 MJCContractDatesPanel = __decorate([
     RegisterClassEx(BaseFormPanel, {
@@ -927,17 +1193,16 @@ export { MJCContractDatesPanel };
                     <div class="mjc-field">
                         <label>Executed date</label>
                         @if (EditMode) {
-                            <input type="date" style="width:100%" [ngModel]="AsInput(Record.ExecutedDate)"
+                            <input type="date" [ngModel]="AsInput(Record.ExecutedDate)"
                                    (ngModelChange)="SetDate('ExecutedDate', $event)" aria-label="Executed date" />
                         } @else {
                             <div class="mjc-val">{{ (Record.ExecutedDate | date: 'd MMM y') || '—' }}</div>
                         }
-                        <div class="mjc-hint">may precede the effective date — that is normal, not an anomaly</div>
                     </div>
                     <div class="mjc-field">
                         <label>Effective date</label>
                         @if (EditMode) {
-                            <input type="date" style="width:100%" [ngModel]="AsInput(Record.EffectiveDate)"
+                            <input type="date" [ngModel]="AsInput(Record.EffectiveDate)"
                                    (ngModelChange)="SetDate('EffectiveDate', $event)" aria-label="Effective date" />
                         } @else {
                             <div class="mjc-val">{{ (Record.EffectiveDate | date: 'd MMM y') || '—' }}</div>
@@ -946,43 +1211,35 @@ export { MJCContractDatesPanel };
                     <div class="mjc-field">
                         <label>End date</label>
                         @if (EditMode) {
-                            <input type="date" style="width:100%" [ngModel]="AsInput(Record.EndDate)"
+                            <input type="date" [ngModel]="AsInput(Record.EndDate)"
                                    (ngModelChange)="SetDate('EndDate', $event)" aria-label="End date" />
                         } @else {
                             <div class="mjc-val">{{ (Record.EndDate | date: 'd MMM y') || '—' }}</div>
                         }
-                        @if (Record.DaysToEnd !== null) { <div class="mjc-hint">{{ EndsInText }}</div> }
                     </div>
                     <div class="mjc-field">
                         <label>Terminated date</label>
                         @if (EditMode) {
-                            <input type="date" style="width:100%" [ngModel]="AsInput(Record.TerminatedDate)"
+                            <input type="date" [ngModel]="AsInput(Record.TerminatedDate)"
                                    (ngModelChange)="SetDate('TerminatedDate', $event)" aria-label="Terminated date" />
                         } @else {
                             <div class="mjc-val" [class.mjc-val--ro]="!Record.TerminatedDate">{{ (Record.TerminatedDate | date: 'd MMM y') || '—' }}</div>
                         }
-                        <div class="mjc-hint">
-                            a fact about what happened — set it and the contract reads Terminated regardless of its term
-                        </div>
+                        <div class="mjc-hint">Setting this marks the contract Terminated from this date.</div>
                     </div>
                 </div>
 
-                <p class="mjc-note">
-                    The lifecycle is <strong>derived</strong> from these four dates and the two lineage links, not
-                    stored — so a state can never disagree with the dates it came from.
-                </p>
             </div>
         </mj-collapsible-panel>
     `,
             }]
     }], 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: 773 }); })();
 /* ────────────────────────────────────────────────────────────────────────────
  * 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 +1279,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 +1328,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 +1346,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 +1383,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"
@@ -1156,12 +1413,12 @@ export { MJCContractLineagePanel };
 
                 @if (!ParentName && !HasChildren) {
                     <div class="mjc-empty">
-                        A standalone agreement — nothing above it, no change orders, and nothing has replaced it.
+                        No parent contract, change orders, or superseding contracts.
                     </div>
                 }
             </div>
         </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: 898 }); })();
 //# sourceMappingURL=contract.panels.js.map