/* 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;
    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) { font: inherit; }

  :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 { 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); }

  @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 {
  .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;
  }

  /* 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;
    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-primitive-motion-duration-standard, 180ms) var(--ef-primitive-motion-easing-standard, ease),
      border-color var(--ef-primitive-motion-duration-standard, 180ms) var(--ef-primitive-motion-easing-standard, ease);
  }

  .ef-switch__track::after {
    content: "";
    position: absolute;
    inset-block-start: var(--ef-switch-gap);
    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);
    transform: translateX(0);
    transition:
      transform var(--ef-primitive-motion-duration-standard, 180ms) var(--ef-primitive-motion-easing-standard, ease),
      scale var(--ef-primitive-motion-duration-fast, 120ms) var(--ef-primitive-motion-easing-standard, ease);
  }

  .ef-switch__input:checked + .ef-switch__track {
    background: var(--ef-color-control-active, #905831);
  }

  .ef-switch__input:checked + .ef-switch__track::after {
    transform: translateX(calc(var(--ef-switch-width) - var(--ef-switch-thumb) - (2 * var(--ef-switch-gap))));
  }

  .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;
  }

  /* Slider -------------------------------------------------------------- */
  .ef-slider {
    display: grid;
    gap: var(--ef-primitive-spacing-2, 0.5rem);
  }

  .ef-slider__header,
  .ef-slider__bounds {
    display: flex;
    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 {
    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;
    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 {
    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);
    transition: rotate var(--ef-primitive-motion-duration-standard, 180ms) var(--ef-primitive-motion-easing-standard, ease);
  }
  .ef-disclosure[open] > summary::after { rotate: 45deg; }
  .ef-disclosure__content { padding: 0 0 1rem; }

  /* Popover ------------------------------------------------------------- */
  .ef-popover {
    max-inline-size: min(30rem, calc(100vw - 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);
    opacity: 0;
    transform: translateY(-0.35rem) scale(0.985);
    transition:
      opacity var(--ef-primitive-motion-duration-fast, 120ms) var(--ef-primitive-motion-easing-enter, ease),
      transform var(--ef-primitive-motion-duration-fast, 120ms) var(--ef-primitive-motion-easing-enter, ease),
      display var(--ef-primitive-motion-duration-fast, 120ms) allow-discrete,
      overlay var(--ef-primitive-motion-duration-fast, 120ms) allow-discrete;
  }

  .ef-popover:popover-open {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  @starting-style {
    .ef-popover:popover-open {
      opacity: 0;
      transform: translateY(-0.35rem) scale(0.985);
    }
  }

  /* Dialog -------------------------------------------------------------- */
  .ef-dialog {
    inline-size: min(38rem, calc(100vw - 2rem));
    max-block-size: calc(100dvh - 2rem);
    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);
    box-shadow: 0 1.5rem 4rem rgb(0 0 0 / 0.28);
    opacity: 0;
    transform: translateY(0.75rem) scale(0.985);
    transition:
      opacity var(--ef-primitive-motion-duration-standard, 180ms) var(--ef-primitive-motion-easing-enter, ease),
      transform var(--ef-primitive-motion-duration-standard, 180ms) var(--ef-primitive-motion-easing-enter, ease),
      display var(--ef-primitive-motion-duration-standard, 180ms) allow-discrete,
      overlay var(--ef-primitive-motion-duration-standard, 180ms) allow-discrete;
  }

  .ef-dialog[open] { opacity: 1; transform: translateY(0) scale(1); }
  .ef-dialog::backdrop {
    background: rgb(23 26 24 / 0.48);
    backdrop-filter: blur(2px);
  }

  @starting-style {
    .ef-dialog[open] { opacity: 0; transform: translateY(0.75rem) scale(0.985); }
  }

  .ef-dialog__body { padding: var(--ef-primitive-spacing-5, 1.5rem); }
  .ef-dialog__actions {
    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);
  }

  @media (prefers-reduced-motion: reduce) {
    .ef-switch__track,
    .ef-switch__track::after,
    .ef-slider__input,
    .ef-segment,
    .ef-disclosure > summary::after,
    .ef-popover,
    .ef-dialog {
      transition-duration: 0.01ms;
    }
  }

  @media (forced-colors: active) {
    .ef-switch__track,
    .ef-segmented,
    .ef-popover,
    .ef-dialog {
      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; }
  }
}

@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 {
    display: flex;
    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 { font-weight: 650; }

  .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;
    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 {
    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 {
    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 {
    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 {
    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 {
    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 {
    display: inline-flex;
    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 { 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-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; }
    .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) auto auto; }
    .ef-pairwise__options { grid-template-columns: 1fr; }
    .ef-pairwise__versus { justify-self: center; }
  }

  @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;
    }
  }
}