@echelon-foundry/design-system 0.2.0-main.16.1 → 0.2.0-main.167.1

package/dist/all.css

@@ -210,6 +210,34 @@
       border-color: CanvasText;
     }
   }
+
+  /* Visual Engineering composition primitives -------------------------- */
+  .ef-breakout { inline-size: min(100%, var(--ef-breakout-max, 90rem)); max-inline-size: none; }
+  .ef-rail { --ef-rail-measure: minmax(12rem, 18rem); --ef-rail-content-min: 50%; --ef-rail-space: var(--ef-primitive-spacing-5, 1.5rem); display: grid; grid-template-columns: var(--ef-rail-measure) minmax(var(--ef-rail-content-min), 1fr); gap: var(--ef-rail-space); align-items: start; }
+  .ef-rail[data-side="end"] { grid-template-columns: minmax(var(--ef-rail-content-min), 1fr) var(--ef-rail-measure); }
+  .ef-rail > * { min-inline-size: 0; }
+  .ef-responsive-grid { --ef-responsive-grid-min: 16rem; --ef-responsive-grid-space: var(--ef-primitive-spacing-4, 1rem); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--ef-responsive-grid-min)), 1fr)); gap: var(--ef-responsive-grid-space); }
+  .ef-responsive-grid > * { min-inline-size: 0; }
+  .ef-span-2 { grid-column: span 2; }
+  .ef-span-full { grid-column: 1 / -1; }
+  .ef-bounded-overflow { max-inline-size: 100%; overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
+  .ef-priority-stack { --ef-priority-min: 18rem; --ef-priority-space: var(--ef-primitive-spacing-4, 1rem); display: flex; flex-wrap: wrap; gap: var(--ef-priority-space); align-items: start; }
+  .ef-priority-stack > * { flex: 1 1 var(--ef-priority-min); min-inline-size: min(100%, var(--ef-priority-min)); }
+  .ef-priority-stack > [data-priority="primary"] { flex-grow: 2; }
+  .ef-focus-stage { --ef-focus-stage-support: minmax(14rem, 20rem); --ef-focus-stage-space: var(--ef-primitive-spacing-5, 1.5rem); display: grid; grid-template-columns: minmax(0, 1fr) var(--ef-focus-stage-support); gap: var(--ef-focus-stage-space); align-items: start; }
+  .ef-focus-stage__primary, .ef-focus-stage__support { min-inline-size: 0; }
+  .ef-mosaic { --ef-mosaic-space: var(--ef-primitive-spacing-4, 1rem); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ef-mosaic-space); }
+  .ef-mosaic > * { min-inline-size: 0; }
+  .ef-mosaic > [data-span="2"] { grid-column: span 2; }
+  .ef-mosaic > [data-span="full"] { grid-column: 1 / -1; }
+  .ef-dense-ledger { inline-size: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
+  .ef-dense-ledger :is(th, td) { padding: var(--ef-ledger-cell-space, var(--ef-primitive-spacing-2, 0.5rem)); border-block-end: 1px solid var(--ef-color-border-subtle, #e3e0d7); text-align: start; vertical-align: top; }
+  [data-density="relaxed"] { --ef-density-space: var(--ef-primitive-spacing-5, 1.5rem); }
+  [data-density="standard"] { --ef-density-space: var(--ef-primitive-spacing-4, 1rem); }
+  [data-density="compact"], [data-density="analytical"] { --ef-density-space: var(--ef-primitive-spacing-2, 0.5rem); }
+  :where(.ef-stack, .ef-grid, .ef-responsive-grid, .ef-priority-stack)[data-density] { gap: var(--ef-density-space); }
+  @media (max-width: 48rem) { .ef-rail, .ef-rail[data-side="end"], .ef-focus-stage { grid-template-columns: minmax(0, 1fr); } .ef-mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ef-span-2 { grid-column: 1 / -1; } }
+  @media (max-width: 30rem) { .ef-mosaic { grid-template-columns: minmax(0, 1fr); } .ef-mosaic > [data-span="2"], .ef-mosaic > [data-span="full"] { grid-column: auto; } .ef-responsive-grid { --ef-responsive-grid-min: 100%; } .ef-priority-stack { --ef-priority-min: 100%; } }
 }
 
 @layer echelon.components {
@@ -2736,6 +2764,655 @@
       color: CanvasText;
     }
   }
+
+  /* Tutela security results --------------------------------------------- */
+  :where(.ef-security-posture,.ef-security-state-matrix,.ef-security-blockers,.ef-security-evidence-chain,.ef-security-unknown,.ef-security-exception) {
+    min-inline-size: 0; border: 1px solid var(--ef-color-border-functional,#3a403c);
+    background: var(--ef-color-surface-primary,#f2efe7); color: var(--ef-color-text-primary,#171a18);
+    padding: var(--ef-primitive-spacing-4,1rem);
+  }
+  .ef-security-posture__header { display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem; align-items:start; }
+  .ef-security-posture__eyebrow,.ef-security-unknown header p,.ef-security-exception header p { margin:0; font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; }
+  .ef-security-posture__meta,.ef-security-unknown dl,.ef-security-exception dl { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(12rem,100%),1fr)); gap:.75rem; }
+  :where(.ef-security-posture__meta,.ef-security-unknown dl,.ef-security-exception dl) div { min-inline-size:0; }
+  :where(.ef-security-posture__meta,.ef-security-unknown dl,.ef-security-exception dl) dt { color:var(--ef-color-text-secondary,#686d68); font-size:.75rem; font-weight:700; }
+  :where(.ef-security-posture__meta,.ef-security-unknown dl,.ef-security-exception dl) dd { margin:0; overflow-wrap:anywhere; }
+  .ef-security-posture__blockers,.ef-security-blockers { border-inline-start:.35rem solid currentColor; }
+  .ef-security-posture__qualification { color:var(--ef-color-text-secondary,#686d68); font-size:.8125rem; }
+  .ef-security-state-matrix__grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(7rem,1fr)); gap:.5rem; margin:0; }
+  .ef-security-state-matrix__grid div { border-block-start:.25rem solid currentColor; padding:.75rem; background:var(--ef-color-surface-secondary,#e3e0d7); }
+  .ef-security-state-matrix__grid dt { font-size:.75rem; font-weight:700; }
+  .ef-security-state-matrix__grid dd { margin:0; font-size:clamp(1.4rem,4vw,2rem); font-weight:750; }
+  .ef-security-blockers ul { display:grid; gap:.75rem; padding-inline-start:1.25rem; }
+  .ef-security-blockers li { padding-inline-start:.25rem; }
+  .ef-security-blockers li span { display:block; }
+  .ef-security-evidence-chain ol { display:grid; grid-template-columns:repeat(auto-fit,minmax(9rem,1fr)); gap:.5rem; padding:0; list-style:none; }
+  .ef-security-evidence-chain li { padding:.75rem; border:1px solid var(--ef-color-border-functional,#3a403c); overflow-wrap:anywhere; }
+  .ef-security-evidence-chain li strong,.ef-security-evidence-chain li span,.ef-security-evidence-chain li a { display:block; }
+  @media (max-width:30rem) { .ef-security-posture__header { display:grid; } .ef-security-evidence-chain ol { grid-template-columns:1fr; } }
+  @media (forced-colors:active) { :where(.ef-security-posture__blockers,.ef-security-blockers,.ef-security-state-matrix__grid div) { border-color:CanvasText; } }
+
+  :where(.ef-invariant-result,.ef-evidence-age,.ef-security-trend) { min-inline-size:0; border:1px solid var(--ef-color-border-functional,#3a403c); padding:var(--ef-primitive-spacing-4,1rem); background:var(--ef-color-surface-primary,#f2efe7); }
+  .ef-invariant-result header { display:flex; flex-wrap:wrap; align-items:baseline; gap:.5rem 1rem; }
+  .ef-invariant-result header p { flex-basis:100%; margin:0; font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; }
+  .ef-invariant-result dl { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(10rem,100%),1fr)); gap:.75rem; }
+  .ef-invariant-result dt { color:var(--ef-color-text-secondary,#686d68); font-size:.75rem; font-weight:700; } .ef-invariant-result dd { margin:0; overflow-wrap:anywhere; }
+  :where(.ef-evidence-age,.ef-security-trend) ul { display:grid; gap:.5rem; margin:0; padding:0; list-style:none; }
+  :where(.ef-evidence-age,.ef-security-trend) li { display:grid; gap:.2rem; border-inline-start:.3rem solid currentColor; padding:.65rem .75rem; background:var(--ef-color-surface-secondary,#e3e0d7); }
+  :where(.ef-evidence-age,.ef-security-trend) li span { overflow-wrap:anywhere; }
+
+  /* Composition primitives ---------------------------------------------- */
+  .ef-stack {
+    --ef-stack-space: var(--ef-primitive-spacing-4, 1rem);
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+  }
+  .ef-stack > * { margin-block: 0; }
+  .ef-stack > * + * { margin-block-start: var(--ef-stack-space); }
+
+  .ef-cluster {
+    --ef-cluster-space: var(--ef-primitive-spacing-3, 0.75rem);
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--ef-cluster-space);
+  }
+
+  .ef-sidebar {
+    --ef-sidebar-width: 18rem;
+    --ef-sidebar-content-min: 60%;
+    --ef-sidebar-space: var(--ef-primitive-spacing-5, 1.5rem);
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--ef-sidebar-space);
+    align-items: stretch;
+  }
+  .ef-sidebar__side {
+    flex-basis: var(--ef-sidebar-width);
+    flex-grow: 1;
+  }
+  .ef-sidebar__content {
+    flex-basis: 0;
+    flex-grow: 999;
+    min-inline-size: min(100%, var(--ef-sidebar-content-min));
+  }
+
+  .ef-frame {
+    --ef-frame-ratio: 16 / 9;
+    margin: 0;
+  }
+  .ef-frame__media {
+    aspect-ratio: var(--ef-frame-ratio);
+    overflow: hidden;
+  }
+  .ef-frame__media > :is(img, video, iframe, svg) {
+    inline-size: 100%;
+    block-size: 100%;
+    object-fit: cover;
+  }
+
+  .ef-measure {
+    --ef-measure: 65ch;
+    inline-size: min(100%, var(--ef-measure));
+  }
+
+  @media (max-width: 30rem) {
+    .ef-sidebar {
+      display: grid;
+      grid-template-columns: minmax(0, 1fr);
+    }
+    .ef-sidebar__side,
+    .ef-sidebar__content {
+      min-inline-size: 0;
+      inline-size: 100%;
+    }
+  }
+
+
+  .ef-landmark-region {
+    --ef-landmark-space: var(--ef-primitive-spacing-3, 0.75rem);
+    position: sticky;
+    inset-block-start: 0;
+    z-index: 1;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--ef-landmark-space);
+    padding-block: var(--ef-landmark-space);
+    background: var(--ef-color-surface-primary, Canvas);
+  }
+  .ef-landmark-region nav {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--ef-landmark-space);
+  }
+
+  .ef-split-pane {
+    --ef-split-primary: minmax(0, 2fr);
+    --ef-split-secondary: minmax(16rem, 1fr);
+    --ef-split-space: var(--ef-primitive-spacing-5, 1.5rem);
+    display: grid;
+    grid-template-columns: var(--ef-split-primary) var(--ef-split-secondary);
+    gap: var(--ef-split-space);
+    align-items: start;
+  }
+  .ef-split-pane > * { min-inline-size: 0; }
+
+  .ef-comparison-grid {
+    max-inline-size: 100%;
+    overflow-x: auto;
+    overscroll-behavior-inline: contain;
+  }
+  .ef-comparison-grid table {
+    inline-size: 100%;
+    min-inline-size: max-content;
+    border-collapse: collapse;
+  }
+  .ef-comparison-grid :is(th, td) {
+    padding: var(--ef-primitive-spacing-3, 0.75rem);
+    text-align: start;
+    vertical-align: top;
+  }
+
+  @media (max-width: 48rem) {
+    .ef-split-pane { grid-template-columns: minmax(0, 1fr); }
+    .ef-landmark-region { position: static; }
+  }
+
+
+  .ef-command-group {
+    --ef-command-space: var(--ef-primitive-spacing-2, 0.5rem);
+    display: grid;
+    gap: var(--ef-command-space);
+    align-content: start;
+  }
+  .ef-command-group__label { margin: 0; font-size: 0.875rem; }
+  .ef-command-group__commands,
+  .ef-overflow-commands__panel {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--ef-command-space, var(--ef-primitive-spacing-2, 0.5rem));
+  }
+  .ef-overflow-commands { position: relative; }
+  .ef-overflow-commands__panel {
+    padding-block-start: var(--ef-primitive-spacing-2, 0.5rem);
+  }
+
+  .ef-switcher {
+    --ef-switcher-threshold: 42rem;
+    --ef-switcher-space: var(--ef-primitive-spacing-5, 1.5rem);
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--ef-switcher-space);
+    align-items: start;
+  }
+  .ef-switcher__primary { flex: 999 1 28rem; min-inline-size: min(100%, 20rem); }
+  .ef-switcher__secondary { flex: 1 1 16rem; min-inline-size: min(100%, 16rem); }
+
+  .ef-workspace-shell {
+    --ef-workspace-nav: minmax(10rem, 14rem);
+    --ef-workspace-inspector: minmax(14rem, 20rem);
+    --ef-workspace-space: var(--ef-primitive-spacing-4, 1rem);
+    display: grid;
+    grid-template:
+      "landmark landmark landmark" auto
+      "navigation primary inspector" minmax(0, 1fr)
+      / var(--ef-workspace-nav) minmax(0, 1fr) var(--ef-workspace-inspector);
+    gap: var(--ef-workspace-space);
+    align-items: start;
+  }
+  .ef-workspace-shell__landmark { grid-area: landmark; }
+  .ef-workspace-shell__navigation { grid-area: navigation; display: grid; gap: var(--ef-primitive-spacing-2, 0.5rem); }
+  .ef-workspace-shell__primary { grid-area: primary; min-inline-size: 0; }
+  .ef-workspace-shell__inspector { grid-area: inspector; min-inline-size: 0; }
+
+  .ef-navigation-shell {
+    --ef-navigation-width: minmax(11rem, 16rem);
+    --ef-navigation-space: var(--ef-primitive-spacing-4, 1rem);
+    display: grid;
+    grid-template-columns: var(--ef-navigation-width) minmax(0, 1fr);
+    gap: var(--ef-navigation-space);
+    align-items: start;
+  }
+  .ef-navigation-shell__persistent { display: grid; gap: var(--ef-primitive-spacing-2, 0.5rem); }
+  .ef-navigation-shell__compact { display: none; }
+  .ef-navigation-shell__content { min-inline-size: 0; }
+
+  @media (max-width: 48rem) {
+    .ef-workspace-shell {
+      grid-template:
+        "landmark" auto
+        "navigation" auto
+        "primary" auto
+        "inspector" auto
+        / minmax(0, 1fr);
+    }
+    .ef-navigation-shell { grid-template-columns: minmax(0, 1fr); }
+    .ef-navigation-shell__persistent { display: none; }
+    .ef-navigation-shell__compact { display: block; }
+    .ef-navigation-shell__compact nav { display: grid; gap: var(--ef-primitive-spacing-2, 0.5rem); padding-block-start: var(--ef-primitive-spacing-2, 0.5rem); }
+  }
+
+  .ef-active-filter-summary { display:grid; gap:var(--ef-primitive-spacing-2,.5rem); }
+  .ef-active-filter-summary__heading { display:flex; flex-wrap:wrap; gap:var(--ef-primitive-spacing-2,.5rem); align-items:center; justify-content:space-between; }
+  .ef-active-filter-summary__heading h2 { margin:0; }
+  .ef-active-filter-summary__items { display:flex; flex-wrap:wrap; gap:var(--ef-primitive-spacing-2,.5rem); margin:0; padding:0; list-style:none; }
+  .ef-active-filter-summary__items li { display:flex; gap:var(--ef-primitive-spacing-1,.25rem); align-items:center; }
+
+  .ef-feed-item { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--ef-primitive-spacing-2,.5rem) var(--ef-primitive-spacing-4,1rem); align-items:start; }
+  .ef-feed-item__primary h2,.ef-feed-item__primary p,.ef-feed-item__summary { margin:0; }
+  .ef-feed-item__meta { display:flex; flex-wrap:wrap; gap:var(--ef-primitive-spacing-2,.5rem); align-items:center; justify-content:end; }
+  .ef-feed-item__summary { grid-column:1 / -1; }
+  .ef-feed-item__actions { grid-column:1 / -1; }
+
+  .ef-lane-board { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(min(18rem,85vw),1fr); gap:var(--ef-primitive-spacing-4,1rem); overflow-x:auto; overscroll-behavior-inline:contain; padding-block-end:var(--ef-primitive-spacing-2,.5rem); }
+  .ef-lane-board__lane { display:grid; align-content:start; gap:var(--ef-primitive-spacing-3,.75rem); min-inline-size:0; }
+  .ef-lane-board__header { display:flex; gap:var(--ef-primitive-spacing-2,.5rem); justify-content:space-between; align-items:baseline; }
+  .ef-lane-board__header h2 { margin:0; }
+  .ef-lane-board__items { display:grid; gap:var(--ef-primitive-spacing-2,.5rem); margin:0; padding:0; list-style:none; }
+
+  .ef-spatial-canvas { display:grid; gap:var(--ef-primitive-spacing-3,.75rem); min-inline-size:0; }
+  .ef-spatial-canvas__header { display:flex; flex-wrap:wrap; gap:var(--ef-primitive-spacing-3,.75rem); justify-content:space-between; align-items:start; }
+  .ef-spatial-canvas__header h2,.ef-spatial-canvas__orientation { margin:0; }
+  .ef-spatial-canvas__viewport { overflow:auto; max-inline-size:100%; min-block-size:18rem; border:1px solid currentColor; }
+  .ef-spatial-canvas__surface { min-inline-size:48rem; min-block-size:28rem; display:grid; grid-template-columns:repeat(3,minmax(12rem,1fr)); gap:var(--ef-primitive-spacing-6,2rem); padding:var(--ef-primitive-spacing-5,1.5rem); align-content:start; }
+  .ef-spatial-canvas__index nav { display:flex; flex-wrap:wrap; gap:var(--ef-primitive-spacing-3,.75rem); padding-block-start:var(--ef-primitive-spacing-2,.5rem); }
+
+  @media (max-width:30rem) {
+    .ef-feed-item { grid-template-columns:minmax(0,1fr); }
+    .ef-feed-item__meta { justify-content:start; }
+  }
+
+  .ef-scope-trail ol { display:flex; flex-wrap:wrap; gap:var(--ef-primitive-spacing-1,.25rem) var(--ef-primitive-spacing-2,.5rem); margin:0; padding:0; list-style:none; }
+  .ef-scope-trail li + li::before { content:"/"; margin-inline-end:var(--ef-primitive-spacing-2,.5rem); }
+
+  .ef-evidence-relationship { display:grid; gap:var(--ef-primitive-spacing-3,.75rem); }
+  .ef-evidence-relationship header > :last-child,.ef-evidence-relationship__body > :last-child { margin-block-end:0; }
+  .ef-evidence-relationship__body { display:grid; gap:var(--ef-primitive-spacing-2,.5rem); }
+
+  .ef-freshness { display:flex; flex-wrap:wrap; gap:var(--ef-primitive-spacing-1,.25rem) var(--ef-primitive-spacing-2,.5rem); align-items:baseline; }
+  .ef-freshness__label { font-weight:600; }
+
+  .ef-handoff-summary { display:grid; gap:var(--ef-primitive-spacing-4,1rem); }
+  .ef-handoff-summary dl { display:grid; gap:var(--ef-primitive-spacing-3,.75rem); margin:0; }
+  .ef-handoff-summary dl > div { display:grid; grid-template-columns:minmax(9rem,12rem) minmax(0,1fr); gap:var(--ef-primitive-spacing-3,.75rem); }
+  .ef-handoff-summary dt { font-weight:600; }
+  .ef-handoff-summary dd { margin:0; }
+  @media (max-width:30rem) { .ef-handoff-summary dl > div { grid-template-columns:minmax(0,1fr); gap:var(--ef-primitive-spacing-1,.25rem); } }
+
+
+
+  /* Visual Engineering verification and low-context content ------------- */
+  .ef-identifier,
+  .ef-critical-value {
+    font-family: var(--ef-primitive-font-family-mono, ui-monospace, "SFMono-Regular", Consolas, monospace);
+    font-variant-numeric: tabular-nums slashed-zero;
+    font-feature-settings: "tnum" 1, "zero" 1;
+    letter-spacing: 0.015em;
+    overflow-wrap: anywhere;
+  }
+  .ef-identifier { font-size: 0.9375em; }
+  .ef-critical-value { font-weight: 750; }
+  .ef-critical-value[data-ef-verify="true"] {
+    display: inline-block;
+    padding-inline: 0.25em;
+    border-block-end: 0.15em double currentColor;
+  }
+
+  .ef-verification-frame {
+    display: grid;
+    gap: var(--ef-primitive-spacing-4, 1rem);
+    border: 1px solid var(--ef-color-border-functional, #3a403c);
+    background: var(--ef-color-surface-primary, #f2efe7);
+  }
+  .ef-verification-frame__recognize,
+  .ef-verification-frame__verify,
+  .ef-verification-frame__act {
+    padding: var(--ef-primitive-spacing-4, 1rem);
+  }
+  .ef-verification-frame__recognize {
+    display: grid;
+    gap: var(--ef-primitive-spacing-2, 0.5rem);
+    border-block-end: 1px solid var(--ef-color-border-subtle, #e3e0d7);
+  }
+  .ef-verification-frame__recognize > :is(h2, h3, p),
+  .ef-verification-frame__verify > :first-child,
+  .ef-verification-frame__act > :first-child { margin-block-start: 0; }
+  .ef-verification-frame__recognize > :last-child,
+  .ef-verification-frame__verify > :last-child,
+  .ef-verification-frame__act > :last-child { margin-block-end: 0; }
+  .ef-verification-frame__verify {
+    display: grid;
+    gap: var(--ef-primitive-spacing-3, 0.75rem);
+  }
+  .ef-verification-frame__facts {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
+    gap: var(--ef-primitive-spacing-3, 0.75rem);
+    margin: 0;
+  }
+  .ef-verification-frame__facts > div {
+    min-inline-size: 0;
+    padding-block: var(--ef-primitive-spacing-2, 0.5rem);
+    border-block-end: 1px solid var(--ef-color-border-subtle, #e3e0d7);
+  }
+  .ef-verification-frame__facts dt {
+    color: var(--ef-color-text-secondary, #686d68);
+    font-size: 0.75rem;
+    font-weight: 700;
+  }
+  .ef-verification-frame__facts dd { margin: 0.25rem 0 0; }
+  .ef-verification-frame__act {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--ef-primitive-spacing-2, 0.5rem);
+    align-items: center;
+    border-block-start: 1px solid var(--ef-color-border-subtle, #e3e0d7);
+  }
+  .ef-verification-frame__act > p { flex: 1 1 18rem; }
+  @media (max-width: 30rem) {
+    .ef-verification-frame__act { align-items: stretch; }
+    .ef-verification-frame__act > :is(button, .ef-button) { inline-size: 100%; }
+  }
+  @media (forced-colors: active) {
+    .ef-critical-value[data-ef-verify="true"],
+    .ef-verification-frame { border-color: CanvasText; }
+  }
+
+  .ef-relationship-index,.ef-path-summary { display:grid; gap:var(--ef-primitive-spacing-3,.75rem); }
+  .ef-relationship-index header > :last-child,.ef-path-summary header > :last-child { margin-block-end:0; }
+  .ef-relationship-index__list { display:grid; gap:var(--ef-primitive-spacing-2,.5rem); margin:0; }
+  .ef-relationship-index__list > div { display:grid; grid-template-columns:minmax(7rem,10rem) minmax(0,1fr); gap:var(--ef-primitive-spacing-3,.75rem); }
+  .ef-relationship-index__list dt { font-weight:600; }
+  .ef-relationship-index__list dd { margin:0; }
+
+  .ef-path-summary__steps { display:grid; gap:var(--ef-primitive-spacing-2,.5rem); margin:0; padding-inline-start:1.5rem; }
+  .ef-path-summary__steps li { padding-inline-start:var(--ef-primitive-spacing-1,.25rem); }
+  .ef-path-summary__steps span { display:block; }
+
+  .ef-hierarchy-tree ul { list-style:none; margin:0; padding-inline-start:var(--ef-primitive-spacing-4,1rem); }
+  .ef-hierarchy-tree > ul { padding-inline-start:0; }
+  .ef-hierarchy-tree li { margin-block:var(--ef-primitive-spacing-1,.25rem); }
+  .ef-hierarchy-tree summary,.ef-hierarchy-tree a { min-block-size:2.75rem; display:flex; align-items:center; }
+  .ef-hierarchy-tree [aria-current="page"] { font-weight:700; }
+
+  @media (max-width:30rem) {
+    .ef-relationship-index__list > div { grid-template-columns:minmax(0,1fr); gap:var(--ef-primitive-spacing-1,.25rem); }
+    .ef-hierarchy-tree ul { padding-inline-start:var(--ef-primitive-spacing-2,.5rem); }
+  }
+
+  /* Composition stress hardening */
+  .ef-navigation-shell__compact > summary { min-block-size:2.75rem; display:flex; align-items:center; cursor:pointer; }
+  .ef-lane-board { max-inline-size:100%; }
+  .ef-lane-board:focus-visible,.ef-comparison-grid:focus-visible,.ef-spatial-canvas__viewport:focus-visible { outline:2px solid currentColor; outline-offset:2px; }
+  .ef-search,.ef-search__control,.ef-active-filter-summary,.ef-active-filter-summary__items,.ef-active-filter-summary__items li { min-inline-size:0; }
+  .ef-search input { min-inline-size:0; max-inline-size:100%; }
+  @media (max-width:30rem) {
+    .ef-search__control { display:grid; grid-template-columns:minmax(0,1fr); }
+    .ef-active-filter-summary__items li { flex-wrap:wrap; }
+  }
+
+  /* Text and target-size resilience from conformance evidence */
+  .ef-overflow-commands > summary {
+    min-block-size:2.75rem;
+    display:flex;
+    align-items:center;
+    cursor:pointer;
+  }
+  .ef-verification-frame,
+  .ef-verification-frame__recognize,
+  .ef-verification-frame__verify,
+  .ef-verification-frame__act,
+  .ef-verification-frame__facts,
+  .ef-verification-frame__facts > div {
+    min-inline-size:0;
+    max-inline-size:100%;
+  }
+  .ef-verification-frame :is(h2,h3,p,dt,dd,button) { overflow-wrap:anywhere; }
+  @media (max-width:30rem) {
+    .ef-verification-frame__act {
+      display:grid;
+      grid-template-columns:minmax(0,1fr);
+    }
+    .ef-verification-frame__act > * {
+      min-inline-size:0;
+      max-inline-size:100%;
+      inline-size:100%;
+    }
+    .ef-verification-frame__act > button {
+      white-space:normal;
+      block-size:auto;
+      min-block-size:2.75rem;
+    }
+  }
+
+
+
+  /* Visual Engineering comparison, overview, and state survivability ----- */
+  .ef-comparison-pairs {
+    display: grid;
+    gap: var(--ef-primitive-spacing-4, 1rem);
+  }
+  .ef-comparison-pairs__item {
+    display: grid;
+    grid-template-columns: minmax(8rem, 0.8fr) repeat(2, minmax(0, 1fr));
+    gap: var(--ef-primitive-spacing-2, 0.5rem) var(--ef-primitive-spacing-4, 1rem);
+    padding-block: var(--ef-primitive-spacing-3, 0.75rem);
+    border-block-end: 1px solid var(--ef-color-border-subtle, #e3e0d7);
+  }
+  .ef-comparison-pairs__label { font-weight: 700; }
+  .ef-comparison-pairs__value { min-inline-size: 0; overflow-wrap: anywhere; }
+  .ef-comparison-pairs__value::before {
+    display: block;
+    margin-block-end: 0.2rem;
+    color: var(--ef-color-text-secondary, #686d68);
+    font-size: 0.75rem;
+    font-weight: 700;
+  }
+  .ef-comparison-pairs__value[data-side="before"]::before { content: attr(data-label); }
+  .ef-comparison-pairs__value[data-side="after"]::before { content: attr(data-label); }
+
+  .ef-overview-disclosure {
+    display: grid;
+    gap: var(--ef-primitive-spacing-3, 0.75rem);
+  }
+  .ef-overview-disclosure__overview {
+    display: grid;
+    gap: var(--ef-primitive-spacing-2, 0.5rem);
+    padding: var(--ef-primitive-spacing-3, 0.75rem);
+    border-inline-start: 0.25rem solid currentColor;
+  }
+  .ef-overview-disclosure__overview > :first-child,
+  .ef-overview-disclosure__overview > :last-child { margin-block: 0; }
+
+  .ef-state-survivability {
+    display: grid;
+    gap: var(--ef-primitive-spacing-3, 0.75rem);
+  }
+  .ef-state-survivability__state {
+    display: grid;
+    grid-template-columns: minmax(8rem, auto) minmax(0, 1fr);
+    gap: var(--ef-primitive-spacing-3, 0.75rem);
+    align-items: start;
+    padding-block: var(--ef-primitive-spacing-2, 0.5rem);
+    border-block-end: 1px solid var(--ef-color-border-subtle, #e3e0d7);
+  }
+  .ef-state-survivability__state p { margin: 0; }
+
+  @media (max-width: 30rem) {
+    .ef-comparison-pairs__item,
+    .ef-state-survivability__state {
+      grid-template-columns: minmax(0, 1fr);
+    }
+  }
+
+
+
+  /* Visual Engineering attention-path composition ------------------------ */
+  .ef-attention-path {
+    display: grid;
+    gap: var(--ef-primitive-spacing-4, 1rem);
+  }
+  .ef-attention-path__primary {
+    display: grid;
+    gap: var(--ef-primitive-spacing-2, 0.5rem);
+    padding: var(--ef-primitive-spacing-4, 1rem);
+    border: 2px solid var(--ef-color-border-functional, #3a403c);
+    background: var(--ef-color-surface-primary, #f2efe7);
+  }
+  .ef-attention-path__primary > :first-child,
+  .ef-attention-path__primary > :last-child { margin-block: 0; }
+  .ef-attention-path__support {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
+    gap: var(--ef-primitive-spacing-4, 1rem);
+  }
+  .ef-attention-path__support > * {
+    min-inline-size: 0;
+    padding: var(--ef-primitive-spacing-3, 0.75rem);
+    border-block-start: 1px solid var(--ef-color-border-subtle, #e3e0d7);
+  }
+  .ef-attention-path [data-attention-step] {
+    position: relative;
+  }
+  .ef-attention-path [data-attention-step]::before {
+    content: "Priority " attr(data-attention-step);
+    display: block;
+    margin-block-end: 0.35rem;
+    color: var(--ef-color-text-secondary, #686d68);
+    font-family: var(--ef-primitive-font-family-mono, ui-monospace, monospace);
+    font-size: 0.6875rem;
+    font-weight: 700;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+  }
+  @media (forced-colors: active) {
+    .ef-attention-path__primary { border-color: CanvasText; background: Canvas; color: CanvasText; }
+    .ef-attention-path__support > * { border-color: CanvasText; }
+  }
+
+  /* Attention and spatial resilience from conformance evidence */
+  .ef-spatial-canvas__index > summary {
+    min-block-size:2.75rem;
+    display:flex;
+    align-items:center;
+    cursor:pointer;
+  }
+  .ef-attention-path,
+  .ef-attention-path > *,
+  .ef-attention-path__primary,
+  .ef-attention-path__support,
+  .ef-attention-path__support > * {
+    min-inline-size:0;
+    max-inline-size:100%;
+  }
+  .ef-attention-path :is(h2,h3,p,button,.ef-status-lozenge) { overflow-wrap:anywhere; }
+  @media (max-width:30rem) {
+    .ef-attention-path__primary .ef-cluster {
+      display:grid;
+      grid-template-columns:minmax(0,1fr);
+    }
+    .ef-attention-path__primary .ef-cluster > button {
+      inline-size:100%;
+      min-inline-size:0;
+      white-space:normal;
+      block-size:auto;
+      min-block-size:2.75rem;
+    }
+  }
+
+  /* Attention-path extreme text-spacing resilience */
+  .ef-attention-path .ef-status-lozenge {
+    min-inline-size:0;
+    max-inline-size:100%;
+  }
+  @media (max-width:30rem) {
+    .ef-attention-path .ef-status-lozenge {
+      white-space:normal;
+      inline-size:fit-content;
+    }
+  }
+
+
+
+  /* Visual Engineering emphasis-budget composition ----------------------- */
+  .ef-emphasis-budget {
+    display: grid;
+    gap: var(--ef-primitive-spacing-4, 1rem);
+  }
+  .ef-emphasis-budget [data-emphasis] {
+    min-inline-size: 0;
+    overflow-wrap: anywhere;
+  }
+  .ef-emphasis-budget [data-emphasis="primary"] {
+    padding: var(--ef-primitive-spacing-4, 1rem);
+    border: 2px solid var(--ef-color-border-functional, #3a403c);
+    background: var(--ef-color-surface-primary, #f2efe7);
+  }
+  .ef-emphasis-budget [data-emphasis="secondary"] {
+    padding: var(--ef-primitive-spacing-3, 0.75rem);
+    border-inline-start: 0.2rem solid var(--ef-color-border-functional, #3a403c);
+  }
+  .ef-emphasis-budget [data-emphasis="supporting"] {
+    padding-block: var(--ef-primitive-spacing-2, 0.5rem);
+    border-block-start: 1px solid var(--ef-color-border-subtle, #e3e0d7);
+  }
+  .ef-emphasis-budget [data-emphasis]::before {
+    display: block;
+    margin-block-end: 0.3rem;
+    color: var(--ef-color-text-secondary, #686d68);
+    font-family: var(--ef-primitive-font-family-mono, ui-monospace, monospace);
+    font-size: 0.6875rem;
+    font-weight: 700;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+  }
+  .ef-emphasis-budget [data-emphasis="primary"]::before { content: "Primary"; }
+  .ef-emphasis-budget [data-emphasis="secondary"]::before { content: "Secondary"; }
+  .ef-emphasis-budget [data-emphasis="supporting"]::before { content: "Supporting"; }
+  .ef-emphasis-budget__support {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
+    gap: var(--ef-primitive-spacing-4, 1rem);
+  }
+  @media (forced-colors: active) {
+    .ef-emphasis-budget [data-emphasis="primary"],
+    .ef-emphasis-budget [data-emphasis="secondary"],
+    .ef-emphasis-budget [data-emphasis="supporting"] {
+      border-color: CanvasText;
+      background: Canvas;
+      color: CanvasText;
+    }
+  }
+
+  /* Emphasis-budget extreme text resilience */
+  .ef-emphasis-budget,
+  .ef-emphasis-budget > *,
+  .ef-emphasis-budget__support,
+  .ef-emphasis-budget__support > * {
+    min-inline-size:0;
+    max-inline-size:100%;
+  }
+  .ef-emphasis-budget .ef-status-lozenge {
+    min-inline-size:0;
+    max-inline-size:100%;
+  }
+  @media (max-width:30rem) {
+    .ef-emphasis-budget .ef-status-lozenge {
+      white-space:normal;
+      inline-size:fit-content;
+    }
+    .ef-emphasis-budget [data-emphasis="primary"] > button {
+      min-inline-size:0;
+      max-inline-size:100%;
+      white-space:normal;
+      block-size:auto;
+      min-block-size:2.75rem;
+    }
+  }
+
 }
 
 @layer echelon.assessment {