@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(--a-fg);
    --agent-questions-helper-fg:       var(--a-fg-muted);
    --agent-questions-label-fg:        var(--a-fg);
    --agent-questions-desc-fg:         var(--a-fg-muted);
    --agent-questions-option-bg:       var(--a-bg);
    --agent-questions-option-bg-hover: var(--a-bg-subtle);
    --agent-questions-option-bg-sel:   var(--a-accent-muted);
    --agent-questions-option-border:   var(--a-border-subtle);
    --agent-questions-option-border-sel: var(--a-accent-bg);
    --agent-questions-check-bg:        var(--a-accent-bg);
    --agent-questions-check-fg:        var(--a-accent-fg);

    /* ── 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);
    --agent-questions-option-body-gap: var(--a-space-0-5);
    /* Component-intrinsic measurement; no --a-space-* equivalent */
    --agent-questions-check-size:      20px;

    /* ── 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);
  }

  [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);
    padding: var(--agent-questions-option-padding);
    border: 1px solid var(--agent-questions-option-border);
    border-radius: var(--agent-questions-option-radius);
    background: var(--agent-questions-option-bg);
    color: inherit;
    cursor: pointer;
    text-align: start;
    font: inherit;
    /* font-family floor — see segment.css rationale (inline default). */
    font-family: var(--agent-questions-font-family, var(--a-font-family-ui));
    transition:
      background var(--agent-questions-duration) var(--agent-questions-easing),
      border-color var(--agent-questions-duration) var(--agent-questions-easing);
    min-width: 0;
    width: 100%;
  }

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

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

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

  [data-questions-option]:focus-visible {
    outline: 2px solid var(--agent-questions-option-border-sel);
    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);
  }

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

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

  [data-questions-option-check] {
    width: var(--agent-questions-check-size);
    height: var(--agent-questions-check-size);
    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-easing);
    /* 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)) / 2);
  }

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

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