@echelon-foundry/design-system 0.6.1 → 0.7.0

package/dist/assessment.css

@@ -208,7 +208,10 @@
 
   /* Choice cards -------------------------------------------------------- */
   .ef-choice-group {
-    display: grid;
+    /* A column flex layout lets wrapped cards determine their own height.
+       WebKit can retain stale grid row heights on fieldset viewport reflow. */
+    display: flex;
+    flex-direction: column;
     gap: var(--ef-primitive-spacing-2, 0.5rem);
   }
 
@@ -708,6 +711,7 @@
 
   .ef-semantic-differential__endpoints {
     display: flex;
+    flex-wrap: wrap;
     justify-content: space-between;
     gap: 1rem;
     margin-block-end: 0.4rem;
@@ -923,6 +927,9 @@
   }
 
   .ef-best-worst__row + .ef-best-worst__row { border-block-start: 0; }
+  /* A long unbroken option (a product code, a compound word) wraps inside
+     its track instead of scrolling the page sideways (ULI-L05). */
+  .ef-best-worst__row > :first-child { min-inline-size: 0; overflow-wrap: anywhere; }
   .ef-best-worst__row label { display: grid; place-items: center; min-block-size: 2.75rem; }
   .ef-best-worst__row input { inline-size: 1.25rem; block-size: 1.25rem; accent-color: var(--ef-color-accent-primary, #905831); }
 
@@ -1021,6 +1028,10 @@
       padding-inline: 0.75rem;
     }
 
+    /* Desktop labels align at the top of their own row. In the horizontal
+       mobile layout that override must not defeat marker/text centering. */
+    .ef-ordinal-option__label { align-self: center; }
+
     .ef-ordinal-option + .ef-ordinal-option {
       border-inline-start: 0;
       border-block-start: 1px solid var(--ef-color-border-subtle, #e3e0d7);
@@ -1033,7 +1044,7 @@
     }
 
     .ef-rule-clause { grid-template-columns: 1fr; }
-    .ef-obligation { grid-template-columns: 1fr; }
+    .ef-obligation { grid-template-columns: minmax(0, 1fr); }
     .ef-obligation__status { justify-self: start; }
 
     .ef-ranking__item {

package/dist/build-metrics.json

@@ -231,6 +231,7 @@
     "patterns/file-upload.html",
     "patterns/flyout.html",
     "patterns/focus-stage.html",
+    "patterns/form-row.html",
     "patterns/frame.html",
     "patterns/freshness.html",
     "patterns/grid.html",
@@ -339,13 +340,13 @@
     "tokens.css"
   ],
   "bytes": {
-    "all.css": 317501,
-    "assessment.css": 35692,
+    "all.css": 326931,
+    "assessment.css": 36343,
     "brands/echelon.css": 3621,
     "brands/example-harbor.css": 3637,
     "brands/index.json": 335,
-    "components.css": 204251,
-    "foundations.css": 11558,
+    "components.css": 209407,
+    "foundations.css": 14098,
     "icons/add.svg": 216,
     "icons/agent.svg": 354,
     "icons/archive.svg": 248,
@@ -507,7 +508,7 @@
     "icons/warning.svg": 324,
     "icons/wifi-off.svg": 269,
     "icons/workflow.svg": 345,
-    "marketing.css": 45073,
+    "marketing.css": 46156,
     "patterns/active-filter-summary.html": 532,
     "patterns/alert.html": 384,
     "patterns/allocation.html": 1033,
@@ -570,6 +571,7 @@
     "patterns/file-upload.html": 867,
     "patterns/flyout.html": 2488,
     "patterns/focus-stage.html": 377,
+    "patterns/form-row.html": 848,
     "patterns/frame.html": 365,
     "patterns/freshness.html": 187,
     "patterns/grid.html": 305,

package/dist/components.css

@@ -26,9 +26,44 @@
     min-inline-size: 0;
     max-inline-size: 100%;
     grid-template-columns: minmax(0, 1fr);
+    /* A stretched field (a grid row taller than it) keeps its label and
+       control at the top instead of distributing the extra space between
+       rows, which would push the control below its peers (ULI-L01). */
+    align-content: start;
     gap: var(--ef-primitive-spacing-2, 0.5rem);
   }
 
+  /*
+   * Form row (ULI-L01, L03, L13). Peer fields share one set of rows: label,
+   * description, control and validation message. Each field spans the four
+   * rows through subgrid and places its parts explicitly, so every control
+   * in a visual row starts at the same top edge however long the labels,
+   * descriptions or messages of its neighbours are. Fields wrap to new rows
+   * by available width. Without subgrid support each field keeps its own
+   * grid (the previous behavior).
+   */
+  .ef-form-row {
+    --ef-form-row-min: 14rem;
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--ef-form-row-min)), 1fr));
+    column-gap: var(--ef-form-row-gap, var(--ef-primitive-spacing-4, 1rem));
+    row-gap: 0;
+    align-items: start;
+    min-inline-size: 0;
+  }
+
+  .ef-form-row > .ef-field {
+    grid-row: span 4;
+    grid-template-rows: subgrid;
+    row-gap: 0;
+    margin-block-end: var(--ef-form-row-gap, var(--ef-primitive-spacing-4, 1rem));
+  }
+
+  .ef-form-row > .ef-field > .ef-field__label { grid-row: 1; }
+  .ef-form-row > .ef-field > .ef-field__description { grid-row: 2; margin-block-start: var(--ef-primitive-spacing-2, 0.5rem); }
+  .ef-form-row > .ef-field > :not(.ef-field__label, .ef-field__description, .ef-validation-message) { grid-row: 3; margin-block-start: var(--ef-primitive-spacing-2, 0.5rem); }
+  .ef-form-row > .ef-field > .ef-validation-message { grid-row: 4; margin-block-start: var(--ef-primitive-spacing-2, 0.5rem); }
+
   .ef-field > :is(input[type="date"], input[type="time"], input[type="datetime-local"]) {
     min-inline-size: 0;
     inline-size: 100%;
@@ -67,6 +102,10 @@
     --ef-motion-perceptual-emphasis-duration: var(--ef-primitive-motion-duration-standard, 180ms);
     --ef-motion-perceptual-easing: var(--ef-primitive-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
 
+    /* Brief surface fade: gentle ignition, fast middle, gentle settling.
+       Monotonic and symmetric: no opacity overshoot or delayed activation. */
+    --ef-motion-fade-easing: cubic-bezier(0.65, 0, 0.35, 1);
+
     /* Constant-velocity cadence: repeated activity is parameterized by a
        named period and constant velocity, never by spring settling (MOT-016). */
     --ef-motion-cadence-period: 1600ms;
@@ -96,7 +135,7 @@
     --ef-motion-gravity-duration: 255ms;
     --ef-motion-state-duration: 154ms;
     --ef-motion-press-duration: 107ms;
-    --ef-motion-exit-duration: 146ms;
+    --ef-motion-exit-duration: 214ms;
     --ef-motion-spring-easing: linear(0, 0.42 24%, 0.82 48%, 1.055 70%, 0.988 88%, 1);
     --ef-motion-damped-easing: cubic-bezier(0.2, 0.8, 0.2, 1);
   }
@@ -170,11 +209,8 @@
         calc(var(--ef-motion-inertia-duration) * 0.5),
         160ms
       );
-      --ef-motion-exit-duration: clamp(
-        80ms,
-        calc(var(--ef-motion-inertia-duration) * 0.68),
-        220ms
-      );
+      /* Compatibility token: reciprocal motion has one response time. */
+      --ef-motion-exit-duration: var(--ef-motion-inertia-duration);
     }
   }
 
@@ -358,7 +394,9 @@
 
   /* Select -------------------------------------------------------------- */
   .ef-select-field {
+    min-inline-size: 0;
     display: grid;
+    grid-template-columns: minmax(0, 1fr);
     gap: var(--ef-primitive-spacing-2, 0.5rem);
     max-inline-size: 100%;
   }
@@ -366,12 +404,19 @@
   .ef-select {
     --ef-motion-distance: 0.35;
     position: relative;
+    min-inline-size: 0;
     display: grid;
+    grid-template-columns: minmax(0, 1fr);
     align-items: center;
     max-inline-size: 100%;
   }
 
   .ef-select__input {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    min-inline-size: 0;
+    max-inline-size: 100%;
     inline-size: 100%;
     min-block-size: 2.75rem;
     padding-inline-end: 2.75rem;
@@ -590,6 +635,10 @@
 
   .ef-disclosure > summary {
     min-inline-size: 0;
+    /* The open marker rotates 45deg; its rotated (empty) box corners would
+       otherwise add a few pixels of page overflow at narrow widths (ULI-L05).
+       Clipping does not affect the summary's own focus ring. */
+    overflow-x: clip;
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -643,35 +692,19 @@
     overflow: auto;
     overscroll-behavior: contain;
     opacity: 0;
-    translate: 0 -0.35rem;
-    scale: 0.985;
-    transition:
-      opacity var(--ef-motion-perceptual-duration) var(--ef-motion-perceptual-easing),
-      translate var(--ef-motion-exit-duration) var(--ef-motion-damped-easing),
-      scale var(--ef-motion-exit-duration) var(--ef-motion-damped-easing),
-      display var(--ef-motion-exit-duration) allow-discrete,
-      overlay var(--ef-motion-exit-duration) allow-discrete;
+    /* Fade at the resting geometry. Never translate or scale a visible exit. */
+    transition: opacity var(--ef-motion-perceptual-duration) var(--ef-motion-fade-easing);
   }
 
   .ef-popover:popover-open,
   .ef-menu:popover-open {
     opacity: 1;
-    translate: 0 0;
-    scale: 1;
-    transition-duration:
-      var(--ef-motion-perceptual-duration),
-      var(--ef-motion-inertia-duration),
-      var(--ef-motion-inertia-duration),
-      var(--ef-motion-inertia-duration),
-      var(--ef-motion-inertia-duration);
   }
 
   @starting-style {
     .ef-popover:popover-open,
     .ef-menu:popover-open {
       opacity: 0;
-      translate: 0 -0.35rem;
-      scale: 0.985;
     }
   }
 
@@ -723,9 +756,9 @@
    * the hint stays inside the viewport; otherwise the browser's centered
    * top-layer popover placement remains readable and in view.
    *
-   * Motion: light perceived weight. Opacity is perceptual interpolation and
-   * a tiny origin-related displacement is light inertial; exit uses the
-   * shorter derived exit duration. Reduced motion removes the displacement.
+   * Motion: reciprocal perceptual fades at unchanged resting geometry. The
+   * top layer is removed only after opacity reaches zero where supported.
+   * Reduced motion reaches the endpoint immediately.
    */
   .ef-tooltip {
     --ef-motion-distance: 0.2;
@@ -744,7 +777,6 @@
   }
 
   .ef-tooltip__surface {
-    --ef-tooltip-offset: 0.25rem;
     inline-size: max-content;
     max-inline-size: min(20rem, calc(100vw - 2rem));
     margin: 0;
@@ -756,30 +788,30 @@
     line-height: 1.4;
     overflow-wrap: anywhere;
     opacity: 0;
-    translate: 0 var(--ef-tooltip-offset);
-    transition:
-      opacity var(--ef-motion-perceptual-duration) var(--ef-motion-perceptual-easing),
-      translate var(--ef-motion-exit-duration) var(--ef-motion-damped-easing),
-      display var(--ef-motion-exit-duration) allow-discrete,
-      overlay var(--ef-motion-exit-duration) allow-discrete;
+    transition: opacity var(--ef-motion-perceptual-duration) var(--ef-motion-fade-easing);
   }
 
   .ef-tooltip__surface:popover-open {
     opacity: 1;
-    translate: 0 0;
-    /* Entry settles over the light inertial duration; exit (above) uses the
-       shorter derived exit duration. Opacity stays perceptual both ways. */
-    transition-duration:
-      var(--ef-motion-perceptual-duration),
-      var(--ef-motion-inertia-duration),
-      var(--ef-motion-inertia-duration),
-      var(--ef-motion-inertia-duration);
   }
 
   @starting-style {
     .ef-tooltip__surface:popover-open {
       opacity: 0;
-      translate: 0 var(--ef-tooltip-offset);
+    }
+  }
+
+  /* Keep the top-layer placement and implicit anchor through the entire fade.
+     Display retention alone can expose a relocated, translucent surface in
+     engines without overlay retention. Those engines dismiss immediately. */
+  @supports (overlay: auto) {
+    .ef-popover,
+    .ef-menu,
+    .ef-tooltip__surface {
+      transition:
+        opacity var(--ef-motion-perceptual-duration) var(--ef-motion-fade-easing),
+        display var(--ef-motion-perceptual-duration) allow-discrete,
+        overlay var(--ef-motion-perceptual-duration) allow-discrete;
     }
   }
 
@@ -802,9 +834,8 @@
   }
 
   @media (prefers-reduced-motion: reduce) {
-    .ef-tooltip__surface,
-    .ef-tooltip__surface:popover-open {
-      translate: 0 0;
+    .ef-tooltip__surface {
+      transition-duration: 0.01ms;
     }
   }
 
@@ -906,8 +937,8 @@
 
   /* Dialog and flyout ---------------------------------------------------- */
   :where(.ef-dialog, .ef-flyout) {
-    --ef-overlay-motion-duration: var(--ef-motion-exit-duration);
-    --ef-overlay-spatial-easing: var(--ef-motion-damped-easing);
+    --ef-overlay-motion-duration: var(--ef-motion-inertia-duration);
+    --ef-overlay-spatial-easing: var(--ef-motion-spring-easing);
     padding: 0;
     border: 1px solid var(--ef-color-border-functional, #3a403c);
     background: var(--ef-color-surface-primary, #f2efe7);
@@ -926,9 +957,7 @@
     /* Dimming is non-spatial: perceptual interpolation, without mass. */
     transition:
       background var(--ef-motion-perceptual-duration) var(--ef-motion-perceptual-easing),
-      backdrop-filter var(--ef-motion-perceptual-duration) var(--ef-motion-perceptual-easing),
-      display var(--ef-overlay-motion-duration) allow-discrete,
-      overlay var(--ef-overlay-motion-duration) allow-discrete;
+      backdrop-filter var(--ef-motion-perceptual-duration) var(--ef-motion-perceptual-easing);
   }
 
   :where(.ef-dialog, .ef-flyout)[open]::backdrop {
@@ -945,9 +974,7 @@
     scale: 0.985;
     transition:
       translate var(--ef-overlay-motion-duration) var(--ef-overlay-spatial-easing),
-      scale var(--ef-overlay-motion-duration) var(--ef-overlay-spatial-easing),
-      display var(--ef-overlay-motion-duration) allow-discrete,
-      overlay var(--ef-overlay-motion-duration) allow-discrete;
+      scale var(--ef-overlay-motion-duration) var(--ef-overlay-spatial-easing);
   }
 
   .ef-dialog[open] {
@@ -980,9 +1007,34 @@
     box-shadow: 0 0 3rem rgb(0 0 0 / 0.24);
     translate: var(--ef-flyout-closed-x) 0;
     transition:
-      translate var(--ef-overlay-motion-duration) var(--ef-overlay-spatial-easing),
-      display var(--ef-overlay-motion-duration) allow-discrete,
-      overlay var(--ef-overlay-motion-duration) allow-discrete;
+      translate var(--ef-overlay-motion-duration) var(--ef-overlay-spatial-easing);
+  }
+
+  /* Retain display only when overlay can retain viewport/top-layer geometry.
+     Otherwise a closed dialog can animate inside a containing ancestor. */
+  @supports (overlay: auto) {
+    :where(.ef-dialog, .ef-flyout)::backdrop {
+      transition:
+        background var(--ef-motion-perceptual-duration) var(--ef-motion-perceptual-easing),
+        backdrop-filter var(--ef-motion-perceptual-duration) var(--ef-motion-perceptual-easing),
+        display var(--ef-overlay-motion-duration) allow-discrete,
+        overlay var(--ef-overlay-motion-duration) allow-discrete;
+    }
+
+    .ef-dialog {
+      transition:
+        translate var(--ef-overlay-motion-duration) var(--ef-overlay-spatial-easing),
+        scale var(--ef-overlay-motion-duration) var(--ef-overlay-spatial-easing),
+        display var(--ef-overlay-motion-duration) allow-discrete,
+        overlay var(--ef-overlay-motion-duration) allow-discrete;
+    }
+
+    .ef-flyout {
+      transition:
+        translate var(--ef-overlay-motion-duration) var(--ef-overlay-spatial-easing),
+        display var(--ef-overlay-motion-duration) allow-discrete,
+        overlay var(--ef-overlay-motion-duration) allow-discrete;
+    }
   }
 
   .ef-flyout[data-ef-side="left"] {
@@ -1004,9 +1056,11 @@
   .ef-flyout[open] { translate: 0 0; }
 
   .ef-flyout__surface {
+    min-inline-size: 0;
     min-block-size: 0;
     block-size: 100%;
     display: grid;
+    grid-template-columns: minmax(0, 1fr);
     grid-template-rows: auto minmax(0, 1fr) auto;
   }
 
@@ -1036,6 +1090,7 @@
   }
 
   .ef-flyout__body {
+    min-inline-size: 0;
     min-block-size: 0;
     overflow: auto;
     overscroll-behavior: contain;
@@ -1129,7 +1184,9 @@
     font-family: var(--ef-primitive-font-family-mono, ui-monospace, monospace);
     font-size: 0.6875rem;
     line-height: 1.2;
-    white-space: nowrap;
+    /* Wraps inside its container rather than widening it (ULI-L05). */
+    max-inline-size: 100%;
+    overflow-wrap: anywhere;
   }
 
   .ef-status-lozenge::before {
@@ -1187,7 +1244,7 @@
 
   .ef-collection-toolbar__controls label,
   .ef-collection-toolbar__filters {
-    min-inline-size: 9rem;
+    min-inline-size: min(9rem, 100%);
     font-size: 0.75rem;
     font-weight: 650;
   }
@@ -1481,8 +1538,10 @@
   /* Metrics and dashboards --------------------------------------------- */
   .ef-metric-card {
     display: grid;
+    grid-template-columns: minmax(0, 1fr);
     gap: 0.5rem;
     min-inline-size: 0;
+    overflow-wrap: anywhere;
     padding: 1.25rem;
     border: 1px solid var(--ef-color-border-functional, #3a403c);
     background: var(--ef-color-surface-primary, #f2efe7);
@@ -1825,6 +1884,8 @@
   }
 
   .ef-wizard__steps li {
+    min-inline-size: 0;
+    overflow-wrap: anywhere;
     display: flex;
     gap: 0.5rem;
     align-items: center;
@@ -1851,6 +1912,7 @@
   .ef-readiness-checklist > header h3 { margin: 0.5rem 0 0; }
   .ef-readiness-checklist__items { margin: 0; padding: 0; list-style: none; }
   .ef-readiness-checklist__items li {
+    overflow-wrap: anywhere;
     display: grid;
     grid-template-columns: 2rem minmax(0, 1fr) auto;
     gap: 0.75rem;
@@ -1918,6 +1980,7 @@
   .ef-command-palette__group button {
     inline-size: 100%;
     display: flex;
+    flex-wrap: wrap;
     justify-content: space-between;
     gap: 1rem;
     text-align: start;
@@ -2034,13 +2097,38 @@
   }
 
   .ef-record-header__main nav { font-size: 0.75rem; }
+  /*
+   * The status sits beside the record title and is centred on the title's
+   * row, not on the type label and title together (ULI-L01, L07). The
+   * identity block spans two subgrid rows (type, title); the status occupies
+   * the title row. Narrow containers stack the status below.
+   */
+  .ef-record-header__main { container-type: inline-size; min-inline-size: 0; }
   .ef-record-header__title {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 1rem;
+    display: grid;
+    grid-template-columns: minmax(0, auto) auto;
+    grid-template-rows: auto auto;
+    justify-content: start;
+    column-gap: 1rem;
+    row-gap: 0.5rem;
     align-items: center;
     margin-block: 0.75rem 0;
   }
+  .ef-record-header__title > :first-child {
+    display: grid;
+    grid-row: 1 / span 2;
+    grid-template-rows: subgrid;
+    row-gap: 0;
+    min-inline-size: 0;
+  }
+  .ef-record-header__title > :first-child > .ef-record-header__type { grid-row: 1; align-self: end; }
+  .ef-record-header__title > :first-child > :is(h1, h2, h3, h4) { grid-row: 2; }
+  .ef-record-header__title > :not(:first-child) { grid-row: 2; }
+  @container (max-width: 24em) {
+    .ef-record-header__title { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
+    .ef-record-header__title > :first-child { grid-row: auto; }
+    .ef-record-header__title > :not(:first-child) { grid-row: auto; justify-self: start; }
+  }
   .ef-record-header__title h2 { margin: 0.15rem 0 0; }
   .ef-record-header__type {
     color: var(--ef-surface-accent-text-color, var(--ef-color-accent-secondary, #47756b));
@@ -2124,7 +2212,9 @@
   .ef-provenance-trail li {
     position: relative;
     display: grid;
+    grid-template-columns: minmax(0, 1fr);
     gap: 0.2rem;
+    overflow-wrap: anywhere;
     padding: 0.75rem 0 0.75rem 2rem;
   }
   .ef-provenance-trail li::before {
@@ -2184,6 +2274,7 @@
   /* Mobile action bar --------------------------------------------------- */
   .ef-mobile-action-bar {
     display: flex;
+    flex-wrap: wrap;
     gap: 0.5rem;
     padding: 0.75rem;
     padding-block-end: max(0.75rem, env(safe-area-inset-bottom));
@@ -2192,7 +2283,7 @@
     backdrop-filter: blur(10px);
   }
 
-  .ef-mobile-action-bar > * { flex: 1 1 0; }
+  .ef-mobile-action-bar > * { flex: 1 1 min(100%, 8rem); }
   .ef-mobile-action-bar__primary {
     background: var(--ef-color-surface-inverse, #202421);
     color: var(--ef-color-text-inverse, #f2efe7);
@@ -2225,7 +2316,9 @@
     .ef-operation-status,
     .ef-record-header,
     .ef-file-upload__queue li {
-      grid-template-columns: 1fr;
+      /* minmax(0, …): a long word or wide font never holds the track wider
+         than the screen (ULI-L05). */
+      grid-template-columns: minmax(0, 1fr);
     }
 
     .ef-work-queue__item button,
@@ -2304,6 +2397,7 @@
       margin-block-end: 0.75rem;
       border: 1px solid var(--ef-color-border-functional, #3a403c);
     }
+    .ef-data-grid tr { container-type: inline-size; }
     .ef-data-grid td {
       display: grid;
       grid-template-columns: minmax(6.5rem, 0.4fr) minmax(0, 1fr);
@@ -2317,13 +2411,19 @@
       font-weight: 650;
     }
     .ef-data-grid td[data-label="Actions"] > * { inline-size: 100%; }
+    /* When enlarged text leaves no room for a label beside its value, the
+       label stacks above the value instead of squeezing it to a few
+       characters per line (ULI-L05). 16em is two readable columns. */
+    @container (max-width: 16em) {
+      .ef-data-grid td { grid-template-columns: minmax(0, 1fr); gap: 0.25rem; }
+    }
 
     .ef-search__control { grid-template-columns: 1fr; }
     .ef-search__control input { border-inline-end: 1px solid var(--ef-color-border-functional, #3a403c); border-block-end: 0; }
 
     .ef-work-queue__header { display: grid; }
     .ef-diff-row,
-    .ef-key-value-list > div { grid-template-columns: 1fr; gap: 0.25rem; }
+    .ef-key-value-list > div { grid-template-columns: minmax(0, 1fr); gap: 0.25rem; }
 
     .ef-status-lozenge-set { align-items: stretch; }
     .ef-status-lozenge-set .ef-status-lozenge { flex: 1 1 100%; justify-content: center; }
@@ -2565,7 +2665,7 @@
     .ef-composer__actions button { min-block-size: 2.75rem; }
     .ef-composer__submit { inline-size: 100%; }
 
-    .ef-turn { grid-template-columns: 1fr; }
+    .ef-turn { grid-template-columns: minmax(0, 1fr); }
     .ef-turn__actions { grid-column: 1; }
     .ef-turn__actions button { inline-size: 100%; }
 
@@ -2848,6 +2948,7 @@
     --ef-color-text-muted: var(--ef-color-text-on-secondary-surface, #3a403c);
     --ef-surface-accent-text-color: var(--ef-color-text-primary, #171a18);
     display: inline-flex;
+    max-inline-size: 100%;
     align-items: center;
     gap: var(--ef-primitive-spacing-2, 0.5rem);
     padding: 0.55rem 0.75rem;
@@ -2866,6 +2967,8 @@
   .ef-diagnostic-status__body {
     display: grid;
     gap: 0.1rem;
+    min-inline-size: 0;
+    overflow-wrap: anywhere;
   }
 
   .ef-diagnostic-status__body > span {
@@ -3004,7 +3107,7 @@
   .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 { padding-inline-start:.25rem; min-inline-size:0; overflow-wrap:anywhere; }
   .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; }
@@ -3018,7 +3121,7 @@
   .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 { --ef-color-text-secondary: var(--ef-color-text-on-secondary-surface, #3a403c); --ef-color-text-muted: var(--ef-color-text-on-secondary-surface, #3a403c); --ef-surface-accent-text-color: var(--ef-color-text-primary, #171a18); 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 { grid-template-columns:minmax(0,1fr); min-inline-size:0; overflow-wrap:anywhere; --ef-color-text-secondary: var(--ef-color-text-on-secondary-surface, #3a403c); --ef-color-text-muted: var(--ef-color-text-on-secondary-surface, #3a403c); --ef-surface-accent-text-color: var(--ef-color-text-primary, #171a18); 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 ---------------------------------------------- */
@@ -3228,7 +3331,10 @@
   }
 
   @media (max-width: 48rem) {
-    .ef-split-pane[data-ef-resizable] { grid-template-columns: minmax(0, 1fr); }
+    /* Includes the collapsed state, whose track list would otherwise keep
+       three columns on a phone and squeeze the secondary pane (ULI-L05). */
+    .ef-split-pane[data-ef-resizable],
+    .ef-split-pane[data-ef-resizable][data-ef-collapsed] { grid-template-columns: minmax(0, 1fr); }
     .ef-split-pane__separator { display: none; }
   }