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

    /* ── Colors ── */
    --agent-questions-q-fg:            var(--md-sys-color-neutral-on-surface);
    --agent-questions-helper-fg:       var(--a-fg-muted);
    --agent-questions-label-fg:        var(--md-sys-color-neutral-on-surface);
    --agent-questions-desc-fg:         var(--a-fg-muted);
    --agent-questions-option-bg:       var(--md-sys-color-neutral-background);
    --agent-questions-option-bg-hover: var(--a-bg-subtle);
    --agent-questions-option-bg-sel:   var(--md-sys-color-primary-container);
    --agent-questions-option-border:   var(--md-sys-color-neutral-outline-variant);
    --agent-questions-option-border-sel: var(--a-primary-bg);

    /* ── Layout ── */
    --agent-questions-gap:             var(--a-space-2);
    --agent-questions-option-gap:      var(--a-space-3);
    --agent-questions-option-padding:  var(--a-space-3);
    --agent-questions-option-radius:   var(--a-radius);
    --agent-questions-q-padding:       var(--a-space-1);

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

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

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

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

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

  /* gh issue 276 wave 4: options render as <option-card-ui> now — it owns
     its own box model, borders, hover/checked/disabled states, focus ring,
     and heading/description/icon layout via its own @scope'd CSS. This
     re-points its token surface to agent-questions' existing tokens so the
     migration doesn't shift the look; it does not restyle the card itself.
     One deliberate visual difference: the selected indicator is now
     option-card-ui's authentic filled-radio-dot recipe (shared with
     plan-picker-ui) rather than the bespoke check-glyph badge the native
     buttons drew — that badge doesn't exist as an option-card-ui slot. */
  [data-questions-option] {
    --option-card-padding-block:  var(--agent-questions-option-padding);
    --option-card-padding-inline: var(--agent-questions-option-padding);
    --option-card-radius:         var(--agent-questions-option-radius);
    --option-card-gap-x:          var(--agent-questions-option-gap);
    --option-card-bg:             var(--agent-questions-option-bg);
    --option-card-border:         var(--agent-questions-option-border);
    --option-card-bg-hover:       var(--agent-questions-option-bg-hover);
    /* Match prior behavior: hover changed background only, never border. */
    --option-card-border-hover:   var(--agent-questions-option-border);
    --option-card-bg-checked:     var(--agent-questions-option-bg-sel);
    --option-card-border-checked: var(--agent-questions-option-border-sel);
    --option-card-heading-color:  var(--agent-questions-label-fg);
    --option-card-heading-weight: var(--agent-questions-label-weight);
    --option-card-heading-size:   var(--agent-questions-label-size);
    --option-card-desc-color:     var(--agent-questions-desc-fg);
    --option-card-desc-size:      var(--agent-questions-desc-size);
    --option-card-duration:       var(--agent-questions-duration);
    --option-card-easing:         var(--agent-questions-easing);
    width: 100%;
  }
}
