@mj-biz-apps/orders-ng 0.0.1 → 5.2.0

package/dist/lib/sections/section-shell.component.js

@@ -0,0 +1,193 @@
+import { Component, EventEmitter, Input, Output, ViewEncapsulation } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MJLeftNavComponent, MJLeftNavContentComponent, MJPageBodyComponent, MJPageBodyInteriorComponent, MJPageHeaderComponent, MJPageLayoutComponent, } from '@memberjunction/ng-ui-components';
+import * as i0 from "@angular/core";
+const _c0 = [[["", "meta", ""]], [["", "actions", ""]], "*"];
+const _c1 = ["[meta]", "[actions]", "*"];
+/**
+ * `mjo-section-shell` — the frame every Orders section renders inside.
+ *
+ * One of the four top-level sections (Orders, Payments, Receivables, Catalog)
+ * occupies a tab in MJ Explorer; each owns a LEFT rail over its own sub-pages.
+ * This component is that frame: MJ's chrome trio plus `<mj-left-nav>`, with the
+ * active sub-page projected into the content pane.
+ *
+ * Composition rather than inheritance, deliberately. Angular does not inherit
+ * templates, so a base *class* would have forced four copies of this markup — and
+ * four copies of a frame is four places for the frame to drift. Each section is a
+ * thin component that hands this one a rail and projects a page.
+ *
+ * Nothing here is bespoke chrome: the header, body, rail and content pane all come
+ * from `@memberjunction/ng-ui-components`. A section that wanted its own gradient
+ * header would be a section that no longer looks like MJ.
+ *
+ * ## Example
+ *
+ * ```html
+ * <mjo-section-shell
+ *   Title="Orders"
+ *   Icon="fa-solid fa-file-invoice-dollar"
+ *   Subtitle="Take an order, then work the ones you have"
+ *   [NavSections]="NavSections"
+ *   [ActivePageId]="ActivePageId"
+ *   [Loading]="IsLoading"
+ *   [Error]="LoadError"
+ *   (PageSelected)="OnPageSelected($event)">
+ *
+ *   <div meta><mj-stat-badge [Count]="OpenCount" Label="open" /></div>
+ *   <div actions><button mjButton variant="primary">New order</button></div>
+ *
+ *   <ng-container #pageHost />
+ * </mjo-section-shell>
+ * ```
+ */
+export class MJOSectionShellComponent {
+    /** Section title — the identity of the whole tab, so sub-pages never restate it. */
+    Title = '';
+    /** Font Awesome class for the title. */
+    Icon = '';
+    /** One line saying what this section is for. */
+    Subtitle = '';
+    /** The rail, built by {@link BuildLeftNavSections} from the section's page list. */
+    NavSections = [];
+    /** Which sub-page is showing. Drives the rail's active state. */
+    ActivePageId = null;
+    /** Rail width in pixels. 232 matches the mockups. */
+    RailWidth = 232;
+    /** Shows the content pane's built-in spinner instead of the projected page. */
+    Loading = false;
+    /** Shows the content pane's built-in error state. Null clears it. */
+    Error = null;
+    /**
+     * A rail item was chosen. Emits the page id.
+     *
+     * Emitted rather than acted on: this component does not know how the host
+     * loads a page, and a shell that routed would stop being reusable outside
+     * the one app that taught it how.
+     */
+    PageSelected = new EventEmitter();
+    onItemClicked(item) {
+        if (item.disabled)
+            return;
+        // Re-selecting the current page is a no-op rather than a reload — people
+        // click the rail item they are already on surprisingly often.
+        if (item.id === this.ActivePageId)
+            return;
+        this.PageSelected.emit(item.id);
+    }
+    static ɵfac = function MJOSectionShellComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MJOSectionShellComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MJOSectionShellComponent, selectors: [["mjo-section-shell"]], inputs: { Title: "Title", Icon: "Icon", Subtitle: "Subtitle", NavSections: "NavSections", ActivePageId: "ActivePageId", RailWidth: "RailWidth", Loading: "Loading", Error: "Error" }, outputs: { PageSelected: "PageSelected" }, ngContentSelectors: _c1, decls: 11, vars: 12, consts: [[3, "Title", "Icon", "Subtitle"], ["meta", ""], ["actions", ""], ["Direction", "row", 3, "Flex", "Padding"], [3, "ItemClicked", "Sections", "ActiveId", "Width", "MobileTitle"], [3, "Loading", "Error"], [3, "Padding"]], template: function MJOSectionShellComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef(_c0);
+            i0.ɵɵelementStart(0, "mj-page-layout")(1, "mj-page-header", 0)(2, "div", 1);
+            i0.ɵɵprojection(3);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(4, "div", 2);
+            i0.ɵɵprojection(5, 1);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(6, "mj-page-body", 3)(7, "mj-left-nav", 4);
+            i0.ɵɵlistener("ItemClicked", function MJOSectionShellComponent_Template_mj_left_nav_ItemClicked_7_listener($event) { return ctx.onItemClicked($event); });
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(8, "mj-left-nav-content", 5)(9, "mj-page-body-interior", 6);
+            i0.ɵɵprojection(10, 2);
+            i0.ɵɵelementEnd()()()();
+        } if (rf & 2) {
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("Title", ctx.Title)("Icon", ctx.Icon)("Subtitle", ctx.Subtitle);
+            i0.ɵɵadvance(5);
+            i0.ɵɵproperty("Flex", true)("Padding", false);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("Sections", ctx.NavSections)("ActiveId", ctx.ActivePageId)("Width", ctx.RailWidth)("MobileTitle", ctx.Title);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("Loading", ctx.Loading)("Error", ctx.Error);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("Padding", false);
+        } }, dependencies: [CommonModule,
+            MJPageLayoutComponent,
+            MJPageHeaderComponent,
+            MJPageBodyComponent,
+            MJLeftNavComponent,
+            MJLeftNavContentComponent,
+            MJPageBodyInteriorComponent], styles: ["/* ============================================================================\n   BizApps Orders \u2014 component kit\n   ============================================================================\n   THE CANONICAL SOURCE for this app's own component CSS. Both consumers read\n   THIS FILE, so the mockups and the shipped UI cannot drift:\n\n     \u00B7 packages/Angular/src/lib/styles/orders-kit.css   \u2190 you are here\n     \u00B7 mockups/assets/app.css                            @imports it\n\n   Only classes MJ does NOT ship live here. Page chrome, buttons, inputs, chips,\n   collapsible panels, overlays and tab navigation all come from\n   @memberjunction/ng-ui-components and @memberjunction/ng-base-forms at runtime;\n   the mockups shim those separately because they have no Angular to provide them.\n\n   Every value resolves through MJ's semantic tokens. No literal colours, with one\n   documented exception: the deepest aging step, whose ramp was chosen by running\n   the palette validator (see mockups/PROVENANCE.md).\n\n   NAMING. These share MJ's `mj-` prefix deliberately, so a reader cannot tell\n   whether `mj-money-strip` came from the framework or from us \u2014 which is the\n   point when the goal is one visual system. The cost is a possible future\n   collision if MJ ships a class of the same name; that would be a mechanical\n   rename caught by a build, and it has not happened yet.\n   ============================================================================ */\n\n/* ============================================================================\n   16. LAYOUT & TEXT HELPERS\n   ============================================================================\n   These were authored in `mockups/assets/app.css` \u00A716 and never migrated here,\n   so the two consumers DID drift despite the promise at the top of this file:\n   the mockups styled them, the shipped app did not. 267 applications of `small`,\n   `muted`, `row`, `wrap`, `strong`, `mono`, `tiny`, `spacer` and `sec-label`\n   across the pages resolved to nothing \u2014 every caption rendered at full body\n   size in full-strength ink and every `.row` collapsed from a flex row to a\n   block stack. That single omission is most of the gap between the approved\n   mockups and what shipped.\n\n   Unprefixed on purpose \u2014 renaming ~267 call sites to `mj-` would buy nothing\n   and would break parity with the mockup markup they mirror.\n\n   TYPE SCALE \u2014 12px is the floor, and we do NOT want a sub-12px token.\n   These arrived as raw px below MJ's smallest step: `small` 11.5px and `tiny`\n   10.5px. Both now resolve to `--mj-text-xs` (12px), MJ's own token, so the app\n   shares one scale instead of carrying two private sizes.\n\n   The obvious alternative \u2014 asking for a `--mj-text-xxs` \u2014 is the wrong ask, and\n   we should not raise it. 12px is the practical legibility floor for secondary\n   text (Material and Apple HIG both bottom out at 11\u201312px and reserve it for\n   non-essential labels), and `small` here is not decoration: it carries amounts,\n   counts and statuses on 120 elements. Shrinking DATA below the floor is exactly\n   the case the floor exists for, and a token would institutionalise it across\n   every app that adopts it.\n\n   Hierarchy that used to come from size now comes from COLOUR (`muted`) and\n   WEIGHT (`strong`) \u2014 both of which preserve the distinction at a legible size.\n   Size is the bluntest hierarchy tool available and the only one that costs\n   legibility, so it is the right one to give up.\n   ============================================================================ */\n\n.row  { display: flex; align-items: center; gap: var(--mj-space-2); }\n.row-t { display: flex; align-items: flex-start; gap: var(--mj-space-2); }\n.col  { display: flex; flex-direction: column; gap: var(--mj-space-2); }\n.wrap { flex-wrap: wrap; }\n.spacer { margin-left: auto; }\n.stack-2 > * + * { margin-top: var(--mj-space-2); }\n.stack-3 > * + * { margin-top: var(--mj-space-3); }\n.stack-4 > * + * { margin-top: var(--mj-space-4); }\n.stack-6 > * + * { margin-top: var(--mj-space-6); }\n.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--mj-space-4); }\n.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--mj-space-4); }\n.muted  { color: var(--mj-text-muted); }\n/* 12px floor, on MJ's own token \u2014 see the TYPE SCALE note above. `small` and\n   `tiny` were 11.5px and 10.5px; both now resolve to --mj-text-xs and the\n   small/tiny distinction is carried by COLOUR and WEIGHT instead of size. */\n.small  { font-size: var(--mj-text-xs); }\n.tiny   { font-size: var(--mj-text-xs); }\n.strong { font-weight: var(--mj-font-semibold); }\n.mono   { font-family: var(--mj-font-family-mono); font-size: .92em; }\n.center { text-align: center; }\n.nowrap { white-space: nowrap; }\n.hidden { display: none !important; }\n\n/* Numeric input modifier \u2014 pairs with `mj-input` on the five money fields\n   (payment, refund, credit, return qty, allocation). Undefined until now, so\n   amounts typed into them left-aligned against right-aligned totals directly\n   beside them. Same treatment as `.mj-num`, which is what those totals use. */\n.is-num {\n  text-align: right;\n  font-variant-numeric: tabular-nums; font-feature-settings: \"tnum\";\n}\n.sec-label {\n  font-size: var(--mj-text-xs); font-weight: var(--mj-font-bold); letter-spacing: .06em;\n  text-transform: uppercase; color: var(--mj-text-muted); margin-bottom: var(--mj-space-2);\n}\n\n/* Explanatory notes under a chart, table or panel. 51 of these across 14\n   `mjo-<page>__note` hooks were authored with NO rule anywhere, so every one sat\n   flush against the element above it \u2014 the note read as a wrapped continuation\n   of the legend rather than a separate caption. Prefix-scoped so the unrelated\n   `fe-books__note` (which sets its own padding) is untouched. */\n[class*=\"mjo-\"][class*=\"__note\"] { margin-top: var(--mj-space-2); }\n\n/* Two-pane working layout (payment entry, subscriptions, catalog) */\n.mj-split { display: flex; gap: var(--mj-space-4); align-items: flex-start; min-height: 0; }\n.mj-split > .left  { flex: 0 0 380px; min-width: 0; }\n.mj-split > .right { flex: 1; min-width: 0; }\n.mj-split--narrow-left > .left { flex: 0 0 300px; }\n\n@media (max-width: 1100px) {\n  .mj-split { flex-direction: column; }\n  .mj-split > .left, .mj-split > .right { flex: 1 1 auto; width: 100%; }\n  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }\n}\n@media (max-width: 760px) {\n  .grid-2, .grid-3 { grid-template-columns: 1fr; }\n}\n\n/* ============================================================================\n   PAGE HEADER \u2014 three stacked rows compressed into two\n   ============================================================================\n   MJ stacks the identity column title -> subtitle -> meta, so our \"as of 2:31 PM\"\n   capsule landed on a third line of its own and the header stood 138px tall on\n   every section. The capsule is a timestamp for the subtitle, not a peer of it,\n   so it belongs BESIDE the subtitle rather than under it.\n\n   Done without restructuring MJ's template, so a future MJ header fix still\n   lands for us. Scoped to our shell \u2014 this is our editorial choice about our own\n   capsule, not an opinion about how every MJ header should read.\n\n   GRID, not flex-wrap. The first attempt used a wrapping flex row with order to\n   reseat the capsule; every child claimed its own line and the whole block\n   centred, because a full-width flex item forces a line break and the remaining\n   items had nothing to sit beside. Grid with EXPLICIT row and column placement\n   is deterministic \u2014 and it makes MJ's DOM order (title, subtitle, meta)\n   irrelevant, so the capsule renders to the LEFT of a subtitle that precedes it\n   in the markup, without touching the template. */\nmjo-section-shell .mj-page-header .mj-page-header-text {\n  display: grid;\n  grid-template-columns: auto minmax(0, 1fr);\n  align-items: center;\n  justify-items: start;\n  column-gap: var(--mj-space-2);\n  row-gap: 2px;\n}\nmjo-section-shell .mj-page-header .mj-page-header-title    { grid-row: 1; grid-column: 1 / -1; }\nmjo-section-shell .mj-page-header .mj-page-header-meta     { grid-row: 2; grid-column: 1; margin-top: 0; }\nmjo-section-shell .mj-page-header .mj-page-header-subtitle { grid-row: 2; grid-column: 2; margin-top: 0; }\n\n/* Reclaim the rest vertically. space-3 still clears the 40px icon tile with\n   room to spare; going tighter starts to crowd it. */\nmjo-section-shell .mj-page-header .mj-page-header-row--primary {\n  padding-top: var(--mj-space-3);\n  padding-bottom: var(--mj-space-3);\n}\n\n/* ============================================================================\n   CARD HOVER \u2014 undo MJ's ungated lift on cards that do nothing\n   ============================================================================\n   MJ lifts EVERY `.mj-card` on hover \u2014 `transform: translateY(-4px)` plus a\n   large shadow \u2014 from `explorer-app/src/lib/styles/_common.scss`. The selector\n   there is bare `.mj-card:hover`, with no gate on whether the card is\n   interactive, so a read-only dashboard panel rises under the cursor and\n   promises a click it will not accept.\n\n   This is not MJ's intent. `_shared-patterns.scss`, in the same package, heads\n   its own card-hover block \"for clickable cards\" and gates it properly on\n   `a.mj-card` / `.mj-card.clickable` \u2014 then weakens it with an ungated\n   `.mj-card:hover` of its own. Two competing rules, both ungated in practice.\n   Filed upstream; DELETE this block once MJ gates its own.\n\n   Scoped to the orders shell so it cannot alter any other app, and written the\n   way MJ says it means it: keep the lift where the card is genuinely a link or\n   is marked clickable, drop it everywhere else.\n\n   The values re-assert MJ's own RESTING state for `.mj-card` so that hovering a\n   non-interactive card is a true NO-OP rather than a different effect \u2014 an\n   earlier pass set a smaller shadow here, which only traded a card that rises\n   for one that flattens. `--mj-shadow-sm` is used rather than `_common.scss`'s\n   `var(--shadow)`: that variable is private to explorer-app and does not resolve\n   from here, so the declaration was silently dropped. */\nmjo-section-shell .mj-card:not(.clickable):not(a):hover {\n  transform: none;\n  box-shadow: var(--mj-shadow-sm);\n  border-color: transparent;\n}\n\n/* ============================================================================\n   7. MONEY  (U7)\n   ============================================================================ */\n\n.mj-num, .mj-money {\n  font-variant-numeric: tabular-nums; font-feature-settings: \"tnum\";\n  text-align: right; white-space: nowrap;\n}\n.mj-money--hero { font-size: 22px; font-weight: var(--mj-font-bold); letter-spacing: -0.01em; }\n.mj-money--lg   { font-size: 16px; font-weight: var(--mj-font-semibold); }\n.mj-money--neg  { color: var(--mj-status-error-text); }\n.mj-money--credit { color: var(--mj-status-success-text); }\n.mj-money--muted { color: var(--mj-text-muted); }\n\n/* The money strip \u2014 TotalGross / AmountPaid / Balance / status */\n/* Columns follow the CELLS THAT EXIST rather than a fixed three-plus-note.\n   Paid is conditional (drafts have none) and the note is optional, so the fixed\n   template left one or two empty panels sitting in the strip \u2014 which reads as a\n   figure that failed to load rather than a figure that does not apply. */\n.mj-money-strip {\n  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;\n  border: 1px solid var(--mj-border-default); border-radius: var(--mj-radius-md);\n  background: var(--mj-bg-surface); overflow: hidden;\n}\n.mj-money-strip > div {\n  padding: var(--mj-space-3) var(--mj-space-4);\n  border-right: 1px solid var(--mj-border-default);\n}\n/* The chip row is the STATUS cell specifically \u2014 not whatever happens to be last.\n   Keyed on :last-child, this flex rule landed on BALANCE as soon as the status cell\n   stopped rendering (a draft has no PaymentStatus), which laid its label and value\n   side by side while TOTAL beside it stayed stacked. */\n.mj-money-strip > div:last-child { border-right: none; }\n.mj-money-strip > .mj-money-strip__status {\n  display: flex; align-items: center; gap: var(--mj-space-2);\n}\n.mj-money-strip .l {\n  font-size: 10px; font-weight: var(--mj-font-bold); letter-spacing: .07em;\n  text-transform: uppercase; color: var(--mj-text-muted); display: block; margin-bottom: 2px;\n}\n.mj-money-strip .v { font-size: 17px; font-weight: var(--mj-font-bold); font-variant-numeric: tabular-nums; }\n\n/* Decomposition ladder \u2014 net \u2192 promos \u2192 charges \u2192 tax \u2192 gross */\n.mj-ladder { font-size: 13px; }\n.mj-ladder-row {\n  display: flex; align-items: baseline; gap: var(--mj-space-2);\n  padding: 6px 0; border-bottom: 1px dashed var(--mj-border-subtle);\n}\n.mj-ladder-row > .label { color: var(--mj-text-secondary); display: flex; align-items: center; gap: 6px; }\n.mj-ladder-row > .amt { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: var(--mj-font-medium); }\n.mj-ladder-row.is-sub    { padding-left: var(--mj-space-4); font-size: 12px; color: var(--mj-text-muted); }\n.mj-ladder-row.is-sub > .amt { font-weight: var(--mj-font-normal); }\n.mj-ladder-row.is-discount > .amt { color: var(--mj-status-success-text); }\n.mj-ladder-row.is-total {\n  border-bottom: none; border-top: 2px solid var(--mj-border-strong);\n  margin-top: var(--mj-space-2); padding-top: var(--mj-space-3);\n}\n.mj-ladder-row.is-total > .label { font-weight: var(--mj-font-semibold); color: var(--mj-text-primary); }\n.mj-ladder-row.is-total > .amt { font-size: 18px; font-weight: var(--mj-font-bold); }\n.mj-ladder-note {\n  font-size: 11.5px; color: var(--mj-text-muted); padding: var(--mj-space-2) 0 0;\n  display: flex; gap: 6px; align-items: flex-start;\n}\n.mj-ladder-note i { margin-top: 2px; color: var(--mj-status-info); }\n\n/* The \"why\" disclosure \u2014 U2. A bare number is never acceptable. */\n.mj-why {\n  border: none; background: none; cursor: pointer; padding: 0 2px;\n  color: var(--mj-text-disabled); font-size: 10.5px;\n}\n.mj-why:hover { color: var(--mj-brand-primary); }\n.mj-why-body {\n  font-size: 11.5px; color: var(--mj-text-secondary);\n  background: var(--mj-bg-surface-sunken); border-left: 2px solid var(--mj-brand-primary);\n  border-radius: 0 var(--mj-radius-sm) var(--mj-radius-sm) 0;\n  padding: var(--mj-space-2) var(--mj-space-3); margin: var(--mj-space-2) 0;\n}\n.mj-why-body ol, .mj-why-body ul { margin: 4px 0 0; padding-left: var(--mj-space-4); }\n.mj-why-body li { margin: 2px 0; }\n.mj-why-body code {\n  font-family: var(--mj-font-family-mono); font-size: 10.5px;\n  background: var(--mj-bg-surface); padding: 1px 4px; border-radius: 3px;\n}\n\n/* ============================================================================\n   9. STATUS STEPPER  (D9 \u2014 order fixed, forward skip legal)\n   ============================================================================ */\n\n.mj-stepper { display: flex; align-items: center; gap: var(--mj-space-1); flex-wrap: wrap; }\n.mj-stepper .step {\n  display: inline-flex; align-items: center; gap: 5px;\n  padding: 4px 11px; border-radius: var(--mj-radius-full);\n  border: 1px solid var(--mj-border-default); background: var(--mj-bg-surface);\n  font-size: 11.5px; font-weight: var(--mj-font-semibold); color: var(--mj-text-muted);\n  cursor: pointer;\n}\n.mj-stepper .step i { font-size: 9px; }\n.mj-stepper .step.is-done {\n  background: var(--mj-status-success-bg); border-color: color-mix(in srgb, var(--mj-status-success) 40%, transparent);\n  color: var(--mj-status-success-text);\n}\n.mj-stepper .step.is-current {\n  background: color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n  border-color: var(--mj-brand-primary); color: var(--mj-brand-primary);\n}\n.mj-stepper .step.is-blocked { opacity: .45; cursor: not-allowed; }\n.mj-stepper .sep { color: var(--mj-text-disabled); font-size: 9px; }\n\n/* ============================================================================\n   13. STAT TILES  (cheap counts only \u2014 U11)\n   ============================================================================ */\n\n.mj-stat-grid {\n  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));\n  gap: var(--mj-space-4);\n}\n.mj-stat {\n  background: var(--mj-bg-surface); border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md); padding: var(--mj-space-4);\n  display: flex; flex-direction: column; gap: 2px; min-width: 0;\n}\n.mj-stat .l {\n  font-size: 11px; font-weight: var(--mj-font-semibold); letter-spacing: .04em;\n  text-transform: uppercase; color: var(--mj-text-muted);\n  display: flex; align-items: center; gap: 6px;\n}\n.mj-stat .v {\n  font-size: 25px; font-weight: var(--mj-font-bold); font-variant-numeric: tabular-nums;\n  letter-spacing: -0.02em; line-height: 1.15;\n}\n.mj-stat .d { font-size: 11.5px; color: var(--mj-text-muted); }\n.mj-stat.is-alert .v { color: var(--mj-status-error-text); }\n.mj-stat .spark { margin-top: var(--mj-space-2); height: 30px; }\n.mj-stat .spark svg { width: 100%; height: 30px; display: block; overflow: visible; }\n\n/* ============================================================================\n   14. AGING BAR\n   ============================================================================ */\n\n.mj-aging { display: flex; flex-direction: column; gap: 6px; }\n.mj-aging-bar {\n  display: flex; height: 26px; border-radius: var(--mj-radius-sm);\n  overflow: hidden; background: var(--mj-bg-surface-sunken);\n}\n.mj-aging-bar > span {\n  display: flex; align-items: center; justify-content: center;\n  font-size: 10.5px; font-weight: var(--mj-font-semibold); color: #fff;\n  min-width: 0; overflow: hidden; white-space: nowrap;\n}\n/* Aging severity ramp \u2014 VALIDATED, do not eyeball-substitute.\n   #64748b, #f59e0b, #ef4444, #991b1b passes CVD separation (worst adjacent\n   \u0394E 13.9 deutan) and the normal-vision floor (\u0394E 19.8) on BOTH the light and\n   dark surfaces. The earlier set used warning-700 next to error-600, which sat\n   at \u0394E 2.8 deutan \u2014 the 60-day and 90-day buckets were indistinguishable.\n   The neutral first step is deliberate: \"not late\" is not a severity.\n   Every segment carries a visible amount and a legend, which is what discharges\n   the low-contrast warning on the amber step. See PROVENANCE.md. */\n.mj-aging-bar .b-cur  { background: var(--mj-color-neutral-500); }\n.mj-aging-bar .b-30   { background: var(--mj-color-warning-500); }\n.mj-aging-bar .b-60   { background: var(--mj-color-error-500); }\n/* Was the literal #991b1b, because MJ's error ramp stops at -700. Now fully\n   tokenised, and the reasoning is worth keeping because the first instinct was\n   the wrong one.\n\n   Re-measured independently (CIE76 + a Brettel deuteranope simulation) rather\n   than trusting the numbers above, whose validator script is NOT in this repo\n   and cannot be re-run. Worst adjacent pair, 31-60 vs 61+:\n\n       #991b1b (literal)              normal dE 26.6   deuteranope dE 23.8\n       --mj-color-error-700           normal dE 16.3   deuteranope dE 15.5\n       the REJECTED first attempt     normal dE 31.9   deuteranope dE  3.1\n\n   So the token step is a modest perceptual step DOWN, not a failure: dE 15 is\n   far above the ~2.3 just-noticeable difference, and nothing like the 3.1 that\n   made the original attempt genuinely unreadable. And the bar is never the sole\n   carrier \u2014 every segment shows its amount and the legend lists all four \u2014 so\n   WCAG 1.4.1 holds either way.\n\n   The token wins on a functional point the literal cannot match: a hardcoded\n   hex does not follow dark mode or a white-label rebrand, while every other\n   step of this ramp does. Trading ~10 dE of headroom for a ramp that themes\n   correctly is the right trade. */\n.mj-aging-bar .b-90   { background: var(--mj-color-error-700); }\n[data-theme=\"dark\"] .mj-aging-bar .b-cur { background: var(--mj-color-neutral-500); }\n.mj-aging-bar > span.is-empty { display: none; }\n/* row-gap is explicit: the legend wraps to two rows in a narrow column, and a\n   single `gap` shorthand left the wrapped rows tighter than the note beneath\n   them, so the four buckets read as two unrelated pairs. */\n.mj-aging-legend { display: flex; gap: var(--mj-space-2) var(--mj-space-4); font-size: 11.5px; flex-wrap: wrap; }\n.mj-aging-legend > span { display: flex; align-items: center; gap: 6px; color: var(--mj-text-secondary); }\n.mj-aging-legend i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }\n\n/* ============================================================================\n   15. TIMELINE  (subscription terms)\n   ============================================================================ */\n\n.mj-timeline { position: relative; padding: var(--mj-space-4) 0 var(--mj-space-2); }\n.mj-timeline-track {\n  position: relative; height: 34px;\n  background: var(--mj-bg-surface-sunken); border-radius: var(--mj-radius-sm);\n}\n.mj-timeline-term {\n  position: absolute; top: 4px; bottom: 4px; border-radius: var(--mj-radius-sm);\n  display: flex; align-items: center; padding: 0 var(--mj-space-2);\n  font-size: 11px; font-weight: var(--mj-font-semibold); color: #fff;\n  overflow: hidden; white-space: nowrap;\n}\n.mj-timeline-term.is-past   { background: var(--mj-color-neutral-400); }\n.mj-timeline-term.is-active { background: var(--mj-brand-primary); }\n.mj-timeline-term.is-future { background: color-mix(in srgb, var(--mj-brand-primary) 45%, var(--mj-bg-surface)); color: var(--mj-text-primary); }\n.mj-timeline-now {\n  position: absolute; top: -6px; bottom: -6px; width: 2px;\n  background: var(--mj-status-error);\n}\n.mj-timeline-now::after {\n  content: \"today\"; position: absolute; top: -16px; left: -14px;\n  font-size: 9.5px; font-weight: var(--mj-font-bold); color: var(--mj-status-error-text);\n}\n.mj-timeline-scale {\n  display: flex; justify-content: space-between; font-size: 10.5px;\n  color: var(--mj-text-muted); margin-top: 6px;\n}\n\n/* ============================================================================\n   17. KEYBOARD HINT STRIP  (U20 \u2014 shortcuts are visible, not hidden)\n   ============================================================================ */\n\n.mj-keys {\n  display: flex; align-items: center; gap: var(--mj-space-4); flex-wrap: wrap;\n  font-size: 11.5px; color: var(--mj-text-muted);\n}\n.mj-keys > span { display: inline-flex; align-items: center; gap: 5px; }\nkbd {\n  font-family: var(--mj-font-family); font-size: 10.5px; font-weight: var(--mj-font-semibold);\n  background: var(--mj-bg-surface); border: 1px solid var(--mj-border-strong);\n  border-bottom-width: 2px; border-radius: var(--mj-radius-sm);\n  padding: 1px 5px; color: var(--mj-text-secondary); line-height: 1.5;\n}\n\n/* ============================================================================\n   19. TYPE-AHEAD  (fast entry)\n   ============================================================================ */\n\n/*\n * The wrapper needs a STACKING CONTEXT, not just a positioning one.\n *\n * `position: relative` alone anchors the list under the input but leaves it in the\n * parent's stacking order, so later siblings paint on top of it: the customer\n * results rendered in the right place and were covered by the next section.\n * `elementFromPoint` at the centre of the first option returned the section, not\n * the option \u2014 the list was visible to the DOM and invisible to a person.\n */\n.mj-typeahead { position: relative; z-index: 20; }\n.mj-typeahead-list {\n  position: absolute; top: calc(100% + 4px); left: 0; right: 0;\n  z-index: var(--mj-z-popover); max-height: 320px; overflow: auto;\n  background: var(--mj-bg-surface); border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md); box-shadow: var(--mj-shadow-lg);\n  display: none;\n}\n.mj-typeahead-list.is-open { display: block; }\n.mj-typeahead-item {\n  display: flex; align-items: center; gap: var(--mj-space-3);\n  padding: var(--mj-space-2) var(--mj-space-3); cursor: pointer;\n  border-bottom: 1px solid var(--mj-border-subtle);\n}\n.mj-typeahead-item:last-child { border-bottom: none; }\n.mj-typeahead-item:hover, .mj-typeahead-item.is-cursor { background: var(--mj-bg-surface-hover); }\n.mj-typeahead-item .name { font-size: 13px; font-weight: var(--mj-font-medium); }\n.mj-typeahead-item .sub  { font-size: 11.5px; color: var(--mj-text-muted); }\n.mj-typeahead-item .end  { margin-left: auto; text-align: right; }\n.mj-typeahead-group {\n  padding: 5px var(--mj-space-3); font-size: 10px; font-weight: var(--mj-font-bold);\n  letter-spacing: .07em; text-transform: uppercase; color: var(--mj-text-muted);\n  background: var(--mj-bg-surface-card); border-bottom: 1px solid var(--mj-border-subtle);\n}\n\n/* ============================================================================\n   20. LINE ROW CARD  (fast entry)\n   ============================================================================ */\n\n.mj-linecard {\n  border: 1px solid var(--mj-border-default); border-radius: var(--mj-radius-md);\n  background: var(--mj-bg-surface); padding: var(--mj-space-3);\n}\n.mj-linecard + .mj-linecard { margin-top: var(--mj-space-2); }\n.mj-linecard-top { display: flex; align-items: flex-start; gap: var(--mj-space-3); }\n.mj-linecard-top .id { flex: 1; min-width: 0; }\n.mj-linecard-top .nm { font-size: 13.5px; font-weight: var(--mj-font-semibold); }\n.mj-linecard-top .mt { font-size: 11.5px; color: var(--mj-text-muted); margin-top: 1px; }\n.mj-linecard-top .qty { flex: none; }\n.mj-linecard-top .price { flex: none; width: 118px; text-align: right; }\n.mj-linecard-top .tot { flex: none; width: 104px; text-align: right; font-variant-numeric: tabular-nums; font-weight: var(--mj-font-semibold); font-size: 14px; }\n.mj-linecard-conseq { display: flex; gap: 6px; flex-wrap: wrap; margin-top: var(--mj-space-2); }\n\n/* ============================================================================\n   21. DOCUMENT (the bill)  \u2014 U6\n   ============================================================================ */\n\n.mj-doc {\n  background: var(--mj-bg-surface); color: var(--mj-text-primary);\n  max-width: 860px; margin: 0 auto; padding: 56px 60px;\n  border: 1px solid var(--mj-border-default); border-radius: var(--mj-radius-md);\n}\n.mj-doc-head { display: flex; align-items: flex-start; gap: var(--mj-space-6); margin-bottom: var(--mj-space-10); }\n.mj-doc-head .issuer { flex: 1; }\n.mj-doc-head .issuer .co { font-size: 17px; font-weight: var(--mj-font-bold); display: flex; align-items: center; gap: 8px; }\n.mj-doc-head .issuer .co i { color: var(--mj-brand-primary); }\n.mj-doc-head .issuer .addr { font-size: 12px; color: var(--mj-text-muted); margin-top: 6px; line-height: 1.6; }\n.mj-doc-head .docmeta { text-align: right; flex: none; }\n.mj-doc-head .docmeta .kind {\n  font-size: 11px; font-weight: var(--mj-font-bold); letter-spacing: .12em;\n  text-transform: uppercase; color: var(--mj-text-muted);\n}\n.mj-doc-head .docmeta .num { font-size: 22px; font-weight: var(--mj-font-bold); letter-spacing: -0.01em; }\n.mj-doc-meta-grid {\n  display: grid; grid-template-columns: auto auto; gap: 3px var(--mj-space-4);\n  font-size: 12px; margin-top: var(--mj-space-3); text-align: right;\n}\n.mj-doc-meta-grid dt { color: var(--mj-text-muted); }\n.mj-doc-meta-grid dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: var(--mj-font-medium); }\n.mj-doc-parties { display: grid; grid-template-columns: 1fr 1fr; gap: var(--mj-space-8); margin-bottom: var(--mj-space-8); }\n.mj-doc-parties .lbl {\n  font-size: 10px; font-weight: var(--mj-font-bold); letter-spacing: .1em;\n  text-transform: uppercase; color: var(--mj-text-muted); margin-bottom: 6px;\n}\n.mj-doc-parties .who { font-size: 13px; line-height: 1.7; }\n.mj-doc-parties .who .nm { font-weight: var(--mj-font-semibold); }\n.mj-doc table.mj-table thead th { background: transparent; border-bottom: 2px solid var(--mj-text-primary); }\n.mj-doc-totals { display: flex; justify-content: flex-end; margin-top: var(--mj-space-5); }\n.mj-doc-totals .box { width: min(340px, 100%); }\n.mj-doc-due {\n  display: flex; align-items: baseline; justify-content: space-between;\n  margin-top: var(--mj-space-3); padding-top: var(--mj-space-3);\n  border-top: 2px solid var(--mj-text-primary);\n}\n.mj-doc-due .l { font-size: 13px; font-weight: var(--mj-font-bold); text-transform: uppercase; letter-spacing: .06em; }\n.mj-doc-due .v { font-size: 24px; font-weight: var(--mj-font-bold); font-variant-numeric: tabular-nums; }\n.mj-doc-foot {\n  margin-top: var(--mj-space-10); padding-top: var(--mj-space-5);\n  border-top: 1px solid var(--mj-border-default);\n  font-size: 11.5px; color: var(--mj-text-muted); line-height: 1.7;\n}\n/*\n * The paid/void stamp.\n *\n * ANCHORED TO THE BOTTOM, not the top. Top-right is where the invoice number and\n * the date block already live, and the head's height varies with how many meta\n * rows a document has \u2014 so no fixed `top` clears it in every render. It sat on\n * top of the order number until a browser screenshot caught it. The footer band\n * is a single line of small print on the left, leaving the right reliably empty.\n */\n.mj-doc-stamp {\n  position: absolute; bottom: 96px; right: 64px; transform: rotate(-14deg);\n  border: 3px solid var(--mj-status-success); color: var(--mj-status-success-text);\n  border-radius: var(--mj-radius-md); padding: 6px 18px;\n  font-size: 22px; font-weight: var(--mj-font-bold); letter-spacing: .1em;\n  text-transform: uppercase; opacity: .85; pointer-events: none;\n}\n\n@media print {\n  .mj-topnav, .mj-rail, .mj-page-header, .mj-keys, .no-print { display: none !important; }\n  .mj-app, .mj-page-layout, .mj-page-body { height: auto; overflow: visible; display: block; }\n  .mj-page-body { padding: 0; }\n  .mj-doc { border: none; max-width: none; padding: 0; }\n  body { background: #fff; }\n}\n\n\n/* ============================================================================\n   CHROME THIS APP MUST SHIP ITSELF\n   ============================================================================\n   These were shimmed in mockups/assets/app.css on the assumption that MJ supplies\n   them at runtime, the way it supplies .mj-card, .mj-btn and .mj-input. It does\n   not. Loading the real app proved it: chips, banners, tabs, panels, the table\n   frame and the slide-in were all completely unstyled in MJ Explorer while\n   looking perfect in the mockups, because the mockups were reading the shim.\n\n   Anything a component of ours renders has to live HERE, in the stylesheet the\n   package ships, or it exists only in the mockups. The rule to apply when adding\n   a class: if our markup writes it, it belongs in this file. Only classes MJ\n   genuinely owns (.mj-page-layout, .mj-btn, .mj-input, .mj-card) stay as\n   mockup-side shims.\n\n   Names keep the mj- prefix deliberately \u2014 a reader should not have to care\n   whether a class came from the framework or from us.\n   ============================================================================ */\n\n.mj-iconbtn {\n  border: none; background: none; cursor: pointer;\n  color: var(--mj-text-secondary); font-size: 14px;\n  padding: var(--mj-space-2); border-radius: var(--mj-radius-md);\n  line-height: 1; display: inline-flex; align-items: center; justify-content: center;\n}\n.mj-iconbtn:hover { background: var(--mj-bg-surface-hover); color: var(--mj-text-primary); }\n.mj-avatar {\n  width: 30px; height: 30px; border-radius: var(--mj-radius-full);\n  background: var(--mj-brand-primary); color: var(--mj-brand-on-primary);\n  display: flex; align-items: center; justify-content: center;\n  font-size: 11.5px; font-weight: var(--mj-font-semibold); flex: none;\n}\n/* `.mj-input` is deliberately NOT defined here \u2014 MJ owns it.\n   MJ ships it globally in ui-components/input/input.scss (`.mj-input, .mj-textarea`),\n   and this file is now global too (the section shell loads it with\n   ViewEncapsulation.None), so redefining it meant two global rules of equal\n   specificity fighting, with the winner decided by stylesheet LOAD ORDER \u2014 MJ's\n   happens to win today, which is luck, not design. It also differed from MJ's\n   (13px/6-10px/radius-md vs 14px/8-12px/radius-sm/min-height 38px), so whichever\n   won changed how every input in the app looked.\n\n   `.mj-select` stays: MJ styles `.mj-input, .mj-textarea` but ships no select rule,\n   so this is ours to own. Values match MJ's input so the two sit level. */\n.mj-select {\n  font-family: inherit; font-size: var(--mj-text-sm); color: var(--mj-text-primary);\n  background: var(--mj-bg-surface); border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-sm); padding: 8px 12px; width: 100%;\n  min-height: 38px;\n}\n.mj-select:focus {\n  outline: none; border-color: var(--mj-border-focus);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 16%, transparent);\n}\n.mj-field { display: block; margin-bottom: var(--mj-space-3); }\n.mj-field > label {\n  display: block; font-size: 11px; font-weight: var(--mj-font-semibold);\n  letter-spacing: .04em; text-transform: uppercase;\n  color: var(--mj-text-muted); margin-bottom: 5px;\n}\n.mj-field .hint { font-size: 11.5px; color: var(--mj-text-muted); margin-top: 4px; }\n.mj-stated {\n  display: flex; align-items: baseline; gap: var(--mj-space-2);\n  padding: 6px 0;\n}\n.mj-stated .value { font-size: 13px; font-weight: var(--mj-font-medium); }\n.mj-stated .from {\n  font-size: 11px; color: var(--mj-text-muted);\n  background: var(--mj-bg-surface-sunken); border-radius: var(--mj-radius-sm);\n  padding: 1px 6px;\n}\n.mj-stepper-num {\n  display: inline-flex; align-items: center; border: 1px solid var(--mj-border-strong);\n  border-radius: var(--mj-radius-md); overflow: hidden; background: var(--mj-bg-surface);\n}\n.mj-stepper-num button {\n  border: none; background: none; cursor: pointer; color: var(--mj-text-secondary);\n  width: 26px; height: 28px; font-size: 11px;\n}\n.mj-stepper-num button:hover { background: var(--mj-bg-surface-hover); color: var(--mj-text-primary); }\n.mj-stepper-num input {\n  border: none; outline: none; background: none; width: 46px; text-align: center;\n  font-family: inherit; font-size: 13px; font-variant-numeric: tabular-nums; color: inherit;\n}\n.mj-chip {\n  display: inline-flex; align-items: center; gap: 5px;\n  padding: 2px 9px; border-radius: var(--mj-radius-full);\n  font-size: 11.5px; font-weight: var(--mj-font-semibold);\n  background: var(--mj-status-neutral-bg); color: var(--mj-status-neutral-text);\n  white-space: nowrap;\n}\n.mj-chip i { font-size: 10px; }\n.mj-filter-chip {\n  display: inline-flex; align-items: center; gap: 6px;\n  padding: 5px 11px; border-radius: var(--mj-radius-full);\n  border: 1px solid var(--mj-border-default); background: var(--mj-bg-surface);\n  font-family: inherit; font-size: 12.5px; font-weight: var(--mj-font-medium);\n  color: var(--mj-text-secondary); cursor: pointer; white-space: nowrap;\n}\n.mj-filter-chip:hover { background: var(--mj-bg-surface-hover); color: var(--mj-text-primary); }\n.mj-filter-chip .count {\n  font-variant-numeric: tabular-nums; font-size: 11px;\n  background: var(--mj-bg-surface-sunken); border-radius: var(--mj-radius-full); padding: 0 6px;\n}\n.mj-filter-chip.is-active {\n  background: color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n  border-color: color-mix(in srgb, var(--mj-brand-primary) 45%, transparent);\n  color: var(--mj-brand-primary); font-weight: var(--mj-font-semibold);\n}\n.mj-filter-chip.is-active .count { background: color-mix(in srgb, var(--mj-brand-primary) 18%, transparent); }\n.mj-consequence {\n  display: inline-flex; align-items: center; gap: 6px;\n  font-size: 11.5px; color: var(--mj-text-secondary);\n  background: var(--mj-bg-surface-sunken);\n  border-radius: var(--mj-radius-sm); padding: 3px 8px;\n}\n.mj-consequence i { font-size: 10px; color: var(--mj-text-muted); }\n.mj-consequence.is-sub i    { color: var(--mj-color-violet-500); }\n.mj-consequence.is-event i  { color: var(--mj-status-info); }\n.mj-consequence.is-defer i  { color: var(--mj-status-warning); }\n.mj-card-pad { padding: var(--mj-space-4); }\n.mj-card-head {\n  display: flex; align-items: center; gap: var(--mj-space-2);\n  padding: var(--mj-space-3) var(--mj-space-4);\n  border-bottom: 1px solid var(--mj-border-default);\n}\n.mj-card-head h3 { font-size: 13px; letter-spacing: .01em; }\n.mj-card-head i { color: var(--mj-text-muted); font-size: 12px; }\n.mj-card-head .right { margin-left: auto; display: flex; gap: var(--mj-space-2); align-items: center; }\n.mj-panel {\n  background: var(--mj-bg-surface); border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md); margin-bottom: var(--mj-space-4);\n}\n.mj-panel > summary {\n  display: flex; align-items: center; gap: var(--mj-space-2);\n  padding: var(--mj-space-3) var(--mj-space-4); cursor: pointer;\n  font-size: 13px; font-weight: var(--mj-font-semibold);\n  list-style: none;\n}\n.mj-panel > summary::-webkit-details-marker { display: none; }\n.mj-panel > summary::before {\n  content: \"\\f105\"; font-family: \"Font Awesome 6 Free\"; font-weight: 900;\n  font-size: 11px; color: var(--mj-text-muted); width: 10px;\n  transition: transform .14s ease;\n}\n.mj-panel[open] > summary::before { transform: rotate(90deg); }\n.mj-panel > summary > i:first-of-type { color: var(--mj-text-muted); font-size: 12px; }\n.mj-panel > summary .right { margin-left: auto; display: flex; gap: var(--mj-space-2); align-items: center; font-weight: var(--mj-font-normal); }\n.mj-panel-body { padding: 0 var(--mj-space-4) var(--mj-space-4); }\n.mj-panel-body.no-pad { padding: 0; }\n/* MJ ALREADY OWNS `.mj-table`. It is defined in ng-explorer-app's shared patterns, which\n   Explorer loads before this kit \u2014 so `width`, `border-collapse` and the base type were being\n   restated here purely to override MJ with the same thing, except in hardcoded pixels. Those\n   declarations are gone; what stays below is only what MJ's table does NOT do.\n\n   The one base property worth keeping is the SIZE: MJ's `--mj-text-sm` is 14px, and a dense\n   worklist reads better a step down. That is a deliberate deviation, so it is written as a token\n   rather than as 13px. */\n.mj-table { font-size: var(--mj-text-xs); }\n\n/* Additive, not a restatement: MJ's header has no sticky behaviour, and a worklist that scrolls\n   inside a card needs one \u2014 losing the column names on row 20 is what makes a long queue\n   unreadable. */\n.mj-table thead th {\n  text-align: left; font-size: var(--mj-text-xs); font-weight: var(--mj-font-bold);\n  letter-spacing: .06em; text-transform: uppercase; color: var(--mj-text-muted);\n  padding: var(--mj-space-2) var(--mj-space-3);\n  border-bottom: 1px solid var(--mj-border-strong);\n  background: var(--mj-bg-surface); position: sticky; top: 0; z-index: 1;\n  white-space: nowrap;\n}\n.mj-table thead th.num, .mj-table td.num { text-align: right; font-variant-numeric: tabular-nums; }\n.mj-table thead th .sortable { cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }\n.mj-table thead th .sortable i { font-size: var(--mj-text-xs); opacity: .5; }\n.mj-table tbody td {\n  padding: var(--mj-space-3); border-bottom: 1px solid var(--mj-border-subtle);\n  vertical-align: middle;\n}\n/* Scoped to `.is-clickable`, which the worklist applies only when something is\n   actually listening (`[class.is-clickable]=\"RowClicked.observed\"`). Unscoped,\n   EVERY table highlighted on hover \u2014 including read-only ones \u2014 which is a\n   promise of interactivity the row cannot keep. A highlight is the same\n   affordance as a lift: offer it only where a click does something. */\n.mj-table tbody tr.is-clickable:hover { background: var(--mj-bg-surface-hover); }\n.mj-table tbody tr.is-selected { background: color-mix(in srgb, var(--mj-brand-primary) 8%, transparent); }\n.mj-table tbody tr.is-clickable { cursor: pointer; }\n.mj-table tbody tr.is-total { background: var(--mj-bg-surface-card); font-weight: var(--mj-font-semibold); }\n.mj-table tbody tr.is-total td { border-bottom: none; border-top: 2px solid var(--mj-border-strong); }\n.mj-table .primary { font-weight: var(--mj-font-semibold); }\n.mj-table .secondary { font-size: var(--mj-text-xs); color: var(--mj-text-muted); }\n.mj-table-wrap {\n  background: var(--mj-bg-surface); border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md); overflow: auto;\n}\n/* The hand-rolled .mj-tabs / .mj-tab block lived here and is gone. The order\n   editor's five tabs now use MJ's own <mj-tab-nav>, which is the shipped,\n   tokenized component for exactly this job \u2014 a pane switcher over one record.\n\n   Not accounting's mj-workspace-card, despite the surface similarity: that models\n   OPEN DOCUMENTS, so its strip closes, reorders and adds tabs and carries a New\n   button \u2014 affordances that would be lies over five fixed panes of one order. It\n   also lives in accounting's transfer-pending/ folder, code explicitly parked for\n   another home, so depending on it would have bought a migration later.\n\n   The old red dot became an error-variant badge in the same slot the count uses.\n   A bare dot was a signifier with no meaning attached; only its aria-label said\n   what it meant, so a sighted user saw a dot and guessed. */\n\n.mj-slide-in {\n  position: fixed; top: 0; right: 0; bottom: 0; z-index: var(--mj-z-modal);\n  width: min(560px, 100vw); display: flex; flex-direction: column;\n  background: var(--mj-bg-surface); border-left: 1px solid var(--mj-border-default);\n  box-shadow: var(--mj-shadow-xl);\n  transform: translateX(100%); transition: transform .18s ease;\n}\n.mj-slide-in.is-open { transform: translateX(0); }\n.mj-empty {\n  display: flex; flex-direction: column; align-items: center; justify-content: center;\n  gap: var(--mj-space-2); padding: var(--mj-space-12) var(--mj-space-6);\n  color: var(--mj-text-muted); text-align: center;\n}\n.mj-empty i { font-size: 26px; color: var(--mj-text-disabled); }\n.mj-empty .t { font-size: 14px; font-weight: var(--mj-font-semibold); color: var(--mj-text-secondary); }\n\n/* Status variants for the chrome above. */\n.mj-chip--success { background: var(--mj-status-success-bg); color: var(--mj-status-success-text); }\n.mj-chip--warning { background: var(--mj-status-warning-bg); color: var(--mj-status-warning-text); }\n.mj-chip--error   { background: var(--mj-status-error-bg);   color: var(--mj-status-error-text); }\n.mj-chip--info    { background: var(--mj-status-info-bg);    color: var(--mj-status-info-text); }\n.mj-chip--violet  { background: var(--mj-status-violet-bg);  color: var(--mj-status-violet-text); }\n.mj-chip--brand   { background: color-mix(in srgb, var(--mj-brand-primary) 13%, transparent); color: var(--mj-brand-primary); }\n.mj-chip--outline { background: transparent; border: 1px solid var(--mj-border-default); color: var(--mj-text-secondary); font-weight: var(--mj-font-medium); }\n.mj-table--compact tbody td { padding: 7px var(--mj-space-3); }\n.mj-table--lines tbody td { padding: var(--mj-space-2) var(--mj-space-3); }\n.mj-slide-in-head {\n  display: flex; align-items: center; gap: var(--mj-space-3); flex: none;\n  padding: var(--mj-space-4) var(--mj-space-5);\n  border-bottom: 1px solid var(--mj-border-default);\n}\n.mj-slide-in-head h2 { font-size: 15px; }\n.mj-slide-in-head .right { margin-left: auto; display: flex; gap: var(--mj-space-1); align-items: center; }\n.mj-slide-in-body { flex: 1; min-height: 0; overflow: auto; padding: var(--mj-space-5); }\n.mj-slide-in-foot {\n  flex: none; display: flex; gap: var(--mj-space-2); align-items: center;\n  padding: var(--mj-space-3) var(--mj-space-5);\n  border-top: 1px solid var(--mj-border-default); background: var(--mj-bg-surface-card);\n}\n\n/*\n * The table filter box.\n *\n * NAMED mjo-, NOT mj-. MJ defines its own `.mj-search` for Explorer's global\n * search bar in the top chrome \u2014 a different control with different metrics \u2014 and\n * ours inherited it, which is why the filter box rendered as a bare underline\n * instead of a bordered field. Sharing the framework's prefix is right for\n * classes MJ does not define; it is actively wrong for one it does.\n */\n.mjo-search {\n  display: flex; align-items: center; gap: var(--mj-space-2);\n  background: var(--mj-bg-surface); border: 1px solid var(--mj-border-strong);\n  border-radius: var(--mj-radius-md); padding: 6px 10px; min-width: 260px;\n}\n.mjo-search i { color: var(--mj-text-muted); font-size: 12px; }\n.mjo-search input {\n  border: none; outline: none; background: none; font-family: inherit;\n  font-size: 13px; color: inherit; width: 100%;\n}\n\n/* \u2500\u2500 A standing explanation, not an alert \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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   `mj-alert` is for something that HAPPENED or needs attention. Screens that permanently\n   explain how they work were using it, which put a full-width coloured card above the work\n   on every visit \u2014 read once, then scrolled past forever. This is the quiet form: same\n   information, one line's worth of weight, no dismissal to manage. */\n.mjo-note {\n    display: flex;\n    align-items: baseline;\n    gap: var(--mj-space-2);\n    margin: 0 0 var(--mj-space-3);\n    color: var(--mj-text-secondary);\n    font-size: var(--mj-text-xs);\n    line-height: var(--mj-leading-relaxed, 1.6);\n}\n\n.mjo-note > i {\n    color: var(--mj-text-tertiary);\n    flex: 0 0 auto;\n}\n"], encapsulation: 2 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MJOSectionShellComponent, [{
+        type: Component,
+        args: [{ selector: 'mjo-section-shell', standalone: true, encapsulation: ViewEncapsulation.None, imports: [
+                    CommonModule,
+                    MJPageLayoutComponent,
+                    MJPageHeaderComponent,
+                    MJPageBodyComponent,
+                    MJLeftNavComponent,
+                    MJLeftNavContentComponent,
+                    MJPageBodyInteriorComponent,
+                ], template: `
+        <mj-page-layout>
+            <mj-page-header [Title]="Title" [Icon]="Icon" [Subtitle]="Subtitle">
+                <div meta><ng-content select="[meta]"></ng-content></div>
+                <div actions><ng-content select="[actions]"></ng-content></div>
+                <!--
+                  NO toolbar slot, deliberately. MJ hides its toolbar row when empty
+                  (the :empty rule on mj-page-header-row--toolbar), but a wrapper div
+                  carrying the toolbar attribute is itself a child node, so the row
+                  stopped counting as empty and rendered its border plus 28px of padding
+                  on every section — a measured 29px of dead space under the header, on
+                  all four, forever. No section projects a toolbar, so the slot only ever
+                  cost height.
+
+                  A section that needs one should add the wrapper back AND guard it with
+                  an @if, or the same dead row returns for everyone.
+                -->
+            </mj-page-header>
+
+            <mj-page-body [Flex]="true" [Padding]="false" Direction="row">
+                <mj-left-nav
+                    [Sections]="NavSections"
+                    [ActiveId]="ActivePageId"
+                    [Width]="RailWidth"
+                    [MobileTitle]="Title"
+                    (ItemClicked)="onItemClicked($event)" />
+
+                <!--
+                  The interior is what makes the sub-pages SCROLL, and it is required.
+
+                  mj-left-nav-content deliberately forces every DIRECT child to
+                  flex + height:100% + overflow:hidden via a ::ng-deep child rule, and that
+                  rule outranks a sub-page's own :host overflow:auto. Projected straight in,
+                  every page became a fixed-height box with its overflow hidden: anything past
+                  the fold — the lower card headings on Catalog and Receivables — was clipped
+                  and unreachable, because a mouse wheel cannot scroll overflow:hidden.
+
+                  mj-page-body-interior is MJ's own answer to exactly this: it is named in
+                  that rule's :not() exemption list and self-declares flex:1 1 auto plus
+                  overflow-y:auto. Wrapping here restores scrolling for every section at once
+                  and keeps the sub-pages as grandchildren, so their own :host layout applies
+                  as written. Padding stays off because each page supplies its own.
+                -->
+                <mj-left-nav-content [Loading]="Loading" [Error]="Error">
+                    <mj-page-body-interior [Padding]="false">
+                        <ng-content></ng-content>
+                    </mj-page-body-interior>
+                </mj-left-nav-content>
+            </mj-page-body>
+        </mj-page-layout>
+    `, styles: ["/* ============================================================================\n   BizApps Orders \u2014 component kit\n   ============================================================================\n   THE CANONICAL SOURCE for this app's own component CSS. Both consumers read\n   THIS FILE, so the mockups and the shipped UI cannot drift:\n\n     \u00B7 packages/Angular/src/lib/styles/orders-kit.css   \u2190 you are here\n     \u00B7 mockups/assets/app.css                            @imports it\n\n   Only classes MJ does NOT ship live here. Page chrome, buttons, inputs, chips,\n   collapsible panels, overlays and tab navigation all come from\n   @memberjunction/ng-ui-components and @memberjunction/ng-base-forms at runtime;\n   the mockups shim those separately because they have no Angular to provide them.\n\n   Every value resolves through MJ's semantic tokens. No literal colours, with one\n   documented exception: the deepest aging step, whose ramp was chosen by running\n   the palette validator (see mockups/PROVENANCE.md).\n\n   NAMING. These share MJ's `mj-` prefix deliberately, so a reader cannot tell\n   whether `mj-money-strip` came from the framework or from us \u2014 which is the\n   point when the goal is one visual system. The cost is a possible future\n   collision if MJ ships a class of the same name; that would be a mechanical\n   rename caught by a build, and it has not happened yet.\n   ============================================================================ */\n\n/* ============================================================================\n   16. LAYOUT & TEXT HELPERS\n   ============================================================================\n   These were authored in `mockups/assets/app.css` \u00A716 and never migrated here,\n   so the two consumers DID drift despite the promise at the top of this file:\n   the mockups styled them, the shipped app did not. 267 applications of `small`,\n   `muted`, `row`, `wrap`, `strong`, `mono`, `tiny`, `spacer` and `sec-label`\n   across the pages resolved to nothing \u2014 every caption rendered at full body\n   size in full-strength ink and every `.row` collapsed from a flex row to a\n   block stack. That single omission is most of the gap between the approved\n   mockups and what shipped.\n\n   Unprefixed on purpose \u2014 renaming ~267 call sites to `mj-` would buy nothing\n   and would break parity with the mockup markup they mirror.\n\n   TYPE SCALE \u2014 12px is the floor, and we do NOT want a sub-12px token.\n   These arrived as raw px below MJ's smallest step: `small` 11.5px and `tiny`\n   10.5px. Both now resolve to `--mj-text-xs` (12px), MJ's own token, so the app\n   shares one scale instead of carrying two private sizes.\n\n   The obvious alternative \u2014 asking for a `--mj-text-xxs` \u2014 is the wrong ask, and\n   we should not raise it. 12px is the practical legibility floor for secondary\n   text (Material and Apple HIG both bottom out at 11\u201312px and reserve it for\n   non-essential labels), and `small` here is not decoration: it carries amounts,\n   counts and statuses on 120 elements. Shrinking DATA below the floor is exactly\n   the case the floor exists for, and a token would institutionalise it across\n   every app that adopts it.\n\n   Hierarchy that used to come from size now comes from COLOUR (`muted`) and\n   WEIGHT (`strong`) \u2014 both of which preserve the distinction at a legible size.\n   Size is the bluntest hierarchy tool available and the only one that costs\n   legibility, so it is the right one to give up.\n   ============================================================================ */\n\n.row  { display: flex; align-items: center; gap: var(--mj-space-2); }\n.row-t { display: flex; align-items: flex-start; gap: var(--mj-space-2); }\n.col  { display: flex; flex-direction: column; gap: var(--mj-space-2); }\n.wrap { flex-wrap: wrap; }\n.spacer { margin-left: auto; }\n.stack-2 > * + * { margin-top: var(--mj-space-2); }\n.stack-3 > * + * { margin-top: var(--mj-space-3); }\n.stack-4 > * + * { margin-top: var(--mj-space-4); }\n.stack-6 > * + * { margin-top: var(--mj-space-6); }\n.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--mj-space-4); }\n.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--mj-space-4); }\n.muted  { color: var(--mj-text-muted); }\n/* 12px floor, on MJ's own token \u2014 see the TYPE SCALE note above. `small` and\n   `tiny` were 11.5px and 10.5px; both now resolve to --mj-text-xs and the\n   small/tiny distinction is carried by COLOUR and WEIGHT instead of size. */\n.small  { font-size: var(--mj-text-xs); }\n.tiny   { font-size: var(--mj-text-xs); }\n.strong { font-weight: var(--mj-font-semibold); }\n.mono   { font-family: var(--mj-font-family-mono); font-size: .92em; }\n.center { text-align: center; }\n.nowrap { white-space: nowrap; }\n.hidden { display: none !important; }\n\n/* Numeric input modifier \u2014 pairs with `mj-input` on the five money fields\n   (payment, refund, credit, return qty, allocation). Undefined until now, so\n   amounts typed into them left-aligned against right-aligned totals directly\n   beside them. Same treatment as `.mj-num`, which is what those totals use. */\n.is-num {\n  text-align: right;\n  font-variant-numeric: tabular-nums; font-feature-settings: \"tnum\";\n}\n.sec-label {\n  font-size: var(--mj-text-xs); font-weight: var(--mj-font-bold); letter-spacing: .06em;\n  text-transform: uppercase; color: var(--mj-text-muted); margin-bottom: var(--mj-space-2);\n}\n\n/* Explanatory notes under a chart, table or panel. 51 of these across 14\n   `mjo-<page>__note` hooks were authored with NO rule anywhere, so every one sat\n   flush against the element above it \u2014 the note read as a wrapped continuation\n   of the legend rather than a separate caption. Prefix-scoped so the unrelated\n   `fe-books__note` (which sets its own padding) is untouched. */\n[class*=\"mjo-\"][class*=\"__note\"] { margin-top: var(--mj-space-2); }\n\n/* Two-pane working layout (payment entry, subscriptions, catalog) */\n.mj-split { display: flex; gap: var(--mj-space-4); align-items: flex-start; min-height: 0; }\n.mj-split > .left  { flex: 0 0 380px; min-width: 0; }\n.mj-split > .right { flex: 1; min-width: 0; }\n.mj-split--narrow-left > .left { flex: 0 0 300px; }\n\n@media (max-width: 1100px) {\n  .mj-split { flex-direction: column; }\n  .mj-split > .left, .mj-split > .right { flex: 1 1 auto; width: 100%; }\n  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }\n}\n@media (max-width: 760px) {\n  .grid-2, .grid-3 { grid-template-columns: 1fr; }\n}\n\n/* ============================================================================\n   PAGE HEADER \u2014 three stacked rows compressed into two\n   ============================================================================\n   MJ stacks the identity column title -> subtitle -> meta, so our \"as of 2:31 PM\"\n   capsule landed on a third line of its own and the header stood 138px tall on\n   every section. The capsule is a timestamp for the subtitle, not a peer of it,\n   so it belongs BESIDE the subtitle rather than under it.\n\n   Done without restructuring MJ's template, so a future MJ header fix still\n   lands for us. Scoped to our shell \u2014 this is our editorial choice about our own\n   capsule, not an opinion about how every MJ header should read.\n\n   GRID, not flex-wrap. The first attempt used a wrapping flex row with order to\n   reseat the capsule; every child claimed its own line and the whole block\n   centred, because a full-width flex item forces a line break and the remaining\n   items had nothing to sit beside. Grid with EXPLICIT row and column placement\n   is deterministic \u2014 and it makes MJ's DOM order (title, subtitle, meta)\n   irrelevant, so the capsule renders to the LEFT of a subtitle that precedes it\n   in the markup, without touching the template. */\nmjo-section-shell .mj-page-header .mj-page-header-text {\n  display: grid;\n  grid-template-columns: auto minmax(0, 1fr);\n  align-items: center;\n  justify-items: start;\n  column-gap: var(--mj-space-2);\n  row-gap: 2px;\n}\nmjo-section-shell .mj-page-header .mj-page-header-title    { grid-row: 1; grid-column: 1 / -1; }\nmjo-section-shell .mj-page-header .mj-page-header-meta     { grid-row: 2; grid-column: 1; margin-top: 0; }\nmjo-section-shell .mj-page-header .mj-page-header-subtitle { grid-row: 2; grid-column: 2; margin-top: 0; }\n\n/* Reclaim the rest vertically. space-3 still clears the 40px icon tile with\n   room to spare; going tighter starts to crowd it. */\nmjo-section-shell .mj-page-header .mj-page-header-row--primary {\n  padding-top: var(--mj-space-3);\n  padding-bottom: var(--mj-space-3);\n}\n\n/* ============================================================================\n   CARD HOVER \u2014 undo MJ's ungated lift on cards that do nothing\n   ============================================================================\n   MJ lifts EVERY `.mj-card` on hover \u2014 `transform: translateY(-4px)` plus a\n   large shadow \u2014 from `explorer-app/src/lib/styles/_common.scss`. The selector\n   there is bare `.mj-card:hover`, with no gate on whether the card is\n   interactive, so a read-only dashboard panel rises under the cursor and\n   promises a click it will not accept.\n\n   This is not MJ's intent. `_shared-patterns.scss`, in the same package, heads\n   its own card-hover block \"for clickable cards\" and gates it properly on\n   `a.mj-card` / `.mj-card.clickable` \u2014 then weakens it with an ungated\n   `.mj-card:hover` of its own. Two competing rules, both ungated in practice.\n   Filed upstream; DELETE this block once MJ gates its own.\n\n   Scoped to the orders shell so it cannot alter any other app, and written the\n   way MJ says it means it: keep the lift where the card is genuinely a link or\n   is marked clickable, drop it everywhere else.\n\n   The values re-assert MJ's own RESTING state for `.mj-card` so that hovering a\n   non-interactive card is a true NO-OP rather than a different effect \u2014 an\n   earlier pass set a smaller shadow here, which only traded a card that rises\n   for one that flattens. `--mj-shadow-sm` is used rather than `_common.scss`'s\n   `var(--shadow)`: that variable is private to explorer-app and does not resolve\n   from here, so the declaration was silently dropped. */\nmjo-section-shell .mj-card:not(.clickable):not(a):hover {\n  transform: none;\n  box-shadow: var(--mj-shadow-sm);\n  border-color: transparent;\n}\n\n/* ============================================================================\n   7. MONEY  (U7)\n   ============================================================================ */\n\n.mj-num, .mj-money {\n  font-variant-numeric: tabular-nums; font-feature-settings: \"tnum\";\n  text-align: right; white-space: nowrap;\n}\n.mj-money--hero { font-size: 22px; font-weight: var(--mj-font-bold); letter-spacing: -0.01em; }\n.mj-money--lg   { font-size: 16px; font-weight: var(--mj-font-semibold); }\n.mj-money--neg  { color: var(--mj-status-error-text); }\n.mj-money--credit { color: var(--mj-status-success-text); }\n.mj-money--muted { color: var(--mj-text-muted); }\n\n/* The money strip \u2014 TotalGross / AmountPaid / Balance / status */\n/* Columns follow the CELLS THAT EXIST rather than a fixed three-plus-note.\n   Paid is conditional (drafts have none) and the note is optional, so the fixed\n   template left one or two empty panels sitting in the strip \u2014 which reads as a\n   figure that failed to load rather than a figure that does not apply. */\n.mj-money-strip {\n  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;\n  border: 1px solid var(--mj-border-default); border-radius: var(--mj-radius-md);\n  background: var(--mj-bg-surface); overflow: hidden;\n}\n.mj-money-strip > div {\n  padding: var(--mj-space-3) var(--mj-space-4);\n  border-right: 1px solid var(--mj-border-default);\n}\n/* The chip row is the STATUS cell specifically \u2014 not whatever happens to be last.\n   Keyed on :last-child, this flex rule landed on BALANCE as soon as the status cell\n   stopped rendering (a draft has no PaymentStatus), which laid its label and value\n   side by side while TOTAL beside it stayed stacked. */\n.mj-money-strip > div:last-child { border-right: none; }\n.mj-money-strip > .mj-money-strip__status {\n  display: flex; align-items: center; gap: var(--mj-space-2);\n}\n.mj-money-strip .l {\n  font-size: 10px; font-weight: var(--mj-font-bold); letter-spacing: .07em;\n  text-transform: uppercase; color: var(--mj-text-muted); display: block; margin-bottom: 2px;\n}\n.mj-money-strip .v { font-size: 17px; font-weight: var(--mj-font-bold); font-variant-numeric: tabular-nums; }\n\n/* Decomposition ladder \u2014 net \u2192 promos \u2192 charges \u2192 tax \u2192 gross */\n.mj-ladder { font-size: 13px; }\n.mj-ladder-row {\n  display: flex; align-items: baseline; gap: var(--mj-space-2);\n  padding: 6px 0; border-bottom: 1px dashed var(--mj-border-subtle);\n}\n.mj-ladder-row > .label { color: var(--mj-text-secondary); display: flex; align-items: center; gap: 6px; }\n.mj-ladder-row > .amt { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: var(--mj-font-medium); }\n.mj-ladder-row.is-sub    { padding-left: var(--mj-space-4); font-size: 12px; color: var(--mj-text-muted); }\n.mj-ladder-row.is-sub > .amt { font-weight: var(--mj-font-normal); }\n.mj-ladder-row.is-discount > .amt { color: var(--mj-status-success-text); }\n.mj-ladder-row.is-total {\n  border-bottom: none; border-top: 2px solid var(--mj-border-strong);\n  margin-top: var(--mj-space-2); padding-top: var(--mj-space-3);\n}\n.mj-ladder-row.is-total > .label { font-weight: var(--mj-font-semibold); color: var(--mj-text-primary); }\n.mj-ladder-row.is-total > .amt { font-size: 18px; font-weight: var(--mj-font-bold); }\n.mj-ladder-note {\n  font-size: 11.5px; color: var(--mj-text-muted); padding: var(--mj-space-2) 0 0;\n  display: flex; gap: 6px; align-items: flex-start;\n}\n.mj-ladder-note i { margin-top: 2px; color: var(--mj-status-info); }\n\n/* The \"why\" disclosure \u2014 U2. A bare number is never acceptable. */\n.mj-why {\n  border: none; background: none; cursor: pointer; padding: 0 2px;\n  color: var(--mj-text-disabled); font-size: 10.5px;\n}\n.mj-why:hover { color: var(--mj-brand-primary); }\n.mj-why-body {\n  font-size: 11.5px; color: var(--mj-text-secondary);\n  background: var(--mj-bg-surface-sunken); border-left: 2px solid var(--mj-brand-primary);\n  border-radius: 0 var(--mj-radius-sm) var(--mj-radius-sm) 0;\n  padding: var(--mj-space-2) var(--mj-space-3); margin: var(--mj-space-2) 0;\n}\n.mj-why-body ol, .mj-why-body ul { margin: 4px 0 0; padding-left: var(--mj-space-4); }\n.mj-why-body li { margin: 2px 0; }\n.mj-why-body code {\n  font-family: var(--mj-font-family-mono); font-size: 10.5px;\n  background: var(--mj-bg-surface); padding: 1px 4px; border-radius: 3px;\n}\n\n/* ============================================================================\n   9. STATUS STEPPER  (D9 \u2014 order fixed, forward skip legal)\n   ============================================================================ */\n\n.mj-stepper { display: flex; align-items: center; gap: var(--mj-space-1); flex-wrap: wrap; }\n.mj-stepper .step {\n  display: inline-flex; align-items: center; gap: 5px;\n  padding: 4px 11px; border-radius: var(--mj-radius-full);\n  border: 1px solid var(--mj-border-default); background: var(--mj-bg-surface);\n  font-size: 11.5px; font-weight: var(--mj-font-semibold); color: var(--mj-text-muted);\n  cursor: pointer;\n}\n.mj-stepper .step i { font-size: 9px; }\n.mj-stepper .step.is-done {\n  background: var(--mj-status-success-bg); border-color: color-mix(in srgb, var(--mj-status-success) 40%, transparent);\n  color: var(--mj-status-success-text);\n}\n.mj-stepper .step.is-current {\n  background: color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n  border-color: var(--mj-brand-primary); color: var(--mj-brand-primary);\n}\n.mj-stepper .step.is-blocked { opacity: .45; cursor: not-allowed; }\n.mj-stepper .sep { color: var(--mj-text-disabled); font-size: 9px; }\n\n/* ============================================================================\n   13. STAT TILES  (cheap counts only \u2014 U11)\n   ============================================================================ */\n\n.mj-stat-grid {\n  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));\n  gap: var(--mj-space-4);\n}\n.mj-stat {\n  background: var(--mj-bg-surface); border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md); padding: var(--mj-space-4);\n  display: flex; flex-direction: column; gap: 2px; min-width: 0;\n}\n.mj-stat .l {\n  font-size: 11px; font-weight: var(--mj-font-semibold); letter-spacing: .04em;\n  text-transform: uppercase; color: var(--mj-text-muted);\n  display: flex; align-items: center; gap: 6px;\n}\n.mj-stat .v {\n  font-size: 25px; font-weight: var(--mj-font-bold); font-variant-numeric: tabular-nums;\n  letter-spacing: -0.02em; line-height: 1.15;\n}\n.mj-stat .d { font-size: 11.5px; color: var(--mj-text-muted); }\n.mj-stat.is-alert .v { color: var(--mj-status-error-text); }\n.mj-stat .spark { margin-top: var(--mj-space-2); height: 30px; }\n.mj-stat .spark svg { width: 100%; height: 30px; display: block; overflow: visible; }\n\n/* ============================================================================\n   14. AGING BAR\n   ============================================================================ */\n\n.mj-aging { display: flex; flex-direction: column; gap: 6px; }\n.mj-aging-bar {\n  display: flex; height: 26px; border-radius: var(--mj-radius-sm);\n  overflow: hidden; background: var(--mj-bg-surface-sunken);\n}\n.mj-aging-bar > span {\n  display: flex; align-items: center; justify-content: center;\n  font-size: 10.5px; font-weight: var(--mj-font-semibold); color: #fff;\n  min-width: 0; overflow: hidden; white-space: nowrap;\n}\n/* Aging severity ramp \u2014 VALIDATED, do not eyeball-substitute.\n   #64748b, #f59e0b, #ef4444, #991b1b passes CVD separation (worst adjacent\n   \u0394E 13.9 deutan) and the normal-vision floor (\u0394E 19.8) on BOTH the light and\n   dark surfaces. The earlier set used warning-700 next to error-600, which sat\n   at \u0394E 2.8 deutan \u2014 the 60-day and 90-day buckets were indistinguishable.\n   The neutral first step is deliberate: \"not late\" is not a severity.\n   Every segment carries a visible amount and a legend, which is what discharges\n   the low-contrast warning on the amber step. See PROVENANCE.md. */\n.mj-aging-bar .b-cur  { background: var(--mj-color-neutral-500); }\n.mj-aging-bar .b-30   { background: var(--mj-color-warning-500); }\n.mj-aging-bar .b-60   { background: var(--mj-color-error-500); }\n/* Was the literal #991b1b, because MJ's error ramp stops at -700. Now fully\n   tokenised, and the reasoning is worth keeping because the first instinct was\n   the wrong one.\n\n   Re-measured independently (CIE76 + a Brettel deuteranope simulation) rather\n   than trusting the numbers above, whose validator script is NOT in this repo\n   and cannot be re-run. Worst adjacent pair, 31-60 vs 61+:\n\n       #991b1b (literal)              normal dE 26.6   deuteranope dE 23.8\n       --mj-color-error-700           normal dE 16.3   deuteranope dE 15.5\n       the REJECTED first attempt     normal dE 31.9   deuteranope dE  3.1\n\n   So the token step is a modest perceptual step DOWN, not a failure: dE 15 is\n   far above the ~2.3 just-noticeable difference, and nothing like the 3.1 that\n   made the original attempt genuinely unreadable. And the bar is never the sole\n   carrier \u2014 every segment shows its amount and the legend lists all four \u2014 so\n   WCAG 1.4.1 holds either way.\n\n   The token wins on a functional point the literal cannot match: a hardcoded\n   hex does not follow dark mode or a white-label rebrand, while every other\n   step of this ramp does. Trading ~10 dE of headroom for a ramp that themes\n   correctly is the right trade. */\n.mj-aging-bar .b-90   { background: var(--mj-color-error-700); }\n[data-theme=\"dark\"] .mj-aging-bar .b-cur { background: var(--mj-color-neutral-500); }\n.mj-aging-bar > span.is-empty { display: none; }\n/* row-gap is explicit: the legend wraps to two rows in a narrow column, and a\n   single `gap` shorthand left the wrapped rows tighter than the note beneath\n   them, so the four buckets read as two unrelated pairs. */\n.mj-aging-legend { display: flex; gap: var(--mj-space-2) var(--mj-space-4); font-size: 11.5px; flex-wrap: wrap; }\n.mj-aging-legend > span { display: flex; align-items: center; gap: 6px; color: var(--mj-text-secondary); }\n.mj-aging-legend i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }\n\n/* ============================================================================\n   15. TIMELINE  (subscription terms)\n   ============================================================================ */\n\n.mj-timeline { position: relative; padding: var(--mj-space-4) 0 var(--mj-space-2); }\n.mj-timeline-track {\n  position: relative; height: 34px;\n  background: var(--mj-bg-surface-sunken); border-radius: var(--mj-radius-sm);\n}\n.mj-timeline-term {\n  position: absolute; top: 4px; bottom: 4px; border-radius: var(--mj-radius-sm);\n  display: flex; align-items: center; padding: 0 var(--mj-space-2);\n  font-size: 11px; font-weight: var(--mj-font-semibold); color: #fff;\n  overflow: hidden; white-space: nowrap;\n}\n.mj-timeline-term.is-past   { background: var(--mj-color-neutral-400); }\n.mj-timeline-term.is-active { background: var(--mj-brand-primary); }\n.mj-timeline-term.is-future { background: color-mix(in srgb, var(--mj-brand-primary) 45%, var(--mj-bg-surface)); color: var(--mj-text-primary); }\n.mj-timeline-now {\n  position: absolute; top: -6px; bottom: -6px; width: 2px;\n  background: var(--mj-status-error);\n}\n.mj-timeline-now::after {\n  content: \"today\"; position: absolute; top: -16px; left: -14px;\n  font-size: 9.5px; font-weight: var(--mj-font-bold); color: var(--mj-status-error-text);\n}\n.mj-timeline-scale {\n  display: flex; justify-content: space-between; font-size: 10.5px;\n  color: var(--mj-text-muted); margin-top: 6px;\n}\n\n/* ============================================================================\n   17. KEYBOARD HINT STRIP  (U20 \u2014 shortcuts are visible, not hidden)\n   ============================================================================ */\n\n.mj-keys {\n  display: flex; align-items: center; gap: var(--mj-space-4); flex-wrap: wrap;\n  font-size: 11.5px; color: var(--mj-text-muted);\n}\n.mj-keys > span { display: inline-flex; align-items: center; gap: 5px; }\nkbd {\n  font-family: var(--mj-font-family); font-size: 10.5px; font-weight: var(--mj-font-semibold);\n  background: var(--mj-bg-surface); border: 1px solid var(--mj-border-strong);\n  border-bottom-width: 2px; border-radius: var(--mj-radius-sm);\n  padding: 1px 5px; color: var(--mj-text-secondary); line-height: 1.5;\n}\n\n/* ============================================================================\n   19. TYPE-AHEAD  (fast entry)\n   ============================================================================ */\n\n/*\n * The wrapper needs a STACKING CONTEXT, not just a positioning one.\n *\n * `position: relative` alone anchors the list under the input but leaves it in the\n * parent's stacking order, so later siblings paint on top of it: the customer\n * results rendered in the right place and were covered by the next section.\n * `elementFromPoint` at the centre of the first option returned the section, not\n * the option \u2014 the list was visible to the DOM and invisible to a person.\n */\n.mj-typeahead { position: relative; z-index: 20; }\n.mj-typeahead-list {\n  position: absolute; top: calc(100% + 4px); left: 0; right: 0;\n  z-index: var(--mj-z-popover); max-height: 320px; overflow: auto;\n  background: var(--mj-bg-surface); border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md); box-shadow: var(--mj-shadow-lg);\n  display: none;\n}\n.mj-typeahead-list.is-open { display: block; }\n.mj-typeahead-item {\n  display: flex; align-items: center; gap: var(--mj-space-3);\n  padding: var(--mj-space-2) var(--mj-space-3); cursor: pointer;\n  border-bottom: 1px solid var(--mj-border-subtle);\n}\n.mj-typeahead-item:last-child { border-bottom: none; }\n.mj-typeahead-item:hover, .mj-typeahead-item.is-cursor { background: var(--mj-bg-surface-hover); }\n.mj-typeahead-item .name { font-size: 13px; font-weight: var(--mj-font-medium); }\n.mj-typeahead-item .sub  { font-size: 11.5px; color: var(--mj-text-muted); }\n.mj-typeahead-item .end  { margin-left: auto; text-align: right; }\n.mj-typeahead-group {\n  padding: 5px var(--mj-space-3); font-size: 10px; font-weight: var(--mj-font-bold);\n  letter-spacing: .07em; text-transform: uppercase; color: var(--mj-text-muted);\n  background: var(--mj-bg-surface-card); border-bottom: 1px solid var(--mj-border-subtle);\n}\n\n/* ============================================================================\n   20. LINE ROW CARD  (fast entry)\n   ============================================================================ */\n\n.mj-linecard {\n  border: 1px solid var(--mj-border-default); border-radius: var(--mj-radius-md);\n  background: var(--mj-bg-surface); padding: var(--mj-space-3);\n}\n.mj-linecard + .mj-linecard { margin-top: var(--mj-space-2); }\n.mj-linecard-top { display: flex; align-items: flex-start; gap: var(--mj-space-3); }\n.mj-linecard-top .id { flex: 1; min-width: 0; }\n.mj-linecard-top .nm { font-size: 13.5px; font-weight: var(--mj-font-semibold); }\n.mj-linecard-top .mt { font-size: 11.5px; color: var(--mj-text-muted); margin-top: 1px; }\n.mj-linecard-top .qty { flex: none; }\n.mj-linecard-top .price { flex: none; width: 118px; text-align: right; }\n.mj-linecard-top .tot { flex: none; width: 104px; text-align: right; font-variant-numeric: tabular-nums; font-weight: var(--mj-font-semibold); font-size: 14px; }\n.mj-linecard-conseq { display: flex; gap: 6px; flex-wrap: wrap; margin-top: var(--mj-space-2); }\n\n/* ============================================================================\n   21. DOCUMENT (the bill)  \u2014 U6\n   ============================================================================ */\n\n.mj-doc {\n  background: var(--mj-bg-surface); color: var(--mj-text-primary);\n  max-width: 860px; margin: 0 auto; padding: 56px 60px;\n  border: 1px solid var(--mj-border-default); border-radius: var(--mj-radius-md);\n}\n.mj-doc-head { display: flex; align-items: flex-start; gap: var(--mj-space-6); margin-bottom: var(--mj-space-10); }\n.mj-doc-head .issuer { flex: 1; }\n.mj-doc-head .issuer .co { font-size: 17px; font-weight: var(--mj-font-bold); display: flex; align-items: center; gap: 8px; }\n.mj-doc-head .issuer .co i { color: var(--mj-brand-primary); }\n.mj-doc-head .issuer .addr { font-size: 12px; color: var(--mj-text-muted); margin-top: 6px; line-height: 1.6; }\n.mj-doc-head .docmeta { text-align: right; flex: none; }\n.mj-doc-head .docmeta .kind {\n  font-size: 11px; font-weight: var(--mj-font-bold); letter-spacing: .12em;\n  text-transform: uppercase; color: var(--mj-text-muted);\n}\n.mj-doc-head .docmeta .num { font-size: 22px; font-weight: var(--mj-font-bold); letter-spacing: -0.01em; }\n.mj-doc-meta-grid {\n  display: grid; grid-template-columns: auto auto; gap: 3px var(--mj-space-4);\n  font-size: 12px; margin-top: var(--mj-space-3); text-align: right;\n}\n.mj-doc-meta-grid dt { color: var(--mj-text-muted); }\n.mj-doc-meta-grid dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: var(--mj-font-medium); }\n.mj-doc-parties { display: grid; grid-template-columns: 1fr 1fr; gap: var(--mj-space-8); margin-bottom: var(--mj-space-8); }\n.mj-doc-parties .lbl {\n  font-size: 10px; font-weight: var(--mj-font-bold); letter-spacing: .1em;\n  text-transform: uppercase; color: var(--mj-text-muted); margin-bottom: 6px;\n}\n.mj-doc-parties .who { font-size: 13px; line-height: 1.7; }\n.mj-doc-parties .who .nm { font-weight: var(--mj-font-semibold); }\n.mj-doc table.mj-table thead th { background: transparent; border-bottom: 2px solid var(--mj-text-primary); }\n.mj-doc-totals { display: flex; justify-content: flex-end; margin-top: var(--mj-space-5); }\n.mj-doc-totals .box { width: min(340px, 100%); }\n.mj-doc-due {\n  display: flex; align-items: baseline; justify-content: space-between;\n  margin-top: var(--mj-space-3); padding-top: var(--mj-space-3);\n  border-top: 2px solid var(--mj-text-primary);\n}\n.mj-doc-due .l { font-size: 13px; font-weight: var(--mj-font-bold); text-transform: uppercase; letter-spacing: .06em; }\n.mj-doc-due .v { font-size: 24px; font-weight: var(--mj-font-bold); font-variant-numeric: tabular-nums; }\n.mj-doc-foot {\n  margin-top: var(--mj-space-10); padding-top: var(--mj-space-5);\n  border-top: 1px solid var(--mj-border-default);\n  font-size: 11.5px; color: var(--mj-text-muted); line-height: 1.7;\n}\n/*\n * The paid/void stamp.\n *\n * ANCHORED TO THE BOTTOM, not the top. Top-right is where the invoice number and\n * the date block already live, and the head's height varies with how many meta\n * rows a document has \u2014 so no fixed `top` clears it in every render. It sat on\n * top of the order number until a browser screenshot caught it. The footer band\n * is a single line of small print on the left, leaving the right reliably empty.\n */\n.mj-doc-stamp {\n  position: absolute; bottom: 96px; right: 64px; transform: rotate(-14deg);\n  border: 3px solid var(--mj-status-success); color: var(--mj-status-success-text);\n  border-radius: var(--mj-radius-md); padding: 6px 18px;\n  font-size: 22px; font-weight: var(--mj-font-bold); letter-spacing: .1em;\n  text-transform: uppercase; opacity: .85; pointer-events: none;\n}\n\n@media print {\n  .mj-topnav, .mj-rail, .mj-page-header, .mj-keys, .no-print { display: none !important; }\n  .mj-app, .mj-page-layout, .mj-page-body { height: auto; overflow: visible; display: block; }\n  .mj-page-body { padding: 0; }\n  .mj-doc { border: none; max-width: none; padding: 0; }\n  body { background: #fff; }\n}\n\n\n/* ============================================================================\n   CHROME THIS APP MUST SHIP ITSELF\n   ============================================================================\n   These were shimmed in mockups/assets/app.css on the assumption that MJ supplies\n   them at runtime, the way it supplies .mj-card, .mj-btn and .mj-input. It does\n   not. Loading the real app proved it: chips, banners, tabs, panels, the table\n   frame and the slide-in were all completely unstyled in MJ Explorer while\n   looking perfect in the mockups, because the mockups were reading the shim.\n\n   Anything a component of ours renders has to live HERE, in the stylesheet the\n   package ships, or it exists only in the mockups. The rule to apply when adding\n   a class: if our markup writes it, it belongs in this file. Only classes MJ\n   genuinely owns (.mj-page-layout, .mj-btn, .mj-input, .mj-card) stay as\n   mockup-side shims.\n\n   Names keep the mj- prefix deliberately \u2014 a reader should not have to care\n   whether a class came from the framework or from us.\n   ============================================================================ */\n\n.mj-iconbtn {\n  border: none; background: none; cursor: pointer;\n  color: var(--mj-text-secondary); font-size: 14px;\n  padding: var(--mj-space-2); border-radius: var(--mj-radius-md);\n  line-height: 1; display: inline-flex; align-items: center; justify-content: center;\n}\n.mj-iconbtn:hover { background: var(--mj-bg-surface-hover); color: var(--mj-text-primary); }\n.mj-avatar {\n  width: 30px; height: 30px; border-radius: var(--mj-radius-full);\n  background: var(--mj-brand-primary); color: var(--mj-brand-on-primary);\n  display: flex; align-items: center; justify-content: center;\n  font-size: 11.5px; font-weight: var(--mj-font-semibold); flex: none;\n}\n/* `.mj-input` is deliberately NOT defined here \u2014 MJ owns it.\n   MJ ships it globally in ui-components/input/input.scss (`.mj-input, .mj-textarea`),\n   and this file is now global too (the section shell loads it with\n   ViewEncapsulation.None), so redefining it meant two global rules of equal\n   specificity fighting, with the winner decided by stylesheet LOAD ORDER \u2014 MJ's\n   happens to win today, which is luck, not design. It also differed from MJ's\n   (13px/6-10px/radius-md vs 14px/8-12px/radius-sm/min-height 38px), so whichever\n   won changed how every input in the app looked.\n\n   `.mj-select` stays: MJ styles `.mj-input, .mj-textarea` but ships no select rule,\n   so this is ours to own. Values match MJ's input so the two sit level. */\n.mj-select {\n  font-family: inherit; font-size: var(--mj-text-sm); color: var(--mj-text-primary);\n  background: var(--mj-bg-surface); border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-sm); padding: 8px 12px; width: 100%;\n  min-height: 38px;\n}\n.mj-select:focus {\n  outline: none; border-color: var(--mj-border-focus);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 16%, transparent);\n}\n.mj-field { display: block; margin-bottom: var(--mj-space-3); }\n.mj-field > label {\n  display: block; font-size: 11px; font-weight: var(--mj-font-semibold);\n  letter-spacing: .04em; text-transform: uppercase;\n  color: var(--mj-text-muted); margin-bottom: 5px;\n}\n.mj-field .hint { font-size: 11.5px; color: var(--mj-text-muted); margin-top: 4px; }\n.mj-stated {\n  display: flex; align-items: baseline; gap: var(--mj-space-2);\n  padding: 6px 0;\n}\n.mj-stated .value { font-size: 13px; font-weight: var(--mj-font-medium); }\n.mj-stated .from {\n  font-size: 11px; color: var(--mj-text-muted);\n  background: var(--mj-bg-surface-sunken); border-radius: var(--mj-radius-sm);\n  padding: 1px 6px;\n}\n.mj-stepper-num {\n  display: inline-flex; align-items: center; border: 1px solid var(--mj-border-strong);\n  border-radius: var(--mj-radius-md); overflow: hidden; background: var(--mj-bg-surface);\n}\n.mj-stepper-num button {\n  border: none; background: none; cursor: pointer; color: var(--mj-text-secondary);\n  width: 26px; height: 28px; font-size: 11px;\n}\n.mj-stepper-num button:hover { background: var(--mj-bg-surface-hover); color: var(--mj-text-primary); }\n.mj-stepper-num input {\n  border: none; outline: none; background: none; width: 46px; text-align: center;\n  font-family: inherit; font-size: 13px; font-variant-numeric: tabular-nums; color: inherit;\n}\n.mj-chip {\n  display: inline-flex; align-items: center; gap: 5px;\n  padding: 2px 9px; border-radius: var(--mj-radius-full);\n  font-size: 11.5px; font-weight: var(--mj-font-semibold);\n  background: var(--mj-status-neutral-bg); color: var(--mj-status-neutral-text);\n  white-space: nowrap;\n}\n.mj-chip i { font-size: 10px; }\n.mj-filter-chip {\n  display: inline-flex; align-items: center; gap: 6px;\n  padding: 5px 11px; border-radius: var(--mj-radius-full);\n  border: 1px solid var(--mj-border-default); background: var(--mj-bg-surface);\n  font-family: inherit; font-size: 12.5px; font-weight: var(--mj-font-medium);\n  color: var(--mj-text-secondary); cursor: pointer; white-space: nowrap;\n}\n.mj-filter-chip:hover { background: var(--mj-bg-surface-hover); color: var(--mj-text-primary); }\n.mj-filter-chip .count {\n  font-variant-numeric: tabular-nums; font-size: 11px;\n  background: var(--mj-bg-surface-sunken); border-radius: var(--mj-radius-full); padding: 0 6px;\n}\n.mj-filter-chip.is-active {\n  background: color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n  border-color: color-mix(in srgb, var(--mj-brand-primary) 45%, transparent);\n  color: var(--mj-brand-primary); font-weight: var(--mj-font-semibold);\n}\n.mj-filter-chip.is-active .count { background: color-mix(in srgb, var(--mj-brand-primary) 18%, transparent); }\n.mj-consequence {\n  display: inline-flex; align-items: center; gap: 6px;\n  font-size: 11.5px; color: var(--mj-text-secondary);\n  background: var(--mj-bg-surface-sunken);\n  border-radius: var(--mj-radius-sm); padding: 3px 8px;\n}\n.mj-consequence i { font-size: 10px; color: var(--mj-text-muted); }\n.mj-consequence.is-sub i    { color: var(--mj-color-violet-500); }\n.mj-consequence.is-event i  { color: var(--mj-status-info); }\n.mj-consequence.is-defer i  { color: var(--mj-status-warning); }\n.mj-card-pad { padding: var(--mj-space-4); }\n.mj-card-head {\n  display: flex; align-items: center; gap: var(--mj-space-2);\n  padding: var(--mj-space-3) var(--mj-space-4);\n  border-bottom: 1px solid var(--mj-border-default);\n}\n.mj-card-head h3 { font-size: 13px; letter-spacing: .01em; }\n.mj-card-head i { color: var(--mj-text-muted); font-size: 12px; }\n.mj-card-head .right { margin-left: auto; display: flex; gap: var(--mj-space-2); align-items: center; }\n.mj-panel {\n  background: var(--mj-bg-surface); border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md); margin-bottom: var(--mj-space-4);\n}\n.mj-panel > summary {\n  display: flex; align-items: center; gap: var(--mj-space-2);\n  padding: var(--mj-space-3) var(--mj-space-4); cursor: pointer;\n  font-size: 13px; font-weight: var(--mj-font-semibold);\n  list-style: none;\n}\n.mj-panel > summary::-webkit-details-marker { display: none; }\n.mj-panel > summary::before {\n  content: \"\\f105\"; font-family: \"Font Awesome 6 Free\"; font-weight: 900;\n  font-size: 11px; color: var(--mj-text-muted); width: 10px;\n  transition: transform .14s ease;\n}\n.mj-panel[open] > summary::before { transform: rotate(90deg); }\n.mj-panel > summary > i:first-of-type { color: var(--mj-text-muted); font-size: 12px; }\n.mj-panel > summary .right { margin-left: auto; display: flex; gap: var(--mj-space-2); align-items: center; font-weight: var(--mj-font-normal); }\n.mj-panel-body { padding: 0 var(--mj-space-4) var(--mj-space-4); }\n.mj-panel-body.no-pad { padding: 0; }\n/* MJ ALREADY OWNS `.mj-table`. It is defined in ng-explorer-app's shared patterns, which\n   Explorer loads before this kit \u2014 so `width`, `border-collapse` and the base type were being\n   restated here purely to override MJ with the same thing, except in hardcoded pixels. Those\n   declarations are gone; what stays below is only what MJ's table does NOT do.\n\n   The one base property worth keeping is the SIZE: MJ's `--mj-text-sm` is 14px, and a dense\n   worklist reads better a step down. That is a deliberate deviation, so it is written as a token\n   rather than as 13px. */\n.mj-table { font-size: var(--mj-text-xs); }\n\n/* Additive, not a restatement: MJ's header has no sticky behaviour, and a worklist that scrolls\n   inside a card needs one \u2014 losing the column names on row 20 is what makes a long queue\n   unreadable. */\n.mj-table thead th {\n  text-align: left; font-size: var(--mj-text-xs); font-weight: var(--mj-font-bold);\n  letter-spacing: .06em; text-transform: uppercase; color: var(--mj-text-muted);\n  padding: var(--mj-space-2) var(--mj-space-3);\n  border-bottom: 1px solid var(--mj-border-strong);\n  background: var(--mj-bg-surface); position: sticky; top: 0; z-index: 1;\n  white-space: nowrap;\n}\n.mj-table thead th.num, .mj-table td.num { text-align: right; font-variant-numeric: tabular-nums; }\n.mj-table thead th .sortable { cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }\n.mj-table thead th .sortable i { font-size: var(--mj-text-xs); opacity: .5; }\n.mj-table tbody td {\n  padding: var(--mj-space-3); border-bottom: 1px solid var(--mj-border-subtle);\n  vertical-align: middle;\n}\n/* Scoped to `.is-clickable`, which the worklist applies only when something is\n   actually listening (`[class.is-clickable]=\"RowClicked.observed\"`). Unscoped,\n   EVERY table highlighted on hover \u2014 including read-only ones \u2014 which is a\n   promise of interactivity the row cannot keep. A highlight is the same\n   affordance as a lift: offer it only where a click does something. */\n.mj-table tbody tr.is-clickable:hover { background: var(--mj-bg-surface-hover); }\n.mj-table tbody tr.is-selected { background: color-mix(in srgb, var(--mj-brand-primary) 8%, transparent); }\n.mj-table tbody tr.is-clickable { cursor: pointer; }\n.mj-table tbody tr.is-total { background: var(--mj-bg-surface-card); font-weight: var(--mj-font-semibold); }\n.mj-table tbody tr.is-total td { border-bottom: none; border-top: 2px solid var(--mj-border-strong); }\n.mj-table .primary { font-weight: var(--mj-font-semibold); }\n.mj-table .secondary { font-size: var(--mj-text-xs); color: var(--mj-text-muted); }\n.mj-table-wrap {\n  background: var(--mj-bg-surface); border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md); overflow: auto;\n}\n/* The hand-rolled .mj-tabs / .mj-tab block lived here and is gone. The order\n   editor's five tabs now use MJ's own <mj-tab-nav>, which is the shipped,\n   tokenized component for exactly this job \u2014 a pane switcher over one record.\n\n   Not accounting's mj-workspace-card, despite the surface similarity: that models\n   OPEN DOCUMENTS, so its strip closes, reorders and adds tabs and carries a New\n   button \u2014 affordances that would be lies over five fixed panes of one order. It\n   also lives in accounting's transfer-pending/ folder, code explicitly parked for\n   another home, so depending on it would have bought a migration later.\n\n   The old red dot became an error-variant badge in the same slot the count uses.\n   A bare dot was a signifier with no meaning attached; only its aria-label said\n   what it meant, so a sighted user saw a dot and guessed. */\n\n.mj-slide-in {\n  position: fixed; top: 0; right: 0; bottom: 0; z-index: var(--mj-z-modal);\n  width: min(560px, 100vw); display: flex; flex-direction: column;\n  background: var(--mj-bg-surface); border-left: 1px solid var(--mj-border-default);\n  box-shadow: var(--mj-shadow-xl);\n  transform: translateX(100%); transition: transform .18s ease;\n}\n.mj-slide-in.is-open { transform: translateX(0); }\n.mj-empty {\n  display: flex; flex-direction: column; align-items: center; justify-content: center;\n  gap: var(--mj-space-2); padding: var(--mj-space-12) var(--mj-space-6);\n  color: var(--mj-text-muted); text-align: center;\n}\n.mj-empty i { font-size: 26px; color: var(--mj-text-disabled); }\n.mj-empty .t { font-size: 14px; font-weight: var(--mj-font-semibold); color: var(--mj-text-secondary); }\n\n/* Status variants for the chrome above. */\n.mj-chip--success { background: var(--mj-status-success-bg); color: var(--mj-status-success-text); }\n.mj-chip--warning { background: var(--mj-status-warning-bg); color: var(--mj-status-warning-text); }\n.mj-chip--error   { background: var(--mj-status-error-bg);   color: var(--mj-status-error-text); }\n.mj-chip--info    { background: var(--mj-status-info-bg);    color: var(--mj-status-info-text); }\n.mj-chip--violet  { background: var(--mj-status-violet-bg);  color: var(--mj-status-violet-text); }\n.mj-chip--brand   { background: color-mix(in srgb, var(--mj-brand-primary) 13%, transparent); color: var(--mj-brand-primary); }\n.mj-chip--outline { background: transparent; border: 1px solid var(--mj-border-default); color: var(--mj-text-secondary); font-weight: var(--mj-font-medium); }\n.mj-table--compact tbody td { padding: 7px var(--mj-space-3); }\n.mj-table--lines tbody td { padding: var(--mj-space-2) var(--mj-space-3); }\n.mj-slide-in-head {\n  display: flex; align-items: center; gap: var(--mj-space-3); flex: none;\n  padding: var(--mj-space-4) var(--mj-space-5);\n  border-bottom: 1px solid var(--mj-border-default);\n}\n.mj-slide-in-head h2 { font-size: 15px; }\n.mj-slide-in-head .right { margin-left: auto; display: flex; gap: var(--mj-space-1); align-items: center; }\n.mj-slide-in-body { flex: 1; min-height: 0; overflow: auto; padding: var(--mj-space-5); }\n.mj-slide-in-foot {\n  flex: none; display: flex; gap: var(--mj-space-2); align-items: center;\n  padding: var(--mj-space-3) var(--mj-space-5);\n  border-top: 1px solid var(--mj-border-default); background: var(--mj-bg-surface-card);\n}\n\n/*\n * The table filter box.\n *\n * NAMED mjo-, NOT mj-. MJ defines its own `.mj-search` for Explorer's global\n * search bar in the top chrome \u2014 a different control with different metrics \u2014 and\n * ours inherited it, which is why the filter box rendered as a bare underline\n * instead of a bordered field. Sharing the framework's prefix is right for\n * classes MJ does not define; it is actively wrong for one it does.\n */\n.mjo-search {\n  display: flex; align-items: center; gap: var(--mj-space-2);\n  background: var(--mj-bg-surface); border: 1px solid var(--mj-border-strong);\n  border-radius: var(--mj-radius-md); padding: 6px 10px; min-width: 260px;\n}\n.mjo-search i { color: var(--mj-text-muted); font-size: 12px; }\n.mjo-search input {\n  border: none; outline: none; background: none; font-family: inherit;\n  font-size: 13px; color: inherit; width: 100%;\n}\n\n/* \u2500\u2500 A standing explanation, not an alert \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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   `mj-alert` is for something that HAPPENED or needs attention. Screens that permanently\n   explain how they work were using it, which put a full-width coloured card above the work\n   on every visit \u2014 read once, then scrolled past forever. This is the quiet form: same\n   information, one line's worth of weight, no dismissal to manage. */\n.mjo-note {\n    display: flex;\n    align-items: baseline;\n    gap: var(--mj-space-2);\n    margin: 0 0 var(--mj-space-3);\n    color: var(--mj-text-secondary);\n    font-size: var(--mj-text-xs);\n    line-height: var(--mj-leading-relaxed, 1.6);\n}\n\n.mjo-note > i {\n    color: var(--mj-text-tertiary);\n    flex: 0 0 auto;\n}\n"] }]
+    }], null, { Title: [{
+            type: Input
+        }], Icon: [{
+            type: Input
+        }], Subtitle: [{
+            type: Input
+        }], NavSections: [{
+            type: Input
+        }], ActivePageId: [{
+            type: Input
+        }], RailWidth: [{
+            type: Input
+        }], Loading: [{
+            type: Input
+        }], Error: [{
+            type: Input
+        }], PageSelected: [{
+            type: Output
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MJOSectionShellComponent, { className: "MJOSectionShellComponent", filePath: "lib/sections/section-shell.component.ts", lineNumber: 129 }); })();
+//# sourceMappingURL=section-shell.component.js.map

package/dist/lib/sections/section-shell.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"section-shell.component.js","sourceRoot":"","sources":["../../../src/lib/sections/section-shell.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,KAAK,EAAE,MAAM,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAC1F,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EACH,kBAAkB,EAClB,yBAAyB,EACzB,mBAAmB,EACnB,2BAA2B,EAC3B,qBAAqB,EACrB,qBAAqB,GAGxB,MAAM,kCAAkC,CAAC;;;;AAE1C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AA+EH,MAAM,OAAO,wBAAwB;IACjC,oFAAoF;IAC3E,KAAK,GAAG,EAAE,CAAC;IAEpB,wCAAwC;IAC/B,IAAI,GAAG,EAAE,CAAC;IAEnB,gDAAgD;IACvC,QAAQ,GAAG,EAAE,CAAC;IAEvB,oFAAoF;IAC3E,WAAW,GAAuB,EAAE,CAAC;IAE9C,iEAAiE;IACxD,YAAY,GAAkB,IAAI,CAAC;IAE5C,qDAAqD;IAC5C,SAAS,GAAG,GAAG,CAAC;IAEzB,+EAA+E;IACtE,OAAO,GAAG,KAAK,CAAC;IAEzB,qEAAqE;IAC5D,KAAK,GAAkB,IAAI,CAAC;IAErC;;;;;;OAMG;IACO,YAAY,GAAG,IAAI,YAAY,EAAU,CAAC;IAE1C,aAAa,CAAC,IAAmB;QACvC,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QAC1B,yEAAyE;QACzE,8DAA8D;QAC9D,IAAI,IAAI,CAAC,EAAE,KAAK,IAAI,CAAC,YAAY;YAAE,OAAO;QAC1C,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IACpC,CAAC;kHAxCQ,wBAAwB;6DAAxB,wBAAwB;;YAjDrB,AADJ,AADJ,sCAAgB,wBACwD,aACtD;YAAA,kBAAyC;YAAA,iBAAM;YACzD,8BAAa;YAAA,qBAA4C;YAa7D,AAb6D,iBAAM,EAalD;YAGb,AADJ,uCAA8D,qBAMd;YAAxC,4HAAe,yBAAqB,IAAC;YALzC,iBAK4C;YAmBxC,AADJ,8CAAyD,+BACZ;YACrC,sBAAyB;YAIzC,AADI,AADI,AADI,iBAAwB,EACN,EACX,EACF;;YA/CG,cAAe;YAAe,AAAd,AAAhB,iCAAe,kBAAc,0BAAsB;YAiBrD,eAAa;YAAC,AAAd,2BAAa,kBAAkB;YAErC,cAAwB;YAGxB,AADA,AADA,AADA,0CAAwB,8BACC,wBACN,0BACE;YAmBJ,cAAmB;YAAC,AAApB,qCAAmB,oBAAgB;YAC7B,cAAiB;YAAjB,+BAAiB;4BApDpD,YAAY;YACZ,qBAAqB;YACrB,qBAAqB;YACrB,mBAAmB;YACnB,kBAAkB;YAClB,yBAAyB;YACzB,2BAA2B;;iFAsDtB,wBAAwB;cA9EpC,SAAS;2BACI,mBAAmB,cACjB,IAAI,iBAaD,iBAAiB,CAAC,IAAI,WAE5B;oBACL,YAAY;oBACZ,qBAAqB;oBACrB,qBAAqB;oBACrB,mBAAmB;oBACnB,kBAAkB;oBAClB,yBAAyB;oBACzB,2BAA2B;iBAC9B,YACS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAkDT;;kBAIA,KAAK;;kBAGL,KAAK;;kBAGL,KAAK;;kBAGL,KAAK;;kBAGL,KAAK;;kBAGL,KAAK;;kBAGL,KAAK;;kBAGL,KAAK;;kBASL,MAAM;;kFAhCE,wBAAwB"}

package/dist/lib/services/pricing-scheduler.service.d.ts

@@ -0,0 +1,181 @@
+import { OrderHeaderEntity, type PreviewComponent } from '@mj-biz-apps/orders-entities';
+import * as i0 from "@angular/core";
+/** The entity every order screen binds to. */
+/**
+ * What the pricing pipeline said about ONE draft line.
+ *
+ * `Error` is a refusal with a reason — "No price is configured for X" — and it is
+ * rendered on the row instead of a number. A missing price must never present as
+ * `0.00`: a free line and an unpriced line look identical on screen and only one
+ * of them is what the user meant.
+ */
+export interface MJOLinePrice {
+    ClientKey: string;
+    /** Quantity × unit price, before this line's own discount. */
+    ExtendedAmount: number | null;
+    UnitPrice: number | null;
+    /** After `DiscountPct`. The figure the line strip shows. */
+    NetAmount: number | null;
+    PriceListName: string | null;
+    /**
+     * WHERE the price came from, in the words the badge shows: the price list's name,
+     * or `'base price'` when the winning rule belonged to no list. Null ONLY when no
+     * price resolved at all.
+     *
+     * Distinct from `PriceListName` on purpose. The badge treats a null source as
+     * "pricing finished and found nothing" and says *no price rule* — so feeding it
+     * `PriceListName` labelled every base-priced line as unpriced while showing its
+     * resolved price two inches to the left. Caught in the browser on 2026-08-07:
+     * both demo products price from base rules, so BOTH read "no price rule".
+     */
+    PriceSource: string | null;
+    /** The resolution walk, so a price can be explained rather than asserted. */
+    Components: PreviewComponent[];
+    /** True when the user typed the price rather than the engine resolving one. */
+    WasStated: boolean;
+    Error: string | null;
+}
+/**
+ * What the entry screens may say about an order's money BEFORE it is confirmed.
+ *
+ * DELIBERATELY INCOMPLETE, and the omissions are the point. There is no
+ * `GrossTotal`, no `TaxTotal`, no `ChargeTotal` — charges, tax and promotions are
+ * decided inside `OrderEntityServer.Save()` and have no read-only entry point yet.
+ * Reporting them as `0` would be a lie that reads as a number, and it is exactly
+ * the failure the old pre-flight had (it once showed tax and discount as $0 on the
+ * one screen whose whole job is saying what you are about to commit to).
+ *
+ * So the screens show a NET SUBTOTAL and say what it excludes. The engine remains
+ * the authority on what the order actually comes to.
+ */
+export interface MJOEstimatedTotals {
+    ListSubtotal: number;
+    DiscountTotal: number;
+    NetTotal: number;
+    /**
+     * What the customer actually pays — net plus charges plus tax.
+     *
+     * The client could not know this before: only a full booking walk produced it, and the only
+     * thing that ran one was a preview inside a transaction that always rolled back. `PriceOrder`
+     * returns it from the same engine the booking uses, which is what lets "pay in full" offer the
+     * real figure instead of the net subtotal.
+     */
+    GrossTotal: number;
+}
+export interface MJOPricingResult {
+    Lines: MJOLinePrice[];
+    Totals: MJOEstimatedTotals;
+    /** True when any line could not be priced — the subtotal is incomplete. */
+    HasUnpricedLines: boolean;
+}
+/** What the last pricing attempt produced. */
+export interface MJOPricingState {
+    /** Line prices + subtotal, or null before the first successful attempt. */
+    Result: MJOPricingResult | null;
+    /** A pricing pass is in flight. */
+    Loading: boolean;
+    /** Why the last attempt failed — the CALL not completing, not a refusal to price. */
+    Error: string | null;
+}
+/**
+ * `MJOPricingScheduler` — the seam between a draft and the engine.
+ *
+ * Every screen that composes an order goes through here, so the debounce, the
+ * out-of-order guard and the staleness bookkeeping exist once instead of in each
+ * screen that happens to need them.
+ *
+ * ## How pricing works here, and why it is not a preview
+ *
+ * This used to call `Orders.PreviewOrder`, which performed a REAL save inside a
+ * transaction that always rolled back and read the computed values off the
+ * entities before they vanished. It fired on every keystroke, so composing one
+ * order ran the full booking walk — journal entries, subscription decisions,
+ * entitlement grants, sequence numbers — dozens of times and discarded all of it.
+ * And the confirm was gated on the result, so a failure in a run nobody would ever
+ * read blocked the run that mattered.
+ *
+ * It now calls **`Orders.PriceOrder`**, which runs `OrderPricingService` — the same
+ * walk `Save()` uses — and writes nothing. `Orders.PreviewPrice` is a one-line
+ * wrapper around that same service, not a second resolver.
+ *
+ * WHY DEBOUNCE AND SEQUENCE-GUARD (unchanged, and still necessary). Pricing is a
+ * server round trip fired as the user types. Two things go wrong without care, and
+ * both show a wrong number rather than an obvious failure:
+ *
+ * - **Too many calls.** Un-debounced, every keystroke prices every line.
+ * - **Out-of-order responses.** Request 3 can return after request 4. Applying it
+ *   would show prices for a draft the user has already moved past — stale money
+ *   presented as current. Every response carries the sequence number it was issued
+ *   with, and anything not from the newest request is discarded.
+ *
+ * Provided in root: the debounce state is per-draft, not per-service, so one
+ * instance serves the whole app.
+ *
+ * ## Example
+ *
+ * ```typescript
+ * const order = await md.GetEntityObject<OrderHeaderEntity>(MJO_ENTITIES.OrderHeader);
+ * this.stop = draft.Subscribe(() => this.orders.SchedulePricing(draft, s => this.Pricing = s));
+ * ```
+ */
+export declare class MJOPricingScheduler {
+    /** Milliseconds of quiet before a pricing pass fires. */
+    DebounceMs: number;
+    private sequence;
+    private applied;
+    private timer;
+    /**
+     * Price a draft's lines after a quiet period, calling back with each state change.
+     *
+     * Calling again before the timer elapses replaces the pending request rather
+     * than queueing another — the user is still typing, and only the final state
+     * is worth asking about.
+     */
+    SchedulePricing(order: OrderHeaderEntity, onState: (state: MJOPricingState) => void): void;
+    /**
+     * Price a draft's lines immediately, bypassing the debounce.
+     *
+     * ## Locally when it can, on the server when it must
+     *
+     * `OrderPricingService` runs in this browser — it lives in the entities package and uses nothing
+     * but `RunView`, which is network-transparent. So the common order prices with no round trip at
+     * all: the metadata walk reads price rules, tiers, charge types and tax tables through the
+     * provider and answers immediately.
+     *
+     * Two things it cannot do here, and both must ESCALATE rather than be approximated:
+     *
+     *   · a **pricing plugin**. `BasePriceResolver` subclasses are server-side code, and the class
+     *     factory on this tier has none of them registered — so `ResolvePrice` would fall through to
+     *     the DEFAULT resolver and return a confident, wrong number. `CanPriceOrderLocally` reads the
+     *     `PricingDriverClass` metadata to find out before that happens.
+     *   · a **promotion code**. Whether a code still applies depends on redemption counts that change
+     *     with orders other people are placing right now. No staleness is acceptable for that, so any
+     *     code at all sends the whole pass to the server.
+     *
+     * The escalation is all-or-nothing because pricing is not per-line arithmetic: promotions stack
+     * against order totals, charges apportion across lines, tax computes on the discounted amount. An
+     * order half-priced here and half there would disagree with itself about the same totals.
+     *
+     * Either way the answer comes from ONE implementation, which is the property the whole
+     * arrangement exists to preserve.
+     */
+    PriceNow(order: OrderHeaderEntity, onState: (state: MJOPricingState) => void): Promise<void>;
+    /**
+     * Run the real pricing walk in this browser, or report that it cannot.
+     *
+     * @returns True when it priced and reported state; false when the caller must escalate.
+     */
+    private priceLocally;
+    /**
+     * Turn the engine's answer into what the strip renders.
+     *
+     * Totals come from the SERVER's figures rather than being re-added here. Summing on the client
+     * is how the screen and the ledger drift: the engine apportions discounts and charges across
+     * lines with its own rounding, and a second addition in a different order lands a penny out.
+     */
+    private summarize;
+    CancelPending(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MJOPricingScheduler, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<MJOPricingScheduler>;
+}
+//# sourceMappingURL=pricing-scheduler.service.d.ts.map

package/dist/lib/services/pricing-scheduler.service.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pricing-scheduler.service.d.ts","sourceRoot":"","sources":["../../../src/lib/services/pricing-scheduler.service.ts"],"names":[],"mappings":"AAGA,OAAO,EAAwB,iBAAiB,EAAkD,KAAK,gBAAgB,EAAuC,MAAM,8BAA8B,CAAC;;AAEnM,8CAA8C;AAE9C;;;;;;;GAOG;AACH,MAAM,WAAW,YAAY;IACzB,SAAS,EAAE,MAAM,CAAC;IAClB,8DAA8D;IAC9D,cAAc,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,4DAA4D;IAC5D,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B;;;;;;;;;;OAUG;IACH,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,6EAA6E;IAC7E,UAAU,EAAE,gBAAgB,EAAE,CAAC;IAC/B,+EAA+E;IAC/E,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CACxB;AAED;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,kBAAkB;IAC/B,YAAY,EAAE,MAAM,CAAC;IACrB,aAAa,EAAE,MAAM,CAAC;IACtB,QAAQ,EAAE,MAAM,CAAC;IACjB;;;;;;;OAOG;IACH,UAAU,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,gBAAgB;IAC7B,KAAK,EAAE,YAAY,EAAE,CAAC;IACtB,MAAM,EAAE,kBAAkB,CAAC;IAC3B,2EAA2E;IAC3E,gBAAgB,EAAE,OAAO,CAAC;CAC7B;AAED,8CAA8C;AAC9C,MAAM,WAAW,eAAe;IAC5B,2EAA2E;IAC3E,MAAM,EAAE,gBAAgB,GAAG,IAAI,CAAC;IAChC,mCAAmC;IACnC,OAAO,EAAE,OAAO,CAAC;IACjB,qFAAqF;IACrF,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CACxB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACH,qBACa,mBAAmB;IAC5B,yDAAyD;IAClD,UAAU,SAAO;IAExB,OAAO,CAAC,QAAQ,CAAK;IACrB,OAAO,CAAC,OAAO,CAAK;IACpB,OAAO,CAAC,KAAK,CAA8C;IAE3D;;;;;;OAMG;IACI,eAAe,CAAC,KAAK,EAAE,iBAAiB,EAAE,OAAO,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,IAAI,GAAG,IAAI;IAYjG;;;;;;;;;;;;;;;;;;;;;;;;;;OA0BG;IACU,QAAQ,CAAC,KAAK,EAAE,iBAAiB,EAAE,OAAO,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC;IAkEzG;;;;OAIG;YACW,YAAY;IAuF1B;;;;;;OAMG;IACH,OAAO,CAAC,SAAS;IA2CV,aAAa,IAAI,IAAI;yCAtQnB,mBAAmB;6CAAnB,mBAAmB;CA0Q/B"}