@echelon-foundry/design-system 0.6.1 → 0.7.0

package/dist/all.css

@@ -632,6 +632,7 @@
   }
 
   :where(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) {
+    box-sizing: border-box;
     min-block-size: 2.75rem;
     inline-size: 100%;
     padding: 0.7rem 0.8rem;
@@ -639,6 +640,50 @@
     border-radius: var(--ef-primitive-radius-none, 0);
     background: var(--ef-color-surface-primary, #f2efe7);
     color: var(--ef-color-text-primary, #171a18);
+    font: inherit;
+    line-height: var(--ef-field-line-height, 1.6);
+  }
+
+  /*
+   * Equivalent single-line controls share one intrinsic block size
+   * (UI-LAYOUT-INTERACTION ULI-L02, L13): one line of field text plus the
+   * field padding and border. Native date/time and select boxes otherwise
+   * differ by several pixels from text inputs (Chromium: 51.97 vs 49.97 vs
+   * 46.38 px), which staggers peers in a row. Em-based, so it grows with
+   * the user's text size.
+   */
+  :where(
+    input:not([type]),
+    input:is([type="text"], [type="email"], [type="password"], [type="search"], [type="tel"], [type="url"], [type="number"],
+      [type="date"], [type="time"], [type="datetime-local"], [type="month"], [type="week"]),
+    select:not([multiple], [size])
+  ) {
+    block-size: var(--ef-field-control-block-size, calc(var(--ef-field-line-height, 1.6) * 1em + 1.4rem + 2px));
+  }
+
+  :where(input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"], input[type="week"])::-webkit-datetime-edit {
+    padding-block: 0;
+  }
+
+  /* A fieldset's default min-inline-size is min-content, which lets a long
+     legend or option widen a form past a narrow viewport (ULI-L05). */
+  :where(fieldset) {
+    min-inline-size: 0;
+  }
+
+  /* iOS temporal controls otherwise retain a native intrinsic width despite
+     the author's width limit. Keep the native picker, not its native box. */
+  :where(input[type="date"], input[type="time"], input[type="datetime-local"]) {
+    -webkit-appearance: none;
+    appearance: none;
+    box-sizing: border-box;
+    min-inline-size: 0;
+    max-inline-size: 100%;
+  }
+
+  :where(input[type="date"], input[type="time"], input[type="datetime-local"])::-webkit-date-and-time-value {
+    min-inline-size: 0;
+    text-align: start;
   }
 
   :where(:focus-visible) {
@@ -650,16 +695,29 @@
   .ef-stack { display: flex; flex-direction: column; gap: var(--ef-stack-gap, var(--ef-primitive-spacing-4, 1rem)); }
   .ef-cluster { display: flex; flex-wrap: wrap; gap: var(--ef-cluster-gap, var(--ef-primitive-spacing-3, 0.75rem)); align-items: center; }
   /* .ef-actions (catalog: button) is an application-layer row of related actions; it was styled only in marketing.css (forma#93 gap). */
-  .ef-actions { display: flex; flex-wrap: wrap; gap: var(--ef-primitive-spacing-3, 0.75rem); align-items: center; }
+  /* min-inline-size: 0 lets an action row shrink inside a flex or grid parent
+     instead of being held at its widest button's word (ULI-L05). */
+  .ef-actions { display: flex; flex-wrap: wrap; gap: var(--ef-primitive-spacing-3, 0.75rem); align-items: center; min-inline-size: 0; }
   .ef-grid { display: grid; gap: var(--ef-grid-gap, var(--ef-primitive-spacing-4, 1rem)); grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--ef-grid-min, 16rem)), 1fr)); }
   .ef-section { padding-block: var(--ef-section-space, var(--ef-primitive-spacing-7, 3rem)); }
   .ef-surface { --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); min-inline-size: 0; padding: var(--ef-surface-space, var(--ef-primitive-spacing-5, 1.5rem)); background: var(--ef-color-surface-secondary, #e3e0d7); color: var(--ef-color-text-on-secondary-surface, #3a403c); border: 1px solid var(--ef-color-border-subtle, #e3e0d7); }
   .ef-surface :where(h1, h2, h3, h4, h5, h6, p) { color: inherit; }
 
-  :where(h1, h2, h3, h4, h5, h6, p, a, label, legend, td, th) {
+  :where(h1, h2, h3, h4, h5, h6, p, a, label, legend, td, th, dt, dd, caption, figcaption) {
     overflow-wrap: anywhere;
   }
 
+  /* Action labels never split mid-word because their container allows it
+     (a link button inherits the rule above; a button inherits it from a
+     table cell). A single word wider than its container may still break
+     rather than overflow. Must follow the rule above (ULI-L06, L07). The
+     inline-size cap also clamps a flex item's automatic minimum, so a
+     button never pushes its row past its container (ULI-L05). */
+  :where(button, .ef-button) {
+    overflow-wrap: break-word;
+    max-inline-size: 100%;
+  }
+
   @media (prefers-reduced-motion: reduce) {
     *, *::before, *::after {
       scroll-behavior: auto !important;
@@ -774,9 +832,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%;
@@ -815,6 +908,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;
@@ -844,7 +941,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);
   }
@@ -918,11 +1015,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);
     }
   }
 
@@ -1106,7 +1200,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%;
   }
@@ -1114,12 +1210,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;
@@ -1338,6 +1441,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;
@@ -1391,35 +1498,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;
     }
   }
 
@@ -1471,9 +1562,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;
@@ -1492,7 +1583,6 @@
   }
 
   .ef-tooltip__surface {
-    --ef-tooltip-offset: 0.25rem;
     inline-size: max-content;
     max-inline-size: min(20rem, calc(100vw - 2rem));
     margin: 0;
@@ -1504,30 +1594,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;
     }
   }
 
@@ -1550,9 +1640,8 @@
   }
 
   @media (prefers-reduced-motion: reduce) {
-    .ef-tooltip__surface,
-    .ef-tooltip__surface:popover-open {
-      translate: 0 0;
+    .ef-tooltip__surface {
+      transition-duration: 0.01ms;
     }
   }
 
@@ -1654,8 +1743,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);
@@ -1674,9 +1763,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 {
@@ -1693,9 +1780,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] {
@@ -1728,9 +1813,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"] {
@@ -1752,9 +1862,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;
   }
 
@@ -1784,6 +1896,7 @@
   }
 
   .ef-flyout__body {
+    min-inline-size: 0;
     min-block-size: 0;
     overflow: auto;
     overscroll-behavior: contain;
@@ -1877,7 +1990,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 {
@@ -1935,7 +2050,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;
   }
@@ -2229,8 +2344,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);
@@ -2573,6 +2690,8 @@
   }
 
   .ef-wizard__steps li {
+    min-inline-size: 0;
+    overflow-wrap: anywhere;
     display: flex;
     gap: 0.5rem;
     align-items: center;
@@ -2599,6 +2718,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;
@@ -2666,6 +2786,7 @@
   .ef-command-palette__group button {
     inline-size: 100%;
     display: flex;
+    flex-wrap: wrap;
     justify-content: space-between;
     gap: 1rem;
     text-align: start;
@@ -2782,13 +2903,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));
@@ -2872,7 +3018,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 {
@@ -2932,6 +3080,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));
@@ -2940,7 +3089,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);
@@ -2973,7 +3122,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,
@@ -3052,6 +3203,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);
@@ -3065,13 +3217,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; }
@@ -3313,7 +3471,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%; }
 
@@ -3596,6 +3754,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;
@@ -3614,6 +3773,8 @@
   .ef-diagnostic-status__body {
     display: grid;
     gap: 0.1rem;
+    min-inline-size: 0;
+    overflow-wrap: anywhere;
   }
 
   .ef-diagnostic-status__body > span {
@@ -3752,7 +3913,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; }
@@ -3766,7 +3927,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 ---------------------------------------------- */
@@ -3976,7 +4137,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; }
   }
 
@@ -6282,7 +6446,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);
   }
 
@@ -6782,6 +6949,7 @@
 
   .ef-semantic-differential__endpoints {
     display: flex;
+    flex-wrap: wrap;
     justify-content: space-between;
     gap: 1rem;
     margin-block-end: 0.4rem;
@@ -6997,6 +7165,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); }
 
@@ -7095,6 +7266,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);
@@ -7107,7 +7282,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 {
@@ -7756,6 +7931,9 @@
     flex-wrap: wrap;
     align-items: center;
     gap: var(--ef-space-3);
+    /* Shrinks inside a flex or grid parent instead of being held at its
+       widest button's word (ULI-L05). */
+    min-inline-size: 0;
   }
 
   .ef-site .ef-button {
@@ -7775,6 +7953,10 @@
     line-height: var(--ef-type-leading-snug);
     text-align: center;
     text-decoration: none;
+    /* Never wider than its row and never split mid-word unless one word is
+       wider than the row (ULI-L05, L06). */
+    max-inline-size: 100%;
+    overflow-wrap: break-word;
     cursor: pointer;
     /* Hover and press are perceptual emphasis on the surface only: the hit
        target never moves under the pointer (MOT-014). */
@@ -8021,7 +8203,10 @@
     min-block-size: 1.5rem;
     font-size: var(--ef-type-size-small);
     font-weight: var(--ef-type-weight-strong);
-    white-space: nowrap;
+    /* One line whenever it fits (inline-flex shrinks to its content); it
+       wraps at word boundaries instead of overflowing a narrow column at
+       large text sizes (UI-LAYOUT-INTERACTION ULI-L05). */
+    max-inline-size: 100%;
   }
 
   /* Four disparate columns cannot degrade by a minimum item size, so the
@@ -8053,6 +8238,9 @@
     padding-block: var(--ef-space-4);
     border-block-end: var(--ef-shape-border-width) solid var(--ef-tone-rule);
     color: var(--ef-tone-text);
+    /* The step text is an anonymous flex item; let a long word wrap inside
+       it instead of overflowing a narrow column (ULI-L05). */
+    overflow-wrap: anywhere;
   }
 
   .ef-steps > li::before {
@@ -8182,6 +8370,7 @@
 
   .ef-code-figure > figcaption {
     margin-block-end: var(--ef-space-2);
+    overflow-wrap: anywhere;
     color: var(--ef-tone-muted);
     font-family: var(--ef-type-family-mono);
     font-size: var(--ef-type-size-label);
@@ -8322,6 +8511,11 @@
   .ef-site .ef-section[data-ef-tone]:not([data-ef-tone="page"]) {
     margin-block: calc(var(--ef-layout-section-space) / 2);
     padding: calc(var(--ef-layout-block-space) * 2);
+    /* The block-space token is rem-based; at enlarged text on a phone it
+       would leave a few characters of line length (96px content at 320px
+       and 200% text). Cap only the inline padding by viewport width; this
+       changes nothing at the default text size (ULI-L05). */
+    padding-inline: min(calc(var(--ef-layout-block-space) * 2), 12.5vw);
   }
 
   .ef-section > * + * { margin-block-start: var(--ef-layout-stack-space); }