@scope (agent-questions-ui) {
  :where(:scope) {
    /* ── Typography ── */
    --agent-questions-q-size-default:          var(--a-ui-md);
    --agent-questions-q-weight-default:        var(--a-weight-medium);
    --agent-questions-helper-size-default:     var(--a-ui-sm);
    --agent-questions-label-size-default:      var(--a-ui-md);
    --agent-questions-label-weight-default:    var(--a-weight-medium);
    --agent-questions-desc-size-default:       var(--a-ui-sm);

    /* ── Colors ── */
    --agent-questions-q-fg-default:            var(--a-fg);
    --agent-questions-helper-fg-default:       var(--a-fg-muted);
    --agent-questions-label-fg-default:        var(--a-fg);
    --agent-questions-desc-fg-default:         var(--a-fg-muted);
    --agent-questions-option-bg-default:       var(--a-bg);
    --agent-questions-option-bg-hover-default: var(--a-bg-subtle);
    --agent-questions-option-bg-sel-default:   var(--a-accent-muted);
    --agent-questions-option-border-default:   var(--a-border-subtle);
    --agent-questions-option-border-sel-default: var(--a-accent-bg);
    --agent-questions-check-bg-default:        var(--a-accent-bg);
    --agent-questions-check-fg-default:        var(--a-accent-fg);

    /* ── Layout ── */
    --agent-questions-gap-default:             var(--a-space-2);
    --agent-questions-option-gap-default:      var(--a-space-3);
    --agent-questions-option-padding-default:  var(--a-space-3);
    --agent-questions-option-radius-default:   var(--a-radius);
    --agent-questions-q-padding-default:       var(--a-space-1);
    --agent-questions-option-body-gap-default: var(--a-space-0-5);
    /* Component-intrinsic measurement; no --a-space-* equivalent */
    --agent-questions-check-size-default:      20px;

    /* ── Motion ── */
    --agent-questions-duration-default:        var(--a-duration-fast);
    --agent-questions-easing-default:          var(--a-easing-out);
  }

  :scope {
    display: flex;
    flex-direction: column;
    gap: var(--agent-questions-gap, var(--agent-questions-gap-default));
  }

  [data-questions-q] {
    font-size: var(--agent-questions-q-size, var(--agent-questions-q-size-default));
    font-weight: var(--agent-questions-q-weight, var(--agent-questions-q-weight-default));
    color: var(--agent-questions-q-fg, var(--agent-questions-q-fg-default));
    padding: var(--agent-questions-q-padding, var(--agent-questions-q-padding-default)) 0;
  }

  [data-questions-helper] {
    font-size: var(--agent-questions-helper-size, var(--agent-questions-helper-size-default));
    color: var(--agent-questions-helper-fg, var(--agent-questions-helper-fg-default));
    padding-block-end: var(--a-space-1);
  }

  [data-questions-options] {
    display: flex;
    flex-direction: column;
    gap: var(--agent-questions-gap, var(--agent-questions-gap-default));
  }

  [data-questions-option] {
    display: flex;
    /* Top-align so the leading icon stays with the label's first line
       when a description wraps below; we restore visual centering on
       the icon and check by nudging them to the label's first-line
       center via margin-top. Centering the whole row dragged the icon
       down to the body's vertical midpoint, which sat between label
       and description rather than on the label. */
    align-items: start;
    gap: var(--agent-questions-option-gap, var(--agent-questions-option-gap-default));
    padding: var(--agent-questions-option-padding, var(--agent-questions-option-padding-default));
    border: 1px solid var(--agent-questions-option-border, var(--agent-questions-option-border-default));
    border-radius: var(--agent-questions-option-radius, var(--agent-questions-option-radius-default));
    background: var(--agent-questions-option-bg, var(--agent-questions-option-bg-default));
    color: inherit;
    cursor: pointer;
    text-align: start;
    font: inherit;
    transition:
      background var(--agent-questions-duration, var(--agent-questions-duration-default)) var(--agent-questions-easing, var(--agent-questions-easing-default)),
      border-color var(--agent-questions-duration, var(--agent-questions-duration-default)) var(--agent-questions-easing, var(--agent-questions-easing-default));
    min-width: 0;
    width: 100%;
  }

  [data-questions-option]:hover {
    background: var(--agent-questions-option-bg-hover, var(--agent-questions-option-bg-hover-default));
  }

  [data-questions-option][data-selected] {
    background: var(--agent-questions-option-bg-sel, var(--agent-questions-option-bg-sel-default));
    border-color: var(--agent-questions-option-border-sel, var(--agent-questions-option-border-sel-default));
  }

  [data-questions-option][disabled] {
    cursor: default;
    opacity: 0.7;
  }

  [data-questions-option]:focus-visible {
    outline: 2px solid var(--agent-questions-option-border-sel, var(--agent-questions-option-border-sel-default));
    outline-offset: 2px;
  }

  [data-questions-option-icon] {
    flex-shrink: 0;
    /* Align the leading icon's center with the label's first-line
       center. `1.5em` matches the label's effective line-height
       (label is `font-size:` only — line-height inherits as 1.5).
       `var(--a-icon-size)` is icon-ui's rendered height. Centering
       the icon inside one line-box of the label's height puts its
       midpoint on the label's first-line midpoint. We use em on the
       icon's own font-size (which icon-ui keeps at the option's
       font-size) so the offset scales with whatever the consumer
       sets `--agent-questions-label-size` to. */
    margin-top: calc((1.5em - var(--a-icon-size, 1em)) / 2);
  }

  [data-questions-option-body] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--agent-questions-option-body-gap, var(--agent-questions-option-body-gap-default));
  }

  [data-questions-option-label] {
    font-size: var(--agent-questions-label-size, var(--agent-questions-label-size-default));
    font-weight: var(--agent-questions-label-weight, var(--agent-questions-label-weight-default));
    color: var(--agent-questions-label-fg, var(--agent-questions-label-fg-default));
  }

  [data-questions-option-desc] {
    font-size: var(--agent-questions-desc-size, var(--agent-questions-desc-size-default));
    color: var(--agent-questions-desc-fg, var(--agent-questions-desc-fg-default));
    line-height: 1.4;
  }

  [data-questions-option-check] {
    width: var(--agent-questions-check-size, var(--agent-questions-check-size-default));
    height: var(--agent-questions-check-size, var(--agent-questions-check-size-default));
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    opacity: 0;
    transition: opacity var(--agent-questions-duration, var(--agent-questions-duration-default)) var(--agent-questions-easing, var(--agent-questions-easing-default));
    /* Match the leading-icon offset so a row of [icon · label · check]
       reads as one horizontal line aligned to the label's first line. */
    margin-top: calc((1.5em - var(--agent-questions-check-size, var(--agent-questions-check-size-default))) / 2);
  }

  [data-questions-option][data-selected] [data-questions-option-check] {
    background: var(--agent-questions-check-bg, var(--agent-questions-check-bg-default));
    opacity: 1;
  }

  [data-questions-option][data-selected] [data-questions-option-check] icon-ui {
    color: var(--agent-questions-check-fg, var(--agent-questions-check-fg-default));
  }
}
