/* Safari 17.x bug: `:scope*:hover [descendant]` (Flavor A) and
   `:scope[checked] [descendant]` (Flavor B — attribute-removal restyle)
   both fail inside `@scope`. Selectors moved out. See
   docs/BROWSER-COMPAT.md §3a. */
radio-ui:not([disabled]):hover [slot="dot"] {
  border-color: var(--radio-border-hover, var(--radio-border-hover-default));
  background: var(--radio-bg-hover, var(--radio-bg-hover-default));
}
radio-ui[checked]:not([disabled]):hover [slot="dot"] {
  background: var(--radio-bg-checked-hover, var(--radio-bg-checked-hover-default));
  border-color: var(--radio-bg-checked-hover, var(--radio-bg-checked-hover-default));
}
radio-ui[checked] [slot="dot"] {
  background: var(--radio-bg-checked, var(--radio-bg-checked-default));
  border-color: var(--radio-border-checked, var(--radio-border-checked-default));
}
radio-ui[checked] [slot="dot"]::after {
  width: calc(var(--radio-size, var(--radio-size-default)) * 0.6);
  height: calc(var(--radio-size, var(--radio-size-default)) * 0.6);
}

@scope (radio-ui) {
  :where(:scope) {
    /* ── Layout ── (size scales with universal [size] attribute via --a-toggle-size) */
    --radio-size-default:             var(--a-toggle-size);
    --radio-gap-default:              var(--a-space-2);
    --radio-radius-default:           var(--a-radius-full);

    /* ── Colors ── */
    --radio-bg-default:               var(--a-ui-bg);
    --radio-border-default:           var(--a-ui-border);
    --radio-border-hover-default:     var(--a-fg-subtle);
    --radio-bg-hover-default:         var(--a-bg-muted);

    /* ── State: checked ── */
    --radio-bg-checked-default:       var(--a-primary);
    --radio-border-checked-default:   var(--a-primary);
    --radio-fg-checked-default:       var(--a-chrome-light);
    --radio-bg-checked-hover-default: var(--a-primary-hover);

    /* ── State: disabled ── */
    --radio-fg-disabled-default:      var(--a-ui-text-disabled);

    /* ── State: focus ── */
    --radio-focus-ring-default:       var(--a-focus-ring);

    /* ── Typography ── */
    --radio-font-size-default:        var(--a-ui-size);

    /* ── Transition ── */
    --radio-duration-default:         var(--a-duration-fast);
    --radio-easing-default:           var(--a-easing);
    text-align: start;  /* §text-align-reset — blocks inheritance from centered ancestors */
}

  :scope {
    /* ── Base ── */
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    gap: var(--radio-gap, var(--radio-gap-default));
    cursor: pointer;
    user-select: none;
    font-size: var(--radio-font-size, var(--radio-font-size-default));
    outline: none;
  }
  :scope[disabled] { cursor: not-allowed; color: var(--radio-fg-disabled, var(--radio-fg-disabled-default)); }

  /* Dot */
  [slot="dot"] {
    flex-shrink: 0;
    width: var(--radio-size, var(--radio-size-default));
    height: var(--radio-size, var(--radio-size-default));
    border: 1.5px solid var(--radio-border, var(--radio-border-default));
    border-radius: var(--radio-radius, var(--radio-radius-default));
    background: var(--radio-bg, var(--radio-bg-default));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition:
      background var(--radio-duration, var(--radio-duration-default)) var(--radio-easing, var(--radio-easing-default)),
      border-color var(--radio-duration, var(--radio-duration-default)) var(--radio-easing, var(--radio-easing-default));
  }

  /* Inner dot — scales from 0 to 40% when checked */
  [slot="dot"]::after {
    content: '';
    width: 0;
    height: 0;
    border-radius: var(--radio-radius, var(--radio-radius-default));
    background: var(--radio-fg-checked, var(--radio-fg-checked-default));
    transition:
      width var(--radio-duration, var(--radio-duration-default)) var(--radio-easing, var(--radio-easing-default)),
      height var(--radio-duration, var(--radio-duration-default)) var(--radio-easing, var(--radio-easing-default));
  }

  /* hover + [checked] rules moved outside @scope — see Safari 17.x bug note at top. */

  /* Label */
  :scope[label]::after { content: attr(label); }

  /* Focus */
  :scope:focus-visible [slot="dot"] { box-shadow: var(--radio-focus-ring, var(--radio-focus-ring-default)); }

  /* Size handled by universal [size] attribute system. */
}
