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

package/dist/all.css

@@ -0,0 +1,3461 @@
+/* Generated from tokens/echelon.tokens.json. Do not edit directly. */
+@layer echelon.tokens {
+  :root {
+  --ef-primitive-color-carbon: #171a18;
+  --ef-primitive-color-forged-iron: #3a403c;
+  --ef-primitive-color-foundry-charcoal: #202421;
+  --ef-primitive-color-graphite: #686d68;
+  --ef-primitive-color-oxide-bronze: #905831;
+  --ef-primitive-color-oxide-bronze-light: #a87e5e;
+  --ef-primitive-color-parchment: #f2efe7;
+  --ef-primitive-color-stone: #e3e0d7;
+  --ef-primitive-color-verdigris: #47756b;
+  --ef-primitive-color-verdigris-light: #698d84;
+  --ef-primitive-font-family-display: Newsreader, Georgia, serif;
+  --ef-primitive-font-family-mono: "IBM Plex Mono", ui-monospace, monospace;
+  --ef-primitive-font-family-sans: Manrope, system-ui, sans-serif;
+  --ef-primitive-motion-duration-fast: 120ms;
+  --ef-primitive-motion-duration-instant: 0ms;
+  --ef-primitive-motion-duration-slow: 280ms;
+  --ef-primitive-motion-duration-standard: 180ms;
+  --ef-primitive-motion-easing-enter: cubic-bezier(0, 0, 0.2, 1);
+  --ef-primitive-motion-easing-exit: cubic-bezier(0.4, 0, 1, 1);
+  --ef-primitive-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
+  --ef-primitive-radius-medium: 8px;
+  --ef-primitive-radius-none: 0px;
+  --ef-primitive-radius-pill: 999px;
+  --ef-primitive-radius-small: 4px;
+  --ef-primitive-spacing-1: 4px;
+  --ef-primitive-spacing-2: 8px;
+  --ef-primitive-spacing-3: 12px;
+  --ef-primitive-spacing-4: 16px;
+  --ef-primitive-spacing-5: 24px;
+  --ef-primitive-spacing-6: 32px;
+  --ef-primitive-spacing-7: 48px;
+  --ef-primitive-spacing-8: 64px;
+}
+  :root, [data-ef-theme="light"] {
+  --ef-color-accent-primary: #905831;
+  --ef-color-accent-secondary: #47756b;
+  --ef-color-border-functional: #3a403c;
+  --ef-color-border-subtle: #e3e0d7;
+  --ef-color-control-active: #905831;
+  --ef-color-control-thumb: #f2efe7;
+  --ef-color-control-track: #686d68;
+  --ef-color-focus-gap: #f2efe7;
+  --ef-color-focus-ring: #171a18;
+  --ef-color-surface-inverse: #202421;
+  --ef-color-surface-inverse-secondary: #3a403c;
+  --ef-color-surface-primary: #f2efe7;
+  --ef-color-surface-secondary: #e3e0d7;
+  --ef-color-text-heading: #202421;
+  --ef-color-text-inverse: #f2efe7;
+  --ef-color-text-on-secondary-surface: #3a403c;
+  --ef-color-text-primary: #171a18;
+  --ef-color-text-secondary: #686d68;
+}
+  @media (prefers-color-scheme: dark) {
+    :root:not([data-ef-theme]) {
+  --ef-color-accent-primary: #a87e5e;
+  --ef-color-accent-secondary: #698d84;
+  --ef-color-border-functional: #e3e0d7;
+  --ef-color-border-subtle: #3a403c;
+  --ef-color-control-active: #a87e5e;
+  --ef-color-control-thumb: #f2efe7;
+  --ef-color-control-track: #686d68;
+  --ef-color-focus-gap: #171a18;
+  --ef-color-focus-ring: #f2efe7;
+  --ef-color-surface-inverse: #f2efe7;
+  --ef-color-surface-inverse-secondary: #e3e0d7;
+  --ef-color-surface-primary: #171a18;
+  --ef-color-surface-secondary: #202421;
+  --ef-color-text-heading: #f2efe7;
+  --ef-color-text-inverse: #171a18;
+  --ef-color-text-on-secondary-surface: #f2efe7;
+  --ef-color-text-primary: #f2efe7;
+  --ef-color-text-secondary: #e3e0d7;
+}
+  }
+  [data-ef-theme="dark"] {
+  --ef-color-accent-primary: #a87e5e;
+  --ef-color-accent-secondary: #698d84;
+  --ef-color-border-functional: #e3e0d7;
+  --ef-color-border-subtle: #3a403c;
+  --ef-color-control-active: #a87e5e;
+  --ef-color-control-thumb: #f2efe7;
+  --ef-color-control-track: #686d68;
+  --ef-color-focus-gap: #171a18;
+  --ef-color-focus-ring: #f2efe7;
+  --ef-color-surface-inverse: #f2efe7;
+  --ef-color-surface-inverse-secondary: #e3e0d7;
+  --ef-color-surface-primary: #171a18;
+  --ef-color-surface-secondary: #202421;
+  --ef-color-text-heading: #f2efe7;
+  --ef-color-text-inverse: #171a18;
+  --ef-color-text-on-secondary-surface: #f2efe7;
+  --ef-color-text-primary: #f2efe7;
+  --ef-color-text-secondary: #e3e0d7;
+}
+}
+
+@layer echelon.foundations {
+  *, *::before, *::after { box-sizing: border-box; }
+
+  :where(html) {
+    color-scheme: light dark;
+    -webkit-text-size-adjust: 100%;
+    text-size-adjust: 100%;
+    font-family: var(--ef-primitive-font-family-sans, system-ui, sans-serif);
+    background: var(--ef-color-surface-primary, #f2efe7);
+    color: var(--ef-color-text-primary, #171a18);
+  }
+
+  :where(body) {
+    margin: 0;
+    background: var(--ef-color-surface-primary, #f2efe7);
+    color: var(--ef-color-text-primary, #171a18);
+    font-family: var(--ef-primitive-font-family-sans, system-ui, sans-serif);
+    font-size: 1rem;
+    line-height: 1.6;
+  }
+
+  :where(h1, h2) {
+    color: var(--ef-color-text-heading, #202421);
+    font-family: var(--ef-primitive-font-family-display, Georgia, serif);
+    font-weight: 500;
+    letter-spacing: -0.03em;
+    line-height: 1.02;
+  }
+
+  :where(h3, h4, h5, h6) {
+    color: var(--ef-color-text-heading, #202421);
+    line-height: 1.25;
+  }
+
+  :where(p) {
+    color: var(--ef-color-text-secondary, #686d68);
+    max-inline-size: 72ch;
+  }
+
+  :where(a) {
+    color: var(--ef-color-accent-primary, #905831);
+    text-decoration-thickness: 0.08em;
+    text-underline-offset: 0.18em;
+  }
+
+  :where(button, input, select, textarea) {
+    max-inline-size: 100%;
+    font: inherit;
+  }
+
+  :where(img, picture, video, canvas, svg) {
+    max-inline-size: 100%;
+  }
+
+  :where(img, video, canvas) {
+    block-size: auto;
+  }
+
+  :where(button, .ef-button) {
+    min-block-size: 2.75rem;
+    padding: 0.65rem 1rem;
+    border: 1px solid var(--ef-color-border-functional, #3a403c);
+    border-radius: var(--ef-primitive-radius-none, 0);
+    background: var(--ef-color-surface-primary, #f2efe7);
+    color: var(--ef-color-text-primary, #171a18);
+    font-weight: 700;
+  }
+
+  :where(button, .ef-button):where(:not(:disabled)):hover {
+    background: var(--ef-color-surface-secondary, #e3e0d7);
+  }
+
+  :where(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) {
+    min-block-size: 2.75rem;
+    inline-size: 100%;
+    padding: 0.7rem 0.8rem;
+    border: 1px solid var(--ef-color-border-functional, #3a403c);
+    border-radius: var(--ef-primitive-radius-none, 0);
+    background: var(--ef-color-surface-primary, #f2efe7);
+    color: var(--ef-color-text-primary, #171a18);
+  }
+
+  :where(: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);
+  }
+
+  .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-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 { 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); }
+
+  :where(h1, h2, h3, h4, h5, h6, p, a, label, legend, td, th) {
+    overflow-wrap: anywhere;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    *, *::before, *::after {
+      scroll-behavior: auto !important;
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !important;
+    }
+  }
+
+  @media (forced-colors: active) {
+    :where(button, .ef-button, input, textarea, select, .ef-surface) {
+      border-color: CanvasText;
+    }
+  }
+}
+
+@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;
+    }
+  }
+
+}
+
+@layer echelon.assessment {
+  /* Question shell ------------------------------------------------------ */
+  .ef-question {
+    display: grid;
+    gap: var(--ef-primitive-spacing-4, 1rem);
+    padding-block: var(--ef-primitive-spacing-5, 1.5rem);
+    border-block-end: 1px solid var(--ef-color-border-subtle, #e3e0d7);
+  }
+
+  .ef-question__header {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr);
+    align-items: start;
+    gap: var(--ef-primitive-spacing-3, 0.75rem);
+  }
+
+  .ef-question__number {
+    min-inline-size: 2rem;
+    block-size: 2rem;
+    display: grid;
+    place-items: center;
+    border: 1px solid var(--ef-color-border-functional, #3a403c);
+    border-radius: 50%;
+    font-family: var(--ef-primitive-font-family-mono, ui-monospace, monospace);
+    font-size: 0.75rem;
+    font-weight: 700;
+  }
+
+  .ef-question__prompt {
+    margin: 0;
+    color: var(--ef-color-text-heading, #202421);
+    font-family: var(--ef-primitive-font-family-sans, system-ui, sans-serif);
+    font-size: clamp(1rem, 0.95rem + 0.25vw, 1.2rem);
+    font-weight: 700;
+    letter-spacing: 0;
+    line-height: 1.35;
+  }
+
+  .ef-question__help {
+    margin: 0.35rem 0 0;
+    color: var(--ef-color-text-secondary, #686d68);
+    font-size: 0.875rem;
+  }
+
+  .ef-question__body { min-inline-size: 0; }
+
+  /* Ordinal / Likert scale --------------------------------------------- */
+  .ef-ordinal-scale,
+  .ef-choice-group,
+  .ef-special-choice-group,
+  .ef-ranking,
+  .ef-allocation {
+    min-inline-size: 0;
+    margin: 0;
+    padding: 0;
+    border: 0;
+  }
+
+  .ef-ordinal-scale__legend,
+  .ef-choice-group__legend,
+  .ef-ranking__legend,
+  .ef-allocation__legend {
+    margin-block-end: var(--ef-primitive-spacing-3, 0.75rem);
+    color: var(--ef-color-text-primary, #171a18);
+    font-size: 1rem;
+    font-weight: 700;
+    line-height: 1.4;
+  }
+
+  .ef-ordinal-scale__options {
+    display: grid;
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+    border: 1px solid var(--ef-color-border-functional, #3a403c);
+  }
+
+  .ef-ordinal-scale--3 .ef-ordinal-scale__options { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+  .ef-ordinal-scale--4 .ef-ordinal-scale__options { grid-template-columns: repeat(4, minmax(0, 1fr)); }
+  .ef-ordinal-scale--5 .ef-ordinal-scale__options { grid-template-columns: repeat(5, minmax(0, 1fr)); }
+  .ef-ordinal-scale--6 .ef-ordinal-scale__options { grid-template-columns: repeat(6, minmax(0, 1fr)); }
+  .ef-ordinal-scale--7 .ef-ordinal-scale__options { grid-template-columns: repeat(7, minmax(0, 1fr)); }
+  .ef-ordinal-scale--10 .ef-ordinal-scale__options { grid-template-columns: repeat(10, minmax(0, 1fr)); }
+  .ef-ordinal-scale--11 .ef-ordinal-scale__options { grid-template-columns: repeat(11, minmax(0, 1fr)); }
+
+  .ef-ordinal-option {
+    position: relative;
+    min-inline-size: 0;
+    min-block-size: 5.5rem;
+    display: grid;
+    grid-template-rows: auto 1fr;
+    place-items: center;
+    gap: 0.45rem;
+    padding: 0.75rem 0.45rem;
+    background: var(--ef-color-surface-primary, #f2efe7);
+    color: var(--ef-color-text-primary, #171a18);
+    text-align: center;
+    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-ordinal-option + .ef-ordinal-option {
+    border-inline-start: 1px solid var(--ef-color-border-subtle, #e3e0d7);
+  }
+
+  .ef-ordinal-option input,
+  .ef-choice input,
+  .ef-special-choice input {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    opacity: 0;
+  }
+
+  .ef-ordinal-option__marker {
+    inline-size: 2rem;
+    block-size: 2rem;
+    display: grid;
+    place-items: center;
+    border: 1px solid var(--ef-color-border-functional, #3a403c);
+    border-radius: 50%;
+    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.75rem;
+    font-weight: 700;
+  }
+
+  .ef-ordinal-option__label {
+    align-self: start;
+    font-size: 0.8125rem;
+    line-height: 1.25;
+    overflow-wrap: anywhere;
+  }
+
+  .ef-ordinal-option:hover { background: var(--ef-color-surface-secondary, #e3e0d7); }
+  .ef-ordinal-option:has(input:active) { transform: scale(0.985); }
+
+  .ef-ordinal-option:has(input:checked) {
+    background: var(--ef-color-surface-inverse, #202421);
+    color: var(--ef-color-text-inverse, #f2efe7);
+  }
+
+  .ef-ordinal-option:has(input:checked) .ef-ordinal-option__marker {
+    background: var(--ef-color-accent-primary, #905831);
+    color: var(--ef-color-text-inverse, #f2efe7);
+    border-color: currentColor;
+  }
+
+  .ef-ordinal-option:has(input:focus-visible),
+  .ef-choice:has(input:focus-visible),
+  .ef-special-choice:has(input:focus-visible) {
+    z-index: 1;
+    outline: 3px solid var(--ef-color-focus-gap, #f2efe7);
+    outline-offset: 2px;
+    box-shadow: 0 0 0 5px var(--ef-color-focus-ring, #171a18);
+  }
+
+  /* Special answer states ---------------------------------------------- */
+  .ef-special-choices {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--ef-primitive-spacing-2, 0.5rem);
+    margin-block-start: var(--ef-primitive-spacing-3, 0.75rem);
+    padding-block-start: var(--ef-primitive-spacing-3, 0.75rem);
+    border-block-start: 1px dashed var(--ef-color-border-functional, #3a403c);
+  }
+
+  .ef-special-choice {
+    position: relative;
+    min-block-size: 2.75rem;
+    display: inline-flex;
+    align-items: center;
+    padding: 0.55rem 0.85rem;
+    border: 1px solid var(--ef-color-border-functional, #3a403c);
+    background: var(--ef-color-surface-primary, #f2efe7);
+    color: var(--ef-color-text-primary, #171a18);
+    cursor: pointer;
+  }
+
+  .ef-special-choice:has(input:checked) {
+    background: var(--ef-color-surface-inverse, #202421);
+    color: var(--ef-color-text-inverse, #f2efe7);
+  }
+
+  /* Choice cards -------------------------------------------------------- */
+  .ef-choice-group {
+    display: grid;
+    gap: var(--ef-primitive-spacing-2, 0.5rem);
+  }
+
+  .ef-choice {
+    position: relative;
+    min-block-size: 3.25rem;
+    display: grid;
+    align-items: center;
+    padding: 0.8rem 1rem 0.8rem 3rem;
+    border: 1px solid var(--ef-color-border-functional, #3a403c);
+    background: var(--ef-color-surface-primary, #f2efe7);
+    cursor: pointer;
+    transition:
+      background var(--ef-primitive-motion-duration-fast, 120ms) var(--ef-primitive-motion-easing-standard, ease),
+      border-color var(--ef-primitive-motion-duration-fast, 120ms) var(--ef-primitive-motion-easing-standard, ease);
+  }
+
+  .ef-choice::before {
+    content: "";
+    position: absolute;
+    inset-block-start: 50%;
+    inset-inline-start: 1rem;
+    transform: translateY(-50%);
+    inline-size: 1.125rem;
+    block-size: 1.125rem;
+    border: 2px solid var(--ef-color-border-functional, #3a403c);
+    border-radius: 50%;
+    background: var(--ef-color-surface-primary, #f2efe7);
+  }
+
+  .ef-choice:has(input[type="checkbox"])::before { border-radius: 0.2rem; }
+
+  .ef-choice:has(input:checked) {
+    border-color: var(--ef-color-accent-primary, #905831);
+    background: var(--ef-color-surface-secondary, #e3e0d7);
+  }
+
+  .ef-choice:has(input:checked)::before {
+    background:
+      radial-gradient(circle, var(--ef-color-accent-primary, #905831) 0 42%, transparent 44%);
+    border-color: var(--ef-color-accent-primary, #905831);
+  }
+
+  .ef-choice:has(input[type="checkbox"]:checked)::before {
+    background: var(--ef-color-accent-primary, #905831);
+    box-shadow: inset 0 0 0 3px var(--ef-color-surface-primary, #f2efe7);
+  }
+
+  .ef-ordinal-option:has(input:disabled),
+  .ef-choice:has(input:disabled),
+  .ef-special-choice:has(input:disabled) {
+    opacity: 0.62;
+    cursor: not-allowed;
+  }
+
+  .ef-choice__content {
+    display: grid;
+    gap: 0.15rem;
+  }
+
+  .ef-choice__content > span {
+    color: var(--ef-color-text-secondary, #686d68);
+    font-size: 0.8125rem;
+  }
+
+  /* Validation ---------------------------------------------------------- */
+  .ef-validation-message {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--ef-primitive-spacing-2, 0.5rem);
+    margin: 0.5rem 0 0;
+    color: var(--ef-color-text-primary, #171a18);
+    font-size: 0.875rem;
+    font-weight: 650;
+  }
+
+  .ef-validation-message__mark,
+  .ef-validation-summary__icon {
+    flex: 0 0 auto;
+    inline-size: 1.5rem;
+    block-size: 1.5rem;
+    display: grid;
+    place-items: center;
+    border: 1px solid currentColor;
+    border-radius: 50%;
+    font-family: var(--ef-primitive-font-family-mono, ui-monospace, monospace);
+    font-weight: 800;
+  }
+
+  .ef-validation-summary {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr);
+    gap: var(--ef-primitive-spacing-3, 0.75rem);
+    padding: var(--ef-primitive-spacing-4, 1rem);
+    border: 2px solid var(--ef-color-accent-primary, #905831);
+    background: var(--ef-color-surface-secondary, #e3e0d7);
+    color: var(--ef-color-text-on-secondary-surface, #3a403c);
+  }
+
+  .ef-validation-summary__title {
+    margin: 0;
+    font-family: var(--ef-primitive-font-family-sans, system-ui, sans-serif);
+    font-size: 1rem;
+    letter-spacing: 0;
+    line-height: 1.35;
+  }
+
+  .ef-validation-summary__list {
+    margin: 0.5rem 0 0;
+    padding-inline-start: 1.25rem;
+  }
+
+  .ef-validation-summary a {
+    color: var(--ef-color-text-on-secondary-surface, #3a403c);
+    font-weight: 700;
+  }
+
+  /* Survey progress ----------------------------------------------------- */
+  .ef-survey-progress {
+    display: grid;
+    gap: var(--ef-primitive-spacing-2, 0.5rem);
+  }
+
+  .ef-survey-progress__header {
+    min-inline-size: 0;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    gap: 1rem;
+    align-items: baseline;
+  }
+
+  .ef-survey-progress__label { font-weight: 700; }
+  .ef-survey-progress__value {
+    color: var(--ef-color-text-secondary, #686d68);
+    font-family: var(--ef-primitive-font-family-mono, ui-monospace, monospace);
+    font-size: 0.75rem;
+  }
+
+  .ef-survey-progress__bar {
+    inline-size: 100%;
+    block-size: 0.65rem;
+    accent-color: var(--ef-color-accent-primary, #905831);
+  }
+
+  .ef-survey-progress__context {
+    margin: 0;
+    color: var(--ef-color-text-secondary, #686d68);
+    font-size: 0.8125rem;
+  }
+
+  /* Ranking visual contract -------------------------------------------- */
+  .ef-ranking__list {
+    display: grid;
+    gap: var(--ef-primitive-spacing-2, 0.5rem);
+    margin: var(--ef-primitive-spacing-3, 0.75rem) 0 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .ef-ranking__item {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr) auto;
+    align-items: center;
+    gap: var(--ef-primitive-spacing-3, 0.75rem);
+    min-block-size: 3.25rem;
+    padding: 0.6rem 0.75rem;
+    border: 1px solid var(--ef-color-border-functional, #3a403c);
+    background: var(--ef-color-surface-primary, #f2efe7);
+  }
+
+  .ef-ranking__position {
+    inline-size: 2rem;
+    block-size: 2rem;
+    display: grid;
+    place-items: center;
+    background: var(--ef-color-surface-inverse, #202421);
+    color: var(--ef-color-text-inverse, #f2efe7);
+    font-family: var(--ef-primitive-font-family-mono, ui-monospace, monospace);
+    font-size: 0.75rem;
+    font-weight: 800;
+  }
+
+  .ef-ranking__label {
+    min-inline-size: 0;
+    font-weight: 650;
+    overflow-wrap: anywhere;
+  }
+
+  .ef-ranking__actions {
+    display: inline-flex;
+    gap: 0.25rem;
+  }
+
+  .ef-ranking__actions button {
+    min-inline-size: 2.75rem;
+    min-block-size: 2.75rem;
+    padding: 0;
+  }
+
+  .ef-ranking__announcement {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    margin: -1px;
+    padding: 0;
+    overflow: hidden;
+    clip: rect(0 0 0 0);
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border: 0;
+  }
+
+  /* Allocation ---------------------------------------------------------- */
+  .ef-allocation__items {
+    display: grid;
+    gap: var(--ef-primitive-spacing-2, 0.5rem);
+  }
+
+  .ef-allocation__item {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(5rem, 7rem);
+    align-items: center;
+    gap: var(--ef-primitive-spacing-3, 0.75rem);
+  }
+
+  .ef-allocation__item input {
+    text-align: end;
+    font-variant-numeric: tabular-nums;
+  }
+
+  .ef-allocation__total {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    gap: 1rem;
+    margin-block-start: var(--ef-primitive-spacing-3, 0.75rem);
+    padding-block-start: var(--ef-primitive-spacing-3, 0.75rem);
+    border-block-start: 1px solid var(--ef-color-border-functional, #3a403c);
+    font-weight: 750;
+  }
+
+  .ef-allocation__total output {
+    font-family: var(--ef-primitive-font-family-mono, ui-monospace, monospace);
+    font-variant-numeric: tabular-nums;
+  }
+
+  .ef-allocation__total[data-ef-state="invalid"] {
+    border-block-start-width: 2px;
+    color: var(--ef-color-accent-primary, #905831);
+  }
+
+  /* Rule builder visual contract --------------------------------------- */
+  .ef-rule-builder {
+    min-inline-size: 0;
+    border: 1px solid var(--ef-color-border-functional, #3a403c);
+    background: var(--ef-color-surface-primary, #f2efe7);
+  }
+
+  .ef-rule-builder__header {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    gap: 1rem;
+    padding: var(--ef-primitive-spacing-4, 1rem);
+    border-block-end: 1px solid var(--ef-color-border-subtle, #e3e0d7);
+  }
+
+  .ef-rule-builder__header h2,
+  .ef-rule-builder__header p { margin: 0; }
+
+  .ef-rule-builder__header h2 {
+    font-family: var(--ef-primitive-font-family-sans, system-ui, sans-serif);
+    font-size: 1rem;
+    letter-spacing: 0;
+  }
+
+  .ef-rule-builder__header p {
+    margin-block-start: 0.25rem;
+    font-size: 0.8125rem;
+  }
+
+  .ef-rule-group {
+    position: relative;
+    display: grid;
+    gap: var(--ef-primitive-spacing-3, 0.75rem);
+    padding: var(--ef-primitive-spacing-4, 1rem);
+  }
+
+  .ef-rule-group__operator {
+    justify-self: start;
+    padding: 0.25rem 0.45rem;
+    border: 1px solid var(--ef-color-border-functional, #3a403c);
+    font-family: var(--ef-primitive-font-family-mono, ui-monospace, monospace);
+    font-size: 0.6875rem;
+    font-weight: 800;
+    letter-spacing: 0.08em;
+  }
+
+  .ef-rule-clause {
+    min-inline-size: 0;
+    display: grid;
+    grid-template-columns: minmax(8rem, 1.25fr) minmax(8rem, 1fr) minmax(8rem, 1fr) auto;
+    gap: var(--ef-primitive-spacing-2, 0.5rem);
+    align-items: end;
+  }
+
+  .ef-rule-clause label {
+    display: grid;
+    gap: 0.3rem;
+    font-size: 0.75rem;
+    font-weight: 700;
+  }
+
+  .ef-rule-builder__summary {
+    margin: 0;
+    padding: var(--ef-primitive-spacing-3, 0.75rem) var(--ef-primitive-spacing-4, 1rem);
+    border-block-start: 1px solid var(--ef-color-border-subtle, #e3e0d7);
+    background: var(--ef-color-surface-secondary, #e3e0d7);
+    color: var(--ef-color-text-on-secondary-surface, #3a403c);
+    font-size: 0.8125rem;
+  }
+
+  /* Ordo obligation panel ---------------------------------------------- */
+  .ef-obligation-panel {
+    min-inline-size: 0;
+    border: 1px solid var(--ef-color-border-functional, #3a403c);
+    background: var(--ef-color-surface-primary, #f2efe7);
+  }
+
+  .ef-obligation-panel__header {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    gap: 1rem;
+    padding: var(--ef-primitive-spacing-4, 1rem);
+    border-block-end: 1px solid var(--ef-color-border-subtle, #e3e0d7);
+  }
+
+  .ef-obligation-panel__header h2,
+  .ef-obligation-panel__header p { margin: 0; }
+
+  .ef-obligation-panel__header h2 {
+    font-family: var(--ef-primitive-font-family-sans, system-ui, sans-serif);
+    font-size: 1rem;
+    letter-spacing: 0;
+  }
+
+  .ef-obligation-panel__header p {
+    margin-block-start: 0.25rem;
+    font-size: 0.8125rem;
+  }
+
+  .ef-obligation-panel__count {
+    min-inline-size: 2rem;
+    block-size: 2rem;
+    display: grid;
+    place-items: center;
+    background: var(--ef-color-surface-inverse, #202421);
+    color: var(--ef-color-text-inverse, #f2efe7);
+    font-family: var(--ef-primitive-font-family-mono, ui-monospace, monospace);
+    font-size: 0.75rem;
+    font-weight: 800;
+  }
+
+  .ef-obligation-list {
+    display: grid;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .ef-obligation {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr) auto;
+    align-items: start;
+    gap: var(--ef-primitive-spacing-3, 0.75rem);
+    padding: var(--ef-primitive-spacing-4, 1rem);
+    border-inline-start: 4px solid var(--ef-color-border-functional, #3a403c);
+  }
+
+  .ef-obligation + .ef-obligation {
+    border-block-start: 1px solid var(--ef-color-border-subtle, #e3e0d7);
+  }
+
+  .ef-obligation[data-ef-severity="blocking"] { border-inline-start-color: var(--ef-color-accent-primary, #905831); }
+  .ef-obligation[data-ef-severity="warning"] { border-inline-start-style: double; }
+  .ef-obligation[data-ef-severity="information"] { border-inline-start-color: var(--ef-color-accent-secondary, #47756b); }
+
+  .ef-obligation__status {
+    min-inline-size: 5.5rem;
+    padding: 0.2rem 0.4rem;
+    border: 1px solid currentColor;
+    font-family: var(--ef-primitive-font-family-mono, ui-monospace, monospace);
+    font-size: 0.625rem;
+    font-weight: 800;
+    letter-spacing: 0.06em;
+    text-align: center;
+    text-transform: uppercase;
+  }
+
+  .ef-obligation p {
+    margin: 0.25rem 0 0;
+    font-size: 0.8125rem;
+  }
+
+
+  /* Selector completeness ---------------------------------------------- */
+  .ef-sr-only {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    margin: -1px;
+    padding: 0;
+    overflow: hidden;
+    clip: rect(0 0 0 0);
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border: 0;
+  }
+
+  .ef-binary-choice,
+  .ef-semantic-differential,
+  .ef-symbol-rating,
+  .ef-range-entry,
+  .ef-matrix,
+  .ef-best-worst,
+  .ef-hierarchy {
+    min-inline-size: 0;
+    margin: 0;
+    padding: 0;
+    border: 0;
+  }
+
+  .ef-binary-choice__legend,
+  .ef-semantic-differential__legend,
+  .ef-symbol-rating__legend,
+  .ef-range-entry__legend,
+  .ef-matrix__legend,
+  .ef-best-worst__legend,
+  .ef-hierarchy__legend {
+    margin-block-end: var(--ef-primitive-spacing-3, 0.75rem);
+    font-size: 1rem;
+    font-weight: 700;
+    line-height: 1.4;
+  }
+
+  .ef-binary-choice__options {
+    max-inline-size: 100%;
+    display: inline-grid;
+    grid-auto-flow: column;
+    grid-auto-columns: minmax(6rem, 1fr);
+    border: 1px solid var(--ef-color-border-functional, #3a403c);
+  }
+
+  .ef-binary-option {
+    position: relative;
+    min-block-size: 2.75rem;
+    display: grid;
+    place-items: center;
+    padding: 0.55rem 1rem;
+    cursor: pointer;
+    background: var(--ef-color-surface-primary, #f2efe7);
+  }
+
+  .ef-binary-option + .ef-binary-option { border-inline-start: 1px solid var(--ef-color-border-functional, #3a403c); }
+  .ef-binary-option input,
+  .ef-symbol-rating__option input,
+  .ef-semantic-differential__scale input {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    opacity: 0;
+  }
+
+  .ef-binary-option:has(input:checked),
+  .ef-symbol-rating__option:has(input:checked),
+  .ef-semantic-differential__scale label:has(input:checked) {
+    background: var(--ef-color-surface-inverse, #202421);
+    color: var(--ef-color-text-inverse, #f2efe7);
+  }
+
+  .ef-binary-option:has(input:focus-visible),
+  .ef-symbol-rating__option:has(input:focus-visible),
+  .ef-semantic-differential__scale label:has(input:focus-visible) {
+    z-index: 1;
+    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-semantic-differential__endpoints {
+    display: flex;
+    justify-content: space-between;
+    gap: 1rem;
+    margin-block-end: 0.4rem;
+    color: var(--ef-color-text-secondary, #686d68);
+    font-size: 0.8125rem;
+    font-weight: 650;
+  }
+
+  .ef-semantic-differential__endpoints--mobile { display: none; }
+
+  .ef-semantic-differential__scale {
+    max-inline-size: 100%;
+    display: grid;
+    grid-template-columns: repeat(7, minmax(2.75rem, 1fr));
+    border: 1px solid var(--ef-color-border-functional, #3a403c);
+  }
+
+  .ef-semantic-differential__scale label {
+    position: relative;
+    min-block-size: 3rem;
+    display: grid;
+    place-items: center;
+    cursor: pointer;
+    font-family: var(--ef-primitive-font-family-mono, ui-monospace, monospace);
+    font-weight: 750;
+  }
+
+  .ef-semantic-differential__scale label + label { border-inline-start: 1px solid var(--ef-color-border-subtle, #e3e0d7); }
+  .ef-semantic-differential__scale label > span[aria-hidden="true"] { pointer-events: none; }
+
+  .ef-semantic-differential__scale input {
+    inset: 0;
+    z-index: 1;
+    inline-size: 100%;
+    block-size: 100%;
+    margin: 0;
+    cursor: pointer;
+  }
+
+  .ef-symbol-rating__options {
+    max-inline-size: 100%;
+    display: inline-flex;
+    flex-wrap: wrap;
+    gap: 0.25rem;
+  }
+
+  .ef-symbol-rating__option {
+    position: relative;
+    min-inline-size: 2.75rem;
+    min-block-size: 2.75rem;
+    display: grid;
+    place-items: center;
+    border: 1px solid var(--ef-color-border-functional, #3a403c);
+    cursor: pointer;
+  }
+
+  .ef-symbol-rating__symbol {
+    font-size: 1.35rem;
+    line-height: 1;
+  }
+
+  .ef-numeric-stepper {
+    display: grid;
+    gap: var(--ef-primitive-spacing-2, 0.5rem);
+  }
+
+  .ef-numeric-stepper__label { font-weight: 700; }
+  .ef-numeric-stepper input { max-inline-size: 10rem; font-variant-numeric: tabular-nums; }
+
+  .ef-range-entry__inputs {
+    display: grid;
+    grid-template-columns: minmax(7rem, 1fr) auto minmax(7rem, 1fr);
+    align-items: end;
+    gap: var(--ef-primitive-spacing-2, 0.5rem);
+    max-inline-size: 30rem;
+  }
+
+  .ef-range-entry__inputs label {
+    display: grid;
+    gap: 0.3rem;
+    font-size: 0.8125rem;
+    font-weight: 700;
+  }
+
+  .ef-range-entry__separator { padding-block-end: 0.65rem; color: var(--ef-color-text-secondary, #686d68); }
+
+  .ef-range-entry__status,
+  .ef-selection-status,
+  .ef-best-worst__status {
+    margin: 0.5rem 0 0;
+    font-size: 0.8125rem;
+    font-weight: 650;
+  }
+
+  .ef-selection-guidance {
+    margin: 0 0 var(--ef-primitive-spacing-2, 0.5rem);
+    color: var(--ef-color-text-secondary, #686d68);
+    font-size: 0.8125rem;
+  }
+
+  .ef-choice--exclusive {
+    border-style: dashed;
+  }
+
+  .ef-choice--media {
+    grid-template-columns: minmax(5rem, 8rem) minmax(0, 1fr);
+    padding-inline-start: 1rem;
+  }
+
+  .ef-choice--media::before { display: none; }
+
+  .ef-choice__media {
+    display: grid;
+    place-items: center;
+    overflow: hidden;
+    border: 1px solid var(--ef-color-border-subtle, #e3e0d7);
+    background: var(--ef-color-surface-secondary, #e3e0d7);
+    aspect-ratio: 4 / 3;
+  }
+
+  .ef-choice__media img {
+    max-inline-size: 100%;
+    max-block-size: 100%;
+    object-fit: cover;
+  }
+
+  .ef-matrix__rows {
+    display: grid;
+    gap: var(--ef-primitive-spacing-2, 0.5rem);
+    margin-block-start: var(--ef-primitive-spacing-3, 0.75rem);
+  }
+
+  .ef-matrix__row {
+    display: grid;
+    grid-template-columns: minmax(10rem, 1.1fr) minmax(0, 3fr);
+    gap: var(--ef-primitive-spacing-3, 0.75rem);
+    align-items: stretch;
+    margin: 0;
+    padding: 0.6rem;
+    border: 1px solid var(--ef-color-border-functional, #3a403c);
+  }
+
+  .ef-matrix__row > legend {
+    float: inline-start;
+    inline-size: auto;
+    margin: 0;
+    padding: 0;
+    font-weight: 700;
+  }
+
+  .ef-matrix__choices {
+    display: grid;
+    grid-auto-flow: column;
+    grid-auto-columns: minmax(5rem, 1fr);
+    gap: 0.25rem;
+  }
+
+  .ef-matrix__choices label {
+    position: relative;
+    min-block-size: 2.75rem;
+    display: grid;
+    place-items: center;
+    padding: 0.4rem;
+    border: 1px solid var(--ef-color-border-subtle, #e3e0d7);
+    text-align: center;
+    cursor: pointer;
+    font-size: 0.75rem;
+  }
+
+  .ef-matrix__choices input {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    opacity: 0;
+  }
+
+  .ef-matrix__choices label:has(input:checked) {
+    background: var(--ef-color-surface-inverse, #202421);
+    color: var(--ef-color-text-inverse, #f2efe7);
+  }
+
+  .ef-matrix__choices label:has(input:focus-visible) {
+    outline: 3px solid var(--ef-color-focus-gap, #f2efe7);
+    outline-offset: 1px;
+    box-shadow: 0 0 0 4px var(--ef-color-focus-ring, #171a18);
+  }
+
+  .ef-best-worst__header,
+  .ef-best-worst__row {
+    display: grid;
+    grid-template-columns: minmax(10rem, 1fr) 4.5rem 4.5rem;
+    align-items: center;
+    gap: 0.25rem;
+  }
+
+  .ef-best-worst__header {
+    padding: 0.35rem 0.6rem;
+    color: var(--ef-color-text-secondary, #686d68);
+    font-size: 0.75rem;
+    font-weight: 700;
+    text-align: center;
+  }
+
+  .ef-best-worst__header > :first-child { text-align: start; }
+
+  .ef-best-worst__row {
+    min-block-size: 3rem;
+    padding: 0.5rem 0.6rem;
+    border: 1px solid var(--ef-color-border-functional, #3a403c);
+  }
+
+  .ef-best-worst__row + .ef-best-worst__row { border-block-start: 0; }
+  .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); }
+
+  .ef-pairwise {
+    min-inline-size: 0;
+    margin: 0;
+    padding: 0;
+    border: 0;
+  }
+
+  .ef-pairwise__legend {
+    margin-block-end: var(--ef-primitive-spacing-3, 0.75rem);
+    font-size: 1rem;
+    font-weight: 700;
+    line-height: 1.4;
+  }
+
+  .ef-pairwise__options {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+    align-items: stretch;
+    gap: var(--ef-primitive-spacing-2, 0.5rem);
+  }
+
+  .ef-pairwise__option {
+    position: relative;
+    min-block-size: 5rem;
+    display: grid;
+    align-content: center;
+    gap: 0.2rem;
+    padding: 0.85rem 1rem;
+    border: 1px solid var(--ef-color-border-functional, #3a403c);
+    background: var(--ef-color-surface-primary, #f2efe7);
+    cursor: pointer;
+  }
+
+  .ef-pairwise__option input {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    opacity: 0;
+  }
+
+  .ef-pairwise__option:has(input:checked) {
+    background: var(--ef-color-surface-inverse, #202421);
+    color: var(--ef-color-text-inverse, #f2efe7);
+  }
+
+  .ef-pairwise__option: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);
+  }
+
+  .ef-pairwise__eyebrow {
+    font-family: var(--ef-primitive-font-family-mono, ui-monospace, monospace);
+    font-size: 0.6875rem;
+    font-weight: 800;
+    letter-spacing: 0.05em;
+    text-transform: uppercase;
+  }
+
+  .ef-pairwise__option > span:last-child { font-size: 0.8125rem; }
+  .ef-pairwise__versus { align-self: center; color: var(--ef-color-text-secondary, #686d68); font-size: 0.8125rem; }
+
+  .ef-hierarchy__tree,
+  .ef-hierarchy__tree ul {
+    margin: 0;
+    padding-inline-start: 1.25rem;
+    list-style: none;
+  }
+
+  .ef-hierarchy__tree { padding-inline-start: 0; }
+  .ef-hierarchy details { border-inline-start: 2px solid var(--ef-color-border-subtle, #e3e0d7); padding-inline-start: 0.75rem; }
+  .ef-hierarchy summary { min-block-size: 2.75rem; display: flex; align-items: center; cursor: pointer; font-weight: 700; }
+  .ef-hierarchy label { min-block-size: 2.75rem; display: flex; align-items: center; gap: 0.5rem; }
+
+  @media (max-width: 44rem) {
+    .ef-ordinal-scale__options,
+    .ef-ordinal-scale--3 .ef-ordinal-scale__options,
+    .ef-ordinal-scale--4 .ef-ordinal-scale__options,
+    .ef-ordinal-scale--5 .ef-ordinal-scale__options,
+    .ef-ordinal-scale--6 .ef-ordinal-scale__options,
+    .ef-ordinal-scale--7 .ef-ordinal-scale__options,
+    .ef-ordinal-scale--10 .ef-ordinal-scale__options,
+    .ef-ordinal-scale--11 .ef-ordinal-scale__options {
+      grid-template-columns: 1fr;
+    }
+
+    .ef-ordinal-option {
+      min-block-size: 3.25rem;
+      grid-template-columns: auto minmax(0, 1fr);
+      grid-template-rows: auto;
+      place-items: center start;
+      text-align: start;
+      padding-inline: 0.75rem;
+    }
+
+    .ef-ordinal-option + .ef-ordinal-option {
+      border-inline-start: 0;
+      border-block-start: 1px solid var(--ef-color-border-subtle, #e3e0d7);
+    }
+
+    .ef-rule-builder__header,
+    .ef-obligation-panel__header {
+      align-items: stretch;
+      flex-direction: column;
+    }
+
+    .ef-rule-clause { grid-template-columns: 1fr; }
+    .ef-obligation { grid-template-columns: 1fr; }
+    .ef-obligation__status { justify-self: start; }
+
+    .ef-ranking__item {
+      grid-template-columns: auto minmax(0, 1fr);
+      align-items: start;
+    }
+
+    .ef-ranking__actions {
+      grid-column: 1 / -1;
+      inline-size: 100%;
+      display: grid;
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+
+    .ef-ranking__actions button {
+      min-inline-size: 0;
+      inline-size: 100%;
+    }
+
+    .ef-allocation__item {
+      grid-template-columns: 1fr;
+      align-items: stretch;
+    }
+
+    .ef-binary-choice__options {
+      inline-size: 100%;
+      grid-auto-flow: row;
+      grid-template-columns: 1fr;
+      grid-auto-columns: auto;
+    }
+
+    .ef-binary-option + .ef-binary-option {
+      border-inline-start: 0;
+      border-block-start: 1px solid var(--ef-color-border-functional, #3a403c);
+    }
+
+    .ef-semantic-differential__endpoints:not(.ef-semantic-differential__endpoints--mobile) { display: none; }
+    .ef-semantic-differential__endpoints--mobile { display: flex; }
+    .ef-semantic-differential__scale {
+      grid-template-columns: repeat(7, minmax(2.75rem, 1fr));
+      overflow-x: auto;
+      overscroll-behavior-inline: contain;
+      scrollbar-gutter: stable;
+    }
+    .ef-range-entry__inputs { grid-template-columns: 1fr; }
+    .ef-range-entry__separator { padding: 0; }
+    .ef-choice--media { grid-template-columns: 1fr; }
+    .ef-matrix__row { grid-template-columns: 1fr; }
+    .ef-matrix__choices { grid-auto-flow: row; grid-template-columns: 1fr; }
+    .ef-matrix__choices label { grid-template-columns: auto 1fr; justify-items: start; text-align: start; }
+    .ef-best-worst__header { display: none; }
+    .ef-best-worst__row {
+      grid-template-columns: minmax(0, 1fr) minmax(2.75rem, auto) minmax(2.75rem, auto);
+      padding-inline: 0.4rem;
+    }
+
+    .ef-pairwise__options { grid-template-columns: 1fr; }
+    .ef-pairwise__versus { justify-self: center; }
+
+    .ef-hierarchy__tree ul {
+      padding-inline-start: 0.75rem;
+    }
+
+    .ef-hierarchy details {
+      padding-inline-start: 0.5rem;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .ef-ordinal-option,
+    .ef-choice,
+    .ef-binary-option,
+    .ef-symbol-rating__option {
+      transition-duration: 0.01ms;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .ef-ordinal-scale__options,
+    .ef-ordinal-option,
+    .ef-special-choice,
+    .ef-choice,
+    .ef-validation-summary,
+    .ef-ranking__item,
+    .ef-rule-builder,
+    .ef-obligation-panel,
+    .ef-binary-choice__options,
+    .ef-semantic-differential__scale,
+    .ef-symbol-rating__option,
+    .ef-matrix__row,
+    .ef-best-worst__row,
+    .ef-pairwise__option {
+      border-color: CanvasText;
+    }
+
+    .ef-ordinal-option:has(input:checked),
+    .ef-special-choice:has(input:checked),
+    .ef-choice:has(input:checked),
+    .ef-binary-option:has(input:checked),
+    .ef-symbol-rating__option:has(input:checked),
+    .ef-semantic-differential__scale label:has(input:checked),
+    .ef-matrix__choices label:has(input:checked),
+    .ef-pairwise__option:has(input:checked) {
+      background: Highlight;
+      color: HighlightText;
+    }
+
+    .ef-ordinal-option:has(input:checked) .ef-ordinal-option__marker {
+      background: Highlight;
+      color: HighlightText;
+      border-color: HighlightText;
+    }
+
+    .ef-obligation {
+      border-inline-start-color: CanvasText;
+    }
+  }
+}