@echelon-foundry/design-system 0.2.0-main.15.1

package/dist/components.css

@@ -0,0 +1,2123 @@
+@layer echelon.components {
+  /*
+   * Public ef-* authoring tags are inert wrappers, not registered Custom
+   * Elements. display: contents keeps layout and semantics owned by the
+   * canonical native HTML inside the tag.
+   */
+  .ef-component-tag {
+    display: contents;
+  }
+
+  .ef-field {
+    display: grid;
+    gap: var(--ef-primitive-spacing-2, 0.5rem);
+  }
+
+  .ef-field__label {
+    color: var(--ef-color-text-primary, #171a18);
+    font-size: 0.9375rem;
+    font-weight: 650;
+    line-height: 1.25;
+  }
+
+  .ef-field__description {
+    color: var(--ef-color-text-secondary, #686d68);
+    font-size: 0.8125rem;
+    line-height: 1.4;
+  }
+
+  /* Physics-derived motion ---------------------------------------------- */
+  :where(.ef-switch, .ef-checkbox, .ef-select, .ef-disclosure, .ef-popover, .ef-menu, .ef-dialog, .ef-flyout, .ef-tabs, .ef-alert, .ef-toast, .ef-command-palette) {
+    /*
+     * CSS cannot run a continuous rigid-body simulation. Forma therefore uses
+     * a physics-derived response model. The fallback values remain usable in
+     * browsers that do not support CSS sqrt()/typed multiplication.
+     */
+    --ef-motion-mass: 1;
+    --ef-motion-stiffness: 1;
+    --ef-motion-damping: 0.84;
+    --ef-motion-distance: 1;
+    --ef-motion-gravity: 1;
+    --ef-motion-base-duration: 180ms;
+    --ef-motion-inertia-duration: 214ms;
+    --ef-motion-gravity-duration: 255ms;
+    --ef-motion-state-duration: 154ms;
+    --ef-motion-press-duration: 107ms;
+    --ef-motion-exit-duration: 150ms;
+    --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);
+  }
+
+  :where(.ef-switch, .ef-checkbox, .ef-select, .ef-disclosure, .ef-popover, .ef-menu, .ef-dialog, .ef-flyout, .ef-tabs, .ef-alert, .ef-toast, .ef-command-palette)[data-ef-motion-weight="light"] {
+    --ef-motion-mass: 0.65;
+    --ef-motion-stiffness: 1.15;
+    --ef-motion-damping: 0.94;
+  }
+
+  :where(.ef-switch, .ef-checkbox, .ef-select, .ef-disclosure, .ef-popover, .ef-menu, .ef-dialog, .ef-flyout, .ef-tabs, .ef-alert, .ef-toast, .ef-command-palette)[data-ef-motion-weight="standard"] {
+    --ef-motion-mass: 1;
+    --ef-motion-stiffness: 1;
+    --ef-motion-damping: 0.84;
+  }
+
+  :where(.ef-switch, .ef-checkbox, .ef-select, .ef-disclosure, .ef-popover, .ef-menu, .ef-dialog, .ef-flyout, .ef-tabs, .ef-alert, .ef-toast, .ef-command-palette)[data-ef-motion-weight="heavy"] {
+    --ef-motion-mass: 1.8;
+    --ef-motion-stiffness: 0.92;
+    --ef-motion-damping: 0.76;
+  }
+
+  :where(.ef-disclosure, .ef-popover, .ef-menu, .ef-tabs):not([data-ef-motion-weight]) {
+    --ef-motion-mass: 0.65;
+    --ef-motion-stiffness: 1.15;
+    --ef-motion-damping: 0.94;
+  }
+
+  :where(.ef-dialog, .ef-flyout, .ef-command-palette):not([data-ef-motion-weight]) {
+    --ef-motion-mass: 1.8;
+    --ef-motion-stiffness: 0.92;
+    --ef-motion-damping: 0.76;
+  }
+
+  @supports (width: calc(1px * sqrt(1))) {
+    :where(.ef-switch, .ef-checkbox, .ef-select, .ef-disclosure, .ef-popover, .ef-menu, .ef-dialog, .ef-flyout, .ef-tabs, .ef-alert, .ef-toast, .ef-command-palette) {
+      /*
+       * Response time follows sqrt(mass / stiffness), then is lengthened as
+       * damping decreases. Vertical gravity time follows sqrt(2s / g) and is
+       * deliberately independent of mass.
+       */
+      --ef-motion-inertia-duration: clamp(
+        110ms,
+        calc(
+          var(--ef-motion-base-duration)
+          * sqrt(var(--ef-motion-mass) / var(--ef-motion-stiffness))
+          / var(--ef-motion-damping)
+        ),
+        420ms
+      );
+      --ef-motion-gravity-duration: clamp(
+        100ms,
+        calc(
+          var(--ef-motion-base-duration)
+          * sqrt((2 * var(--ef-motion-distance)) / var(--ef-motion-gravity))
+        ),
+        420ms
+      );
+      --ef-motion-state-duration: clamp(
+        90ms,
+        calc(var(--ef-motion-inertia-duration) * 0.72),
+        240ms
+      );
+      --ef-motion-press-duration: clamp(
+        70ms,
+        calc(var(--ef-motion-inertia-duration) * 0.5),
+        160ms
+      );
+      --ef-motion-exit-duration: clamp(
+        80ms,
+        calc(var(--ef-motion-inertia-duration) * 0.68),
+        220ms
+      );
+    }
+  }
+
+  /* Switch -------------------------------------------------------------- */
+  .ef-switch {
+    --ef-switch-width: 2.75rem;
+    --ef-switch-height: 1.5rem;
+    --ef-switch-thumb: 1.125rem;
+    --ef-switch-gap: 0.1875rem;
+    position: relative;
+    display: inline-grid;
+    grid-template-columns: var(--ef-switch-width) minmax(0, 1fr);
+    align-items: center;
+    gap: var(--ef-primitive-spacing-3, 0.75rem);
+    min-block-size: 2.75rem;
+    max-inline-size: 100%;
+    color: var(--ef-color-text-primary, #171a18);
+    cursor: pointer;
+    user-select: none;
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  .ef-switch__input {
+    position: absolute;
+    inset: 0;
+    z-index: 2;
+    margin: 0;
+    opacity: 0;
+    cursor: inherit;
+  }
+
+  .ef-switch__track {
+    position: relative;
+    inline-size: var(--ef-switch-width);
+    block-size: var(--ef-switch-height);
+    border: 1px solid var(--ef-color-border-functional, #3a403c);
+    border-radius: var(--ef-primitive-radius-pill, 999px);
+    background: var(--ef-color-control-track, #686d68);
+    transition:
+      background var(--ef-motion-state-duration) var(--ef-motion-damped-easing),
+      border-color var(--ef-motion-state-duration) var(--ef-motion-damped-easing);
+  }
+
+  .ef-switch__track::after {
+    content: "";
+    position: absolute;
+    inset-block-start: 50%;
+    inset-inline-start: var(--ef-switch-gap);
+    inline-size: var(--ef-switch-thumb);
+    block-size: var(--ef-switch-thumb);
+    border: 1px solid var(--ef-color-border-functional, #3a403c);
+    border-radius: 50%;
+    background: var(--ef-color-control-thumb, #f2efe7);
+    box-shadow: 0 1px 2px rgb(0 0 0 / 0.18);
+    translate: 0 -50%;
+    scale: 1;
+    transition:
+      translate var(--ef-motion-inertia-duration) var(--ef-motion-spring-easing),
+      scale var(--ef-motion-press-duration) var(--ef-motion-damped-easing),
+      border-color var(--ef-motion-state-duration) var(--ef-motion-damped-easing);
+  }
+
+  .ef-switch__input:checked + .ef-switch__track {
+    background: var(--ef-color-control-active, #905831);
+  }
+
+  .ef-switch__input:checked + .ef-switch__track::after {
+    translate: calc(var(--ef-switch-width) - var(--ef-switch-thumb) - (2 * var(--ef-switch-gap))) -50%;
+  }
+
+  .ef-switch__input:active + .ef-switch__track::after { scale: 1.12; }
+
+  .ef-switch__input:focus-visible + .ef-switch__track {
+    outline: 3px solid var(--ef-color-focus-gap, #f2efe7);
+    outline-offset: 2px;
+    box-shadow: 0 0 0 5px var(--ef-color-focus-ring, #171a18);
+  }
+
+  .ef-switch__input:disabled ~ * { opacity: 0.62; }
+  .ef-switch:has(.ef-switch__input:disabled) { cursor: not-allowed; }
+
+  .ef-switch__text { min-inline-size: 0; }
+  .ef-switch__label { display: block; font-size: 0.9375rem; font-weight: 650; line-height: 1.25; }
+  .ef-switch__description {
+    display: block;
+    margin-block-start: 0.2rem;
+    color: var(--ef-color-text-secondary, #686d68);
+    font-size: 0.8125rem;
+    line-height: 1.35;
+  }
+
+  /* Checkbox ------------------------------------------------------------ */
+  .ef-checkbox {
+    position: relative;
+    display: inline-grid;
+    grid-template-columns: 1.25rem minmax(0, 1fr);
+    align-items: center;
+    gap: var(--ef-primitive-spacing-3, 0.75rem);
+    min-block-size: 2.75rem;
+    max-inline-size: 100%;
+    color: var(--ef-color-text-primary, #171a18);
+    cursor: pointer;
+    user-select: none;
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  .ef-checkbox__input {
+    position: absolute;
+    inset: 0;
+    z-index: 2;
+    margin: 0;
+    opacity: 0;
+    cursor: inherit;
+  }
+
+  .ef-checkbox__box {
+    position: relative;
+    inline-size: 1.25rem;
+    block-size: 1.25rem;
+    display: grid;
+    place-items: center;
+    border: 2px solid var(--ef-color-border-functional, #3a403c);
+    border-radius: var(--ef-primitive-radius-small, 4px);
+    background: var(--ef-color-surface-primary, #f2efe7);
+    scale: 1;
+    transition:
+      background var(--ef-motion-state-duration) var(--ef-motion-damped-easing),
+      border-color var(--ef-motion-state-duration) var(--ef-motion-damped-easing),
+      scale var(--ef-motion-press-duration) var(--ef-motion-damped-easing);
+  }
+
+  .ef-checkbox__box::after {
+    content: "✓";
+    color: var(--ef-color-text-inverse, #f2efe7);
+    font-family: var(--ef-primitive-font-family-sans, system-ui, sans-serif);
+    font-size: 0.9rem;
+    font-weight: 800;
+    line-height: 1;
+    opacity: 0;
+    rotate: -12deg;
+    scale: 0.35;
+    transition:
+      opacity var(--ef-motion-state-duration) linear,
+      rotate var(--ef-motion-inertia-duration) var(--ef-motion-spring-easing),
+      scale var(--ef-motion-inertia-duration) var(--ef-motion-spring-easing);
+  }
+
+  .ef-checkbox__input:checked + .ef-checkbox__box {
+    border-color: var(--ef-color-control-active, #905831);
+    background: var(--ef-color-control-active, #905831);
+  }
+
+  .ef-checkbox__input:checked + .ef-checkbox__box::after {
+    opacity: 1;
+    rotate: 0deg;
+    scale: 1;
+  }
+
+  .ef-checkbox__input:active + .ef-checkbox__box { scale: 0.92; }
+
+  .ef-checkbox__input:focus-visible + .ef-checkbox__box {
+    outline: 3px solid var(--ef-color-focus-gap, #f2efe7);
+    outline-offset: 2px;
+    box-shadow: 0 0 0 5px var(--ef-color-focus-ring, #171a18);
+  }
+
+  .ef-checkbox:has(.ef-checkbox__input:disabled) {
+    cursor: not-allowed;
+    opacity: 0.62;
+  }
+
+  .ef-checkbox__text { min-inline-size: 0; }
+  .ef-checkbox__label { display: block; font-size: 0.9375rem; font-weight: 650; line-height: 1.25; }
+  .ef-checkbox__description {
+    display: block;
+    margin-block-start: 0.2rem;
+    color: var(--ef-color-text-secondary, #686d68);
+    font-size: 0.8125rem;
+    line-height: 1.35;
+  }
+
+  /* Select -------------------------------------------------------------- */
+  .ef-select-field {
+    display: grid;
+    gap: var(--ef-primitive-spacing-2, 0.5rem);
+    max-inline-size: 100%;
+  }
+
+  .ef-select {
+    --ef-motion-distance: 0.35;
+    position: relative;
+    display: grid;
+    align-items: center;
+    max-inline-size: 100%;
+  }
+
+  .ef-select__input {
+    inline-size: 100%;
+    min-block-size: 2.75rem;
+    padding-inline-end: 2.75rem;
+    appearance: none;
+    cursor: pointer;
+    transition:
+      background var(--ef-motion-state-duration) var(--ef-motion-damped-easing),
+      border-color var(--ef-motion-state-duration) var(--ef-motion-damped-easing);
+  }
+
+  .ef-select__indicator {
+    position: absolute;
+    inset-inline-end: 1rem;
+    inline-size: 0.55rem;
+    block-size: 0.55rem;
+    border-inline-end: 2px solid currentColor;
+    border-block-end: 2px solid currentColor;
+    color: var(--ef-color-text-primary, #171a18);
+    pointer-events: none;
+    rotate: 45deg;
+    translate: 0 -0.12rem;
+    transition:
+      rotate var(--ef-motion-inertia-duration) var(--ef-motion-spring-easing),
+      translate var(--ef-motion-gravity-duration) var(--ef-motion-damped-easing);
+  }
+
+  .ef-select__input:open + .ef-select__indicator {
+    rotate: 225deg;
+    translate: 0 0.08rem;
+  }
+
+  .ef-select__input:disabled {
+    cursor: not-allowed;
+    opacity: 0.62;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :where(.ef-switch, .ef-checkbox, .ef-select, .ef-disclosure, .ef-popover, .ef-menu, .ef-dialog, .ef-flyout, .ef-tabs, .ef-alert, .ef-toast, .ef-command-palette) {
+      --ef-motion-inertia-duration: 0.01ms;
+      --ef-motion-gravity-duration: 0.01ms;
+      --ef-motion-state-duration: 0.01ms;
+      --ef-motion-press-duration: 0.01ms;
+      --ef-motion-exit-duration: 0.01ms;
+      --ef-motion-spring-easing: linear;
+      --ef-motion-damped-easing: linear;
+    }
+
+    .ef-switch__input:active + .ef-switch__track::after,
+    .ef-checkbox__input:active + .ef-checkbox__box {
+      scale: 1;
+    }
+
+    .ef-select__indicator,
+    .ef-select__input:open + .ef-select__indicator {
+      translate: 0 0;
+    }
+  }
+
+  /* Slider -------------------------------------------------------------- */
+
+  .ef-slider {
+    display: grid;
+    gap: var(--ef-primitive-spacing-2, 0.5rem);
+  }
+
+  .ef-slider__header,
+  .ef-slider__bounds {
+    min-inline-size: 0;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    gap: var(--ef-primitive-spacing-3, 0.75rem);
+  }
+
+  .ef-slider__label { font-size: 0.9375rem; font-weight: 650; }
+  .ef-slider__bounds {
+    color: var(--ef-color-text-secondary, #686d68);
+    font-family: var(--ef-primitive-font-family-mono, ui-monospace, monospace);
+    font-size: 0.6875rem;
+  }
+
+  .ef-slider__input {
+    inline-size: 100%;
+    min-block-size: 2.75rem;
+    margin: 0;
+    accent-color: var(--ef-color-control-active, #905831);
+    cursor: pointer;
+    transition:
+      filter var(--ef-primitive-motion-duration-fast, 120ms) var(--ef-primitive-motion-easing-standard, ease),
+      opacity var(--ef-primitive-motion-duration-fast, 120ms) var(--ef-primitive-motion-easing-standard, ease);
+  }
+
+  .ef-slider__input:hover { filter: saturate(1.08); }
+  .ef-slider__input:active { filter: saturate(1.14); }
+  .ef-slider__input:disabled { cursor: not-allowed; opacity: 0.62; }
+
+  .ef-slider__input:focus-visible {
+    outline: 3px solid var(--ef-color-focus-gap, #f2efe7);
+    outline-offset: 2px;
+    box-shadow: 0 0 0 5px var(--ef-color-focus-ring, #171a18);
+  }
+
+  /* Segmented control --------------------------------------------------- */
+  .ef-segmented {
+    max-inline-size: 100%;
+    display: inline-flex;
+    flex-wrap: wrap;
+    gap: 2px;
+    padding: 2px;
+    border: 1px solid var(--ef-color-border-functional, #3a403c);
+    background: var(--ef-color-surface-secondary, #e3e0d7);
+  }
+
+  .ef-segment {
+    position: relative;
+    min-block-size: 2.75rem;
+    min-inline-size: 0;
+    display: grid;
+    place-items: center;
+    padding: 0.55rem 0.9rem;
+    background: transparent;
+    color: var(--ef-color-text-on-secondary-surface, #3a403c);
+    cursor: pointer;
+    transition:
+      background var(--ef-primitive-motion-duration-fast, 120ms) var(--ef-primitive-motion-easing-standard, ease),
+      color var(--ef-primitive-motion-duration-fast, 120ms) var(--ef-primitive-motion-easing-standard, ease),
+      transform var(--ef-primitive-motion-duration-fast, 120ms) var(--ef-primitive-motion-easing-standard, ease);
+  }
+
+  .ef-segment:has(input:checked) {
+    background: var(--ef-color-surface-inverse, #202421);
+    color: var(--ef-color-text-inverse, #f2efe7);
+  }
+
+  .ef-segment:has(input:active) { transform: scale(0.985); }
+  .ef-segment input {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    opacity: 0;
+  }
+
+  .ef-segment:has(input:focus-visible) {
+    outline: 3px solid var(--ef-color-focus-gap, #f2efe7);
+    outline-offset: 2px;
+    box-shadow: 0 0 0 5px var(--ef-color-focus-ring, #171a18);
+  }
+
+  /* Disclosure ---------------------------------------------------------- */
+  .ef-disclosure {
+    border-block: 1px solid var(--ef-color-border-functional, #3a403c);
+  }
+
+  .ef-disclosure + .ef-disclosure { border-block-start: 0; }
+
+  .ef-disclosure > summary {
+    min-inline-size: 0;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1rem;
+    min-block-size: 2.75rem;
+    padding: 0.75rem 0;
+    cursor: pointer;
+    font-weight: 650;
+    list-style: none;
+  }
+
+  .ef-disclosure > summary::-webkit-details-marker { display: none; }
+  .ef-disclosure > summary::after {
+    content: "+";
+    font-family: var(--ef-primitive-font-family-mono, ui-monospace, monospace);
+    rotate: 0deg;
+    scale: 1;
+    transition:
+      rotate var(--ef-motion-inertia-duration) var(--ef-motion-spring-easing),
+      scale var(--ef-motion-press-duration) var(--ef-motion-damped-easing);
+  }
+  .ef-disclosure > summary:active::after { scale: 0.86; }
+  .ef-disclosure[open] > summary::after { rotate: 45deg; }
+  .ef-disclosure__content {
+    padding: 0 0 1rem;
+    opacity: 1;
+    translate: 0 0;
+    transition:
+      opacity var(--ef-motion-state-duration) linear,
+      translate var(--ef-motion-inertia-duration) var(--ef-motion-damped-easing);
+  }
+
+  @starting-style {
+    .ef-disclosure[open] .ef-disclosure__content {
+      opacity: 0;
+      translate: 0 -0.25rem;
+    }
+  }
+
+  /* Popover and ordinary action menu ------------------------------------ */
+  .ef-popover,
+  .ef-menu {
+    max-inline-size: min(30rem, calc(100vw - 2rem));
+    max-block-size: min(80dvh, calc(100dvh - 2rem));
+    margin: 0;
+    padding: var(--ef-primitive-spacing-4, 1rem);
+    border: 1px solid var(--ef-color-border-functional, #3a403c);
+    background: var(--ef-color-surface-primary, #f2efe7);
+    color: var(--ef-color-text-primary, #171a18);
+    box-shadow: 0 1rem 3rem rgb(0 0 0 / 0.18);
+    overflow: auto;
+    overscroll-behavior: contain;
+    opacity: 0;
+    translate: 0 -0.35rem;
+    scale: 0.985;
+    transition:
+      opacity var(--ef-motion-exit-duration) linear,
+      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;
+  }
+
+  .ef-popover:popover-open,
+  .ef-menu:popover-open {
+    opacity: 1;
+    translate: 0 0;
+    scale: 1;
+    transition-duration:
+      var(--ef-motion-state-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;
+    }
+  }
+
+  .ef-menu {
+    min-inline-size: min(14rem, calc(100vw - 2rem));
+    padding: 0.4rem;
+  }
+
+  .ef-menu__list {
+    display: grid;
+    gap: 0.2rem;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .ef-menu__list :where(button, a) {
+    inline-size: 100%;
+    min-block-size: 2.75rem;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1rem;
+    padding: 0.6rem 0.75rem;
+    border: 0;
+    background: transparent;
+    color: var(--ef-color-text-primary, #171a18);
+    text-align: start;
+    text-decoration: none;
+  }
+
+  .ef-menu__list :where(button, a):hover {
+    background: var(--ef-color-surface-secondary, #e3e0d7);
+  }
+
+  /* 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);
+    padding: 0;
+    border: 1px solid var(--ef-color-border-functional, #3a403c);
+    background: var(--ef-color-surface-primary, #f2efe7);
+    color: var(--ef-color-text-primary, #171a18);
+    overscroll-behavior: contain;
+  }
+
+  :where(.ef-dialog, .ef-flyout)[open] {
+    --ef-overlay-motion-duration: var(--ef-motion-inertia-duration);
+    --ef-overlay-spatial-easing: var(--ef-motion-spring-easing);
+  }
+
+  :where(.ef-dialog, .ef-flyout)::backdrop {
+    background: rgb(23 26 24 / 0);
+    backdrop-filter: blur(0);
+    transition:
+      background var(--ef-overlay-motion-duration) var(--ef-motion-damped-easing),
+      backdrop-filter var(--ef-overlay-motion-duration) var(--ef-motion-damped-easing),
+      display var(--ef-overlay-motion-duration) allow-discrete,
+      overlay var(--ef-overlay-motion-duration) allow-discrete;
+  }
+
+  :where(.ef-dialog, .ef-flyout)[open]::backdrop {
+    background: rgb(23 26 24 / 0.48);
+    backdrop-filter: blur(2px);
+  }
+
+  /* Centered modal dialog ------------------------------------------------ */
+  .ef-dialog {
+    inline-size: min(38rem, calc(100vw - 2rem));
+    max-block-size: calc(100dvh - 2rem);
+    box-shadow: 0 1.5rem 4rem rgb(0 0 0 / 0.28);
+    translate: 0 0.75rem;
+    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;
+  }
+
+  .ef-dialog[open] {
+    translate: 0 0;
+    scale: 1;
+  }
+
+  .ef-dialog__body { padding: var(--ef-primitive-spacing-5, 1.5rem); }
+  .ef-dialog__actions {
+    min-inline-size: 0;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+    gap: var(--ef-primitive-spacing-2, 0.5rem);
+    padding: 1rem 1.5rem;
+    border-block-start: 1px solid var(--ef-color-border-subtle, #e3e0d7);
+  }
+
+  /* Edge flyout --------------------------------------------------------- */
+  .ef-flyout {
+    --ef-flyout-closed-x: 100%;
+    position: fixed;
+    inset-block: 0;
+    inline-size: min(28rem, 90vw);
+    max-inline-size: min(28rem, 90vw);
+    block-size: 100dvh;
+    max-block-size: 100dvh;
+    box-sizing: border-box;
+    margin-block: 0;
+    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;
+  }
+
+  .ef-flyout[data-ef-side="left"] {
+    --ef-flyout-closed-x: -100%;
+    inset-inline-start: 0;
+    inset-inline-end: auto;
+    margin-inline: 0;
+    border-inline-start: 0;
+  }
+
+  .ef-flyout[data-ef-side="right"] {
+    --ef-flyout-closed-x: 100%;
+    inset-inline-start: auto;
+    inset-inline-end: 0;
+    margin-inline: 0;
+    border-inline-end: 0;
+  }
+
+  .ef-flyout[open] { translate: 0 0; }
+
+  .ef-flyout__surface {
+    min-block-size: 0;
+    block-size: 100%;
+    display: grid;
+    grid-template-rows: auto minmax(0, 1fr) auto;
+  }
+
+  .ef-flyout__header,
+  .ef-flyout__actions {
+    min-inline-size: 0;
+    display: flex;
+    align-items: center;
+    gap: var(--ef-primitive-spacing-3, 0.75rem);
+    padding-inline: var(--ef-primitive-spacing-4, 1rem);
+  }
+
+  .ef-flyout__header {
+    justify-content: space-between;
+    padding-block-start: max(var(--ef-primitive-spacing-4, 1rem), env(safe-area-inset-top));
+    padding-block-end: var(--ef-primitive-spacing-4, 1rem);
+    border-block-end: 1px solid var(--ef-color-border-subtle, #e3e0d7);
+  }
+
+  .ef-flyout__header > * { min-inline-size: 0; }
+  .ef-flyout__header h2 { margin-block: 0; }
+
+  .ef-flyout__close {
+    flex: 0 0 auto;
+    min-inline-size: 2.75rem;
+    min-block-size: 2.75rem;
+  }
+
+  .ef-flyout__body {
+    min-block-size: 0;
+    overflow: auto;
+    overscroll-behavior: contain;
+    padding: var(--ef-primitive-spacing-4, 1rem);
+  }
+
+  .ef-flyout__actions {
+    flex-wrap: wrap;
+    justify-content: flex-end;
+    padding-block-start: var(--ef-primitive-spacing-4, 1rem);
+    padding-block-end: max(var(--ef-primitive-spacing-4, 1rem), env(safe-area-inset-bottom));
+    border-block-start: 1px solid var(--ef-color-border-subtle, #e3e0d7);
+  }
+
+  @starting-style {
+    .ef-dialog[open] {
+      translate: 0 0.75rem;
+      scale: 0.985;
+    }
+
+    .ef-flyout[open] {
+      translate: var(--ef-flyout-closed-x) 0;
+    }
+
+    :where(.ef-dialog, .ef-flyout)[open]::backdrop {
+      background: rgb(23 26 24 / 0);
+      backdrop-filter: blur(0);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .ef-dialog,
+    .ef-dialog[open],
+    .ef-flyout,
+    .ef-flyout[open] {
+      translate: 0 0;
+      scale: 1;
+    }
+
+    .ef-dialog::backdrop,
+    .ef-dialog[open]::backdrop,
+    .ef-flyout::backdrop,
+    .ef-flyout[open]::backdrop {
+      backdrop-filter: none;
+    }
+  }
+
+
+  /* Shared operational components --------------------------------------- */
+  .ef-visually-hidden {
+    position: absolute !important;
+    inline-size: 1px !important;
+    block-size: 1px !important;
+    padding: 0 !important;
+    margin: -1px !important;
+    overflow: hidden !important;
+    clip: rect(0 0 0 0) !important;
+    white-space: nowrap !important;
+    border: 0 !important;
+  }
+
+  .ef-component-kicker {
+    color: var(--ef-color-accent-secondary, #47756b);
+    font-family: var(--ef-primitive-font-family-mono, ui-monospace, monospace);
+    font-size: 0.6875rem;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+  }
+
+  .ef-status-lozenge-set,
+  .ef-operation-status__actions,
+  .ef-wizard__actions,
+  .ef-date-range__presets,
+  .ef-preview-surface__controls,
+  .ef-preview-surface__footer {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--ef-primitive-spacing-2, 0.5rem);
+    align-items: center;
+  }
+
+  .ef-status-lozenge {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.35rem;
+    min-block-size: 1.75rem;
+    padding: 0.2rem 0.55rem;
+    border: 1px solid var(--ef-color-border-functional, #3a403c);
+    background: var(--ef-color-surface-primary, #f2efe7);
+    color: var(--ef-color-text-primary, #171a18);
+    font-family: var(--ef-primitive-font-family-mono, ui-monospace, monospace);
+    font-size: 0.6875rem;
+    line-height: 1.2;
+    white-space: nowrap;
+  }
+
+  .ef-status-lozenge::before {
+    content: "•";
+    font-size: 1rem;
+    line-height: 0;
+  }
+
+  .ef-status-lozenge[data-state="ok"]::before { content: "✓"; }
+  .ef-status-lozenge[data-state="attention"]::before { content: "!"; }
+  .ef-status-lozenge[data-state="unknown"]::before { content: "?"; }
+  .ef-status-lozenge[data-state="blocked"]::before { content: "×"; }
+
+  /* Search and collection controls -------------------------------------- */
+  .ef-search {
+    display: grid;
+    gap: 0.4rem;
+  }
+
+  .ef-search__label {
+    color: var(--ef-color-text-primary, #171a18);
+    font-size: 0.8125rem;
+    font-weight: 650;
+  }
+
+  .ef-search__control {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+  }
+
+  .ef-search__control input { border-inline-end: 0; }
+  .ef-search__clear { min-inline-size: 4.5rem; }
+  .ef-search__status,
+  .ef-combobox__help {
+    margin: 0;
+    color: var(--ef-color-text-secondary, #686d68);
+    font-size: 0.75rem;
+  }
+
+  .ef-collection-toolbar {
+    display: grid;
+    grid-template-columns: minmax(14rem, 1.6fr) minmax(0, 2fr) auto;
+    gap: 1rem;
+    align-items: end;
+    padding-block: 0.75rem;
+    border-block: 1px solid var(--ef-color-border-functional, #3a403c);
+  }
+
+  .ef-collection-toolbar__controls {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.75rem;
+    align-items: end;
+  }
+
+  .ef-collection-toolbar__controls label,
+  .ef-collection-toolbar__filters {
+    min-inline-size: 9rem;
+    font-size: 0.75rem;
+    font-weight: 650;
+  }
+
+  .ef-collection-toolbar__filters > summary {
+    min-block-size: 2.75rem;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.65rem 0.75rem;
+    border: 1px solid var(--ef-color-border-functional, #3a403c);
+    cursor: pointer;
+  }
+
+  .ef-collection-toolbar__filter-panel {
+    position: absolute;
+    z-index: 3;
+    display: grid;
+    gap: 0.75rem;
+    min-inline-size: min(20rem, calc(100vw - 2rem));
+    padding: 1rem;
+    border: 1px solid var(--ef-color-border-functional, #3a403c);
+    background: var(--ef-color-surface-primary, #f2efe7);
+    box-shadow: 0 0.75rem 2rem rgb(0 0 0 / 0.14);
+  }
+
+  .ef-collection-toolbar__count {
+    margin: 0 0 0.75rem;
+    color: var(--ef-color-text-secondary, #686d68);
+    font-family: var(--ef-primitive-font-family-mono, ui-monospace, monospace);
+    font-size: 0.75rem;
+    white-space: nowrap;
+  }
+
+  /* Data grid ----------------------------------------------------------- */
+  .ef-data-grid {
+    max-inline-size: 100%;
+    overflow-x: auto;
+    border: 1px solid var(--ef-color-border-functional, #3a403c);
+    background: var(--ef-color-surface-primary, #f2efe7);
+  }
+
+  .ef-data-grid table {
+    inline-size: 100%;
+    border-collapse: collapse;
+    min-inline-size: 42rem;
+  }
+
+  .ef-data-grid th,
+  .ef-data-grid td {
+    padding: 0.75rem;
+    border-block-end: 1px solid var(--ef-color-border-subtle, #e3e0d7);
+    text-align: start;
+    vertical-align: middle;
+  }
+
+  .ef-data-grid th {
+    background: var(--ef-color-surface-secondary, #e3e0d7);
+    color: var(--ef-color-text-primary, #171a18);
+    font-size: 0.75rem;
+  }
+
+  .ef-data-grid th button {
+    min-block-size: 2.25rem;
+    padding: 0;
+    border: 0;
+    background: transparent;
+  }
+
+  .ef-data-grid th[aria-sort="ascending"] button::after { content: " ↑"; }
+  .ef-data-grid th[aria-sort="descending"] button::after { content: " ↓"; }
+
+  /* Pagination ---------------------------------------------------------- */
+  .ef-pagination {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    align-items: center;
+  }
+
+  .ef-pagination__pages {
+    display: flex;
+    gap: 0.25rem;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .ef-pagination a {
+    min-block-size: 2.75rem;
+    min-inline-size: 2.75rem;
+    display: grid;
+    place-items: center;
+    padding: 0.4rem 0.65rem;
+    border: 1px solid var(--ef-color-border-functional, #3a403c);
+    color: var(--ef-color-text-primary, #171a18);
+    text-decoration: none;
+  }
+
+  .ef-pagination a[aria-current="page"] {
+    background: var(--ef-color-surface-inverse, #202421);
+    color: var(--ef-color-text-inverse, #f2efe7);
+  }
+
+  .ef-pagination__summary {
+    color: var(--ef-color-text-secondary, #686d68);
+    font-size: 0.75rem;
+  }
+
+  /* Tabs ---------------------------------------------------------------- */
+  .ef-tabs {
+    min-inline-size: 0;
+  }
+
+  .ef-tabs__list {
+    display: flex;
+    max-inline-size: 100%;
+    overflow-x: auto;
+    border-block-end: 1px solid var(--ef-color-border-functional, #3a403c);
+    scrollbar-width: thin;
+  }
+
+  .ef-tabs__list [role="tab"] {
+    position: relative;
+    flex: 0 0 auto;
+    min-block-size: 2.75rem;
+    border: 0;
+    background: transparent;
+    translate: 0 0.08rem;
+    transition:
+      background var(--ef-motion-state-duration) var(--ef-motion-damped-easing),
+      translate var(--ef-motion-inertia-duration) var(--ef-motion-spring-easing);
+  }
+
+  .ef-tabs__list [role="tab"]::after {
+    content: "";
+    position: absolute;
+    inset-inline: 0.6rem;
+    inset-block-end: 0;
+    block-size: 3px;
+    background: var(--ef-color-accent-primary, #905831);
+    scale: 0 1;
+    transition: scale var(--ef-motion-inertia-duration) var(--ef-motion-spring-easing);
+  }
+
+  .ef-tabs__list [aria-selected="true"] {
+    background: var(--ef-color-surface-secondary, #e3e0d7);
+    translate: 0 0;
+  }
+
+  .ef-tabs__list [aria-selected="true"]::after { scale: 1 1; }
+
+  .ef-tabs__panel { padding-block: 1.25rem; }
+
+  .ef-tabs__panel[data-ef-motion-entry] {
+    opacity: 1;
+    translate: 0 0;
+    transition:
+      opacity var(--ef-motion-state-duration) linear,
+      translate var(--ef-motion-inertia-duration) var(--ef-motion-damped-easing);
+  }
+
+  @starting-style {
+    .ef-tabs__panel[data-ef-motion-entry] {
+      opacity: 0;
+      translate: 0 0.25rem;
+    }
+  }
+
+  /* Timeline ------------------------------------------------------------ */
+  .ef-timeline {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .ef-timeline__item {
+    position: relative;
+    display: grid;
+    grid-template-columns: 1.25rem minmax(0, 1fr);
+    gap: 1rem;
+    padding-block: 0 1.75rem;
+  }
+
+  .ef-timeline__item:not(:last-child)::before {
+    content: "";
+    position: absolute;
+    inset-inline-start: 0.5625rem;
+    inset-block: 1rem 0;
+    border-inline-start: 1px solid var(--ef-color-border-functional, #3a403c);
+  }
+
+  .ef-timeline__marker {
+    z-index: 1;
+    inline-size: 1.125rem;
+    block-size: 1.125rem;
+    margin-block-start: 0.2rem;
+    border: 2px solid var(--ef-color-border-functional, #3a403c);
+    border-radius: 50%;
+    background: var(--ef-color-surface-primary, #f2efe7);
+  }
+
+  .ef-timeline__content {
+    min-inline-size: 0;
+    padding: 1rem;
+    border: 1px solid var(--ef-color-border-subtle, #e3e0d7);
+  }
+
+  .ef-timeline__content h3,
+  .ef-timeline__content p { margin-block: 0.25rem 0.5rem; }
+
+  .ef-timeline__meta {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    gap: 0.5rem;
+    font-family: var(--ef-primitive-font-family-mono, ui-monospace, monospace);
+    font-size: 0.6875rem;
+  }
+
+  /* Diff and conflict --------------------------------------------------- */
+  .ef-diff-viewer {
+    border: 1px solid var(--ef-color-border-functional, #3a403c);
+  }
+
+  .ef-diff-viewer__header,
+  .ef-conflict-review__header,
+  .ef-record-header,
+  .ef-work-queue__header,
+  .ef-preview-surface__header {
+    padding: 1rem;
+    border-block-end: 1px solid var(--ef-color-border-subtle, #e3e0d7);
+  }
+
+  .ef-diff-viewer__header h3,
+  .ef-conflict-review__header h3,
+  .ef-work-queue__header h3,
+  .ef-preview-surface__header h3 { margin: 0.3rem 0; }
+
+  .ef-diff-viewer__grid {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .ef-diff-viewer__side {
+    min-inline-size: 0;
+    padding: 1rem;
+  }
+
+  .ef-diff-viewer__side + .ef-diff-viewer__side {
+    border-inline-start: 1px solid var(--ef-color-border-subtle, #e3e0d7);
+  }
+
+  .ef-diff-viewer dl { margin: 0; }
+  .ef-diff-row {
+    display: grid;
+    grid-template-columns: minmax(7rem, 0.4fr) minmax(0, 1fr);
+    gap: 1rem;
+    padding-block: 0.6rem;
+    border-block-end: 1px solid var(--ef-color-border-subtle, #e3e0d7);
+  }
+
+  .ef-diff-row[data-change="changed"] {
+    border-inline-start: 0.3rem solid var(--ef-color-accent-primary, #905831);
+    padding-inline-start: 0.6rem;
+  }
+
+  .ef-conflict-review {
+    border: 1px solid var(--ef-color-border-functional, #3a403c);
+  }
+
+  .ef-conflict-review > .ef-diff-viewer {
+    border-inline: 0;
+  }
+
+  .ef-conflict-review__actions {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+    gap: 0.5rem;
+    padding: 1rem;
+    border-block-start: 1px solid var(--ef-color-border-subtle, #e3e0d7);
+  }
+
+  /* Metrics and dashboards --------------------------------------------- */
+  .ef-metric-card {
+    display: grid;
+    gap: 0.5rem;
+    min-inline-size: 0;
+    padding: 1.25rem;
+    border: 1px solid var(--ef-color-border-functional, #3a403c);
+    background: var(--ef-color-surface-primary, #f2efe7);
+  }
+
+  .ef-metric-card__label {
+    color: var(--ef-color-text-secondary, #686d68);
+    font-size: 0.8125rem;
+    font-weight: 650;
+  }
+
+  .ef-metric-card__value {
+    color: var(--ef-color-text-heading, #202421);
+    font-family: var(--ef-primitive-font-family-display, Georgia, serif);
+    font-size: clamp(2rem, 8vw, 3.5rem);
+    line-height: 1;
+  }
+
+  .ef-dashboard-grid {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: 1rem;
+  }
+
+  /* Work queue ---------------------------------------------------------- */
+  .ef-work-queue {
+    border: 1px solid var(--ef-color-border-functional, #3a403c);
+  }
+
+  .ef-work-queue__header {
+    display: flex;
+    justify-content: space-between;
+    gap: 1rem;
+    align-items: start;
+  }
+
+  .ef-work-queue__list {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .ef-work-queue__item {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    gap: 1rem;
+    align-items: center;
+    padding: 1rem;
+    border-block-end: 1px solid var(--ef-color-border-subtle, #e3e0d7);
+  }
+
+  .ef-work-queue__item:last-child { border-block-end: 0; }
+  .ef-work-queue__item p { margin: 0.25rem 0 0; }
+
+  /* Feedback ------------------------------------------------------------ */
+  .ef-alert,
+  .ef-operation-status {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr) auto;
+    gap: 1rem;
+    align-items: start;
+    padding: 1rem;
+    border: 1px solid var(--ef-color-border-functional, #3a403c);
+    border-inline-start: 0.35rem solid var(--ef-color-accent-primary, #905831);
+    background: var(--ef-color-surface-primary, #f2efe7);
+  }
+
+  .ef-alert[data-ef-motion-entry] {
+    translate: 0 0;
+    transition: translate var(--ef-motion-inertia-duration) var(--ef-motion-spring-easing);
+  }
+
+  .ef-alert p {
+    color: var(--ef-color-text-primary, #171a18);
+  }
+
+  @starting-style {
+    .ef-alert[data-ef-motion-entry] {
+      translate: 0 -0.5rem;
+    }
+  }
+
+  .ef-toast {
+    position: fixed;
+    inset: auto max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) auto;
+    max-inline-size: min(26rem, calc(100vw - 2rem));
+    margin: 0;
+    padding: 1rem;
+    border: 1px solid var(--ef-color-border-functional, #3a403c);
+    border-inline-start: 0.35rem solid var(--ef-color-accent-primary, #905831);
+    background: var(--ef-color-surface-primary, #f2efe7);
+    color: var(--ef-color-text-primary, #171a18);
+    box-shadow: 0 1rem 3rem rgb(0 0 0 / 0.18);
+    opacity: 0;
+    translate: 0 0.65rem;
+    scale: 0.99;
+    transition:
+      opacity var(--ef-motion-exit-duration) linear,
+      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;
+  }
+
+  .ef-toast:popover-open {
+    opacity: 1;
+    translate: 0 0;
+    scale: 1;
+    transition-duration:
+      var(--ef-motion-state-duration),
+      var(--ef-motion-inertia-duration),
+      var(--ef-motion-inertia-duration),
+      var(--ef-motion-inertia-duration),
+      var(--ef-motion-inertia-duration);
+  }
+
+  @starting-style {
+    .ef-toast:popover-open {
+      opacity: 0;
+      translate: 0 0.65rem;
+      scale: 0.99;
+    }
+  }
+
+  .ef-toast__header {
+    display: flex;
+    justify-content: space-between;
+    gap: 1rem;
+    align-items: start;
+  }
+
+  .ef-toast__title { margin: 0; }
+  .ef-toast p { margin-block: 0.35rem 0; }
+
+  .ef-alert__icon,
+  .ef-operation-status__symbol,
+  .ef-empty-state__symbol {
+    display: grid;
+    place-items: center;
+    inline-size: 2rem;
+    block-size: 2rem;
+    border: 1px solid currentColor;
+    font-family: var(--ef-primitive-font-family-mono, ui-monospace, monospace);
+    font-weight: 700;
+  }
+
+  .ef-alert__title,
+  .ef-operation-status h3 { margin: 0 0 0.25rem; }
+
+  .ef-empty-state {
+    display: grid;
+    justify-items: center;
+    gap: 0.75rem;
+    padding: clamp(2rem, 8vw, 5rem) 1.25rem;
+    border: 1px dashed var(--ef-color-border-functional, #3a403c);
+    text-align: center;
+  }
+
+  .ef-empty-state h3,
+  .ef-empty-state p { margin: 0; }
+
+  .ef-skeleton {
+    display: grid;
+    gap: 0.75rem;
+    padding: 1rem;
+    border: 1px solid var(--ef-color-border-subtle, #e3e0d7);
+  }
+
+  .ef-skeleton__line {
+    block-size: 0.9rem;
+    inline-size: 100%;
+    background: linear-gradient(90deg,
+      var(--ef-color-surface-secondary, #e3e0d7),
+      color-mix(in srgb, var(--ef-color-surface-secondary, #e3e0d7) 55%, var(--ef-color-surface-primary, #f2efe7)),
+      var(--ef-color-surface-secondary, #e3e0d7));
+    background-size: 200% 100%;
+    animation: ef-skeleton-shift 1.6s linear infinite;
+  }
+
+  .ef-skeleton__line--title { inline-size: 55%; block-size: 1.4rem; }
+  .ef-skeleton__line--short { inline-size: 72%; }
+
+  @keyframes ef-skeleton-shift {
+    to { background-position: -200% 0; }
+  }
+
+  /* Wizard and checklist ------------------------------------------------ */
+  .ef-wizard,
+  .ef-readiness-checklist {
+    border: 1px solid var(--ef-color-border-functional, #3a403c);
+  }
+
+  .ef-wizard__header,
+  .ef-wizard__actions,
+  .ef-readiness-checklist > header {
+    padding: 1rem;
+  }
+
+  .ef-wizard__header {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(10rem, 0.4fr);
+    gap: 1rem;
+    align-items: center;
+    border-block-end: 1px solid var(--ef-color-border-subtle, #e3e0d7);
+  }
+
+  .ef-wizard__position {
+    color: var(--ef-color-text-secondary, #686d68);
+    font-family: var(--ef-primitive-font-family-mono, ui-monospace, monospace);
+    font-size: 0.75rem;
+  }
+
+  .ef-wizard__header h3 { margin: 0.25rem 0 0; }
+  .ef-wizard__header progress { inline-size: 100%; }
+
+  .ef-wizard__steps {
+    display: grid;
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+    margin: 0;
+    padding: 1rem;
+    list-style: none;
+    border-block-end: 1px solid var(--ef-color-border-subtle, #e3e0d7);
+  }
+
+  .ef-wizard__steps li {
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+    color: var(--ef-color-text-secondary, #686d68);
+    font-size: 0.8125rem;
+  }
+
+  .ef-wizard__steps li > span {
+    display: grid;
+    place-items: center;
+    inline-size: 1.75rem;
+    block-size: 1.75rem;
+    border: 1px solid var(--ef-color-border-functional, #3a403c);
+    border-radius: 50%;
+  }
+
+  .ef-wizard__steps [data-state="complete"] > span::after { content: "✓"; position: absolute; }
+  .ef-wizard__steps [data-state="current"] { color: var(--ef-color-text-primary, #171a18); font-weight: 700; }
+  .ef-wizard__steps [data-state="current"] > span { background: var(--ef-color-surface-inverse, #202421); color: var(--ef-color-text-inverse, #f2efe7); }
+  .ef-wizard__body { padding: 1.25rem; }
+  .ef-wizard__actions { justify-content: space-between; border-block-start: 1px solid var(--ef-color-border-subtle, #e3e0d7); }
+
+  .ef-readiness-checklist > header { border-block-end: 1px solid var(--ef-color-border-subtle, #e3e0d7); }
+  .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 {
+    display: grid;
+    grid-template-columns: 2rem minmax(0, 1fr) auto;
+    gap: 0.75rem;
+    align-items: center;
+    min-block-size: 3rem;
+    padding: 0.65rem 1rem;
+    border-block-end: 1px solid var(--ef-color-border-subtle, #e3e0d7);
+  }
+  .ef-readiness-checklist__items li:last-child { border-block-end: 0; }
+  .ef-readiness-checklist__items [data-state="complete"] > :first-child { font-weight: 800; }
+  .ef-readiness-checklist__items [data-state="blocked"] { border-inline-start: 0.35rem solid var(--ef-color-accent-primary, #905831); }
+
+  /* Command palette ----------------------------------------------------- */
+  .ef-command-palette {
+    inline-size: min(42rem, calc(100vw - 2rem));
+    max-block-size: min(40rem, calc(100dvh - 2rem));
+    margin: auto;
+    padding: 0;
+    border: 1px solid var(--ef-color-border-functional, #3a403c);
+    background: var(--ef-color-surface-primary, #f2efe7);
+    color: var(--ef-color-text-primary, #171a18);
+    opacity: 0;
+    translate: 0 0.75rem;
+    scale: 0.985;
+    transition:
+      opacity var(--ef-motion-exit-duration) linear,
+      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;
+  }
+
+  .ef-command-palette[open] {
+    opacity: 1;
+    translate: 0 0;
+    scale: 1;
+    transition-duration:
+      var(--ef-motion-state-duration),
+      var(--ef-motion-inertia-duration),
+      var(--ef-motion-inertia-duration),
+      var(--ef-motion-inertia-duration),
+      var(--ef-motion-inertia-duration);
+  }
+
+  @starting-style {
+    .ef-command-palette[open] {
+      opacity: 0;
+      translate: 0 0.75rem;
+      scale: 0.985;
+    }
+  }
+
+  .ef-command-palette__header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 1rem;
+    border-block-end: 1px solid var(--ef-color-border-subtle, #e3e0d7);
+  }
+
+  .ef-command-palette__header h3 { margin: 0; }
+  .ef-command-palette > input { border-inline: 0; }
+  .ef-command-palette__group { padding: 1rem; }
+  .ef-command-palette__group h4 { margin-block: 0 0.5rem; }
+  .ef-command-palette__group button {
+    inline-size: 100%;
+    display: flex;
+    justify-content: space-between;
+    gap: 1rem;
+    text-align: start;
+    border-inline: 0;
+    border-block-end: 0;
+  }
+  .ef-command-palette__group button:last-child { border-block-end: 1px solid var(--ef-color-border-functional, #3a403c); }
+  .ef-command-palette kbd {
+    padding: 0.1rem 0.35rem;
+    border: 1px solid var(--ef-color-border-subtle, #e3e0d7);
+    font-family: var(--ef-primitive-font-family-mono, ui-monospace, monospace);
+  }
+
+  /* Combobox and date range -------------------------------------------- */
+  .ef-combobox,
+  .ef-date-range {
+    display: grid;
+    gap: 0.5rem;
+  }
+
+  .ef-date-range {
+    min-inline-size: 0;
+    inline-size: 100%;
+    max-inline-size: 100%;
+    margin: 0;
+  }
+
+  .ef-combobox > label,
+  .ef-date-range legend {
+    font-size: 0.8125rem;
+    font-weight: 650;
+  }
+
+  .ef-combobox__control { position: relative; }
+  .ef-combobox__indicator {
+    position: absolute;
+    inset-inline-end: 0.8rem;
+    inset-block-start: 50%;
+    translate: 0 -50%;
+    pointer-events: none;
+  }
+
+  .ef-date-range__fields {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+    gap: 0.75rem;
+    align-items: end;
+  }
+
+  .ef-date-range__fields label {
+    min-inline-size: 0;
+    display: grid;
+    gap: 0.35rem;
+  }
+
+  .ef-date-range__fields input[type="date"] {
+    min-inline-size: 0;
+    inline-size: 100%;
+    max-inline-size: 100%;
+  }
+
+  .ef-date-range__separator { padding-block-end: 0.75rem; }
+
+  /* Upload -------------------------------------------------------------- */
+  .ef-file-upload {
+    display: grid;
+    gap: 1rem;
+  }
+
+  .ef-file-upload__drop {
+    padding: 1.5rem;
+    border: 1px dashed var(--ef-color-border-functional, #3a403c);
+    background: var(--ef-color-surface-secondary, #e3e0d7);
+  }
+
+  .ef-file-upload__drop h3 { margin-block-start: 0; }
+  .ef-file-upload__drop .ef-button { display: inline-flex; align-items: center; cursor: pointer; }
+  .ef-file-upload__drop input[type="file"] {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    opacity: 0;
+  }
+
+  .ef-file-upload__queue {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    border-block-start: 1px solid var(--ef-color-border-subtle, #e3e0d7);
+  }
+
+  .ef-file-upload__queue li {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(8rem, 0.5fr) auto;
+    gap: 1rem;
+    align-items: center;
+    padding-block: 0.75rem;
+    border-block-end: 1px solid var(--ef-color-border-subtle, #e3e0d7);
+  }
+
+  .ef-file-upload__queue small { display: block; color: var(--ef-color-text-secondary, #686d68); }
+  .ef-file-upload__queue progress { inline-size: 100%; }
+
+  /* Record header and master/detail ------------------------------------ */
+  .ef-record-header {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    gap: 2rem;
+    align-items: end;
+    border: 1px solid var(--ef-color-border-functional, #3a403c);
+  }
+
+  .ef-record-header__main nav { font-size: 0.75rem; }
+  .ef-record-header__title {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1rem;
+    align-items: center;
+    margin-block: 0.75rem 0;
+  }
+  .ef-record-header__title h2 { margin: 0.15rem 0 0; }
+  .ef-record-header__type {
+    color: var(--ef-color-accent-secondary, #47756b);
+    font-family: var(--ef-primitive-font-family-mono, ui-monospace, monospace);
+    font-size: 0.6875rem;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+  }
+  .ef-record-header__main > p { margin: 0; }
+  .ef-record-header__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
+  .ef-record-header__actions details { position: relative; }
+  .ef-record-header__actions summary {
+    min-block-size: 2.75rem;
+    display: grid;
+    place-items: center;
+    padding: 0.65rem 1rem;
+    border: 1px solid var(--ef-color-border-functional, #3a403c);
+    cursor: pointer;
+    font-weight: 700;
+  }
+  .ef-record-header__menu {
+    position: absolute;
+    z-index: 3;
+    inset-inline-end: 0;
+    min-inline-size: 10rem;
+    padding: 0.5rem;
+    border: 1px solid var(--ef-color-border-functional, #3a403c);
+    background: var(--ef-color-surface-primary, #f2efe7);
+  }
+  .ef-record-header__menu button { inline-size: 100%; }
+
+  .ef-master-detail {
+    display: grid;
+    grid-template-columns: minmax(12rem, 0.4fr) minmax(0, 1fr);
+    min-block-size: 22rem;
+    border: 1px solid var(--ef-color-border-functional, #3a403c);
+  }
+
+  .ef-master-detail__master {
+    border-inline-end: 1px solid var(--ef-color-border-functional, #3a403c);
+  }
+
+  .ef-master-detail__master a {
+    display: grid;
+    gap: 0.15rem;
+    min-block-size: 3.5rem;
+    padding: 0.75rem;
+    border-block-end: 1px solid var(--ef-color-border-subtle, #e3e0d7);
+    color: var(--ef-color-text-primary, #171a18);
+    text-decoration: none;
+  }
+
+  .ef-master-detail__master a[aria-current="page"] {
+    border-inline-start: 0.35rem solid var(--ef-color-accent-primary, #905831);
+    background: var(--ef-color-surface-secondary, #e3e0d7);
+  }
+
+  .ef-master-detail__master span { color: var(--ef-color-text-secondary, #686d68); font-size: 0.75rem; }
+  .ef-master-detail__detail { padding: 1.25rem; min-inline-size: 0; }
+
+  .ef-key-value-list { margin: 1rem 0 0; }
+  .ef-key-value-list > div {
+    display: grid;
+    grid-template-columns: minmax(7rem, 0.35fr) minmax(0, 1fr);
+    gap: 1rem;
+    padding-block: 0.5rem;
+    border-block-end: 1px solid var(--ef-color-border-subtle, #e3e0d7);
+  }
+
+  /* Provenance and preview --------------------------------------------- */
+  .ef-provenance-trail {
+    padding: 1rem;
+    border: 1px solid var(--ef-color-border-functional, #3a403c);
+  }
+
+  .ef-provenance-trail h3 { margin-block-start: 0; }
+  .ef-provenance-trail ol { margin: 0; padding: 0; list-style: none; }
+  .ef-provenance-trail li {
+    position: relative;
+    display: grid;
+    gap: 0.2rem;
+    padding: 0.75rem 0 0.75rem 2rem;
+  }
+  .ef-provenance-trail li::before {
+    content: "";
+    position: absolute;
+    inset-inline-start: 0.45rem;
+    inset-block-start: 1.15rem;
+    inline-size: 0.7rem;
+    block-size: 0.7rem;
+    border: 1px solid var(--ef-color-border-functional, #3a403c);
+    background: var(--ef-color-surface-primary, #f2efe7);
+    rotate: 45deg;
+  }
+  .ef-provenance-trail li:not(:last-child)::after {
+    content: "";
+    position: absolute;
+    inset-inline-start: 0.78rem;
+    inset-block: 1.85rem -0.2rem;
+    border-inline-start: 1px solid var(--ef-color-border-functional, #3a403c);
+  }
+  .ef-provenance-trail__kind,
+  .ef-provenance-trail small {
+    color: var(--ef-color-text-secondary, #686d68);
+    font-family: var(--ef-primitive-font-family-mono, ui-monospace, monospace);
+    font-size: 0.6875rem;
+  }
+
+  .ef-preview-surface {
+    border: 1px solid var(--ef-color-border-functional, #3a403c);
+  }
+  .ef-preview-surface__header {
+    display: flex;
+    justify-content: space-between;
+    gap: 1rem;
+    align-items: center;
+  }
+  .ef-preview-surface__canvas {
+    padding: clamp(1rem, 4vw, 3rem);
+    background: var(--ef-color-surface-secondary, #e3e0d7);
+  }
+  .ef-preview-surface__canvas > article {
+    max-inline-size: 42rem;
+    margin-inline: auto;
+    padding: clamp(1rem, 4vw, 2.5rem);
+    border: 1px solid var(--ef-color-border-functional, #3a403c);
+    background: var(--ef-color-surface-primary, #f2efe7);
+  }
+  .ef-preview-surface__footer {
+    justify-content: space-between;
+    padding: 1rem;
+    border-block-start: 1px solid var(--ef-color-border-subtle, #e3e0d7);
+  }
+
+  /* Mobile action bar --------------------------------------------------- */
+  .ef-mobile-action-bar {
+    display: flex;
+    gap: 0.5rem;
+    padding: 0.75rem;
+    padding-block-end: max(0.75rem, env(safe-area-inset-bottom));
+    border: 1px solid var(--ef-color-border-functional, #3a403c);
+    background: color-mix(in srgb, var(--ef-color-surface-primary, #f2efe7) 94%, transparent);
+    backdrop-filter: blur(10px);
+  }
+
+  .ef-mobile-action-bar > * { flex: 1 1 0; }
+  .ef-mobile-action-bar__primary {
+    background: var(--ef-color-surface-inverse, #202421);
+    color: var(--ef-color-text-inverse, #f2efe7);
+  }
+
+  /* Mobile recomposition ------------------------------------------------ */
+  @media (max-width: 40rem) {
+    .ef-collection-toolbar {
+      grid-template-columns: 1fr auto;
+      align-items: start;
+    }
+    .ef-collection-toolbar__search { grid-column: 1 / -1; }
+    .ef-collection-toolbar__controls { grid-column: 1 / -1; }
+    .ef-collection-toolbar__controls > * { flex: 1 1 9rem; }
+    .ef-collection-toolbar__filters { position: static; }
+    .ef-collection-toolbar__filter-panel {
+      position: static;
+      min-inline-size: 0;
+      inline-size: 100%;
+      max-inline-size: 100%;
+      margin-block-start: 0.5rem;
+      box-shadow: none;
+    }
+    .ef-collection-toolbar__count { margin: 0; align-self: center; }
+
+    .ef-dashboard-grid { grid-template-columns: 1fr; }
+
+    .ef-work-queue__item,
+    .ef-alert,
+    .ef-operation-status,
+    .ef-record-header,
+    .ef-file-upload__queue li {
+      grid-template-columns: 1fr;
+    }
+
+    .ef-work-queue__item button,
+    .ef-alert > button,
+    .ef-operation-status__actions button,
+    .ef-record-header__actions > *,
+    .ef-file-upload__queue button {
+      inline-size: 100%;
+    }
+
+    .ef-diff-viewer__grid { grid-template-columns: 1fr; }
+    .ef-diff-viewer__side + .ef-diff-viewer__side {
+      border-inline-start: 0;
+      border-block-start: 1px solid var(--ef-color-border-subtle, #e3e0d7);
+    }
+
+    .ef-wizard__header { grid-template-columns: 1fr; }
+    .ef-wizard__steps li:not([data-state="current"]) { display: none; }
+    .ef-wizard__steps { grid-template-columns: 1fr; }
+    .ef-wizard__steps [data-state="current"]::after {
+      content: "Current step";
+      margin-inline-start: auto;
+      color: var(--ef-color-text-secondary, #686d68);
+      font-family: var(--ef-primitive-font-family-mono, ui-monospace, monospace);
+      font-size: 0.6875rem;
+      font-weight: 400;
+    }
+
+    .ef-readiness-checklist__items li { grid-template-columns: 2rem minmax(0, 1fr); }
+    .ef-readiness-checklist__items li > :last-child:not(:nth-child(2)) { grid-column: 2; justify-self: start; }
+
+    .ef-date-range__fields { grid-template-columns: 1fr; }
+    .ef-date-range__separator { display: none; }
+
+    .ef-command-palette {
+      inline-size: 100vw;
+      block-size: 100dvh;
+      max-block-size: 100dvh;
+      border: 0;
+    }
+
+    .ef-master-detail { grid-template-columns: 1fr; }
+    .ef-master-detail__master {
+      display: flex;
+      max-inline-size: 100%;
+      overflow-x: auto;
+      border-inline-end: 0;
+      border-block-end: 1px solid var(--ef-color-border-functional, #3a403c);
+    }
+    .ef-master-detail__master a { flex: 0 0 12rem; }
+
+    .ef-preview-surface__header,
+    .ef-preview-surface__footer { align-items: stretch; flex-direction: column; }
+
+    .ef-pagination {
+      justify-content: space-between;
+    }
+    .ef-pagination__pages li:not(:has([aria-current="page"])) { display: none; }
+    .ef-pagination__summary { order: 4; inline-size: 100%; text-align: center; }
+
+    .ef-mobile-action-bar {
+      position: sticky;
+      inset-block-end: 0;
+      z-index: 8;
+    }
+  }
+
+  @media (max-width: 30rem) {
+    .ef-data-grid { overflow: visible; border: 0; }
+    .ef-data-grid table,
+    .ef-data-grid tbody,
+    .ef-data-grid tr,
+    .ef-data-grid td { display: block; min-inline-size: 0; inline-size: 100%; }
+    .ef-data-grid thead { display: none; }
+    .ef-data-grid tr {
+      margin-block-end: 0.75rem;
+      border: 1px solid var(--ef-color-border-functional, #3a403c);
+    }
+    .ef-data-grid td {
+      display: grid;
+      grid-template-columns: minmax(6.5rem, 0.4fr) minmax(0, 1fr);
+      gap: 0.75rem;
+      padding: 0.65rem;
+    }
+    .ef-data-grid td::before {
+      content: attr(data-label);
+      color: var(--ef-color-text-secondary, #686d68);
+      font-size: 0.75rem;
+      font-weight: 650;
+    }
+    .ef-data-grid td[data-label="Actions"] > * { inline-size: 100%; }
+
+    .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-status-lozenge-set { align-items: stretch; }
+    .ef-status-lozenge-set .ef-status-lozenge { flex: 1 1 100%; justify-content: center; }
+  }
+
+  @media (max-width: 44rem) {
+    .ef-segmented {
+      inline-size: 100%;
+    }
+
+    .ef-segment {
+      flex: 1 1 min(10rem, 100%);
+    }
+
+    .ef-popover,
+    .ef-menu {
+      max-inline-size: calc(100vw - 1rem);
+      max-block-size: calc(100dvh - 1rem);
+    }
+
+    .ef-dialog {
+      inline-size: calc(100vw - 1rem);
+      max-block-size: calc(100dvh - 1rem);
+    }
+
+    .ef-dialog__body {
+      padding: var(--ef-primitive-spacing-4, 1rem);
+    }
+
+    .ef-dialog__actions {
+      justify-content: stretch;
+      padding: 0.75rem var(--ef-primitive-spacing-4, 1rem);
+    }
+
+    .ef-dialog__actions > :where(button, .ef-button) {
+      flex: 1 1 100%;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .ef-switch__track,
+    .ef-switch__track::after,
+    .ef-slider__input,
+    .ef-segment,
+    .ef-disclosure > summary::after,
+    .ef-disclosure__content,
+    .ef-popover,
+    .ef-menu,
+    .ef-dialog,
+    .ef-flyout,
+    .ef-tabs__list [role="tab"],
+    .ef-tabs__list [role="tab"]::after,
+    .ef-tabs__panel[data-ef-motion-entry],
+    .ef-alert[data-ef-motion-entry],
+    .ef-toast,
+    .ef-command-palette {
+      transition-duration: 0.01ms;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .ef-switch__track,
+    .ef-segmented,
+    .ef-popover,
+    .ef-menu,
+    .ef-dialog,
+    .ef-flyout,
+    .ef-toast {
+      border-color: CanvasText;
+    }
+
+    .ef-switch__track { background: Canvas; }
+    .ef-switch__track::after { background: Canvas; border-color: CanvasText; box-shadow: none; }
+    .ef-switch__input:checked + .ef-switch__track { background: Highlight; }
+    .ef-switch__input:checked + .ef-switch__track::after { background: HighlightText; }
+    .ef-segment:has(input:checked) { background: Highlight; color: HighlightText; }
+  }
+
+  /* Agent and natural-language interaction ------------------------------- */
+  .ef-composer {
+    display: grid;
+    gap: 1rem;
+    min-inline-size: 0;
+    padding: clamp(1rem, 3vw, 1.5rem);
+    border: 1px solid var(--ef-color-border-functional, #3a403c);
+    background: var(--ef-color-surface-primary, #f2efe7);
+  }
+
+  .ef-composer__context { display: grid; gap: 0.35rem; }
+  .ef-composer__context h2,
+  .ef-conversation__header h2,
+  .ef-understanding__header h2 { margin: 0; }
+  .ef-composer__context p,
+  .ef-understanding__header p { margin: 0; color: var(--ef-color-text-secondary, #686d68); }
+
+  .ef-composer__field { display: grid; }
+  .ef-composer__field textarea {
+    inline-size: 100%;
+    min-block-size: 8rem;
+    resize: vertical;
+  }
+
+  .ef-composer__actions {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 0.75rem;
+  }
+
+  .ef-composer__input-actions,
+  .ef-turn__actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+  }
+
+  .ef-composer__submit {
+    background: var(--ef-color-surface-inverse, #202421);
+    color: var(--ef-color-text-inverse, #f2efe7);
+  }
+
+  .ef-composer__status {
+    margin: 0;
+    color: var(--ef-color-text-secondary, #686d68);
+    font-size: 0.75rem;
+  }
+
+  .ef-conversation {
+    min-inline-size: 0;
+    border: 1px solid var(--ef-color-border-functional, #3a403c);
+  }
+
+  .ef-conversation__header {
+    padding: 1rem;
+    border-block-end: 1px solid var(--ef-color-border-subtle, #e3e0d7);
+  }
+
+  .ef-conversation__turns {
+    display: grid;
+    gap: 0;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .ef-turn {
+    display: grid;
+    grid-template-columns: minmax(6rem, 0.22fr) minmax(0, 1fr);
+    gap: 0.75rem 1rem;
+    padding: 1rem;
+    border-block-end: 1px solid var(--ef-color-border-subtle, #e3e0d7);
+  }
+
+  .ef-turn[data-ef-speaker="assistant"] {
+    background: var(--ef-color-surface-secondary, #e3e0d7);
+  }
+
+  .ef-turn__speaker {
+    margin: 0;
+    color: var(--ef-color-text-secondary, #686d68);
+    font-family: var(--ef-primitive-font-family-mono, ui-monospace, monospace);
+    font-size: 0.6875rem;
+    font-weight: 800;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+  }
+
+  .ef-turn__content { min-inline-size: 0; }
+  .ef-turn__content > :first-child { margin-block-start: 0; }
+  .ef-turn__content > :last-child { margin-block-end: 0; }
+  .ef-turn__actions { grid-column: 2; }
+
+  .ef-understanding {
+    border: 1px solid var(--ef-color-border-functional, #3a403c);
+  }
+
+  .ef-understanding__header {
+    display: flex;
+    justify-content: space-between;
+    align-items: start;
+    gap: 1rem;
+    padding: 1rem;
+    border-block-end: 1px solid var(--ef-color-border-subtle, #e3e0d7);
+  }
+
+  .ef-understanding__items {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .ef-understanding__item {
+    display: grid;
+    grid-template-columns: minmax(6rem, auto) minmax(0, 1fr) auto;
+    align-items: center;
+    gap: 1rem;
+    padding: 1rem;
+    border-block-end: 1px solid var(--ef-color-border-subtle, #e3e0d7);
+  }
+
+  .ef-understanding__item[data-ef-state="unknown"],
+  .ef-understanding__item[data-ef-state="conflict"] {
+    border-inline-start: 0.3rem solid var(--ef-color-accent-primary, #905831);
+    padding-inline-start: 0.7rem;
+  }
+
+  .ef-understanding__state {
+    font-family: var(--ef-primitive-font-family-mono, ui-monospace, monospace);
+    font-size: 0.6875rem;
+    font-weight: 800;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+  }
+
+  .ef-understanding__item[data-ef-state="accepted"] .ef-understanding__state::before { content: "✓ "; }
+  .ef-understanding__item[data-ef-state="unknown"] .ef-understanding__state::before { content: "? "; }
+  .ef-understanding__item[data-ef-state="conflict"] .ef-understanding__state::before { content: "! "; }
+  .ef-understanding__item p { margin: 0.2rem 0 0; color: var(--ef-color-text-secondary, #686d68); }
+
+  @media (max-width: 40rem) {
+    .ef-composer__actions,
+    .ef-understanding__header { align-items: stretch; flex-direction: column; }
+
+    .ef-composer__input-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
+    .ef-composer__actions button { min-block-size: 2.75rem; }
+    .ef-composer__submit { inline-size: 100%; }
+
+    .ef-turn { grid-template-columns: 1fr; }
+    .ef-turn__actions { grid-column: 1; }
+    .ef-turn__actions button { inline-size: 100%; }
+
+    .ef-understanding__item { grid-template-columns: 1fr; align-items: stretch; }
+    .ef-understanding__item button { inline-size: 100%; }
+  }
+
+  @media (forced-colors: active) {
+    .ef-composer,
+    .ef-conversation,
+    .ef-understanding,
+    .ef-understanding__item[data-ef-state="unknown"],
+    .ef-understanding__item[data-ef-state="conflict"] {
+      border-color: CanvasText;
+    }
+  }
+
+}